/* The portrait playfield owns the vertical space; information sits beside it. */
body[data-game=breaker]{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 30% 60%,#182a34,#0d0c15 65%)}
.breaker-app{width:min(100%,1120px);margin:0 auto;flex:1;min-height:0;padding:12px 20px;display:grid;grid-template-columns:minmax(0,1fr) 285px;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:12px 24px}
.breaker-heading{grid-column:2;grid-row:1}.breaker-heading .title-kicker{font-size:9px;color:#85dacd}.breaker-heading h1{font:clamp(17px,2vw,24px)/1.5 'Press Start 2P',monospace;color:#ffdf78;margin:8px 0}.breaker-heading p{color:#b8b0c4;font-size:13px;margin:0}
.breaker-app .hud{grid-column:2;grid-row:2;padding:10px 12px;border:1px solid #3d5c65;border-radius:10px;flex-wrap:wrap;gap:6px 12px;font-size:13px}.breaker-app .hud>span:first-child{width:100%;display:flex;justify-content:space-between;align-items:center}.breaker-app .hud strong{font:24px/1.3 'Press Start 2P',monospace;color:#00ffff}
.breaker-stage-space{grid-column:1;grid-row:1/6;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}.breaker-app .stage{width:min(100cqw,80cqh);height:min(100cqh,125cqw);aspect-ratio:4/5;max-width:none;margin:0;border-color:#e8bf5788;border-radius:12px;box-shadow:0 0 38px #04dec017,0 15px 50px #0008}
.breaker-app .overlay{background:#0c0b14e8;padding:18px;gap:16px;overflow:auto}.breaker-app .overlay h2{font:clamp(15px,4.4cqw,24px)/1.7 'Press Start 2P',monospace;color:#ffdf78}.breaker-app .overlay p{font-size:clamp(13px,3.5cqw,17px);line-height:1.7}.breaker-app .overlay button{max-width:100%;font-size:12px}.breaker-app .loading:empty{display:none}
.breaker-controls{grid-column:2;grid-row:3;display:grid;gap:8px}.breaker-controls .touch,.breaker-controls .actions{display:flex;gap:6px;margin:0}.breaker-controls button{flex:1;min-width:0;padding:8px 5px;font-size:9px}.breaker-controls .touch button{font-size:18px;padding:4px}.breaker-controls .actions button:last-child{margin-left:0}
.breaker-rules{grid-column:2;grid-row:4}.breaker-app .ticket{font-size:13px;line-height:1.45;min-height:0;padding:9px 11px;border-color:#e8bf5755}.breaker-rules .objective{font-size:13px;color:#cfc5d8;line-height:1.5;margin:9px 0}.breaker-rules .status{font-size:12px;line-height:1.4;min-height:17px;margin:4px 0;color:#82f0cc}.breaker-rules .note{font-size:11px;margin:0;color:#b7a9c6}
.breaker-board-preview{grid-column:2;grid-row:5;min-height:0;overflow:auto;padding:12px;border-radius:9px}.breaker-board-preview h2{font-size:11px;margin-bottom:6px}.breaker-board-preview ol{font-size:9px;margin:6px 0}.breaker-board-preview .lb-row{margin:4px 0}.breaker-board-preview p{font-size:11px;margin:6px 0}.breaker-board-preview button{width:100%;font-size:9px;min-height:40px;padding:6px}
.breaker-chunky{position:absolute;inset:36% 4% auto;pointer-events:none;text-align:center;display:grid;gap:9px;color:#ffe070;text-shadow:2px 2px #000,0 0 20px #f9ad16;background:#171222ec;border:1px solid #ffe070;border-radius:10px;padding:18px 5px}.breaker-chunky strong{font:clamp(18px,6cqw,32px)/1.5 'Press Start 2P',monospace}.breaker-chunky span{font-size:12px;font-weight:800;color:#fff1bd}
.breaker-help{position:fixed;inset:0;z-index:30;background:#050812ed;display:grid;place-items:center;padding:16px}.breaker-help>div{width:min(100%,540px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #ffce64;background:#171522;border-radius:12px;padding:22px}.breaker-help h2{font:16px/1.7 'Press Start 2P',monospace;color:#ffce64;margin:0}.breaker-help p{font-size:15px;line-height:1.6}
#breaker-board{width:min(94vw,440px);max-height:92dvh;overflow:auto;border-radius:12px}#breaker-board::backdrop{background:#000c}#breaker-board .board-actions{display:flex;justify-content:space-between;gap:10px}
@media(max-height:780px) and (min-width:701px){.breaker-app{gap:8px 20px;padding:8px 16px}.breaker-heading .title-kicker,.breaker-heading p{display:none}.breaker-heading h1{font-size:20px;margin:2px 0}.breaker-app .hud{padding:6px 10px}.breaker-app .hud>span:first-child{width:auto;gap:8px}.breaker-app .hud strong{font-size:20px}.breaker-controls .touch{display:none}.breaker-rules .objective{font-size:12px;margin:5px 0}.breaker-rules .status{display:none}.breaker-board-preview{padding:9px}.breaker-board-preview ol{font-size:9px}}
@media(max-width:700px) and (orientation:portrait){
 body[data-game=breaker]{height:auto;min-height:100dvh;overflow:auto}
 .breaker-app{display:flex;flex-direction:column;flex:none;width:100%;padding:8px;gap:8px;min-height:calc(100dvh - 126px)}
 .breaker-heading{text-align:center}.breaker-heading .title-kicker,.breaker-heading p{display:none}.breaker-heading h1{font-size:17px;margin:0}
 .breaker-app .hud{padding:6px 9px;flex-wrap:nowrap;font-size:12px;gap:6px}.breaker-app .hud>span:first-child{width:auto;gap:7px}.breaker-app .hud strong{font-size:18px}
 .breaker-stage-space{width:100%;height:calc((100vw - 16px)*1.25);flex:none}.breaker-app .stage{width:100%;height:100%;border-radius:10px}
 .breaker-controls{display:flex;gap:6px}.breaker-controls .touch{flex:1}.breaker-controls .actions{flex:2}.breaker-controls button{font-size:8px;padding:5px 3px}.breaker-controls .touch button{font-size:17px}
 .breaker-rules .objective,.breaker-rules .status,.breaker-rules .note{display:none}.breaker-app .ticket{padding:6px 8px;text-align:center;font-size:12px}
 .breaker-board-preview{border:0;background:none;box-shadow:none;padding:0;overflow:visible}.breaker-board-preview h2,.breaker-board-preview ol,.breaker-board-preview p{display:none}.breaker-board-preview button{width:auto;display:block;margin:0 auto;min-height:38px;font-size:8px}
}
@media(max-height:540px) and (min-width:600px){.breaker-app{grid-template-columns:minmax(0,1fr) 245px;gap:6px 16px;padding:5px 12px}.breaker-heading h1{font-size:16px}.breaker-rules .objective,.breaker-rules .note{display:none}.breaker-board-preview ol,.breaker-board-preview h2,.breaker-board-preview p{display:none}.breaker-board-preview{padding:0;border:0;background:none;box-shadow:none;overflow:visible}.breaker-app .hud{font-size:12px}.breaker-app .hud strong{font-size:17px}.breaker-app .ticket{font-size:12px;padding:6px}.breaker-app .overlay{padding:10px;gap:8px}.breaker-app .overlay p{font-size:12px}.breaker-app .overlay button{min-height:40px;font-size:9px}}
/* Short phones: flex measures the real header/HUD/control heights, then gives
   every remaining pixel to the stage without distorting its 4:5 playfield. */
@media(max-width:700px) and (max-height:760px) and (orientation:portrait){
 body[data-game=breaker]{height:100vh;height:100dvh;min-height:0;overflow:hidden}
 .breaker-app{flex:1;min-height:0;gap:6px;padding:6px 8px max(6px,env(safe-area-inset-bottom))}
 .breaker-app> :not(.breaker-stage-space){flex-shrink:0}
 .breaker-stage-space{flex:1;min-height:0;height:auto;container-type:size}
 .breaker-app .stage{width:min(100cqw,80cqh);height:min(100cqh,125cqw)}
 .breaker-app .overlay{gap:8px;padding:10px}.breaker-app .overlay h2{font-size:14px}.breaker-app .overlay p{font-size:12px;line-height:1.5}.breaker-app .overlay button{font-size:9px}
 .breaker-app .ticket{font-size:11px;padding:5px 6px}.breaker-board-preview button{min-height:36px;padding:5px 12px}
}
@media(prefers-reduced-motion:no-preference){.breaker-chunky strong{animation:breaker-glow .45s ease-in-out 3}@keyframes breaker-glow{50%{color:#fff;text-shadow:0 0 20px #ffcf42,0 0 30px #ffcf42}}}