.decision-map .map-core[data-secret-control] { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.decision-map .map-core.is-dragging { cursor: grabbing; transition: none; }
.design-snake { margin: auto; width: min(620px,94vw); max-width: 94vw; max-height: 96dvh; overflow: auto; padding: clamp(14px,3vw,24px); border: 1px solid var(--line-strong); border-radius: 24px; background: rgba(var(--bg-rgb),.95); color: var(--ink); backdrop-filter: blur(24px); box-shadow: 0 24px 100px #0008; }
.design-snake::backdrop { background: rgba(5,12,9,.72); backdrop-filter: blur(12px); cursor: default; }
html.has-custom-cursor .design-snake, html.has-custom-cursor .design-snake * { cursor: auto !important; }
html.has-custom-cursor .design-snake button { cursor: pointer !important; }
body:has(.design-snake[open]) { overflow: hidden; }
body:has(.design-snake[open]) :is(.cursor-dot,.cursor-ring) { visibility: hidden; }
.snake-top { display: flex; gap: 16px; align-items: start; justify-content: space-between; }
.snake-eyebrow { color: var(--soft); letter-spacing: .12em; font-size: .65rem; margin: 0 0 6px; }
.snake-top h2 { font: 600 clamp(1.6rem,5vw,2.2rem)/1.1 var(--font-display,serif); margin: 0; }
.design-snake button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(var(--bg-rgb),.8); color: var(--ink); font: inherit; cursor: pointer; }
.design-snake button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.design-snake button:disabled { opacity: .45; cursor: default; }
.snake-help { margin: 14px 0 10px; font-size: .8rem; line-height: 1.5; color: var(--soft); }
.snake-scoreline { display: flex; justify-content: space-between; font-size: .8rem; gap: 12px; margin: 10px 0; }
.snake-board { position: relative; display: grid; grid-template-columns: repeat(24,1fr); grid-template-rows: repeat(18,1fr); width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); background-color: var(--bg); background-image: linear-gradient(rgba(var(--ink-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.06) 1px,transparent 1px); background-size: calc(100% / 24) calc(100% / 18); border-radius: 8px; overflow: hidden; touch-action: none; }
.snake-board > span { min-width: 0; min-height: 0; }
.snake-segment { position: absolute; top: 0; left: 0; width: calc(100% / 24); height: calc(100% / 18); will-change: transform; }
.snake-tail { background: var(--segment-color, var(--accent-ui)); border: 2px solid var(--bg); border-radius: 5px; }
.snake-head { z-index: 2; overflow: visible; filter: drop-shadow(1px 2px 2px #0008); }
.snake-head svg { width: 145%; height: 145%; overflow: visible; }
.snake-head path { fill: var(--segment-color, var(--accent-ui)); stroke: var(--bg); }
.snake-collect-glow {
  position: absolute; z-index: 3; width: 80px; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,255,69,.7) 0%, rgba(201,255,69,.24) 30%, rgba(201,255,69,0) 70%);
  border: 1px solid rgba(201,255,69,.5);
  animation: snake-collect .7s cubic-bezier(.16,.65,.3,1) both;
}
@keyframes snake-collect {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.12); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.65); }
}
@media (prefers-reduced-motion: reduce) {
  .snake-collect-glow { animation-name: snake-collect-fade; }
  @keyframes snake-collect-fade { from { opacity: .65; transform: translate(-50%,-50%); } to { opacity: 0; transform: translate(-50%,-50%); } }
}
.design-snake .snake-close { flex: 0 0 44px; padding: 0; }
@media (prefers-reduced-transparency: reduce) { .design-snake { background: var(--bg); backdrop-filter: none; } }
.snake-food { display: grid; place-items: center; padding: 2px 4px; border-radius: 5px; background: #c9ff45; color: #171c10; font: 700 clamp(.6rem,2.5vw,.8rem)/1.05 Inter,sans-serif; text-align: center; z-index: 1; border: 1px solid #e1ff98; }
.snake-status { min-height: 2.8em; margin: 12px 0; font-size: .82rem; line-height: 1.4; }
.snake-actions { display: flex; justify-content: flex-start; gap: 12px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.design-snake .snake-start { background: #c9ff45; color: #171c10; border-color: #c9ff45; font-weight: 700; }
.snake-pad { display: grid; grid-template-columns: repeat(3,56px); grid-template-rows: repeat(2,52px); justify-content: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.snake-pad [data-dir="up"] { grid-column: 2; }
.snake-pad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.snake-pad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.snake-pad [data-dir="right"] { grid-column: 3; grid-row: 2; }
@media (max-height: 740px) { .snake-board { max-width: 390px; margin-inline: auto; } .snake-help { margin-block: 8px; } }
/* Reserve the controls first; only the board shrinks with browser chrome. */
.design-snake {
  box-sizing: border-box; position: fixed; margin: 0; left: 50%; right: auto;
  top: calc(var(--snake-top, 0px) + env(safe-area-inset-top, 0px) + max(12px, (var(--snake-vh, 100dvh) - 820px) / 2));
  transform: translateX(-50%); width: min(620px, calc(100vw - 24px));
  height: min(796px, calc(var(--snake-vh, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px));
  max-height: none; padding: 16px; overflow: hidden;
}
.design-snake[open] { display: grid; grid-template-rows: auto auto auto auto minmax(0,1fr) auto auto; gap: 12px; }
.snake-help { margin: 0; font-size: .875rem; line-height: 1.45; }
.snake-top h2 { font-size: clamp(1.45rem,5vw,2rem); }
.snake-eyebrow { margin-bottom: 6px; font-size: .72rem; }
.snake-actions { margin: 0; padding: 0 0 12px; }
.snake-scoreline { margin: 0; font-size: .875rem; line-height: 1.45; }
.snake-arena { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.snake-arena .snake-board { flex: none; max-width: 100%; max-height: 100%; margin: 0; }
.snake-status { margin: 0; padding-top: 8px; height: calc(8px + 2.9em); min-height: 0; font-size: .875rem; line-height: 1.45; color: var(--ink); }
.snake-board:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; }
.snake-food { font-size: .8125rem; line-height: 1.12; }
.design-snake .snake-pad svg { width: 22px; height: 22px; display: block; margin: auto; }
.snake-pad [data-dir="right"] svg { transform: rotate(90deg); }
.snake-pad [data-dir="down"] svg { transform: rotate(180deg); }
.snake-pad [data-dir="left"] svg { transform: rotate(-90deg); }

.snake-pad { margin: 0; padding-top: 10px; grid-template-columns: repeat(3,54px); grid-template-rows: repeat(2,48px); gap: 8px; }
.design-snake .snake-pad button {
  border-radius: 12px; padding: 0; font-size: 1.3rem; touch-action: manipulation;
  background: rgba(var(--ink-rgb),.04); transition: background .12s, box-shadow .12s, border-color .12s, color .12s;
}
.design-snake .snake-pad button:is(:active,.is-pressed) {
  color: #101512; background: var(--acid); border-color: var(--acid);
  box-shadow: 0 0 0 3px rgba(201,255,69,.15), 0 0 22px rgba(201,255,69,.48), inset 0 1px 0 #ffffff80;
}
@media (max-height: 520px) and (min-width: 600px) {
  .design-snake { width: min(900px,calc(100vw - 32px)); padding: 12px; }
  .design-snake[open] { grid-template-columns: minmax(0,1fr) 200px; grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 8px 20px; }
  .snake-top { grid-column: 1 / -1; }
  .snake-help { display: none; }
  .snake-actions { grid-column: 2; grid-row: 2; }
  .snake-scoreline { grid-column: 2; grid-row: 3; }
  .snake-arena { grid-column: 1; grid-row: 2 / 6; }
  .snake-status { grid-column: 2; grid-row: 4; }
  .snake-pad { grid-column: 2; grid-row: 5; }
}

@media (max-width: 599px) and (max-height: 700px) {
  .snake-pad { grid-template-columns: repeat(4,54px); grid-template-rows: 48px; gap: 12px; }
  .snake-pad [data-dir="left"] { grid-column: 1; grid-row: 1; }
  .snake-pad [data-dir="up"] { grid-column: 2; grid-row: 1; }
  .snake-pad [data-dir="down"] { grid-column: 3; grid-row: 1; }
  .snake-pad [data-dir="right"] { grid-column: 4; grid-row: 1; }
}/* Dedicated touch dock, separated from the game actions by the arena. */
.snake-actions { border: 0; padding: 0; }
.snake-pad { border: 0; padding-top: 0; }
.snake-status { text-align: center; }
.snake-joystick { display: none; }
.has-joystick .snake-pad { display: none; }
.has-joystick .snake-joystick { display: grid; justify-items: center; gap: 8px; }
.snake-joystick p { margin: 0; color: var(--soft); font-size: .875rem; line-height: 1.4; }
.snake-stick {
  width: 112px; height: 112px; position: relative; border-radius: 50%;
  touch-action: none; user-select: none; border: 1px solid var(--line-strong);
  background: radial-gradient(circle,rgba(var(--ink-rgb),.09),rgba(var(--ink-rgb),.025));
  box-shadow: inset 0 0 0 8px rgba(var(--ink-rgb),.025);
}
.snake-stick-knob {
  position: absolute; width: 52px; height: 52px; left: calc(50% - 26px); top: calc(50% - 26px);
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: linear-gradient(145deg,rgba(var(--ink-rgb),.24),rgba(var(--bg-rgb),.95));
  box-shadow: 0 5px 16px #0003, inset 0 1px 1px #fff5;
  transform: translate(var(--stick-x,0px),var(--stick-y,0px));
  transition: transform .18s ease-out, box-shadow .18s; pointer-events: none;
}
.is-held .snake-stick-knob { transition: box-shadow .18s; border-color: var(--accent-ui); box-shadow: 0 0 22px rgba(201,255,69,.32), inset 0 1px 1px #fff5; }
@media (max-height:700px) {
  .has-joystick[open] { gap: 8px; }
  .has-joystick .snake-stick { width: 92px; height: 92px; }
}
@media (max-height:520px) and (min-width:600px) {
  .has-joystick .snake-joystick { grid-column: 2; grid-row: 5; }
}
@media (prefers-reduced-motion:reduce) { .snake-stick-knob { transition: none; } }
.snake-secret-progress { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.snake-secret-progress.is-visible { opacity: 1; }
.snake-secret-progress i { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); opacity: .4; }
.snake-secret-progress i.is-complete { background: var(--accent-ui); opacity: 1; }
.feedback-invaders .invaders-score { align-items: center; gap: 8px; font-size: 14px; }
.invaders-score strong { margin-left: 4px; }
.invaders-lives { color: var(--accent-ui); font-size: 22px; letter-spacing: 3px; white-space: nowrap; }
.invaders-board { display:block; --invader-color:#c9ff45; }
.invaders-player { position:absolute; top:88%; width:7%; height:10%; transform:translateX(-50%); z-index:3; }
.invaders-player svg { width:100%; height:100%; overflow:visible; fill:var(--invader-color); }
.invaders-enemy { position:absolute; width:29%; height:16%; transform:translateX(-50%); display:grid; place-items:center; padding:4px; border-radius:7px; background:#c9ff45; color:#171c10; text-align:center; font:700 14px/1.15 var(--font-sans,sans-serif); overflow-wrap:anywhere; }
.invaders-shot { position:absolute; width:3px; height:10px; border-radius:3px; background:var(--invader-color); transform:translateX(-50%); box-shadow:0 0 6px var(--invader-color); }
.invaders-effect { position:absolute; width:70px; height:70px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,#c9ff4566,transparent 70%); border:1px solid #c9ff4580; }
.feedback-invaders .invaders-pad { grid-template-columns:repeat(2,60px); grid-template-rows:48px; gap:24px; }
.feedback-invaders .invaders-pad [data-dir] { grid-row:1; grid-column:auto; }
.feedback-invaders .snake-status { height:calc(8px + 2.9em); }
.feedback-invaders .invaders-enemy { height:20%; }
@media(max-height:700px) and (max-width:599px) {
  .feedback-invaders.has-joystick .snake-help { display:none; }
  .feedback-invaders.has-joystick[open] { grid-template-rows:auto auto auto minmax(0,1fr) auto auto; }
  .feedback-invaders.has-joystick .snake-joystick { grid-template-columns:80px minmax(0,160px); align-items:center; justify-content:center; gap:16px; }
  .feedback-invaders.has-joystick .snake-stick { width:80px; height:80px; }
  .feedback-invaders .invaders-enemy { font-size:13px; }
}
.feedback-invaders .invaders-score > span:not(.invaders-lives) {
  display:flex; flex-direction:column; gap:9px;
  font-family:"Press Start 2P",ui-monospace,monospace; font-size:11px;
  line-height:1.5; text-transform:uppercase; letter-spacing:0;
}
.invaders-score strong { margin-left:0; font:inherit; color:var(--accent-ui); }
.invaders-board.is-hit { animation:invaders-hit-shake .45s ease-out; }
.invaders-board::after {
  content:""; position:absolute; inset:0; z-index:8; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 48px 12px #ed334b88; border:2px solid #ff5268;
  background:radial-gradient(ellipse at bottom, #ed334b30, transparent 65%);
}
.invaders-board.is-hit::after { animation:invaders-hit-red .65s ease-out both; }
.invaders-impact { position:absolute; top:90%; width:60px; height:60px; z-index:9; pointer-events:none; border:2px solid #ff697b; border-radius:50%; animation:invaders-impact .55s ease-out both; }
.invaders-impact i { position:absolute; width:7px; height:7px; background:#ff697b; }
.invaders-impact i:nth-child(1){left:0;top:0;}
.invaders-impact i:nth-child(2){right:0;top:0;}
.invaders-impact i:nth-child(3){left:0;bottom:0;}
.invaders-impact i:nth-child(4){right:0;bottom:0;}
@keyframes invaders-hit-shake {0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(1px)}}
@keyframes invaders-hit-red {0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes invaders-impact {from{opacity:1;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@media(prefers-reduced-motion:reduce){
 .invaders-board.is-hit {animation:invaders-hit-still .65s;}
 .invaders-board.is-hit::after {animation:invaders-hit-red .65s ease-out both;}
 .invaders-impact {animation:invaders-impact-still .55s ease-out both;}
 @keyframes invaders-hit-still {from{opacity:1}to{opacity:1}}
 @keyframes invaders-impact-still {from{opacity:.5;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%)}}
}
/* Separate the actions from the complete score-and-arena block. */
.feedback-invaders .snake-scoreline { margin-top:16px; }
@media(max-height:520px) and (min-width:600px) { .feedback-invaders .snake-scoreline { margin-top:8px; } }