/* polish pass (Claude, 2026-11-03) */
/* 3D dice layers follow the art's own motion transform */
.scene{position:relative}
.dice3d-wrap{position:absolute;pointer-events:none;transform-origin:50% 50%;z-index:2}
.dice3d-stage{position:absolute}
.dice3d-stage canvas,.die3d canvas{display:block;width:100%!important;height:100%!important}
.die3d{width:100%;height:100%}
.flight-object.die{filter:none}
/* House: winning markets light on the felt after each roll */
.house-zones{position:absolute;inset:0;pointer-events:none}
.house-zones i{position:absolute;opacity:0;transition:opacity .35s ease}
.house-zones i.win{opacity:1;animation:zonepulse 1.1s ease-out 1}
@keyframes zonepulse{0%{opacity:0}35%{opacity:1}60%{opacity:.75}100%{opacity:1}}
/* Cropped border sprites, measured against the full 1585 x 992 art. */
.house-zones i[data-z=even]{left:27.06624606%;top:22.47983871%;width:23.91167192%;height:15.22177419%;background:url(assets/house-zone-even.webp?v=h1) center/100% 100% no-repeat}
.house-zones i[data-z=odd]{left:49.46372240%;top:22.58064516%;width:22.90220820%;height:15.12096774%;background:url(assets/house-zone-odd.webp?v=h1) center/100% 100% no-repeat}
.house-zones i[data-z=double]{left:21.70347003%;top:35.08064516%;width:29.52681388%;height:18.14516129%;background:url(assets/house-zone-double.webp?v=h1) center/100% 100% no-repeat}
.house-zones i[data-z=snake]{left:49.77917981%;top:35.08064516%;width:28.76971609%;height:18.14516129%;background:url(assets/house-zone-snake.webp?v=h1) center/100% 100% no-repeat}
/* community: the globe no longer sits on the first talking point */
.community-story>img{margin-bottom:8px!important}
.community-points{position:relative;z-index:2}
/* the motion toggle never covers the footer copy */
.site-footer{padding-bottom:78px}
/* rendered card + chip replace the CSS-drawn ones */
.flight-object .flight-img{display:block;width:100%;height:auto}
.flight-object.chip,.flight-object.card{filter:drop-shadow(0 18px 14px #0006)}
.hero-die{display:none!important}
@media(max-width:760px){.hero-die{--size:58px}}
.tournament-thumb{background-color:#0d1333;background-origin:content-box;padding:6%}
.arena-scene,.house-scene{overflow:visible!important}
.dice3d-wrap{overflow:visible}
/* chapter flying objects stay on the right edge, clear of the headlines */
.chapter-flight .flight-object,.chapter:nth-child(even) .chapter-flight .flight-object{left:auto!important;right:-16px!important;top:5%!important;--size:78px}
@media(max-width:760px){.chapter-flight .flight-object,.chapter:nth-child(even) .chapter-flight .flight-object{--size:54px;right:-10px!important;top:2%!important}}
.release-badge{position:static;display:inline-block;margin-top:10px;font:700 11px/1 'DM Sans',sans-serif;letter-spacing:.04em;color:#070b20;background:#ffdc00;border-radius:999px;padding:7px 10px;box-shadow:0 6px 14px #0005}
.game-card{position:relative}
/* Mobile first: rendered yellow phone + cabinet with the real game behind the glass */
.device-scene.dev3d{align-items:flex-end;gap:2%;perspective:none}
.dev{position:relative;margin:0;flex:0 0 auto}
.dev--phone{width:34%;transform:translateY(-6%)}
.dev--cabinet{width:46%}
.dev-body{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(90,60,0,.35))}
.dev-screen{position:absolute;left:0;top:0;z-index:1;transform-origin:0 0;overflow:hidden;background:#070b20}
.dev-screen img{display:block;width:100%;height:100%;object-fit:cover}
.dev-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%)}
/* back office explorer: eight areas, dense three-column lists */
.admin-feature-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 26px!important}
.admin-feature-list>div{padding-top:14px}
.admin-feature-list h4{font-size:15px!important}
.admin-feature-list p{font-size:13px!important;line-height:1.45}
.admin-count{display:inline-block;margin-left:10px;font:700 12px/1 'DM Sans',sans-serif;color:#070b20;background:#ffdc00;border-radius:999px;padding:6px 10px;vertical-align:middle}
.admin-tabs button{padding-top:14px!important;padding-bottom:14px!important}
@media(max-width:1100px){.admin-feature-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.admin-feature-list{grid-template-columns:minmax(0,1fr)!important}}
/* phones: no side gutter for the drifting chapter objects, they crossed the headlines */
@media(max-width:760px){.chapter-flight{display:none!important}}
/* one card format for every game: landscape key art, hero + logo */
.game-thumb{aspect-ratio:1.47!important}
/* Race to the Top callout in the tournaments chapter */
.release-badge.demo-badge{background:#070b20;color:#ffdc00;margin-left:6px}
.pv-demo-note{font-size:12px;color:#a4a9bc;margin:10px 0 0}
/* logo PNG has 60/1536 transparent padding on the left: pull it to the content edge */ .brand img{left:-3.9%}
/* section headings: the intro paragraph can never squeeze the heading to one word per line */ @media(min-width:761px){.section-heading>div{flex:1 1 auto;min-width:0}.section-heading .lead{flex:0 1 430px;max-width:430px}}
.house-result{margin:14px 0 0;font-size:15px;line-height:1.5;color:#f4f1e9;min-height:1.5em;max-width:34em}.house-result:empty{display:none}

/* 11-10 (Glenn: "why is this text not in the container?"): the round label sits INSIDE the table's front plate at every
   width. Plate measured on assets/arena.webp?v=o1 (1586x992): x 535-1049, y 780-862 -> 33.7% / 32.4% / 78.6% / 8.3%. */
.arena-scene{position:relative}
.arena-scene .round-panel{position:absolute;left:33.7%;width:32.4%;top:78.6%;height:8.3%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;container-type:inline-size}
.arena-scene .round-seats{gap:1.8cqi}.arena-scene .round-seats i{width:5.4cqi;height:1.6cqi;max-width:19px;max-height:5px}.arena-scene .round-seats i.out{transform:none}
.arena-scene .round-panel strong{margin:0;font-size:min(24px,8.4cqi);line-height:1;white-space:nowrap}
.arena-scene .round-panel>span{position:absolute;left:-20%;right:-20%;top:225%;text-align:center;font-size:10px;color:var(--muted)}
/* 11-10 (Glenn: "race to the top little banner looks odd"): one navy card, the art full width (it carries the title, so no
   second heading), the copy and a clear link underneath, and room before the button. */
.race-callout{display:block;max-width:520px;margin:30px 0 30px;border-radius:18px;overflow:hidden;background:#0d1436;border:1px solid #ffffff1c;color:inherit;text-decoration:none;box-shadow:0 18px 40px #0005;transition:border-color .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.race-callout:hover,.race-callout:focus-visible{border-color:#ffdc0099;transform:translateY(-2px)}
.race-callout:active{transform:scale(.99)}
.race-callout img{display:block;width:100%;aspect-ratio:2.15/1;object-fit:cover;object-position:28% 42%}
.race-callout__txt{display:block;padding:16px 20px 18px}
.race-callout__txt em{display:block;font:700 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:#ffdc00}
.race-callout__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.race-callout__desc{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:#c9cde0}
.race-callout__go{display:inline-block;margin-top:10px;font:700 13px/1 var(--font);color:#ffdc00}
@media(prefers-reduced-motion:reduce){.race-callout,.race-callout:hover{transition:none;transform:none}}
/* 11-10 scroll ribbon (ribbon-scroll.js): one fixed canvas between every section's background and its content */
.scroll-ribbon{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none;display:none}
html.has-scroll-ribbon .scroll-ribbon{display:block}
html.has-scroll-ribbon .chapter{isolation:auto}
html.has-scroll-ribbon .hero,html.has-scroll-ribbon .site-footer,html.has-scroll-ribbon .admin-features{position:relative;z-index:3}
html.has-scroll-ribbon .journey-ribbon,html.has-scroll-ribbon .world-path{display:none}

/* ---- Content cards over the 3D band (Glenn 11-10: "make sure we have cards for content so that we can read the text
   in some cases. Even if the card is the same colour as the background. E.g. bonus buy works well"). The band (fixed
   canvas, z 1) may pass behind art and solid cards, never behind bare text or see-through controls. Each card takes its
   section's colour, lifted a touch like the Bonus Buy mech cards; negative inline margin = padding, so the text stays
   where it was. Text-only sections (catalogue, roadmap, crypto) get one panel behind the whole section. ---- */
.cinematic .motion-unit .scene-art{filter:none}
html{--cpy:22px;--cpx:14px}
@media (min-width:761px){html{--cpy:30px;--cpx:34px}}
html.has-scroll-ribbon .dark,html.has-scroll-ribbon .roadmap,#tournaments,#house,#platform{--card:var(--navy2);--card-line:#ffffff14;--card-shadow:0 18px 44px #0000004d}
html.has-scroll-ribbon .light{--card:#fffdf7;--card-line:#07122014;--card-shadow:0 18px 40px #0712200f}
html.has-scroll-ribbon .yellow,html.has-scroll-ribbon .portrait-section,#commentary{--card:var(--yellow);--card-line:#070b2022;--card-shadow:0 18px 40px #5b4d001f}
:is(html.has-scroll-ribbon,#tournaments,#house,#commentary,#platform) :is(.copy,.mobile-section-actions,.portrait-copy,.support-copy,.community-points,.commentary-bottom,.world-footer,.contact-line,.partner-heading>div:first-child),
:is(html.has-scroll-ribbon .chapter:not(.catalogue):not(.crypto),#tournaments,#house,#commentary,#platform) .section-heading{background:var(--card);border:1px solid var(--card-line);border-radius:22px;box-shadow:var(--card-shadow);padding:var(--cpy) var(--cpx);margin-inline:calc(-1 * var(--cpx))}
html.has-scroll-ribbon .community-points{margin-inline:0}
html.has-scroll-ribbon .world-card{background:var(--card);border:1px solid var(--card-line);border-radius:22px;box-shadow:var(--card-shadow);padding:12px 12px 18px}
:is(html.has-scroll-ribbon,#tournaments,#house,#commentary,#platform) :is(.device-caption,.art-note){display:table;margin-inline:auto;background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:5px 12px}
html.has-scroll-ribbon :is(.catalogue,.roadmap,.crypto)>.section-inner::before{content:"";position:absolute;z-index:-1;inset:24px max(8px,calc(var(--gutter) - 18px));background:var(--card);border:1px solid var(--card-line);border-radius:26px;box-shadow:var(--card-shadow);pointer-events:none}
/* band off on live (Glenn 11-10: "leave it off for now"): the four sections whose static ribbon pieces cross text
   (tournaments, House, commentary, platform) keep their text cards; the filters stay solid. Worlds: no cards (Glenn 11-10: "I don't think these needed cards"). */
/* solid filter buttons with or without the band (Glenn 11-10) */
.light .filter:not(.active){background:#fffdf7}
:is(html.has-scroll-ribbon,#tournaments,#house,#commentary,#platform) .arena-scene .round-panel>span{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:4px 11px}
html.has-scroll-ribbon .site-footer{background:var(--navy);box-shadow:0 0 0 100vmax var(--navy);clip-path:inset(0 -100vmax)}
/* phones: the Motion pill sits in the footer (motion.js), never over a card's CTA */
@media (max-width:760px){.footer-bottom .motion-control{position:static;align-self:flex-start;margin-top:6px}}