/* Rolvana website S, "Daybreak". Kit D colours and type, the paywall's stage, glass and rainbow button.
   Values come from docs/design/rolvana-design-system/tokens.css and the locked kit D kit.css. */
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url(fonts/barlow-condensed-800-latin.woff2) format("woff2"); }
@font-face { font-family: "Marcellus"; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 200 1000; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); }

:root {
  --void: #02030F; --night: #080B1A; --deep: #10152E; --edge: #1A2142;
  --chrome: #EEF1F7; --steel: #8B93AD; --ruby: #FF1A1F; --ink-ruby: #ff7a7a;
  --spectrum: linear-gradient(90deg, rgba(177,0,132,0) 0%, #B10084 6%, #F81D4F 13%, #F90E00 20%, #FD8D00 29%, #FCDF00 38%, #69ED57 46%, #00E5FB 54%, #029DFB 62%, #3828FB 70%, #7707F1 78%, #B10084 86%, #F52481 93%, rgba(245,36,129,0) 100%);
  --spectrum-solid: linear-gradient(90deg, #F90E00, #FD8D00 12%, #FCDF00 24%, #69ED57 36%, #00E5FB 48%, #029DFB 58%, #3828FB 68%, #7707F1 78%, #B10084 89%, #F52481);
  --ring: conic-gradient(from var(--spin, 0deg), #F90E00, #FD8D00, #FCDF00, #69ED57, #00E5FB, #029DFB, #3828FB, #7707F1, #B10084, #F52481, #F90E00);
  /* card rarity (tokens.css rarity-*; Legendary wears the house rainbow, never red) */
  --r-common: #9ca3af; --r-uncommon: #22c55e; --r-rare: #00e3fd; --r-epic: #ba68c8; --r-mythic: #eab308; --r-legendary: #d277ff;
  /* Goal rarity (app goalTheme.ts RARITY_COLORS) */
  --g-common: #A0A0A0; --g-uncommon: #4CAF50; --g-rare: #00E3FD; --g-epic: #BA68C8; --g-mythic: #EAB308; --g-legendary: #FFEA00;
  --cta: #de3333, #ab6329, #8e740c, #5b811e, #178841, #048197, #3472d8, #8558ec, #c026d3;
  --cta-lip: #6f1a1a, #563215, #473a06, #2e410f, #0c4421, #02414c, #1a396c, #432c76, #60136a;
  --rim-card: rgba(255,255,255,.34); --rim-card-top: rgba(255,255,255,.55); --rim-glass: rgba(255,255,255,.2); --rim-hair: rgba(255,255,255,.08);
  --glass: rgba(255,255,255,.06); --shade-foot: rgba(0,0,0,.35);
  --focus-ring: 0 0 0 2px #02030F, 0 0 0 4px #81ecff;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --edge-pad: 16px; --dock-h: 104px;
  --f-impact: "Avenir Next Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-label: Optima, "Marcellus", Candara, serif;
  --f-talk: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--void); overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; color: var(--chrome); background: var(--void); font: 500 17px/1.5 var(--f-talk); padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: var(--deep); }
.skip:focus { top: 12px; }
.js .no-js-only { display: none; }
html:not(.js) .js-only { display: none !important; }
.wrap { width: min(100% - 2 * var(--edge-pad), 1080px); margin-inline: auto; }

/* ---------- type ---------- */
.impact { font-family: var(--f-impact); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; margin: 0; }
h1.impact { font-size: clamp(54px, 15.5vw, 132px); }
h2.impact { font-size: clamp(46px, 12.5vw, 104px); }
.label { font: 700 13px/1.2 var(--f-label); letter-spacing: .28em; text-transform: uppercase; color: var(--steel); margin: 0 0 14px; }
.body { font-size: 17px; line-height: 1.55; color: #D6DAE6; max-width: 34em; margin: 16px 0 0; }
.fine { font-size: 13px; line-height: 1.5; color: var(--steel); margin: 10px 0 0; }
.fine a { color: var(--chrome); text-decoration-color: rgba(238,241,247,.5); }
.chrome { background: linear-gradient(180deg, #FFFFFF 0%, #F3F5FA 40%, #CBD2E3 61%, #F6F8FC 63%, #9EA8C0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lit { position: relative; z-index: 0; padding: .06em 0; }
.lit::before, .lit::after { content: attr(data-text); position: absolute; inset: .06em 0 auto 0; z-index: -1; white-space: pre-line;
  background: var(--spectrum-solid); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }
.lit::before { filter: blur(.11em); opacity: .95; }
.lit::after { filter: blur(.025em); }
.lit > .chrome { filter: drop-shadow(0 .03em 0 rgba(0,0,0,.6)) drop-shadow(0 0 .012em rgba(2,3,15,.95)); }
.lit.soft::after { display: none; }
.lit.soft::before { filter: blur(.3em); opacity: .55; }

/* ---------- sky: one day passes as you scroll (light from below, never paint) ---------- */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, var(--night), var(--void) 70%); }
.sky-dawn { position: absolute; left: -20%; right: -20%; bottom: -30vh; height: 70vh; border-radius: 50%; background: var(--spectrum-solid);
  filter: blur(90px); opacity: calc(.05 + var(--day, 0) * .16); transform: translateY(calc((1 - var(--day, 0)) * 18vh)); }
.sky-dust { position: absolute; inset: 0; opacity: .8; background-image:
  radial-gradient(2px 2px at 7% 18%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 16% 72%, rgba(255,170,120,.6), transparent),
  radial-gradient(2px 2px at 27% 34%, rgba(160,200,255,.6), transparent), radial-gradient(1.5px 1.5px at 38% 86%, rgba(255,255,255,.5), transparent),
  radial-gradient(1.5px 1.5px at 46% 12%, rgba(255,140,200,.6), transparent), radial-gradient(2px 2px at 58% 64%, rgba(255,255,255,.55), transparent),
  radial-gradient(1.5px 1.5px at 66% 26%, rgba(255,200,120,.6), transparent), radial-gradient(2px 2px at 74% 82%, rgba(150,180,255,.6), transparent),
  radial-gradient(1.5px 1.5px at 83% 16%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 91% 58%, rgba(255,120,160,.55), transparent),
  radial-gradient(1.5px 1.5px at 96% 90%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 3% 52%, rgba(255,255,255,.45), transparent); }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) var(--edge-pad) 8px; background: linear-gradient(rgba(2,3,15,.86), rgba(2,3,15,.55));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--rim-hair); }
.hud-brand { flex: none; min-height: 44px; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.hud-brand img { height: auto; mix-blend-mode: screen; -webkit-user-drag: none; user-select: none; }
.hud-mark { width: 34px; }
.hud-word { width: 104px; }
.hud-nav { display: none; gap: 4px; }
.hud-nav a { font: 700 14px/1 var(--f-talk); color: var(--steel); text-decoration: none; padding: 15px 10px; border-radius: 12px; }
.hud-nav a:hover { color: var(--chrome); }
.pocket { display: flex; align-items: center; gap: 6px; }
html:not(.js) .pocket { display: none; }
.clock { font: 700 12px/1 var(--f-label); letter-spacing: .14em; color: var(--steel); margin-right: 2px; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px 0 8px; border-radius: 999px;
  background: rgba(8,6,12,.42); border: 1px solid rgba(255,255,255,.18); font: 800 14px/1 var(--f-talk); font-variant-numeric: tabular-nums; }
.chip svg { width: 17px; height: 17px; }
.ruby { color: #FF3131; filter: drop-shadow(0 0 4px rgba(255,49,49,.85)); }
.die { color: #fff; }
.chip-ruby b { color: var(--ink-ruby); }
.chip-roll svg { color: #F1EFF7; }
.chip.bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* ---------- 1. the stage ---------- */
.stage { position: relative; min-height: 100svh; padding: calc(100px + env(safe-area-inset-top)) 0 56px; overflow: hidden; overflow: clip; isolation: isolate; overflow-anchor: none; contain: paint; display: flex; flex-direction: column; justify-content: flex-end; }
.stage-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate; }
.stage img, .fan, .fan-wrap { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.wall { position: absolute; inset: -10% -30%; z-index: -3; opacity: .13; transform: rotate(-9deg) scale(1.08); }
.wall-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.wall-grid img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; }
.rays { position: absolute; z-index: -2; left: 50%; top: 34%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; opacity: .12;
  background: repeating-conic-gradient(from 0deg, rgba(245,208,254,1) 0deg 2.2deg, transparent 2.2deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); }
.vignette { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 60% at 50% 36%, transparent 0%, rgba(2,3,15,.55) 60%, var(--void) 100%),
  linear-gradient(transparent 46%, rgba(2,3,15,.86) 70%, var(--void) 100%); }
.fan-wrap { position: relative; flex: none; height: clamp(250px, 64vw, 420px); margin: 0 auto 6px; width: 100%; max-width: 900px; }
.bloom { position: absolute; left: 50%; top: 46%; width: 340px; height: 300px; margin: -150px 0 0 -170px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190,110,255,.55), rgba(0,200,240,.18) 60%, transparent); filter: blur(30px); }
.fan { position: absolute; inset: 0; }
.card { position: relative; margin: 0; border-radius: 7% / 4.67%; overflow: hidden; background: #15141b; aspect-ratio: 2/3;
  box-shadow: inset 0 0 0 1px var(--rim-card), 0 12px 28px rgba(0,0,0,.65); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--rim-card-top), inset 0 0 0 1px var(--rim-card); background: linear-gradient(transparent 62%, var(--shade-foot)); }
.pill { position: absolute; z-index: 2; left: 50%; bottom: 7%; transform: translateX(-50%); padding: 3px 9px 4px; border-radius: 999px;
  font: 800 11px/1 var(--f-talk); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 2px 3px rgba(0,0,0,.55); }
.p-common { background: linear-gradient(#fff, #dedde6); color: #17151d; }
.p-uncommon { background: linear-gradient(#92f6b5, #3bd472); color: #04240f; }
.p-rare { background: linear-gradient(#a5f3fc, #22d3ee); color: #00262c; }
.p-epic { background: linear-gradient(#ebc7f2, #c77dd4); color: #24062b; }
.p-mythic { background: linear-gradient(#fde68a, #eab308); color: #2a1d00; }
.p-legendary { background: rgba(5,5,10,.96); color: #fff; box-shadow: 0 2px 3px rgba(0,0,0,.55), 0 0 6px rgba(210,119,255,.85), -4px 0 6px rgba(255,49,49,.5), 4px 0 6px rgba(41,121,255,.5); border: 1px solid rgba(255,255,255,.7); }
.r-common { --rc: var(--r-common); } .r-uncommon { --rc: var(--r-uncommon); } .r-rare { --rc: var(--r-rare); }
.r-epic { --rc: var(--r-epic); } .r-mythic { --rc: var(--r-mythic); } .r-legendary { --rc: var(--r-legendary); }

.fan-card { position: absolute; left: 50%; bottom: 14%; width: clamp(118px, 34vw, 200px); transform-origin: 50% 100%;
  transition: transform .7s var(--ease-out), filter .7s ease; }
.fan-card .pill { font-size: 10px; }
.fan-card[data-pos="0"], .fan-card.fan-2:not([data-pos]) { z-index: 5; transform: translateX(-50%) translateY(-6%); filter: none; }
.fan-card[data-pos="-1"], .fan-card.fan-1:not([data-pos]) { z-index: 4; transform: translateX(calc(-50% - 78%)) scale(.797) rotate(-10deg); filter: brightness(.52); }
.fan-card[data-pos="1"], .fan-card.fan-3:not([data-pos]) { z-index: 4; transform: translateX(calc(-50% + 78%)) scale(.797) rotate(10deg); filter: brightness(.52); }
.fan-card[data-pos="-2"], .fan-card.fan-0:not([data-pos]) { z-index: 3; transform: translateX(calc(-50% - 139%)) scale(.656) rotate(-19deg); filter: brightness(.3); }
.fan-card[data-pos="2"], .fan-card.fan-4:not([data-pos]) { z-index: 3; transform: translateX(calc(-50% + 139%)) scale(.656) rotate(19deg); filter: brightness(.3); }
/* the lit hero card: rainbow light travels round a Legendary, gold round a Mythic */
.fan-card[data-pos="0"], .fan-card.fan-2:not([data-pos]) { overflow: visible; }
.fan-card[data-pos="0"] img, .fan-card.fan-2:not([data-pos]) img { border-radius: 7% / 4.67%; }
.fan-card[data-pos="0"]::after, .fan-card.fan-2:not([data-pos])::after { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 9% / 6%; background: var(--ring); filter: blur(10px); opacity: .9; animation: spin 8s linear infinite; }
.fan-card.r-mythic[data-pos="0"]::after { background: conic-gradient(from var(--spin, 0deg), #8f5d0c, #f2b31e, #ffd700, #fffbe6, #ffd700, #f2b31e, #8f5d0c); animation-duration: 6s; }
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.horizon { left: -6%; right: -6%; bottom: 13%; z-index: 6; }
.lightline { position: absolute; height: 3px; border-radius: 6px; background: var(--spectrum); }
.lightline::before { content: ""; position: absolute; inset: -12px 0; background: var(--spectrum); filter: blur(16px); opacity: .9; }
.lightline::after { content: ""; position: absolute; left: 47%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0, #fff 9%, rgba(255,255,255,.5) 24%, rgba(255,255,255,0) 60%); }
.lightline i { position: absolute; left: 47%; top: 50%; width: 46%; height: 3px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 42%, #fff 58%, rgba(255,255,255,0)); }
.lightline b { position: absolute; left: 47%; top: 50%; width: 3px; height: 30px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0)); }
/* below the horizon the cards' feet fade into the dark */
.fan-wrap::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 16%; z-index: 5; background: linear-gradient(rgba(2,3,15,0), var(--void)); pointer-events: none; }
.spark { position: absolute; z-index: 7; width: 14px; height: 14px; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 6px #fff); animation: breathe 2.9s ease-in-out infinite; }
.s1 { left: 18%; top: 14%; width: 11px; height: 11px; animation-duration: 2.3s; } .s2 { right: 16%; top: 22%; width: 17px; height: 17px; animation-duration: 3.1s; }
.s3 { left: 30%; top: 4%; width: 9px; height: 9px; animation-duration: 3.5s; } .s4 { right: 30%; top: 2%; width: 12px; height: 12px; animation-duration: 2.6s; }
.s5 { left: 8%; top: 46%; width: 19px; height: 19px; animation-duration: 3.3s; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
.stage-copy { position: relative; z-index: 8; text-align: center; padding: 0 var(--edge-pad); margin-top: -22px; }
.stage-copy .label { margin-bottom: 12px; }
.stage-copy h1 { display: inline-block; }
.lede { font-size: 18px; line-height: 1.5; color: #D9DDE8; max-width: 31em; margin: 18px auto 0; }
.store-name { font: 700 13px/1.4 var(--f-talk); color: var(--steel); margin: 14px auto 0; }
.see-more { position: absolute; z-index: 9; right: var(--edge-pad); bottom: 14px; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  font: 700 13px/1 var(--f-talk); color: rgba(238,241,247,.82); text-decoration: none; }
.see-more svg { width: 13px; height: 9px; }
.js .see-more { opacity: 0; transition: opacity .4s; } .js .see-more.on { opacity: 1; animation: blink .8s .4s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: .4; } }

/* ---------- 2. the day ---------- */
section { position: relative; scroll-margin-top: 64px; }
.day, .pull, .rarities, .collections, .quests, .faq, .join { padding: 96px 0 40px; }
.timeline { list-style: none; margin: 40px auto 0; padding: 0 0 0 30px; position: relative; display: grid; gap: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(#FCDF00, #FD8D00 20%, #F52481 45%, #7707F1 70%, #3828FB 90%, rgba(56,40,251,0)); opacity: .7; }
.beat { --gc: var(--g-common); position: relative; }
.beat:has(.g-uncommon) { --gc: var(--g-uncommon); } .beat:has(.g-rare) { --gc: var(--g-rare); } .beat:has(.g-epic) { --gc: var(--g-epic); }
.beat:has(.g-mythic) { --gc: var(--g-mythic); } .beat:has(.g-legendary) { --gc: var(--g-legendary); }
.beat::before { content: ""; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--void); border: 2px solid var(--steel); }
.beat.done::before { background: var(--gc); border-color: var(--gc); box-shadow: 0 0 10px var(--gc); }
.beat-time { display: block; font: 700 12px/1 var(--f-label); letter-spacing: .22em; text-transform: uppercase; color: var(--steel); margin-bottom: 10px; }
.goal { --gc: var(--g-common); position: relative; border-radius: 18px; padding: 16px 16px 14px; background: linear-gradient(color-mix(in srgb, var(--gc) 10%, #10152E), #0b0f22);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--gc) 45%, transparent), 0 14px 30px rgba(0,0,0,.45); max-width: 560px; }
.g-uncommon { --gc: var(--g-uncommon); } .g-rare { --gc: var(--g-rare); } .g-epic { --gc: var(--g-epic); } .g-mythic { --gc: var(--g-mythic); } .g-legendary { --gc: var(--g-legendary); }
.goal header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.flag { font: 800 11px/1 var(--f-talk); padding: 5px 9px; border-radius: 7px; color: #0b0b10; background: var(--gc); }
.f-legendary { background: linear-gradient(90deg, #ff6b6b, #ffa35c, #ffd84a, #c2f06a, #4ade80, #34d8ee, #7aa7ff, #b18cff, #e879f9); color: #14101c; }
.cat { font: 700 12px/1 var(--f-talk); color: var(--steel); }
.goal h3 { font: 800 21px/1.2 var(--f-talk); margin: 12px 0 4px; color: #fff; }
.goal p { margin: 0; font-size: 15px; line-height: 1.45; color: #C8CDDB; }
.bar { position: relative; height: 22px; margin: 12px 0 0; border-radius: 11px; background: rgba(255,255,255,.06); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rim-hair); }
.bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 50%, transparent), var(--gc)); }
.bar span { position: relative; display: block; text-align: center; font: 800 12px/22px var(--f-talk); color: #fff; text-shadow: 0 1px 2px #000; }
.goal footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.reward { display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1 var(--f-talk); color: #fff; }
.reward-ruby { color: var(--ink-ruby); } .reward-ruby svg { width: 16px; height: 16px; color: var(--ruby); filter: drop-shadow(0 0 5px rgba(255,26,31,.7)); }
.reward-roll::before { content: ""; width: 15px; height: 15px; border-radius: 4px; border: 2px solid #F1EFF7; background: radial-gradient(circle at 50% 50%, #F1EFF7 1.6px, transparent 2px); }
.claim { min-height: 44px; padding: 0 18px; border: 0; border-radius: 25px; font: 800 15px/1 var(--f-talk); cursor: pointer;
  color: #04240f; background: linear-gradient(#4ade80, #22c55e); box-shadow: 0 4px 0 #0f5e2d, 0 0 18px rgba(34,197,94,.45); transition: transform .09s, box-shadow .09s; }
.claim:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 #0f5e2d; }
html:not(.js) .claim { display: none; }
.claim[aria-pressed="true"] { background: #1b1a22; color: #8f8c99; box-shadow: none; cursor: default; }
.board-note { margin: 34px 0 0; padding: 16px 18px; border-radius: 18px; background: rgba(16,21,46,.6); box-shadow: inset 0 0 0 1px var(--rim-hair); color: #C8CDDB; font-size: 15px; max-width: 560px; }
.fly { position: fixed; z-index: 60; pointer-events: none; font: 800 15px/1 var(--f-talk); padding: 6px 10px; border-radius: 999px; background: rgba(8,6,12,.85); border: 1px solid rgba(255,255,255,.3); color: #fff; }

/* ---------- 3. the pull ---------- */
.pull { overflow: clip; }
.pull-stage { position: absolute; inset: 0; z-index: -1; }
.pull-rays { position: absolute; left: 50%; top: 58%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: .1;
  background: repeating-conic-gradient(from 4deg, #fff4b0 0deg 2.2deg, transparent 2.2deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 5%, transparent 65%); mask-image: radial-gradient(closest-side, #000 5%, transparent 65%); }
.pull-bloom { position: absolute; left: 50%; top: 58%; width: 520px; height: 420px; margin: -210px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,176,40,.32), rgba(190,110,255,.18) 60%, transparent); filter: blur(30px); }
.table { position: relative; width: min(100% - 2 * var(--edge-pad), 760px); margin: 34px auto 0; perspective: 900px; }
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot .pill { font-size: 9px; padding: 3px 6px; bottom: 6%; }
.slot.is-back img, .slot.is-back .pill { visibility: hidden; }
.slot.is-back { background: radial-gradient(60% 45% at 50% 50%, rgba(119,7,241,.35), transparent 70%), linear-gradient(160deg, #141a3a, #070918);
  box-shadow: inset 0 0 0 1px rgba(238,241,247,.28), 0 10px 22px rgba(0,0,0,.6); }
.slot.is-back::after { content: ""; position: absolute; inset: 22% 20%; background: url(brand/mark.webp) center / contain no-repeat; mix-blend-mode: screen; opacity: .55; }
.slot.flip { animation: flip .5s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes flip { from { transform: rotateY(90deg) scale(.92); } to { transform: none; } }
.slot.r-epic, .slot.r-mythic, .rung-card.r-epic, .rung-card.r-mythic { box-shadow: inset 0 0 0 1px var(--rim-card), 0 0 14px color-mix(in srgb, var(--rc) 65%, transparent), 0 10px 22px rgba(0,0,0,.6); }
.slot.r-legendary, .rung-card.r-legendary { box-shadow: inset 0 0 0 1px var(--rim-card), 0 0 16px rgba(210,119,255,.8), -5px 0 12px rgba(255,49,49,.45), 5px 0 12px rgba(41,121,255,.45); }
.slot.is-back.r-epic, .slot.is-back.r-mythic, .slot.is-back.r-legendary { box-shadow: inset 0 0 0 1px rgba(238,241,247,.28), 0 10px 22px rgba(0,0,0,.6); }
.slot::after, .rung-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.slot.flip.r-epic::after, .rung-card.r-epic::after { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); animation: sweep .85s calc(var(--d, 0s) + .35s) ease-out 1 both; }
.slot.flip.r-mythic::after, .rung-card.r-mythic::after { background: linear-gradient(115deg, transparent 35%, rgba(255,233,168,.7) 48%, #fff 50%, rgba(255,198,26,.6) 52%, transparent 65%); animation: sweep .95s calc(var(--d, 0s) + .35s) ease-out 1 both; }
.slot.flip.r-legendary::after, .rung-card.r-legendary::after { background: linear-gradient(115deg, transparent 30%, rgba(249,14,0,.45) 40%, rgba(252,223,0,.45) 45%, rgba(105,237,87,.45) 50%, rgba(2,157,251,.45) 55%, rgba(119,7,241,.45) 60%, transparent 70%); animation: sweep 1.6s calc(var(--d, 0s) + .35s) ease-out 1 both; }
@keyframes sweep { 0% { opacity: 1; transform: translateX(-100%); } 99% { opacity: 1; transform: translateX(100%); } 100% { opacity: 0; } }
.spot { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 20px; background: radial-gradient(closest-side, rgba(2,3,15,.6), rgba(2,3,15,.96)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.spot.on { display: grid; }
.spot-inner { display: grid; justify-items: center; gap: 12px; padding: 12px; }
.spot .card { width: min(64vw, 300px, calc((100svh - 200px) * .667)); overflow: visible; }
.spot .card img { border-radius: 7% / 4.67%; }
.spot .card::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 9% / 6%; opacity: .95; filter: blur(9px); background: color-mix(in srgb, var(--rc) 70%, transparent); }
.spot .card.r-legendary::after { background: var(--ring); filter: blur(12px); animation: spin 8s linear infinite; }
.spot .card.r-mythic::after { background: conic-gradient(from var(--spin, 0deg), #8f5d0c, #f2b31e, #ffd700, #fffbe6, #ffd700, #f2b31e, #8f5d0c); animation: spin 6s linear infinite; }
.spot-label { margin: 0; font: 700 12px/1.3 var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--chrome); text-align: center; }
.pull-controls { text-align: center; margin-top: 22px; }
.roll-buttons { display: flex; gap: 10px; justify-content: center; }
.roll { flex: 1; max-width: 210px; min-height: 54px; border: 0; border-radius: 27px; font: 800 18px/1 var(--f-talk); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .09s, box-shadow .09s, filter .2s; }
.roll-x1 { color: #16141e; background: linear-gradient(#ffffff, #f1eff7 55%, #e0dcea); box-shadow: 0 5px 0 #8c879c, 0 0 18px rgba(255,255,255,.3); }
.roll-x10 { color: #fff; background: linear-gradient(#8b3ee6, #7322c8 55%, #5c1699); box-shadow: 0 5px 0 #351059, 0 0 18px rgba(139,62,230,.5); }
.roll:active { transform: translateY(4px) scale(.985); box-shadow: 0 1px 0 #351059; }
.roll:hover { filter: brightness(1.06); }
.roll:disabled { opacity: .5; cursor: progress; }
.die { width: 16px; height: 16px; border-radius: 4px; border: 2px solid currentColor; background: radial-gradient(circle, currentColor 1.6px, transparent 2px); }
.glass-btn { min-height: 48px; padding: 0 22px; border-radius: 25px; border: 1px solid var(--rim-glass); background: var(--glass); color: #fff; font: 800 16px/1 var(--f-talk); cursor: pointer; }

/* ---------- 4. rarity ladder: each rung is lit from behind its card ---------- */
.ladder { list-style: none; margin: 36px auto 0; padding: 0; display: grid; gap: 12px; }
.rung { position: relative; isolation: isolate; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; padding: 12px 16px 12px 14px; border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, #0c1027), rgba(12,16,39,.5) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 28%, transparent); overflow: hidden; }
.rung::before { content: ""; position: absolute; z-index: -1; left: -34px; top: 50%; width: 170px; height: 170px; margin-top: -85px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 60%, transparent), transparent); filter: blur(6px); }
.rung.r-legendary { box-shadow: inset 0 0 0 1px rgba(210,119,255,.45); background: linear-gradient(90deg, rgba(119,7,241,.2), rgba(12,16,39,.5) 70%); }
.rung.r-legendary::before { background: conic-gradient(#F90E00, #FD8D00, #FCDF00, #69ED57, #00E5FB, #3828FB, #7707F1, #F52481, #F90E00); filter: blur(26px); opacity: .7;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.rung-card { width: 76px; }
.rung-card .pill { display: none; }
.rung h3 { margin: 0; font: 700 13px/1 var(--f-label); letter-spacing: .26em; text-transform: uppercase; color: var(--rc); }
.r-legendary h3 { color: #e7c4ff; }
.rung .pay { margin: 6px 0 2px; font: 800 24px/1.1 var(--f-talk); color: #fff; }
.r-common .pay { color: var(--ink-ruby); }
.rung p:not(.pay) { margin: 0; font-size: 14px; line-height: 1.4; color: #BCC2D2; }

/* ---------- 5. collections ---------- */
.shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 36px; }
.shelf { min-width: 0; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: min(100% - 2 * var(--edge-pad), 1080px); margin: 0 auto; }
.shelf-head .label { margin: 0; color: var(--chrome); }
.shelf-count { font: 700 12px/1 var(--f-talk); color: var(--steel); white-space: nowrap; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; width: min(100% - 2 * var(--edge-pad), 1080px); margin: 12px auto 0; padding: 0; }
.chips li { font: 700 12px/1 var(--f-talk); padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--rim-hair); color: #C8CDDB; }
.reel { list-style: none; margin: 14px 0 0; padding: 8px max(var(--edge-pad), calc((100% - 1080px) / 2)) 20px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--edge-pad), calc((100% - 1080px) / 2)); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #2a3156 transparent; }
.reel li { flex: none; width: clamp(128px, 38vw, 184px); scroll-snap-align: start; }
.reel-card { cursor: zoom-in; transition: transform .25s var(--ease-out); }
.reel-card:hover { transform: translateY(-3px); }
.reel-card.r-legendary { box-shadow: inset 0 0 0 1px var(--rim-card), 0 0 12px rgba(210,119,255,.7), -3px 0 8px rgba(255,49,49,.35), 3px 0 8px rgba(41,121,255,.35); }
.reel-card.r-mythic { box-shadow: inset 0 0 0 1px var(--rim-card), 0 0 12px rgba(234,179,8,.6); }
.reel-card.r-epic { box-shadow: inset 0 0 0 1px var(--rim-card), 0 0 10px rgba(186,104,200,.55); }
.reel-card .pill { font-size: 10px; }

/* ---------- 6. side quests ---------- */
.bento { list-style: none; margin: 36px auto 0; padding: 0; display: grid; gap: 12px; }
.quest { --qc: #81ecff; position: relative; border-radius: 20px; padding: 18px; background: linear-gradient(160deg, color-mix(in srgb, var(--qc) 12%, #10152E), #0a0d1f 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 30%, transparent); overflow: hidden; }
.quest h3 { margin: 14px 0 6px; font: 800 20px/1.2 var(--f-talk); }
.quest p { margin: 0; font-size: 15px; line-height: 1.45; color: #C8CDDB; }
.qi { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: color-mix(in srgb, var(--qc) 72%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--qc) 30%, #05060f), color-mix(in srgb, var(--qc) 10%, #05060f)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 55%, transparent), 0 0 26px color-mix(in srgb, var(--qc) 30%, transparent); }
.qi svg { width: 28px; height: 28px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--qc) 70%, transparent)); }
.q-brain { --qc: #81ecff; } .q-focus { --qc: #7dd3fc; } .q-forge { --qc: #ff8a4c; } .q-dungeon { --qc: #d277ff; } .q-streak { --qc: #9db4d0; }

/* ---------- 7. FAQ ---------- */
.faq details { max-width: 680px; margin-top: 10px; border-radius: 18px; background: rgba(16,21,46,.6); box-shadow: inset 0 0 0 1px var(--rim-hair); }
.faq details:first-of-type { margin-top: 32px; }
.faq summary { cursor: pointer; list-style: none; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; font: 800 17px/1.3 var(--f-talk); border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 9px; flex: none; background: var(--steel); transition: transform .2s;
  clip-path: polygon(0 22%, 16% 0, 50% 52%, 84% 0, 100% 22%, 50% 100%); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 18px 18px; color: #C8CDDB; font-size: 16px; }

/* ---------- 8. join ---------- */
.join { text-align: center; padding-top: 70px; padding-bottom: 60px; overflow: clip; }
.join .body { margin-inline: auto; }
.join-light { position: absolute; left: 50%; top: 40px; width: 300px; height: 300px; margin-left: -150px; border-radius: 40px; background: var(--spectrum-solid); filter: blur(70px); opacity: .2; z-index: -1; }
.join-mark { width: min(54vw, 240px); height: auto; margin: 0 auto 18px; mix-blend-mode: screen; }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 30px var(--edge-pad); border-top: 1px solid var(--rim-hair); color: var(--steel); font-size: 13px; }
.foot img { width: 140px; height: auto; margin: 0 auto 10px; mix-blend-mode: screen; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--steel); text-decoration-color: rgba(139,147,173,.55); }
.foot p { margin: 8px 0 0; }

/* ---------- dock: the one rainbow button ---------- */
.dock { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 10px var(--edge-pad) calc(6px + env(safe-area-inset-bottom)); background: var(--void); }
.dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; background: linear-gradient(rgba(2,3,15,0), var(--void)); pointer-events: none; }
.rainbow-button { position: relative; display: block; width: 100%; max-width: 440px; height: 61px; margin: 0 auto; text-decoration: none; border-radius: 28px; }
.rainbow-button::before { content: ""; position: absolute; left: 6%; width: 88%; top: 18px; height: calc(100% - 12px); border-radius: 30px; background: linear-gradient(90deg, var(--cta)); filter: blur(8px); opacity: .55; }
.rainbow-button::after { content: ""; position: absolute; inset: 5px 0 0; border-radius: 28px; background: linear-gradient(90deg, var(--cta-lip)); }
.rainbow-button .face { position: absolute; inset: 0 0 5px; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 52px;
  border-radius: 28px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 50%), linear-gradient(90deg, var(--cta));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.rainbow-button:active .face { transform: translateY(4px) scale(.985); transition-duration: 90ms; }
.rainbow-button:hover .face { filter: brightness(1.05); }
.rainbow-button:focus-visible { box-shadow: var(--focus-ring); }
.cta-label { font: 800 19px/1 var(--f-talk); }
.orb { position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.5); }
.orb svg { width: 12px; height: 16px; }
.shine { position: absolute; top: 0; bottom: 0; left: -70px; width: 46px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation: shine 4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes shine { 0%, 55% { left: -70px; } 100% { left: calc(100% + 70px); } }
.dock-note { margin: 7px 0 0; text-align: center; font-size: 12px; color: var(--steel); }

/* ---------- inspector ---------- */
.inspect { border: 0; padding: 24px 20px 20px; background: transparent; color: var(--chrome); max-width: min(440px, 100vw - 40px); width: 100%; text-align: center; overflow: visible; }
.inspect::backdrop { background: rgba(6,6,10,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.inspect-card { position: relative; width: min(74vw, 330px, calc((100svh - 220px) * .667)); margin: 0 auto; aspect-ratio: 2/3; border-radius: 7% / 4.67%; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rim-card), 0 30px 60px rgba(0,0,0,.7), 0 0 30px color-mix(in srgb, var(--rc, #d277ff) 50%, transparent); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out; }
.inspect-card img { width: 100%; height: 100%; object-fit: cover; }
.foil { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .55; pointer-events: none;
  background: radial-gradient(70% 50% at var(--fx, 50%) var(--fy, 30%), rgba(255,255,255,.4), transparent 60%),
    linear-gradient(115deg, transparent 30%, rgba(90,160,255,.16) 42%, rgba(255,236,170,.24) 50%, rgba(255,90,180,.14) 58%, transparent 70%); }
.inspect-name { margin: 16px 0 14px; font: 700 13px/1.4 var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); }
.inspect form { margin: 0; }

/* ---------- grain ---------- */
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .06; background-size: 256px 256px; image-rendering: pixelated; }

/* ---------- wider screens: the stage grows, the phone column stays ---------- */
@media (min-width: 720px) {
  :root { --edge-pad: 28px; }
  .hud-nav { display: flex; }
  .hud-mark { width: 40px; } .hud-word { width: 132px; }
  .fan-card { width: clamp(150px, 19vw, 210px); }
  .slots { gap: 12px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .quest { grid-column: span 2; } .q-brain, .q-forge { grid-column: span 3; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .timeline { padding-left: 0; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .timeline::before { left: 50%; margin-left: -1px; }
  .beat:nth-child(even) { transform: translateY(70px); }
  .beat:nth-child(odd)::before { left: auto; right: -39px; }
  .beat:nth-child(even)::before { left: -39px; }
  .beat:nth-child(odd) .goal { margin-left: auto; } .beat:nth-child(odd) .beat-time { text-align: right; }
  .day { padding-bottom: 110px; }
  .rung { grid-template-columns: 92px 1fr; } .rung-card { width: 92px; }
}
@media (min-width: 1100px) {
  .stage { flex-direction: row; align-items: center; justify-content: center; padding-bottom: 80px; }
  .fan-wrap { order: 2; flex: 1 1 52%; height: 520px; margin: 0; }
  .stage-copy { order: 1; flex: 1 1 44%; text-align: left; margin: 0; padding-left: max(40px, calc((100vw - 1240px) / 2)); }
  .stage-copy .lede { margin-left: 0; }
  .fan-card { width: 220px; }
  h1.impact { font-size: clamp(80px, 6vw, 104px); }
  .stage-copy { flex-basis: 46%; }
}

/* ---------- reduced motion: every loop stops, the still picture stays finished ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
  .shine, .spark, .spot .card::after, .fan-card::after { animation: none !important; }
  .js .see-more.on { animation: none; opacity: 1; }
  .sky-dawn { transform: none; opacity: .12; }
}

/* =====================================================================
   Revamp (Oct 14, 2026): founder feedback on page S
   ===================================================================== */

/* ---------- hero: store badges (styled after the live rolvana.app badges) ---------- */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px auto 0; }
.store { display: inline-flex; align-items: center; gap: 11px; min-height: 58px; padding: 0 20px; border-radius: 16px; background: #000;
  border: 1px solid rgba(255,255,255,.34); color: #fff; text-align: left; transition: transform .25s, box-shadow .25s; }
.store:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font: 400 11px/1 var(--f-talk); letter-spacing: .4px; opacity: .85; margin-bottom: 3px; }
.store strong { display: block; font: 700 19px/1 var(--f-talk); letter-spacing: .2px; }
@media (min-width: 1100px) { .stage-copy .stores { justify-content: flex-start; } }

/* ---------- goal cards, closer to the app's Goal card ---------- */
.g-common { --f1: #FFFFFF; --f2: #EDE9F6; --ink: #0B0B12; --glow: #FFFFFF; --seal: #16A34A; --icon: #F6F6FA; }
.g-uncommon { --f1: #92F6B5; --f2: #36D26D; --ink: #04240F; --glow: #36D26D; --seal: #16A34A; --icon: #6ED672; }
.g-rare { --f1: #A5F3FC; --f2: #22D3EE; --ink: #00262C; --glow: #22D3EE; --seal: #0E7490; --icon: #67E8F9; }
.g-epic { --f1: #EBC7F2; --f2: #C77DD4; --ink: #24062B; --glow: #BA68C8; --seal: #7E22CE; --icon: #D8A0E3; }
.g-mythic { --f1: #FDE68A; --f2: #EAB308; --ink: #2A1D00; --glow: #EAB308; --seal: #A16207; --icon: #F5CE53; }
.g-legendary { --f1: #FFF3A3; --f2: #FFEA00; --ink: #2A1D00; --glow: #FFEA00; --seal: #A16207; --icon: #FFE45C; }
.goal { padding: 16px 16px 16px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gc) 16%, transparent), transparent 55%), linear-gradient(color-mix(in srgb, var(--gc) 8%, #10152E), #0a0d1f); }
.goal::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); pointer-events: none; }
.g-legendary { box-shadow: inset 0 0 0 1px rgba(255,234,0,.45), 0 0 22px rgba(210,119,255,.25), 0 14px 30px rgba(0,0,0,.45); }
.goal header { flex-wrap: nowrap; gap: 10px; align-items: center; }
.gicon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--icon);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 26%, #05060f), color-mix(in srgb, var(--gc) 8%, #05060f));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 50%, transparent), 0 0 18px color-mix(in srgb, var(--gc) 28%, transparent); }
.gicon svg { width: 21px; height: 21px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gc) 70%, transparent)); }
.ghead { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.ghead .cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cadence { margin-left: auto; align-self: flex-start; flex: none; padding: 5px 10px; border-radius: 999px; font: 800 11px/1 var(--f-talk); letter-spacing: .02em; box-shadow: 0 2px 3px rgba(0,0,0,.45); }
.c-common { background: linear-gradient(#fff, #dedde6); color: #17151d; }
.c-uncommon { background: linear-gradient(#92f6b5, #3bd472); color: #04240f; }
.c-rare { background: linear-gradient(#a5f3fc, #22d3ee); color: #00262c; }
.c-epic { background: linear-gradient(#ebc7f2, #c77dd4); color: #24062b; }
.c-mythic { background: linear-gradient(#fde68a, #eab308); color: #2a1d00; }
.c-legendary { background: linear-gradient(90deg, #ff6b6b, #ffa35c, #ffd84a, #c2f06a, #4ade80, #34d8ee, #7aa7ff, #b18cff, #e879f9); color: #14101c; }
.goal h3 { margin: 14px 0 4px; }
.goal-foot { display: flex; align-items: center; margin-top: 12px; }
.reward { padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.reward svg { width: 17px; height: 17px; flex: none; }
.reward-ruby { color: #ff8a8a; }
.reward-roll::before { content: none; }
.bar { height: 24px; border-radius: 12px; }
.bar i { transition: width .35s var(--ease-out); border-radius: 12px; }
.bar span { line-height: 24px; }
.bar.bump { animation: bump .45s var(--ease-out); }
.actions { display: flex; gap: 10px; margin-top: 14px; padding-bottom: 2px; }

/* the app's depth button: a face on a black lip; pressing sinks it onto the lip */
.depth { position: relative; display: block; border: 0; padding: 0 0 5px; margin: 0; background: none; color: inherit; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.depth::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 0; border-radius: 25px; background: #000; }
.depth .face { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 25px; overflow: hidden;
  color: var(--ink, #0B0B12); font: 800 16px/1 var(--f-talk); background: linear-gradient(var(--f1, #fff), var(--f2, #EDE9F6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px color-mix(in srgb, var(--glow, #fff) 45%, transparent);
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1), filter .2s; }
.depth:hover:not(:disabled) .face { filter: brightness(1.05); }
.depth:active:not(:disabled) .face { transform: translateY(5px) scale(.99); transition-duration: 90ms; }
.depth:disabled { cursor: default; }
.depth:disabled .face { background: #1B1A22; color: #8F8C99; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.claim { flex: 1; min-height: 0; border-radius: 0; box-shadow: none; }
.claim:active { transform: none; box-shadow: none; }
.claim .disc { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; flex: none; }
.claim .disc svg { width: 15px; height: 15px; }
.claim:disabled .disc { background: #2A2933; color: #6F6C7A; }
.plus { flex: none; width: 84px; }
.plus .face { font-size: 18px; }
.sheen { position: absolute; top: 0; bottom: 0; left: -60px; width: 40px; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); opacity: 0; pointer-events: none; }
.goal.ready .claim .sheen { opacity: 1; animation: shine 4s cubic-bezier(.65,0,.35,1) infinite; }
.claim::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50px; border-radius: 25px; border: 2px solid var(--f2); opacity: 0; pointer-events: none; }
.claim.claim-ring::after { animation: claimring .6s var(--ease-out); }
@keyframes claimring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.5); } }
/* claimed: the face stays lit and the check seals (white faces turn mint with a green disc) */
.goal.sealed .claim:disabled .face { background: linear-gradient(var(--f1), var(--f2)); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.goal.sealed .claim .disc { background: #fff; color: var(--seal); animation: pop .4s var(--ease-out); }
.g-common.sealed .claim:disabled .face { background: linear-gradient(#F3FFF6, #DCF5E4); }
.g-common.sealed .claim .disc { background: #22C55E; color: #fff; }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
.fly { display: inline-flex; align-items: center; gap: 5px; }
.fly svg { width: 16px; height: 16px; }

/* the board makeup: three lit chips instead of a paragraph */
.board { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.bd { --bc: var(--g-uncommon); position: relative; padding: 16px 12px 14px; border-radius: 18px; text-align: center; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--bc) 22%, transparent), transparent 70%), rgba(16,21,46,.65);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent); }
.bd::before { content: ""; display: block; width: 9px; height: 9px; margin: 0 auto 10px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 10px var(--bc), 0 0 22px var(--bc); }
.bd b { display: block; font: 800 40px/1 var(--f-impact); color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--bc) 70%, transparent); }
.bd span { display: block; margin-top: 4px; font: 800 14px/1.2 var(--f-talk); color: #fff; }
.bd small { display: block; margin-top: 4px; font: 600 12px/1.3 var(--f-talk); color: var(--steel); }
.bd-daily { --bc: var(--g-uncommon); } .bd-weekly { --bc: var(--g-rare); } .bd-monthly { --bc: var(--g-mythic); }

/* pulls */
.roll .die { width: 20px; height: 20px; }
.roll-x1 .die { color: #16141e; filter: none; }
.roll-x1 .die use { color: #16141e; }
.dice2 { position: relative; display: inline-block; width: 28px; height: 24px; }
.dice2 .die { position: absolute; width: 19px; height: 19px; filter: drop-shadow(0 1px 1.5px rgba(40,0,70,.6)); }
.dice2 .die:first-child { left: 0; top: 5px; transform: rotate(-12deg); }
.dice2 .die:last-child { left: 9px; top: 0; transform: rotate(9deg); }
.slot { cursor: default; }

/* side quests: Brain Games wears pink */
.q-brain { --qc: #FF4FC1; }
.q-focus { --qc: #7dd3fc; }
.riddle, .focus { margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(2,3,15,.45); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 30%, transparent); }
.rd-tag { margin: 0 0 6px !important; font: 700 11px/1 var(--f-label) !important; letter-spacing: .24em; text-transform: uppercase; color: color-mix(in srgb, var(--qc) 75%, white) !important; }
.rd-prompt { margin: 0 0 12px !important; font: 700 16px/1.45 var(--f-talk) !important; color: #fff !important; }
.rd-form { display: flex; gap: 8px; align-items: flex-start; }
.riddle input, .riddle textarea { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: 600 16px/1.3 var(--f-talk); }
.riddle textarea { padding: 12px 14px; resize: vertical; min-height: 84px; }
.riddle input:focus, .riddle textarea:focus { outline: none; border-color: color-mix(in srgb, var(--qc) 80%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc) 30%, transparent); }
.depth.mini { flex: none; --f1: #FF8AD8; --f2: #FF4FC1; --ink: #2B0620; --glow: #FF4FC1; }
.q-focus .depth.mini { --f1: #BDE9FF; --f2: #7DD3FC; --ink: #062033; --glow: #7DD3FC; }
.rd-msg { min-height: 1.4em; margin: 10px 0 0 !important; font-size: 14px !important; }
.rd-msg.good { color: #86EFAC !important; } .rd-msg.bad { color: #FDBA74 !important; }
.rd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.link-btn { min-height: 44px; padding: 0 2px; border: 0; background: none; color: color-mix(in srgb, var(--qc) 70%, white); font: 800 14px/1 var(--f-talk); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--qc) 50%, transparent); }
.rd-maker label { display: block; margin-top: 10px; font: 700 13px/1.3 var(--f-talk); color: #C8CDDB; }
.rd-maker label input, .rd-maker label textarea { margin-top: 6px; }
.rd-play.solved .rd-prompt { color: #DCFCE7 !important; }
.focus { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.focus .rd-row { margin: 0; }
.focus-time { font: 800 44px/1 var(--f-impact); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; }
.focus.on .focus-time { text-shadow: 0 0 18px rgba(125,211,252,.8); }
@media (min-width: 720px) { .q-brain, .q-focus { grid-column: span 3; } .q-forge, .q-dungeon { grid-column: span 3; } }

/* join: duplicate rainbow button + store badges */
.join-cta { margin: 28px auto 0; max-width: 440px; }
.join .stores { margin-top: 18px; }
.foot-mark { width: 54px !important; margin-bottom: 4px !important; }

/* waitlist page */
.wl { padding-bottom: 0; }
.wl-hud { justify-content: space-between; }
.wl-back { font: 700 14px/1 var(--f-talk); color: var(--steel); text-decoration: none; padding: 15px 4px; }
.wl-back:hover { color: var(--chrome); }
.wl-main { min-height: 100svh; display: grid; place-items: center; padding: calc(90px + env(safe-area-inset-top)) var(--edge-pad) 48px; }
.wl-card { position: relative; isolation: isolate; width: min(100%, 520px); padding: 34px 22px 26px; border-radius: 28px; text-align: center; overflow: hidden;
  background: linear-gradient(rgba(16,21,46,.82), rgba(8,11,26,.92)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px rgba(0,0,0,.6); }
.wl-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
.wl-card .join-light { top: -40px; }
.wl-mark { width: 120px; height: auto; margin: 0 auto 14px; mix-blend-mode: screen; }
.wl-card h1.impact { font-size: clamp(48px, 13vw, 76px); }
.wl-perks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 8px; text-align: left; }
.wl-perks li { --bc: var(--g-uncommon); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 15px; color: #C8CDDB;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 32%, transparent); }
.wl-perks li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bc); box-shadow: 0 0 10px var(--bc); }
.wl-perks b { color: #fff; }
.wl-perks .bd-weekly { --bc: var(--g-rare); } .wl-perks .bd-monthly { --bc: var(--g-mythic); }
.wl-cta { margin-top: 26px; }
.wl .foot { border-top: 0; }

/* nothing decorative may widen the page on phones (pinch zoom / sideways drag used to expose it) */
.sky { overflow: hidden; }
.pull { overflow: hidden; overflow: clip; }
.fan-wrap { overflow: hidden; overflow: clip; overflow-clip-margin: 0; }
body { position: relative; overflow-x: hidden; overflow-x: clip; }
@media (max-width: 480px) {
  .stores { flex-wrap: nowrap; gap: 8px; }
  .store { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 10px; gap: 8px; border-radius: 14px; }
  .store svg { width: 22px; height: 22px; }
  .store small { font-size: 9.5px; white-space: nowrap; }
  .store strong { font-size: 15px; white-space: nowrap; }
}