/* ═══════════════════════════════════════════════════════════════
   NETFLIX GAMES — the arcade skin.
   Everything here is scoped under .g-sheet, which assets/games.js
   adds to the sheet that gameSheet() builds, so none of it can
   reach the rest of the page. Palette and radius come from the
   variables already on :root in styles.css.
   ═══════════════════════════════════════════════════════════════ */

.g-sheet{width:min(94vw,560px);padding-bottom:4px}
.g-sheet .snake-head{padding:24px 22px 14px}
.g-sheet .snake-head h2{font-size:clamp(28px,7vw,40px)}
.g-sheet .snake-head p{max-width:42ch;margin:0 auto}

.g-wrap{padding:0 22px 4px}

/* ── the playfield ─────────────────────────────────────────── */
.g-stage{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:#0d0d0d;border:1px solid #262626;
  box-shadow:inset 0 0 40px rgba(0,0,0,.7);
}
.g-canvas{
  display:block;width:100%;height:auto;
  touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;cursor:crosshair;
}
.g-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

/* ── the one and only overlay. Nothing else ever sits on top of
      the play button, which is how the dead-on-open bug happened
      the last time round. ─────────────────────────────────────── */
.g-veil{
  position:absolute;inset:0;z-index:9;
  display:grid;place-items:center;padding:16px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(12,12,12,.82),rgba(6,6,6,.95));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.g-veil-box{
  display:grid;justify-items:center;gap:9px;text-align:center;max-width:36ch;
}
.g-veil.in .g-veil-box{animation:gVeil .3s cubic-bezier(.2,.9,.25,1) both}
@keyframes gVeil{from{opacity:0;transform:translateY(12px) scale(.96)}}
.g-veil-kick{
  font-size:10px;font-weight:700;letter-spacing:.3em;color:var(--red);
  text-transform:uppercase;
}
.g-veil h3{
  font-family:var(--logo);font-size:clamp(24px,6vw,34px);line-height:1.02;
  margin:0;letter-spacing:.005em;
}
.g-veil p{margin:0;font-size:13px;line-height:1.55;color:var(--dimmer)}
.g-veil p b{color:#fff;font-weight:700}
.g-veil .g-go{margin-top:6px;font-size:15px;padding:.6em 1.5em}
.g-veil .g-go svg{width:1.25em;height:1.25em}
.g-veil-hint{font-size:10.5px;letter-spacing:.14em;color:#6e6e6e;text-transform:uppercase}

/* ── score strip ───────────────────────────────────────────── */
.g-hud{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 0 6px;
}
.g-stat{
  flex:1 1 0;min-width:62px;display:grid;gap:2px;
  padding:7px 9px;border-radius:var(--radius);background:#1f1f1f;
}
.g-stat i{
  font-style:normal;font-size:9px;letter-spacing:.18em;
  color:var(--grey);text-transform:uppercase;
}
.g-stat b{
  font-family:var(--logo);font-weight:400;font-size:19px;line-height:1.05;
  color:#fff;letter-spacing:.02em;display:flex;align-items:center;gap:4px;min-height:20px;
}
.g-pip{
  width:8px;height:13px;border-radius:1.5px;background:var(--red);
  display:inline-block;box-shadow:0 0 8px rgba(229,9,20,.55);
  animation:gPip .35s var(--ease) both;
}
@keyframes gPip{from{transform:scale(.4);opacity:0}}
.g-snd{
  flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius);
  background:#1f1f1f;display:grid;place-items:center;color:#c9c9c9;
  transition:background-color .2s,color .2s;
}
.g-snd:hover{background:#2c2c2c;color:#fff}
.g-snd.off{color:#5e5e5e}
.g-snd svg{width:16px;height:16px;fill:currentColor}

.g-note{
  margin:2px 0 18px;font-size:11.5px;line-height:1.5;color:#6e6e6e;text-align:center;
}

/* ── the on-screen pad. Shown wherever a mouse is not the
      obvious input, and it is a real control, not a swipe hint. */
.g-pad{display:none;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px auto 0;max-width:230px}
.g-key{
  height:52px;border-radius:var(--radius);background:#232323;
  display:grid;place-items:center;color:#e8e8e8;
  touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .1s,transform .1s;
}
.g-key:active{background:var(--red);transform:scale(.94)}
.g-key svg{width:22px;height:22px;fill:currentColor}
.g-key.up   {grid-area:1/2}
.g-key.left {grid-area:2/1}
.g-key.down {grid-area:2/2}
.g-key.right{grid-area:2/3}
.g-key.up    svg{transform:rotate(180deg)}
.g-key.left  svg{transform:rotate(90deg)}
.g-key.right svg{transform:rotate(-90deg)}
@media (pointer:coarse),(max-width:640px){
  .g-pad{display:grid}
  .g-canvas{cursor:default}
}

/* ═══ Recommended For You ═══════════════════════════════════ */
.mem-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  margin-bottom:6px;
}
.mem-top [data-clock]{
  font-family:var(--logo);font-size:17px;letter-spacing:.04em;color:#fff;
  transition:color .2s;
}
.mem-top [data-clock].low{color:var(--red)}
.mem-timer{
  height:4px;border-radius:2px;background:#262626;overflow:hidden;margin-bottom:10px;
}
.mem-timer i{display:block;height:100%;width:100%;background:var(--green);transition:background-color .3s}
.mem-stage{background:#101010;padding:8px;min-height:180px}
.g-grid{
  display:grid;gap:7px;
  grid-template-columns:repeat(var(--cols,4),1fr);
  transition:none;
}
.mc{
  position:relative;aspect-ratio:16/10;perspective:800px;
  background:none;padding:0;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mc-in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,.85,.25,1);
  border-radius:3px;
}
.mc.up .mc-in{transform:rotateY(180deg)}
.mc-back,.mc-face{
  position:absolute;inset:0;border-radius:3px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:block;
}
.mc-back{
  background:linear-gradient(145deg,#232323,#111);
  border:1px solid #303030;display:grid;place-items:center;
}
.mc-back::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 0,rgba(229,9,20,.18),transparent 70%);
}
.mc-n{font-family:var(--logo);color:var(--red);font-size:clamp(15px,3.4vw,26px);line-height:1;opacity:.85}
.mc-face{transform:rotateY(180deg);background:#000;border:1px solid #2b2b2b}
.mc-art{position:absolute;inset:0;display:block;overflow:hidden}
.mc-name{
  position:absolute;left:5%;right:5%;bottom:5%;z-index:3;
  font-family:var(--logo);font-size:clamp(8px,1.7vw,13px);line-height:1.02;
  text-shadow:0 2px 8px rgba(0,0,0,.9);pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mc-face::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.78));
}
.mc.deal{animation:mcDeal .3s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes mcDeal{from{opacity:0;transform:translateY(14px) scale(.9)}}
.mc.done{cursor:default}
.mc.done .mc-face{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px rgba(70,211,105,.45)}
.mc.done .mc-in{animation:mcHit .42s var(--ease)}
@keyframes mcHit{40%{transform:rotateY(180deg) scale(1.09)}}
.mc.bad .mc-face{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 16px rgba(229,9,20,.5)}

/* ═══ Are You Still Watching? ═══════════════════════════════ */
.rf-stage{aspect-ratio:16/9;background:#080808}
.rf-screen{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 100% at 50% 30%,#1b1b1b,#070707 75%);
  will-change:transform;
}
.rf-screen.good{box-shadow:inset 0 0 0 2px var(--green),inset 0 0 60px rgba(70,211,105,.3)}
.rf-screen.bad {box-shadow:inset 0 0 0 2px var(--red),inset 0 0 60px rgba(229,9,20,.35)}
.rf-idle{
  position:absolute;left:0;right:0;bottom:0;padding:0 5% 7%;
  display:grid;gap:7px;justify-items:center;text-align:center;
}
.rf-ep{
  font-size:clamp(10px,2.4vw,13px);color:#cfcfcf;letter-spacing:.02em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.rf-prog{width:min(72%,300px);height:3px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.rf-prog i{display:block;height:100%;width:0;background:var(--red)}
.rf-state{font-size:9.5px;letter-spacing:.24em;color:#6c6c6c;text-transform:uppercase}

.rf-dialog{
  position:relative;z-index:3;width:min(88%,330px);
  background:#141414;border:1px solid #2e2e2e;border-radius:var(--radius);
  padding:14px 16px 13px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.75);
  display:grid;gap:8px;justify-items:center;
}
.rf-dialog.live{animation:rfIn .14s var(--ease) both}
.rf-dialog.feint{opacity:.55;filter:blur(1px)}
@keyframes rfIn{from{opacity:0;transform:scale(.9)}}
.rf-brand .n{font-family:var(--logo);color:var(--red);font-size:17px;line-height:1}
.rf-dialog h4{margin:0;font-size:12.5px;font-weight:500;color:var(--dimmer);letter-spacing:.01em}
.rf-token{
  font-family:var(--logo);font-size:clamp(26px,7.4vw,44px);line-height:1;
  letter-spacing:.02em;
}
.rf-token.yes{color:var(--green);text-shadow:0 0 22px rgba(70,211,105,.45)}
.rf-token.no {color:var(--red);text-shadow:0 0 22px rgba(229,9,20,.5)}
.rf-bar{width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.rf-bar i{display:block;height:100%;width:100%;background:var(--green)}
.rf-verdict{
  position:absolute;z-index:5;top:9%;left:50%;transform:translateX(-50%);
  font-family:var(--logo);font-size:clamp(16px,4.2vw,26px);line-height:1;
  letter-spacing:.04em;animation:rfPop .3s var(--ease) both;white-space:nowrap;
}
@keyframes rfPop{from{opacity:0;transform:translateX(-50%) translateY(10px)}}
.rf-verdict.ok {color:var(--green)}
.rf-verdict.bad{color:var(--red)}

.rf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rf-b{
  padding:16px 8px;border-radius:var(--radius);
  font-family:var(--logo);font-size:clamp(15px,3.6vw,21px);letter-spacing:.03em;
  background:#232323;color:#fff;border:1px solid #333;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color .12s,transform .1s,border-color .12s;
}
.rf-b.yes{border-color:rgba(70,211,105,.5)}
.rf-b.no {border-color:rgba(229,9,20,.5)}
.rf-b.yes:hover{background:rgba(70,211,105,.18)}
.rf-b.no:hover {background:rgba(229,9,20,.18)}
.rf-b:active{transform:scale(.96)}
.rf-b.yes:active{background:var(--green);color:#062b10}
.rf-b.no:active {background:var(--red)}

/* ── small screens ─────────────────────────────────────────── */
@media (max-width:520px){
  .g-wrap{padding:0 14px 4px}
  .g-sheet .snake-head{padding:20px 16px 12px}
  .g-sheet .snake-head p{font-size:12px}
  .g-grid{grid-template-columns:repeat(var(--colsm,4),1fr);gap:5px}
  .g-hud{gap:6px}
  .g-stat{min-width:0;padding:6px 7px}
  .g-stat b{font-size:16px}
  .g-stat i{font-size:8px;letter-spacing:.12em}
  .g-key{height:58px}
  .g-note{margin-bottom:14px}
}
@media (max-width:380px){
  .g-stat i{letter-spacing:.06em}
}

/* Anyone who would rather the site sat still. */
@media (prefers-reduced-motion:reduce){
  .mc.deal{animation:none}
  .g-veil.in .g-veil-box{animation:none}
}