/* Imported game presentation; every selector is confined to the playfield root. */
#arcade-game {
  color-scheme: dark;
  --mint: #c6fac6;
  --mint-dim: #84ba9a;
  --bg: #080e0b;
  --panel: #101b15;
  --panel-deep: #070f0b;
  --line: #294136;
  --muted: #8b9d91;
  --text: #eff8ee;
  --amber: #edb37f;
}
#arcade-game * { box-sizing: border-box; }
#arcade-game html { min-width: 280px; background: var(--bg); }
#arcade-game body {
  margin: 0; min-height: 100svh; color: var(--text);
  background: radial-gradient(ellipse at 27% 34%, rgba(65, 123, 77, .095), transparent 48%),
              radial-gradient(ellipse at 87% 90%, rgba(34, 78, 59, .13), transparent 46%), var(--bg);
  font-family: var(--mono); -webkit-font-smoothing: antialiased;
}
#arcade-game body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(154,196,166,.02) 1px, transparent 1px),linear-gradient(90deg,rgba(154,196,166,.02) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 25%,#000 100%);
}
#arcade-game button, #arcade-game a { -webkit-tap-highlight-color: transparent; }
#arcade-game button { font: inherit; cursor: pointer; }
#arcade-game button:focus-visible, #arcade-game a:focus-visible, #arcade-game canvas:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
#arcade-game .site-shell { max-width: 1410px; margin: 0 auto; padding: 0 clamp(18px,4.5vw,66px) 28px; }
#arcade-game .masthead { height:93px; display:flex; align-items:center; gap:22px; justify-content:space-between; border-bottom:1px solid var(--line); }
#arcade-game .identity { color:var(--mint); text-decoration:none; display:flex; align-items:center; gap:15px; }
#arcade-game .identity-word { font-family:var(--mono); font-size:27px; line-height:1; font-weight:850; letter-spacing:-.085em; }
#arcade-game .cursor { color:var(--mint); }
#arcade-game .identity-caption { color:var(--muted); font-size:9px; letter-spacing:.08em; border-left:1px solid #3d5144; padding-left:15px; line-height:1.6; max-width:100px; }
#arcade-game .masthead-center { color:#6f8475; letter-spacing:.14em; font-size:10px; }
#arcade-game .exit-link { color:var(--text); text-decoration:none; font-size:10px; white-space:nowrap; letter-spacing:.05em; transition:color .15s; }
#arcade-game .exit-link:hover { color:var(--mint); }
#arcade-game .layout { display:grid; grid-template-columns:minmax(240px,1fr) minmax(430px,615px); align-items:start; gap:clamp(32px,7vw,110px); padding:clamp(35px,5vw,78px) 0 0; }
#arcade-game .briefing { padding-top:11px; }
#arcade-game .eyebrow { color:var(--mint-dim); font-size:11px; letter-spacing:.045em; line-height:1.6; display:flex; gap:12px; align-items:center; }
#arcade-game .eyebrow-square { width:7px; height:7px; flex:0 0 auto; background:var(--mint); box-shadow:0 0 15px #8fd99977; }
#arcade-game h1 { font-size:clamp(64px,7vw,106px); letter-spacing:-.09em; font-weight:800; line-height:.92; margin:31px 0 35px; }
#arcade-game .briefing-rule { height:1px; max-width:310px; background:linear-gradient(to right,var(--mint),transparent); }
#arcade-game .premise { font-size:11px; letter-spacing:.08em; margin:32px 0 13px; color:var(--mint); }
#arcade-game .description { font-size:13px; line-height:1.8; color:#b0c5b5; max-width:340px; margin:0; }
#arcade-game .controls-guide { margin-top:49px; border-top:1px solid #294136; padding-top:18px; max-width:325px; }
#arcade-game .guide-heading { color:var(--mint); letter-spacing:.12em; font-size:10px; margin-bottom:17px; }
#arcade-game .guide-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 11px; font-size:11px; letter-spacing:.04em; color:#99b19f; }
#arcade-game .key-set { display:flex; align-items:center; gap:5px; }
#arcade-game kbd { display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:28px; border:1px solid #4c6955; background:#122219; color:#c3dac5; padding:0 7px; font:11px var(--mono); border-radius:2px; }
#arcade-game .touch-guide { color:#718c78; font-size:10px; line-height:1.8; margin:19px 0 0; }
#arcade-game .design-note { color:#718e79; font-size:9px; letter-spacing:.04em; line-height:1.7; margin-top:58px; }
#arcade-game .note-signal { color:var(--mint); margin-right:6px; }
#arcade-game .terminal { border:1px solid #395346; background:#101b15; min-width:0; width:100%; box-shadow:0 28px 85px rgba(0,0,0,.23); }
#arcade-game .terminal-top { min-height:49px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 17px; background:#112017; font-size:10px; letter-spacing:.07em; border-bottom:1px solid #2c4937; }
#arcade-game .runtime-indicator { display:flex; align-items:center; gap:10px; color:#a5b7a9; min-width:0; }
#arcade-game .live-dot { width:6px; height:6px; background:var(--mint); border-radius:50%; box-shadow:0 0 12px #c6fac66b; flex:0 0 auto; }
#arcade-game .terminal-actions { display:flex; align-items:center; gap:12px; white-space:nowrap; }
#arcade-game .text-button { background:none; color:#aec0b1; border:0; padding:9px 0; font-size:10px; letter-spacing:.06em; }
#arcade-game .text-button:hover { color:var(--mint); }
#arcade-game .button-divider { color:#506b57; }
#arcade-game .game-area { position:relative; width:100%; aspect-ratio:1; background:#06110b; overflow:hidden; isolation:isolate; }
#arcade-game #game { display:block; width:100%; height:100%; aspect-ratio:1; touch-action:none; image-rendering:auto; user-select:none; -webkit-user-select:none; }
#arcade-game .game-area::after { content:""; pointer-events:none; z-index:2; position:absolute; inset:0; opacity:.17; background:repeating-linear-gradient(180deg,transparent 0px,transparent 3px,rgba(0,0,0,.19) 4px,transparent 5px); }
#arcade-game .screen-topline,#arcade-game .screen-bottomline { z-index:2; position:absolute; left:15px; right:15px; pointer-events:none; display:flex; justify-content:space-between; gap:9px; font-size:8px; letter-spacing:.1em; color:#739079; }
#arcade-game .screen-topline { top:13px; } #arcade-game .screen-bottomline { bottom:13px; }
#arcade-game .corner { position:absolute; z-index:3; width:17px; height:17px; pointer-events:none; opacity:.75; }
#arcade-game .corner-tl { top:0; left:0; border-top:1px solid #8cd29c; border-left:1px solid #8cd29c; }
#arcade-game .corner-tr { top:0; right:0; border-top:1px solid #8cd29c; border-right:1px solid #8cd29c; }
#arcade-game .corner-bl { bottom:0; left:0; border-bottom:1px solid #8cd29c; border-left:1px solid #8cd29c; }
#arcade-game .corner-br { bottom:0; right:0; border-bottom:1px solid #8cd29c; border-right:1px solid #8cd29c; }
#arcade-game .screen-overlay { position:absolute; z-index:4; inset:0; background:rgba(4,11,7,.88); display:grid; place-items:center; padding:18px 12px; text-align:center; }
#arcade-game .screen-overlay[hidden] { display:none !important; }
#arcade-game .overlay-content { width:100%; max-width:430px; }
#arcade-game .overlay-eyebrow { color:var(--mint-dim); font-size:11px; letter-spacing:.12em; margin:0 0 20px; }
#arcade-game .pixel-snake { position:relative; width:170px; height:57px; margin:0 auto 27px; }
#arcade-game .pixel-snake i { display:block; position:absolute; width:16px; height:16px; background:#a8e7a7; box-shadow:inset -3px -3px 0 #609d76; }
#arcade-game .pixel-snake i:nth-child(1){left:8px;top:5px} #arcade-game .pixel-snake i:nth-child(2){left:26px;top:5px} #arcade-game .pixel-snake i:nth-child(3){left:44px;top:5px}
#arcade-game .pixel-snake i:nth-child(4){left:62px;top:5px} #arcade-game .pixel-snake i:nth-child(5){left:62px;top:23px}
#arcade-game .pixel-snake i:nth-child(6){left:80px;top:23px} #arcade-game .pixel-snake i:nth-child(7){left:98px;top:23px}
#arcade-game .pixel-snake i:nth-child(8){left:116px;top:23px;background:var(--mint);box-shadow:inset -3px -3px 0 #83bb91}
#arcade-game .pixel-snake i.food-pixel {left:153px;top:23px;background:var(--amber);box-shadow:0 0 15px #efb17c65; width:11px;height:11px; }
#arcade-game .overlay-content h2 { color:var(--text); letter-spacing:-.08em; font-size:clamp(41px,5.8vw,72px); line-height:.91; margin:0 0 22px; font-weight:800; }
#arcade-game .overlay-content p:not(.overlay-eyebrow) { font-size:clamp(10px,1vw,12px); color:#b0c8b4; line-height:1.75; margin:0 auto 25px; }
#arcade-game .start-button { background:var(--mint); color:#0c2517; border:1px solid var(--mint); min-height:53px; padding:14px 27px; font:800 12px var(--mono); letter-spacing:.055em; transition:background .12s,box-shadow .12s,transform .12s; }
#arcade-game .start-button:hover { background:#e4ffe0; box-shadow:0 0 24px #9bdea444; }
#arcade-game .start-button:active { transform:scale(.975); }
#arcade-game .overlay-content .overlay-hint { color:#759480 !important; font-size:9px !important; letter-spacing:.08em; margin:20px 0 0 !important; }
/* The native two-column layout gives this square about 400px, even on a wide
   monitor. Keep the complete ready screen, including Start, inside that square. */
@media (min-width:1001px) {
  #arcade-game .overlay-content h2 { font-size:clamp(32px,3.2vw,48px); margin-bottom:12px; }
  #arcade-game .overlay-eyebrow { margin-bottom:12px; }
  #arcade-game .pixel-snake { margin-bottom:12px; }
  #arcade-game .overlay-content p:not(.overlay-eyebrow) { margin-bottom:12px; }
  #arcade-game .overlay-content .overlay-hint { margin-top:10px !important; }
}
#arcade-game .hud { display:grid; grid-template-columns:1.15fr 1.25fr .7fr .7fr; background:#14221a; border-top:1px solid #2e4836; border-bottom:1px solid #2e4836; }
#arcade-game .hud-cell { min-width:0; padding:14px 14px 13px; border-right:1px solid #2a4332; display:flex; flex-direction:column; gap:6px; }
#arcade-game .hud-cell:last-child { border-right:0; }
#arcade-game .hud-label { font-size:9px; letter-spacing:.06em; white-space:nowrap; color:#95b39c; }
#arcade-game .hud-value { color:var(--mint); font-size:clamp(16px,1.7vw,22px); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.04em; }
#arcade-game .touch-controls { display:flex; align-items:center; gap:20px; justify-content:space-between; padding:15px 18px; background:#0b160f; }
#arcade-game .direction-pad { display:grid; grid-template-columns:repeat(3,55px); grid-template-rows:repeat(2,44px); gap:5px; flex:0 0 auto; }
#arcade-game .touch-button { border:1px solid #436d4d; background:#152a1b; color:var(--mint); font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:background .1s,border-color .1s; }
#arcade-game .touch-button:active,#arcade-game .touch-button.is-active { color:#0b2212; background:var(--mint); border-color:var(--mint); }
#arcade-game .dir-up { grid-area:1 / 2; } #arcade-game .dir-left { grid-area:2 / 1; } #arcade-game .dir-down { grid-area:2 / 2; } #arcade-game .dir-right { grid-area:2 / 3; }
#arcade-game .touch-right { display:flex; flex-direction:column; gap:9px; color:#9fc4aa; margin-right:auto; }
#arcade-game .touch-right strong { color:var(--mint); font-size:11px; letter-spacing:.025em; }
#arcade-game .touch-right > span { font-size:9px; line-height:1.8; color:#74927d; }
#arcade-game .pad-caption { color:#77937d; font-size:8px; line-height:1.5; white-space:nowrap; margin-left:auto; writing-mode:vertical-rl; }
#arcade-game .terminal-bottom { display:flex; justify-content:space-between; align-items:center; height:33px; padding:0 17px; gap:12px; color:#6b8471; font-size:8px; letter-spacing:.02em; }
#arcade-game .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#arcade-game .noscript { text-align:center; color:var(--mint); }
@media (max-width:1080px) {
  #arcade-game .layout { grid-template-columns:minmax(175px,.86fr) minmax(410px,1.55fr); gap:32px; }
  #arcade-game h1 { font-size:clamp(58px,6vw,75px); }
  #arcade-game .hud-cell { padding-left:10px; padding-right:10px; }
  #arcade-game .touch-right > span { font-size:8px; }
}
@media (max-width:760px) {
  #arcade-game .site-shell { padding-left:14px; padding-right:14px; }
  #arcade-game .masthead { height:64px; }
  #arcade-game .identity-word { font-size:24px; }
  #arcade-game .identity-caption,#arcade-game .masthead-center { display:none; }
  #arcade-game .exit-link { font-size:10px; }
  #arcade-game .layout { display:flex; flex-direction:column; gap:15px; padding-top:21px; }
  #arcade-game .briefing { padding:0; width:100%; }
  #arcade-game .eyebrow { font-size:9px; }
  #arcade-game h1 { font-size:clamp(32px,9vw,49px); margin:10px 0 0; line-height:1; }
  #arcade-game .briefing-rule,#arcade-game .premise,#arcade-game .description,#arcade-game .controls-guide,#arcade-game .design-note { display:none; }
  #arcade-game .terminal { width:100%; max-width:600px; align-self:center; }
  #arcade-game .terminal-top { min-height:42px; padding:0 11px; font-size:9px; }
  #arcade-game .text-button { font-size:9px; }
  #arcade-game .terminal-actions { gap:8px; }
  #arcade-game .screen-topline,#arcade-game .screen-bottomline { font-size:7px; left:12px; right:12px; }
  #arcade-game .hud-cell { padding:10px 8px; gap:5px; }
  #arcade-game .hud-label { font-size:8px; }
  #arcade-game .hud-value { font-size:clamp(15px,4.3vw,23px); }
  #arcade-game .touch-controls { padding:10px 14px; gap:14px; }
  #arcade-game .direction-pad { grid-template-columns:repeat(3,53px); grid-template-rows:repeat(2,43px); }
  #arcade-game .touch-right strong { font-size:10px; }
  #arcade-game .pad-caption { display:none; }
  #arcade-game .terminal-bottom { font-size:7px; height:26px; }
  #arcade-game .overlay-content h2 { font-size:clamp(36px,10vw,61px); }
  #arcade-game .overlay-eyebrow { margin-bottom:12px; }
  #arcade-game .pixel-snake { margin-bottom:17px; }
}
@media (max-width:375px) {
  #arcade-game .site-shell { padding-left:9px; padding-right:9px; }
  #arcade-game .layout { padding-top:16px; }
  #arcade-game .hud-cell { padding-left:7px; padding-right:7px; }
  #arcade-game .hud-label { font-size:7px; }
  #arcade-game .hud-value { font-size:14px; }
  #arcade-game .direction-pad { grid-template-columns:repeat(3,46px); grid-template-rows:repeat(2,42px); gap:4px; }
  #arcade-game .touch-right strong { font-size:9px; }
  #arcade-game .touch-right > span { font-size:8px; }
  #arcade-game .terminal-bottom { font-size:6px; }
  #arcade-game .screen-topline,#arcade-game .screen-bottomline { font-size:6px; }
}
@media (max-width:440px) and (max-height:700px) and (orientation:portrait) {
  #arcade-game .site-shell { padding:0; }
  #arcade-game .masthead,#arcade-game .briefing { display:none; }
  #arcade-game .layout { padding:0; gap:0; }
  #arcade-game .terminal { max-width:none; border-left:0; border-right:0; }
  #arcade-game .terminal-top { min-height:34px; }
  #arcade-game .terminal-bottom { height:22px; }
  #arcade-game .touch-controls { padding:8px 12px; }
  #arcade-game .direction-pad { grid-template-rows:repeat(2,38px); }
  #arcade-game .overlay-content h2 { font-size:clamp(32px,9vw,48px); }
  #arcade-game .overlay-content .overlay-hint { margin-top:10px !important; }
  #arcade-game .pixel-snake { transform:scale(.82); margin-top:-4px; margin-bottom:8px; }
  #arcade-game .overlay-content p:not(.overlay-eyebrow) { margin-bottom:13px; }
  #arcade-game .start-button { min-height:45px; }
}
@media (prefers-reduced-motion:reduce) {
  #arcade-game *,#arcade-game *::before,#arcade-game *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}