.play {
  position: relative;
  color: var(--bone);
  padding: clamp(80px, 14vh, 180px) 0 clamp(60px, 10vh, 140px);
  background: var(--booth);
}
.play .label {
  color: #a9a69c;
}
.play h2 {
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 18px;
  max-width: 22ch;
  font-weight: 400;
  text-wrap: balance;
}

/* headline and console share the left column, so the field notes fill the space beside them;
   stacked on narrow screens */
.play-head {
  margin-bottom: clamp(16px, 3vh, 40px);
}
.stage {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.stage-console {
  min-width: 0;
}
.console-3d {
  width: 100%;
  height: min(86vh, 860px);
  min-height: 520px;
  position: relative;
  border-radius: 4px;
}
.console-3d:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 6px;
}
.stage.is-flat .console-3d {
  display: none;
}
/* 360 / flat: a two-way switch under the console */
.view-toggle {
  display: flex;
  width: max-content;
  margin: 14px auto 0;
  border: 1px solid #4a4943;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.view-toggle[hidden] {
  display: none;
}
.view-toggle button {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #a9a69c;
  background: none;
  border: 0;
  border-radius: 999px;
  min-width: 64px;
  min-height: 36px;
  padding: 0 14px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.view-toggle button[aria-pressed='true'] {
  background: var(--bone);
  color: var(--ink);
}
.view-toggle button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.stage-hint {
  text-align: center;
  margin-top: 12px;
  color: #a9a69c;
  text-transform: none;
  letter-spacing: 0.04em;
}
.stage.is-active .stage-hint {
  color: var(--bone);
}

/* field notes: the easter-egg checklist */
.notes {
  border-top: 1px solid #3a3934;
  padding-top: 18px;
}
.secrets {
  list-style: none;
  margin: 14px 0 28px;
  padding: 0;
  counter-reset: secret;
}
.secrets li {
  counter-increment: secret;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #2c2b27;
  transition: color 0.4s;
}
.secrets li::before {
  content: "0" counter(secret);
  grid-row: span 2;
  font: 500 var(--fs-label) / 1.6 var(--mono);
  color: #77746c;
}
.secrets b {
  font: 400 clamp(20px, 1.6vw, 26px) / 1.15 var(--serif);
}
.secrets span {
  font: 400 var(--fs-label) / 1.4 var(--mono);
  letter-spacing: 0.04em;
  color: #a9a69c;
}
.secrets li.found::before {
  content: "✓";
  color: var(--signal);
}
.secrets li.found b {
  color: var(--signal);
}
.notes .btn {
  border-color: var(--bone);
  color: var(--bone);
}
.notes .btn:hover {
  background: var(--bone);
  color: var(--ink);
}

.game-frame {
  /* inside the viewport but invisible: Safari stops drawing iframes parked off screen */
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 480px;
  height: 320px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.game-frame.in-flat {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  pointer-events: none;
  transform-origin: 0 0;
  background: #0b0a17;
}

/* flat fallback: no WebGL */
.console-flat {
  max-width: 420px;
  margin-inline: auto;
}
.flat-body {
  /* the same cream shell as the 3D handheld: soft top light, the grip corner rolling away */
  background:radial-gradient(120% 70% at 20% -10%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),radial-gradient(70% 50% at 100% 100%,rgba(40,34,20,.12),rgba(40,34,20,0)),#e6e1d5;
  border-radius: 14px 14px 64px 14px;
  padding: 22px 20px 34px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(40,34,20,.08) inset, 0 30px 60px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: 20px;
}
.flat-screen {
  position: relative;
  background: #1b1c21;
  border: 14px solid #2e3038;
  border-radius: 8px 8px 28px 8px;
  overflow: hidden;
  width: 100%;
  image-rendering: pixelated;
}
.flat-pad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
}
.flat-dpad {
  display: grid;
  grid-template: repeat(3, 48px) / repeat(3, 48px);
  /* the hub joins the four arms into one cross */
  background: linear-gradient(#262624,#262624) center / 48px 48px no-repeat;
}
.flat-dpad button {
  background: linear-gradient(#2c2c2a,#1f1f1d);
  border-radius: 6px;
}
.flat-dpad [data-b=up] { grid-area: 1 / 2; }
.flat-dpad [data-b=left] { grid-area: 2 / 1; }
.flat-dpad [data-b=right] { grid-area: 2 / 3; }
.flat-dpad [data-b=down] { grid-area: 3 / 2; }
.flat-ab {
  display: flex;
  gap: 14px;
  align-items: center;
  transform: rotate(-25deg);
}
.flat-ab button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* domed caps, lit from the top left like the 3D ones */
  background: radial-gradient(circle at 34% 28%,#55554f 0%,#2a2a28 45%,#1b1b1a 100%);
  box-shadow: 0 3px 0 #0e0e0d, 0 0 0 5px #d2ccbe;
  /* the row is tilted; the letters stay upright */
  transform: rotate(25deg);
  color: var(--bone);
  font: 500 14px var(--mono);
}
.flat-ab [data-b=A] {
  background: radial-gradient(circle at 34% 28%,#ffb07a 0%,#ff6a1f 40%,#e04300 100%);
  box-shadow: 0 3px 0 #9c2f00, 0 0 0 5px #d2ccbe;
  color: var(--ink);
}
.flat-pills {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.flat-pills button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: #2e2e31;
  color: var(--bone);
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.flat-body button:active {
  filter: brightness(1.4);
}

@media (max-width: 900px) {
  .stage {
    grid-template-columns: 1fr;
  }
  .console-3d {
    height: min(66svh, 560px);
    min-height: 400px;
  }
}

/* pocket mode: a palm-sized twin of the handheld that keeps the game running in the corner */
.pocket {
  position:fixed;
  right:calc(var(--pad) - 4px);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:120;
  width:74px;
  height:112px;
  padding:7px 7px 0;
  display:grid;
  grid-template-rows:auto 1fr;
  grid-template-columns:1fr 1fr;
  align-items:center;
  background:linear-gradient(160deg,#f3f1ec,#dcd8ce);
  border-radius:6px 6px 22px 6px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(0,0,0,.08) inset,0 14px 30px -10px rgba(18,18,17,.45),0 2px 6px rgba(18,18,17,.18);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1),bottom .5s cubic-bezier(.16,1,.3,1),right .5s cubic-bezier(.16,1,.3,1)
}
.pocket.lift {
  bottom:calc(96px + env(safe-area-inset-bottom,0px))
}
/* phones have no free corner at the end of the page, so the badge slides off and waits */
@media(max-width:768px) {
  .pocket.lift {
    bottom:calc(20px + env(safe-area-inset-bottom,0px));
    right:-120px
  }
}
.pocket[hidden] {
  display:none
}
.pocket:hover {
  transform:translateY(-4px) rotate(-2deg)
}
.pocket:focus-visible {
  outline:2px solid var(--signal);
  outline-offset:4px
}
.pocket-screen {
  grid-column:1/-1;
  padding:5px;
  background:#2e3038;
  border-radius:3px 3px 10px 3px
}
.pocket-screen canvas {
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
  background:#cfd4c4
}
.pocket-pad {
  justify-self:center;
  width:16px;
  height:16px;
  background:linear-gradient(#1b1b1a,#1b1b1a) center/16px 5px no-repeat,linear-gradient(#1b1b1a,#1b1b1a) center/5px 16px no-repeat
}
.pocket-ab {
  display:flex;
  gap:3px;
  transform:rotate(-24deg);
  justify-self:center
}
.pocket-ab i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1b1b1a
}
.pocket-ab i + i {
  background:var(--signal)
}