/* ═══════════════════════════════════════════════════════════════
   NETFLIX GAMES, second wave.  Everything here is namespaced .gx-
   so it can never collide with games.css, which belongs to the
   other half of the arcade.  Palette and radius come from
   styles.css :root, nothing new is invented.
   ═══════════════════════════════════════════════════════════════ */

/* the sheet gameSheet() builds is 470px wide; the board games want
   a little more room, and the runner reads better wide. */
.gx-sheet{width:min(94vw,520px);padding-bottom:4px}

/* ── shared furniture ───────────────────────────────────────── */
.gx-stage{position:relative;padding:0 20px}
.gx-cv{
  width:100%;display:block;border-radius:var(--radius);
  background:#0d0d0d;border:1px solid #2a2a2a;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.gx-over{
  position:absolute;inset:0 20px;z-index:6;display:grid;place-content:center;
  gap:9px;text-align:center;padding:14px;
  background:rgba(8,8,8,.93);border-radius:var(--radius);
  animation:gxFade .22s var(--ease);
}
@keyframes gxFade{from{opacity:0}}
.gx-over h3{
  font-family:var(--logo);font-size:clamp(22px,6vw,30px);margin:0;line-height:1.05;
}
.gx-over h3.win{color:var(--green)}
.gx-over h3.bad{color:var(--red)}
.gx-over p{margin:0;color:var(--grey);font-size:13px;line-height:1.5;max-width:30ch}
.gx-over p b{color:#fff;font-weight:700}
.gx-btn{justify-self:center;margin-top:6px;font-size:15px;cursor:pointer}
.gx-over .gx-note{font-size:11.5px;letter-spacing:.04em;color:#5d5d5d}

.gx-score{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px 6px;font-size:12.5px;color:var(--grey);
}
.gx-score b{color:#fff;font-weight:700;margin-left:6px;font-size:15px}
.gx-score b.up{color:var(--green)}
.gx-keys{
  margin:2px 20px 16px;text-align:center;font-size:11px;letter-spacing:.06em;
  color:#5d5d5d;line-height:1.5;
}
.gx-pause{
  position:absolute;inset:0 20px;z-index:7;display:grid;place-content:center;
  background:rgba(8,8,8,.82);border-radius:var(--radius);
  font-family:var(--logo);font-size:24px;letter-spacing:.04em;
}

/* ═══ 1. Line Goes Up ══════════════════════════════════════════ */
.gx-chart .gx-cv{aspect-ratio:16/10;background:#080b12}
.gx-live{
  position:absolute;top:10px;right:30px;z-index:3;pointer-events:none;
  font-family:var(--logo);font-size:23px;line-height:1;color:var(--green);
  text-shadow:0 2px 10px rgba(0,0,0,.8);transition:color .2s;
}
.gx-live.hot{color:#fff}
.gx-tap{
  position:absolute;left:30px;bottom:12px;z-index:3;pointer-events:none;
  font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.44);
  animation:gxBlink 1.6s infinite;
}
@keyframes gxBlink{0%,100%{opacity:.25}50%{opacity:.9}}

/* ═══ 2. Diamond Hands ═════════════════════════════════════════ */
.gx-hands .gx-cv{aspect-ratio:16/6;background:#0b0b0b}
.gx-read{
  position:relative;text-align:center;padding:16px 20px 4px;
}
.gx-read-lbl{
  font-size:10.5px;letter-spacing:.24em;color:#6a6a6a;margin-bottom:2px;
}
.gx-num{
  font-family:var(--logo);font-size:clamp(40px,12vw,58px);line-height:1;
  color:var(--green);will-change:transform;transform-origin:50% 50%;
  font-variant-numeric:tabular-nums;
}
.gx-num-sub{font-size:12px;color:var(--grey);margin-top:5px;min-height:17px}
.gx-num-sub.warn{color:#f5a524}
.gx-num-sub.bad{color:var(--red)}
.gx-pop{
  position:absolute;left:50%;top:38%;z-index:4;pointer-events:none;
  font-family:var(--logo);font-size:26px;white-space:nowrap;
  animation:gxFly 1.05s var(--ease) forwards;
}
@keyframes gxFly{
  0%{opacity:0;transform:translate(-50%,6px) scale(.8)}
  18%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-62px) scale(.92)}
}
.gx-stamp{
  position:absolute;inset:0;z-index:5;display:grid;place-content:center;
  pointer-events:none;font-family:var(--logo);font-size:clamp(34px,11vw,52px);
  color:var(--red);letter-spacing:.04em;
  animation:gxStamp .9s var(--ease) forwards;
}
@keyframes gxStamp{
  0%{opacity:0;transform:scale(2.1) rotate(-9deg)}
  14%{opacity:1;transform:scale(1) rotate(-9deg)}
  70%{opacity:1;transform:scale(1) rotate(-9deg)}
  100%{opacity:0;transform:scale(1.04) rotate(-9deg)}
}
.gx-risk{padding:8px 20px 0}
.gx-risk-top{
  display:flex;justify-content:space-between;font-size:10.5px;
  letter-spacing:.18em;color:#6a6a6a;margin-bottom:5px;
}
.gx-risk-top i{font-style:normal;font-variant-numeric:tabular-nums}
.gx-risk-bar{
  height:6px;border-radius:99px;background:#242424;overflow:hidden;position:relative;
}
.gx-risk-fill{
  display:block;height:100%;width:0;border-radius:99px;background:var(--green);
  transition:background-color .18s linear;
}
.gx-pips{display:flex;gap:5px;justify-content:center;padding:12px 0 0}
.gx-pip{
  width:9px;height:9px;transform:rotate(45deg);background:#fff;border-radius:1px;
  transition:background-color .25s,opacity .25s,transform .25s;
}
.gx-pip.gone{background:#3a3a3a;opacity:.45;transform:rotate(45deg) scale(.7)}
.gx-hold{
  display:block;width:calc(100% - 40px);margin:14px 20px 0;
  padding:18px 10px;border-radius:var(--radius);cursor:pointer;
  font-family:var(--logo);font-size:24px;letter-spacing:.06em;
  background:#fff;color:#000;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:background-color .12s,transform .08s,box-shadow .18s;
}
.gx-hold:hover{background:#e6e6e6}
.gx-hold.down{background:var(--green);color:#06210f;transform:scale(.985)}
.gx-hold.risky{background:#f5a524;color:#241500}
.gx-hold.danger{background:var(--red);color:#fff;box-shadow:0 0 26px rgba(229,9,20,.45)}
.gx-hold[disabled]{background:#2a2a2a;color:#6a6a6a;cursor:not-allowed;transform:none}
.gx-shake{animation:gxShake .34s}
@keyframes gxShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}35%{transform:translateX(6px)}
  55%{transform:translateX(-4px)}75%{transform:translateX(3px)}
}

/* ═══ 3. Rug Detector ══════════════════════════════════════════ */
.gx-rug .gx-stage{padding:0 20px}
.gx-rbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 20px 10px;font-size:11px;letter-spacing:.14em;color:#6a6a6a;
}
.gx-rbar b{
  display:block;color:#fff;font-family:var(--logo);font-size:19px;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.gx-rbar .stat{min-width:54px}
.gx-rbar .stat.r{text-align:right}
.gx-flagbtn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  border-radius:var(--radius);background:#2a2a2a;color:#cfcfcf;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  transition:background-color .15s,color .15s;-webkit-user-select:none;user-select:none;
}
.gx-flagbtn:hover{background:#3a3a3a;color:#fff}
.gx-flagbtn[aria-pressed="true"]{background:var(--red);color:#fff}
.gx-flagbtn svg{width:14px;height:14px;fill:currentColor}
.gx-grid{
  display:grid;grid-template-columns:repeat(var(--n,9),1fr);gap:2px;
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.gx-c{
  aspect-ratio:1;display:grid;place-content:center;cursor:pointer;
  background:#3d3d3d;border-radius:2px;color:#fff;
  font-family:var(--logo);font-size:clamp(11px,3.4vw,19px);line-height:1;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  transition:background-color .1s;
}
.gx-c:hover{background:#4c4c4c}
.gx-c:focus-visible{outline:2px solid var(--red);outline-offset:1px;z-index:2}
.gx-c.press{background:#585858}
.gx-c.open{background:#181818;cursor:default;animation:gxCell .22s var(--ease) both;animation-delay:var(--d,0ms)}
.gx-c.open:hover{background:#181818}
.gx-c.open.n{cursor:pointer}
@keyframes gxCell{from{transform:scale(.55);background:#5a5a5a}}
.gx-c.n1{color:#6fb4ff}.gx-c.n2{color:var(--green)}.gx-c.n3{color:#ff6b6b}
.gx-c.n4{color:#c08bff}.gx-c.n5{color:#f5a524}.gx-c.n6{color:#4fd8d0}
.gx-c.n7{color:#e5e5e5}.gx-c.n8{color:#8a8a8a}
.gx-c.flag{background:#3a2326}
.gx-c.flag::after{content:"\2691";color:var(--red);font-size:1.15em}
.gx-c.mine{background:#181818;animation:gxCell .22s var(--ease) both;animation-delay:var(--d,0ms)}
.gx-c.mine::after{content:"";width:58%;height:58%;border-radius:2px;
  background:repeating-linear-gradient(45deg,var(--red) 0 3px,#7a0409 3px 6px)}
.gx-c.boom{background:var(--red)}
.gx-c.boom::after{background:repeating-linear-gradient(45deg,#fff 0 3px,#ffd7d9 3px 6px)}
.gx-c.wrong{background:#2a2a2a}
.gx-c.wrong::after{content:"\2715";color:var(--red);font-size:1.1em;
  width:auto;height:auto;background:none;border-radius:0}
.gx-rfoot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 20px 0;
}
.gx-seg{display:flex;gap:4px;background:#1f1f1f;border-radius:var(--radius);padding:3px}
.gx-seg button{
  padding:7px 11px;border-radius:2px;font-size:11.5px;font-weight:600;
  color:#8a8a8a;cursor:pointer;letter-spacing:.04em;transition:.15s;
}
.gx-seg button:hover{color:#fff}
.gx-seg button.on{background:#e5e5e5;color:#000}
.gx-new{
  padding:9px 14px;border-radius:var(--radius);background:#2a2a2a;color:#cfcfcf;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:.15s;
}
.gx-new:hover{background:#3a3a3a;color:#fff}

/* ═══ 4. Seed Phrase ═══════════════════════════════════════════ */
.gx-stop{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 20px 10px;font-size:11px;letter-spacing:.14em;color:#6a6a6a;
}
.gx-stop b{color:#fff;font-family:var(--logo);font-size:18px;letter-spacing:.02em}
.gx-state{
  padding:6px 12px;border-radius:99px;background:#2a2a2a;color:#b3b3b3;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;transition:.2s;
}
.gx-state.watch{background:#3a2f12;color:#f5a524}
.gx-state.turn{background:#11361f;color:var(--green)}
.gx-state.dead{background:#3a1114;color:#ff6b6b}
.gx-dots{display:flex;gap:4px;justify-content:center;padding:0 20px 12px;flex-wrap:wrap}
.gx-dot{
  width:16px;height:3px;border-radius:99px;background:#333;transition:.18s;
}
.gx-dot.on{background:var(--green);box-shadow:0 0 8px rgba(70,211,105,.5)}
.gx-dot.next{background:#6a6a6a}
.gx-words{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  touch-action:manipulation;
}
@media (min-width:500px){.gx-words{grid-template-columns:repeat(4,1fr)}}
.gx-w{
  position:relative;aspect-ratio:1.55;display:grid;place-content:center;
  border-radius:var(--radius);background:#232323;color:#cfcfcf;cursor:default;
  font-size:clamp(11px,3.1vw,14px);font-weight:700;letter-spacing:.02em;
  border:1px solid #2f2f2f;overflow:hidden;
  -webkit-user-select:none;user-select:none;
  transition:background-color .12s,color .12s,border-color .12s,transform .1s;
}
.gx-words.armed .gx-w{cursor:pointer;background:#2b2b2b;border-color:#3d3d3d;color:#fff}
.gx-words.armed .gx-w:hover{background:#383838}
.gx-w:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gx-w .ix{
  position:absolute;top:4px;left:6px;font-size:9px;font-weight:600;
  color:#5d5d5d;letter-spacing:.06em;
}
/* the flash states snap: at round ten a word is only lit for 205ms and a
   120ms cross-fade eats most of it */
.gx-w.lit,.gx-w.tap,.gx-w.right,.gx-w.wrong{transition:none}
.gx-w.lit{
  background:hsl(var(--hue) 72% 52%);color:#07130c;border-color:hsl(var(--hue) 82% 68%);
  transform:scale(1.06);box-shadow:0 0 22px hsl(var(--hue) 72% 52% / .55);
}
.gx-w.lit .ix{color:rgba(0,0,0,.45)}
.gx-w.tap{background:#fff;color:#000;border-color:#fff;transform:scale(.95)}
.gx-w.right{background:var(--green);color:#06210f;border-color:var(--green);
  animation:gxPulse .5s var(--ease) 2}
.gx-w.wrong{background:var(--red);color:#fff;border-color:var(--red);
  animation:gxShake .34s}
@keyframes gxPulse{50%{transform:scale(1.08)}}
.gx-count{
  position:absolute;inset:0;z-index:7;display:grid;place-content:center;
  pointer-events:none;font-family:var(--logo);
  font-size:clamp(56px,20vw,96px);line-height:1;color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.9);
}
.gx-count.beat{animation:gxCount .55s var(--ease)}
@keyframes gxCount{from{opacity:0;transform:scale(2.2)}60%{opacity:1}}

/* phones: claw back the side gutters so the minesweeper cells and the
   word tiles stay thumb-sized */
@media (max-width:430px){
  .gx-stage,.gx-rug .gx-stage{padding:0 12px}
  .gx-over,.gx-pause{inset:0 12px}
  .gx-score,.gx-risk,.gx-read,.gx-rbar,.gx-rfoot,.gx-stop,.gx-dots{
    padding-left:12px;padding-right:12px;
  }
  .gx-keys{margin-left:12px;margin-right:12px}
  .gx-hold{width:calc(100% - 24px);margin-left:12px;margin-right:12px}
  .gx-live{right:22px}
  .gx-tap{left:22px}
  .gx-score{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .gx-over,.gx-c.open,.gx-c.mine,.gx-count.beat,.gx-pop,.gx-stamp,
  .gx-shake,.gx-w.right,.gx-w.wrong,.gx-tap{animation:none}
}