/* Native editorial layout. The supplied game palettes stay within .arcade-surface. */
/* Native focus and browser auto-scroll must never pan the clipped site frame. */
body[data-active="arcade"] #crt{overflow:clip}
.arcade-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.arcade-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:24px;border:1px solid currentColor;color:var(--off);text-decoration:none}
.arcade-card:hover{border-color:var(--green)}
.arcade-card:focus-visible,.arcade-back:focus-visible,.arcade-breadcrumb a:focus-visible,.arcade-instructions summary:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.arcade-card h2{margin:0;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.045em;line-height:1.15;overflow-wrap:anywhere}
.arcade-card h2 span{float:right;color:var(--green)}
.arcade-card p{margin:0;font-size:13px;line-height:1.8;max-width:54ch}
.arcade-card-art{height:auto;aspect-ratio:5/2;background:#06110b;overflow:hidden}
.arcade-card-art img{display:block;width:100%;height:100%;object-fit:contain}
.arcade-meta{font-size:10px;line-height:1.8;letter-spacing:.045em;opacity:.85}
.arcade-play{margin-top:auto;padding-top:12px;font-size:12px;color:var(--green)}
.arcade-note{max-width:78ch;font-size:12px;line-height:1.8}
.arcade-note h2{font-size:13px}
.arcade-note a,.arcade-back,.arcade-breadcrumb a{color:var(--green);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.arcade-breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px;margin-bottom:28px}
.arcade-game-grid{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.5fr);align-items:start;gap:clamp(24px,4vw,64px);padding-bottom:32px}
.arcade-briefing{min-width:0}
.arcade-briefing .page-title{font-size:clamp(34px,4vw,62px);overflow-wrap:anywhere;line-height:1.05;margin:20px 0}
.arcade-briefing p,.arcade-instructions li{font-size:12px;line-height:1.85}
.arcade-subtitle{color:var(--green)}
.arcade-instructions{margin:24px 0;border-block:1px solid currentColor;padding:12px 0}
.arcade-instructions summary{min-height:44px;cursor:pointer;align-content:center;font-size:12px;color:var(--green)}
.arcade-instructions h2{font-size:10px;margin:14px 0 8px;letter-spacing:.06em}
.arcade-instructions ul{padding-left:18px;margin:0}
.arcade-instructions li+li{margin-top:6px}
.arcade-surface{min-width:0;color-scheme:dark;color:#eff8ee}
#arcade-game .terminal-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px}
#arcade-game .terminal-top{flex-wrap:wrap;padding-block:5px}
#arcade-game .text-button{min-height:44px;min-width:44px;color:#c0d5c5}
#arcade-game .overlay-content h2,#arcade-game #overlay-title,#arcade-game #overlay-description{white-space:pre-line}
#arcade-game .touch-button{min-width:44px;min-height:44px}
#arcade-game .start-button{min-height:44px}
#arcade-game .touch-guide,#arcade-game .overlay-hint{color:#a6c4ad!important}
#arcade-game .terminal-bottom{height:auto;min-height:33px;flex-wrap:wrap;padding-block:8px;color:#a6b9ab}
#arcade-game .hud-label{color:#bbd3c0}
#arcade-game canvas,#arcade-game #overlay-title{color:#eff8ee}
#arcade-game #game{position:absolute;inset:0;width:100%;height:100%}
#arcade-game[data-game="signal-defense"] .game-area{aspect-ratio:8/9}
#arcade-game .touch-right>span,#arcade-game .pad-caption{color:#aec8b4}
#arcade-game .button-divider{display:none}
@media(max-width:1000px){.arcade-game-grid{grid-template-columns:minmax(0,1fr)}.arcade-briefing .page-title{font-size:clamp(32px,6vw,54px);margin:12px 0}.arcade-briefing .arcade-meta{max-width:75ch}.arcade-surface{width:100%;max-width:900px;justify-self:center}.arcade-instructions{margin:16px 0}.arcade-instructions ul{columns:2;column-gap:28px}.arcade-instructions li{break-inside:avoid}}
@media(max-width:600px){.arcade-catalog{grid-template-columns:1fr;gap:18px}.arcade-card{padding:18px}.arcade-game-grid{gap:20px}.arcade-breadcrumb{gap:8px;margin-bottom:16px}.arcade-instructions ul{columns:auto}#arcade-game .terminal-top{align-items:start;gap:0;padding-inline:10px}#arcade-game .runtime-indicator{min-height:28px;width:100%}#arcade-game .terminal-actions{justify-content:space-between;width:100%}#arcade-game .hud{grid-template-columns:repeat(2,minmax(0,1fr))}#arcade-game .hud-cell{padding:9px 10px}#arcade-game .hud-label{font-size:9px}#arcade-game .overlay-content h2{font-size:clamp(24px,7vw,42px);margin-bottom:10px}#arcade-game .overlay-eyebrow{font-size:8px;margin-bottom:8px}#arcade-game .overlay-content p:not(.overlay-eyebrow){font-size:10px;margin-bottom:10px}#arcade-game .pixel-snake,#arcade-game .pixel-invader,#arcade-game .overlay-art{display:none}#arcade-game .start-button{min-height:44px;padding:10px 14px}#arcade-game .overlay-content .overlay-hint{margin-top:10px!important}#arcade-game .touch-controls{padding:10px;gap:10px;flex-wrap:wrap}#arcade-game .screen-topline,#arcade-game .screen-bottomline{font-size:7px}}
@media(prefers-reduced-motion:reduce){#arcade-game *,#arcade-game *::before,#arcade-game *::after{animation:none!important;transition:none!important}}

/* Put the playfield before the extended instructions on narrow screens. */
@media(max-width:1000px){
 .arcade-game-grid{gap:12px}
 .arcade-briefing{display:contents}
 .arcade-briefing>.eyebrow{order:0}
 .arcade-briefing>.page-title{order:1}
 .arcade-subtitle{order:2;margin:0}
 #arcade-objective{order:3;margin:0 0 8px}
 .arcade-surface{order:4}
 .arcade-instructions{order:5}
 .arcade-briefing>.arcade-meta{order:6}
 .arcade-back{order:7}
}
#arcade-game[data-game="snake"],#arcade-game[data-game="signal-defense"]{max-width:615px;justify-self:center}
@media(max-width:600px){#arcade-game .overlay-illustration{display:none}#arcade-game .control-right{flex-wrap:wrap}#arcade-game .touch-helper{color:#aec8b4}#arcade-game .control-label,#arcade-game .control-right>span{color:#aec8b4}}

/* Keep the whole terminal inside the native scroll area on short screens. */
@media(min-width:600px) and (max-height:500px) and (orientation:landscape){
 #arcade-game{max-width:none!important}
 #arcade-game .terminal{display:grid;grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:44px 70px minmax(0,1fr);height:calc(100dvh - 150px);min-height:204px;max-width:none}
 #arcade-game .terminal-top{grid-column:1/-1;min-height:44px;height:44px;padding:0 8px;gap:8px;flex-wrap:nowrap}
 #arcade-game .terminal-actions{gap:8px;flex-wrap:nowrap}
 #arcade-game .text-button{font-size:9px}
 #arcade-game .game-area{grid-column:1;grid-row:2/4;height:100%;width:auto;max-width:100%;justify-self:center}
 #arcade-game .hud{grid-column:2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch;border-left:1px solid #2e4836}
 #arcade-game .hud-cell{padding:3px 7px;gap:1px}
 #arcade-game .hud-label{font-size:8px}
 #arcade-game .hud-value{font-size:15px;line-height:1.2}
 #arcade-game .touch-controls{grid-column:2;grid-row:3;padding:5px;gap:5px;flex-wrap:wrap;justify-content:center;align-content:center;border-left:1px solid #2e4836}
 #arcade-game .touch-button{width:48px;height:44px;min-height:44px;gap:1px}
 #arcade-game .fire-button{width:60px;height:44px}
 #arcade-game .control-symbol{font-size:20px}
 #arcade-game .control-cluster{gap:4px}
 #arcade-game .control-right{margin:0;gap:4px}
 #arcade-game .touch-right{margin:0;gap:4px}
 #arcade-game .direction-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);gap:3px}
 #arcade-game .pad-caption,#arcade-game .touch-guide,#arcade-game .touch-helper,#arcade-game .control-right>span,#arcade-game .touch-right>span,#arcade-game .terminal-bottom{display:none}
 #arcade-game .overlay-art,#arcade-game .overlay-ship,#arcade-game .overlay-illustration,#arcade-game .pixel-snake,#arcade-game .pixel-invader,#arcade-game .overlay-hint,#arcade-game .overlay-eyebrow{display:none}
 #arcade-game .screen-overlay{padding:6px}
 #arcade-game .overlay-content{padding:0;max-width:100%}
 #arcade-game #overlay-description{display:none}
 #arcade-game .overlay-content h2,#arcade-game #overlay-title{font-size:24px;line-height:1.15;margin-bottom:6px}
 #arcade-game .overlay-content p:not(.overlay-eyebrow){font-size:10px;line-height:1.4;margin-bottom:6px}
 #arcade-game .start-button{min-height:44px;padding:8px 12px;font-size:10px}
 #arcade-game .screen-topline,#arcade-game .screen-bottomline{font-size:6px;left:6px;right:6px}
}
@media(min-width:600px) and (max-height:360px) and (orientation:landscape){
 #arcade-game .terminal{grid-template-rows:44px 54px minmax(0,1fr)}
 #arcade-game .hud-cell{padding-block:0}
}
@media(max-width:599px) and (max-height:740px) and (orientation:portrait){
 #arcade-game .terminal{display:grid;grid-template-rows:68px minmax(0,1fr) 62px 104px;height:calc(100dvh - 120px)}
 #arcade-game .terminal-top{min-height:68px;height:68px;padding:0 8px;gap:0}
 #arcade-game .runtime-indicator{min-height:24px;height:24px;width:100%;font-size:9px}
 #arcade-game .terminal-actions{width:100%;height:44px;justify-content:space-between;gap:4px}
 #arcade-game .text-button{font-size:9px;padding-block:0}
 #arcade-game .game-area{width:min(100%,calc(100dvh - 356px));height:auto;align-self:center;justify-self:center;aspect-ratio:1}
 #arcade-game[data-game="signal-defense"] .game-area{width:min(100%,calc((100dvh - 356px)*.8888889));aspect-ratio:8/9}
 #arcade-game[data-game="asteroids"] .game-area,#arcade-game[data-game="breakout"] .game-area{width:min(100%,calc((100dvh - 356px)*1.03));aspect-ratio:1.03}
 #arcade-game .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
 #arcade-game .hud-cell{padding:2px 7px;gap:0}
 #arcade-game .hud-label{font-size:8px;line-height:10px}
 #arcade-game .hud-value{font-size:14px;line-height:16px}
 #arcade-game .touch-controls{padding:5px;gap:5px;flex-wrap:wrap;justify-content:center;align-content:center}
 #arcade-game .touch-button{width:48px;height:44px;min-height:44px;gap:1px}
 #arcade-game .fire-button{width:60px;height:44px}
 #arcade-game .control-symbol{font-size:20px}
 #arcade-game .control-cluster,#arcade-game .touch-left{gap:4px}
 #arcade-game .control-right,#arcade-game .touch-right{margin:0;gap:4px}
 #arcade-game .direction-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);gap:3px}
 #arcade-game .pad-caption,#arcade-game .touch-guide,#arcade-game .touch-helper,#arcade-game .control-right>span,#arcade-game .touch-right>span,#arcade-game .terminal-bottom{display:none}
 #arcade-game .overlay-art,#arcade-game .overlay-ship,#arcade-game .overlay-illustration,#arcade-game .pixel-snake,#arcade-game .pixel-invader,#arcade-game .overlay-hint,#arcade-game .overlay-eyebrow,#arcade-game #overlay-description{display:none}
 #arcade-game .screen-overlay{padding:6px}
 #arcade-game .overlay-content{padding:0;max-width:100%}
 #arcade-game .overlay-content h2,#arcade-game #overlay-title{font-size:24px;line-height:1.15;margin-bottom:6px}
 #arcade-game .start-button{min-height:44px;padding:8px 12px;font-size:10px}
 #arcade-game .screen-topline,#arcade-game .screen-bottomline{font-size:6px;left:6px;right:6px}
}