/* A shared game shell: existing poster colors, compact chrome, a generous playfield. */
.arcade-dialog .game-toolbar{display:flex;align-items:center;gap:6px;flex-shrink:0}
.arcade-dialog .game-toolbar button{min-height:44px;padding:8px 10px;border:1px solid currentColor;background:transparent;color:inherit;font:600 12px/1.2 var(--body);white-space:nowrap;cursor:pointer}
.arcade-dialog .game-toolbar button:hover{background:var(--gold,#e6b53d);color:#292719}
.arcade-dialog .game-toolbar button:focus-visible{outline:3px solid #e6b53d;outline-offset:3px}
.arcade-dialog .game-toolbar .icon-button{min-width:44px;font-size:22px}
.arcade-dialog.is-expanded{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;box-shadow:none;padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain;box-sizing:border-box}
.arcade-dialog.is-expanded>.dialog-header,.arcade-dialog.is-expanded>.boxing-dialog-header{position:relative;top:auto;margin:0 0 8px;padding:0 0 8px;gap:12px;border-bottom:1px solid #93835b;align-items:center}
.arcade-dialog.is-expanded :is(.dialog-header,.boxing-dialog-header) h2{font-size:clamp(22px,3vw,32px);line-height:1;margin:0}
.arcade-dialog.is-expanded :is(.dialog-header,.boxing-dialog-header)>div>p{display:none}
.arcade-dialog.is-expanded .scoreboard{margin:8px 0;padding:4px 0;border-width:1px}
.arcade-dialog.is-expanded .scoreboard strong{font-size:26px;line-height:1.1}
.arcade-dialog.is-expanded .dialog-bottom{margin:8px 0 0;padding:0;gap:8px}
.arcade-dialog.is-expanded :is(#record-note,.boxing-help){display:none}
#game-dialog.is-expanded #game-arena{height:clamp(200px,calc(100dvh - 240px),900px);max-width:1100px;margin-inline:auto}
#game-dialog.is-expanded.game-dialog-playing :is(.punch-mode-tabs,#game-setup){display:none}
#game-dialog.is-expanded #game-feedback{margin:6px 0;min-height:1.4em}
#combo-dialog.is-expanded{display:flex;flex-direction:column}
#combo-dialog.is-expanded .combo-stage{flex:1;min-height:240px;max-width:1000px;width:100%;margin-inline:auto;display:flex;flex-direction:column;justify-content:center}
#combo-dialog.is-expanded .combo-pads{flex:1;max-height:62dvh;min-height:180px}
#combo-dialog.is-expanded .combo-pads button{min-height:80px}
#combo-dialog.is-expanded>p:has([data-copy="pageCopy137"]){font-size:12px;margin:4px 0}
#table-dialog.is-expanded .table-layout{display:grid;grid-template-columns:minmax(0,420px) minmax(180px,260px);justify-content:center;gap:24px}
#table-dialog.is-expanded #table-canvas{height:min(650px,calc(100dvh - 150px));width:auto;max-width:100%;object-fit:contain;margin:auto}
#table-dialog.is-expanded .table-playfield{min-width:0;display:flex;flex-direction:column;align-items:center}
#table-dialog.is-expanded .table-controls{width:100%;margin-top:8px}
#table-dialog.is-expanded .table-sidebar{min-width:0}
#table-dialog.is-expanded .table-sidebar>.small-note{display:none}
#defense-dialog.is-expanded #defense-instructions{font-size:12px;margin:0 0 6px}
#defense-dialog.is-expanded .defense-map{width:min(100%,calc((100dvh - 160px)*1.25))}
#defense-dialog.is-expanded .defense-layout{max-width:1450px;margin-inline:auto}
#boxing-dialog.is-expanded #boxing-canvas{max-height:calc(100dvh - 255px);width:100%;object-fit:contain}
#boxing-dialog.is-expanded .boxing-stage{max-width:1400px;margin-inline:auto}
#boxing-dialog.is-expanded .boxing-controls-heading>strong,#boxing-dialog.is-expanded .boxing-controls-heading>span,#boxing-dialog.is-expanded .boxing-control-group>span{display:none}
#boxing-dialog.is-expanded .boxing-controls{margin:4px 0;padding:6px}
#boxing-dialog.is-expanded .boxing-hud{padding:6px 0}
#boxing-dialog.is-expanded .boxing-bottom{padding:4px 0;margin:0}
@media(max-width:650px){
 .arcade-dialog :is(.dialog-header,.boxing-dialog-header){flex-wrap:wrap;gap:8px}
 .arcade-dialog .game-toolbar{margin-left:auto}
 .arcade-dialog .game-toolbar button{padding:7px;font-size:11px}
 .arcade-dialog.is-expanded{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 .arcade-dialog.is-expanded :is(.dialog-header,.boxing-dialog-header) h2{font-size:23px}
 #table-dialog.is-expanded .table-layout{display:flex;flex-direction:column;gap:8px}
 #table-dialog.is-expanded .table-playfield{width:100%}
 #table-dialog.is-expanded #table-canvas{height:clamp(220px,calc(100dvh - 290px),650px)}
 #table-dialog.is-expanded .table-sidebar{width:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
 #table-dialog.is-expanded .table-sidebar .scoreboard{width:100%;display:grid;grid-template-columns:repeat(3,1fr);margin:0}
 #table-dialog.is-expanded .table-sidebar .scoreboard>div{display:block;padding:4px}
 #table-dialog.is-expanded #table-instructions{font-size:11px;margin:0;width:100%}
 #table-dialog.is-expanded #table-status{flex:1;font-size:12px;margin:0}
 #table-dialog.is-expanded .table-actions{margin:0}
 #defense-dialog.is-expanded .defense-map{width:min(100%,calc((100dvh - 375px)*1.25))}
 #boxing-dialog.is-expanded #boxing-canvas{max-height:calc(100dvh - 330px);min-height:160px}
}
@media(max-height:500px) and (orientation:landscape){
 #game-dialog.is-expanded #game-arena{height:200px}
 #defense-dialog.is-expanded .defense-map{width:min(100%,calc((100dvh - 130px)*1.25))}
 .arcade-dialog.is-expanded{overflow:auto}
}
/* Legacy game IDs set dialog width; fullscreen deliberately takes precedence. */
:is(#game-dialog,#combo-dialog,#table-dialog,#defense-dialog,#boxing-dialog).is-expanded{width:100%;max-width:none;height:100dvh;max-height:100dvh;inset:0;margin:0}
#game-dialog.is-expanded:not(.game-dialog-playing) #game-arena{height:clamp(220px,calc(100dvh - 330px),740px)}
#combo-dialog.is-expanded.game-active>p:has([data-copy="pageCopy137"]),#table-dialog.is-expanded.game-active #table-instructions{display:none}
@media(max-width:650px){#table-dialog.is-expanded #table-canvas{height:clamp(180px,calc(100dvh - 330px),650px)}#table-dialog.is-expanded.game-active #table-canvas{height:clamp(180px,calc(100dvh - 295px),650px)}}
/* Boxing keeps its arena unobstructed; controls and meters occupy their own rows. */
#boxing-dialog.is-expanded{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#boxing-dialog.is-expanded .boxing-dialog-header{position:relative;inset:auto;order:0;padding:0 0 6px;flex-shrink:0;background:transparent}
#boxing-dialog.is-expanded .boxing-setup{display:flex}
#boxing-dialog.is-expanded.is-boxing .boxing-setup{display:none}
#boxing-dialog.is-expanded .boxing-hud{position:relative;inset:auto;order:1;margin:0;padding:4px 0;flex-shrink:0}
#boxing-dialog.is-expanded .boxing-stage{position:relative;inset:auto;order:2;flex:1;min-height:190px;width:100%;display:grid;place-items:center;overflow:hidden}
#boxing-dialog.is-expanded #boxing-canvas{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none!important;object-fit:contain}
#boxing-dialog.is-expanded .boxing-controls{position:relative;inset:auto;order:3;padding:6px;margin:0;flex-shrink:0}
#boxing-dialog.is-expanded .boxing-controls-heading{position:static;justify-content:flex-end;margin:0 0 4px}
#boxing-dialog.is-expanded .boxing-controls-heading>button{min-height:36px}
#boxing-dialog.is-expanded .boxing-judges{position:relative;inset:auto;order:4;padding:4px;margin:0}
#boxing-dialog.is-expanded .boxing-bottom{display:flex;order:5;font-size:12px;padding:0}
#boxing-dialog.is-expanded .boxing-bottom>p{font-size:12px;margin:0}
#boxing-dialog.is-expanded .boxing-start-overlay{padding:12px;justify-content:center;align-items:flex-end}
#boxing-dialog.is-expanded.has-result .boxing-stage{min-height:320px}
#boxing-dialog.is-expanded.has-result .boxing-start-overlay{padding:12px;justify-content:center;align-items:center}
#boxing-dialog.is-expanded #boxing-leaderboard-submit:not([hidden]){display:block;order:6}
#game-dialog.arcade-dialog .dialog-header{float:none;display:flex;justify-content:space-between;width:100%;margin:0 0 8px}
#game-dialog.arcade-dialog .dialog-header .icon-button{position:static;inset:auto}
/* Short screens must fit the action and controls in the same viewport. */
@media(max-height:500px) and (orientation:landscape){
 #combo-dialog.is-expanded.game-active .combo-stage{min-height:0;padding:8px;gap:6px}
 #combo-dialog.is-expanded.game-active #combo-notice{font-size:20px;min-height:24px;margin:0}
 #combo-dialog.is-expanded.game-active .combo-pads{min-height:88px;gap:8px}
 #combo-dialog.is-expanded.game-active .combo-pads button{min-height:44px;font-size:20px}
 #combo-dialog.is-expanded.game-active #combo-progress{margin:0;font-size:11px}
 #combo-dialog.is-expanded.game-active .scoreboard{margin:2px 0;padding:2px 0}
 #combo-dialog.is-expanded.game-active .dialog-bottom .button{min-height:44px;padding:8px 18px}
 #boxing-dialog.is-expanded.is-boxing .boxing-stage{min-height:80px}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls{display:flex;gap:8px;align-items:center;padding:4px}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls-heading{order:2;margin:0}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls-heading>button{min-height:44px}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls .boxing-touch{flex:1;gap:6px;grid-template-columns:2fr 3fr 4fr}
 #boxing-dialog.is-expanded.is-boxing .boxing-control-group:last-child{grid-column:auto}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls .boxing-touch button{min-height:44px;font-size:12px}
 #boxing-dialog.is-expanded.is-boxing .boxing-controls kbd{display:none}
 #boxing-dialog.is-expanded.is-boxing .boxing-bottom{min-height:0}
 #table-dialog.is-expanded.game-active #table-canvas{height:calc(100dvh - 150px)}
 #table-dialog.is-expanded.game-active .table-controls button{min-height:44px;padding:8px}
 #table-dialog.is-expanded.game-active .table-sidebar .scoreboard>div{padding:4px}
 #table-dialog.is-expanded.game-active #table-status{font-size:12px;padding:8px;margin:8px 0}
 #table-dialog.is-expanded.game-active .table-actions .button{min-height:44px;padding:8px 18px}
 #defense-dialog.is-expanded .defense-map{width:min(100%,calc((100dvh - 145px)*1.25))}
}
@media(max-height:500px) and (orientation:landscape){
 #game-dialog.is-expanded.game-dialog-playing{display:flex;flex-direction:column}
 #game-dialog.is-expanded.game-dialog-playing #game-instructions{display:none}
 #game-dialog.is-expanded.game-dialog-playing .scoreboard{margin:2px 0;padding:2px 0;flex-shrink:0}
 #game-dialog.is-expanded.game-dialog-playing #game-arena{height:auto;min-height:90px;flex:1;width:100%}
 #game-dialog.is-expanded.game-dialog-playing #counter-controls{margin:6px 0 0;gap:6px;flex-shrink:0}
 #game-dialog.is-expanded.game-dialog-playing #counter-controls button{min-height:44px;padding:8px;font-size:18px}
 #game-dialog.is-expanded.game-dialog-playing .dialog-bottom{flex-shrink:0;margin-top:6px}
 #game-dialog.is-expanded.game-dialog-playing .dialog-bottom .button{min-height:44px;padding:8px 18px}
 #game-dialog.is-expanded.game-dialog-playing #game-feedback{font-size:12px;margin:0}
 #combo-dialog.is-expanded.game-active #start-combo:disabled{display:none}
}
#game-dialog.is-expanded.game-dialog-playing{display:flex;flex-direction:column}
#game-dialog.is-expanded.game-dialog-playing #game-instructions{display:none}
#game-dialog.is-expanded.game-dialog-playing #game-arena{height:auto;min-height:90px;flex:1;width:100%}
#game-dialog.is-expanded.game-dialog-playing :is(.scoreboard,#counter-controls,.dialog-bottom){flex-shrink:0}
@media(max-height:500px) and (orientation:landscape){
 #game-dialog.is-expanded.game-dialog-playing .reaction-cue{top:50%;transform:translateY(-50%);padding:8px 10px;font-size:28px}
}

/* Touch layouts prioritize the arena and named actions over keyboard legends. */
.touch-help{display:none}
.market-ticker .market-source{flex-shrink:0;min-width:26px}
.market-ticker .market-source img{width:18px;min-width:18px;max-width:none;height:18px;aspect-ratio:1;object-fit:contain;flex:0 0 18px}
@media(pointer:coarse){
 .touch-help{display:block}
 .arcade-dialog :is(kbd,.keyboard-help),#counter-controls small,.combo-pads small,#record-note{display:none!important}
 .arcade-dialog{overscroll-behavior:contain}
 .arcade-dialog .game-toolbar button{min-width:44px;min-height:44px}
 #boxing-pause:disabled{display:none}
 #boxing-dialog .boxing-controls-heading{display:none}
 #boxing-dialog .boxing-controls .boxing-touch button{min-height:48px;line-height:1.15;font-size:16px;gap:0;padding:8px 4px}
 #boxing-dialog .boxing-controls .boxing-touch{margin:0;gap:10px}
 #boxing-dialog .boxing-control-group>span{font-size:11px;margin-bottom:5px}
 #boxing-dialog .boxing-controls{padding:10px}
 #boxing-dialog .boxing-help summary{min-height:44px;display:flex;align-items:center}
 #combo-dialog.game-active>.touch-help{display:none}
}
@media(pointer:coarse) and (max-width:1024px){
 #boxing-dialog[open]{display:flex;flex-direction:column;gap:8px}
 #boxing-dialog .boxing-dialog-header{order:0;margin:0;padding:0;flex-wrap:wrap}
 #boxing-dialog .boxing-dialog-header>div:first-child>p{display:none}
 #boxing-dialog .boxing-dialog-header h2{font-size:28px}
 #boxing-dialog .boxing-setup{order:3;width:100%;margin:0}
 #boxing-dialog.is-boxing .boxing-setup{display:none}
 #boxing-dialog .boxing-hud{order:1;padding:4px 0}
 #boxing-dialog .boxing-stage{order:2}
 #boxing-dialog .boxing-controls{order:3;margin:0}
 #boxing-dialog .boxing-judges{order:4}
 #boxing-dialog .boxing-bottom{order:5;margin:0;padding:0}
 #boxing-dialog .boxing-help{order:6;padding:0;margin:0}
 #boxing-dialog #boxing-leaderboard-submit{order:7}
 #boxing-dialog .boxing-controls .boxing-touch{grid-template-columns:2fr 3fr;gap:10px}
 #boxing-dialog .boxing-control-group:last-child{grid-column:1/-1}
 #boxing-dialog.is-expanded .boxing-stage{min-height:160px}
 #boxing-dialog .boxing-bottom>strong{font-size:18px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
 #boxing-dialog .boxing-controls .boxing-touch{grid-template-columns:2fr 3fr 4fr;gap:8px}
 #boxing-dialog .boxing-control-group:last-child{grid-column:auto}
 #boxing-dialog .boxing-control-group>span{display:none}
 #boxing-dialog .boxing-controls .boxing-touch button{min-height:44px;font-size:13px;padding:4px}
 #boxing-dialog.is-expanded .boxing-controls{padding:4px}
 #boxing-dialog.is-expanded.is-boxing .boxing-stage{min-height:70px}
}