/* Physical controls use original raster hardware, with live accessible buttons. */
#game-dialog[data-game="breakout"] #cabinet-play{border-bottom-width:10rem}
#game-dialog[data-game="breakout"] #cabinet-play .breakout-action-row{bottom:-6rem;height:5.8rem;left:-12px;right:-12px;display:grid;grid-template-columns:1.35fr repeat(4,minmax(44px,1fr));gap:14px;align-items:center;justify-items:center}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad){position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-height:74px;max-width:90px;aspect-ratio:1/1.3;padding:0 0 2px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;filter:none;opacity:1;color:#fff4d8;font:800 .875rem/1.25 monospace;text-shadow:0 1px 3px #000,0 1px 5px #000;cursor:pointer;text-align:center;isolation:isolate}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad)::before{content:"";position:absolute;top:0;left:6%;width:88%;aspect-ratio:1;background-image:url('/images/arcade-hardware.webp');background-size:300% 100%;background-repeat:no-repeat;pointer-events:none;transition:transform 90ms,filter 90ms;filter:drop-shadow(0 4px 3px #0008)}
#game-dialog[data-game="breakout"] #cabinet-play #touch-pad{grid-column:1;grid-row:1;max-width:96px;cursor:ew-resize;touch-action:none;user-select:none;font-family:inherit}
#game-dialog[data-game="breakout"] #cabinet-play #touch-pad::before{background-position:0 0;transform:none}
#game-dialog[data-game="breakout"] #cabinet-play #start{grid-column:2;grid-row:1}
#game-dialog[data-game="breakout"] #cabinet-play #launch{grid-column:3;grid-row:1}
#game-dialog[data-game="breakout"] #cabinet-play #breakout-pause{grid-column:4;grid-row:1}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#breakout-pause,#game-sound)::before{background-position:100% 0}
#game-dialog[data-game="breakout"] #cabinet-play #launch::before{background-position:50% 0}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound):active:not(:disabled)::before{transform:translateY(4px) scale(.97);filter:brightness(.85) drop-shadow(0 1px 1px #0009)}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound):disabled{cursor:default;color:#b8c0bf}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound):disabled::before{filter:brightness(.68) drop-shadow(0 3px 2px #0008)}
#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound):focus-visible{outline:2px solid #fff2a2;outline-offset:4px;border-radius:8px}
/* An attract screen belongs on the monitor; START belongs on the control deck. */
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #overlay{padding:0;background:#02051b url('/images/breakout-title.webp') center/cover no-repeat;box-shadow:inset 0 0 30px #0008}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #overlay>:not(#cabinet-prompt){display:none}
#cabinet-prompt{position:absolute;left:6%;right:6%;top:66%;margin:0;color:#fff8bc;text-shadow:0 2px 2px #000;font:800 1rem/1.7 monospace;text-align:center;letter-spacing:.05em}
#cabinet-prompt::before{content:"PRESS START";display:block;font:900 1.5rem/1.8 monospace;color:#fff;letter-spacing:.08em}
#cabinet-prompt::after{content:"FREE PLAY";display:block;margin-top:14px;color:#75dbe4;font:700 .875rem/1.5 monospace;letter-spacing:.16em}
#game-dialog[data-game="breakout"] #cabinet-play:not([data-screen="attract"]) #overlay{background:#020919eb;border:0;border-radius:0;font-family:monospace}
#game-dialog[data-game="breakout"] #overlay-kicker{font:800 1.125rem/1.5 monospace;color:#ffe678;letter-spacing:.12em}
#game-dialog[data-game="breakout"] #overlay h3{font-size:1.75rem;color:#fff5d7}
@media(max-width:600px){
 #game-dialog[data-game="breakout"] #cabinet-play{border-bottom-width:8.5rem}
 #game-dialog[data-game="breakout"] #cabinet-play .breakout-action-row{bottom:-5.5rem;height:5.3rem;left:-8px;right:-8px;gap:4px;grid-template-columns:repeat(5,minmax(44px,1fr))}
 #game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad){min-height:86px;aspect-ratio:1/1.55}
 #cabinet-prompt::before{font-size:1.125rem;letter-spacing:.03em}#cabinet-prompt{top:62%;font-size:.875rem}#cabinet-prompt::after{margin-top:7px}
}
#game-dialog[data-game="breakout"].large-type #cabinet-play{border-bottom-width:20px}
#game-dialog[data-game="breakout"].large-type #cabinet-play .breakout-action-row{position:relative;inset:auto;grid-template-columns:1fr 1fr;height:auto;gap:24px 16px}
#game-dialog[data-game="breakout"].large-type #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad){min-height:150px;max-width:140px;aspect-ratio:1/1.7;font-size:1rem}
#game-dialog[data-game="breakout"].large-type #cabinet-play #touch-pad{grid-column:1;grid-row:1}
#game-dialog[data-game="breakout"].large-type #cabinet-play #start{grid-column:2;grid-row:1}
#game-dialog[data-game="breakout"].large-type #cabinet-play #launch{grid-column:1;grid-row:2}
#game-dialog[data-game="breakout"].large-type #cabinet-play #breakout-pause{grid-column:2;grid-row:2}
#game-dialog[data-game="breakout"].large-type #cabinet-prompt{position:relative;inset:auto;margin-top:60%;padding:10px;background:#02051b}
#game-dialog[data-game="breakout"].large-type #cabinet-play[data-screen="attract"] #overlay{background-size:100% auto;background-position:top}
@media(min-width:800px){#game-dialog[data-game="breakout"]:not(.large-type){width:min(660px,calc(96dvh - 204px))}}
@media(prefers-reduced-motion:reduce){#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad)::before{transition:none}}

#game-dialog[data-game="breakout"] #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad){align-self:start}

/* Keep the frozen playfield visible and group the pause message on one panel. */
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="paused"] #overlay{background:linear-gradient(transparent 15%,#061324 32%,#061324 68%,transparent 85%);gap:8px;padding:24px 12px;backdrop-filter:none}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="paused"] #overlay-kicker{font-size:.875rem;letter-spacing:.24em;color:#81e9e2;margin:0}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="paused"] #overlay-title{font-family:inherit;font-size:clamp(1.5rem,5vw,2rem);margin:0;color:#fff2ce}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="paused"] #instructions{font-family:inherit;font-size:1rem;line-height:1.7;margin:6px 0 0;color:#e0edf5}

#game-dialog[data-game="breakout"].large-type #cabinet-play[data-screen="paused"] #overlay{background:#061324}

#game-dialog[data-game="breakout"] #cabinet-play #game-sound{grid-column:5;grid-row:1;white-space:normal}
#game-dialog[data-game="breakout"] #cabinet-play #game-sound[aria-pressed="true"]::before{filter:drop-shadow(0 0 5px #81eee0)}
#game-dialog[data-game="breakout"] #cabinet-play #game-sound[aria-pressed="true"]{color:#a4ffee}
#game-dialog[data-game="breakout"].large-type #cabinet-play #game-sound{grid-column:1;grid-row:3}

/* Live, silent demonstration with readable public high scores. */
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #overlay{background:linear-gradient(#0611268c,#07132624);padding:0;box-shadow:inset 0 0 30px #0008;pointer-events:none}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #overlay>#attract-board:not([hidden]){display:block}
#attract-board{position:absolute;top:5%;left:8%;right:8%;text-align:center;color:#fff1c9}
#game-dialog[data-game="breakout"] #attract-board h3{font-family:monospace;font-size:clamp(1.5rem,4vw,2.75rem);line-height:1.05;font-weight:900;letter-spacing:.06em;margin:0 0 12px;text-shadow:0 3px #14203a,0 0 18px #5ac9e86b;color:#fff1b0}
#attract-board h4{font:800 1rem/1.5 monospace;letter-spacing:.08em;margin:0;padding:8px 8px 4px;background:#061321e8;color:#9ae8ed;border-top:1px solid #7ecbd269}
#attract-board h4 span{display:block;font:500 .875rem/1.5 sans-serif;letter-spacing:0;color:#b9d0df}
#attract-ranks{list-style:none;margin:0;padding:0 12px;background:#061321e8}
#attract-ranks li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;border-top:1px solid #ffffff17;padding:7px 0;font-size:1rem;line-height:1.4}
#attract-ranks .place{color:#ffe18c;font-weight:800}#attract-ranks .name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;color:#e9f5ff}#attract-ranks .points{font-variant-numeric:tabular-nums;color:#fff0b9}
#attract-rank-status{font-size:1rem;line-height:1.6;margin:0;background:#061321e8;padding:8px 12px;color:#e1edf6}#attract-rank-status:empty{padding:0}
#attract-board small{display:block;font-size:.875rem;line-height:1.5;margin-top:7px;color:#d4eaf2;text-shadow:0 1px 3px #000}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #cabinet-prompt{top:auto;bottom:6%;font-size:1rem;background:#051121db;padding:6px;margin:0}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #cabinet-prompt::after{margin-top:0}
#game-dialog[data-game="breakout"].large-type #cabinet-play[data-screen="attract"] #overlay{position:relative;inset:auto;overflow:visible;background:#071326;display:flex;flex-direction:column}
#game-dialog[data-game="breakout"].large-type #attract-board{position:relative;inset:auto;padding:12px 6px;width:100%}
#game-dialog[data-game="breakout"].large-type #attract-ranks li{grid-template-columns:30px minmax(0,1fr)}
#game-dialog[data-game="breakout"].large-type #attract-ranks .points{grid-column:2;text-align:right}
#game-dialog[data-game="breakout"].large-type #cabinet-play[data-screen="attract"] #cabinet-prompt{position:relative;inset:auto;margin:0}
@media(max-width:380px){#attract-board{top:3%;left:4%;right:4%}#game-dialog[data-game="breakout"] #attract-board h3{font-size:1.5rem;margin-bottom:6px}#attract-ranks li{padding:3px 0;font-size:.875rem}#attract-board small{margin-top:3px}#game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] .playfield{min-height:340px}}

#attract-board h3 img{display:block;width:72%;height:auto;max-height:145px;object-fit:contain;margin:0 auto}
@media(max-width:600px){#attract-board h3 img{width:66%;max-height:86px}#attract-ranks li{font-size:1rem}}

@media(max-width:600px){
 #attract-board{top:3%;left:5%;right:5%}
 #game-dialog[data-game="breakout"] #attract-board h3{margin-bottom:6px}
 #attract-board h3 img{max-height:48px;width:70%}
 #attract-board h4{display:flex;justify-content:space-between;align-items:center;gap:4px;letter-spacing:0;padding:4px 8px;font-size:.875rem}
 #attract-board h4 span{font-size:.875rem}
 #attract-ranks{padding:0 8px}#attract-ranks li{padding:4px 0;font-size:1rem;gap:5px}
 #attract-board small{margin-top:3px}
 #game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #cabinet-prompt::before{line-height:1.3}
 #game-dialog[data-game="breakout"] #cabinet-play[data-screen="attract"] #cabinet-prompt{bottom:3%;padding:4px}
}
#game-dialog[data-game="breakout"].large-type #attract-board h4{display:block}
#game-dialog[data-game="breakout"].large-type #attract-board h3 img{max-height:145px}

#game-dialog[data-game="breakout"].large-type #cabinet-play[data-screen="attract"] .playfield{aspect-ratio:auto;height:auto;min-height:0;overflow:visible}

/* Victory stays on the live arena: luminous type, a burst and falling fragments. */
#game-dialog[data-game="breakout"] #cabinet-play:is([data-screen="stage"],[data-victory="true"]) #overlay{background:linear-gradient(#03102222,#041326c9 34%,#041326df 66%,#03102222);gap:14px;padding:20px 14px}
#game-dialog[data-game="breakout"] #cabinet-play:is([data-screen="stage"],[data-victory="true"]) #overlay-title{font-family:Outfit,sans-serif;font-weight:900;font-size:clamp(2rem,6vw,3.7rem);line-height:1.05;color:#ffe991;text-shadow:0 3px #945023,0 0 24px #ffb94099;margin:4px 0;animation:clear-arrival .65s cubic-bezier(.18,.9,.3,1.1) both}
#game-dialog[data-game="breakout"] #cabinet-play:is([data-screen="stage"],[data-victory="true"]) #instructions{white-space:pre-line;font:700 1rem/1.9 'Noto Sans JP',sans-serif;color:#eaffff;margin:8px 0;border-top:1px solid #ffe5a16b;padding-top:14px}
#game-dialog[data-game="breakout"] #cabinet-play[data-screen="stage"] #overlay-kicker{font-size:.875rem;color:#93fff0;letter-spacing:.12em}
@keyframes clear-arrival{from{opacity:0;transform:scale(.65) translateY(20px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#game-dialog[data-game="breakout"] #cabinet-play #overlay-title{animation:none}}

#game-dialog[data-game="breakout"].large-type #cabinet-play:is([data-screen="stage"],[data-victory="true"]) .playfield{height:auto;aspect-ratio:auto;overflow:visible}
#game-dialog[data-game="breakout"].large-type #cabinet-play:is([data-screen="stage"],[data-victory="true"]) #overlay{position:relative;inset:auto;overflow:visible;background:#071a2c}
#game-dialog[data-game="breakout"].large-type #cabinet-play:is([data-screen="stage"],[data-victory="true"]) #canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}

/* An illuminated emergency-exit sign marks the way back to the arcade floor. */
#game-dialog[data-game] #close-game{display:flex;align-items:center;justify-content:center;gap:4px;width:82px;min-width:82px;height:44px;padding:4px;border:1px solid #c4ffe2;border-radius:4px;background:#08784f;color:#fff;font:800 14px/1 Outfit,sans-serif;box-shadow:0 0 9px #6bffb633,inset 0 0 0 2px #065d3e;text-shadow:none}
#game-dialog[data-game] #close-game img{width:30px;height:30px;object-fit:contain}
#game-dialog[data-game] #close-game:hover{background:#096942;box-shadow:0 0 14px #6bffb666}
#game-dialog[data-game] #close-game:focus-visible{outline:3px solid #ffe59b;outline-offset:3px}
#game-dialog[data-game="breakout"] .game-top>div{padding-inline:0}
#game-dialog[data-game="breakout"].large-type .game-top>div{padding-left:0;padding-right:90px}
#game-dialog[data-game="breakout"].large-type #close-game{font-size:14px}
@media(max-width:480px){#game-dialog[data-game="breakout"]:not(.large-type) #close-game{width:54px;min-width:54px;flex-direction:column;gap:0;height:48px;padding:2px}#game-dialog[data-game="breakout"]:not(.large-type) #close-game img{width:24px;height:24px}#game-dialog[data-game="breakout"]:not(.large-type) .game-top>div{padding-inline:0}}

#game-dialog[data-game] #close-game span{font:inherit;color:#fff;letter-spacing:.03em}

#game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play .game-top{padding:0 86px 0 0}
@media(max-width:480px){#game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play .game-top{padding-right:60px}}
/* Wide phones keep the monitor and physical controls in view together. */
@media (orientation:landscape) and (max-height:540px) and (min-width:600px){
 #game-dialog[data-game="breakout"]:not(.large-type){width:min(850px,98vw);padding:4px 8px 16px;max-height:98dvh}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play{width:max-content;max-width:100%;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:20px;border-width:82px 24px 18px}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play .playfield{width:calc(100dvh - 118px);max-width:430px;min-height:0;aspect-ratio:1}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play .game-top{top:-80px;min-height:44px;left:0;right:0;justify-content:flex-start;text-align:left}
 #game-dialog[data-game="breakout"]:not(.large-type) .game-top h2{font-size:1.125rem;line-height:1.2;margin:0}
 #game-dialog[data-game="breakout"]:not(.large-type) #game-category{font-size:.875rem;letter-spacing:0}
 #game-dialog[data-game="breakout"]:not(.large-type) .game-stats{top:-32px;padding:4px 0;flex-wrap:nowrap}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play .breakout-action-row{position:relative;inset:auto;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(68px,1fr));gap:4px 12px;margin:0}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad){min-height:68px;max-width:72px;aspect-ratio:auto;font-size:.875rem}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play :is(#start,#launch,#breakout-pause,#game-sound,#touch-pad)::before{width:48px;height:48px;left:calc(50% - 24px)}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #touch-pad{grid-column:1;grid-row:1 / 3;max-width:90px;align-self:center;height:94px}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #touch-pad::before{width:70px;height:70px;left:calc(50% - 35px)}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #start{grid-column:2;grid-row:1}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #launch{grid-column:2;grid-row:2}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #breakout-pause{grid-column:1;grid-row:3}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #game-sound{grid-column:2;grid-row:3}
 #game-dialog[data-game="breakout"]:not(.large-type) #attract-board{top:2%;left:3%;right:3%}
 #game-dialog[data-game="breakout"]:not(.large-type) #attract-board h3 img{max-height:44px}
 #game-dialog[data-game="breakout"]:not(.large-type) #attract-board h4{padding:3px;font-size:.875rem;line-height:1.2}
 #game-dialog[data-game="breakout"]:not(.large-type) #attract-ranks li{font-size:.875rem;padding:2px 0}
 #game-dialog[data-game="breakout"]:not(.large-type) #attract-rank-status{font-size:.875rem;padding:4px;line-height:1.3}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-prompt::before{font-size:1rem;line-height:1.2}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-prompt::after{font-size:.875rem;line-height:1.2}
 #game-dialog[data-game="breakout"]:not(.large-type) #cabinet-play #overlay-title{font-size:1.5rem}
}