/* Stakes landing page (index.html): the sections only. The shared foundation (type, tokens,
   chamfer, buttons, frame, nav, footer, card face) is base.css, linked first.
   Ported from the approved concept D mock. */
/* ========== HERO ========== */
.hero { position:relative; min-height:max(660px, var(--hero-h, 100svh)); overflow:hidden; background:#000; display:flex; }
.hero-media { position:absolute; inset:0; overflow:hidden; }
.hero-par { position:absolute; inset:-8% 0; will-change:transform; }
.bf { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform-origin:62% 55%;
  animation:bfCycle 30s linear infinite; }
.bf:nth-child(1) { animation-delay:-1s; opacity:1; }
.bf:nth-child(2) { animation-delay:9s; }
.bf:nth-child(3) { animation-delay:19s; }
@keyframes bfCycle {
  0% { opacity:0; transform:scale(1.06); }
  5% { opacity:1; }
  33% { opacity:1; }
  40% { opacity:0; transform:scale(1.2); }
  100% { opacity:0; transform:scale(1.2); }
}
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-fog { position:absolute; inset:-10% -30%; pointer-events:none; opacity:.55; mix-blend-mode:screen;
  background:
    radial-gradient(40% 30% at 30% 70%, rgba(255,120,60,.18), transparent 70%),
    radial-gradient(35% 25% at 75% 40%, rgba(120,160,255,.10), transparent 70%);
  animation:fog 26s ease-in-out infinite alternate; }
@keyframes fog { from { transform:translateX(-6%); } to { transform:translateX(6%); } }
.hero-grade { position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,5,8,.78) 0%, rgba(4,5,8,0) 22%),
    linear-gradient(0deg, var(--ink) 0%, rgba(6,7,10,.6) 16%, rgba(6,7,10,0) 38%),
    linear-gradient(90deg, rgba(4,5,8,.9) 0%, rgba(4,5,8,.62) 34%, rgba(4,5,8,.1) 62%, rgba(4,5,8,.4) 100%); }
.hero-ember-glow { position:absolute; inset:auto 0 0; height:55%; pointer-events:none;
  background:radial-gradient(60% 70% at 68% 100%, rgba(255,105,35,.28), transparent 70%); animation:flicker 5s ease-in-out infinite; }
@keyframes flicker { 0%,100% { opacity:.75; } 30% { opacity:1; } 55% { opacity:.6; } 80% { opacity:.95; } }
.embers { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-inner {
  position:relative; z-index:2; width:100%; max-width:1440px; margin:0 auto;
  padding:calc(var(--nav-h) + 30px) var(--gutter) 110px;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; gap:clamp(20px,3vw,48px);
}
.hero-copy { position:relative; }
/* The lede's own ground: a dark pool that belongs to the copy block, so the text's legibility
   never depends on which battlefield happens to be behind it. */
.hero-copy::before { content:''; position:absolute; inset:-14% -30% -14% -40%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(4,5,8,.82), rgba(4,5,8,.55) 60%, transparent); }
/* The hero title is the full logo (the two stakes and the STAKES wordmark), drawn from base.css's
   `--brand-lockup`, flat and in the brand's own colours; its name for a reader is the `.vh` text. */
.logo { position:relative; transform-origin:0 50%; width:min(100%,clamp(290px,46vw,640px)); filter:drop-shadow(0 14px 40px rgba(0,0,0,.85)); }
.logo .brand-lockup { width:100%; }
.logo-rule { display:flex; align-items:center; gap:10px; margin:clamp(14px,1.8vw,22px) 0 clamp(16px,2vw,24px); color:var(--gold); max-width:560px; }
.logo-rule::before { content:''; height:1px; flex:1; background:linear-gradient(90deg,var(--gold),transparent); }
.logo-rule::after { content:''; height:1px; flex:3; background:linear-gradient(90deg,var(--gold-dim),transparent); }
.logo-rule i { order:-1; width:8px; height:8px; transform:rotate(45deg); background:var(--gold); flex:none; }
/* The lede sits on its own scrim — a hard-edged plate with a gold rule down its left side
   that fades out to the right — so its contrast is a property of the copy block, not of
   whichever battlefield is cycling behind it. */
.lede { position:relative; max-width:34em; padding:14px 22px 16px 20px; font-size:clamp(1.02rem,1.2vw,1.18rem); font-weight:500; line-height:1.6;
  color:#fbf4e2; text-wrap:pretty; text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.6);
  background:linear-gradient(90deg, rgba(4,5,8,.8) 0%, rgba(4,5,8,.66) 62%, rgba(4,5,8,.2) 100%);
  box-shadow:inset 2px 0 0 var(--gold-mid); }
.lede strong { font-weight:700; color:var(--gold-hi); }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:clamp(24px,3vw,36px); }
.hero-plat { font:800 .7rem/1.4 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--faded); display:flex; align-items:center; gap:10px; }
.hero-plat b { color:var(--gold-hi); font-weight:800; }
.hero-plat i { width:5px; height:5px; background:var(--gold-dim); transform:rotate(45deg); }

.hero-stage { position:relative; height:clamp(380px,40vw,600px); }
.hero-stage .slot { position:absolute; left:50%; top:50%; width:var(--w); margin-left:calc(var(--w) / -2); margin-top:calc(var(--w) * -.75); transform:translate(var(--x),var(--y)) rotate(var(--r)); }
/* A podium: the centre card stands high and in front; the flanking cards sit low and wide
   enough that its foot ends above their name rows (with room for the idle bob). */
.hero-stage .slot-l { --w:clamp(150px,15vw,236px); --x:-96%; --y:29%; --r:-9deg; z-index:1; }
.hero-stage .slot-r { --w:clamp(150px,15vw,236px); --x:95%; --y:30%; --r:8deg; z-index:1; }
/* the centre card stands a step left of the middle and high enough that its foot, at the low point
   of its bob, stays clear of the right card's Gold tab and the keyword chips at its foot-left */
.hero-stage .slot-c { --w:clamp(176px,17.6vw,276px); --x:-5%; --y:-15%; --r:0deg; z-index:2; }
.intro { animation:dealIn .95s var(--ease-out) both; }
.slot-l .intro { --from:translate(90vw,-30px) rotate(40deg); animation-delay:.5s; }
.slot-r .intro { --from:translate(70vw,40px) rotate(-30deg); animation-delay:.72s; }
@keyframes dealIn { from { transform:var(--from); opacity:0; } 60% { opacity:1; } to { transform:none; opacity:1; } }
/* The slam stays crisp and fully opaque the whole way down: the card is hidden only while it
   waits for its cue (visibility, not opacity), then drops from "above the camera". The weight
   comes from scale, a shadow that tightens as the card nears the table, the camera kick, the
   flash line and the ember burst — never from blurring or fading the card itself. Every
   keyframe's filter is the same drop-shadow + brightness pair so it interpolates smoothly. */
.slot-c .intro { animation:slam .72s cubic-bezier(.55,0,.75,.4) 1.25s both; }
@keyframes slamPhone {
  0% { visibility:hidden; transform:scale(1.2) rotate(-2deg); filter:drop-shadow(0 40px 20px rgba(0,0,0,.3)) brightness(1.06); }
  1% { visibility:visible; }
  52% { transform:translateY(4px) scale(.96) rotate(0); filter:drop-shadow(0 4px 5px rgba(0,0,0,.95)) brightness(1.2); animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  70% { transform:translateY(-3px) scale(1.01); filter:drop-shadow(0 12px 12px rgba(0,0,0,.6)) brightness(1.05); }
  100% { transform:none; filter:none; }
}
@keyframes slam {
  0% { visibility:hidden; transform:translateY(-120px) scale(1.7) rotate(-6deg); filter:drop-shadow(0 90px 30px rgba(0,0,0,.3)) brightness(1.06); }
  1% { visibility:visible; }
  52% { transform:translateY(6px) scale(.95) rotate(0); filter:drop-shadow(0 4px 5px rgba(0,0,0,.95)) brightness(1.2); animation-timing-function:cubic-bezier(.2,.7,.3,1); }
  70% { transform:translateY(-6px) scale(1.015); filter:drop-shadow(0 12px 12px rgba(0,0,0,.6)) brightness(1.05); }
  100% { transform:none; filter:none; }
}
.float { animation:bob 6s ease-in-out infinite; }
.slot-l .float { animation-delay:-2s; } .slot-r .float { animation-delay:-4s; animation-duration:7s; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.slam-flash { position:absolute; left:calc(50% - clamp(176px,17.6vw,276px) * .05); top:calc(50% + clamp(176px,17.6vw,276px) * .525); width:clamp(260px,34vw,560px); height:3px; margin-left:calc(clamp(260px,34vw,560px) / -2);
  background:linear-gradient(90deg,transparent,#fff2c8,transparent); opacity:0; pointer-events:none; z-index:3;
  box-shadow:0 0 24px 6px rgba(255,170,80,.55); }
.slam-glow { position:absolute; left:50%; top:50%; width:clamp(300px,36vw,620px); height:clamp(160px,18vw,300px); transform:translate(-50%,10%);
  background:radial-gradient(closest-side, rgba(255,130,50,.32), transparent); pointer-events:none; opacity:.0; transition:opacity 1.2s; }
.hero.impacted .slam-glow { opacity:1; }
.hero.impacted .slam-flash { animation:flash .55s ease-out; }
@keyframes flash { 0% { opacity:1; transform:scaleX(.2); } 100% { opacity:0; transform:scaleX(1.4); } }
.hero.shake .hero-inner, .hero.shake .hero-par { animation:shake .42s linear; }
@keyframes shake {
  0% { transform:translate(0,0); } 15% { transform:translate(-5px,4px); } 30% { transform:translate(5px,-3px); }
  45% { transform:translate(-3px,-2px); } 60% { transform:translate(3px,2px); } 80% { transform:translate(-1px,1px); } 100% { transform:none; }
}
.hero-copy > * { animation:rise .9s var(--ease-out) both; }
.hero-copy > .logo { animation-name:logoIn; animation-duration:1.4s; animation-delay:.15s; }
.hero-copy > .logo-rule { animation-delay:.2s; }
/* the lede is the page's one paragraph that must be read: it is fully up by 0.65s */
.hero-copy > .lede { animation-delay:.2s; animation-duration:.45s; }
.hero-copy > .hero-actions { animation-delay:.45s; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes logoIn { from { opacity:0; transform:scale(1.1); } to { opacity:1; transform:none; } }
.hero-media { animation:fromBlack 2.2s ease-out both; }
@keyframes fromBlack { from { opacity:0; transform:scale(1.08); } to { opacity:1; transform:none; } }
.hero-ph { position:absolute; z-index:3; left:var(--gutter); bottom:22px; }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;
  font:800 .62rem/1 var(--ui); letter-spacing:.3em; text-transform:uppercase; color:var(--faded); }
.scroll-cue i { width:12px; height:12px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform:translateY(-3px) rotate(45deg); opacity:.5; } 50% { transform:translateY(4px) rotate(45deg); opacity:1; } }


/* ========== WHY PLAY ==========
   Seven reasons, each its own block in the page's flow, each with its own composition and its
   own kind of picture. A block's copy never moves and sits on a ground of its own; only the
   block's visual moves, inside its own box, on that block's own scroll clock (one rAF-throttled
   scroll handler, transforms and opacity only). The resting CSS of every visual is its END
   state, which is also what reduced motion is drawn at, so a visitor who stops anywhere, or
   asks for no motion, gets a finished picture. */
.why { position:relative; padding:clamp(52px,5.4vw,84px) 0 0; background:var(--ink); }
.creed-quote { text-align:center; padding:0 var(--gutter); margin:0 auto clamp(14px,1.6vw,24px); max-width:1100px;
  font:800 clamp(1.9rem,4.6vw,3.8rem)/1 var(--display); letter-spacing:.01em; text-transform:uppercase; color:var(--parchment); text-wrap:balance; }
.creed-quote em { display:block; font-style:normal; margin-top:.14em; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)); }

.rb { position:relative; isolation:isolate; overflow:clip; }
.rb-wrap { max-width:var(--wrap); margin:0 auto; padding:clamp(28px,2.8vw,40px) var(--gutter); }
.rb-copy { position:relative; }
.rb-copy > :not(.grain-layer) { position:relative; z-index:1; }
.rb-copy h3 { font:800 clamp(1.85rem,3.3vw,2.9rem)/1 var(--display); letter-spacing:.012em; text-transform:uppercase; color:var(--parchment); text-wrap:balance; }
.rb-copy .bar { display:block; width:72px; height:3px; margin:16px 0; background:linear-gradient(90deg,var(--gold),transparent); }
.rb-copy p { font-size:clamp(1rem,1.12vw,1.1rem); line-height:1.66; color:var(--text); text-wrap:pretty; }
.rb-centre .bar { width:140px; margin-inline:auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.rb-plate { --cut:16px; --fill:rgba(7,8,11,.95); padding:clamp(24px,2.8vw,40px) clamp(22px,3vw,44px); }
.rb-vis { position:relative; }

/* ---- no packs: a sealed pack drops in, charges, tears open, and the whole library streams out ----
   A timed sequence (Web Animations: transforms and opacity only), fired once when the visual is well
   into view and replayed by a click or a tap on it. Its resting CSS is the final three-card fan.
   Temporary cards fly outward together, then fall away (landing.js, packSpread). The pack,
   the card backs and every burst of light are the pieces gone at rest: they show only while the
   sequence runs (.live), so reduced motion and a finished run both show the spread alone. */
.rb-packs { background:radial-gradient(56% 70% at 74% 60%, rgba(255,140,50,.15), transparent 70%), var(--ink); }
.rb-packs .rb-wrap { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(24px,4vw,64px); align-items:center; }
.pk { --mx:50%; --my:46%; --pw:150px; height:clamp(440px,46vw,680px); overflow:clip; }
.js-motion .pk { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pk-stage { position:absolute; inset:0; }
.pk-rays, .pk-glow, .pk-leak, .pk-sparks, .pk-flash, .pk-sheen { pointer-events:none; }
.pk-rays { --rs:min(150%, 900px); position:absolute; left:var(--mx); top:var(--my); width:var(--rs); aspect-ratio:1; translate:-50% -50%; opacity:.4;
  background:repeating-conic-gradient(from 0deg, rgba(255,205,120,.26) 0deg 5deg, transparent 5deg 15deg); visibility:hidden;
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 72%); mask:radial-gradient(closest-side,#000 8%,transparent 72%); }
.pk-glow { position:absolute; left:var(--mx); top:var(--my); width:min(100%,680px); aspect-ratio:1.5; translate:-50% -50%; opacity:.7;
  background:radial-gradient(closest-side, rgba(255,214,140,.42), rgba(255,140,50,.14) 55%, transparent); }
.pk-cards { position:absolute; inset:0; z-index:2; }
.pk-c { position:absolute; left:0; top:0; width:var(--cw,60px); height:calc(var(--cw,60px) * 1.5); transform:rotate(var(--angle,0deg)); transform-origin:50% 50%; }
.pk-face { position:absolute; inset:0; }
.pk-face .card { width:146px; transform-origin:0 0; transform:scale(var(--fs,.4)); box-shadow:0 0 0 1px rgba(255,232,180,.24), 0 12px 24px rgba(0,0,0,.7); }
/* The temporary burst cards disappear when the three foreground faces settle. */
.pk-burst { visibility:hidden; opacity:0; }
.pk.live .pk-burst { visibility:visible; }
.pk-front .pk-face .card { width:100%; transform:none; box-shadow:0 0 0 1px rgba(255,232,180,.34), 0 16px 34px rgba(0,0,0,.8); }
/* The game's charcoal stock and angular frame, with the shared mark printed in warm white. */
.pk-back { position:absolute; inset:0; display:grid; place-items:center; border-radius:calc(9px * var(--fs,.4)); visibility:hidden;
  background:url(assets/textures/card-back.png) center/100% 100% no-repeat;
  box-shadow:0 8px 18px rgba(0,0,0,.6); }
.pk-back .brand-mark, .sc-back .brand-mark { position:relative; width:48%; height:auto; filter:grayscale(1) brightness(0) invert(.96); }
/* the rim of light a card throws as it lands: around its edge only, so the face stays crisp */
.pk-hit { position:absolute; inset:-1px; pointer-events:none; visibility:hidden; opacity:0; border-radius:calc(9px * var(--fs,.4));
  box-shadow:0 0 0 1.5px rgba(255,236,190,.95), 0 0 14px 2px rgba(255,186,90,.55); }
/* the pack, standing with its seam (the crimp's foot) on the mouth point */
.pk-pack { position:absolute; z-index:3; left:calc(var(--mx) - var(--pw) / 2); top:calc(var(--my) - var(--pw) * .2); width:var(--pw); aspect-ratio:1/1.55;
  transform-origin:50% 100%; visibility:hidden; filter:drop-shadow(0 18px 22px rgba(0,0,0,.75)); }
.pk-top, .pk-body { position:absolute; left:0; right:0; }
/* the crimp torn off along a zigzag; the body below carries the matching teeth */
.pk-top { top:0; height:18%; transform-origin:20% 100%;
  background:repeating-linear-gradient(90deg, rgba(30,19,6,.38) 0 1px, rgba(255,243,200,.18) 1px 2px, transparent 2px 4px),
    linear-gradient(180deg,#b18742,#f3df9d 12%,#7c5826 24%,#d9b76a 42%,#a7803d 74%,#fff1bf 80%,#735026);
  clip-path:polygon(5% 0, 95% 0, 100% 24%, 100% 70%, 93.75% 100%, 87.5% 70%, 81.25% 100%, 75% 70%, 68.75% 100%, 62.5% 70%, 56.25% 100%, 50% 70%, 43.75% 100%, 37.5% 70%, 31.25% 100%, 25% 70%, 18.75% 100%, 12.5% 70%, 6.25% 100%, 0 70%, 0 24%); }
.pk-body { --cut:8px; top:13%; bottom:0; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(100deg,rgba(0,0,0,.8),transparent 7%,rgba(255,235,180,.14) 9%,transparent 13%,transparent 86%,rgba(255,235,180,.19) 91%,rgba(0,0,0,.65) 98%),
    linear-gradient(135deg,transparent 28%,rgba(255,238,191,.09) 29%,transparent 30%,transparent 67%,rgba(0,0,0,.4) 68%,transparent 72%),
    url(assets/textures/card-back.png) center/100% 100% no-repeat;
  clip-path:polygon(0 4.6%, 6.25% 0, 12.5% 4.6%, 18.75% 0, 25% 4.6%, 31.25% 0, 37.5% 4.6%, 43.75% 0, 50% 4.6%, 56.25% 0, 62.5% 4.6%, 68.75% 0, 75% 4.6%, 81.25% 0, 87.5% 4.6%, 93.75% 0, 100% 4.6%, 100% 93%, 92% 100%, 8% 100%, 0 93%); }
.pk-body::before { content:''; position:absolute; inset:8% 8% 10%; border:1px solid rgba(234,201,129,.48); box-shadow:inset 0 0 0 3px rgba(6,7,10,.55),inset 0 0 0 4px rgba(216,171,85,.15); clip-path:var(--oct); }
.pk-body::after { content:''; position:absolute; left:0; right:0; bottom:0; height:7%;
  background:repeating-linear-gradient(90deg,rgba(30,19,6,.4) 0 1px,transparent 1px 4px),linear-gradient(180deg,#80602d,#e6cb88 30%,#a48242 70%,#f2dfa7); }
.pk-mark { position:relative; z-index:1; width:auto; height:40%; margin-bottom:2%;
  filter:grayscale(1) brightness(0) invert(.88) sepia(.5) saturate(1.7) drop-shadow(0 1px 0 #342715) drop-shadow(0 0 12px rgba(216,171,85,.16)); }
/* the foil sheen that sweeps the pack as it settles */
.pk-foil { position:absolute; z-index:2; top:-10%; bottom:-10%; left:0; width:70%; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(105deg, transparent 20%, rgba(255,250,232,.85) 50%, transparent 80%); }
/* light leaking from the seam as the pack charges, and the beams it throws up */
.pk-seam { position:absolute; z-index:3; left:3%; right:3%; top:calc(13% - 2px); height:4px; opacity:0;
  background:linear-gradient(90deg,transparent,#fff3cf 18%,#fff 50%,#fff3cf 82%,transparent); box-shadow:0 0 16px 5px rgba(255,190,90,.8); }
.pk-leak { position:absolute; z-index:2; left:calc(var(--mx) - var(--pw) * .9); width:calc(var(--pw) * 1.8); top:calc(var(--my) - var(--pw) * 1.6); height:calc(var(--pw) * 1.6);
  transform-origin:50% 100%; visibility:hidden; opacity:0; clip-path:polygon(50% 100%, 0 0, 100% 0);
  background:repeating-conic-gradient(from -30deg at 50% 100%, rgba(255,232,176,.55) 0deg 1.6deg, transparent 1.6deg 6deg);
  -webkit-mask:linear-gradient(0deg,#000 10%,transparent 92%); mask:linear-gradient(0deg,#000 10%,transparent 92%); }
.pk-sparks { position:absolute; inset:0; z-index:4; }
.pk-spark { position:absolute; left:var(--mx); top:var(--my); width:3px; height:20px; margin:-10px 0 0 -1.5px; visibility:hidden; opacity:0;
  background:linear-gradient(180deg,#fff 0%,#ffd98a 35%,rgba(255,140,50,0) 100%); }
.pk-flash { position:absolute; inset:0; z-index:5; visibility:hidden; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(70% 55% at var(--mx) var(--my), rgba(255,252,240,.95), rgba(255,196,110,.55) 40%, rgba(255,140,50,0) 78%); }
.pk-sheen { position:absolute; inset:0; z-index:6; overflow:hidden; visibility:hidden; }
.pk-sheen i { position:absolute; top:-10%; bottom:-10%; left:0; width:10%; opacity:0; mix-blend-mode:screen; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 30%, rgba(255,246,220,.42) 50%, transparent 70%); }
.pk.live .pk-pack, .pk.live .pk-rays, .pk.live .pk-back, .pk.live .pk-hit, .pk.live .pk-leak, .pk.live .pk-spark, .pk.live .pk-flash, .pk.live .pk-sheen { visibility:visible; }
/* waiting for its cue: nothing on the table yet but a low warm light */
.pk.armed .pk-c { visibility:hidden; }
.pk.armed .pk-glow { opacity:.3; }

/* ---- a MOBA with the chores taken out: no picture, the two lists. What is taken out, struck
   through and dimmed, faces what survives, lit gold. As the block arrives the strikes draw one
   by one and the survivors light up; every word stays readable throughout. ---- */
.rb-moba { background:radial-gradient(46% 60% at 72% 74%, rgba(255,150,60,.1), transparent 70%), var(--ink); }
.rb-moba .rb-copy { max-width:52em; margin:0 auto; text-align:center; }
.rb-moba .rb-wrap:first-child { padding-bottom:clamp(20px,2.4vw,34px); }
.rb-moba .mb-wrap { padding-top:0; }
.mb { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(22px,2.6vw,44px); max-width:1240px; margin:0 auto; }
/* each side is a size container, so a list's type can fall back to a share of its width (cqw) before the script has fitted it */
.mb-side { display:flex; flex-direction:column; min-width:0; container-type:inline-size; }
.mb-out { align-items:flex-end; text-align:right; }
.mb-label { display:block; font:800 .74rem/1 var(--ui); letter-spacing:.26em; text-transform:uppercase; padding-bottom:12px; margin-bottom:clamp(12px,1.4vw,20px); border-bottom:1px solid; }
.mb-out .mb-label { color:#e08a78; border-color:rgba(195,52,60,.5); }
.mb-keep .mb-label { color:var(--gold-hi); border-color:var(--line); }
.mb-list { display:flex; flex-direction:column; gap:clamp(5px,.6vw,9px); }
.mb-out .mb-list { align-items:flex-end; }
.mb-keep .mb-list { align-items:flex-start; }
/* A chore is crossed out by a real bar: the ::after of the item, a red line through the middle of
   the capitals, over the letters, drawn left to right by scaling it to --k (landing.js sets --k as the
   block scrolls). It is plain painting (no text-clipped background), so Chrome and Firefox draw the
   same bar. The word is one line (nowrap), so one bar crosses it whole, and the dark edge on the item
   keeps the bar and every letter crisp against the ink, so the word reads straight through the strike.
   tools/website_moba_strike.js holds it on rendered pixels in both engines. */
.mb-chore { position:relative; white-space:nowrap; font:800 min(clamp(1.3rem,2.05vw,1.95rem), var(--mb-fit, 99rem))/1.1 var(--display); letter-spacing:.02em; text-transform:uppercase; color:var(--faded); opacity:.8; --k:1;
  filter:drop-shadow(0 0 1px rgba(6,7,10,.95)) drop-shadow(0 1px 1px rgba(6,7,10,.7)); }
.mb-chore::after { content:''; position:absolute; left:-6px; right:-6px; top:50%; height:3px; margin-top:-1.5px; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(var(--k));
  background:linear-gradient(90deg,#d23a40,#ff6a50); box-shadow:0 0 8px rgba(255,80,60,.5); }
/* Every item of a list is one line, never wrapped: the list's type is the design size (the clamp) or, when the
   longest item of the list would not fit its column at that size, the size at which it does (--mb-fit,
   set by landing.js from the measured text in the language on screen; 5.8cqw is the English fit before
   it has run). One size per list, so the items keep their proportions to one another. */
.mb-sv { position:relative; white-space:nowrap; font:900 min(clamp(1.55rem,2.6vw,2.5rem), var(--mb-fit, 5.8cqw))/1.04 var(--display); letter-spacing:.015em; text-transform:uppercase; color:var(--parchment); }
/* the lit survivor: a crisp cast-gold fill (bright top, warm body, no dark band through the glyphs)
   with a tight dark edge under it, so every letter stays sharp against the ink */
.mb-gold { position:absolute; inset:0; color:transparent;
  background:linear-gradient(180deg,#fff9e7 0%,#ffe8a6 30%,#f3c55e 64%,#e6ab45 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(20,8,2,.85)) drop-shadow(0 0 5px rgba(238,174,64,.24)); }
.mb-div { position:relative; width:2px; background:linear-gradient(180deg,transparent,var(--gold) 14%,var(--gold) 86%,transparent); opacity:.8; }
.mb-div i { position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 12px rgba(255,190,90,.6); }
@media (min-width:1000px) {
  .mb-list > li { min-height:var(--mb-row,44px); display:flex; align-items:center; }
  .mb-gold { display:flex; align-items:center; }
}

/* ---- the board changes: one board of four Locations, three Lanes and the Jungle, as in a match.
   The Jungle's place in the row is random each match, so as the art swaps the Jungle moves too.
   The block scrolls past like any other: as it passes, each Location swaps its art in turn, left
   to right, and while the board is on screen and the page is still the swaps carry on, slowly. ---- */
.rb-board { background:linear-gradient(180deg,var(--ink),#0a0c12 30%,#0a0c12 70%,var(--ink)); }
.bd-in { max-width:var(--wrap); margin:0 auto; padding:clamp(28px,2.8vw,40px) var(--gutter); display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(18px,2.2vw,32px); }
/* the copy reads across the top in two columns and the board stands under it */
.rb-board .rb-copy { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(24px,4vw,64px); align-items:center; }
.rb-board .rb-copy h3 { grid-column:1; grid-row:1; align-self:end; }
.rb-board .rb-copy .bar { grid-column:1; grid-row:2; align-self:start; }
.rb-board .rb-copy p { grid-column:2; grid-row:1 / span 2; }
.bd-lanes { width:min(100%, 1060px); margin-inline:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1vw,14px); }
.bd-loc { --cut:12px; position:relative; aspect-ratio:3/5; clip-path:var(--oct); background:var(--metal-edge); }
/* The Jungle's green rim switches position on the shared formation beat. */
.bd-jframe { position:absolute; inset:0; opacity:0; visibility:hidden; background:linear-gradient(135deg,#bfe8a8 0%,#3f6e34 28%,#9fd38a 52%,#2c4f26 76%,#a8d890 100%); }
.bd-loc.is-jungle .bd-jframe { opacity:1; visibility:visible; }
.bd-art { position:absolute; inset:2px; clip-path:var(--oct); overflow:hidden; background:#0b0d12; }
.bd-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; visibility:hidden; }
.bd-art img:first-of-type { opacity:1; visibility:visible; }
.bd-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,7,10,.6) 0%, transparent 30%, transparent 72%, rgba(6,7,10,.45)); }
.bd-sweep { position:absolute; z-index:1; left:0; right:0; top:0; height:30%; pointer-events:none; opacity:0; visibility:hidden;
  background:linear-gradient(180deg,transparent,rgba(255,226,160,.6) 50%,transparent); mix-blend-mode:screen; }
.bd-tag, .sc-zone, .sc-side-tag { position:absolute; z-index:2; font:800 .62rem/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi);
  background:rgba(6,7,10,.88); padding:6px 9px; border:1px solid var(--line); }
.bd-tag { top:10px; left:10px; }
.bd-loc.is-jungle .bd-tag { color:#b5ecbb; border-color:rgba(120,200,130,.6); }

/* ---- bias against degenerate scaling: two effects side by side. Doubling, which Stakes leaves
   out: a card hidden in a hand whose Power quietly snowballs out of the opponent's reach, then is
   struck out. Symmetric, which Stakes favours: Phoenix is played into a Lane and its Burn reaches
   every unit there, both sides at once and in the open. ---- */
.rb-scale { background:var(--ink); }
.sc-bg { position:absolute; inset:0; z-index:-1; display:flex; }
.sc-bg img { width:50%; height:100%; object-fit:cover; object-position:22% 50%; filter:saturate(.9) brightness(.5); }
.sc-bg img + img { transform:scaleX(-1); }
.sc-bg::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink),rgba(6,7,10,.3) 16%,rgba(6,7,10,.3) 84%,var(--ink)), linear-gradient(90deg,rgba(6,7,10,.3),rgba(6,7,10,.75) 50%,rgba(6,7,10,.3)); }
.sc-in { max-width:var(--wrap); margin:0 auto; padding:clamp(28px,2.8vw,40px) var(--gutter); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,500px) minmax(0,1fr); grid-template-areas:"a c b"; gap:clamp(16px,2.6vw,40px); align-items:center; }
.sc-dbl { grid-area:a; } .sc-sym { grid-area:b; }
.rb-scale .rb-copy { grid-area:c; text-align:center; }
.sc-panel { --u:clamp(80px,7.4vw,108px); --pu:var(--u); display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; align-self:stretch; }
.sc-h { position:relative; font:900 clamp(1.4rem,2vw,1.9rem)/1 var(--display); letter-spacing:.06em; text-transform:uppercase; }
.sc-dbl .sc-h { color:#d9c9b0; }
.sc-sym .sc-h { background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.sc-hx { position:absolute; left:-6px; right:-6px; top:50%; height:3px; margin-top:-1.5px; transform-origin:0 50%; background:linear-gradient(90deg,#c3343c,#ff6a50); box-shadow:0 0 8px rgba(255,80,60,.5); }
/* the hand: card backs in the dark, the doubling card among them */
/* A card-shaped canvas holds the large centre card and two tucked backs. */
.sc-hand { --cut:12px; --ft:calc(var(--u) * .5 + 8px); position:relative; width:100%; max-width:340px; flex:0 0 auto; aspect-ratio:2/3; clip-path:var(--oct);
  background:radial-gradient(70% 45% at 50% 24%, rgba(40,30,50,.55), transparent 75%), linear-gradient(180deg,#0c0d14,#07080c); box-shadow:inset 0 0 0 1px rgba(150,135,116,.3); }
.sc-fan { position:absolute; left:50%; top:var(--ft); width:var(--u); margin-left:calc(var(--u) / -2); transform-origin:50% 120%; }
.sc-fan .card { width:100%; }
.sc-fan-l, .sc-fan-r { width:calc(var(--u) * .66); margin-left:calc(var(--u) * -.33); top:calc(var(--ft) + var(--u) * .20); transform-origin:50% 50%; }
.sc-fan-l { transform:translateX(-36%) rotate(-15deg); } .sc-fan-r { transform:translateX(36%) rotate(15deg); }
.sc-back { display:grid; place-items:center; background:url(assets/textures/card-back.png) center/100% 100% no-repeat;
  box-shadow:0 10px 22px rgba(0,0,0,.7); }
.sc-ghost { background:linear-gradient(180deg,rgba(240,77,133,.07),rgba(240,77,133,.025)), url(assets/textures/card-back.png) center/100% 100% no-repeat;
  box-shadow:0 0 26px rgba(240,77,133,.25), 0 12px 26px rgba(0,0,0,.75); }
.sc-gp { position:absolute; left:0; right:0; top:22%; height:46%; }
.sc-gp b { position:absolute; inset:0; display:grid; place-items:center; font:400 calc(var(--pu) * var(--num-size,.33))/1 var(--num); color:var(--stk-stat-power);
  text-shadow:0 0 16px rgba(240,77,133,.6), 0 2px 2px rgba(0,0,0,.8); opacity:0; }
.sc-gp b:last-child { opacity:1; }
.sc-gl { position:absolute; left:0; right:0; bottom:16%; text-align:center; font:800 max(10px, calc(var(--pu) * .1))/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:#e9b9c9; }
.sc-aura { position:absolute; left:50%; top:calc(var(--ft) - var(--u) * .6); width:calc(var(--u) * 2.4); height:calc(var(--u) * 2.2); margin-left:calc(var(--u) * -1.2); pointer-events:none;
  background:radial-gradient(closest-side, rgba(240,77,133,.42), rgba(240,77,133,.1) 60%, transparent); opacity:.85; }
.sc-veil { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(6,7,10,.2),rgba(6,7,10,.75)); opacity:.6; }
/* The strike crosses the final digits' ink. The number box is centred .675 --u below --ft;
   the tilted bar's pivot is another .346 --u below its middle, plus the font's ink offset.
   slash-centre measures this against rendered 2048 at both viewport sizes. */
.sc-slash { position:absolute; left:calc(50% - var(--u) * .751); width:calc(var(--u) * 1.7); top:calc(var(--ft) + var(--u) * 1.023); height:5px; margin-top:-2.5px;
  transform-origin:0 50%; transform:rotate(-24deg);
  background:linear-gradient(90deg,#8e1b22,#ff5a44 40%,#c3343c); box-shadow:0 0 14px rgba(255,70,50,.55); }
/* the Lane: the opponent's units across the top, yours along the foot, Phoenix among them */
.sc-lane { position:relative; width:100%; max-width:340px; padding:8px 12px; display:grid; gap:12px; }
.sc-row { position:relative; display:flex; justify-content:center; gap:10px; }
.sc-you { margin-top:16px; }
.sc-them .sc-u .card { box-shadow:0 0 0 1px rgba(224,120,87,.6),0 8px 16px rgba(0,0,0,.5); }
.sc-you .sc-u .card { box-shadow:0 0 0 1px rgba(79,201,176,.6),0 8px 16px rgba(0,0,0,.5); }
.sc-side-tag { position:relative; justify-self:center; padding:5px 8px; font-size:.56rem; letter-spacing:.18em; }
.sc-u { position:relative; width:var(--u); height:calc(var(--u) * 1.5); }
.sc-u .card { width:146px; transform-origin:0 0; transform:scale(var(--fs,.6)); }
.sc-u::before { content:''; position:absolute; inset:-8px; pointer-events:none; opacity:var(--burn,1);
  background:radial-gradient(closest-side, rgba(255,140,50,.55), rgba(255,100,30,.15) 70%, transparent); }
.sc-u::after { content:''; position:absolute; inset:-2px; pointer-events:none; border:2px solid #ffb24b;
  border-radius:calc(9px * var(--fs,.6)); opacity:var(--burn,.2); box-shadow:0 0 18px rgba(255,106,28,.75); }
.sc-play { z-index:3; }
.sc-play .card { filter:drop-shadow(0 0 calc(var(--land,0) * 16px) rgba(255,210,120,.85)); }
/* A single rising flame pass stays on the illustration, clear of names, stats and keywords. */
.sc-flames { position:absolute; z-index:1; inset:5% 3% 20%; overflow:hidden; opacity:0; pointer-events:none; mix-blend-mode:screen; }
.sc-flames i { position:absolute; bottom:0; width:27%; height:90%;
  background:linear-gradient(0deg,rgba(255,58,12,0),#e94c12 20%,#ff962b 50%,#ffe19c 80%,#fff4d4);
  clip-path:polygon(5% 100%,0 64%,20% 39%,32% 63%,47% 8%,58% 0,61% 46%,81% 32%,74% 65%,100% 87%,96% 100%);
  filter:drop-shadow(0 0 5px #f07324); transform-origin:50% 100%;
  transform:translateY(calc(var(--rise,0) * -28%)) scaleY(var(--stretch,1)) rotate(var(--tilt,0deg)) scaleX(var(--flip,1)); }
.sc-flames i:nth-child(1) { left:0; height:72%; --tilt:-8deg; }
.sc-flames i:nth-child(2) { left:18%; height:100%; }
.sc-flames i:nth-child(3) { left:39%; height:83%; }
.sc-flames i:nth-child(4) { left:59%; height:96%; --flip:-1; }
.sc-flames i:nth-child(5) { left:78%; height:64%; --tilt:9deg; }
.sc-burn { opacity:1; }
.sc-fx { max-width:340px; font:500 .92rem/1.35 var(--ui); color:var(--text); text-align:center; padding:8px 12px; background:rgba(6,7,10,.86); }
.sc-fx b { display:block; font:800 .62rem/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi); margin-bottom:5px; }

/* ---- math you can do at a glance: one big card, its Power and Health called out ---- */
.rb-math { background:
  linear-gradient(180deg,var(--ink),transparent 14%,transparent 86%,var(--ink)),
  repeating-linear-gradient(0deg, rgba(216,171,85,.07) 0 1px, transparent 1px 48px),
  repeating-linear-gradient(90deg, rgba(216,171,85,.07) 0 1px, transparent 1px 48px),
  radial-gradient(60% 80% at 70% 50%, #16171d, var(--ink)); }
.rb-math .rb-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4vw,64px); align-items:center; }
.mt { --w:clamp(230px,22vw,320px); --gap:clamp(18px,3vw,44px); height:calc(var(--w) * 1.5 + 90px); }
.mt-card { position:absolute; left:50%; top:50%; width:var(--w); margin:calc(var(--w) * -.75) 0 0 calc(var(--w) / -2); }
.mt-co { position:absolute; z-index:2; bottom:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.mt-co b { display:block; font:900 clamp(3.2rem,5.6vw,5.2rem)/.86 var(--display); }
.mt-co span { font:800 .74rem/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--parchment); }
.mt-p { right:calc(100% + var(--gap)); } .mt-p b { color:var(--stk-stat-power); }
.mt-h { left:calc(100% + var(--gap)); } .mt-h b { color:var(--stk-stat-health); }
.mt-line { position:absolute; top:.4em; width:var(--gap); height:2px; background:var(--gold); font-size:clamp(3.2rem,5.6vw,5.2rem); }
.mt-p .mt-line { left:100%; transform-origin:100% 50%; }
.mt-h .mt-line { right:100%; transform-origin:0 50%; }

/* ---- balanced for fun: cards move between the Book colours ---- */
.rb-fun { background:var(--ink); }
.fn-stripes { position:absolute; inset:0; z-index:-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fn-stripe { position:relative; border-left:1px solid color-mix(in srgb,var(--hue) 34%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--hue) 7%, var(--ink)) 0%, color-mix(in srgb,var(--hue) 18%, var(--ink)) 62%, color-mix(in srgb,var(--hue) 26%, var(--ink)) 100%); }
.fn-stripe:first-child { border-left:0; }
.fn-lit { position:absolute; inset:0; opacity:0; visibility:hidden; background:linear-gradient(180deg, transparent 20%, color-mix(in srgb,var(--hue) 30%, transparent) 70%, color-mix(in srgb,var(--hue) 46%, transparent)); }
.fn-stripe b { position:absolute; left:0; right:0; bottom:18px; text-align:center; font:800 .72rem/1 var(--ui); letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb,var(--hue) 55%, #fff); }
.fn-stripe b::before { content:''; display:block; width:10px; height:10px; margin:0 auto 9px; background:var(--hue); transform:rotate(45deg); }
.fn-in { max-width:var(--wrap); margin:0 auto; padding:clamp(28px,2.8vw,40px) var(--gutter) 64px; display:grid; gap:clamp(18px,2.6vw,34px); }
.rb-fun .rb-copy { justify-self:end; max-width:600px; }
.fn { --w:clamp(150px,13vw,196px); height:calc(var(--w) * 1.5 + 56px); }
.fn-card { position:absolute; left:0; top:34px; width:var(--w); }
.fn-glow { position:absolute; inset:-7px; opacity:0; visibility:hidden; box-shadow:0 0 0 2px var(--hue), 0 0 28px 4px color-mix(in srgb,var(--hue) 70%, transparent); }

/* ---- quality of life: the in-game capture, framed as a game window ---- */
.rb-qol { background:linear-gradient(180deg,var(--ink),#0b0d13 40%,var(--ink)); }
.rb-qol .rb-wrap { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(24px,4vw,64px); align-items:center; }
.gw-wrap { filter:drop-shadow(0 24px 40px rgba(0,0,0,.65)); }
.gw { --cut:14px; position:relative; clip-path:var(--oct); background:var(--metal-edge); padding:2px; }
.gw-bar { position:relative; display:flex; align-items:center; gap:12px; height:44px; padding:0 14px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#2c2013,#120d08); clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }
.gw-gem { flex:none; width:10px; height:10px; transform:rotate(45deg); background:var(--gold); }
.gw-tabs { position:relative; display:flex; height:100%; min-width:0; }
.gw-tabs span { display:flex; align-items:center; padding:0 12px; font:800 .64rem/1 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--faded); white-space:nowrap; }
.gw-under { position:absolute; left:0; bottom:0; width:100px; height:3px; background:var(--gold-hi); transform-origin:0 50%; box-shadow:0 0 10px rgba(255,200,110,.6); }
.gw-ctl { margin-left:auto; display:flex; gap:6px; }
.gw-ctl i { width:14px; height:14px; border:1px solid var(--line); background:rgba(6,7,10,.6); }
.gw-body { position:relative; aspect-ratio:16/10; overflow:hidden; background:#07080b;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px)); }
.gw-bg { position:absolute; inset:-10px; background:url(assets/battlefields/crystal-cavern.webp) center/cover; filter:blur(4px) brightness(.4) saturate(.8); }
.gw-side { position:absolute; top:18px; bottom:58px; left:18px; width:24%; display:flex; flex-direction:column; gap:8px; }
.gw-side i { display:block; height:22px; background:linear-gradient(90deg, rgba(216,171,85,.34), rgba(216,171,85,.06)); border-left:3px solid var(--hue,var(--gold)); }
.gw-centre { position:absolute; left:calc(24% + 36px); right:18px; top:18px; bottom:58px; display:grid; place-content:center; justify-items:center; text-align:center; }
/* the caption sits on its own dark plate, so it reads at well over 4.5:1 whatever the blurred art does behind it */
.gw-centre p { font-size:.95rem; color:var(--text); margin-top:12px; max-width:32ch; padding:8px 14px; background:rgba(8,9,12,.84); }
.gw-scrub { position:absolute; left:18px; right:18px; bottom:24px; height:6px; background:rgba(216,171,85,.18); }
.gw-fill { position:absolute; inset:0; background:linear-gradient(90deg,var(--gold-dim),var(--gold-hi)); transform-origin:0 50%; }
.gw-head { position:absolute; top:-5px; left:100%; width:4px; height:16px; margin-left:-2px; background:var(--gold-hi); box-shadow:0 0 10px rgba(255,200,110,.7); }

@media (max-width:999px) {
  .rb-packs .rb-wrap, .rb-math .rb-wrap, .rb-qol .rb-wrap { grid-template-columns:1fr; }
  .pk, .mt { order:-1; }
  .rb-board .rb-copy { display:block; }
  /* the board as a 2 x 2 grid: four Locations big enough to read, with no strip of dead space */
  .bd-lanes { grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%, 560px); }
  .bd-loc { aspect-ratio:4/5; }
  .sc-in { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"c c" "a b"; gap:22px 10px; align-items:start; }
  .sc-panel { --u:clamp(64px,18vw,104px); }
  .rb-fun .rb-copy { justify-self:stretch; max-width:none; }
  /* the two lists stack: what is taken out, then what survives */
  .mb { grid-template-columns:minmax(0,1fr); gap:20px; max-width:560px; }
  .mb-out { align-items:flex-start; text-align:left; }
  .mb-out .mb-list { align-items:flex-start; }
  .mb-div { width:auto; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 14%,var(--gold) 86%,transparent); }
}
@media (max-width:560px) {
  .rb-wrap, .sc-in, .fn-in { padding-top:36px; padding-bottom:40px; }
  .fn-in { padding-bottom:64px; }
  .pk { height:max(400px, calc((100vw - 2 * var(--gutter)) * 1.35)); }
  .bd-lanes { gap:8px; }
  .bd-loc { --cut:9px; }
  .bd-tag { top:6px; left:6px; font-size:.56rem; letter-spacing:.12em; padding:5px 6px; }
  .sc-lane { padding:8px; gap:8px; }
  .sc-row { gap:6px; }
  .sc-zone { top:6px; left:6px; font-size:.56rem; letter-spacing:.12em; padding:5px 6px; }
  .sc-fx { font-size:.82rem; padding:7px 9px; }
  .sc-h { font-size:1.3rem; }
  .mt { --w:clamp(140px,40vw,172px); --gap:14px; }
  .mt-co b, .mt-line { font-size:2.6rem; }
  .mt-co span { font-size:.62rem; letter-spacing:.16em; }
  .fn-stripe b { font-size:.56rem; letter-spacing:.1em; }
  /* a phone fits one card inside each Book's column: the full 146px card face, scaled down whole */
  .fn { --w:calc(25vw - 16px); }
  .fn-card { height:calc(var(--w) * 1.5); }
  .fn-card .card { width:146px; transform-origin:0 0; transform:scale(var(--fs,1)); }
  .gw-body { aspect-ratio:auto; height:300px; }
  .gw-bar { gap:8px; padding:0 10px; }
  .gw-tabs span { padding:0 7px; font-size:.56rem; letter-spacing:.12em; }
  .gw-side { width:20%; left:12px; }
  .gw-centre { left:calc(20% + 22px); right:12px; }
  .gw-centre p { font-size:.88rem; }
  .gw-scrub { left:12px; right:12px; }
}

/* ========== MODES ========== */
/* a short head: it follows the Why-play stage straight on, with no dead band as the stage scrolls away */
.modes-sec { position:relative; padding:clamp(52px,5.4vw,84px) 0 clamp(20px,2vw,32px); overflow:hidden; isolation:isolate; }
.modes-sec::before { content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--ink),rgba(6,7,10,.86) 30%,rgba(6,7,10,.86) 70%,var(--ink)), url(assets/battlefields/cosmic-2.webp) center/cover; }
.modes { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); display:flex; gap:12px; height:clamp(440px,54vh,540px); }
.mode-group { flex:2 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; transition:flex-grow .55s var(--ease-out); }
.mode-pair { flex:1; min-height:0; display:flex; gap:12px; }
.mode { --cut:20px; --rim:1px; flex:1 1 0; min-width:0; position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end;
  clip-path:var(--oct); background:var(--metal-edge); text-decoration:none; color:inherit; transition:flex-grow .55s var(--ease-out); }
.mode-wrap { flex:1 1 0; min-width:0; display:flex; transition:flex-grow .55s var(--ease-out); filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.mode-wrap > .mode { flex:1; }
/* .mode is cut by its own clip-path: its focus ring is the rim thickening inward (base.css, THE FOCUS RIM). */
.mode-art { position:absolute; inset:var(--rim); z-index:-1; clip-path:var(--oct-in); overflow:hidden; background:#0b0d12; }
/* the battlefield shows at rest; only the text carries a scrim of its own (.mode-body::before) */
.mode-art img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.1s var(--ease-out), filter .5s; filter:saturate(.95) brightness(.97); }
.mode-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,7,10,.18) 0%, transparent 22%, transparent 60%, rgba(6,7,10,.3) 100%); }
.mode::after { content:''; position:absolute; inset:7px; pointer-events:none; border:1px solid var(--line-soft); clip-path:var(--oct); transition:border-color .4s; }
.mode-body { display:block; position:relative; z-index:1; box-sizing:border-box; padding:0 clamp(16px,1.6vw,26px) clamp(22px,2vw,30px); }
/* The text block is anchored to the panel's foot at a FIXED height and laid out from its top: the title
   always stands at the same height above the foot, so Run's and Duel's (and Ranked's and Offline's) line up
   whatever their descriptions run to, and a panel widening or narrowing under the pointer never lifts or
   drops its title. The description and the tag follow it. (Stacked, panels are full-width with short text
   and keep the natural height.) tools/check_website_look.js (modes-align) holds the titles and the tags. */
@media (min-width:1000px) {
  .mode-body { height:var(--mode-body-h); }
  /* every rated panel's description reserves the tallest one's height (landing.js), so the Ranked tags stand level */
  .mode-info:has(.mode-tag) .mode-desc { min-height:var(--mode-desc-h, 0px); }
}
.modes { --mode-body-h:clamp(15.5rem,19vw,18.5rem); }
/* the scrim stops at the rim, so the focus ring (the rim thickened) is never darkened by it */
.mode-body::before { content:''; position:absolute; z-index:-1; left:var(--rim); right:var(--rim); top:-56px; bottom:var(--rim); pointer-events:none;
  --k:calc(var(--cut) - var(--rim) * .59); clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)));
  background:linear-gradient(180deg, rgba(6,7,10,0) 0, rgba(6,7,10,.74) 56px, rgba(6,7,10,.88) 120px, rgba(6,7,10,.94) 100%); }
.mode h3 { font:800 clamp(1.9rem,2.8vw,2.7rem)/1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--parchment); margin:8px 0 12px; white-space:nowrap; }
.mode-info { display:block; max-height:20em; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .3s; }
.mode-desc { display:block; font-size:.98rem; font-weight:500; line-height:1.45; color:var(--text); }
/* The Ranked tag: a small chamfered rectangle (never a pill) under the description of every rated mode (Ranked,
   Run and Duel), never on Offline. It follows the description, which side by side reserves the tallest rated
   description's height, so the three tags stand level at rest and under hover; nothing above it moves. */
.mode-tag { --cut:5px; display:inline-flex; align-items:center; margin-top:12px; min-height:24px; padding:0 12px; clip-path:var(--oct); background:linear-gradient(180deg,#3a2a12,#160f07);
  box-shadow:inset 0 0 0 1px var(--gold-dim); font:800 .64rem/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi); }
.mode-go { display:flex; align-items:center; gap:10px; margin-top:16px; font:800 .66rem/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi); opacity:.0; transform:translateY(8px); transition:opacity .35s, transform .35s var(--ease-out); }
.mode-go::after { content:''; width:26px; height:1px; background:var(--gold-hi); }
.mode:hover .mode-art img, .mode:focus-visible .mode-art img { transform:scale(1.12); filter:saturate(1.1) brightness(1.12); }
.mode:hover::after, .mode:focus-visible::after { border-color:var(--gold); }
.mode:hover .mode-go, .mode:focus-visible .mode-go { opacity:1; transform:none; }
.draft-banner { --cut:22px; flex:none; position:relative; isolation:isolate; height:58px; display:flex; align-items:center; justify-content:center; gap:14px;
  clip-path:var(--hex); background:var(--metal-edge); }
.draft-banner::before { content:''; position:absolute; inset:2px; z-index:-1; clip-path:var(--hex); background:linear-gradient(180deg,#2a1f12,#120d08); }
.draft-banner h3 { font:900 1.8rem/1 var(--display); letter-spacing:.26em; text-transform:uppercase; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-left:.3em; }
.draft-banner i { width:8px; height:8px; transform:rotate(45deg); background:var(--gold); }
.draft-banner .tick { position:absolute; bottom:-12px; width:2px; height:12px; background:var(--gold-dim); }
/* Hover (or keyboard focus) widens one panel and narrows the rest. Four panels share four
   units at rest (Ranked 1, the Draft pair 2, Offline 1); the one under the pointer takes 1.6 and
   each of the other three 0.8, whether it stands alone or inside the Draft pair (2 : 1 there).
   The ratio is modest so a narrowed panel keeps its title on its own unbroken line; only its
   description and tag fold away, to come back when it is the one looked at. */
@media (hover:hover) and (min-width:1000px) {
  .modes:has(.mode:hover) > .mode-wrap, .modes:has(.mode:focus-visible) > .mode-wrap { flex-grow:.8; }
  .modes > .mode-wrap:has(.mode:hover), .modes > .mode-wrap:has(.mode:focus-visible) { flex-grow:1.6; }
  .modes:has(.mode:hover) .mode-group, .modes:has(.mode:focus-visible) .mode-group { flex-grow:1.6; }
  .modes .mode-group:has(.mode:hover), .modes .mode-group:has(.mode:focus-visible) { flex-grow:2.4; }
  .mode-pair .mode-wrap:has(.mode:hover), .mode-pair .mode-wrap:has(.mode:focus-visible) { flex-grow:2; }
  .modes:has(.mode:hover) .mode:not(:hover) .mode-info,
  .modes:has(.mode:focus-visible) .mode:not(:focus-visible) .mode-info { max-height:0; opacity:0; }
}
@media (hover:none), (max-width:999px) { .mode-go { opacity:1; transform:none; } }

/* ========== LIBRARY (a living card wall) ==========
   Every card is yours from day one, so the library shows them all at once: card faces fill the
   width of the screen, three rows deep, each row drifting slowly sideways (alternate rows the
   other way), the edges fading into the ground. One rAF loop writes each card's translate; hover,
   focus and filter states are CSS transitions on an inner layer (transform and opacity only). A
   pointer over a card lifts it toward the viewer and lights it while its neighbours dim; a Book
   filter sends the other cards back into the dark and slides that Book's cards together, forward,
   where the eye is. Opening a card shows its splash art and its full face. */
/* `clip`, not `hidden`: a hidden box is a scroll container, and focusing a wall card that sits
   off screen (the rows are thousands of pixels wide) would scroll it sideways under the wall. */
.lib { position:relative; padding:clamp(36px,3.6vw,56px) 0 clamp(20px,2vw,28px); background:var(--ink); overflow:hidden; overflow:clip; }
.lib-bar { position:relative; z-index:2; display:flex; justify-content:center; padding:0 var(--gutter); }
/* the Book filter bar (.filters) is shared with cards.html: library.css */
/* the wall's ground: the game's own board, far back in the dark, so the cards sit somewhere */
.wall-wrap { position:relative; margin-top:clamp(14px,1.8vw,26px); }
.wall-ground { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.wall-ground img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.34); }
.wall-ground::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(6,7,10,.25) 22%,rgba(6,7,10,.25) 78%,var(--ink) 100%),
             radial-gradient(60% 70% at 50% 50%, rgba(255,170,80,.12), transparent 70%); }
.wall { --cw:150px; --ch:calc(var(--cw) * 1.5); --gy:18px; --pad:30px; --pad-b:14px; --rows:3;
  position:relative; z-index:1; height:calc(var(--rows) * var(--ch) + (var(--rows) - 1) * var(--gy) + var(--pad) + var(--pad-b));
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%); }
.wl { position:absolute; left:0; top:0; width:var(--cw); height:var(--ch); z-index:1; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.wl.hot { z-index:4; }
.wl:focus-visible { outline:none; }
.wl-lift { position:absolute; inset:0; transform-origin:50% 62%; transition:transform .5s var(--ease-out); }
.wl .card { width:100%; --card-r:7px; }
.wall.mini .wl .card { width:146px; transform-origin:0 0; transform:scale(var(--ws)); }
/* the light a lifted card throws (a square glow, blurred well past its corners) */
.wl-glow { position:absolute; inset:3%; box-shadow:0 0 34px 6px rgba(255,190,96,.42), 0 30px 46px rgba(0,0,0,.75); opacity:0; transition:opacity .4s; }
/* each card's own dark layer (inside the card, so the card's corner clips it): resting cards sit a
   touch back, a lit card clears it and its neighbours take more of it */
.wl-dim { position:absolute; inset:0; z-index:6; pointer-events:none; background:#05060a; opacity:.14; transition:opacity .5s; }
/* the keyboard ring rides on the lifted card: a hard gold rim just outside the card */
.wl-ring { position:absolute; inset:-5px; z-index:7; pointer-events:none; border:2px solid var(--gold-hi); box-shadow:0 0 0 1px #0b0d12, 0 0 18px rgba(255,200,110,.55); opacity:0; transition:opacity .2s; }
.wl:focus-visible .wl-ring { opacity:1; }
.wall.has-hot .wl .wl-dim { opacity:.44; }
.wall .wl.hot .wl-lift { transform:translateY(-6%) scale(1.15); }
.wall .wl.hot .wl-dim { opacity:0; }
.wl.hot .wl-glow { opacity:1; }
.wl.hot .glint { opacity:1; }
/* a Book filter deals the wall again (landing.js, applyFilter): the old faces sink back and fade
   where they stand, out of reach, while the new ones rise in, the middle of each row first (--dl) */
.wl.leaving { z-index:0; pointer-events:none; }
.wl.leaving .wl-lift { transform:translateY(6%) scale(.86); opacity:0; transition:transform .42s ease-in, opacity .36s ease-in; }
.wl.arrive .wl-lift { transition:transform .62s var(--ease-out) var(--dl,0ms), opacity .46s ease-out var(--dl,0ms); }
.wl.entering .wl-lift { transform:translateY(12%) scale(.9); opacity:0; transition:none; }
/* a long name on a phone face prints in the condensed face rather than under 10px (fitWallName) */
.wall .card-name.nm-cond { font-family:var(--display); letter-spacing:.01em; }
.lib-foot { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(14px,2vw,26px); }

/* ---- Pause motion (motion.js, WCAG 2.2.2): the ghost button's gold rim and dark ground, a size
   down, with a drawn pause or play mark beside its words. Shown only while motion runs (js-motion);
   under reduced motion every loop is already still. One on the hero, one under the wall. ---- */
.btn-ghost.motion-toggle { display:none; min-height:44px; padding:0 22px; gap:10px; font-size:.7rem; }
.js-motion .btn-ghost.motion-toggle { display:inline-flex; }
.mt-ico { position:relative; flex:none; width:10px; height:12px; }
.mt-ico::before, .mt-ico::after { content:''; position:absolute; top:0; bottom:0; width:3px; background:currentColor; }
.mt-ico::before { left:0; }
.mt-ico::after { right:0; }
.motion-paused .mt-ico::before { top:0; bottom:auto; width:0; height:0; left:1px; background:none;
  border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid currentColor; }
.motion-paused .mt-ico::after, .motion-paused .mt-pause, html:not(.motion-paused) .mt-play { display:none; }
.hero-motion { position:absolute; z-index:4; right:var(--gutter); bottom:18px; }
/* The pack's replay for a keyboard (landing.js): the click on the spread has this twin, which takes
   its place under the copy only while it has focus. */
.btn-ghost.pk-replay { min-height:44px; margin-top:18px; padding:0 22px; font-size:.7rem; }
.btn-ghost.pk-replay:not(:focus-visible) { position:absolute; opacity:0; pointer-events:none; }

/* the opened card (dialog.cv) is shared with cards.html: library.css */

/* ========== MEMBERSHIP + JOIN (the finale) ========== */
/* The join block sits a short step above the footer: no dead band at the foot of the page. */
.finale { position:relative; overflow:hidden; isolation:isolate; padding:clamp(36px,3.4vw,48px) 0 clamp(48px,4.4vw,64px); }
.finale-bg { position:absolute; inset:-12% 0; z-index:-3; }
.finale-bg img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.8); }
.finale::before { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,var(--ink) 0%,rgba(6,7,10,.7) 22%,rgba(6,7,10,.74) 60%,rgba(6,7,10,.96) 88%,var(--ink) 100%); }
.finale .embers { z-index:-1; }
.offers { max-width:980px; margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3vw,40px); align-items:stretch; }
.offer-wrap { position:relative; display:flex; filter:drop-shadow(0 24px 40px rgba(0,0,0,.65)); }
.offer { --cut:26px; flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px clamp(22px,3vw,40px) clamp(30px,3vw,40px); }
.offer > :not(.grain-layer) { position:relative; z-index:1; }
.offer-paid { --fill:linear-gradient(180deg,rgba(40,26,10,.94),rgba(10,8,6,.95) 45%); }
.offer-paid-wrap { filter:drop-shadow(0 0 30px rgba(255,170,70,.35)) drop-shadow(0 24px 40px rgba(0,0,0,.65)); }
.rays { position:absolute; left:50%; top:0; width:560px; height:560px; margin:-280px 0 0 -280px; z-index:0; pointer-events:none; opacity:.4;
  background:repeating-conic-gradient(from 0deg, rgba(255,200,110,.32) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 70%); mask:radial-gradient(closest-side,#000 10%,transparent 70%); animation:spin 60s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.crest { position:relative; width:74px; height:74px; display:grid; place-items:center; margin-bottom:18px; }
.crest::before { content:''; position:absolute; inset:10px; transform:rotate(45deg); background:linear-gradient(135deg,#3a2a12,#0d0a06); border:1px solid var(--gold); box-shadow:0 0 0 4px #0b0d12, 0 0 0 5px var(--gold-dim); }
.crest .books { position:relative; display:flex; gap:3px; align-items:flex-end; }
.crest .books i { width:7px; height:22px; background:var(--hue); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.crest .books i:nth-child(2) { height:26px; } .crest .books .off { opacity:.25; }
.offer h3 { font:800 .8rem/1 var(--ui); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.price { margin-top:16px; font:900 clamp(2.9rem,5vw,4rem)/1 var(--display); background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.7)); }
.price .per { font-size:.42em; letter-spacing:.04em; }
.price-sub { display:block; margin-top:10px; font:500 .92rem/1.4 var(--body); color:var(--faded); }
.offer-rule { width:100%; max-width:300px; margin:24px auto 20px; display:flex; align-items:center; gap:10px; }
.offer-rule::before, .offer-rule::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim)); }
.offer-rule::after { transform:scaleX(-1); }
.offer-rule i { width:7px; height:7px; transform:rotate(45deg); background:var(--gold); }
.held-label { font:800 .62rem/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--faded); }
.held { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.held-none { flex-basis:100%; margin-top:8px; font-size:.98rem; font-weight:600; color:var(--parchment); }
.plan-note { margin-top:18px; font-size:.98rem; color:var(--text); max-width:32ch; }
.offer .grow { flex:1; }
.offer-cta { margin-top:24px; }
.offer-cta .cta-face { min-height:52px; padding:0 34px; font-size:.86rem; }
.join { max-width:900px; margin:clamp(64px,8vw,120px) auto 0; padding:0 var(--gutter); text-align:center; }
.join h2 { font:900 clamp(3.1rem,8.8vw,6.8rem)/.92 var(--display); letter-spacing:.04em; text-transform:uppercase; margin-top:20px;
  background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,140,60,.3)); }
.join p { max-width:34em; margin:18px auto 0; text-wrap:pretty; font-size:clamp(1rem,1.25vw,1.15rem); color:var(--parchment); }
.join .cta { margin-top:38px; }
.join small { display:block; margin-top:16px; font:800 .66rem/1 var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--faded); }


@media (max-width:999px) {
  .modes { flex-direction:column; height:auto; }
  .mode-group { flex:none; }
  .mode-pair { flex-direction:column; }
  .mode-wrap, .mode-pair .mode-wrap { flex:none; min-height:236px; }
  .mode-art::after { background:linear-gradient(180deg, rgba(6,7,10,.15) 0%, rgba(6,7,10,.5) 35%, rgba(6,7,10,.95) 72%); }
}
/* Below 1024px the copy column is too narrow to share with three cards that must not overlap
   each other's names, so the hero stacks: cards on top, copy below. */
@media (max-width:1023px) {
  .hero-inner { grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 6px); padding-bottom:84px; align-content:start; gap:10px; }
  /* Phone cards stay big enough to print each name whole at the 11px floor. */
  .hero-stage { order:-1; height:clamp(270px,78vw,400px); }
  /* Side cards rest a 16px gutter (plus the camera kick's 5px) inside the screen edges. The
     three cards sit side by side and never overlap: the centre card only touches the side cards'
     outer bounds where their tilt leans their top corners away, so every side card's Gold,
     name, Power, Health and keyword chips stay whole at every point of the idle bob. The
     minimum widths are the narrowest at which each name still prints whole at the 11px floor. */
  .hero-stage .slot-l, .hero-stage .slot-r { --w:clamp(103px,26.5vw,140px); --y:31%; }
  .hero-stage .slot-l { --x:-110%; --r:-4deg; } .hero-stage .slot-r { --x:110%; --r:4deg; }
  .hero-stage .slot-c { --w:clamp(131px,33.5vw,170px); --x:0%; --y:-10%; }
  /* On a phone the whole intro stays inside the card zone: under the nav, above the title. The
     slam starts only a fifth larger than the card and shrinks onto it about a point just above
     its centre, so its top never reaches the nav and its foot never reaches the wordmark. */
  .slot-c .intro { animation-name:slamPhone; transform-origin:50% 45%; }
  /* the side cards are dealt out from the centre of the table, small, and slide to their places:
     on screen the whole way, never off an edge or down over the title */
  .slot-l .intro { --from:translate(110%,-34%) rotate(12deg) scale(.6); }
  .slot-r .intro { --from:translate(-110%,-34%) rotate(-12deg) scale(.6); }
  .hero-stage .slot { margin-top:calc(var(--w) * -.72); }
  .slam-flash { left:50%; top:calc(50% + clamp(131px,33.5vw,170px) * .58); }
  .hero-grade { background:linear-gradient(180deg, rgba(4,5,8,.7) 0%, rgba(4,5,8,.15) 14%, rgba(4,5,8,.35) 32%, rgba(4,5,8,.88) 48%, var(--ink) 100%); }
  .hero-copy::before { inset:-6% -20%; }
}
@media (max-width:820px) {
  .offers { grid-template-columns:1fr; max-width:520px; }
}
@media (max-width:560px) {
  /* the phone hero's foot holds the placeholder tag edge to edge; the wall's button serves the page */
  .js-motion .hero-motion.motion-toggle { display:none; }
  .hero-ph { left:16px; right:16px; bottom:16px; }
  .lede { font-size:1rem; line-height:1.55; padding:10px 14px 12px 14px; }
  /* Phone sections open and close on a tighter beat: the desktop's 90px floors stacked two at
     a time (one section's foot, the next one's head) left near-black screens between them. */
  .why, .lib { padding-top:44px; }
  .lib { padding-bottom:44px; }
  .modes-sec { padding:44px 0 40px; }
  .finale { padding:48px 0 120px; }
  .join { margin-top:72px; }
  .creed-quote { margin-bottom:28px; }
  .logo-rule { margin:10px 0 12px; }
  .hero-actions { margin-top:20px; }
  .scroll-cue { display:none; }
  .draft-banner h3 { font-size:1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bf:nth-child(1) { opacity:1; }
  .slam-glow { opacity:1; }
}