/* Arcade presentation over the mobile game shell. */
body[data-mobile-game]{--gold:#b3ddf2;--white:#f7fcff;background:radial-gradient(ellipse at 50% 0,#232432 0,#0a0b0f 55%);color:var(--white)}
body[data-mobile-game] main{max-width:1180px}
body[data-mobile-game] header{min-height:88px;border-bottom:1px solid #b3ddf230;gap:16px}
body[data-mobile-game] .brand{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1;text-decoration:none;transform:skew(-5deg)}
body[data-mobile-game] .brand .brand-city{display:block;font-size:12px;letter-spacing:6px;color:var(--gold);margin:0 0 3px 3px;font-weight:900}
body[data-mobile-game] .brand .brand-nations{display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-size:39px;letter-spacing:-1px;color:#f7fcff;margin:0;line-height:1;font-weight:900;text-shadow:2px 2px 0 #346783,4px 4px 0 #071729,0 0 20px #b3ddf220}
body[data-mobile-game] .game-type{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#b8b4b0}
body[data-mobile-game] .icon-button{border-radius:6px;background:#1d2029;border-color:#ffffff26;box-shadow:0 3px 0 #040509}
body[data-mobile-game] .section-top{padding:22px 0 18px}
body[data-mobile-game] .eyebrow{font-weight:900;color:var(--gold);letter-spacing:2px}
body[data-mobile-game] h1{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-size:34px;font-style:italic;font-weight:900;line-height:1.1;letter-spacing:-1px;text-shadow:2px 2px 0 #383443}
body[data-mobile-game] .nation-options{gap:18px}
body[data-mobile-game] .nation-options button{border-radius:7px;border:1px solid #b1bac548;border-left:4px solid var(--gold);background:linear-gradient(135deg,#2d3140,#141924);box-shadow:0 6px 0 #040609,inset 0 1px 0 #ffffff15;padding:28px}
body[data-mobile-game] .nation-options button:before{background:linear-gradient(90deg,#10151e99,transparent 65%)}
body[data-mobile-game] .nation-options strong{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-size:46px;font-style:italic;letter-spacing:-1px;color:#f7fcff;text-shadow:2px 3px 0 #0a0b0f}
body[data-mobile-game] .nation-action{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
body[data-mobile-game] .nation-options button:hover,body[data-mobile-game] .nation-options button:focus-visible{box-shadow:0 6px 0 #040609,0 0 0 2px var(--gold),0 0 30px #b3ddf220}
body[data-mobile-game] .nation-options button:active{transform:translateY(3px);box-shadow:0 3px 0 #040609}
body[data-mobile-game] .roster{gap:12px}
body[data-mobile-game] .player-card{border-radius:5px;border:1px solid #ffffff30;background:radial-gradient(ellipse at 50% 25%,#414957,#161c27 78%);box-shadow:0 4px 0 #040609}
body[data-mobile-game] .player-card.selected{border:1px solid var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 22px #b3ddf235,0 4px 0 #040609;background:radial-gradient(ellipse at 50% 25%,#565242,#262630 78%)}
body[data-mobile-game] .player-card.selected:after{border-radius:2px;box-shadow:0 2px 0 #806520}
body[data-mobile-game] .card-name{border-top:3px solid var(--crew);background:#0c1018ed;min-height:58px}
body[data-mobile-game] .card-name strong{font-weight:900;font-size:14px;letter-spacing:.1px}
body[data-mobile-game] .primary{border-radius:5px;box-shadow:0 5px 0 #8b5d1c,inset 0 1px 0 #fff8b780;color:#15120d;background:linear-gradient(#ffdf69,#ffc93d);letter-spacing:1px;font-weight:900}
body[data-mobile-game] .primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #8b5d1c}
body[data-mobile-game] .quiet{border-radius:5px;font-weight:800}
body[data-mobile-game] .setup .primary{border-radius:5px;font-size:14px}
body[data-mobile-game] .setup{border-top:2px solid #b3ddf250;background:#11151ff7}
body[data-mobile-game] .scoreboard{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);border-top:2px solid #b3ddf2;border-bottom:1px solid #ffffff1c;padding:12px 0;gap:8px}
body[data-mobile-game] .scoreboard>div{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}
body[data-mobile-game] .scoreboard .cpu{grid-template-columns:auto minmax(0,1fr)}
body[data-mobile-game] .scoreboard strong{font-size:14px;font-weight:900}
body[data-mobile-game] .scoreboard .score{font-size:32px;color:var(--gold);text-shadow:2px 2px 0 #493514;grid-row:1/4}
body[data-mobile-game] .scoreboard .nation-mark{color:#acb3c0;font-size:10px;letter-spacing:.4px}
body[data-mobile-game] .scoreboard .score-center{gap:4px}
body[data-mobile-game] .versus{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-size:30px;font-style:italic;font-weight:900;line-height:1;color:var(--gold);text-shadow:2px 2px 0 #703622;transform:skew(-6deg)}
body[data-mobile-game] .score-center strong{font-size:10px;letter-spacing:.7px;color:#8d96a7;line-height:1.3}
.win-pips{display:flex;gap:4px;grid-column:1;grid-row:3;align-items:center;padding-top:2px}
.scoreboard .cpu .win-pips{grid-column:2;justify-content:flex-end}
.win-pips i{display:block;flex:0 0 19px;height:7px;border:1px solid #ffffff38;background:#292f3c;transform:skew(-12deg)}
.win-pips i.won{background:var(--gold);border-color:#ffeb96;box-shadow:0 0 8px #b3ddf260}
body[data-mobile-game] .run-lineup summary{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
body[data-mobile-game] .stage{border-radius:5px;border:1px solid #ffffff26;box-shadow:0 0 0 4px #090c13}
body[data-mobile-game] .cartoon-call strong{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-style:italic;font-size:24px;line-height:1.12;color:#f7fcff;text-shadow:2px 2px 0 #1b1424,0 2px 16px #000}
body[data-mobile-game] .play-controls{border-top:2px solid #b3ddf250;background:#11151ff7}
body[data-mobile-game] .choices{gap:12px}
body[data-mobile-game] .choices button{border-radius:6px;border:1px solid #5c6679;border-bottom:5px solid #080b13;background:linear-gradient(#30394a,#1c2332);box-shadow:inset 0 1px 0 #ffffff18;padding:12px 6px;min-height:104px;gap:8px}
body[data-mobile-game] .choices button span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#41495c,#1a2030);box-shadow:inset 0 1px 0 #ffffff18,0 3px 0 #090c14;font-size:32px}
body[data-mobile-game] .choices button strong{font-size:14px;font-weight:900;letter-spacing:1px}
body[data-mobile-game] .choices button:hover:not(:disabled){border-color:var(--gold);background:linear-gradient(#444735,#292d29)}
body[data-mobile-game] .choices button:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px;background:linear-gradient(#4a4734,#292d29)}
body[data-mobile-game] .play-controls>.primary{border-radius:5px;min-height:104px}
body[data-mobile-game] #prompt{font-size:14px;color:#afb8c9}
body[data-mobile-game] .intro{background:linear-gradient(135deg,#101522ef,#0a0b12df)}
body[data-mobile-game] .intro h2{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-style:italic;color:#fff1bf;text-shadow:3px 3px 0 #56381e}
body[data-mobile-game] .championship{background:#080b14ed}
body[data-mobile-game] .championship h2{font-family:'Arial Black',Arial,Helvetica,sans-serif;font-style:italic}
body[data-mobile-game] .settings-sheet{border-radius:8px;border-top:3px solid var(--gold)}
@media(max-width:800px){
 body[data-mobile-game] main{max-width:560px}
 body[data-mobile-game] header{min-height:76px;padding-bottom:8px;padding-top:calc(8px + env(safe-area-inset-top))}
 body[data-mobile-game] .brand .brand-city{font-size:10px;letter-spacing:5px;margin:0 0 3px 2px}
 body[data-mobile-game] .brand .brand-nations{font-size:31px}
 body[data-mobile-game] .section-top{padding:18px 0 16px}
 body[data-mobile-game] h1{font-size:26px}
 body[data-mobile-game] .nation-options{gap:16px;margin-bottom:22px}
 body[data-mobile-game] .nation-options button{min-height:clamp(190px,26svh,240px);border-radius:6px;padding:20px 24px}
 body[data-mobile-game] .nation-options strong{font-size:39px}
 body[data-mobile-game] .nation-options .nation-symbol{width:62px;height:62px}
 body[data-mobile-game] .roster{gap:10px;padding:3px}
 body[data-mobile-game] .player-card{border-radius:5px}
 body[data-mobile-game] .card-name{min-height:54px;padding:8px 4px}
 body[data-mobile-game] .card-name strong{font-size:clamp(12px,3.4vw,14px)}
 body[data-mobile-game] .match-top{min-height:38px}
 body[data-mobile-game] .scoreboard{padding:8px 0 10px;min-height:86px;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:6px}
 body[data-mobile-game] .scoreboard strong{font-size:12px;line-height:1.17}
 body[data-mobile-game] .scoreboard .score{font-size:26px}
 body[data-mobile-game] .versus{font-size:26px}
 body[data-mobile-game] .stage{border-left:0;border-right:0;border-radius:0;box-shadow:none;height:clamp(280px,calc(100svh - 386px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),720px)}
 body[data-mobile-game] .cartoon-call strong{font-size:21px}
 body[data-mobile-game] .play-controls{padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
 body[data-mobile-game] .choices{gap:10px}
 body[data-mobile-game] .choices button{min-height:100px;padding:10px 4px;gap:8px}
 body[data-mobile-game] .choices button span{width:46px;height:46px;font-size:30px}
 body[data-mobile-game] .choices button strong{font-size:13px;letter-spacing:.5px}
 body[data-mobile-game] .play-controls>.primary{min-height:100px;max-width:528px}
 body[data-mobile-game] #match{padding-bottom:178px}
 body[data-mobile-game] .setup .primary{font-size:13px;line-height:1.2}
}
@media(max-width:359px){body[data-mobile-game] .brand .brand-nations{font-size:28px}body[data-mobile-game] h1{font-size:23px}body[data-mobile-game] .scoreboard{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr)}.win-pips{gap:3px}.win-pips i{flex-basis:15px}}
@media(prefers-reduced-motion:reduce){body[data-mobile-game] .choices button{transition:none}}

/* ChiDown approved Chicago flag logo. */
body[data-mobile-game] .brand{transform:none;flex:0 0 auto;width:174px;line-height:0}
body[data-mobile-game] .brand-logo{display:block;width:100%;height:auto;max-height:112px;object-fit:contain}
body[data-mobile-game] header{min-height:116px}
@media(max-width:800px){body[data-mobile-game] .brand{width:138px}body[data-mobile-game] header{min-height:96px}}
@media(max-width:359px){body[data-mobile-game] .brand{width:120px}}

/* Arcade title screen is shown on every page load. */
.arcade-welcome{position:fixed;inset:0;z-index:100;display:grid;place-items:center;min-height:100svh;padding:24px 18px;background:radial-gradient(ellipse at 50% 38%,#13314b 0,#080f1c 52%,#04070c 100%);overflow:auto;transition:opacity .18s ease}
.arcade-welcome.leaving{opacity:0;pointer-events:none}
.welcome-content{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;text-align:center}
.welcome-logo{display:block;width:min(92vw,660px);height:auto;max-height:60svh;object-fit:contain;animation:logo-arrive .65s cubic-bezier(.2,.75,.25,1) both}
.welcome-tagline{color:#b3ddf2;font-size:clamp(12px,2.8vw,16px);font-weight:900;letter-spacing:3px;margin:10px 0 32px}
.welcome-start{min-height:56px;min-width:220px;padding:16px 28px;border:2px solid #b3ddf2;border-radius:7px;background:#f7fcff;color:#071729;font-family:'Arial Black',Arial,sans-serif;font-size:18px;font-weight:900;letter-spacing:2px;box-shadow:0 5px 0 #e4002b;touch-action:manipulation}
.welcome-start:hover{background:#b3ddf2}.welcome-start:active{transform:translateY(3px);box-shadow:0 2px 0 #e4002b}
.welcome-caption{font-size:12px;color:#9eafc2;margin:26px 0 0;line-height:1.5}
@keyframes logo-arrive{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(max-height:500px) and (min-width:600px){.welcome-logo{max-height:52svh}.welcome-tagline{margin:4px 0 12px}.welcome-caption{margin-top:14px}.welcome-start{min-height:48px;padding:10px 22px}}
@media(prefers-reduced-motion:reduce){.welcome-logo{animation:none}.arcade-welcome{transition:none}}