/* Shared typography and interactive collection components. Page layout: landing.css. */
:root { --header-height:92px; --footer-height:76px; --page-gutter:40px; }
html, body { width:100%; height:100%; overscroll-behavior:none; }
button, a { touch-action:manipulation; }
.skip-content { position:fixed; top:12px; left:12px; z-index:50; padding:14px; background:var(--yellow); color:#100d13; transform:translateY(-150%); }
.skip-content:focus { transform:none; }
#section-content, #table-title { outline:none; }
.header { height:var(--header-height); z-index:12; gap:26px; }
.brand { flex:none; }
.brand img { width:142px; }
.header-actions { gap:16px; flex:none; }
.header-social { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid #ffffff1a; border-radius:50%; color:#cabfc7; background:#ffffff04; transition:color .2s,background .2s,border-color .2s; }
.header-social svg { display:block; width:19px; height:19px; }
.header-social:hover { color:#f2efeb; background:#ffffff0d; border-color:#ffffff2e; }

.section-nav { display:flex; align-items:center; justify-content:center; gap:5px; }
.section-nav a { position:relative; min-height:44px; display:flex; align-items:center; gap:6px; padding:8px 13px; border-radius:9px; color:#b3a5ae; font-size:11px; white-space:nowrap; transition:color .2s,background .2s; }
.section-nav a>span { color:#695b65; font-size:8px; }
.section-nav a:hover { color:#fff; background:#ffffff05; }
.section-nav a[aria-current=location] { color:var(--yellow); background:#ffcd0008; }
.section-nav a[aria-current=location]::after { content:''; position:absolute; bottom:0; left:13px; right:13px; height:2px; background:var(--yellow); box-shadow:0 0 16px #ffcd0055; }
.section-nav a[aria-current=location]>span { color:#a48936; }
.launch-button { display:inline-flex; justify-content:center; align-items:center; gap:23px; min-height:44px; padding:12px 18px; border:1px solid #ffe987; border-radius:10px; font-size:10px; font-weight:800; color:#302006; background:radial-gradient(ellipse at 26% 0%,#fff6b3,transparent 57%),linear-gradient(#ffdf4d,#ffcd00 54%,#f3b600); box-shadow:inset 0 2px 1px #fff9,inset 0 -2px 2px #bb7d0040,0 3px #b17408,0 5px #654116,0 8px 16px #0006; transition:transform .2s; white-space:nowrap; }
.launch-button:hover { transform:translateY(-2px); }
.launch-button:active { transform:translateY(2px); }
.launch-button>span { font-size:16px; }
.launch-button.large { min-height:54px; padding-inline:26px; font-size:12px; }
.site-view { position:fixed; inset:0; }
.content-view { top:var(--header-height); bottom:var(--footer-height); padding:30px var(--page-gutter); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#61414f transparent; }
.view-inner { width:100%; max-width:1280px; min-height:100%; margin:auto; display:flex; flex-direction:column; justify-content:center; gap:26px; }
.section-kicker { color:#ae8f9e; font-size:9px; font-weight:600; letter-spacing:1.7px; line-height:1.6; margin-bottom:19px; }
.section-kicker>span { color:var(--red); margin-right:24px; }
.display-title { font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; font-size:clamp(52px,5.5vw,80px); font-style:italic; font-weight:800; letter-spacing:-1px; line-height:.95; text-transform:uppercase; outline:none; }
.gold-text { color:var(--yellow); text-shadow:0 2px #735216,1px 4px #271913; }
.section-lead { font-size:13px; line-height:1.8; color:#bcaeb8; max-width:450px; }
.view-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.view-heading>.section-lead { padding-bottom:7px; }
.text-action { display:inline-flex; gap:20px; align-items:center; font:600 11px Inter,Arial,sans-serif; min-height:44px; color:#e2d4dc; background:none; border:0; padding:0; text-align:left; }
.text-action>span { color:var(--yellow); font-size:20px; }
.text-action:hover { color:var(--yellow); }

/* Four chapters, each with its own scene and the same collectible. */
.view-inner { gap:26px; }
.display-title { font-size:clamp(48px,4.7vw,72px); line-height:1; }
.view-heading .display-title { max-width:800px; }
.view-heading>.section-lead { max-width:330px; }
.section-lead { font-size:14px; line-height:1.7; }
.chapter-aside { font-size:9px; line-height:1.9; letter-spacing:1.5px; color:#9d7c8d; padding-bottom:5px; }
.detail-kicker,.quiet-label { font-size:9px; letter-spacing:1.4px; font-weight:600; color:#be8195; }
.quiet-label { color:#967c8c; font-size:8px; }
.specimen-orbit { position:absolute; width:78%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(35deg); border:1px solid #ff47403d; border-radius:50%; pointer-events:none; }
.specimen-orbit::after { content:''; position:absolute; inset:12%; border:1px solid #ffffff09; border-radius:50%; }
.specimen-note { position:absolute; top:12px; left:20px; font-size:8px; letter-spacing:2px; color:#987285; z-index:1; }
.specimen-tag { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); color:#bda2b0; font-size:9px; letter-spacing:1.8px; white-space:nowrap; text-transform:uppercase; }

.segmented-control { display:flex; padding:5px; gap:4px; border:1px solid var(--line); border-radius:12px; background:#ffffff03; }
.segmented-control button { flex:1; min-height:44px; padding:8px; border:1px solid transparent; border-radius:8px; background:none; color:#ae94a4; font-size:11px; font-weight:600; white-space:nowrap; }
.segmented-control button:hover { color:#eee1e8; background:#ffffff05; }
.segmented-control button[aria-pressed=true] { color:var(--yellow); border-color:#ffcd0044; background:#ffcd0009; box-shadow:inset 0 -2px #ffcd00; }

.proof-row { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:25px; border-top:1px solid var(--line); padding-top:22px; }
.proof-row article { display:flex; align-items:center; gap:15px; }
.proof-row article>span { font-size:30px; color:var(--red); min-width:30px; }
.proof-row article:last-child>span { color:var(--yellow); }
.proof-row h3 { font-size:12px; margin:0 0 7px; font-weight:600; }
.proof-row p { font-size:11px; line-height:1.5; color:#a98f9f; }

/* Caps: three views of an asset, with real rarity backs and frame previews. */
.asset-layout { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:65px; }
.asset-stage { position:relative; height:clamp(270px,39vh,390px); border:1px solid #ffffff12; border-radius:22px; overflow:hidden; background:radial-gradient(ellipse at 50% 50%,#ff474012,transparent 68%); }
.feature-visual { position:absolute; inset:0; }
.feature-visual img { object-fit:contain; filter:drop-shadow(0 4px #73553e) drop-shadow(0 16px 16px #0008); }
.supply-main,.supply-side { position:absolute; width:44%; max-width:230px; top:48%; left:50%; }
.supply-main { transform:translate(-50%,-50%) rotate(-8deg); z-index:2; }
.supply-left { transform:translate(-115%,-42%) rotate(-29deg) scale(.88); opacity:.8; }
.supply-right { transform:translate(15%,-42%) rotate(24deg) scale(.88); opacity:.8; }
.rarity-visual { --grade:#ffcd00; background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--grade) 12%,transparent),transparent 65%); }
.rarity-visual .specimen-orbit { border-color:var(--grade); opacity:.22; }
.rarity-visual>img { position:absolute; width:56%; max-width:280px; top:47%; left:50%; transform:translate(-50%,-50%) rotate(-10deg); filter:drop-shadow(0 16px 16px #0008); }
.rarity-visual .specimen-tag { color:var(--grade); }
.rarity-showcase { display:none; }
  .rarity-visual>#rarity-image { display:none; }
  .rarity-showcase { --rarity-rgb:194 207 225; --aura-strength:.28; display:block; position:absolute; top:47%; left:50%; width:min(68%,330px); aspect-ratio:636/608; transform:translate(-50%,-50%); isolation:isolate; }
  .rarity-showcase[data-grade=Rare] { --rarity-rgb:73 132 255; --aura-strength:.65; }
  .rarity-showcase[data-grade=Epic] { --rarity-rgb:245 96 176; --aura-strength:.53; }
  .rarity-showcase[data-grade=Legend] { --rarity-rgb:255 192 71; --aura-strength:.6; }
  .rarity-showcase[data-grade=Diamond] { --rarity-rgb:143 181 255; --aura-strength:.66; }
  .rarity-aura { position:absolute; inset:-22%; border-radius:50%; background:radial-gradient(ellipse,rgb(var(--rarity-rgb) / var(--aura-strength)),rgb(var(--rarity-rgb) / calc(var(--aura-strength) * .54)) 39%,rgb(var(--rarity-rgb) / .045) 62%,transparent 75%); filter:blur(23px); z-index:0; pointer-events:none; }
  .rarity-arrival-ring { position:absolute; top:50%; left:50%; width:94%; aspect-ratio:1; border:1px solid rgb(var(--rarity-rgb) / .6); border-radius:50%; transform:translate(-50%,-50%); opacity:0; z-index:0; pointer-events:none; }
  .rarity-showcase .rarity-face { position:absolute; top:50%; left:50%; width:90%; height:auto; transform:translate(-50%,-50%); filter:drop-shadow(0 12px 15px #0006); z-index:2; }
  .rarity-face-sheen { position:absolute; top:50%; left:50%; width:90%; aspect-ratio:1; transform:translate(-50%,-50%); mask:var(--rarity-mask) center/contain no-repeat; overflow:hidden; z-index:3; pointer-events:none; }
  .rarity-diamond-backing,.rarity-diamond-sheen,.rarity-diamond-star { display:none; }
  .rarity-showcase[data-grade=Diamond] .rarity-face { width:78%; }
  .rarity-showcase[data-grade=Diamond] .rarity-face-sheen { display:none; }
  .rarity-showcase[data-grade=Diamond] .rarity-diamond-backing { display:block; position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 14px 17px #0006); z-index:1; }
  .rarity-showcase[data-grade=Diamond] .rarity-diamond-sheen { display:block; position:absolute; inset:0; border-radius:19%; overflow:hidden; z-index:3; pointer-events:none; }
  .rarity-sheen-light { position:absolute; inset:-25% -50%; background:linear-gradient(108deg,transparent 38%,#fff3 46%,#fff9 50%,#fff3 54%,transparent 62%); opacity:0; transform:translateX(-100%); }
  .rarity-showcase[data-grade=Diamond] .rarity-diamond-star,.rarity-showcase[data-grade=Legend] .rarity-star-one,.rarity-showcase[data-grade=Legend] .rarity-star-two { display:block; position:absolute; width:var(--star-size,25px); height:var(--star-size,25px); background:#eef6ff; clip-path:polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%); opacity:.7; transform:scale(.8); z-index:4; }
  .rarity-showcase[data-grade=Legend] .rarity-diamond-star { background:#fff2c8; }
  .rarity-star-one { top:9%; left:4%; }
  .rarity-star-two { top:16%; right:4%; --star-size:18px; }
  .rarity-star-three { bottom:27%; right:-3%; --star-size:31px; }
  .rarity-star-four { bottom:9%; left:8%; --star-size:18px; }

#rarity-options[aria-busy=true] button { cursor:progress; }
.rarity-status,.frame-status { margin:12px 0 0; font-size:11px; color:#c5b6c0; }
.custom-frame { --frame-glow:130 205 63; --frame-mask:radial-gradient(circle at center,transparent 49.2%,#000 49.6%); position:absolute; width:72%; max-width:290px; aspect-ratio:1; top:47%; left:50%; transform:translate(-50%,-50%); isolation:isolate; }
.custom-frame[data-frame=fire] { --frame-glow:255 120 37; --frame-mask:url('../assets/caps/customization/fire-mask.svg'); }
.custom-frame[data-frame=headphones] { --frame-glow:153 112 255; --frame-mask:url('../assets/caps/customization/headphones-mask.svg'); }
.custom-frame[data-frame=pizza] { --frame-glow:255 187 70; }
.frame-glow { position:absolute; inset:-14%; z-index:0; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse at 50% 56%,rgb(var(--frame-glow) / .6),rgb(var(--frame-glow) / .34) 37%,rgb(var(--frame-glow) / .1) 58%,transparent 74%); filter:blur(20px); opacity:1; }
.custom-frame img { width:100%; height:100%; display:block; }
.custom-cap-art { position:absolute; inset:0; z-index:1; isolation:isolate; }
.custom-cap-art .custom-cap-face { position:absolute; top:14.5%; left:14.5%; z-index:0; width:71%; height:71%; border-radius:50%; }
/* Apply the shadow AFTER masking, so the complete foreground frame casts it
   onto the cap below, including the inside edge, ear pads and flame tips. */
.custom-frame-overlay { position:absolute; inset:0; z-index:2; pointer-events:none; filter:drop-shadow(0 3px 2px #100912b3) drop-shadow(0 12px 14px #0005); }
.custom-cap-art #frame-image { position:absolute; inset:0; -webkit-mask-image:var(--frame-mask); mask-image:var(--frame-mask); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }

#custom-options[aria-busy=true] button { cursor:progress; }
.feature-copy { padding:30px 0 22px; min-height:190px; }
.feature-copy h3,.arena-copy h3 { font:800 italic clamp(32px,3.4vw,48px)/1.1 'Barlow Condensed',Impact,sans-serif; text-transform:uppercase; margin:17px 0 14px; }
.feature-copy>p:last-child,.arena-copy>p { font-size:14px; color:#baa2b1; line-height:1.8; max-width:420px; }
.feature-options { border-top:1px solid var(--line); padding-top:21px; min-height:95px; }
.supply-collection-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:12px; font-weight:500; color:#c4b1bd; }
.supply-collection-link>span { color:var(--yellow); font-size:17px; }
.supply-collection-link[href]:hover { color:var(--yellow); }

.grade-select,.frame-select { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
.grade-select button,.frame-select button { min-height:44px; padding:9px 11px; border:1px solid #ffffff19; border-radius:8px; background:none; color:#a990a1; font-size:10px; }
.grade-select button[aria-pressed=true] { border-color:var(--grade); color:var(--grade); background:color-mix(in srgb,var(--grade) 8%,transparent); }
.frame-select button { display:flex; align-items:center; gap:8px; min-height:50px; padding:9px 10px; font-size:11px; transition:background .2s,border-color .2s,color .2s; }
.frame-select button:hover { background:#ffffff06; color:#f2efeb; }
.frame-select button[aria-pressed=true] { border-color:#ffcd0070; background:#ffcd000a; color:var(--yellow); }
.frame-select img { display:block; width:30px; height:30px; object-fit:contain; flex:none; }

/* Loop: one short visual sequence per step. */
.loop-select { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.loop-select button { display:flex; align-items:center; gap:15px; min-height:58px; padding:12px 16px; border:1px solid #ffffff18; border-radius:10px; background:#ffffff02; color:#ad94a4; font-size:12px; text-align:left; }
.loop-select button>span { color:#81546b; font-size:13px; }
.loop-select button[aria-pressed=true] { background:#ffcd000b; color:var(--yellow); border-color:#ffcd0055; }
.loop-select button[aria-pressed=true]>span { color:var(--yellow); }
.loop-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:65px; align-items:center; }
.loop-scene { position:relative; height:clamp(235px,33vh,340px); overflow:hidden; }
.loop-big-number { position:absolute; left:1%; top:0; font:800 280px/.95 'Barlow Condensed',Impact,sans-serif; letter-spacing:-10px; color:#fff; opacity:.035; }
.loop-scene img { position:absolute; top:45%; left:50%; width:33%; max-width:180px; filter:drop-shadow(0 4px #725038) drop-shadow(0 14px 16px #0008); transition:transform .7s,opacity .6s; }
.loop-main { z-index:2; transform:translate(-50%,-50%) rotate(-12deg); }
.loop-extra-left { transform:translate(-121%,-35%) rotate(-28deg) scale(.83); }
.loop-extra-right { transform:translate(23%,-35%) rotate(25deg) scale(.83); }
.scene-baseline { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); font:800 italic 30px/1 'Barlow Condensed',Impact,sans-serif; color:var(--yellow); letter-spacing:2px; }
.loop-vs { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); font:800 italic 55px/1 'Barlow Condensed',Impact,sans-serif; color:var(--yellow); opacity:0; z-index:3; }
.loop-token { position:absolute; display:grid; place-items:center; width:53px; height:53px; border-radius:50%; border:1px solid #ffe28c; color:#332206; background:linear-gradient(140deg,#fff4b2,#ffcd00 55%,#a7700c); box-shadow:0 4px #79510e,0 14px 22px #0008; font-size:13px; font-weight:800; opacity:0; transform:scale(.3); transition:opacity .5s,transform .65s; }
.token-a { left:22%; top:13%; }.token-b { right:17%; top:25%; }.token-c { left:46%; bottom:22%; }
/* Each scene uses its own artwork at every screen size. */
  .loop-scene>.loop-token,.loop-scene>.loop-vs { display:none; }

.loop-scene[data-step=upgrade] .loop-extra { transform:translate(-50%,-50%) scale(.1); opacity:0; }
.loop-scene[data-step=upgrade]>.loop-main { visibility:hidden; }
.loop-upgrade { display:none; position:absolute; top:45%; left:50%; width:min(60%,290px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:3; pointer-events:none; isolation:isolate; }
.loop-scene[data-step=upgrade] .loop-upgrade { display:block; }
.upgrade-glow { position:absolute; inset:-27%; z-index:-1; background:radial-gradient(ellipse,#ffcf8752 0%,#eb708e42 35%,#af537714 59%,transparent 72%); filter:blur(18px); }
.loop-scene .upgrade-backing { top:0; left:0; width:100%; height:100%; max-width:none; filter:drop-shadow(0 16px 20px #0007); transition:none; }
.loop-scene .upgrade-cap { top:49%; left:50%; width:76%; height:auto; max-width:none; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 1px #4c172b66) drop-shadow(0 10px 10px #0005); transition:none; z-index:1; }
.upgrade-sheen { position:absolute; inset:0; border-radius:16%; overflow:hidden; z-index:2; box-shadow:inset 0 0 0 1px #fff3; mix-blend-mode:screen; }
.upgrade-sheen::after { content:''; position:absolute; inset:-25% -50%; background:linear-gradient(105deg,transparent 35%,#fff5 46%,#fffbd9b3 50%,#fff3 54%,transparent 65%); opacity:0; transform:translateX(-110%); }
.upgrade-stars { position:absolute; inset:0; z-index:3; filter:drop-shadow(0 0 6px #fff1beaa); }
.upgrade-star { position:absolute; width:24px; height:24px; background:#fff4d4; clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); opacity:.65; transform:scale(.8); }
.star-one { top:13%; left:2%; --spark-delay:.65s; }
.star-two { top:4%; right:10%; width:18px; height:18px; --spark-delay:.95s; }
.star-three { top:48%; right:-4%; width:28px; height:28px; --spark-delay:1.2s; }
.star-four { bottom:10%; left:9%; width:16px; height:16px; --spark-delay:1.45s; }
.loop-scene[data-step=upgrade] .upgrade-backing { animation:upgrade-backing-reveal .85s .18s cubic-bezier(.2,.7,.2,1) both; }
.loop-scene[data-step=upgrade] .upgrade-cap { animation:upgrade-cap-reveal .8s .12s cubic-bezier(.2,.7,.2,1) both; }
.loop-scene[data-step=upgrade] .upgrade-glow { animation:upgrade-glow-reveal 1.4s .3s ease-out both; }
.loop-scene[data-step=upgrade] .upgrade-sheen::after { animation:upgrade-sheen 5.6s .9s ease-in-out infinite; }
.loop-scene[data-step=upgrade] .upgrade-star { animation:upgrade-twinkle 4.6s var(--spark-delay) ease-in-out infinite backwards; }
@keyframes upgrade-backing-reveal { from { opacity:0; transform:translateY(16px) scale(.75) rotate(-6deg); } to { opacity:1; transform:none; } }
@keyframes upgrade-cap-reveal { 0% { transform:translate(-50%,-50%) scale(.9); } 65% { transform:translate(-50%,-50%) scale(1.035); } 100% { transform:translate(-50%,-50%) scale(1); } }
@keyframes upgrade-glow-reveal { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes upgrade-sheen { 0% { opacity:0; transform:translateX(-110%); } 5% { opacity:.7; } 22%,100% { opacity:0; transform:translateX(110%); } }
@keyframes upgrade-twinkle { 0%,32%,100% { opacity:0; transform:scale(.25) rotate(-15deg); } 10% { opacity:1; transform:scale(1) rotate(0); } 22% { opacity:.2; transform:scale(.7) rotate(15deg); } }
@media(max-width:760px) { .loop-upgrade { width:min(57%,188px); } }
.loop-scene[data-step=play] .loop-main { transform:translate(-125%,-45%) rotate(-25deg); }
.loop-scene[data-step=play] .loop-extra-right { transform:translate(20%,-50%) rotate(25deg); }
@keyframes cap-duel-left { 0%{transform:translate(-170%,-45%) rotate(-32deg)}48%{transform:translate(-85%,-45%) rotate(-7deg)}72%{transform:translate(-138%,-48%) rotate(-30deg)}100%{transform:translate(-125%,-45%) rotate(-25deg)} }
@keyframes cap-duel-right { 0%{transform:translate(65%,-50%) rotate(32deg)}48%{transform:translate(-15%,-50%) rotate(7deg)}72%{transform:translate(34%,-53%) rotate(30deg)}100%{transform:translate(20%,-50%) rotate(25deg)} }
.loop-scene[data-step=play] .loop-main { animation:cap-duel-left 1s both; }
.loop-scene[data-step=play] .loop-extra-right { animation:cap-duel-right 1s both; }
.loop-scene[data-step=play] .loop-extra-left { opacity:0; }.loop-scene[data-step=play] .loop-vs { opacity:1; }
.loop-play { display:none; }
  .loop-scene[data-step=play]>.loop-main,.loop-scene[data-step=play]>.loop-extra,.loop-scene[data-step=play]>.loop-vs { visibility:hidden; animation:none; }
  .loop-play { position:absolute; inset:0 auto 0 50%; width:min(100%,540px); height:100%; transform:translateX(-50%); pointer-events:none; isolation:isolate; z-index:3; }
  .loop-scene[data-step=play] .loop-play { display:block; animation:duel-rumble 3.8s linear infinite; }
  .duel-halo { position:absolute; top:44%; left:50%; width:380px; height:260px; transform:translate(-50%,-50%); background:radial-gradient(ellipse,#ffb25720,#b3476120 45%,transparent 72%); filter:blur(16px); }
  .loop-scene .duel-cap { top:44%; left:50%; width:35%; max-width:190px; height:auto; transition:none; filter:drop-shadow(0 4px #634031) drop-shadow(0 15px 18px #0008); z-index:2; }
  .duel-cap-left { transform:translate(-132%,-50%) rotate(-18deg); }
  .duel-cap-right { transform:translate(32%,-50%) rotate(18deg); }
  .duel-vs { position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); color:#ffe372; font:900 italic 76px/1 'Barlow Condensed',Impact,sans-serif; text-shadow:0 3px #9d5429,0 6px #32171e,0 0 25px #ffb83b30; z-index:3; }
  .duel-trail { position:absolute; top:44%; left:50%; width:145px; height:64px; opacity:0; background:linear-gradient(90deg,transparent,#ffbc6b5c); clip-path:polygon(0 6%,100% 18%,100% 27%,12% 20%,100% 44%,100% 52%,0 45%,100% 73%,100% 83%,8% 80%,100% 94%,100% 100%,0 91%); z-index:1; }
  .duel-trail-left { transform:translate(-185%,-50%) rotate(-4deg); }
  .duel-trail-right { transform:translate(85%,-50%) rotate(184deg); }
  .duel-flash,.duel-shockwave,.duel-spark { position:absolute; top:44%; left:50%; opacity:0; z-index:4; }
  .duel-flash { width:68px; height:94px; transform:translate(-50%,-50%) scale(.2); background:#fff4c9; clip-path:polygon(50% 0,59% 30%,87% 11%,72% 42%,100% 50%,69% 60%,90% 88%,58% 71%,50% 100%,40% 70%,10% 88%,30% 59%,0 50%,31% 40%,12% 11%,42% 31%); filter:drop-shadow(0 0 12px #ffc25d); }
  .duel-shockwave { width:60px; height:60px; border:2px solid #ffe4a5; border-radius:50%; transform:translate(-50%,-50%) scale(.2); box-shadow:0 0 18px #ffc05b44,inset 0 0 14px #ffc05b22; }
  .duel-spark { width:4px; height:18px; border-radius:999px; background:linear-gradient(#fff4cc,#ffbc4b); box-shadow:0 0 8px #ffb94866; transform:translate(-50%,-50%) rotate(var(--angle)); }
  .loop-scene[data-step=play] .duel-cap-left { animation:duel-hit-left 3.8s both infinite; }
  .loop-scene[data-step=play] .duel-cap-right { animation:duel-hit-right 3.8s both infinite; }
  .loop-scene[data-step=play] .duel-vs { animation:duel-vs-impact 3.8s ease-out infinite; }
  .loop-scene[data-step=play] .duel-trail { animation:duel-trails 3.8s linear infinite; }
  .loop-scene[data-step=play] .duel-flash { animation:duel-flash-impact 3.8s ease-out infinite; }
  .loop-scene[data-step=play] .duel-shockwave { animation:duel-ring-impact 3.8s ease-out infinite; }
  .loop-scene[data-step=play] .duel-spark { animation:duel-sparks-impact 3.8s ease-out infinite; }

@keyframes duel-hit-left {
  0%,8%,48%,100% { transform:translate(-132%,-50%) rotate(-18deg); animation-timing-function:ease-out; }
  15% { transform:translate(-145%,-54%) rotate(-27deg); animation-timing-function:cubic-bezier(.7,0,1,.6); }
  23%,24% { transform:translate(-100%,-50%) rotate(-4deg) scale(1.02); animation-timing-function:cubic-bezier(.05,.9,.2,1); }
  34% { transform:translate(-142%,-60%) rotate(-30deg) scale(.98); animation-timing-function:ease-in-out; }
}
@keyframes duel-hit-right {
  0%,8%,48%,100% { transform:translate(32%,-50%) rotate(18deg); animation-timing-function:ease-out; }
  15% { transform:translate(45%,-45%) rotate(27deg); animation-timing-function:cubic-bezier(.7,0,1,.6); }
  23%,24% { transform:translate(0%,-50%) rotate(5deg) scale(1.02); animation-timing-function:cubic-bezier(.05,.9,.2,1); }
  34% { transform:translate(42%,-42%) rotate(32deg) scale(.98); animation-timing-function:ease-in-out; }
}
@keyframes duel-vs-impact { 0%,15%,48%,100% { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1); } 20%,29% { opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scale(.5); } 40% { opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scale(1.13); } }
@keyframes duel-trails { 0%,15%,28%,100% { opacity:0; } 19%,23% { opacity:.85; } }
@keyframes duel-flash-impact { 0%,22% { opacity:0; transform:translate(-50%,-50%) scale(.2); } 23%,24% { opacity:1; transform:translate(-50%,-50%) scale(1); } 30%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.35); } }
@keyframes duel-ring-impact { 0%,22% { opacity:0; transform:translate(-50%,-50%) scale(.2); } 23% { opacity:.9; transform:translate(-50%,-50%) scale(.6); } 38%,100% { opacity:0; transform:translate(-50%,-50%) scale(3); } }
@keyframes duel-sparks-impact { 0%,22% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(.3); } 24% { opacity:1; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(20px) scale(1); } 37%,100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(var(--travel)) scale(.2); } }
@keyframes duel-rumble { 0%,22%,29%,100% { transform:translateX(-50%); } 23%,26% { transform:translate(calc(-50% - 3px),2px); } 24.5%,27.5% { transform:translate(calc(-50% + 3px),-2px); } }
.loop-scene[data-step=stake] .loop-extra,.loop-scene[data-step=spend] .loop-extra { opacity:0; transform:translate(-50%,-50%) scale(.2); }
.loop-scene[data-step=stake] .loop-main { transform:translate(-50%,-38%) rotate(-12deg) scale(.85); }
.loop-scene[data-step=stake] .loop-token { opacity:1; transform:scale(1); }
.loop-scene[data-step=stake] .token-c { opacity:0; }
.loop-stake { display:none; }
/* Shared staking artwork; mobile scales the whole flight path. */
  .loop-scene[data-step=stake]>.loop-main,.loop-scene[data-step=stake]>.loop-token { visibility:hidden; }
  .loop-scene[data-step=stake] .loop-stake { display:block; }
  .loop-stake { position:absolute; inset:0 auto 0 50%; width:min(100%,520px); height:100%; transform:translateX(-50%); pointer-events:none; isolation:isolate; z-index:3; }
  .stake-halo { position:absolute; top:38%; left:50%; width:360px; height:310px; transform:translate(-50%,-50%); background:radial-gradient(ellipse,#ffd56422,#b6527220 42%,transparent 72%); filter:blur(17px); }
  .stake-ground { position:absolute; top:78%; left:50%; width:380px; height:40px; transform:translate(-50%,-50%); background:radial-gradient(ellipse,#ffcd002e,transparent 70%); filter:blur(6px); }
  .loop-scene .stake-cap { top:38%; left:50%; width:49%; max-width:260px; height:auto; transform:translate(-50%,-50%) rotate(-8deg); filter:drop-shadow(0 4px #593345) drop-shadow(0 16px 18px #0006); transition:none; z-index:2; }
  .stake-coin { display:contents; }
  .stake-coin-flight { position:absolute; left:50%; top:43%; width:var(--coin-size); height:var(--coin-size); offset-path:var(--flight-path); offset-rotate:0deg; offset-anchor:center; offset-distance:0%; opacity:0; z-index:3; }
  .loop-scene .stake-coin-flight img { position:static; display:block; width:100%; height:100%; max-width:none; object-fit:contain; filter:drop-shadow(0 5px 6px #0004); transition:none; }
  .loop-scene .stake-coin-rest { top:calc(43% + var(--land-y)); left:calc(50% + var(--land-x)); width:var(--coin-size); height:auto; max-width:none; transform:translate(-50%,-50%) rotate(var(--rest-angle)); filter:drop-shadow(0 3px 3px #0006); transition:none; z-index:4; }
  .stake-coin::after { content:''; position:absolute; top:calc(43% + var(--land-y) + 20px); left:calc(50% + var(--land-x)); width:42px; height:12px; border:1px solid #ffe18499; border-radius:50%; transform:translate(-50%,-50%); opacity:0; z-index:1; }
  .loop-scene[data-step=stake] .stake-cap { animation:stake-cap-shake 5.2s ease-in-out infinite; }
  .loop-scene[data-step=stake] .stake-coin-flight { animation:stake-coin-fall 5.2s var(--burst-delay) linear infinite both; }
  .loop-scene[data-step=stake] .stake-coin-flight img { animation:stake-coin-turn 5.2s var(--burst-delay) linear infinite both; }
  .loop-scene[data-step=stake] .stake-coin-rest { animation:stake-coin-land 5.2s var(--burst-delay) ease-out infinite both; }
  .loop-scene[data-step=stake] .stake-coin::after { animation:stake-coin-impact 5.2s var(--burst-delay) ease-out infinite both; }

@keyframes stake-cap-shake {
  0%,3%,26%,100% { transform:translate(-50%,-50%) rotate(-8deg); }
  6% { transform:translate(-50%,calc(-50% + 4px)) rotate(-11deg) scale(1.015,.985); }
  9%,15% { transform:translate(calc(-50% - 5px),calc(-50% - 7px)) rotate(-13deg); }
  12%,18% { transform:translate(calc(-50% + 5px),calc(-50% - 9px)) rotate(-3deg); }
  22% { transform:translate(-50%,calc(-50% - 2px)) rotate(-9deg); }
}
@keyframes stake-coin-fall {
  0%,8% { opacity:0; offset-distance:0%; transform:scale(.55) rotate(-20deg); }
  10% { opacity:1; }
  15% { opacity:1; offset-distance:43%; transform:scale(1.04) rotate(calc(var(--spin) * .45)); animation-timing-function:cubic-bezier(.4,0,.85,.5); }
  27% { opacity:1; offset-distance:100%; transform:scale(1) rotate(var(--spin)); }
  28%,100% { opacity:0; offset-distance:100%; transform:scale(1) rotate(var(--spin)); }
}
@keyframes stake-coin-land {
  0%,26% { opacity:0; transform:translate(-50%,-50%) rotate(var(--rest-angle)) scale(1); }
  28% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rest-angle)) scale(1.08,.87); }
  31% { opacity:1; transform:translate(-50%,calc(-50% - var(--bounce-height))) rotate(calc(var(--rest-angle) + 8deg)) scale(.97,1.03); animation-timing-function:ease-in; }
  35% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rest-angle)) scale(1.035,.95); }
  38% { opacity:1; transform:translate(-50%,calc(-50% - 3px)) rotate(calc(var(--rest-angle) - 3deg)); }
  41%,84% { opacity:1; transform:translate(-50%,-50%) rotate(var(--rest-angle)) scale(1); }
  96%,100% { opacity:0; transform:translate(-50%,calc(-50% + 4px)) rotate(var(--rest-angle)) scale(.96); }
}
@keyframes stake-coin-turn {
  0%,8%,27%,100% { transform:rotateY(0); }
  14% { transform:rotateY(65deg); }
  21% { transform:rotateY(-40deg); }
}
@keyframes stake-coin-impact {
  0%,26% { opacity:0; transform:translate(-50%,-50%) scale(.45); }
  28% { opacity:.7; transform:translate(-50%,-50%) scale(.8); }
  37%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.8); }
}
.loop-scene[data-step=spend] .loop-main { transform:translate(20%,-40%) rotate(15deg) scale(.75); }
.loop-scene[data-step=spend] .token-a { opacity:1; transform:translate(30%,80%) scale(1.6); }
.loop-scene[data-step=spend] .token-b { opacity:1; transform:translate(-175%,165%) scale(.9); }
.loop-spend { display:none; }
  .loop-scene[data-step=spend]>.loop-main,.loop-scene[data-step=spend]>.loop-extra,.loop-scene[data-step=spend]>.loop-token { visibility:hidden; }
  .loop-spend { position:absolute; inset:0 auto 0 50%; width:min(100%,520px); height:100%; transform:translateX(-50%); pointer-events:none; isolation:isolate; z-index:3; }
  .loop-scene[data-step=spend] .loop-spend { display:block; }
  .spend-glow { position:absolute; top:46%; left:50%; width:280px; height:280px; transform:translate(-50%,-50%); }
  .spend-glow::before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,#ffde5899 0%,#ffd33480 48%,#ffcf2e44 72%,#ffcf2e00 100%); filter:blur(26px); }
  .spend-pile { position:absolute; top:46%; left:50%; width:min(66%,330px); transform:translate(-50%,-50%); z-index:2; }
  .loop-scene .spend-pile img { position:static; display:block; width:100%; height:auto; max-width:none; filter:drop-shadow(0 13px 15px #0006); transition:none; }
  .loop-scene[data-step=spend] .spend-pile { animation:spend-stack-appear .85s cubic-bezier(.2,.7,.3,1) both; }
  .loop-scene[data-step=spend] .spend-glow { animation:spend-glow-appear 1.2s .15s ease-out both; }
  .loop-scene[data-step=spend] .spend-glow::before { animation:spend-glow-pulse 4.2s ease-in-out infinite; }

@keyframes spend-stack-appear {
  from { opacity:0; transform:translate(-50%,calc(-50% + 14px)) scale(.94); }
  to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes spend-glow-appear { from { opacity:0; } to { opacity:1; } }
@keyframes spend-glow-pulse {
  0%,100% { opacity:.7; transform:scale(.96); }
  50% { opacity:1; transform:scale(1.08); }
}
.loop-detail { padding-left:30px; border-left:1px solid #ffcd0033; }
.loop-detail h3 { margin:15px 0; font:800 italic 62px/1 'Barlow Condensed',Impact,sans-serif; text-transform:uppercase; }
.loop-detail p:last-child { font-size:15px; line-height:1.8; max-width:360px; color:#c1a8b9; }
.loop-detail .text-action { margin-top:25px; }

/* Modes: four distinct compositions from the supplied collection. */
.arena-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:center; }
.arena-art { position:relative; height:clamp(280px,40vh,410px); isolation:isolate; border-radius:22px; overflow:hidden; border:1px solid #ff47403b; background:#170f18; }
.arena-art::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#190e1580,#100b11bb),url('../assets/arena-fire.png') center/cover; opacity:.6; transition:opacity .3s,filter .3s; }
.arena-art[data-arena=pve]::before { opacity:.25; }.arena-art[data-arena=madness]::before { filter:hue-rotate(290deg); opacity:.7; }.arena-art[data-arena=boss]::before { opacity:.95; }
.arena-art-top { position:absolute; top:20px; left:23px; right:23px; display:flex; justify-content:space-between; font-size:8px; color:#c6a3ae; letter-spacing:1.3px; z-index:5; }
.arena-art-top>span:last-child { color:var(--yellow); }
.arena-caption { position:absolute; bottom:20px; left:23px; font-size:8px; letter-spacing:1.4px; color:#c6a3ae; z-index:5; }
.arena-scene { position:absolute; inset:35px 0 30px; }
.arena-scene img { position:absolute; object-fit:contain; filter:drop-shadow(0 3px #765336) drop-shadow(0 16px 16px #000a); }
.pvp-left,.pvp-right { width:33%; max-width:205px; top:50%; left:25%; transform:translate(-50%,-50%) rotate(-22deg); z-index:2; }
.pvp-right { left:75%; transform:translate(-50%,-40%) rotate(22deg); }
.arena-symbol { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-7deg); color:#ffe176; text-shadow:0 4px #956113,0 7px #211315; font:900 italic 80px/1 'Barlow Condensed',Impact,sans-serif; z-index:3; }
.arena-divider { position:absolute; left:50%; top:10%; height:80%; width:1px; background:linear-gradient(transparent,#ff474088,transparent); transform:rotate(16deg); }
.pve-player { width:31%; left:7%; top:33%; transform:rotate(-17deg); }
.pve-route { position:absolute; top:52%; left:29%; right:15%; height:1px; border-top:1px dashed #ffcd0066; transform:rotate(-20deg); }
.pve-enemy { width:18%; }.enemy-one { left:43%; top:53%; transform:rotate(12deg); }.enemy-two { left:60%; top:30%; transform:rotate(-12deg); }.enemy-three { left:77%; top:10%; transform:rotate(18deg); }
.route-label { position:absolute; bottom:8%; right:17%; font-size:10px; letter-spacing:4px; color:#d9a540; }
.madness-orbit { position:absolute; left:22%; top:12%; width:57%; aspect-ratio:1; border:1px dashed #c56ef466; border-radius:50%; transform:rotateX(45deg) rotate(-30deg); }
.madness-cap { width:22%; }.madness-one { top:1%; left:22%; transform:rotate(-35deg); }.madness-two { top:15%; right:12%; transform:rotate(28deg); }.madness-three { bottom:3%; right:25%; transform:rotate(48deg); }.madness-four { bottom:12%; left:10%; transform:rotate(-20deg); }
.infinity-symbol { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); font:600 110px/1 Georgia,serif; color:#f6cbff; text-shadow:0 0 25px #a155b3; }
.boss-halo { position:absolute; width:62%; aspect-ratio:1; right:7%; top:-4%; border:1px solid #ff474099; border-radius:50%; box-shadow:0 0 45px #ff474022,inset 0 0 45px #ff474022; }
.boss-cap { width:48%; right:12%; top:0; transform:rotate(14deg); }
.boss-ally { width:21%; bottom:2%; z-index:3; }.ally-one { left:12%; transform:rotate(-18deg); }.ally-two { left:29%; bottom:6%; transform:rotate(8deg); }.ally-three { left:46%; transform:rotate(24deg); }
.arena-select { flex-wrap:wrap; }.arena-select button { flex:1 0 40%; }
.arena-copy { padding:28px 0 22px; min-height:194px; }
.mode-badge { color:var(--red); font-size:8px; letter-spacing:1.7px; }
.arena-cta { align-self:flex-start; width:fit-content; }

/* Desktop game showcase. Keep the existing mobile arena while that layout is on hold. */
.modes-preview,.mode-card-index,.mode-card-description,.mode-card-arrow { display:none; }
  #modes.content-view { padding-block:clamp(36px,6vh,72px) clamp(48px,7vh,84px); }
  #modes>.view-inner { gap:clamp(24px,4vh,42px); }
  #modes .view-heading { justify-content:center; text-align:center; }
  #modes .view-heading .display-title { max-width:1100px; font-size:clamp(44px,4.9vw,72px); line-height:1.04; text-wrap:balance; }
  #modes .display-title br,#modes .chapter-aside { display:none; }
  #modes .section-kicker { margin-bottom:18px; }
  #modes .arena-layout { grid-template-columns:1fr 1.08fr; gap:clamp(36px,5vw,80px); }
  #modes .arena-art,#modes .arena-copy { display:none; }
  .modes-preview { --phone-height:clamp(410px,56vh,560px); display:block; position:relative; isolation:isolate; min-width:0; }
  .modes-preview-glow { position:absolute; inset:6% -12% 8%; z-index:-1; background:radial-gradient(ellipse,#b04f6440,transparent 66%); filter:blur(28px); transition:background .5s; }
  .modes-preview[data-mode=pve] .modes-preview-glow { background:radial-gradient(ellipse,#508b9e3b,transparent 66%); }
  .modes-preview[data-mode=madness] .modes-preview-glow { background:radial-gradient(ellipse,#b756823b,transparent 66%); }
  .modes-preview[data-mode=boss] .modes-preview-glow { background:radial-gradient(ellipse,#895ad84a,transparent 66%); }
  .game-phones { position:relative; height:var(--phone-height); perspective:1400px; }
  .game-phone { position:absolute; top:0; left:57%; height:100%; width:calc(var(--phone-height) * .474); margin:0; padding:6px; border:1px solid #b1a9b066; border-radius:32px; background:linear-gradient(135deg,#8c828b,#1a151d 23%,#3b303a 80%,#8e7889); box-shadow:inset 0 0 0 2px #0c0a0e,0 26px 40px #0007; transform:translateX(-50%) rotate(3deg); opacity:1; z-index:3; transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s,filter .55s; }
  .game-phone::before,.game-phone::after { content:''; position:absolute; width:3px; background:linear-gradient(#8f818c,#40343e); border-radius:2px; }
  .game-phone::before { right:-4px; top:23%; height:42px; }
  .game-phone::after { left:-4px; top:18%; height:53px; }
  .game-phone img { display:block; width:100%; height:100%; object-fit:contain; background:#000; border-radius:25px; }
  .game-phone[data-position=next] { transform:translateX(-99%) translateY(18px) rotate(-12deg) scale(.88); filter:brightness(.62) saturate(.75); opacity:.82; z-index:1; }
  .game-phone[data-position=hidden] { transform:translateX(-85%) translateY(32px) rotate(-12deg) scale(.82); opacity:0; visibility:hidden; z-index:0; }
  .modes-preview-caption { display:flex; align-items:center; justify-content:center; gap:10px; margin:28px 0 0; font-size:11px; color:#dfcbd5; }
  .mode-live-dot { width:5px; height:5px; border-radius:50%; background:#edaaa9; box-shadow:0 0 12px #f1797677; }
  .mode-preview-count { margin-left:14px; padding-left:20px; border-left:1px solid #ffffff24; color:#9a7c8c; font-size:9px; letter-spacing:1.5px; }
  .mode-preview-status { position:absolute; bottom:-30px; width:100%; text-align:center; font-size:11px; color:#efb3bc; }
  #modes .arena-info { min-width:0; display:flex; flex-direction:column; align-items:center; gap:28px; }
  #modes .arena-select { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; width:100%; background:none; border:0; border-radius:0; }
  #modes .arena-select button { position:relative; min-height:178px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:34px 20px 26px; border:1px solid #ffffff1c; border-radius:22px; background:linear-gradient(140deg,#ffffff06,#ffffff02); color:#f7eff2; text-align:center; box-shadow:none; transition:border-color .25s,background .25s,transform .25s; }
  #modes .arena-select button:hover { transform:translateY(-3px); border-color:#da81915c; background:#ffffff08; }
  #modes .arena-select button[aria-pressed=true] { border-color:#ee777866; background:radial-gradient(ellipse at 50% 0%,#d65f7040,transparent 100%),#572b39a6; box-shadow:inset 0 1px #ffc7ca12,0 14px 30px #0e07141a; color:#fff; }
  #modes .arena-select button:focus-visible { outline:2px solid #f6d3d5; outline-offset:4px; }
  #modes .mode-card-name { font:800 29px/1.1 'Barlow Condensed',Impact,sans-serif; letter-spacing:.2px; }
  #modes .mode-card-description { display:block; max-width:240px; font-size:13px; line-height:1.65; font-weight:400; color:#bfaab6; text-wrap:pretty; }
  #modes [aria-pressed=true] .mode-card-description { color:#ead2dc; }
  #modes .mode-card-index { display:block; position:absolute; top:14px; left:18px; color:#876675; font-size:9px; font-weight:500; letter-spacing:1px; }
  #modes [aria-pressed=true] .mode-card-index { color:#efacb1; }
  #modes .mode-card-arrow { display:block; position:absolute; top:11px; right:17px; font-size:18px; font-weight:400; color:#eeb6bb; opacity:0; transform:translate(-3px,3px); transition:opacity .2s,transform .2s; }
  #modes [aria-pressed=true] .mode-card-arrow { opacity:1; transform:none; }
  #modes .arena-cta { align-self:center; border-radius:999px; min-height:49px; padding-inline:26px; }


/* Economy and the closing invitation. */
.economy-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:65px; align-items:center; }
.economy-intro .display-title { font-size:clamp(48px,4.6vw,68px); max-width:650px; }
.token-art { position:relative; height:125px; max-width:360px; margin-top:16px; }
.token-art>img { position:absolute; width:103px; left:20px; top:10px; transform:rotate(-20deg); filter:drop-shadow(0 10px 15px #0008); }
.token-orbit { position:absolute; inset:22px 0 8px; border:1px solid #ffcd002e; border-radius:50%; transform:rotate(-7deg); }
.token-word { position:absolute; left:134px; top:15px; font:800 italic 90px/1 'Barlow Condensed',Impact,sans-serif; color:var(--yellow); text-shadow:0 3px #816018,0 6px #2d211b; }
.token-arrow { position:absolute; right:0; top:33px; font-size:49px; color:#aa7c1b; }
.economy-flow { position:relative; }
.economy-flow::before { content:''; position:absolute; top:30px; bottom:60px; left:17px; border-left:1px solid #ffcd0033; }
.economy-flow article { display:flex; gap:20px; align-items:flex-start; padding:20px 0; position:relative; }
.flow-number { display:grid; place-items:center; width:35px; height:35px; flex:none; border:1px solid #ffcd0044; border-radius:50%; color:var(--yellow); background:#24191e; font-size:10px; z-index:1; }
.economy-flow h3 { font-size:21px; margin:4px 0 10px; letter-spacing:-.4px; }
.economy-flow p { font-size:13px; line-height:1.8; color:#b79dad; max-width:320px; }
.economy-flow i { margin-left:auto; color:#b8913b; font-size:25px; font-style:normal; }
.economy-showcase,.economy-step-icon { display:none; }
@media(min-width:761px) {
  #economy.content-view { padding-top:clamp(40px,6vh,72px); background:radial-gradient(ellipse at 78% 18%,#60344c2b,transparent 55%),linear-gradient(180deg,#191019,#140e15); }
  #economy .economy-layout { grid-template-columns:1fr 1fr; column-gap:40px; row-gap:34px; align-items:center; }
  #economy .economy-intro .token-art { display:none; }
  #economy .economy-intro .section-kicker { margin-bottom:20px; }
  #economy .economy-intro .display-title { max-width:610px; font-size:clamp(38px,3.9vw,58px); line-height:1.06; letter-spacing:-.5px; }
  #economy .economy-currency { display:block; width:fit-content; margin-bottom:15px; font-size:clamp(98px,9.8vw,146px); line-height:.85; letter-spacing:-3px; background:linear-gradient(180deg,#fff0a3 0%,#ffe047 46%,#ffc613 65%,#c88223 100%); background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 4px #72452c) drop-shadow(0 9px 16px #0004); }
  #economy .economy-headline { display:block; }
  .economy-showcase { display:block; position:relative; width:100%; max-width:540px; height:clamp(285px,40vh,355px); margin-inline:auto; isolation:isolate; }
  .economy-token-glow { position:absolute; inset:-18%; background:radial-gradient(ellipse,#efb65521,#b2577620 40%,transparent 68%); filter:blur(24px); z-index:-1; }
  .economy-orbits { position:absolute; width:100%; height:100%; overflow:visible; stroke:#eab57754; stroke-width:1; }
  .economy-orbit-back { stroke:#c5819e38; stroke-dasharray:3 7; }
  .economy-ground { position:absolute; left:15%; right:0; bottom:0; height:30px; background:radial-gradient(ellipse,#05020799,transparent 70%); filter:blur(7px); }
  .economy-coin-stack { position:absolute; width:34%; max-width:184px; height:auto; left:11%; top:44%; transform:rotate(-8deg); filter:drop-shadow(0 15px 15px #0005); z-index:2; }
  .economy-main-coin { position:absolute; width:57%; max-width:305px; left:38%; top:0; transform:rotate(-10deg); filter:drop-shadow(0 20px 20px #0005); z-index:3; }
  .economy-main-coin img { display:block; width:100%; height:auto; }
  .economy-coin-sheen { position:absolute; inset:0; overflow:hidden; mask:url('../assets/caps/stake/cg-coin.webp') center/contain no-repeat; }
  .economy-coin-sheen::after { content:''; position:absolute; inset:-30% -40%; opacity:0; background:linear-gradient(108deg,transparent 38%,#fff9 50%,transparent 62%); transform:translateX(-100%); }
  .economy-small-coin { position:absolute; width:19%; max-width:105px; height:auto; left:76%; top:70%; transform:rotate(12deg); filter:drop-shadow(0 9px 9px #0005); z-index:4; }
  .economy-spark { position:absolute; width:24px; height:24px; background:#fff4d1; clip-path:polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%); opacity:.6; z-index:5; }
  .economy-spark-one { left:44%; top:12%; --spark-delay:.8s; }
  .economy-spark-two { right:5%; top:55%; width:16px; height:16px; --spark-delay:1.3s; }
  body[data-section=economy] .economy-main-coin { animation:economy-coin-float 6s ease-in-out infinite; }
  body[data-section=economy] .economy-small-coin { animation:economy-small-float 5s .5s ease-in-out infinite; }
  body[data-section=economy] .economy-coin-sheen::after { animation:economy-coin-sheen 6s .6s ease-in-out infinite; }
  body[data-section=economy] .economy-spark { animation:economy-sparkle 5s var(--spark-delay) ease-in-out infinite backwards; }
  #economy .economy-flow { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  #economy .economy-flow::before { display:none; }
  #economy .economy-flow article { display:block; min-height:174px; padding:21px 24px 24px; border:1px solid #d9a6bb24; border-radius:20px; background:linear-gradient(125deg,#ffffff06,#ffffff01); }
  #economy .economy-flow article:first-child { border-color:#e9c17145; background:radial-gradient(ellipse at 0 0,#d4a34213,transparent 80%),#ffffff03; }
  #economy .economy-flow article:not(:last-child)::after { content:''; position:absolute; top:28px; right:-23px; width:26px; height:26px; border:1px solid #ffffff1a; border-radius:50%; background:#241821 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23c0a2b0' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h8M8 4l3 3-3 3'/%3E%3C/svg%3E") center/14px no-repeat; z-index:2; }
  #economy .flow-number { display:block; width:auto; height:auto; border:0; background:none; font-size:10px; line-height:22px; letter-spacing:2px; color:#a98999; }
  #economy .economy-flow article:first-child .flow-number { color:#e1bb6b; }
  #economy .economy-step-icon { display:block; position:absolute; top:19px; right:25px; width:29px; height:29px; color:#c99da9; }
  #economy .economy-flow article:first-child .economy-step-icon { color:#f1cf7a; }
  .economy-step-icon svg { width:100%; height:100%; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  #economy .economy-flow h3 { font:700 27px/1.15 'Barlow Condensed',Impact,sans-serif; letter-spacing:0; margin:20px 0 9px; color:#f8eff4; }
  #economy .economy-flow p { max-width:310px; color:#bca6b4; font-size:13px; line-height:1.7; }
  #economy .economy-flow i { display:none; }
}
@keyframes economy-coin-float { 0%,100% { transform:translateY(0) rotate(-10deg); } 50% { transform:translateY(-9px) rotate(-6deg); } }
@keyframes economy-small-float { 0%,100% { transform:translateY(0) rotate(12deg); } 50% { transform:translateY(-7px) rotate(5deg); } }
@keyframes economy-coin-sheen { 0% { opacity:0; transform:translateX(-100%); } 8% { opacity:.55; } 29%,100% { opacity:0; transform:translateX(100%); } }
@keyframes economy-sparkle { 0%,35%,100% { opacity:0; transform:scale(.2) rotate(-12deg); } 10% { opacity:1; transform:scale(1) rotate(0); } 23% { opacity:.3; transform:scale(.65) rotate(12deg); } }
.closing-strip { display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid #ff474036; padding-top:25px; }
.closing-strip h3 { font:800 italic 36px/1.1 'Barlow Condensed',Impact,sans-serif; text-transform:uppercase; margin:0 0 10px; }
.closing-strip h3>span { color:var(--yellow); }
.closing-strip p { font-size:12px; color:#bea5b5; line-height:1.7; }
.closing-strip .closing-tagline { color:#846c7b; font-size:10px; margin-top:8px; }
.closing-actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:none; }
.social-links { display:flex; gap:17px; }.social-links a { display:flex; align-items:center; min-height:30px; font-size:9px; color:#b092a5; }.social-links a:hover { color:var(--yellow); }
body[data-section=economy] .footer-brand>span:last-child { display:none; }

/* Keep chapters within the viewport; small screens scroll inside the active chapter. */
@media(min-width:1600px) { :root { --page-gutter:60px; }.view-inner { max-width:1420px; } }
@media(max-width:1180px) { .header { gap:16px; }.brand img { width:125px; }.section-nav a { padding-inline:9px; font-size:10px; }.section-nav a>span { display:none; }.header-actions { gap:10px; }.header .launch-button { gap:12px; padding-inline:12px; }.asset-layout,.loop-layout,.arena-layout,.economy-layout { gap:30px; } }
@media(max-width:960px) { :root { --header-height:130px; --page-gutter:28px; }.header { flex-wrap:wrap; align-content:center; gap:0; }.brand { margin-right:auto; }.section-nav { order:3; width:100%; margin-top:13px; justify-content:space-between; }.section-nav a { padding:8px 15px; }.header .icon-button { width:40px; height:40px; }.header .launch-button { min-height:40px; }.intro { top:25%; }.content-view { padding-block:24px; }.view-inner { gap:23px; }.view-heading { gap:25px; }.display-title { font-size:48px; }.view-heading>.section-lead { max-width:250px; font-size:12px; }.launch-button.large { padding-inline:18px; }.proof-row { gap:15px; }.proof-row article { gap:10px; }.proof-row article>span { font-size:24px; min-width:23px; }.segmented-control button { font-size:10px; padding:7px 5px; }.loop-select { gap:6px; }.loop-select button { padding:10px; gap:8px; font-size:11px; }.economy-flow h3 { font-size:19px; }.feature-copy>p:last-child,.arena-copy>p { font-size:13px; } }
@media(max-width:1050px) { .frame-select { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }
@media(max-width:760px) {
  :root { --header-height:122px; --footer-height:64px; --page-gutter:22px; }
  .header { left:var(--page-gutter); right:var(--page-gutter); padding-top:8px; padding-bottom:5px; }.brand img { width:115px; }.header-actions { gap:10px; }.header .launch-button { font-size:9px; padding:9px 12px; gap:12px; }
  .section-nav { margin-top:8px; gap:0; }.section-nav a { font-size:9px; min-height:43px; padding:8px 7px; }.section-nav a[aria-current=location]::after { left:7px; right:7px; }
  .intro { top:151px; left:25px; }.intro h1 { font-size:55px; }.intro-copy { font-size:9px; margin-top:13px; }
  .content-view { padding:24px var(--page-gutter) 28px; }.view-inner { min-height:100%; gap:24px; justify-content:flex-start; }
  .section-kicker { font-size:8px; letter-spacing:1.2px; margin-bottom:13px; }.section-kicker>span { margin-right:12px; }.display-title { font-size:clamp(39px,9.8vw,60px); letter-spacing:-.5px; }.section-lead { font-size:13px; line-height:1.7; }.wide-only { display:none; }.view-heading { display:block; }.view-heading>.section-lead { max-width:460px; margin-top:15px; padding:0; font-size:13px; }.chapter-aside { display:none; }
  .launch-button.large { font-size:11px; min-height:46px; }.text-action { font-size:11px; gap:12px; }
  .proof-row { width:100%; gap:17px; padding-top:21px; }.proof-row article { display:block; }.proof-row article>span { display:block; font-size:23px; margin-bottom:10px; }.proof-row h3 { font-size:11px; margin-bottom:6px; }.proof-row p { font-size:11px; }
  .asset-layout { display:flex; flex-direction:column; gap:24px; }.asset-stage { height:245px; width:100%; max-width:480px; flex:none; }.asset-info { width:100%; }.feature-copy { min-height:0; padding:22px 0; }.feature-copy h3,.arena-copy h3 { font-size:36px; margin:14px 0 10px; }.feature-copy>p:last-child,.arena-copy>p { font-size:13px; }.feature-options { min-height:0; padding-top:18px; }.segmented-control button { font-size:11px; }.specimen-tag { font-size:8px; bottom:15px; }.specimen-note { font-size:7px; left:16px; }.supply-main,.supply-side { max-width:158px; }.rarity-visual>img { max-width:180px; }.custom-frame { max-width:220px; }.grade-select { gap:5px; }.grade-select button { padding:8px; }
  .loop-select { gap:4px; }.loop-select button { flex-direction:column; align-items:flex-start; gap:9px; min-height:64px; padding:10px 8px; font-size:10px; }.loop-select button>span { font-size:12px; }.loop-layout { display:flex; flex-direction:column; gap:22px; }.loop-scene { width:100%; max-width:480px; height:235px; flex:none; }.loop-big-number { font-size:225px; }.loop-detail { width:100%; padding-left:20px; }.loop-detail h3 { font-size:45px; margin:13px 0; }.loop-detail p:last-child { font-size:13px; }.loop-detail .text-action { margin-top:15px; }.loop-token { width:43px; height:43px; font-size:11px; }.loop-spark { font-size:34px; }.scene-baseline { font-size:26px; }
  .arena-layout { display:flex; flex-direction:column; gap:24px; }.arena-art { width:100%; max-width:540px; height:250px; flex:none; }.arena-art-top { top:16px; left:17px; right:17px; font-size:7px; }.arena-caption { bottom:15px; left:17px; font-size:7px; }.arena-info { width:100%; }.arena-select button { flex-basis:20%; font-size:10px; padding-inline:3px; }.arena-copy { padding:22px 0; min-height:155px; }.arena-symbol { font-size:60px; }.infinity-symbol { font-size:85px; }.mode-badge { font-size:8px; }
  .economy-layout { display:flex; flex-direction:column; gap:20px; }.economy-intro { width:100%; }.economy-intro .display-title { font-size:clamp(40px,10.2vw,63px); }.token-art { height:108px; margin-top:18px; max-width:310px; }.token-art>img { width:85px; }.token-word { font-size:77px; left:118px; top:12px; }.token-arrow { font-size:43px; top:28px; }.economy-flow { width:100%; }.economy-flow article { padding:17px 0; gap:15px; }.economy-flow h3 { font-size:18px; margin-top:4px; }.economy-flow p { font-size:12px; }.economy-flow i { font-size:22px; }.closing-strip { flex-direction:column; align-items:flex-start; gap:21px; padding-top:24px; }.closing-strip h3 { font-size:32px; }.closing-strip p { font-size:12px; }.closing-strip .closing-tagline { font-size:11px; }.closing-actions { align-items:flex-start; width:100%; }.closing-actions .launch-button { min-width:155px; }.social-links { gap:22px; }.social-links a { font-size:10px; min-height:40px; }
}
@media(max-height:690px) and (max-width:760px) { .intro { top:142px; }.intro h1 { font-size:46px; }.intro-copy { display:none; } }
@media(prefers-reduced-motion:reduce) { .content-view.is-entering .view-inner { animation:none; }.loop-scene[data-step=upgrade] .loop-spark { opacity:.8; } }