/* Arcade, movement coaching and player feedback share the existing lobby system. */
.lobby-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
body:not(.playing) #app{grid-template-areas:'header header' 'nav nav' 'experiences experiences' 'arena fighters' 'arcade arcade' 'goal goal' 'setup setup' 'footer footer'}
body:not(.playing) #app>.arcade-launch{grid-area:arcade}
.playing .arcade-launch{display:none}
.arcade-launch{position:relative;isolation:isolate;display:flex;align-items:center;gap:30px;overflow:hidden;min-height:164px;padding:28px 32px;text-align:left;border:1px solid #695937;border-radius:18px;background:#14171e}
.arcade-launch:after{position:absolute;content:'';inset:0;z-index:-1;background:linear-gradient(90deg,#0e1119 12%,#0e1119dd 54%,#0e111935)}
.arcade-launch>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 60%;opacity:.8}
.arcade-card-copy{flex:1;min-width:0}.arcade-card-copy>.eyebrow{font-size:8px;letter-spacing:1.3px;margin:0 0 10px;display:block}.arcade-card-copy>strong{font:900 italic 30px/1 Arial,sans-serif;letter-spacing:-.8px;text-transform:uppercase;display:block}.arcade-card-copy>span:not(.eyebrow){display:block;margin-top:10px;font-size:12px;color:#c3c5d1;line-height:1.5}.arcade-card-copy>small{display:block;color:#b5a883;margin-top:10px;font-size:8px;letter-spacing:1px}.arcade-card-action{display:flex;align-items:center;gap:20px;padding:13px 15px;background:#c9a24920;border:1px solid #c7a45a77;border-radius:10px;color:#f4d58a}.arcade-card-action b{font-size:10px;letter-spacing:.6px}.arcade-card-action>span{font-size:28px}.arcade-launch:hover{border-color:#d5b76f}
#arcade-dialog{width:840px;max-width:calc(100vw - 24px)}
#arcade-heading{font-size:43px;max-width:620px;line-height:1.02}
.arcade-intro{font-size:13px;line-height:1.6;color:#adb4c5;margin:14px 0 23px}
.arcade-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:24px}
.arcade-route{padding:0;margin:0;display:flex;flex-direction:column;gap:9px;list-style:none}
.arcade-stage{display:flex;align-items:center;gap:12px;padding:15px 12px;min-height:72px;border:1px solid #303641;background:#151923;border-radius:11px;color:#949cae}
.stage-index{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;background:#212632;color:#939caf;border-radius:8px;font-size:12px}.arcade-stage>div{flex:1}.arcade-stage strong{display:block;font-size:12px}.arcade-stage span{display:block;font-size:10px;margin-top:5px;color:#8f98aa}.arcade-stage>small{font-size:7px;letter-spacing:.4px;color:#6e788b}
.arcade-stage.current{border-color:#bc9b53;background:#2b251b;color:#f2d48c}.arcade-stage.current .stage-index{background:#b18b38;color:#12141b}.arcade-stage.current>small{color:#edca78}.arcade-stage.complete{border-color:#3f6e5c}.arcade-stage.complete .stage-index{background:#244438;color:#a3e5c3}.arcade-stage.complete>small{color:#8ac9ac}
.arcade-detail{padding:20px;border:1px solid #414352;border-radius:14px;background:linear-gradient(145deg,#20232e,#14171e)}.arcade-detail .label{color:#b3a06d;font-size:8px}.arcade-detail h3{font:800 24px/1.1 Arial,sans-serif;margin:0 0 17px;letter-spacing:-.5px}.arcade-opponent{display:flex;align-items:center;gap:13px;border-block:1px solid #363c4a;padding:12px 0}.arcade-opponent img{width:62px;height:65px;object-fit:cover;border-radius:9px;border:1px solid #61627b}.arcade-opponent strong{font-size:13px;display:block}.arcade-opponent span{font-size:8px;display:block;margin-top:7px;color:#a5b0c5;line-height:1.5;letter-spacing:.5px}.arcade-lesson{font-size:13px;line-height:1.5;color:#e4d4ad}.arcade-tactics{font-size:11px;line-height:1.7;color:#a4afc2}.arcade-note{font-size:10px;line-height:1.5;color:#a5afbf;margin:16px 0}.arcade-detail .primary{width:100%;font-size:11px;gap:12px}.arcade-detail .text-button{font-size:10px;color:#cdb887;min-height:40px}.arcade-status{font-size:11px;color:#e9cf98;line-height:1.6;margin:8px 0 0}.arcade-record{margin:22px 0 12px;padding-top:15px;border-top:1px solid #333947;display:flex;justify-content:space-between;gap:12px;align-items:center}.arcade-record>span{font-size:8px;letter-spacing:.7px;color:#9ba5b8}.arcade-record>strong{font-size:11px;color:#d6bf88;text-align:right}#arcade-dialog .local-note{line-height:1.6;font-size:10px;color:#9ba4b5}
.arcade-clear{text-align:center}.clear-symbol{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;border:1px solid #be994c;margin:4px auto 14px;background:linear-gradient(145deg,#5a4620,#221f1a);color:#ffe1a0;font-size:42px}.arcade-clear>strong{color:#f6d58d;display:block;font-size:13px;letter-spacing:2px}.arcade-clear>span{display:block;color:#929db0;font-size:8px;margin-top:24px;letter-spacing:1.4px}.arcade-clear>b{display:block;font:900 40px Arial,sans-serif;margin-top:6px}.arcade-clear>p{font-size:10px;line-height:1.6;color:#a3aec2}
.style-options button:last-child{grid-column:1/-1;min-height:58px}
.combat-feedback{position:absolute;top:125px;left:30px;z-index:4;max-width:min(355px,calc(100% - 60px));padding:10px 12px;background:#0c111de8;border:1px solid #73705b;border-left:3px solid #d6b36d;border-radius:8px;pointer-events:none;box-shadow:0 3px 15px #0004}.combat-feedback strong{display:block;font-size:10px;color:#eacb8a;letter-spacing:.8px}.combat-feedback>span{display:block;font-size:11px;color:#bac4d7;line-height:1.4;margin-top:5px}.combat-feedback[data-tone=danger]{border-left-color:#f37f6a}.combat-feedback[data-tone=guard]{border-left-color:#78cedf}
.result-panel .result-analysis{font-size:11px;line-height:1.6;color:#c3cbd9;margin:8px 0}.result-panel .result-arcade{font-size:11px;line-height:1.5;color:#ebcd87;margin:12px 0;padding:10px;background:#4e3d1c44;border:1px solid #80662c;border-radius:8px}.result-panel .result-tip{margin:12px 0 6px}.result-panel #result-practise{font-size:10px;min-height:36px;margin:4px 0 8px;padding:8px 12px}.result-panel .local-note{line-height:1.5}.result-panel .text-button{min-height:36px;margin-top:2px;padding:8px}.result-panel .result-rules{margin:8px 0}.result-panel .result-counter{margin:8px 0}
.movement-guide{border-top:1px solid #343b46;padding-top:23px;margin-top:27px}.movement-guide .eyebrow{margin-bottom:9px}.movement-guide h3{font-size:24px;letter-spacing:-.5px;margin:0 0 16px}.movement-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.movement-cards article{padding:15px;border:1px solid #43414a;background:#21212a;border-radius:10px}.movement-cards article:last-child{grid-column:1/-1}.movement-cards b{display:block;font-size:9px;color:#e0be70;letter-spacing:1px}.movement-cards strong{display:block;font-size:12px;margin:9px 0}.movement-cards p{font-size:11px;color:#aab6c8;line-height:1.65;margin:0}.coach-setting{display:flex;align-items:center;gap:10px;padding:15px 0;margin-top:18px;border-block:1px solid #343b46;font-size:13px}.coach-setting input{accent-color:#e7ba57;width:18px;height:18px}.coach-setting small{display:block;color:#9ba9bd;font-size:10px;margin-top:5px}.moves-list .combo-purpose{display:block;font-size:8px;letter-spacing:.6px;color:#dbbe7d;margin:12px 0 5px}.moves-list .combo-tradeoff{font-size:11px;color:#9eabbf;line-height:1.6}.pad-down{bottom:2px;left:46px}
#feedback-dialog{max-width:650px}.feedback-intro{font-size:12px;color:#b2bdce;line-height:1.65;margin:18px 0}.feedback-categories{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.feedback-categories button{padding:10px 12px;border:1px solid #424550;border-radius:9px;background:#20232c;font-size:11px;min-height:40px}.feedback-categories button[aria-pressed=true]{border-color:#d7b65f;color:#f2d28b;background:#493c2055}.feedback-fields{display:grid;gap:16px}.feedback-fields label{font-size:12px;color:#d2d6e2}.feedback-fields label>small{color:#7f8da2;font-size:10px;margin-left:8px}.feedback-fields input,.feedback-fields textarea,#feedback-report{display:block;width:100%;margin-top:8px;padding:11px 12px;font:13px/1.5 Arial,sans-serif;color:#e3e7ef;border:1px solid #454858;background:#10141b;border-radius:9px;resize:vertical}.feedback-fields input:focus,.feedback-fields textarea:focus,#feedback-report:focus{outline:2px solid #c1a357;outline-offset:2px}.report-preview{margin:20px 0;color:#aeabc1}.report-preview summary{font-size:12px;cursor:pointer;padding:10px 0;min-height:40px}.report-preview label{font-size:10px;color:#8593aa}.report-preview textarea{font-size:11px!important}#feedback-copy{width:100%;margin-top:15px}#feedback-status{font-size:12px;line-height:1.6;color:#e8c980;min-height:20px}.keyboard-strip{flex-wrap:wrap;gap:12px}
@media(max-width:800px) and (min-height:551px){
 body:not(.playing) #app{grid-template-areas:'header' 'nav' 'experiences' 'fighters' 'arena' 'arcade' 'goal' 'setup' 'footer'}
 .arcade-launch{gap:18px;padding:24px}.arcade-card-copy>strong{font-size:27px}.arcade-card-action{gap:12px;padding:11px}.arcade-card-action b{font-size:9px}
}
@media(max-width:600px) and (min-height:551px){
 .toolbar{gap:4px}.toolbar button{min-width:30px;width:30px}.brand{gap:7px;font-size:13px}.brandmark{width:30px;height:30px}.brandmark img{width:100%;height:100%}.brand small{font-size:8px}.topbar{gap:6px}
 .arcade-launch{padding:21px 18px;min-height:186px;gap:20px;align-items:flex-start;flex-direction:column;border-radius:15px}.arcade-card-copy>.eyebrow{font-size:7px}.arcade-card-copy>strong{font-size:27px}.arcade-card-copy>span:not(.eyebrow){font-size:11px}.arcade-card-action{align-self:flex-end;margin-top:-6px;padding:9px 12px}.arcade-card-action>span{font-size:20px}.arcade-card-copy>small{font-size:7px}
 #arcade-dialog{padding:25px 18px}#arcade-heading{font-size:32px}.arcade-intro{font-size:12px;margin:12px 0 18px}.arcade-layout{grid-template-columns:1fr;gap:17px}.arcade-route{gap:6px}.arcade-stage{min-height:52px;padding:9px 10px}.arcade-stage strong{font-size:11px}.arcade-stage span{font-size:9px}.arcade-detail{padding:17px}.arcade-record{flex-direction:column;align-items:flex-start}.arcade-record>strong{text-align:left}
 .combat-feedback{top:105px;left:16px;max-width:calc(100% - 32px);padding:8px 10px}.combat-feedback strong{font-size:9px}.combat-feedback>span{font-size:10px}
 .movement-cards{grid-template-columns:1fr}.movement-guide h3{font-size:22px}.pad-down{left:50%;transform:translateX(-50%);bottom:1px;font-size:15px!important}.control-hint{font-size:6px;letter-spacing:0}
 .feedback-fields input,.feedback-fields textarea{font-size:16px}.feedback-categories{gap:5px}.feedback-categories button{font-size:10px;padding:9px 10px}
}
@media(max-height:550px) and (orientation:landscape){
 body:not(.playing) #app{grid-template-areas:'header header' 'nav nav' 'experiences experiences' 'fighters arena' 'arcade arcade' 'goal goal' 'setup setup'}
 .lobby-nav strong{font-size:11px}.arcade-launch{padding:17px 21px;min-height:120px;border-radius:12px;gap:20px}.arcade-card-copy>.eyebrow{font-size:7px;margin-bottom:8px}.arcade-card-copy>strong{font-size:24px}.arcade-card-copy>span:not(.eyebrow){font-size:10px;margin-top:6px}.arcade-card-copy>small{font-size:7px;margin-top:8px}.arcade-card-action b{font-size:9px}
 #arcade-heading{font-size:32px}.arcade-intro{font-size:11px}.arcade-layout{gap:17px}.arcade-stage{padding:10px;min-height:60px}.arcade-detail{padding:16px}.arcade-stage strong{font-size:11px}.arcade-stage span{font-size:9px}
 .combat-feedback{top:73px;left:18px;max-width:260px;padding:6px 8px}.combat-feedback strong{font-size:8px}.combat-feedback>span{display:none}.pad-down{left:50%;transform:translateX(-50%);bottom:0;font-size:15px!important}.control-hint{font-size:6px;letter-spacing:.1px}
 .result-panel{padding:18px 22px}.result-panel .result-numbers{padding:10px 0}.movement-guide h3{font-size:22px}
}
/* Result analysis can be taller than the arena at every viewport size. */
.modal-overlay{overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;padding:14px 0}
.modal-overlay>.panel{margin:auto;flex-shrink:0}