/* FULLACCEL landscape arena: cream, navy, orange and open sports layouts. */
:root{color-scheme:light;--bg:#fff5e4;--panel:#fffaf1;--text:#172b46;--muted:#6c716f;--line:#d5cdbc;--gold:#b64a18;--ally:#278b79;--enemy:#d34c38;font-family:system-ui,-apple-system,'Noto Sans KR',sans-serif}
body,#app{background:var(--bg);color:var(--text)}button{background:#fffdf7;color:var(--text);border-color:#d5cdbc;border-radius:4px;font-weight:650}button:hover:not(:disabled){background:#ffecd2;border-color:#f47a38}button:active:not(:disabled){background:#ffd6a9}button:focus-visible,a:focus-visible{outline:3px solid #f47a38;outline-offset:2px}button:disabled{opacity:.4}.primary,#build-tab{background:#f47a38!important;color:#172b46!important;border-color:#f47a38!important;font-weight:900;box-shadow:0 3px 0 #ba4b19}.primary:hover:not(:disabled),#build-tab:hover{background:#ff924d!important}
#app{max-width:1920px;gap:6px;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left))}
.masthead .brand,.flow-brand{font-weight:950;font-style:italic;letter-spacing:-.5px;color:#172b46}.masthead .brand span{color:#f47a38}.masthead #subtitle{color:#686b68}.economy{background:transparent;border-block:0;border-bottom:1px solid var(--line)}.income{color:#277c64}.income.frozen{color:#b43c2b}.wave-clock strong,#open-gas{color:#b64a18}.economy small{color:#6a6d65}
#match-progress{position:relative;display:flex;align-items:center;gap:24px;flex:none;height:32px;padding:0 10px 3px;font-size:11px;white-space:nowrap;overflow:hidden;background:#172b46;color:#fff5e4}#progress-round{font-weight:850}#progress-army{margin-left:auto}#progress-meter{position:absolute;left:0;bottom:0;height:3px;background:#f47a38}
#play-workspace{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}#battle-view{flex:1;min-width:0;border-radius:3px;border-color:#c8ba9f;background:#72806a}#workspace-divider,#production-close,#battle-tab{display:none!important}
#build-view{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-rows:34px 58px minmax(0,1fr);width:100%;min-width:0;min-height:0;gap:8px 18px;padding:4px 0;border:0;border-radius:0;background:transparent;overflow:hidden;box-shadow:none}
#build-view .panel-heading{grid-column:1/-1;grid-row:1;height:auto;border-bottom:2px solid var(--text);padding-bottom:7px;gap:12px}#build-view .panel-heading h1{font-size:14px;flex:1;margin:0}
#build-view .build-tools{grid-column:1;grid-row:2/4;width:100%;height:100%;min-height:0;max-height:none;padding:0;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin}
#build-view .unit-filters{display:flex;position:sticky;top:0;height:44px;gap:0;margin:0 0 8px;z-index:2;background:#fff5e4}#build-view .unit-filters button{padding:0 3px;border:0;border-bottom:3px solid transparent;border-radius:0;min-height:44px;font-size:12px;background:transparent;color:#6b6a64}#build-view .unit-filters button.active{color:#172b46;border-bottom-color:#f47a38;font-weight:900}
#build-view .unit-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;height:auto;overflow:visible;align-content:start}
#build-view .unit-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr auto auto;width:100%;min-width:0;min-height:88px!important;height:88px!important;padding:5px!important;gap:2px 4px;text-align:left;border:0;border-bottom:2px solid transparent;border-radius:0;background:#f1eee2;color:#172b46}#build-view .unit-card[data-race=zerg]{background:#e7eee1}#build-view .unit-card[data-race=protoss]{background:#eee5ed}#build-view .unit-card.active{background:#ffe1bb;border-bottom-color:#f47a38;box-shadow:inset 3px 0 #f47a38}
#build-view .unit-card .unit-icon{grid-column:1;grid-row:1/4;width:48px;height:60px;align-self:center}#build-view .unit-card .name{font-size:12px;font-weight:800;line-height:1.2;white-space:normal;align-self:end}#build-view .unit-card .role,#build-view .unit-card .glyph{display:none}#build-view .unit-card .attack-targets{font-size:9px;padding:0;background:transparent!important;border-radius:0;line-height:1.3;color:#427560}#build-view .unit-card .attack-targets[data-profile=air]{color:#2b6694}#build-view .unit-card .attack-targets[data-profile=both]{color:#704c99}#build-view .unit-card .attack-targets[data-profile=none]{color:#687077}.unit-card .cost{font-size:12px;font-weight:750;color:#ac481a}.unit-card.unaffordable .cost{color:#807972}
#quick-placement{grid-column:2;grid-row:2;min-width:0;display:flex;align-items:center;gap:12px}#selected-unit-title{flex:1;min-width:0;min-height:44px;padding:0;text-align:left;font-size:13px;border:0;background:transparent;color:#172b46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#selected-unit-title:after{content:' ⓘ';font-size:12px}
.quick-buttons,#quick-placement #selection-actions{display:flex;gap:6px;flex:none;margin:0;flex-wrap:nowrap}.quick-buttons button,#quick-placement #selection-actions button{min-height:44px;padding:0 12px;font-size:12px;font-weight:750;white-space:nowrap}.quick-buttons #unit-info{min-width:44px;width:44px;font-size:18px;padding:0}.quick-buttons button.recommended{background:#172b46;color:#fff5e4;border-color:#172b46}#quick-placement #unit-details,#quick-placement .placement-line{display:none}
.placement-workspace{grid-column:2;grid-row:3;min-width:0;min-height:0;display:flex;gap:12px}.production-area{flex:1;min-width:0;min-height:0}.placement-workspace .production-controls{display:flex;height:44px;gap:4px;flex:none}.production-controls #front-label{display:none}.production-controls #gas-site{margin:0 auto 0 0}.production-controls button{min-width:44px;min-height:44px;padding:0 8px}#grid-stage{flex:1;min-height:0}#grid{border-radius:0;border-color:#c6bba4}#gas-site{background-image:none;color:#93401c}#grid-stage #place{background:#f47a38;color:#172b46;border-color:#172b46;font-weight:850}.formation-labels{height:24px;flex:none}.formation-labels #back-label{display:none}#production-help{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#deployment-preview{width:120px;flex:none;display:flex;flex-direction:column;gap:5px;padding:9px 0 0 12px;border:0;border-left:1px solid var(--line);background:transparent;overflow:hidden;color:#172b46}#preview-title{font-size:12px}#preview-count{font-size:10px}#deployment-canvas{width:100%;flex:1;min-height:24px;display:block}#preview-direction{font-size:10px;text-align:center;white-space:nowrap;color:#9c4b23}#preview-hint{font-size:9px;line-height:1.5;color:var(--muted)}
.view-tabs{order:10;height:52px;gap:10px;border-top:2px solid var(--text);flex:none;margin:0;padding:4px 0}.view-tabs #build-tab{display:block!important;min-width:180px;min-height:44px;font-size:17px;font-weight:900}.view-tabs #round{display:none}.view-tabs #use-bomb{margin-left:auto;min-width:100px;font-size:13px;color:#a13b1e;border-color:#e5b098;background:#ffe9d3}.view-tabs #pause,.view-tabs #speed{min-width:56px;min-height:44px}.enemy-intel{display:none}
.battle-top{color:#fffaf0;text-shadow:0 1px 3px #081623,0 0 5px #081623}#silo-state{color:#ffe8ae}#guardian-state{color:#ffe8ae;text-shadow:0 1px 3px #081623}.battle-bottom span{background:#172b46dc;color:#fff5e4}#unit-inspection{background:#fff6e7f5;color:#172b46;border-color:#d58a45}#battle-view .camera-controls{display:grid;grid-template-columns:repeat(2,max-content);right:8px;bottom:30px;gap:4px;flex-direction:row}#battle-view .camera-controls span{display:none}#battle-view .camera-controls button{min-height:40px;min-width:66px;padding:0 6px;font-size:11px;background:#fff8e9ed;color:#172b46;border-color:#cabcaa}#battle-view .camera-controls button.active{background:#ffcf94;color:#172b46}#battle-view #minimap{width:120px;height:60px;left:8px;bottom:30px}
#tutorial-panel{order:0;max-height:90px;min-height:54px;padding:7px 12px;border-radius:0;overflow:auto;background:#fff0ce;border:0;border-left:4px solid #f47a38;color:#172b46}#tutorial-title{font-size:12px}#tutorial-body{font-size:11px;line-height:1.4;margin-top:2px;color:#4b5359}#tutorial-progress{font-size:9px;color:#975023}#tutorial-next{min-height:44px;background:#f47a38;color:#172b46}.tutorial-focus{outline-color:#ed762e}
#gas-inline,dialog{background:#fff8e9;color:#172b46;border:1px solid #b8a98c;border-radius:5px;box-shadow:0 8px 30px #172b4633}dialog::backdrop{background:#172b46bb}dialog p,#gas-details{color:#5a655f}dialog h2{font-weight:900}dialog .eyebrow{color:#b14c20}.tiny{color:#6c716f!important}#gas-build,#gas-status,.gas-value{color:#a14a1b!important}#toast{background:#172b46f5;color:#fff8e9;border:0;border-left:4px solid #f47a38;border-radius:0;bottom:64px}.unit-detail-art{display:block;width:120px;height:130px;object-fit:contain;margin:8px auto}.detail-profile{color:#9e4b20}.sports-portrait{width:100%;height:100%;object-fit:contain}
#flow-screen{background:#fff5e4;padding:env(safe-area-inset-top) max(28px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}.flow-header{max-width:1200px;min-height:64px;border-bottom:3px solid #172b46}.flow-brand{font-size:19px}.flow-header a{color:#172b46;font-weight:800}.flow-content{max-width:1200px;margin:28px auto 0}.flow-content .eyebrow{font-size:10px;letter-spacing:3px;color:#b65422;font-weight:800}.flow-content h1{font-size:clamp(28px,4vw,52px);font-weight:950;letter-spacing:-2px;line-height:1.16;color:#172b46;text-shadow:none;margin:12px 0;word-break:keep-all}.flow-lead{color:#676e67;font-size:14px}.flow-status{color:#a53e20}
#flow-screen[data-screen=home] .flow-content{position:relative;padding-right:42%;min-height:430px}#flow-screen[data-screen=home] .flow-content:after{content:'';position:absolute;right:0;top:0;width:38%;height:100%;background:url('./assets/sports/hero.webp') 57% center/cover;border-radius:2px;transform:rotate(2deg);pointer-events:none}
.mode-grid{display:flex;flex-direction:column;gap:0;margin-top:26px;border-top:2px solid #172b46}.mode-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:5px;min-height:92px;padding:17px 12px 17px 0;border:0;border-bottom:1px solid #c7beae;border-radius:0;background:transparent;text-align:left;font-size:23px;font-weight:900;box-shadow:none;transition:padding .15s}.mode-card:hover:not(:disabled){transform:none;background:transparent;padding-left:10px}.mode-number{grid-column:2;grid-row:1/3;align-self:center;margin:0;font:italic 900 28px system-ui;color:#dd8047}.mode-card small{grid-column:1;grid-row:2;font-size:12px;color:#707467;font-weight:400}.mode-card[data-mode=single]{color:#b34e1c}.flow-actions{margin-top:20px;gap:10px}.flow-actions button{min-height:44px;min-width:120px}.preview-notice{font-size:11px;color:#777568;line-height:1.5;margin-top:10px;max-width:650px}
.race-grid{gap:18px;margin:20px 0;grid-template-columns:repeat(4,minmax(0,1fr))}.race-card{border:0;border-radius:0;border-bottom:4px solid #c4c7c9;padding:10px 8px 14px;gap:10px;min-height:270px;background:#e7edf0;color:#172b46;font-size:22px;box-shadow:none;overflow:hidden}.race-card[data-race=zerg]{background:#e2efdc;border-bottom-color:#8aa982}.race-card[data-race=protoss]{background:#eee1ef;border-bottom-color:#ab90b4}.race-card[data-race=random]{background:#f9e6c7;border-bottom-color:#dbaa69}.race-card:hover:not(:disabled){background:#fff0d6}.race-card.selected{outline:3px solid #f47a38;outline-offset:0;border-bottom-color:#f47a38}.race-card.selected:after{color:#b54410;background:#fff5e4;border-radius:50%;width:28px;height:28px;font-size:20px}.race-card small{color:#647066;font-size:11px;font-weight:500;line-height:1.5}.race-emblem{width:100%;height:160px;transform:none!important;border:0!important;border-radius:0!important;color:#bf7133;font:italic 950 100px system-ui}.race-emblem img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 2px #172b461c)}
.enemy-select{color:#172b46}.enemy-select select,.room-controls input,.faction-field select{background:#fffdf7;border-color:#c7bba6;color:#172b46;border-radius:3px;min-height:44px}.room-row{background:#ffefd5}.room-code-badge,.ready-timer{color:#b45120}.lobby-players span{border-radius:0;border-color:#d5cdbc}.room-list p{color:#6c716f}#orientation-gate{display:none}
@media(max-height:599px){
 #app{gap:4px}.masthead{height:44px}.masthead .brand{font-size:10px;letter-spacing:0}.masthead #subtitle{display:none}.masthead #restart{font-size:11px}.economy{position:absolute;left:210px;right:135px;top:env(safe-area-inset-top);height:44px;border:0;gap:12px;background:transparent!important}.economy small{display:none}.economy strong{font-size:21px}.economy .income{font-size:10px}.economy .wave-clock{margin-left:auto}.economy #open-gas{font-size:11px;min-height:40px;padding:0 8px}#match-progress{height:24px;gap:18px;padding-inline:4px;font-size:10px}
 #build-view{grid-template-columns:220px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:5px 12px;padding:0}#build-view .panel-heading{display:none}#build-view .build-tools{grid-row:1/3}#build-view .unit-filters{margin-bottom:4px}#build-view .unit-filters button{font-size:11px}#build-view .unit-picker{gap:4px}#build-view .unit-card{grid-template-columns:40px minmax(0,1fr);min-height:76px!important;height:76px!important;padding:3px!important}#build-view .unit-card .unit-icon{width:40px;height:54px}#build-view .unit-card .name{font-size:11px}#build-view .unit-card .cost{font-size:11px}
 #quick-placement{grid-row:1;gap:4px}#selected-unit-title{font-size:11px}.quick-buttons,#quick-placement #selection-actions{gap:4px}.quick-buttons button,#quick-placement #selection-actions button{padding:0 8px;font-size:11px}.placement-workspace{grid-row:2;gap:8px}.placement-workspace .production-controls{height:44px}.formation-labels{display:none}#deployment-preview{width:80px;padding:4px 0 0 8px}#preview-title{font-size:10px}#preview-count,#preview-hint{display:none}#preview-direction{font-size:8px}.view-tabs{height:48px}.view-tabs #build-tab{min-width:180px;font-size:16px}#tutorial-panel{max-height:62px;padding:3px 8px}#tutorial-body{font-size:10px}#tutorial-progress{display:none}#battle-view .battle-top{font-size:10px}#battle-view #silo-state{font-size:9px}#battle-view #guardian-state{font-size:9px}#battle-view .battle-bottom{font-size:9px}
 #flow-screen{padding-inline:max(22px,env(safe-area-inset-left)) max(22px,env(safe-area-inset-right));padding-bottom:12px}.flow-header{min-height:44px}.flow-brand{font-size:15px}.flow-header a{font-size:11px}.flow-content{margin-top:8px}.flow-content .eyebrow{display:none}.flow-content h1{font-size:28px;margin:8px 0}.flow-lead{font-size:12px;line-height:1.4;margin:6px 0}#flow-screen[data-screen=home] .flow-content{min-height:260px;padding-right:42%}.mode-grid{margin-top:12px}.mode-card{min-height:63px;padding:8px 8px 8px 0;font-size:19px;gap:2px}.mode-card small{font-size:10px}.mode-number{font-size:21px}.flow-actions{margin-top:10px}.preview-notice{font-size:9px}.race-grid{margin:10px 0;gap:12px}.race-card{min-height:160px;padding:4px 5px 8px;gap:3px;font-size:16px}.race-emblem{height:104px;font-size:66px}.race-card small{font-size:9px;line-height:1.25}.enemy-select{font-size:11px;float:left;gap:10px}.enemy-select select{min-height:44px;padding:3px 8px}.flow-actions button{min-width:110px}
}
@media(max-width:740px) and (orientation:landscape){.masthead .brand{max-width:155px;overflow:hidden;font-size:9px}.economy{left:170px;right:124px;gap:7px}.economy .income{display:none}.masthead #help,.masthead #restart{padding:0 6px}#build-view{grid-template-columns:185px minmax(0,1fr);gap:4px 8px}#selected-unit-title{display:none}.quick-buttons{width:100%}.quick-buttons button{flex:1}#deployment-preview{display:none}#progress-army{display:none}#match-progress{gap:12px;font-size:9px}}
@media(orientation:portrait) and (max-width:1023px){#orientation-gate{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;gap:10px;background:#fff5e4;color:#172b46}#orientation-gate h1{font-size:28px;margin:0;font-weight:900}#orientation-gate p{font-size:15px;line-height:1.6;margin:0}#orientation-gate small{font-size:12px;line-height:1.7;max-width:280px;color:#675f53}.rotate-mark{font-size:100px;color:#f47a38;line-height:1.2;font-weight:800}#app,#flow-screen,dialog{visibility:hidden}dialog::backdrop{background:transparent}#rotate-live{font-weight:800;color:#b33822}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.race-emblem{display:block;flex:none;min-height:0;overflow:hidden}.race-emblem img{display:block;min-height:0;max-height:100%;max-width:100%}
/* A readable roster list beats six cramped portrait boxes on a phone. */
#build-view .unit-picker{grid-template-columns:1fr;gap:3px}
#build-view .unit-card{grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:1fr 1fr;height:62px!important;min-height:62px!important;gap:0 8px;padding:3px 7px!important}
#build-view .unit-card .unit-icon{grid-column:1;grid-row:1/3;height:54px;width:48px}
#build-view .unit-card .name{grid-column:2;grid-row:1;font-size:12px;align-self:end}
#build-view .unit-card .attack-targets{grid-column:2;grid-row:2;align-self:start;font-size:10px}
#build-view .unit-card .cost{grid-column:3;grid-row:1/3;align-self:center;font-size:11px;white-space:nowrap}
.masthead{order:0}.economy{order:1}#match-progress{order:2}#tutorial-panel{order:3}#play-workspace{order:4}
#app:has(#tutorial-panel:not([hidden])) #toast{top:auto;bottom:66px}
@media(max-width:740px) and (orientation:landscape){.quick-buttons #unit-info{flex:0 0 44px}}