/* The arcade uses a fixed logical playfield scaled into the available window. */
.arcade-shell{display:flex;flex-direction:column;gap:9px;min-height:0;flex:1;max-width:1400px;width:100%;margin:0 auto}.arcade-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.arcade-heading h1{font-size:27px;letter-spacing:-.025em}.arcade-heading .eyebrow{font-size:10px;margin-bottom:4px}.arcade-tools{display:flex;gap:5px;flex-shrink:0}.arcade-tools button{font-size:11px;padding:6px 9px;min-height:36px}.arcade-stats{display:flex;justify-content:space-between;gap:8px;font:13px Consolas,monospace;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fbf7ef}.arcade-board{position:relative;flex:1;min-height:100px;overflow:hidden;border-radius:10px;background:#dfdfd3;isolation:isolate}.arcade-board canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;outline-offset:-4px}.arcade-curtain{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#343d4640;backdrop-filter:blur(3px)}.arcade-card{width:min(610px,95%);padding:24px 28px;border:1px solid #cec7bb;border-radius:12px;background:#fbf7eff5;box-shadow:0 10px 38px #343d4633;display:flex;flex-direction:column;gap:13px}.arcade-card h2{font-size:27px}.arcade-card p{font-size:15px;line-height:1.45}.arcade-card .eyebrow{font-size:10px}.arcade-card .arcade-card-hint{font-size:13px;color:#555d63}.arcade-card .arcade-card-foot{font-size:10px;color:#696e6d}.arcade-card-actions{display:flex;gap:8px}.arcade-card-actions button{font-size:14px;min-height:44px}.arcade-controls{display:flex;gap:7px;justify-content:center;flex-shrink:0}.arcade-controls button{font-size:13px;min-height:44px;padding:9px 15px;text-align:center;flex:1;max-width:260px}.arcade-controls .selected{border-color:var(--fox);background:#ecdaea;color:var(--slate);box-shadow:inset 0 -3px var(--fox)}.hold-control{touch-action:none;user-select:none}.hold-control[aria-pressed=true]{background:#79315e;color:white}.arcade-caption{height:34px;max-height:34px;font-size:12px;line-height:1.35;text-align:center;color:#555d63;flex-shrink:0}.arcade-toast{position:absolute;left:50%;top:10px;transform:translate(-50%,-50px);opacity:0;transition:transform .15s,opacity .15s;background:#fbf7eff5;border:1px solid #c6cebd;border-radius:20px;padding:8px 16px;max-width:85%;text-align:center;color:#31472d;font-size:13px;pointer-events:none;box-shadow:0 3px 10px #343d4622}.arcade-toast.show{transform:translate(-50%,0);opacity:1}
@media(min-width:1100px) and (min-height:700px){.arcade-board{max-width:1100px;width:100%;align-self:center}.arcade-controls{max-width:1100px;width:100%;align-self:center}}
@media(max-width:800px){.arcade-shell{gap:6px}.arcade-heading{gap:5px;align-items:flex-start}.arcade-heading h1{font-size:19px}.arcade-heading .eyebrow{font-size:8px;max-width:190px}.arcade-tools{gap:1px;flex-wrap:wrap;justify-content:flex-end;max-width:160px}.arcade-tools button{font-size:9px;min-height:28px;padding:4px 6px}.arcade-stats{font-size:10px;padding:5px}.arcade-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.arcade-controls button{font-size:11px;padding:5px;min-height:40px;max-width:none}.arcade-shell[data-kind=council] .arcade-controls{grid-template-columns:repeat(4,1fr)}.arcade-shell[data-kind=canal] .arcade-controls,.arcade-shell[data-kind=metro] .arcade-controls{grid-template-columns:repeat(2,1fr)}.arcade-shell[data-kind=tower] .arcade-controls{grid-template-columns:1fr}.arcade-caption{font-size:10px;min-height:28px;height:28px;max-height:28px}.arcade-card{padding:14px;width:98%;gap:9px}.arcade-card h2{font-size:21px}.arcade-card p{font-size:12px}.arcade-card .arcade-card-hint{font-size:11px}.arcade-card .arcade-card-foot{font-size:9px}.arcade-card-actions{gap:4px}.arcade-card-actions button{font-size:11px;padding:7px;min-height:38px}.arcade-curtain{padding:8px}.arcade-toast{font-size:11px;padding:6px 9px}}
@media(max-width:800px) and (max-height:670px){.arcade-heading h1{font-size:16px}.arcade-heading .eyebrow{font-size:7px}.arcade-tools{max-width:145px}.arcade-tools button{font-size:8px;min-height:26px;padding:3px 5px}.arcade-card{gap:6px;padding:10px}.arcade-card h2{font-size:18px}.arcade-card p{font-size:11px;line-height:1.35}.arcade-card .arcade-card-hint{font-size:10px}.arcade-card .arcade-card-foot{font-size:8px}.arcade-controls button{min-height:38px;font-size:10px}.arcade-caption{font-size:9px}.arcade-stats{font-size:9px}}
@media(max-height:520px) and (min-width:650px){.arcade-shell{gap:4px}.arcade-heading h1{font-size:18px}.arcade-heading .eyebrow{font-size:8px;margin:0}.arcade-tools button{font-size:10px;min-height:28px;padding:4px 7px}.arcade-stats{font-size:10px;padding:3px 8px}.arcade-controls button{font-size:10px;min-height:32px;padding:4px 7px}.arcade-caption{height:23px;max-height:23px;font-size:9px}.arcade-card{width:95%;padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}.arcade-card>.eyebrow,.arcade-card>h2{grid-column:1}.arcade-card>h2{font-size:19px}.arcade-card>p{font-size:11px}.arcade-card .arcade-card-hint{grid-column:2;grid-row:1/4;font-size:10px}.arcade-card-actions{grid-column:1/3;justify-content:center}.arcade-card-actions button{min-height:32px;font-size:11px;padding:4px 12px}.arcade-card .arcade-card-foot{display:none}.arcade-curtain{padding:7px}.arcade-toast{font-size:10px;padding:4px 10px}}
@media(prefers-reduced-motion:reduce){.arcade-toast{transition:none}}
.arcade-stats{gap:18px;padding:7px 12px;font:11px system-ui}.arcade-stats>span{flex:1;min-width:0}.arcade-stats label{display:flex;align-items:center;gap:9px;white-space:nowrap}.arcade-stats progress{height:12px;flex:1;min-width:15px}.arcade-stats progress::-webkit-progress-value{background:var(--gauge)}.arcade-stats progress::-moz-progress-bar{background:var(--gauge)}.resource-bar{height:15px;margin:7px 0;background:#e2e6db}.resource-bar::-webkit-progress-value{background:#71876a}.resource-bar::-moz-progress-bar{background:#71876a}.low .resource-bar::-webkit-progress-value{background:#be8054}.steps{list-style:none;padding-left:0}.steps li{position:relative;padding-left:38px}.steps li::before{content:'';position:absolute;left:0;top:.48em;width:26px;height:8px;border:1px solid #aa9aa9;border-radius:3px;background:linear-gradient(to right,var(--fox) 33%,var(--lilac) 33%)}.steps li:nth-child(2)::before{background:linear-gradient(to right,var(--fox) 66%,var(--lilac) 66%)}.steps li:nth-child(3)::before{background:var(--fox)}
@media(max-width:800px){.arcade-stats{gap:7px;padding:5px;font-size:9px}.arcade-stats label{display:block}.arcade-stats progress{display:block;width:100%;height:9px;margin-top:3px}.resource-bar{height:12px;margin:5px 0}}@media(max-height:520px) and (min-width:650px){.arcade-stats{font-size:9px;padding:4px 8px}.arcade-stats progress{height:8px}.resource-bar{height:10px;margin:3px 0}}

/* Interactive controls stay inside the game window; canvas objects handle play. */
.arcade-board .arcade-tools{position:absolute;top:8px;right:8px;z-index:2;max-width:none;background:#fbf7efed;border-radius:7px;padding:3px}.arcade-board .arcade-tools button{min-height:36px;font-size:11px}.arcade-board canvas{position:absolute;top:51px;height:calc(100% - 56px)}.arcade-shell[data-kind=coffee] canvas{height:calc(100% - 112px)}.arcade-pad{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}.arcade-pad button{height:46px;min-width:50px;font-size:24px;padding:4px;touch-action:manipulation;background:#fbf7efed}.arcade-curtain{z-index:3}.arcade-curtain[hidden]{display:none}.arcade-toast{z-index:4;top:58px;pointer-events:none}
@media(max-height:520px) and (min-width:650px){.arcade-board .arcade-tools{top:3px;right:3px;padding:0}.arcade-board .arcade-tools button{min-height:28px;font-size:10px}.arcade-board canvas{top:34px;height:calc(100% - 38px)}.arcade-shell[data-kind=coffee] canvas{height:calc(100% - 38px);width:calc(100% - 170px)}.arcade-pad{left:auto;right:8px;bottom:8px;transform:none;display:grid;grid-template-columns:repeat(2,1fr)}.arcade-pad button{min-width:44px;height:38px;font-size:21px}}

.arcade-shell[data-kind=debate] canvas{height:calc(100% - 112px)}.arcade-shell[data-kind=debate] .arcade-pad button{min-width:45px}.arcade-shell[data-kind=debate] .arcade-pad{gap:7px}
@media(max-height:520px) and (min-width:650px){.arcade-shell[data-kind=debate] canvas{height:calc(100% - 38px);width:calc(100% - 125px)}.arcade-shell[data-kind=debate] .arcade-pad{grid-template-columns:repeat(2,1fr);gap:4px}.arcade-shell[data-kind=debate] .arcade-pad button{height:32px;min-width:40px}}

.arcade-pad [data-arcade=brake],.arcade-pad [data-arcade=fire]{font-size:12px;font-weight:650}

.arcade-person-heading{display:flex;align-items:center;gap:12px}.arcade-person-heading>.supporter-portrait{width:48px;height:48px}
@media(max-width:800px){.arcade-person-heading{gap:8px}.arcade-person-heading>.supporter-portrait{width:35px;height:35px}}
@media(max-height:520px){.arcade-person-heading>.supporter-portrait{width:28px;height:28px}}

.arcade-shell[data-kind=metro] canvas,.arcade-shell[data-kind=tower] canvas{height:calc(100% - 112px)}.arcade-shell[data-kind=metro] .arcade-pad button,.arcade-shell[data-kind=tower] .arcade-pad button{font-size:13px;min-width:110px;padding:6px 12px}
@media(max-height:520px) and (min-width:650px){.arcade-shell[data-kind=metro] canvas,.arcade-shell[data-kind=tower] canvas{height:calc(100% - 38px);width:calc(100% - 130px)}.arcade-shell[data-kind=metro] .arcade-pad,.arcade-shell[data-kind=tower] .arcade-pad{grid-template-columns:1fr}.arcade-shell[data-kind=metro] .arcade-pad button,.arcade-shell[data-kind=tower] .arcade-pad button{min-width:105px;font-size:11px}}

/* A stable card frame keeps start, resume and result controls in one place. */
.arcade-card{height:100%;max-height:460px}.arcade-card>p,.arcade-card>h2{flex-shrink:0}.arcade-card-actions{margin-top:auto;flex-shrink:0}
@media(max-height:520px) and (min-width:650px){.arcade-card{grid-template-rows:auto auto 1fr auto;align-content:start}.arcade-card-actions{align-self:end}}

.arcade-shell[data-kind=tower] .arcade-pad{gap:6px}.arcade-shell[data-kind=tower] .arcade-pad button{min-width:44px;padding:5px 9px;font-size:14px}.arcade-shell[data-kind=tower] .arcade-pad [data-arcade=move],.arcade-shell[data-kind=tower] .arcade-pad [data-arcade=rotate]{font-size:23px}
@media(max-height:520px) and (min-width:650px){.arcade-shell[data-kind=tower] .arcade-pad{grid-template-columns:repeat(2,1fr);gap:4px}.arcade-shell[data-kind=tower] .arcade-pad button{min-width:44px;height:36px}.arcade-shell[data-kind=tower] canvas{width:calc(100% - 115px)}}
/* Keep the campaign dashboard in place while giving compact screens room to play. */
@media(max-width:800px) and (max-height:670px){
 .campaign-arcade .arcade-card>.eyebrow,.campaign-arcade .arcade-card>.arcade-card-foot{display:none}
 .campaign-arcade .arcade-card:has([data-arcade=start])>h2{display:none}
}
@media(max-height:670px) and (min-width:650px){
 .campaign-arcade{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto minmax(0,1fr);column-gap:10px}
 .campaign-arcade .arcade-heading,.campaign-arcade .arcade-stats{min-width:0}
 .campaign-arcade .arcade-heading h1{font-size:15px}
 .campaign-arcade .arcade-heading .eyebrow{font-size:7px}
 .campaign-arcade .arcade-stats{gap:8px}
 .campaign-arcade .arcade-board{grid-column:1/-1;width:100%;height:100%}
 .campaign-arcade .arcade-caption{display:none}
 .campaign-arcade .arcade-card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;padding:8px 12px;gap:5px 16px}
 .campaign-arcade .arcade-card>.eyebrow,.campaign-arcade .arcade-card>.arcade-card-foot{display:none}
 .campaign-arcade .arcade-card:has([data-arcade=start])>h2{display:none}
 .campaign-arcade .arcade-card>.arcade-card-hint{grid-column:2;grid-row:1}
 .campaign-arcade .arcade-card-actions{grid-column:1/-1;grid-row:2}
 .campaign-arcade .arcade-card:has([data-arcade=finish])>h2{grid-column:1;grid-row:1}
 .campaign-arcade .arcade-card:has([data-arcade=finish])>p:not(.eyebrow):not(.arcade-card-foot){grid-column:2;grid-row:1}
}
/* The playfield fills its window; menus and essential touch actions float over it. */
body.game-window:has(.arcade-shell){grid-template-rows:minmax(0,1fr)}
body.game-window:has(.arcade-shell)>.site-header,body.game-window:has(.arcade-shell)>footer{display:none}
.game-window:has(.arcade-shell) #main{padding-top:10px;padding-bottom:10px}
.arcade-shell .arcade-board canvas{inset:0;width:100%;height:100%}
.arcade-shell .arcade-caption{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.arcade-board .arcade-tools{display:block;top:7px;right:7px;padding:0;z-index:5;background:transparent}
.arcade-tools summary{display:grid;place-items:center;cursor:pointer;list-style:none;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fbf7efee;font-size:21px;box-shadow:0 2px 8px #343d461a}
.arcade-tools summary::-webkit-details-marker{display:none}
.arcade-menu-items{position:absolute;right:0;top:40px;display:grid;gap:3px;min-width:155px;padding:7px;background:var(--paper,#fbf7ef);border:1px solid var(--line);border-radius:9px;box-shadow:0 5px 20px #343d4633}
.arcade-menu-items button{text-align:left}
.arcade-shell .arcade-pad{left:auto;right:7px;bottom:7px;transform:none;display:flex;gap:5px}
.arcade-shell .arcade-pad button{min-width:0;min-height:36px;height:36px;padding:5px 9px;font-size:11px}
.arcade-toast{top:10px}
@media(max-height:520px){.arcade-tools summary{width:32px;height:32px}.arcade-menu-items{top:35px;grid-template-columns:1fr 1fr;min-width:270px}}