/* ==========================================================================
   Pinsider Arcade - page layer on top of popdex-ui.css (the shared design system)

   Breakpoints:
     mobile   <= 640px   plain slider, no cabinet
     tablet   641-1024px cabinet, static camera
     desktop  >= 1025px  cabinet, subtle pointer parallax (fine pointer only)
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-size: 15px; line-height: 1.55; overflow-x: hidden; }

:root {
  /* cabinet palette, tuned to the brand indigo */
  --cab-body: #141419;
  --cab-panel: #1d1d26;
  --cab-edge: #2e2d45;
  --cab-accent: #8077ff;
  --cab-accent-strong: #645aff;
  --cab-glow: rgba(128, 119, 255, 0.45);
  --screen-text: #bdb9ff;
}

/* ---------- Shared Pinsider header ---------- */

.wrap { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.site-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 68px; padding: 0 36px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 11, 13, 0.8) 60%, transparent 100%);
}
.pd-brand { min-width: 0; user-select: none; }
.pd-brand a { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.pd-brand .brand-mark { height: 21px; width: auto; display: block; color: #fff; flex: 0 0 auto; }
.pd-brand .wordmark { font-size: 20px; font-weight: 800; letter-spacing: -0.022em; color: #fff; line-height: 1; margin-left: -1px; white-space: nowrap; }
.pd-brand .section { line-height: 1; white-space: nowrap; }
.pd-brand .puzzle-no { font-family: var(--font-mono); font-weight: 700; color: var(--brand-tint); letter-spacing: 0; }
.site-top-right { display: flex; align-items: center; gap: 12px; flex: none; }
/* ---------- Music toggle (top-left corner of the arcade frame) ---------- */

.stage > .sound-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
}

.sound-toggle {
  flex: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(14, 14, 18, 0.55);
  color: var(--text);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sound-toggle:hover { border-color: var(--brand-soft); background: rgba(77, 66, 252, 0.14); }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.sound-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-toggle .icon-off { display: none; color: var(--dim); }
.sound-toggle[aria-pressed="true"] .icon-on { display: none; }
.sound-toggle[aria-pressed="true"] .icon-off { display: block; }

/* tiny equalizer that moves while the music is actually playing */
.sound-toggle .eq {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 11px;
  padding: 2px 3px;
  border-radius: 5px;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(77, 66, 252, 0.7);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms ease, transform 300ms var(--ease);
}
.sound-toggle .eq i { width: 2px; height: 100%; border-radius: 1px; background: #fff; transform-origin: bottom; animation: eqBar 900ms ease-in-out infinite; }
.sound-toggle .eq i:nth-child(2) { animation-delay: -300ms; }
.sound-toggle .eq i:nth-child(3) { animation-delay: -600ms; }
.sound-toggle.is-playing .eq { opacity: 1; transform: none; }
@keyframes eqBar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.sound-toggle .wave { transition: opacity 200ms ease; }
.sound-toggle:not(.is-playing) .wave { opacity: 0.45; }

.status { white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status[data-state="locked"] { color: var(--dim); background: transparent; border-color: var(--line-2); }
.status[data-state="unlocked"] { color: var(--success-light); background: rgba(23, 167, 129, 0.12); border-color: rgba(23, 167, 129, 0.35); }

.page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 4px;
  padding-bottom: 40px;
}

/* ---------- Neon sign above the frame ---------- */

.neon-sign {
  --tube: #8077ff;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 820px;
  margin: 0 auto -6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  padding: 10px 14px;
  border-radius: 16px;
  /* the board behind the tubes */
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(77, 66, 252, 0.10), transparent 60%),
    linear-gradient(180deg, #121219, #0c0c11);
  /* the neon frame tube: thin bright core + soft glow, inside and out */
  border: 2px solid rgba(214, 210, 255, 0.95);
  box-shadow:
    0 0 2px #fff,
    0 0 8px var(--tube),
    0 0 22px var(--tube),
    0 0 46px rgba(128, 119, 255, 0.45),
    inset 0 0 8px var(--tube),
    inset 0 0 24px rgba(128, 119, 255, 0.35);
  animation: neonPowerOn 1.6s steps(1, end) both, neonHum 6s ease-in-out 1.6s infinite;
}

/* wall glow under the sign */
.neon-sign::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 100%;
  height: 30px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(128, 119, 255, 0.28), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

/* each cell is its own coloured tube: icon + number + info button */
.neon-cell {
  --glow: #ff4fa3;
  --core: #fff6fb;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.neon-prize   { --glow: #ff4fa3; --core: #fff6fb; }
.neon-bonus   { --glow: #3ff0c0; --core: #f1fffb; }
.neon-tickets { --glow: #ffc247; --core: #fffaf0; }

.neon-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
  padding: 2px 6px;
  transition: background 200ms ease, transform 200ms ease;
}
a.neon-link[href] { cursor: pointer; }
a.neon-link[href]:hover { background: rgba(255, 255, 255, 0.04); }
a.neon-link[href]:hover .neon-value { filter: brightness(1.2); }
a.neon-link[href]:active { transform: scale(0.97); }
a.neon-link:focus-visible { outline: none; box-shadow: var(--ring); }

.neon-value {
  font-family: "Tilt Neon", var(--font-sans);
  font-size: 26px;
  line-height: 1.1;
  color: var(--core);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow:
    0 0 1px #fff,
    0 0 4px var(--glow),
    0 0 10px var(--glow),
    0 0 22px var(--glow),
    0 0 40px var(--glow);
  transition: opacity 300ms ease, filter 200ms ease;
}

.neon-icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--core);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px var(--glow)) drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 12px var(--glow));
}
.neon-ticket { width: 28px; height: 19px; transform: rotate(-8deg); }
.neon-ticket .neon-ticket-cut { stroke-dasharray: 1.6 1.8; }

/* the "i" button */
.neon-info {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--glow) 55%, transparent);
  background: rgba(14, 14, 18, 0.6);
  color: var(--core);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.neon-info:hover,
.neon-info[aria-expanded="true"] {
  opacity: 1;
  border-color: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
.neon-info:active { transform: scale(0.92); }
.neon-info:focus-visible { outline: none; box-shadow: var(--ring); opacity: 1; }

.neon-divider {
  width: 2px;
  align-self: stretch;
  margin: 2px 8px;
  border-radius: 2px;
  background: rgba(214, 210, 255, 0.9);
  box-shadow: 0 0 4px var(--tube), 0 0 12px var(--tube);
}

/* loading: dim tubes until data arrives */
.neon-sign.is-loading .neon-value { opacity: 0.35; }

/* bonus ticks: a quick brighter pulse when the visible number changes */
.neon-bonus .neon-value.is-tick { animation: neonTick 600ms ease-out; }
@keyframes neonTick {
  0%   { filter: brightness(1.5); }
  100% { filter: none; }
}

/* switch-on flicker, then a slow, barely visible hum */
@keyframes neonPowerOn {
  0%   { opacity: 0.1; }
  8%   { opacity: 0.9; }
  12%  { opacity: 0.2; }
  20%  { opacity: 1; }
  24%  { opacity: 0.45; }
  30%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neonHum {
  0%, 100% { filter: brightness(1); }
  47%      { filter: brightness(1); }
  48%      { filter: brightness(0.82); }
  49%      { filter: brightness(1.05); }
  50%      { filter: brightness(0.9); }
  52%      { filter: brightness(1); }
}

/* one tube flickers on its own now and then */
.neon-prize .neon-value { animation: tubeFlicker 9s linear 2.5s infinite; }
@keyframes tubeFlicker {
  0%, 91%, 100% { opacity: 1; }
  92%           { opacity: 0.55; }
  93%           { opacity: 1; }
  95%           { opacity: 0.7; }
  96%           { opacity: 1; }
}

/* ---------- Info popover ---------- */

.neon-tip {
  --glow: #8077ff;
  position: absolute;
  z-index: 40;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: rgba(18, 18, 24, 0.97);
  border: 1px solid color-mix(in srgb, var(--glow) 45%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 24px -6px var(--glow),
    0 18px 40px -16px rgba(0, 0, 0, 0.8);
  animation: tipIn 180ms var(--ease) both;
}
.neon-tip[hidden] { display: none; }
@keyframes tipIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.neon-tip-arrow {
  position: absolute;
  top: -6px;
  left: var(--arrow-x, 50%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  background: rgba(18, 18, 24, 0.97);
  border-left: 1px solid color-mix(in srgb, var(--glow) 45%, rgba(255, 255, 255, 0.08));
  border-top: 1px solid color-mix(in srgb, var(--glow) 45%, rgba(255, 255, 255, 0.08));
  transform: rotate(45deg);
}
.neon-tip-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glow);
  text-shadow: 0 0 8px color-mix(in srgb, var(--glow) 60%, transparent);
}
.neon-tip-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.neon-tip-text b { color: var(--text); font-weight: 700; }
.neon-tip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
  background: color-mix(in srgb, var(--glow) 10%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.neon-tip-link svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.neon-tip-link:hover { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 18%, transparent); box-shadow: 0 0 10px -2px var(--glow); }
.neon-tip-link:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 1024px) {
  .neon-value { font-size: 22px; }
}

/* phones: smaller tubes; the "i" sits in the cell's top corner so numbers keep their room */
@media (max-width: 640px) {
  .neon-sign { padding: 12px 6px 10px; border-radius: 14px; margin-bottom: -4px; }
  .neon-cell { justify-content: center; padding-right: 0; }
  .neon-link { gap: 5px; padding: 2px 3px; }
  .neon-value { font-size: 16px; }
  .neon-icon { width: 14px; height: 14px; stroke-width: 2; }
  .neon-ticket { width: 18px; height: 12px; }
  .neon-info {
    position: absolute;
    top: -10px;
    right: -2px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    border-width: 1px;
  }
  .neon-divider { margin: 2px 3px; }
}

/* ---------- Stage: the bordered frame that holds the cabinet ---------- */

.stage.pd-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "prev scene next"
    "dots dots  dots";
  align-items: center;
  gap: 0 16px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  height: clamp(380px, 53vh, 600px);
  padding: 0 20px 16px;
  border-radius: 24px;
  isolation: isolate;
}

/* soft brand light behind the cabinet */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(42% 55% at 50% 46%, rgba(77, 66, 252, 0.22), transparent 70%);
}

.nav {
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(14, 14, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav:active { transform: scale(0.94); }
.nav:focus-visible { outline: none; box-shadow: var(--ring); }
.nav-prev { grid-area: prev; }
.nav-next { grid-area: next; }

@media (hover: hover) and (pointer: fine) {
  .nav:hover { border-color: var(--brand-soft); background: rgba(77, 66, 252, 0.18); box-shadow: 0 10px 28px -10px rgba(100, 90, 255, 0.9); }
}

.dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  z-index: 2;
}
.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: width 300ms var(--ease), background 160ms ease;
}
.dot[aria-selected="true"] { width: 26px; background: var(--brand-soft); box-shadow: 0 0 12px rgba(128, 119, 255, 0.7); }
.dot:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Scene: zoomed-in cabinet ---------- */

.scene {
  grid-area: scene;
  height: 100%;
  min-height: 0;
  container-type: size;
  touch-action: pan-y;
}

/*
  The cabinet is drawn in "em" units, so every measurement scales from one
  value: font-size. Container query units size it to the frame (about 262
  cabinet units tall are visible), and the translate keeps the monitor
  centered in the frame, so the view is zoomed in on the screen.
*/
.cabinet {
  --px: 50%;
  --py: 20%;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: min(calc(100cqh / 262), calc(100cqw / 340));
  perspective: 240em;
  perspective-origin: var(--px) var(--py);
  transform: translate(-50%, -287em);
  filter: drop-shadow(0 20em 22em rgba(0, 0, 0, 0.55));
}

.cabinet .part { width: 320em; background: var(--cab-body); transform-style: preserve-3d; }

.cabinet .marquee { height: 112em; transform: translateZ(6.4em); padding: 9em 14em; }
.cabinet .marquee-inner {
  height: 100%;
  background: linear-gradient(#22222d, #1a1a23);
  border: 1em solid var(--cab-edge);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cabinet .marquee-light {
  height: 62%;
  width: 94%;
  background: linear-gradient(115deg, #1f1d3a, #2a2566, #1f1d3a);
  border: 1em solid #3a3580;
  box-shadow: inset 0 0 16em rgba(128, 119, 255, 0.12), 0 0 12em rgba(77, 66, 252, 0.18);
  animation: arcPulse 4s ease-in-out infinite;
}
@keyframes arcPulse {
  0%, 100% { box-shadow: inset 0 0 12em rgba(128, 119, 255, 0.10), 0 0 4em rgba(77, 66, 252, 0.12); }
  50%      { box-shadow: inset 0 0 18em rgba(128, 119, 255, 0.22), 0 0 17em rgba(77, 66, 252, 0.30); }
}

.cabinet .neck {
  height: 48em;
  background: linear-gradient(#24242e, #121217);
  transform: translateZ(-9em) rotateX(-40deg);
  transform-origin: center;
  margin: -5em 0;
}

/* Square screen for 512 x 512 clue images */
.cabinet .screen-housing {
  height: 300em;
  transform: translateZ(-24em);
  margin-bottom: -22em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor {
  width: 276em;
  height: 276em;
  background: radial-gradient(ellipse at 50% 40%, #17153a, #0b0b10 85%);
  border-radius: 10em;
  border: 4em solid #08080b;
  box-shadow: inset 0 0 25em #050507, 0 0 0 2em #2c2c38;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  outline: none;
}
.monitor:focus-visible { box-shadow: inset 0 0 25em #050507, 0 0 0 2em var(--brand-soft); }

/* CRT scanlines and vignette, kept light so the clues stay readable */
.monitor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0, 0, 0, 0.07) 4px),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
  z-index: 3;
}

/*
  Two CRT noise lines:
  - steady: sweeps top to bottom on a slow loop
  - random: JS makes it appear at a random height, drift a random distance
    at a random speed, flicker, and fade out, then wait a random time
*/
.monitor .scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(128, 119, 255, 0.16) 12%,
    rgba(170, 162, 255, 0.24) 50%,
    rgba(128, 119, 255, 0.16) 88%,
    transparent);
  box-shadow: 0 0 10px rgba(128, 119, 255, 0.22);
  pointer-events: none;
  z-index: 4;
}
/* faint trail above the line, like phosphor decay */
.monitor .scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 7em;
  background: linear-gradient(to top, rgba(128, 119, 255, 0.07), transparent);
}

.monitor .scan-steady { animation: arcScan 7s linear infinite; }
@keyframes arcScan { from { top: 0; } to { top: 100%; } }

.monitor .scan-random { opacity: 0; }

.osd {
  position: absolute;
  z-index: 5;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--screen-text);
  text-shadow: 0 0 10px var(--cab-glow);
  letter-spacing: 0.12em;
  pointer-events: none;
}
/* offsets are in the OSD's own em (font-size = 7 or 5.5 cabinet units) */
.monitor .osd { top: 1em; right: 1.2em; font-size: 7em; }
.monitor .osd-hint {
  top: auto;
  right: auto;
  bottom: 1.1em;
  left: 1.4em;
  font-size: 5.5em;
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .monitor:hover .osd-hint { opacity: 0.85; }
}

/* deck, controls and lower body */
.cabinet .deck { height: 43em; transform: translateZ(-3em) rotateX(89deg); transform-origin: center; position: relative; }
.cabinet .deck-inner { width: 92%; height: 85%; background: linear-gradient(#2a2a36, #1b1b24); margin: 6em auto 0; position: relative; transform-style: preserve-3d; }
.cabinet .buttons { position: absolute; left: 40em; top: 11em; display: flex; gap: 17em; }
.cabinet .arc-btn { width: 24em; height: 14em; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #9a96d6, #46427a 72%, #1c1a33); border: 3em solid #18181f; box-shadow: 0 3em 0 #060609; }
.cabinet .arc-btn:last-child { background: radial-gradient(ellipse at 35% 30%, #bdb9ff, #645aff 70%, #2c2690); }
.cabinet .joy-base { position: absolute; right: 42em; top: 8em; width: 48em; height: 22em; background: #0d0d12; border: 2em solid #34366b; border-radius: 50%; transform-style: preserve-3d; }
.cabinet .joy-stick { position: absolute; left: 20em; top: -28em; width: 8em; height: 34em; background: linear-gradient(90deg, #30303a, #85879a); transform: rotateX(-89deg); transform-origin: bottom; }
.cabinet .joy-ball { width: 23em; height: 23em; border-radius: 50%; position: absolute; left: -8em; top: -14em; background: radial-gradient(circle at 30% 25%, #c9c5ff, #4d42fc 70%, #201c5c); }
.cabinet .front { height: 48em; transform: translateZ(18em); margin-bottom: -2em; padding: 5em 13em; }
.cabinet .front-panel { background: var(--cab-panel); width: 100%; height: 100%; border-top: 2em solid #3d3878; }
.cabinet .front-accent { height: 3em; width: 75%; margin: 8em auto; background: linear-gradient(90deg, transparent, var(--cab-accent), transparent); }
.cabinet .lower-neck { height: 64em; transform: translateZ(12em) rotateX(-10deg); transform-origin: center; background: linear-gradient(#191920, #0e0e13); margin: -4em 0; }
.cabinet .base { height: 208em; transform: translateZ(6em); background: linear-gradient(90deg, #15151b, #1c1c25 50%, #14141a); padding-top: 25em; }
.cabinet .coin-frame { height: 112em; width: 80em; margin: auto; border: 2em solid #0a0a0e; border-radius: 4em; background: linear-gradient(130deg, #15151b, #25252f); display: flex; align-items: center; justify-content: center; }
.cabinet .coin-inner { height: 86em; width: 63em; border: 2em solid #0a0a0e; border-radius: 10em; position: relative; }
.cabinet .coin-slot-frame { position: absolute; top: 17em; left: 19em; width: 24em; height: 20em; border: 1em solid #09090c; display: flex; justify-content: space-evenly; align-items: center; }
.cabinet .coin-slot { width: 4em; height: 14em; background: #060608; }
.cabinet .coin-return { width: 8em; height: 13em; background: var(--brand); border: 1em solid #201c5c; }
.cabinet .keyhole { position: absolute; right: 5em; bottom: 20em; width: 8em; height: 8em; background: #8a8c96; border-radius: 50%; }

/* ---------- Slides (shared by monitor and mobile viewer) ---------- */

.slides { position: absolute; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms ease, visibility 0s linear 350ms;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms ease, visibility 0s;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* short CRT "channel switch" when the clue changes */
.monitor.is-switching .slides { animation: crtSwitch 320ms ease-out; }
@keyframes crtSwitch {
  0%   { filter: brightness(2.2) saturate(0.4); transform: scaleY(0.04); }
  45%  { filter: brightness(1.6) saturate(0.6); transform: scaleY(1.02); }
  100% { filter: none; transform: none; }
}

/* ---------- Mobile viewer ---------- */

.viewer {
  display: none;
  grid-area: viewer;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: radial-gradient(ellipse at 50% 40%, #17153a, #0b0b10 85%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 20px 50px -24px rgba(77, 66, 252, 0.6);
  overflow: hidden;
  touch-action: pan-y;
  cursor: zoom-in;
  outline: none;
}
.viewer:focus-visible { border-color: var(--brand-soft); box-shadow: var(--ring); }
.stage .viewer { position: relative; }
.viewer .osd { top: 10px; right: 12px; font-size: 11px; }

/* ---------- Answer fields ---------- */

.answers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.fields {
  /* fields wrap freely; the width is tuned so 9 clues sit 3 per row on desktop */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  max-width: 940px;
}

.fields { position: relative; }

.field { display: flex; gap: 5px; }
.field .cell { transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, transform 300ms var(--ease); }
.field.is-active .cell:not(:focus) { border-color: rgba(128, 119, 255, 0.38); }

.field { position: relative; }

/*
  Glowing bar under the field that belongs to the clue on screen.
  Leaving:  the left end retracts to the right (origin: right, scaleX 1 -> 0).
  Entering: it is drawn from the left end towards the right (origin: left,
            scaleX 0 -> 1), after a short delay so the old bar leaves first.
*/
.field-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft) 55%, var(--brand-tint));
  box-shadow: 0 0 12px rgba(128, 119, 255, 0.75), 0 0 28px rgba(77, 66, 252, 0.45);
  pointer-events: none;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: right center;
  opacity: 0;
  transition:
    transform 340ms cubic-bezier(0.55, 0, 0.75, 0.2),
    opacity 200ms ease 140ms;
}
.field.is-active .field-bar {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 1;
  transition:
    transform 620ms var(--ease) 260ms,
    opacity 120ms ease 260ms;
}

/* light sweep, also travelling left to right */
.field-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: barSweep 2.6s ease-in-out infinite;
}
@keyframes barSweep {
  0%        { background-position: -150% 0; }
  60%, 100% { background-position: 250% 0; }
}

.fields.no-anim .field-bar { transition: none; }

.cell {
  width: 31px;
  height: 37px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  background: rgba(14, 14, 18, 0.55);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  caret-color: var(--brand-soft);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}
.cell:hover { border-color: #45474e; }
.cell:focus { border-color: var(--brand-soft); box-shadow: var(--ring); background: rgba(14, 14, 18, 0.75); }
.cell.is-filled { border-color: rgba(128, 119, 255, 0.45); background: rgba(77, 66, 252, 0.10); }

.answers.is-wrong .field { animation: shake 400ms ease; }
.answers.is-wrong .cell { border-color: rgba(240, 50, 119, 0.6); }
.answers.is-right .cell { border-color: rgba(23, 167, 129, 0.6); background: rgba(23, 167, 129, 0.12); color: var(--success-light); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- Actions: square lock (submit) + Hints link ---------- */

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.lock-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(77, 66, 252, 0.8);
  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.lock-btn:hover { background: var(--brand-hover); box-shadow: 0 10px 28px -10px rgba(100, 90, 255, 0.9); }
.lock-btn:active { transform: scale(0.95); }
.lock-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.lock-btn[disabled] { cursor: progress; }

.lock-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.lock-btn .lock-shackle {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transition: transform 520ms var(--ease);
}
.lock-btn .lock-body { fill: rgba(255, 255, 255, 0.14); }

/* hover: the shackle lifts a little, inviting a click */
@media (hover: hover) and (pointer: fine) {
  .lock-btn:not([disabled]):not(.is-open):hover .lock-shackle { transform: translateY(-1.5px); }
}

/* checking: the shackle jiggles and a ring spins around the button */
.lock-spinner {
  position: absolute;
  inset: -4px;
  border-radius: 15px;
  border: 2px solid transparent;
  border-top-color: var(--brand-tint);
  border-right-color: rgba(189, 185, 255, 0.4);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.lock-btn.is-loading .lock-spinner { opacity: 1; animation: lockSpin 800ms linear infinite; }
.lock-btn.is-loading .lock-shackle { animation: shackleJiggle 600ms ease-in-out infinite; }
@keyframes lockSpin { to { transform: rotate(360deg); } }
@keyframes shackleJiggle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* wrong: the lock shakes */
.lock-btn.is-denied { animation: shake 400ms ease; }

/* right: the shackle swings open and the button turns green */
.lock-btn.is-open { background: var(--success); box-shadow: 0 8px 24px -10px rgba(23, 167, 129, 0.9); cursor: default; }
.lock-btn.is-open .lock-shackle { transform: translateY(-3px) rotate(28deg); }

/* clear all answers: two-step, so one stray click can't wipe everything */
.clear-btn {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(14, 14, 18, 0.45);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 120ms ease;
}
.clear-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.clear-btn .trash-lid { transform-box: fill-box; transform-origin: 85% 100%; transition: transform 260ms var(--ease); }
.clear-btn:hover { border-color: rgba(240, 50, 119, 0.5); color: var(--error); background: rgba(240, 50, 119, 0.08); }
.clear-btn:hover .trash-lid { transform: rotate(14deg) translateY(-1px); }
.clear-btn:active { transform: scale(0.94); }
.clear-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.clear-btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

/* armed: waiting for the confirming second click */
.clear-btn.is-armed {
  border-color: var(--error);
  background: rgba(240, 50, 119, 0.16);
  color: #ff7aa6;
  box-shadow: 0 0 16px -4px rgba(240, 50, 119, 0.8);
  animation: clearArm 420ms ease;
}
.clear-btn.is-armed .trash-lid { transform: rotate(22deg) translateY(-2px); }
@keyframes clearArm {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); }
}
.clear-btn .clear-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(240, 50, 119, 0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  animation: tipIn 160ms var(--ease) both;
}

/* cells wiped: a quick fade */
.cell.is-wiped { animation: cellWipe 360ms ease; }
@keyframes cellWipe {
  0%   { background: rgba(240, 50, 119, 0.22); border-color: rgba(240, 50, 119, 0.6); }
  100% { background: rgba(14, 14, 18, 0.55); }
}

.is-guest .clear-btn { filter: blur(3.5px); opacity: 0.6; pointer-events: none; }

.hints-btn {
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(14, 14, 18, 0.45);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.hints-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand-soft);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hints-btn:hover, .hints-btn.is-active { border-color: var(--brand-soft); background: rgba(77, 66, 252, 0.12); }
.hints-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.feedback {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}
.feedback[data-tone="error"] { color: var(--error); }
.feedback[data-tone="success"] { color: var(--success-light); }

/* ---------- Lightbox ---------- */

.lightbox {
  width: min(92vw, 88vh, 900px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  background: #0b0b0d;
  box-shadow: 0 30px 90px -30px rgba(77, 66, 252, 0.5);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(5, 5, 8, 0.85); backdrop-filter: blur(6px); }
.lightbox img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 14, 18, 0.7);
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--brand-soft); }
.lightbox-close svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Hints popup ---------- */

.hints {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(78vh, 720px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.hints-panel {
  position: relative;
  max-height: min(78vh, 720px);
  overflow: auto;
  padding: 26px 26px 22px;
  border-radius: 24px;
  background: rgba(20, 21, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 40px 120px -30px rgba(77, 66, 252, 0.55),
    0 24px 48px -24px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.hints-panel > *:not(.pd-bokeh) { position: relative; z-index: 1; }

.hints::backdrop {
  background: rgba(5, 5, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* open: backdrop fades in, panel rises out of a soft blur, items follow one by one */
.hints[open]::backdrop { animation: hintsBackdropIn 380ms ease both; }
.hints[open] .hints-panel { animation: hintsIn 620ms var(--ease) both; }
.hints[open] .hints-head { animation: hintItemIn 520ms var(--ease) 120ms both; }

/* close: quick reverse */
.hints.is-closing::backdrop { animation: hintsBackdropOut 260ms ease both; }
.hints.is-closing .hints-panel { animation: hintsOut 260ms cubic-bezier(0.55, 0, 0.75, 0.2) both; }

@keyframes hintsBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hintsBackdropOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes hintsIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes hintsOut {
  from { opacity: 1; transform: none; filter: none; }
  to   { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(6px); }
}
@keyframes hintItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hints-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.hints-head .pd-title { margin: 6px 0 0; }

.hints-close {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(14, 14, 18, 0.55);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 300ms var(--ease);
}
.hints-close:hover { border-color: var(--brand-soft); background: rgba(77, 66, 252, 0.14); transform: rotate(90deg); }
.hints-close:focus-visible { outline: none; box-shadow: var(--ring); }
.hints-close svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; }

.hints-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hints-intro { margin: -8px 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.hints[open] .hints-intro,
.hints[open] .hints-note,
.hints[open] .tasks-progress { animation: hintItemIn 520ms var(--ease) 150ms both; }

/* why engagement matters: more follows / reposts -> more hints */
.hints-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(128, 119, 255, 0.28);
  background: linear-gradient(135deg, rgba(77, 66, 252, 0.16), rgba(77, 66, 252, 0.04));
}
.hints-note svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: none;
  stroke: var(--brand-tint);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hints-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.hints-note b { color: var(--text); font-weight: 700; }

.tasks-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tasks-progress .pd-track { flex: 1; }
.tasks-progress .pd-fill { width: 0; }
.tasks-progress.is-complete .pd-fill { background: linear-gradient(90deg, #128a6a, #17a781 60%, #5fd1b3); box-shadow: 0 0 12px rgba(23, 167, 129, 0.7); }
.tasks-count { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tasks-progress.is-complete .tasks-count { color: var(--success-light); }

/* one task: icon, text, action */
.task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 14, 18, 0.5);
  transition: border-color 300ms ease, background 300ms ease;
}
.hints[open] .task { animation: hintItemIn 520ms var(--ease) calc(200ms + var(--i, 0) * 70ms) both; }
.task.is-done { border-color: rgba(23, 167, 129, 0.30); background: rgba(23, 167, 129, 0.06); }

.task-mark {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(128, 119, 255, 0.14);
  border: 1px solid rgba(128, 119, 255, 0.28);
  color: var(--brand-tint);
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}
.task-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.task-icon, .task-check { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 250ms ease, transform 400ms var(--ease); }
.task-check { opacity: 0; transform: scale(0.4) rotate(-20deg); }
.task.is-done .task-mark { background: rgba(23, 167, 129, 0.16); border-color: rgba(23, 167, 129, 0.45); color: var(--success-light); }
.task.is-done .task-icon { opacity: 0; transform: scale(0.4); }
.task.is-done .task-check { opacity: 1; transform: none; }
.task.just-done .task-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw 420ms var(--ease) 120ms forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

.task-text { flex: 1; min-width: 0; }
.task-text h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.task-text p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.task-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(77, 66, 252, 0.8);
  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.task-action svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.task-action:hover { background: var(--brand-hover); }
.task-action:active { transform: translateY(1px); }
.task-action:focus-visible { outline: none; box-shadow: var(--ring); }
.task.is-done .task-action { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.task.is-done .task-action:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--brand-soft); }
.task.is-waiting { opacity: 0.6; }
.task.is-waiting .task-action { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); cursor: default; }

@media (max-width: 480px) {
  .task { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .task-text { flex: 1 1 calc(100% - 50px); }
  .task-action { margin-left: 50px; }
}

/* ---------- Missing puzzle ---------- */

.missing {
  max-width: 520px;
  width: 100%;
  margin: 48px auto 0;
  text-align: center;
}
.missing .pd-title { margin: 8px 0 0; }
.missing .pd-body { margin: 10px 0 22px; }
.missing .pd-btn { justify-content: center; }
.missing[hidden] { display: none; }
body.is-missing .neon-sign,
body.is-missing .stage,
body.is-missing .answers { display: none; }

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
  .site-top { padding: 0 24px; }
  .wrap { padding: 0 20px; }
  .stage.pd-card { height: clamp(380px, 54vh, 600px); padding: 0 14px 14px; gap: 0 10px; }
  .nav { width: 46px; height: 46px; }
  .fields { gap: 16px 24px; }
  .cell { width: 29px; height: 35px; font-size: 14px; }
}

/* ---------- Mobile: plain slider ---------- */

@media (max-width: 640px) {
  .site-top { height: 60px; padding: 0 20px; }
  .pd-brand .brand-mark { height: 18px; }
  .pd-brand .wordmark { font-size: 18px; }
  .wrap { padding: 0 16px; }
  .page { gap: 20px; }

  .stage.pd-card {
    height: auto;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "viewer viewer viewer"
      "prev   dots   next";
    gap: 14px 8px;
    padding: 12px;
    border-radius: 20px;
  }
  .scene { display: none; }
  .viewer { display: block; }
  /* sits in the corner of the slider image */
  .stage > .sound-toggle { top: 20px; left: 20px; width: 34px; height: 34px; border-radius: 10px; }
  .sound-toggle svg { width: 16px; height: 16px; }
  .nav { width: 44px; height: 44px; }
  .dots { padding-top: 0; }

  .fields { gap: 14px 16px; }
  .field { gap: 4px; }
  .cell { width: 25px; height: 32px; font-size: 14px; border-radius: 7px; }
}

@media (max-width: 640px) {
  .hints { width: 100vw; max-height: 86vh; margin: auto 0 0; }
  .hints-panel { max-height: 86vh; border-radius: 22px 22px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  @keyframes hintsIn {
    0%   { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes hintsOut {
    from { opacity: 1; transform: none; }
    to   { opacity: 0.6; transform: translateY(100%); }
  }
}

@media (max-width: 360px) {
  .fields { gap: 12px; }
  .field { gap: 3px; }
  .cell { width: 22px; height: 30px; font-size: 13px; }
}

/* ---------- X sign-in: guest gate and account chip ---------- */

/* the clues are public; only answering needs X. Guests see the answer
   fields and the lock blurred behind a Connect X card. */
.answer-zone {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}
.is-guest .fields,
.is-guest .lock-btn {
  filter: blur(3.5px);
  pointer-events: none;
  user-select: none;
}
/* tint the empty boxes so the blurred rows read as a soft glow, not as nothing */
.is-guest .cell {
  background: rgba(128, 119, 255, 0.16);
  border-color: rgba(128, 119, 255, 0.45);
  box-shadow: 0 0 14px -4px rgba(128, 119, 255, 0.55);
}
.is-guest .lock-btn { opacity: 0.6; }
.is-guest .feedback { display: none; }

.answer-zone > .gate {
  position: absolute;
  inset: -10px 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 12px;
}
.gate[hidden] { display: none; }
.gate-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  padding: 12px 12px 12px 14px;
  border-radius: 18px;
  text-align: left;
  background: rgba(20, 21, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 60px -24px rgba(77, 66, 252, 0.6),
    0 16px 32px -16px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: gateIn 520ms var(--ease) both;
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.gate-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(128, 119, 255, 0.14);
  border: 1px solid rgba(128, 119, 255, 0.3);
}
.gate-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--brand-tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-copy { flex: 1; min-width: 0; }
.gate-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.gate-text { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.gate-btn {
  flex: none;
  justify-content: center;
  height: 42px;
  gap: 9px;
  padding: 0 18px;
  background: #fff;
  color: #0b0b0d;
  box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.5);
}
.gate-btn:hover { background: #ececf2; box-shadow: 0 12px 34px -12px rgba(255, 255, 255, 0.6); }
.gate-btn .x-logo { width: 16px; height: 16px; fill: currentColor; }
.gate-error { margin: 4px 0 0; font-size: 12px; color: var(--error); }
.gate-error[hidden] { display: none; }

/* signed-in account chip in the header */
.account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(14, 14, 18, 0.55);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.account[hidden] { display: none; }
.account .x-logo { width: 12px; height: 12px; fill: currentColor; opacity: 0.85; }
.account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-out {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.account-out:hover { background: rgba(240, 50, 119, 0.15); color: var(--error); }
.account-out:focus-visible { outline: none; box-shadow: var(--ring); }
.account-out svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 640px) {
  .account { height: 26px; padding-left: 8px; font-size: 12px; }
  .account-name { max-width: 84px; }
  .site-top-right { gap: 6px; }
  .gate-card { flex-wrap: wrap; justify-content: center; text-align: center; padding: 14px; gap: 10px; }
  .gate-copy { flex-basis: 100%; }
  .gate-btn { width: 100%; }
  .answer-zone > .gate { inset: 0; align-items: start; padding-top: 6px; }
}

/* ---------- Already solved (PUZZLE_<n>_SOLVED) ---------- */

/* while the "solved by" card is up, the arcade and answers sit blurred behind it */
.is-solved-intro .scene,
.is-solved-intro .viewer,
.is-solved-intro .nav,
.is-solved-intro .dots,
.is-solved-intro .answers {
  filter: blur(8px) saturate(0.85);
  pointer-events: none;
  user-select: none;
  transition: filter 500ms ease;
}

.stage > .solved-gate {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(11, 11, 13, 0.2), rgba(11, 11, 13, 0.55));
}
.solved-gate[hidden] { display: none; }
.solved-gate.is-leaving { animation: solvedOut 380ms ease forwards; }
@keyframes solvedOut { to { opacity: 0; } }

.solved-card {
  position: relative;
  width: min(420px, 100%);
  padding: 26px 24px 22px;
  border-radius: 22px;
  text-align: center;
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(255, 194, 71, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 40px -12px rgba(255, 194, 71, 0.45),
    0 30px 80px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: solvedIn 700ms var(--ease) both;
}
@keyframes solvedIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.95); }
  100% { opacity: 1; transform: none; }
}

/* a rubber stamp, slammed on at an angle */
.solved-stamp {
  position: absolute;
  top: -16px;
  right: 18px;
  padding: 4px 12px;
  border: 2px solid #ffc247;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffd27a;
  background: rgba(18, 18, 24, 0.95);
  text-shadow: 0 0 8px rgba(255, 194, 71, 0.8);
  box-shadow: 0 0 14px -2px rgba(255, 194, 71, 0.6);
  transform: rotate(8deg);
  animation: stampIn 520ms cubic-bezier(0.2, 1.6, 0.4, 1) 260ms both;
}
@keyframes stampIn {
  0%   { opacity: 0; transform: rotate(20deg) scale(2.2); }
  100% { opacity: 1; transform: rotate(8deg) scale(1); }
}

.solved-card .step-no { color: #ffd27a; text-transform: uppercase; }
.solved-title {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.solved-handle {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Tilt Neon", var(--font-sans);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
  color: #f1fffb;
  text-decoration: none;
  text-shadow: 0 0 1px #fff, 0 0 6px #3ff0c0, 0 0 16px #3ff0c0, 0 0 32px rgba(63, 240, 192, 0.7);
}
.solved-handle:hover { filter: brightness(1.15); }
.solved-handle[hidden] { display: none; }
.solved-text { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.solved-ask { margin: 14px 0 16px; font-size: 16px; font-weight: 700; color: var(--text); }
.solved-try { justify-content: center; width: 100%; height: 46px; }

.status[data-state="solved"] { color: #ffd27a; background: rgba(255, 194, 71, 0.10); border-color: rgba(255, 194, 71, 0.35); }

@media (max-width: 640px) {
  .solved-card { padding: 22px 16px 16px; }
  .solved-handle { font-size: 28px; }
}

/* ---------- Prize seed phrase (after a correct answer) ---------- */

.reward.pd-card {
  width: 100%;
  max-width: 620px;
  margin: 8px auto 0;
  padding: 20px 20px 18px;
  border-color: rgba(23, 167, 129, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 90px -30px rgba(23, 167, 129, 0.45),
    0 24px 48px -24px rgba(0, 0, 0, 0.7);
  animation: hintItemIn 520ms var(--ease) both;
}
.reward[hidden] { display: none; }
.reward-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reward-head .step-no { color: var(--success-light); text-transform: uppercase; }
.reward-head .pd-title { margin: 4px 0 0; }
.reward-lock {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(23, 167, 129, 0.14);
  border: 1px solid rgba(23, 167, 129, 0.4);
}
.reward-lock svg { width: 20px; height: 20px; fill: none; stroke: var(--success-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reward-warn {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 196, 107, 0.08);
  border: 1px solid rgba(245, 196, 107, 0.3);
  color: #f5d9a0;
  font-size: 13px;
  line-height: 1.5;
}

.reward-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(14, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: filter 300ms ease;
}
/* hidden until the player chooses to reveal it, so a glance or a screenshot doesn't catch it */
.reward-words.is-hidden { filter: blur(7px); user-select: none; pointer-events: none; }
.reward-word {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.reward-word i {
  min-width: 18px;
  font-style: normal;
  font-size: 11px;
  color: var(--dim);
  text-align: right;
}
.reward-raw { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 14px; word-break: break-all; color: var(--text); }

.reward-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.reward-actions .pd-btn { justify-content: center; min-width: 120px; }

@media (max-width: 640px) {
  .reward.pd-card { padding: 16px 14px; }
  .reward-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Unlock celebration ---------- */

/* confetti flies over everything, including the postcard window */
.confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 90;
  pointer-events: none;
}
.confetti[hidden] { display: none; }

/* the lock sends out a ring when it opens */
.lock-btn.is-open::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 2px solid var(--success-light);
  box-shadow: 0 0 16px var(--success);
  pointer-events: none;
  animation: lockRing 900ms var(--ease) forwards;
}
@keyframes lockRing {
  0%   { transform: scale(1); opacity: 0.95; }
  100% { transform: scale(2.6); opacity: 0; }
}

.feedback-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--success-light);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.feedback-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

.postcard {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 5, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-y: auto;
  animation: postcardFade 300ms ease both;
}
.postcard[hidden] { display: none; }
.postcard-panel {
  position: relative;
  width: min(760px, 100%);
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: rgba(20, 21, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 40px 120px -30px rgba(23, 167, 129, 0.45),
    0 24px 48px -24px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 70%;
  animation: postcardIn 1100ms cubic-bezier(0.25, 0.8, 0.35, 1) both;
}
.postcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.postcard-head .step-no { color: var(--success-light); text-transform: uppercase; }
.postcard-head .pd-title { margin: 4px 0 0; }

.postcard-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0b0b0d;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
  animation: postcardDevelop 900ms ease 200ms both;
}
.postcard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.postcard-actions .pd-btn { justify-content: center; }
.postcard-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.postcard-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

.postcard.is-closing { animation: postcardFadeOut 220ms ease both; }

@keyframes postcardFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes postcardFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* the card is tossed in: a wide spin that swings back and forth before it settles */
@keyframes postcardIn {
  0%   { opacity: 0; transform: translateY(140px) scale(0.55) rotate(-20deg); }
  42%  { opacity: 1; transform: translateY(-18px) scale(1.05) rotate(7deg); }
  62%  { transform: translateY(6px) scale(0.985) rotate(-3.5deg); }
  78%  { transform: translateY(-2px) scale(1.01) rotate(1.4deg); }
  90%  { transform: translateY(0) scale(0.998) rotate(-0.5deg); }
  100% { opacity: 1; transform: none; }
}
/* the card "develops" like a photo */
@keyframes postcardDevelop {
  0%   { filter: brightness(2.2) saturate(0) blur(6px); }
  100% { filter: none; }
}

@media (max-width: 640px) {
  .postcard { padding: 10px; align-items: end; }
  .postcard-panel { padding: 16px 14px 14px; border-radius: 20px; }
  .postcard-actions .pd-btn { flex: 1 1 140px; }
}

/* ---------- Desktop: everything in one view ----------
   Header, sign, fields and buttons keep their natural height; the arcade
   frame takes whatever height is left. The cabinet scales to the frame
   (container query units), so the page fits any desktop screen without
   scrolling. Below ~660px of height the frame stops shrinking and the
   page scrolls instead of squashing the screen. */
@media (min-width: 1025px) {
  :root { --top-h: 68px; }
  .site-top { height: var(--top-h); }
  .page {
    height: calc(100vh - var(--top-h));
    height: calc(100dvh - var(--top-h));
    min-height: 600px;
    gap: 14px;
    padding-top: 0;
    padding-bottom: 16px;
  }
  .neon-sign { flex: none; }
  .stage.pd-card { flex: 1 1 0; height: auto; min-height: 300px; }
  .answers { flex: none; gap: 14px; }
  .feedback { min-height: 1.3em; font-size: 13px; }
}

/* tall desktop screens: let the frame (and sign) widen so the cabinet can use the height */
@media (min-width: 1280px) and (min-height: 980px) {
  .stage.pd-card, .neon-sign { max-width: 980px; }
}

/* once the seed box is shown, the page stops fitting one view: it grows and
   scrolls, the frame keeps a normal height and the box keeps its full size */
@media (min-width: 1025px) {
  .has-reward .page { height: auto; min-height: calc(100dvh - var(--top-h)); }
  .has-reward .stage.pd-card { flex: none; height: clamp(380px, 56vh, 600px); }
}
.reward { flex: none; }

/* shorter desktop screens (laptops, browser with toolbars): tighter everything */
@media (min-width: 1025px) and (max-height: 860px) {
  :root { --top-h: 56px; }
  .page { gap: 10px; padding-bottom: 10px; }
  .answers { gap: 10px; }
  .fields { gap: 12px 24px; max-width: 830px; } /* keeps 9 clues at 3 per row with the smaller boxes */
  .field { gap: 4px; }
  .cell { width: 28px; height: 33px; font-size: 14px; border-radius: 8px; }
  .field-bar { bottom: -7px; }
  .actions { margin-top: 2px; }
  .lock-btn { width: 40px; height: 40px; border-radius: 11px; }
  .clear-btn { width: 40px; height: 40px; border-radius: 11px; }
  .clear-btn svg { width: 18px; height: 18px; }
  .lock-btn svg { width: 19px; height: 19px; }
  .hints-btn { height: 40px; font-size: 14px; }
  .feedback { min-height: 1.2em; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .monitor .scan { display: none; }
}