/* ═══════════════════════════════════════════════════════════════════════════
   Just Blackjack — "Midnight Noir" landing page
   Palette, radii, motion and type are lifted straight from the app's design
   tokens (src/ui/theme/tokens.ts, typography.ts) so the site and the product
   read as one object. Gold is reserved for money moments — nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ink — background ramp, darkest to lightest */
  --ink-950:#0C0C0E; --ink-900:#111113; --ink-850:#161618;
  --ink-800:#1B1B1E; --ink-700:#232326; --ink-600:#2C2C30; --ink-500:#3A3A3F;

  /* Porcelain — foreground ramp */
  --por:#FCFEF0;
  --por-dim:rgba(252,254,240,.84);
  --por-mute:rgba(252,254,240,.64);
  --por-faint:rgba(252,254,240,.34);
  --por-ghost:rgba(252,254,240,.08);
  --por-hair:rgba(252,254,240,.11);

  /* Gold — money moments ONLY */
  --gold:#E3B860; --gold-bright:#F2D28A; --gold-deep:#A9853F;
  --gold-glow:rgba(227,184,96,.35);

  --loss:#9EA0A8;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --font-display:'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion — springy, weighty, casino-grade */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);

  --gut:clamp(20px, 5vw, 72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink-950);
}

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.6;
  color:var(--por-dim);
  background:var(--ink-950);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Lock scroll while the curtain is up */
body.is-loading{overflow:hidden;height:100vh}

/* Components below set explicit `display`, which would beat the UA's
   [hidden] rule — make hidden mean hidden. */
[hidden]{display:none!important}

img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink-950)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ══════════════════ Backdrop: spotlight, felt, grain, vignette ═════════════ */

.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* The table light. Follows the pointer, breathes on its own. */
.backdrop__spot{
  position:absolute;
  left:50%; top:38%;
  width:min(160vw,1700px); aspect-ratio:1;
  translate:-50% -50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(227,184,96,.085) 0%,
      rgba(227,184,96,.040) 22%,
      rgba(227,184,96,.012) 42%,
      transparent 66%);
  transform:translate3d(var(--sx,0px), var(--sy,0px), 0) scale(var(--ss,1));
  transition:transform 1.4s var(--e-out);
  animation:breathe 14s var(--e-in-out) infinite;
}
@keyframes breathe{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

/* A whisper of dark felt weave — keeps the flats from looking like flat #000 */
.backdrop__felt{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(44,44,48,.55), transparent 60%),
    radial-gradient(ellipse 100% 70% at 85% 110%, rgba(35,35,38,.5), transparent 62%);
  opacity:.9;
}

.backdrop__grain{
  position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.052;
  mix-blend-mode:overlay;
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      16%{transform:translate(-2%,1%)}
  33%{transform:translate(1%,-2%)}  50%{transform:translate(-1%,2%)}
  66%{transform:translate(2%,1%)}   83%{transform:translate(1%,-1%)}
  100%{transform:translate(0,0)}
}

.backdrop__vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ══════════════════ Intro curtain ══════════════════ */

.curtain{position:fixed;inset:0;z-index:200;pointer-events:none}
.curtain__panel{
  position:absolute;left:0;width:100%;height:50.2%;
  background:var(--ink-950);
  transition:transform 1s var(--e-out);
}
.curtain__panel--t{top:0}
.curtain__panel--b{bottom:0}

.curtain__mark{
  position:absolute;inset:0;
  display:grid;place-items:center;
  transition:opacity .4s ease;
}
.curtain__chip{
  width:34px;height:34px;fill:var(--gold);
  animation:chipspin 1.15s var(--e-in-out) both;
  filter:drop-shadow(0 0 14px var(--gold-glow));
}
@keyframes chipspin{
  0%{transform:rotateY(0) scale(.6);opacity:0}
  35%{opacity:1}
  100%{transform:rotateY(540deg) scale(1);opacity:1}
}
.curtain__rule{
  position:absolute;bottom:calc(50% - 46px);left:50%;translate:-50% 0;
  width:0;height:1px;background:var(--gold);
  animation:ruledraw 1.1s .18s var(--e-out) forwards;
  opacity:.7;
}
@keyframes ruledraw{to{width:118px}}

.curtain.is-open .curtain__mark{opacity:0;transition-duration:.25s}
.curtain.is-open .curtain__panel--t{transform:translateY(-100%)}
.curtain.is-open .curtain__panel--b{transform:translateY(100%)}
.curtain.is-done{display:none}

/* ══════════════════ Scroll rail ══════════════════ */

.scroll-rail{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:150;
  background:rgba(252,254,240,.05);
}
.scroll-rail i{
  display:block;height:100%;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
  box-shadow:0 0 12px var(--gold-glow);
}

/* ══════════════════ Nav ══════════════════ */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:24px;
  /* viewport-fit=cover puts the layout viewport under the rounded corners and
     the notch, so the gutter has to clear the safe area too — without this the
     CTA slides under the bezel in landscape and gets clipped by the corner
     radius in portrait. */
  padding:16px calc(var(--gut) + env(safe-area-inset-right,0px))
          16px calc(var(--gut) + env(safe-area-inset-left,0px));
  transition:transform .45s var(--e-out),background .4s ease,
             backdrop-filter .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(12,12,14,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--por-ghost);
}
.nav.is-hidden{transform:translateY(-112%)}

/* The brand is what gives way when space runs out — never the CTA, which
   clips its own label rather than wrapping (.btn is overflow:hidden for the
   fill sweep). */
.nav__brand{
  display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;
  font-weight:700;letter-spacing:-.01em;color:var(--por);
}
.nav__brand svg{width:17px;height:17px;fill:var(--por);flex:none}
.nav__brand span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav__links{display:flex;gap:28px;margin-left:auto;font-size:13px;color:var(--por-mute)}
.nav__links a{position:relative;padding:4px 0;transition:color .3s ease}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--e-out);
}
.nav__cta{margin-left:4px;flex:none}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
}
@media (max-width:420px){
  .nav{gap:12px}
  /* .btn--sm is defined later in the file, so this needs the extra class to
     win — media queries add no specificity of their own. */
  .nav__cta.btn--sm{padding:10px 15px;font-size:10.5px;letter-spacing:.05em}
}
/* Under ~340px the wordmark has to go; the spade still gets you home. */
@media (max-width:339px){
  .nav__brand span{display:none}
}

/* ══════════════════ Buttons ══════════════════ */

.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:var(--r-pill);
  font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:transform .35s var(--e-out),box-shadow .35s ease,opacity .3s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn small{
  display:block;font-size:9px;letter-spacing:.14em;opacity:.62;
  font-weight:600;line-height:1;margin-bottom:3px;
}
.btn b{display:block;font-size:13.5px;letter-spacing:.02em;text-transform:none;line-height:1.1}
.btn__txt{display:flex;flex-direction:column;text-align:left}

/* fill sweep */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--e-out);
}

.btn--primary{background:var(--por);color:var(--ink-900)}
.btn--primary svg{fill:var(--ink-900);transition:fill .3s ease}
.btn--primary::before{background:var(--gold)}

.btn--gold{background:var(--gold);color:var(--ink-950);box-shadow:0 2px 10px rgba(227,184,96,.22)}
.btn--gold svg{fill:var(--ink-950)}
.btn--gold::before{background:var(--gold-bright)}

.btn--ghost{background:var(--por-ghost);color:var(--por);border:1px solid var(--por-hair)}
.btn--ghost svg{fill:var(--por);transition:fill .3s ease}
.btn--ghost::before{background:var(--por)}

.btn--sm{padding:11px 20px;font-size:11px}

.btn.is-soon{pointer-events:none;opacity:.42}
.btn .soon{
  font-size:9px;letter-spacing:.14em;font-weight:700;
  padding:3px 7px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.16);margin-left:2px;
}

/* ══════════════════ Shared type ══════════════════ */

.eyebrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin:0 0 30px;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--por-mute);
}
.eyebrow i{color:var(--gold);font-style:normal;font-size:9px}

.section-tag{
  display:flex;align-items:center;gap:14px;margin:0 0 24px;
  font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--por-faint);
}
.section-tag i{
  font-style:normal;color:var(--gold);font-family:var(--font-mono);
  font-size:11px;letter-spacing:0;
}
.section-tag::after{
  content:'';flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,var(--por-hair),transparent);
}

.h2{
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.04;letter-spacing:-.022em;color:var(--por);
  font-weight:400;
}
.h2 em{font-style:normal;color:var(--por-faint)}

.lede{
  margin:0 0 28px;max-width:52ch;
  font-size:clamp(15px,1.35vw,18px);line-height:1.62;color:var(--por-mute);
}
.lede--center{margin-inline:auto;text-align:center}

.ticks{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:11px}
.ticks li{
  position:relative;padding-left:26px;font-size:14.5px;color:var(--por-mute);
}
.ticks li::before{
  content:'';position:absolute;left:0;top:9px;
  width:9px;height:9px;border-radius:2px;
  background:var(--gold);opacity:.85;
  transform:rotate(45deg);
}

/* ══════════════════ Reveal system ══════════════════ */

.js .reveal{
  opacity:0;
  transform:translate3d(0,var(--rev-y,28px),0);
  transition:opacity .9s var(--e-out),transform 1.05s var(--e-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* word-by-word split */
.split-word{display:inline-block;overflow:hidden;vertical-align:top}
.split-word > i{
  display:inline-block;font-style:inherit;
  transform:translateY(102%) rotate(4deg);
  transition:transform 1s var(--e-out);
  transition-delay:calc(var(--w,0) * 55ms);
}
.is-in .split-word > i{transform:none}

/* ══════════════════ HERO ══════════════════ */

.hero{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--gut) 90px;
  /* The cards deal in from translate3d(190%,-130%) with animation-fill-mode
     backwards, so for the length of the stagger they genuinely sit ~230px off
     the right edge. Unclipped that widens the document, and position:fixed
     sizes to the layout viewport — which is what carried the nav's CTA off the
     side of the screen for the first third of a second after load. */
  overflow-x:clip;
}
.hero__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,70px);align-items:center;
}

.hero__mark{position:relative;margin:0 0 26px;width:min(430px,74%)}
.hero__mark img{
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.65));
  animation:markfloat 9s var(--e-in-out) infinite;
}
@keyframes markfloat{
  0%,100%{transform:translateY(0) rotate(-.15deg)}
  50%{transform:translateY(-8px) rotate(.15deg)}
}
/* gold light raking across the wordmark, once in a while */
.hero__mark-sweep{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(242,210,138,.5) 50%,transparent 62%);
  mask:url(assets/wordmark.png) no-repeat center/contain;
  -webkit-mask:url(assets/wordmark.png) no-repeat center/contain;
  background-size:260% 100%;
  animation:sweep 7s 2.4s var(--e-in-out) infinite;
}
@keyframes sweep{
  0%,72%{background-position:150% 0}
  92%,100%{background-position:-60% 0}
}

.hero__tag{
  margin:0 0 18px;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(21px,2.5vw,32px);line-height:1.16;
  letter-spacing:-.02em;color:var(--por);
}
.hero__sub{margin:0 0 36px;max-width:44ch;font-size:clamp(14.5px,1.2vw,16.5px);color:var(--por-mute)}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:22px;align-items:flex-start}

/* A store button and its own line of small print. */
.cta-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cta-sub{
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--por-faint);padding-left:2px;
}
.get__cta .cta-stack{align-items:center}

.hero__note{
  margin:0;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--por-faint);font-weight:500;
}

/* ── the card stage ── */
.hero__stage{
  position:relative;
  aspect-ratio:1/1;
  display:grid;place-items:center;
  /* Deliberately flat. With preserve-3d here every child shared one 3D space,
     so the K card at translateZ(70px) sorted in front of the payout badge no
     matter where it sat in the DOM — the badge vanished behind the cards as
     they landed. Flat means these children paint in document order, and the
     cards keep their depth in their own context below. */
  perspective:1400px;
  transform-style:flat;
}
.stage__glow{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(227,184,96,.14),transparent 62%);
  filter:blur(24px);
  animation:breathe 9s var(--e-in-out) infinite;
}
/* Owns the perspective now, so the cards still fan in depth relative to each
   other without dragging the rest of the stage into their 3D space. */
.stage__cards{
  position:relative;width:min(360px,62%);aspect-ratio:1;
  perspective:1400px;transform-style:preserve-3d;z-index:1;
}

/* Playing card — porcelain face, Archivo rank, big corner pip. Mirrors
   src/features/game/components/PlayingCard.tsx (74×104, radius 14). */
.pcard{
  position:absolute;
  width:100%;aspect-ratio:74/104;
  background:var(--por);
  border-radius:var(--r-md);
  padding:8% 9%;
  color:#1C1C1F;
  box-shadow:0 5px 14px rgba(0,0,0,.44), 0 26px 56px rgba(0,0,0,.5);
  transform-style:preserve-3d;
}
.pcard__rank{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:30cqw;line-height:.9;letter-spacing:-.02em;
}
.pcard__corner{display:block;font-size:19cqw;line-height:1;margin-top:-.06em}
.pcard__pip{position:absolute;right:9%;bottom:6%;font-size:42cqw;line-height:1}
.pcard--back{
  background:var(--ink-800);
  border:1px solid rgba(252,254,240,.14);
  display:grid;place-items:center;
}
.pcard--back::after{
  content:'';position:absolute;inset:7%;border-radius:9px;
  border:1px solid rgba(252,254,240,.1);
}
.pcard__seal{font-size:34cqw;color:var(--por);opacity:.9;line-height:1}

.stage__cards .pcard{container-type:inline-size}

.stage__card{
  width:58%;
  transition:transform 1.1s var(--e-out);
  will-change:transform;
}
.stage__card--back{
  left:2%;top:20%;
  transform:translate3d(var(--px,0),var(--py,0),-70px) rotate(-16deg);
  opacity:.85;
}
.stage__card--a{
  left:16%;top:12%;
  transform:translate3d(var(--px,0),var(--py,0),20px) rotate(-9deg);
}
.stage__card--k{
  left:40%;top:24%;
  transform:translate3d(var(--px,0),var(--py,0),70px) rotate(8deg);
}

/* deal-in on load — cards fly from the shoe (top-right), like the app */
.js .stage__card{opacity:0}
.js body.is-dealt .stage__card{
  opacity:1;
  animation:dealin 1.15s var(--e-out) backwards;
}
.js body.is-dealt .stage__card--back{animation-delay:.05s}
.js body.is-dealt .stage__card--a{animation-delay:.2s}
.js body.is-dealt .stage__card--k{animation-delay:.36s}
@keyframes dealin{
  from{opacity:0;transform:translate3d(190%,-130%,0) rotate(24deg)}
}

.stage__chip{
  position:absolute;right:4%;bottom:8%;z-index:2;
  width:21%;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.6));
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform 1.1s var(--e-out);
  animation:chipbob 6.5s var(--e-in-out) infinite;
}
.stage__chip img{border-radius:50%}
@keyframes chipbob{
  0%,100%{rotate:-5deg;translate:0 0}
  50%{rotate:5deg;translate:0 -10px}
}

.stage__payout{
  position:absolute;left:6%;bottom:9%;z-index:3;
  padding:12px 18px;border-radius:var(--r-md);
  background:rgba(22,22,24,.72);
  border:1px solid var(--por-hair);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translate3d(var(--px,0),var(--py,0),0);
  transition:transform 1.1s var(--e-out);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.stage__payout em{
  display:block;font-style:normal;font-family:var(--font-display);
  font-size:13px;color:var(--gold);letter-spacing:.01em;
}
.stage__payout span{
  display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--por-mute);font-weight:600;margin-top:2px;
}

/* ── scroll cue ── */
.scrollcue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;
}
.scrollcue__line{
  width:1px;height:52px;background:var(--por-hair);position:relative;overflow:hidden;
}
.scrollcue__line::after{
  content:'';position:absolute;inset:0;background:var(--gold);
  animation:cuerun 2.4s var(--e-in-out) infinite;
}
@keyframes cuerun{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(100%)}
}

@media (max-width:900px){
  .hero{padding-top:104px;min-height:auto}
  .hero__inner{grid-template-columns:1fr;gap:44px}
  .hero__stage{order:-1;width:min(420px,90%);margin-inline:auto;aspect-ratio:4/3}
  .hero__mark{width:min(340px,86%)}
  .scrollcue{display:none}
}

/* ══════════════════ Ticker ══════════════════ */

.ticker{
  position:relative;z-index:1;
  padding:22px 0;
  border-block:1px solid var(--por-ghost);
  background:rgba(17,17,19,.5);
  overflow:hidden;
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker__set{display:flex;align-items:center;gap:22px;padding-right:22px}
.ticker__set b{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(15px,1.9vw,24px);letter-spacing:-.01em;
  color:var(--por);opacity:.9;white-space:nowrap;
}
.ticker__set i{color:var(--gold);font-style:normal;font-size:13px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ══════════════════ Manifesto ══════════════════ */

.manifesto{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(90px,13vw,170px) var(--gut);
}
.manifesto__text{
  margin:0 0 clamp(56px,7vw,96px);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,4.4vw,58px);line-height:1.14;letter-spacing:-.025em;
  color:rgba(252,254,240,.16);
  max-width:21ch;
}
.manifesto__text em{font-style:normal;color:inherit}
.manifesto__text .wd{
  transition:color .5s var(--e-soft),opacity .5s ease;
}
.manifesto__text .wd.on{color:var(--por)}
.manifesto__text em .wd.on{color:var(--gold)}

.manifesto__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(24px,3.4vw,52px);
}
.rule{position:relative;padding-top:26px;border-top:1px solid var(--por-hair)}
.rule__no{
  display:block;font-family:var(--font-mono);font-size:11px;
  color:var(--gold);letter-spacing:.1em;margin-bottom:14px;
}
.rule h3{
  margin:0 0 10px;font-size:18px;font-weight:600;
  letter-spacing:-.01em;color:var(--por);
}
.rule p{margin:0;font-size:14.5px;color:var(--por-mute)}

/* ══════════════════ Deal (playable phone) ══════════════════ */

/* overflow-x:clip contains .phone__glow, which bleeds 20% past the phone on
   each side. Left loose it made the document 36px wider than a 320px screen,
   and because position:fixed sizes to the layout viewport, that widened the
   nav too and carried its right-aligned CTA off the edge of the phone.
   Scoped to this section rather than <html>: overflow on the root element has
   its own side effects, and this is the only thing that bleeds. */
.deal{
  position:relative;z-index:1;overflow-x:clip;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(60px,8vw,110px) var(--gut) clamp(80px,10vw,140px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(36px,6vw,84px);align-items:center;
}
.deal__hintline{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;
}
.deal__hintline b{color:var(--gold);font-weight:700}
.deal__hintline .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 var(--gold-glow);animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(227,184,96,.5)}
  70%{box-shadow:0 0 0 12px rgba(227,184,96,0)}
  100%{box-shadow:0 0 0 0 rgba(227,184,96,0)}
}

.deal__device{display:grid;justify-items:center;gap:16px}
.phone{position:relative;width:min(330px,100%)}
/* Bleeds 20% past the phone on each side, so the section clips it — left
   unclipped it made the document 36px wider than a 320px screen. */
.phone__glow{
  position:absolute;inset:-14% -20%;
  background:radial-gradient(ellipse at 50% 52%,rgba(227,184,96,.13),transparent 66%);
  filter:blur(20px);pointer-events:none;
}
.phone__frame{
  position:relative;
  border-radius:56px;
  padding:11px;
  background:linear-gradient(160deg,#3a3a3f,#141416 42%,#0a0a0c);
  box-shadow:
    0 2px 0 rgba(252,254,240,.07) inset,
    0 40px 80px rgba(0,0,0,.7),
    0 8px 26px rgba(0,0,0,.55);
}
.phone__viewport{
  position:relative;width:100%;aspect-ratio:390/844;
  border-radius:45px;overflow:hidden;background:var(--ink-900);
}
/* The screen is laid out at the app's true 390×844 points and scaled to fit,
   so every size below is the number that ships in the app. */
.phone__device{
  position:absolute;top:0;left:0;width:390px;height:844px;
  transform-origin:0 0;transform:scale(var(--k,.7385));
}
.phone__caption{
  margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;text-align:center;
}

/* ── Screen: ink ground + the single overhead lamp ── */
.scr{
  position:absolute;inset:0;overflow:hidden;
  background:var(--ink-900);
  font-family:var(--font-ui);font-size:15px;line-height:22px;color:var(--por-dim);
  -webkit-font-smoothing:antialiased;
}
.scr__lamp{
  position:absolute;left:195px;top:236px;translate:-50% -50%;
  width:928px;height:928px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(252,254,240,.075) 0%,rgba(252,254,240,0) 70%);
}
.scr__mark{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:240px;line-height:1;color:rgba(252,254,240,.028);
}
.scr__island{
  position:absolute;top:13px;left:50%;translate:-50% 0;
  width:112px;height:33px;border-radius:999px;background:#000;z-index:9;
}
.scr__col{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:67px 24px 190px;
}

/* ── HUD ── */
.hud{display:flex;align-items:center;gap:5px;margin-bottom:8px}
.hud__k{font-weight:500;font-size:12px;color:var(--por-mute)}
.hud__v{font-weight:700;font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.hud__v.bump{animation:hudbump .6s var(--e-out)}
@keyframes hudbump{0%{transform:scale(1.18);color:var(--gold-bright)}100%{transform:scale(1)}}
.hud__chip{
  width:13px;height:13px;border-radius:50%;
  background:var(--por);border:2px solid var(--ink-600);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

/* ── Table personas ── */
.zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.av{display:flex;flex-direction:column;align-items:center;gap:4px}
.av__ring{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink-700);border:1.5px solid var(--por-faint);
  font-size:26px;line-height:1;
  transition:transform .3s var(--e-out),opacity .3s ease;
}
.av--gold .av__ring{border-color:var(--gold)}
.av.is-win .av__ring{animation:avwin .7s var(--e-out)}
.av.is-lose .av__ring{animation:avlose 1.7s ease}
@keyframes avwin{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes avlose{0%{opacity:1}18%{opacity:.45}100%{opacity:1}}
.av__name{
  font-weight:600;font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--por-mute);
}
.speech{
  position:absolute;left:50%;margin-left:40px;top:2px;max-width:168px;
  padding:7px 12px;border-radius:14px;border-bottom-left-radius:4px;
  background:var(--ink-800);border:1px solid var(--por-faint);z-index:5;
  font-weight:500;font-size:12px;line-height:16px;font-style:italic;
  color:var(--por-dim);
  animation:speechin .22s ease both;
}
@keyframes speechin{from{opacity:0}}

/* ── Hand fan ── */
.fan{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:calc(var(--cw) * 1.4054 + 34px);
}
.fan__cards{
  position:relative;
  height:calc(var(--cw) * 1.4054);
  width:calc(var(--cw) + (var(--n,1) - 1) * var(--cw) * .38);
}
.fan__badges{display:flex;align-items:center;gap:6px}
.badge{
  min-width:34px;padding:3px 8px;border-radius:999px;
  background:var(--ink-700);border:1px solid var(--por-ghost);
  text-align:center;font-weight:700;font-size:14px;color:var(--por);
  font-variant-numeric:tabular-nums;
}
.badge.is-active{border-color:var(--por)}
.badge.is-bust{opacity:.55}
.betpill{
  padding:3px 8px;border-radius:999px;
  background:rgba(227,184,96,.14);border:1px solid rgba(227,184,96,.35);
  font-weight:600;font-size:12px;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;
}

/* ── Cards. 74×104 at scale, dealt from the shoe at top-right. ── */
.cslot{
  position:absolute;top:0;left:calc(var(--i) * var(--cw) * .38);
  width:var(--cw);height:calc(var(--cw) * 1.4054);
  perspective:900px;
  animation:cdeal .62s cubic-bezier(.18,.92,.26,1.04) both;
}
@keyframes cdeal{
  from{transform:translate(calc(var(--cw) * 2.2),calc(var(--cw) * -1.55)) rotate(18deg)}
}
/* No `filter` here: it would flatten transform-style and kill the flip. The
   card's shadow rides on the faces instead. */
.c3d{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .52s var(--e-in-out);
}
.c3d.is-up{transform:rotateY(180deg)}
.cface{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 5px 6px rgba(0,0,0,.42);
}
.cface--back{background:var(--ink-800);display:grid;place-items:center}
.cface--back::after{
  content:'';position:absolute;inset:6px;border-radius:9px;
  border:1px solid rgba(252,254,240,.12);
}
.cface--front{
  background:var(--por);color:#1C1C1F;
  transform:rotateY(180deg);
  padding:calc(var(--cw) * .095);
}
.cface--front.is-red{color:#B3554E}
.crank{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:calc(var(--cw) * .30);line-height:.92;letter-spacing:-.01em;
}
.csuit{display:block;font-size:calc(var(--cw) * .19);line-height:1;margin-top:-2px}
.cpip{position:absolute;right:8px;bottom:6px;font-size:calc(var(--cw) * .42);line-height:1}
.cseal{font-size:calc(var(--cw) * .42);color:var(--por);line-height:1;opacity:.92}

/* ── Centre stage ── */
.stage{
  flex:1;min-height:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.stage__slot{display:flex;flex-direction:column;align-items:center;gap:6px}
.prompt{
  margin:0;font-weight:600;font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--por-mute);
}
.book{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:var(--por-ghost);border:1px solid rgba(252,254,240,.14);
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--por-mute);
  animation:speechin .25s ease both;
}
.book b{color:var(--por);font-weight:700}

/* ── Result banner ── */
.rb{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:rbin .5s var(--e-out) both;
}
@keyframes rbin{from{opacity:0;transform:scale(.82)}}
.rb__t{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:30px;line-height:38px;letter-spacing:1px;color:var(--por);white-space:nowrap;
}
.rb--blackjack .rb__t{
  font-size:36px;line-height:45px;color:var(--gold-bright);
  text-shadow:0 0 18px var(--gold-glow);
}
.rb--lose .rb__t{font-size:18px;line-height:24px;color:var(--loss);letter-spacing:3px}
.rb--push .rb__t{font-size:22px;line-height:28px;color:var(--por-dim);letter-spacing:4px}
.rb__net{
  padding:3px 10px;border-radius:999px;border:1px solid;margin-bottom:10px;
  font-weight:700;font-size:10px;font-variant-numeric:tabular-nums;
}
.rb__net--win{background:rgba(227,184,96,.14);border-color:rgba(227,184,96,.4);color:var(--gold-bright)}
.rb__net--lose{background:rgba(252,254,240,.04);border-color:var(--por-ghost);color:var(--loss)}

/* ── Pinned controls ── */
.ctl{position:absolute;left:0;right:0;bottom:48px;padding:0 24px}
.betpanel{display:flex;flex-direction:column;align-items:center;gap:4px}
.readout{display:flex;align-items:baseline;justify-content:center;gap:8px;align-self:stretch}
.readout__units{
  font-family:var(--font-display);font-size:22px;line-height:28px;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.readout.is-allin .readout__units{color:var(--gold-bright)}
.readout__rule{width:1px;height:18px;align-self:center;background:var(--por-ghost)}
.readout__amt{
  font-weight:700;font-size:22px;line-height:28px;color:var(--por);
  font-variant-numeric:tabular-nums;
}
.readout__word{font-size:12px;line-height:16px;color:var(--por-faint)}

.slider{
  align-self:stretch;width:100%;height:40px;
  display:flex;align-items:center;padding:0 14px;
  cursor:grab;touch-action:none;
}
.slider:active{cursor:grabbing}
.slider.is-off{opacity:.45;pointer-events:none}
.slider__track{
  position:relative;flex:1;height:12px;border-radius:999px;
  background:var(--ink-700);border:1px solid var(--por-ghost);
}
.slider__fill{
  position:absolute;left:-1px;top:-1px;width:0;height:12px;
  border-radius:999px;background:var(--gold);
}
.slider.is-hot .slider__fill{background:var(--gold-bright)}
.slider__thumb{
  position:absolute;left:0;top:50%;margin-top:-14px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--por);border:2px solid var(--gold-deep);
  box-shadow:0 2px 5px rgba(0,0,0,.5);
  transform:translateX(-14px);
}
.slider__thumb i{width:8px;height:8px;border-radius:50%;background:var(--gold-deep)}
.slider.is-hot .slider__thumb{background:var(--gold-bright);border-color:var(--por)}
.slider.is-hot .slider__thumb i{background:var(--ink-950)}

.abtn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:12px 24px;
  font-weight:700;font-size:12px;line-height:16px;
  letter-spacing:1.6px;text-transform:uppercase;
  transition:transform .16s var(--e-out),opacity .2s ease;
}
.abtn--lg{padding:16px 32px;font-size:14px;line-height:18px}
.abtn:active{transform:scale(.96)}
.abtn:disabled{opacity:.35;pointer-events:none}
.abtn--primary{background:var(--por);color:var(--ink-900)}
.abtn--ghost{background:var(--por-ghost);color:var(--por);border:1px solid var(--por-ghost)}
.abtn--gold{background:var(--gold);color:var(--ink-950);box-shadow:0 2px 6px rgba(227,184,96,.22)}
.betpanel .abtn{align-self:stretch}
.actbar,.resbar{display:flex;gap:12px}
.actbar .abtn,.resbar .abtn{flex:1}
.phasenote{
  padding:16px 0;text-align:center;
  font-weight:600;font-size:12px;letter-spacing:3px;
  text-transform:uppercase;color:var(--por-faint);
}
.deadstack{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}
.deadstack__t{margin:0;font-family:var(--font-display);font-size:22px;line-height:28px;color:var(--por)}
.deadstack__b{margin:0;max-width:300px;text-align:center;font-size:15px;line-height:22px;color:var(--por-dim)}
.deadstack .abtn{align-self:stretch}

@media (max-width:900px){
  .deal{grid-template-columns:1fr}
  .deal__device{order:-1}
}

/* ══════════════════ Features ══════════════════ */

.features{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(70px,9vw,120px) var(--gut);
}
.fgrid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(40px,5vw,64px);
}
.fcard{
  grid-column:span 2;
  display:flex;flex-direction:column;
  padding:22px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(35,35,38,.62),rgba(17,17,19,.62));
  border:1px solid var(--por-ghost);
  overflow:hidden;position:relative;
  transition:transform .55s var(--e-out),border-color .45s ease,box-shadow .55s ease;
}
.fcard--wide{grid-column:span 3}
.fcard--full{grid-column:span 6}
.fcard::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,0%),rgba(227,184,96,.09),transparent 62%);
  opacity:0;transition:opacity .45s ease;
}
.fcard h3{
  margin:0 0 8px;font-size:17px;font-weight:600;
  letter-spacing:-.012em;color:var(--por);
}
.fcard p{margin:0;font-size:13.8px;line-height:1.58;color:var(--por-mute)}
.fcard__art{
  margin:-6px -6px 20px;
  height:150px;border-radius:var(--r-md);
  background:rgba(12,12,14,.55);
  border:1px solid var(--por-ghost);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:16px;
}

@media (max-width:1000px){
  .fgrid{grid-template-columns:repeat(4,1fr)}
  .fcard,.fcard--wide{grid-column:span 2}
  .fcard--full{grid-column:span 4}
}
@media (max-width:620px){
  .fgrid{grid-template-columns:1fr}
  .fcard,.fcard--wide,.fcard--full{grid-column:span 1}
}

/* — provably fair art — */
.fair{display:grid;gap:11px;font-family:var(--font-mono);font-size:10.5px}
.fair__line{display:flex;gap:10px;align-items:baseline}
.fair__k{
  flex:none;width:64px;color:var(--por-faint);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
}
.fair__v{
  color:var(--por-dim);word-break:break-all;line-height:1.4;
  min-height:1.4em;
}
.fair__line--ok .fair__v{color:var(--gold)}
.fair__v .ok-tick{
  display:inline-block;margin-right:5px;
  animation:tickpop .45s var(--e-out);
}
@keyframes tickpop{from{transform:scale(0) rotate(-40deg);opacity:0}}

/* — leaderboard art — */
.ranks{list-style:none;margin:0;padding:0;display:grid;gap:6px;position:relative}
.ranks li{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;border-radius:var(--r-sm);
  background:var(--por-ghost);
  font-size:11px;
  transition:transform .8s var(--e-out),background .5s ease;
}
.ranks li b{
  width:15px;font-family:var(--font-mono);font-size:10px;
  color:var(--por-faint);font-weight:500;
}
.ranks li span{flex:1;font-weight:600;letter-spacing:.09em;color:var(--por-dim)}
.ranks li em{
  font-style:normal;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;font-size:10.5px;
}
.ranks li.lead{background:rgba(227,184,96,.12)}
.ranks li.lead b{color:var(--gold)}

/* — streak art — */
.streak{display:flex;gap:7px;align-items:center;justify-content:center;margin-bottom:14px}
.streak i{
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--por-hair);
  display:grid;place-items:center;
  font-style:normal;font-size:9px;font-weight:700;color:transparent;
  transition:background .4s var(--e-out),border-color .4s ease,
             color .4s ease,transform .5s var(--e-out),box-shadow .4s ease;
}
.streak i.lit{background:var(--por-ghost);border-color:var(--por-faint)}
.streak i.lit::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--por-dim)}
.streak__seven.lit{
  background:var(--gold)!important;border-color:var(--gold)!important;
  color:var(--ink-950)!important;transform:scale(1.28);
  box-shadow:0 0 22px var(--gold-glow);
  width:26px;height:26px;
}
.streak__seven.lit::after{display:none}
.streak__cap{
  margin:0;text-align:center;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--por-faint);font-weight:600;
}

/* — strategy chart art — */
.chart{
  display:grid;grid-template-columns:repeat(10,1fr);gap:2px;
  margin:0 auto 12px;max-width:152px;width:100%;
}
.chart b{
  aspect-ratio:1;border-radius:2px;background:var(--por-ghost);
  transition:background .35s ease,transform .35s var(--e-out),box-shadow .35s ease;
}
.chart b.h{background:rgba(252,254,240,.2)}
.chart b.s{background:rgba(252,254,240,.34)}
.chart b.d{background:rgba(227,184,96,.42)}
.chart b.on{
  background:var(--gold);transform:scale(1.42);
  box-shadow:0 0 12px var(--gold-glow);position:relative;z-index:2;
}
.chart__cap{
  margin:0;text-align:center;font-size:10px;letter-spacing:.06em;
  color:var(--por-mute);font-variant-numeric:tabular-nums;
}
.chart__cap b{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.1em}

/* — prestige ladder art — */
.ladder{display:flex;align-items:flex-end;gap:3px;height:96px;margin-bottom:10px}
.ladder i{
  flex:1;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--gold),rgba(169,133,63,.35));
  transform:scaleY(0);transform-origin:0 100%;
  transition:transform .9s var(--e-out);
  transition-delay:calc(var(--n,0) * 26ms);
  opacity:.9;
}
.is-in .ladder i{transform:scaleY(1)}
.ladder__scale{
  display:flex;justify-content:space-between;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;
}

/* ══════════════════ Numbers ══════════════════ */

.numbers{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(60px,8vw,110px) var(--gut);
}
/* Eight stats — 4×2 or 2×4, never a ragged hole in the last row. */
.ngrid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--por-ghost);
  border:1px solid var(--por-ghost);border-radius:var(--r-lg);overflow:hidden;
  margin-top:clamp(30px,4vw,50px);
}
.nstat{
  background:var(--ink-900);
  padding:clamp(26px,3.4vw,42px) 24px;
  display:grid;gap:8px;align-content:center;
  transition:background .45s ease;
}
.nstat b{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1;
  letter-spacing:-.025em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.nstat span{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;
}
/* Eight of them stacked one-up is a lot of scrolling — hold two columns
   down to the narrowest phones. */
@media (max-width:1000px){.ngrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:359px){.ngrid{grid-template-columns:1fr}}

/* ══════════════════ World ══════════════════ */

.world{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(60px,8vw,110px) var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(34px,5vw,72px);align-items:center;
}
.world__feed{display:grid;gap:14px}
.feed{
  height:min(58vh,430px);overflow:hidden;position:relative;
  border-radius:var(--r-lg);
  border:1px solid var(--por-ghost);
  background:rgba(17,17,19,.55);
  padding:14px;
  mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);
}
.fitem{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;margin-bottom:8px;
  border-radius:var(--r-md);
  background:var(--por-ghost);
  border:1px solid transparent;
  animation:feedin .6s var(--e-out) backwards;
}
@keyframes feedin{from{opacity:0;transform:translateY(-14px) scale(.97)}}
.fitem__av{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--ink-950);
  background:var(--por-faint);
}
.fitem__txt{flex:1;font-size:12.5px;color:var(--por-mute);line-height:1.35}
.fitem__txt b{color:var(--por);font-weight:600;letter-spacing:.06em}
.fitem__amt{
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.fitem--win .fitem__amt{color:var(--gold)}
.fitem--win .fitem__av{background:var(--gold)}
.fitem--win{border-color:rgba(227,184,96,.16)}
.fitem--lose .fitem__amt{color:var(--loss)}
.feed__cap{
  margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;text-align:center;
}
@media (max-width:900px){.world{grid-template-columns:1fr}}

/* ══════════════════ Get it ══════════════════ */

.get{
  position:relative;z-index:1;
  text-align:center;
  padding:clamp(80px,11vw,150px) var(--gut) clamp(70px,9vw,120px);
  max-width:860px;margin:0 auto;
}
.get::before{
  content:'';position:absolute;left:50%;top:0;translate:-50% 0;
  width:min(90%,760px);height:1px;
  background:linear-gradient(90deg,transparent,var(--por-hair),transparent);
}
.get__mark{width:min(300px,72%);margin:0 auto 32px}
.get__mark img{filter:drop-shadow(0 16px 44px rgba(0,0,0,.6))}
.get__line{
  margin:0 0 16px;font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,6vw,74px);line-height:1;letter-spacing:-.03em;color:var(--por);
}
.get__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:34px 0 26px}
.discord{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--por-faint);
  transition:color .3s ease;
}
.discord i{font-style:normal;transition:transform .35s var(--e-out)}

/* ══════════════════ Footer ══════════════════ */

.foot{
  position:relative;z-index:1;
  border-top:1px solid var(--por-ghost);
  padding:clamp(38px,5vw,60px) calc(var(--gut) + env(safe-area-inset-right,0px))
          calc(44px + env(safe-area-inset-bottom,0px)) calc(var(--gut) + env(safe-area-inset-left,0px));
  max-width:var(--maxw);margin:0 auto;
}
.foot__row{
  display:flex;flex-wrap:wrap;gap:20px 32px;
  align-items:center;justify-content:space-between;
  padding-bottom:26px;
}
.foot__brand{display:flex;align-items:center;gap:9px;color:var(--por);font-weight:700;font-size:14px}
.foot__brand svg{width:16px;height:16px;fill:var(--gold)}
.foot__links{display:flex;flex-wrap:wrap;gap:24px;font-size:13px;color:var(--por-mute)}
.foot__links a{position:relative;transition:color .3s ease}
.foot__links a::after{
  content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--e-out);
}
.foot__fine{
  margin:0 0 14px;max-width:74ch;
  font-size:11.5px;line-height:1.65;color:var(--por-faint);
}
.foot__copy{margin:0;font-size:11.5px;color:var(--por-faint)}

/* ══════════════════ Reduced motion ══════════════════ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal{opacity:1;transform:none}
  .split-word > i{transform:none}
  .curtain{display:none}
  .js .stage__card{opacity:1}
  .manifesto__text .wd{color:var(--por)}
  .manifesto__text em .wd{color:var(--gold)}
  .ladder i{transform:scaleY(1)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legal pages — privacy.html, terms.html, other-info.html
   ═══════════════════════════════════════════════════════════════════════════ */

.legal{
  position:relative;z-index:1;
  max-width:820px;margin:0 auto;
  padding:120px var(--gut) 40px;
}
.legal__back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--por-faint);transition:color .3s ease;
}
.legal__back i{font-style:normal;transition:transform .35s var(--e-out)}

.legal h1{
  margin:0 0 14px;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.025em;
  color:var(--por);
}
.legal__date{
  margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
}
.legal__lede{
  margin:0 0 8px;padding-bottom:36px;
  border-bottom:1px solid var(--por-hair);
  font-size:clamp(15px,1.4vw,17.5px);line-height:1.62;color:var(--por-mute);
}

.legal section{padding:36px 0;border-bottom:1px solid var(--por-ghost)}
.legal section:last-of-type{border-bottom:0}
.legal h2{
  display:flex;align-items:baseline;gap:14px;
  margin:0 0 16px;font-size:clamp(18px,2vw,23px);font-weight:600;
  letter-spacing:-.015em;color:var(--por);
}
.legal h2 i{
  flex:none;font-style:normal;font-family:var(--font-mono);
  font-size:12px;color:var(--gold);letter-spacing:0;
}
.legal h3{
  margin:26px 0 10px;font-size:14.5px;font-weight:600;
  letter-spacing:.01em;color:var(--por-dim);
}
.legal p{margin:0 0 14px;font-size:15px;line-height:1.68;color:var(--por-mute)}
.legal p:last-child{margin-bottom:0}
/* Buttons carry their own foreground — excluding them here keeps the CTA and
   the injected store buttons from being repainted gold-on-gold. */
.legal a:not(.legal__back):not(.btn){color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--por);font-weight:600}
.legal em{color:var(--por-dim);font-style:italic}

.legal ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:9px}
.legal ul li{
  position:relative;padding-left:22px;
  font-size:15px;line-height:1.62;color:var(--por-mute);
}
.legal ul li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--gold);opacity:.8;transform:rotate(45deg);
}

/* Data table — what we hold, where, and who can see it. */
.legal__table{width:100%;overflow-x:auto;margin:0 0 16px}
.legal table{
  width:100%;min-width:520px;border-collapse:collapse;
  font-size:13.5px;
}
.legal th,.legal td{
  text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--por-ghost);vertical-align:top;
}
.legal th{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--por-faint);font-weight:600;
}
.legal td{color:var(--por-mute);line-height:1.55}
.legal td code{
  font-family:var(--font-mono);font-size:12px;color:var(--gold);
}
.legal tr:last-child td{border-bottom:0}

/* Callout — the "we don't do this" list and other emphasis blocks. */
.callout{
  margin:0 0 16px;padding:20px 22px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(35,35,38,.62),rgba(17,17,19,.62));
  border:1px solid var(--por-ghost);
}
.callout--gold{
  background:rgba(227,184,96,.07);
  border-color:rgba(227,184,96,.24);
}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.callout h3{margin-top:0}

@media (max-width:620px){
  .legal{padding-top:100px}
  .legal h2{flex-direction:column;gap:6px}
}

/* Deletion request form on other-info.html */
#deletion-form h3{margin:18px 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--por-faint)}
#deletion-form h3:first-child{margin-top:0}
#deletion-form input[type=text],
#deletion-form input[type=email],
#deletion-form input[type=month],
#deletion-form select,
#deletion-form textarea{
  width:100%;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(12,12,14,.55);border:1px solid var(--por-hair);
  color:var(--por);font:inherit;font-size:14.5px;
  transition:border-color .3s ease,background .3s ease;
}
#deletion-form textarea{resize:vertical;min-height:76px}
#deletion-form :is(input,select,textarea):focus{
  outline:none;border-color:var(--gold);background:rgba(12,12,14,.8);
}
#deletion-form ::placeholder{color:var(--por-faint)}
#deletion-form select{appearance:none;cursor:pointer}
#deletion-form option{background:var(--ink-850);color:var(--por)}
.df-confirm label{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:13.5px;line-height:1.55;color:var(--por-mute);
}
.df-confirm input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:none}
.df-status{min-height:1.2em;font-size:13px;color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════════════════
   Hover effects — pointing devices only.

   iOS synthesises a hover on the first tap of any element carrying a :hover
   style and only activates it on the second. The store buttons change fill on
   hover, so on a phone the first tap merely turned the button gold and the
   second opened TestFlight. Gating every hover rule behind a genuinely
   hover-capable pointer makes touch a single tap again.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover{color:var(--por)}
  .nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .btn:hover::before{transform:translateY(0)}
  .btn--primary:hover{box-shadow:0 12px 34px rgba(227,184,96,.22)}
  .btn--gold:hover{box-shadow:0 14px 38px rgba(227,184,96,.34)}
  .btn--ghost:hover{color:var(--ink-900)}
  .btn--ghost:hover svg{fill:var(--ink-900)}
  .scrollcue:hover{color:var(--por)}
  .ticker:hover .ticker__track{animation-play-state:paused}
  .fcard:hover{
    transform:translateY(-5px);
    border-color:var(--por-hair);
    box-shadow:0 26px 60px rgba(0,0,0,.45);
  }
  .fcard:hover::after{opacity:1}
  .nstat:hover{background:var(--ink-850)}
  .discord:hover{color:var(--por)}
  .discord:hover i{transform:translateX(5px)}
  .foot__links a:hover{color:var(--por)}
  .foot__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .legal__back:hover{color:var(--por)}
  .legal__back:hover i{transform:translateX(-4px)}
  .legal a:not(.legal__back):not(.btn):hover{color:var(--gold-bright)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEO surfaces — the guide hub, the FAQ, the footer sitemap and the article
   furniture the guide pages need on top of the .legal layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Visually hidden, still read by search engines and screen readers. Used for
   the hero h1, whose visible form is the wordmark image. */
.u-sr{
  position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Learn: the guide hub ── */

.learn{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(70px,9vw,120px) var(--gut) clamp(30px,4vw,50px);
}
.lgrid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,22px);margin-top:clamp(34px,4vw,52px);
}
.lcard{
  grid-column:span 2;
  display:flex;flex-direction:column;
  padding:24px 22px 20px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(35,35,38,.62),rgba(17,17,19,.62));
  border:1px solid var(--por-ghost);
  transition:transform .55s var(--e-out),border-color .45s ease,box-shadow .55s ease;
}
/* Five cards on a six-column grid: the last two widen to fill the row. */
.lcard:nth-child(4),.lcard:nth-child(5){grid-column:span 3}
.lcard__k{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.lcard h3{
  margin:0 0 9px;font-size:19px;font-weight:600;
  letter-spacing:-.015em;color:var(--por);
}
.lcard p{margin:0 0 18px;font-size:13.8px;line-height:1.58;color:var(--por-mute)}
.lcard__go{
  margin-top:auto;font-size:12.5px;font-weight:600;color:var(--gold);
  display:inline-flex;align-items:center;gap:7px;
}
.lcard__go i{font-style:normal;transition:transform .35s var(--e-out)}

/* ── FAQ ── */

.faq{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(50px,7vw,90px) var(--gut) clamp(70px,9vw,110px);
}
.qgrid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.4vw,34px) clamp(28px,4vw,64px);
  margin-top:clamp(34px,4vw,52px);
}
.qa h3{
  margin:0 0 10px;font-size:16px;font-weight:600;
  letter-spacing:-.01em;color:var(--por);line-height:1.35;
}
.qa p{margin:0;font-size:14px;line-height:1.66;color:var(--por-mute)}
.qa p strong{color:var(--por);font-weight:600}
.qa a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ── Footer sitemap ── */

.foot__nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 40px;padding-bottom:34px;
}
.foot__h{
  margin:0 0 14px;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--por-faint);
}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot__col a{
  position:relative;font-size:13px;color:var(--por-mute);
  transition:color .3s ease;
}
.foot__nav + .foot__row{border-top:1px solid var(--por-ghost);padding-top:26px}

/* ── Guide-page furniture, layered on .legal ── */

.legal__kicker{
  margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
.legal__toc{
  margin:0 0 8px;padding:20px 22px;border-radius:var(--r-md);
  background:rgba(22,22,24,.6);border:1px solid var(--por-ghost);
}
.legal__toc p{
  margin:0 0 12px!important;font-size:10.5px!important;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--por-faint)!important;
}
.legal__toc ol{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px;
  counter-reset:toc;
}
.legal__toc li{counter-increment:toc;font-size:13.5px;line-height:1.5}
.legal__toc li::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:11px;color:var(--gold);margin-right:9px;
}

/* End-of-article call to action. */
.legal__cta{
  margin:38px 0 0;padding:26px 24px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(35,35,38,.7),rgba(17,17,19,.7));
  border:1px solid var(--por-hair);text-align:center;
}
.legal__cta h2{
  display:block!important;margin:0 0 8px!important;
  font-family:var(--font-display);font-size:clamp(21px,3vw,30px)!important;
  font-weight:400;letter-spacing:-.02em;color:var(--por);text-transform:none!important;
}
.legal__cta p{margin:0 auto 20px!important;max-width:46ch}
.legal__cta .stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Read-next rail. */
.readnext{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;margin-top:32px;
}
.readnext a{
  display:block;padding:18px;border-radius:var(--r-md);
  background:rgba(22,22,24,.6);border:1px solid var(--por-ghost);
  text-decoration:none!important;color:var(--por-mute)!important;
  transition:border-color .4s ease,transform .5s var(--e-out);
}
.readnext b{display:block;margin-bottom:5px;font-size:14.5px;color:var(--por);font-weight:600}
.readnext span{font-size:12.8px;line-height:1.5}

/* ── Basic-strategy chart ──
   Ten dealer up-cards against up to twenty player hands. It has to stay
   readable at 360px, so the whole thing scrolls sideways inside its own box
   rather than squeezing the cells into unreadability. */
.bs{
  width:100%;overflow-x:auto;margin:0 0 10px;
  border-radius:var(--r-md);border:1px solid var(--por-ghost);
  -webkit-overflow-scrolling:touch;
}
.bs table{
  border-collapse:separate;border-spacing:0;
  width:100%;min-width:520px;font-family:var(--font-mono);font-size:12px;
}
.bs th,.bs td{
  padding:7px 4px;text-align:center;border:0;
  border-bottom:1px solid rgba(12,12,14,.85);
  border-right:1px solid rgba(12,12,14,.85);
}
.bs thead th{
  position:sticky;top:0;
  background:var(--ink-800);color:var(--por);
  font-size:11px;font-weight:600;letter-spacing:.04em;
}
.bs tbody th{
  background:var(--ink-800);color:var(--por);
  font-size:11.5px;font-weight:600;text-align:left;padding-left:12px;
  position:sticky;left:0;white-space:nowrap;
}
.bs td{color:var(--ink-950);font-weight:700;letter-spacing:.02em}
.bs .m-h{background:#C9524A;color:#FDF3F1}   /* hit       */
.bs .m-s{background:#E3B860}                  /* stand     */
.bs .m-d{background:#4F8FBF;color:#F2F8FC}   /* double    */
.bs .m-p{background:#5FA76B;color:#F1F9F2}   /* split     */
.bs .m-u{background:#8E8E96;color:#15151A}   /* surrender */

.bs-key{
  display:flex;flex-wrap:wrap;gap:8px 16px;
  margin:0 0 20px;padding:0;list-style:none!important;
}
.bs-key li{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--por-mute);padding-left:0!important;
}
.bs-key li::before{
  content:''!important;position:static!important;
  width:13px;height:13px;border-radius:4px;flex:none;
  background:var(--k,var(--gold))!important;
}

@media (max-width:900px){
  .lgrid{grid-template-columns:1fr}
  .lcard,.lcard:nth-child(4),.lcard:nth-child(5){grid-column:span 1}
  .qgrid{grid-template-columns:1fr}
  .foot__nav{grid-template-columns:1fr;gap:24px}
  .legal__toc ol{grid-template-columns:1fr}
  .readnext{grid-template-columns:1fr}
}

@media (hover:hover) and (pointer:fine){
  .lcard:hover{
    transform:translateY(-5px);
    border-color:var(--por-hair);
    box-shadow:0 26px 60px rgba(0,0,0,.45);
  }
  .lcard:hover .lcard__go i{transform:translateX(5px)}
  .foot__col a:hover{color:var(--por)}
  .readnext a:hover{border-color:var(--por-hair);transform:translateY(-3px)}
}

/* The play page runs the deal section as its own page header, so it needs to
   clear the fixed nav, and the article beneath it must not re-add the .legal
   top padding on top of the section's bottom padding. */
.deal--page{padding-top:clamp(104px,11vw,140px)}
.deal--page .legal__back{margin-bottom:18px}
.legal--flush{padding-top:0}
.legal--flush > section:first-of-type{padding-top:0}

/* Glossary tables put the term in a row header, so it needs to read as a term
   rather than as a column label. */
.gloss table{min-width:0}
.gloss th{
  width:30%;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--por);font-weight:600;
}
.gloss tr:last-child th{border-bottom:0}
.gloss td a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

@media (max-width:600px){
  /* Stacked, so a 30/70 split doesn't crush the definition at 360px. */
  .gloss table,.gloss tbody,.gloss tr,.gloss th,.gloss td{display:block;width:auto}
  .gloss tr{padding:10px 0;border-bottom:1px solid var(--por-ghost)}
  .gloss tr:last-child{border-bottom:0}
  .gloss th,.gloss td{border-bottom:0;padding:0}
  .gloss th{margin-bottom:3px}
}
/* The play page's h1 is longer than the display h2s it borrows its style from,
   so it needs a step down to stay inside three lines. */
.deal--page h1.h2{font-size:clamp(28px,3.7vw,46px)}

/* On the homepage the phone jumps above the copy on mobile — the section is a
   demo and the demo should lead. On the play page the copy carries the h1 and
   the "no download, no money" reassurance a search visitor arrives needing, so
   it keeps its place above the table. */
@media (max-width:900px){
  .deal--page .deal__device{order:0}
}

/* Fixed layout so the hand column can't grow to swallow half a phone screen —
   the ten dealer columns then split what's left evenly. */
.bs table{table-layout:fixed}
.bs thead th:first-child,.bs tbody th{width:104px}

@media (max-width:600px){
  .bs table{min-width:452px}
  .bs thead th:first-child,.bs tbody th{width:92px;padding-left:9px;font-size:11px}
  .bs th,.bs td{padding-left:2px;padding-right:2px}
}