/* One continuous page. Interactive components keep their own local controls. */
.mobile-copy { display:none; }

:root { --page-gutter:clamp(24px,4.2vw,72px); --header-height:88px; }
html { height:auto; scroll-behavior:smooth; scroll-padding-top:var(--header-height); overscroll-behavior-y:auto; }
body { height:auto; overflow:visible; overscroll-behavior-y:auto; }
main { overflow:clip; }
.header { left:0; right:0; padding:0 var(--page-gutter); height:var(--header-height); gap:20px; flex-wrap:nowrap; background:linear-gradient(#130f15aa,transparent); transition:background .25s,box-shadow .25s; }
.header .brand { margin-right:0; }
.section-nav { order:0; width:auto; margin-top:0; }
.header.is-scrolled { background:#140f17ed; backdrop-filter:blur(20px); box-shadow:0 8px 30px #0002; }
.header::after { content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--yellow); transform:scaleX(var(--scroll-progress,0)); transform-origin:left; }
.section-nav a { padding-inline:10px; }
.section-nav a>span { display:none; }
.section-nav a[aria-current=location]::after { left:10px; right:10px; }
.site-view { position:relative; inset:auto; scroll-margin-top:0; }
.content-view { padding:112px var(--page-gutter); overflow:visible; overscroll-behavior:auto; border-top:1px solid #ffffff0c; }
#modes.content-view { background:linear-gradient(135deg,#0e0b12aa,#21151e44); }
.view-inner { min-height:0; max-width:1280px; gap:48px; }
.display-title { font-size:clamp(50px,5.3vw,80px); }
.section-kicker { margin-bottom:24px; color:#b88a9f; }
.section-lead { font-size:16px; line-height:1.8; }
.view-heading>.section-lead { max-width:360px; }
.chapter-aside { line-height:2; }

/* A playable hero, with a clear route into the game and into the story. */
.game-view { --table-left:36%; --table-right:0px; --hero-copy:#ead6d2; --hero-muted:#cbb2b3; --hero-kicker:#ffb6a4; height:max(760px,100svh); max-height:1100px; isolation:isolate; background:#181016 radial-gradient(ellipse at 82% 45%,#6c344e80,transparent 72%); }
.game-view + .content-view { border-top:1px solid #ffffff2e; background:linear-gradient(180deg,#211821f5,transparent 320px); }
#cap-table { position:absolute; inset:100px var(--table-right) 172px var(--table-left); width:auto; height:auto; z-index:2; }
#cap-table canvas { mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,#000 72%,transparent); mask-composite:intersect; }
.intro { position:absolute; left:var(--page-gutter); top:clamp(155px,20vh,230px); width:44%; max-width:570px; pointer-events:none; }
.intro .eyebrow { display:flex; align-items:center; gap:9px; color:var(--hero-kicker); font-size:8px; letter-spacing:1.8px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 14px #ff474066; }
.intro h1 { font-size:clamp(62px,5.6vw,86px); letter-spacing:-1.5px; line-height:1.02; margin-top:25px; transform:rotate(-2deg); text-transform:uppercase; }
#table-title .chrome-line { background-image:linear-gradient(180deg,#fff 0%,#e0e4ec 24%,#b4bccc 42%,#8d97a8 54%,#bec6d6 72%,#eff1f8 92%,#bfc6d0 100%); }
#table-title .chrome-gold { background-image:linear-gradient(180deg,#fff8cd 0%,#ffe984 24%,#f5cc45 42%,#d5a826 55%,#ecc346 68%,#ffe999 86%,#d6a229 100%); }
.intro-copy { display:block; margin-top:28px; font-size:17px; line-height:1.75; max-width:400px; color:var(--hero-copy); }
.launch-button.start-game { border-radius:999px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:30px; pointer-events:auto; }
.hero-actions .launch-button { min-height:51px; min-width:160px; padding-inline:23px; font-size:11px; }
.chip-label { position:absolute; width:0; height:0; transform:none; z-index:4; pointer-events:none; }
.chip-hint-caption { position:absolute; left:0; top:-66px; transform:translateX(-50%); font-size:8px; letter-spacing:1.3px; color:var(--hero-copy); }
.chip-hint-hand { position:absolute; left:-14px; top:-3px; width:34px; height:40px; color:#f6ead7; opacity:.85; transform-origin:46% 8%; filter:drop-shadow(0 3px 4px #10091288); }
.chip-hint-hand svg { display:block; width:100%; height:100%; }
.bottom-ui { position:absolute; top:var(--table-controls-y,80%); bottom:auto; left:0; right:0; z-index:2; }
.bottom-ui .toolbar { padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; }
.bottom-ui .reset-button { min-height:44px; min-width:96px; padding:10px 16px; gap:7px; color:var(--hero-muted); background:#ffffff06; border:1px solid #ffffff1a; border-radius:999px; box-shadow:none; backdrop-filter:blur(10px); font-size:11px; font-weight:500; transition:color .2s,background .2s,border-color .2s; }
.bottom-ui .reset-button svg { width:14px; height:14px; flex:none; }
.bottom-ui .reset-button:hover { color:#f2efeb; background:#ffffff0d; border-color:#ffffff2e; }
.bottom-ui .reset-button:focus-visible { color:#f2efeb; }
.hero-proof { position:absolute; bottom:61px; left:var(--page-gutter); right:var(--page-gutter); padding-top:25px; gap:35px; }
.hero-proof article { justify-content:center; }
.hero-proof article+article { border-left:1px solid var(--line); }
.hero-proof h3 { font-size:14px; }
.hero-proof p { font-size:13px; color:var(--hero-muted); }
.hero-proof article>.proof-icon { display:flex; align-items:center; justify-content:center; width:36px; min-width:36px; height:36px; flex:none; }
.hero-proof .proof-icon svg { display:block; width:100%; height:100%; color:#bcbcbc; stroke-width:1.1; }
body[data-loading=true] { overflow:hidden; }
.loading { position:fixed; inset:0; height:auto; z-index:100; gap:28px; background:radial-gradient(ellipse at 50% 42%,#42243166,transparent 50%),#100d13; }
.loading-art { position:relative; width:148px; height:174px; perspective:700px; }
.loading-coin { position:relative; width:148px; height:148px; transform-style:preserve-3d; animation:loading-flip 2.4s cubic-bezier(.45,0,.2,1) infinite; }
.loading-face { position:absolute; inset:0; border-radius:50%; overflow:hidden; backface-visibility:hidden; }
/* The artwork already has a printed rim. Keep only a thin card edge between faces. */
.loading-coin::before { content:''; position:absolute; inset:.4px; border-radius:50%; background:#8c8170; box-shadow:0 0 0 .35px #514b43; }
.loading-front { transform:translateZ(.6px); }
.loading-back { transform:rotateY(180deg) translateZ(.6px); }
.loading-face img { display:block; width:100%; height:100%; object-fit:contain; }
.loading-back img { position:absolute; width:107.527%; height:107.527%; max-width:none; left:-3.763%; top:-1.613%; }
.loading-shadow { position:absolute; bottom:0; left:20%; width:60%; height:10px; border-radius:50%; background:#0009; filter:blur(6px); animation:loading-shadow 1.2s ease-in-out infinite; }
.loading p { max-width:310px; text-align:center; line-height:1.7; padding-inline:15px; font-size:11px; letter-spacing:1px; color:#c5b6c0; }
.loading a { color:var(--yellow); min-height:44px; align-items:center; }
.loading.failed a { display:inline-flex; }
.loading.failed .loading-coin,.loading.failed .loading-shadow { animation:none; }
@keyframes loading-flip { 0%,12% { transform:rotateZ(-12deg) rotateY(0); } 40%,58% { transform:rotateZ(-12deg) rotateY(180deg); } 88%,100% { transform:rotateZ(-12deg) rotateY(360deg); } }
@keyframes loading-shadow { 0%,100% { transform:scaleX(1); opacity:.7; } 50% { transform:scaleX(.5); opacity:.4; } }

/* Spacious sections replace the constrained slide layouts. */

.asset-layout { gap:80px; }
.asset-stage { height:420px; }
.feature-copy { min-height:205px; }
.feature-copy>p:last-child,.arena-copy>p { font-size:15px; }
.loop-select button { min-height:70px; padding:16px 20px; }
.loop-scene { height:365px; }
.loop-scene img { max-width:220px; }
.loop-big-number { font-size:340px; }
@media(min-width:761px) {
  #loop .loop-layout { grid-template-columns:1fr 1.1fr; }
  #loop .loop-detail { grid-column:1; grid-row:1; padding-left:0; border-left:0; padding-right:30px; border-right:1px solid #ffcd0033; }
  #loop .loop-scene { grid-column:2; grid-row:1; }
}
.arena-art { height:420px; }
.arena-copy { min-height:215px; }
.economy-intro .display-title { font-size:clamp(52px,5vw,75px); }
.economy-layout { gap:85px; }
.token-art { margin-top:30px; }
.economy-flow article { padding:27px 0; }
.economy-flow p { font-size:14px; }
.closing-strip { margin-top:65px; border:1px solid #ffcd0025; border-radius:24px; padding:54px 48px; background:radial-gradient(ellipse at 0 100%,#ff474018,transparent 65%),linear-gradient(130deg,#291b27b3,#18131cc9); }
.closing-strip h3 { font-size:clamp(36px,4vw,59px); }
.closing-strip p { font-size:14px; }
.closing-strip .closing-tagline { font-size:11px; margin-top:9px; }
.closing-actions { flex:none; }
.closing-actions .launch-button { min-width:190px; min-height:53px; }
.landing-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:33px var(--page-gutter); border-top:1px solid var(--line); background:#100d1366; }
.landing-footer .brand img { width:125px; }
.landing-footer p { color:#887782; font-size:8px; letter-spacing:1.2px; display:flex; gap:20px; }
.landing-footer .text-action { font-size:10px; }

#caps .view-heading { flex-direction:column; align-items:center; gap:20px; text-align:center; }
#caps .view-heading>.section-lead { flex:none; max-width:780px; margin:0; padding:0; font-size:20px; line-height:1.6; color:#d0c3cc; text-wrap:pretty; }
#caps .feature-select { border-radius:999px; }
#caps .feature-select button { border-radius:999px; transition:background-color .2s,color .2s; }
#caps .feature-select button[aria-pressed=true] { color:#fff; border-color:transparent; background:#d93632; box-shadow:none; }
#caps .feature-select button[aria-pressed=true]:hover { background:#c92e2b; }
#caps .feature-select button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#caps .frame-select { gap:12px; margin-top:16px; }
#caps .frame-select button { min-height:56px; padding:12px 14px; gap:10px; }
@media(min-width:761px) {
  #caps { padding-block:72px; }
  #caps .view-inner { gap:44px; }
  #caps .asset-layout { gap:clamp(48px,6vw,96px); }
  #caps .asset-stage { height:380px; }
  #caps .feature-copy { min-height:188px; padding:32px 0; }
  #caps .feature-options { padding-top:26px; }
  #caps .detail-kicker { display:none; }
  #caps .feature-copy h3 { margin:0 0 20px; }
}

@media(min-width:1600px) {
  :root { --page-gutter:max(60px,calc((100vw - 1380px)/2)); }
  .game-view { --table-right:calc(var(--page-gutter) - 65px); }
  .intro { max-width:580px; }
}
@media(min-width:761px) and (max-width:1050px) {
  #caps .view-heading>.section-lead { max-width:680px; font-size:18px; }
  .header { gap:12px; }
  .brand img { width:115px; }
  .header-actions { gap:8px; }
  .header .launch-button { padding:10px 12px; font-size:9px; gap:10px; }
  .section-nav { gap:0; }
  .section-nav a { font-size:10px; padding-inline:7px; }
  .intro { width:47%; }
  .game-view { --table-left:47%; }
  .intro h1 { font-size:62px; }
  .intro-copy { font-size:15px; max-width:320px; }
  .hero-actions { gap:16px; }
  .hero-proof { gap:20px; }
  .hero-proof article { gap:10px; }
  .hero-proof article>.proof-icon { width:30px; min-width:30px; height:30px; }
  .hero-proof p { font-size:12px; }

  .asset-layout,.loop-layout,.arena-layout,.economy-layout { gap:35px; }
  .asset-stage,.arena-art { height:350px; }
  .closing-strip { padding:36px 30px; gap:20px; }
  .closing-strip h3 { font-size:40px; }
}
@media(max-width:760px) {
  #caps { padding-block:56px; }
  #caps .view-inner { gap:32px; }
  #caps .view-heading { display:flex; gap:20px; }
  #caps .view-heading>.section-lead { max-width:100%; font-size:16px; line-height:1.7; }
  #caps .asset-layout { gap:28px; }
  #caps .asset-stage { height:280px; }
  #caps .feature-copy { padding:26px 0; }
  #caps .feature-copy h3 { margin-bottom:14px; }
  #caps .feature-options { padding-top:24px; }
  #caps .frame-select button { padding-inline:10px; gap:8px; }
  :root { --header-height:104px; --page-gutter:20px; }
  .mobile-copy { display:inline; }
  .desktop-copy { display:none; }
  .header { height:var(--header-height); padding:0 var(--page-gutter); display:grid; grid-template-columns:1fr auto; grid-template-rows:60px 44px; gap:0; align-items:center; background:#140f17ed; backdrop-filter:blur(16px); }
  .header .brand img { width:110px; }
  .header-actions { grid-column:2; grid-row:1; gap:6px; }
  .header .launch-button { min-height:40px; font-size:9px; padding:9px 11px; gap:12px; }
  .header .icon-button { width:40px; height:44px; }
  .section-nav { grid-column:1/-1; grid-row:2; position:static; width:auto; overflow-x:auto; justify-content:space-between; gap:0; margin:0 -7px; padding:0; border:0; scrollbar-width:none; }
  .section-nav a { min-height:44px; padding:8px 7px; font-size:10px; border-radius:0; flex:none; }
  .section-nav a[aria-current=location]::after { left:7px; right:7px; }
  .game-view { height:auto; min-height:0; max-height:none; display:flex; flex-direction:column; padding:130px var(--page-gutter) 28px; }
  .intro { position:relative; inset:auto; width:100%; max-width:520px; margin:auto; pointer-events:auto; }
  .intro h1 { font-size:clamp(38px,10.5vw,54px); line-height:1.05; letter-spacing:-.7px; margin:0; }
  .intro .eyebrow,.intro-copy,.hero-actions { display:none; }
  #cap-table { position:relative; inset:auto; order:2; width:calc(100% + var(--page-gutter)*2); height:clamp(300px,90vw,400px); margin:8px calc(-1 * var(--page-gutter)) var(--table-controls-space,36px); }
  #cap-table canvas { mask-image:linear-gradient(180deg,#000 82%,transparent); touch-action:none; }
  .chip-hint-caption { top:-47px; font-size:7px; }
  .chip-hint-hand { width:28px; height:33px; left:-12px; }
  .toolbar { gap:10px; padding:7px; }
  .reset-button { min-height:46px; padding-inline:20px; font-size:12px; }
  .hero-proof { position:relative; inset:auto; order:4; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-top:18px; }
  .hero-proof article { display:block; text-align:center; border:0!important; }
  .hero-proof article>.proof-icon { width:24px; min-width:24px; height:24px; margin:0 auto 10px; }
  .hero-proof h3 { font-size:12px; margin-bottom:5px; }
  .hero-proof p { font-size:11px; line-height:1.5; }
  .loading-art { width:124px; height:152px; }
  .loading-coin { width:124px; height:124px; }
  .content-view { top:auto; bottom:auto; padding:48px var(--page-gutter); overflow:visible; }
  .view-inner { min-height:0; gap:24px; }
  .view-heading { align-items:flex-start; gap:20px; }
  .display-title { font-size:clamp(32px,8.7vw,44px); line-height:1.06; }
  .section-kicker { margin-bottom:14px; font-size:8px; }
  .section-kicker>span { display:block; margin:0 0 7px; }
  .section-lead { font-size:14px; }
  .chapter-aside,.specimen-note,.detail-kicker,.quiet-label,.arena-art-top,.arena-caption,.mode-badge,.scene-baseline,.closing-copy>p { display:none; }

  .asset-layout,.loop-layout,.arena-layout { gap:20px; }
  .asset-stage { height:250px; }
  .feature-copy { min-height:0; padding:18px 0; }
  .feature-copy h3,.arena-copy h3 { font-size:28px; margin:0 0 9px; }
  .feature-copy>p:last-child,.arena-copy>p { font-size:14px; }
  .loop-select { gap:4px; }
  .loop-select button { min-height:48px; padding:10px 4px; justify-content:center; align-items:center; gap:0; }
  .loop-select button>span { display:none; }
  .loop-scene { height:225px; }
  .loop-scene img { max-width:160px; }
  .loop-big-number { font-size:220px; }
  .loop-detail h3 { font-size:32px; margin:0 0 9px; }
  .loop-detail .text-action { margin-top:9px; }
  .arena-art { height:250px; }
  .arena-scene { inset:12px 0; }
  .arena-copy { min-height:0; padding:18px 0; }
  .economy-layout { gap:24px; }
  .economy-intro .display-title { font-size:clamp(32px,8.7vw,44px); }
  .token-art { margin-top:18px; }
  .economy-flow article { padding:18px 0; }
  .economy-flow p { font-size:13px; }
  .closing-strip { margin-top:12px; padding:24px 20px; gap:20px; border-radius:18px; }
  .closing-strip h3 { font-size:30px; }
  .closing-strip p { font-size:13px; }
  .closing-actions { gap:20px; }
  .closing-actions .launch-button { min-height:49px; min-width:180px; }
  .social-links { gap:17px; flex-wrap:wrap; }
  .landing-footer { flex-wrap:wrap; gap:15px; padding:25px var(--page-gutter); }
  .landing-footer .brand img { width:110px; }
  .landing-footer .text-action { margin-left:auto; }
  .landing-footer p { order:3; width:100%; font-size:7px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }