/*
 * One palette and one type stack, both taken from the arena's own tokens
 * (web/src/styles/tokens.css), so the site and the product read as one thing:
 * Anton for display, IBM Plex Sans for prose, IBM Plex Mono for labels, `--gold`
 * reserved for the call to action and `--brass` for furniture.
 */
:root { color-scheme: dark; --ink:#0b100e; --deep:#0d2a20; --felt:#14503a; --cream:#f0e8d8; --paper:#e8dcc4; --terra:#b8512d; --gold:#f0b429; --brass:#d7b66f; --olive:#83874e; --line-dark:rgba(240,232,216,.14); --line-light:rgba(11,16,14,.18); --display:"Anton","Archivo",sans-serif; --sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--cream); background:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6; }
img { display:block; max-width:100%; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.75rem 1rem; color:var(--ink); background:var(--cream); }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; z-index:30; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:4.75rem; padding:0 4vw; border-bottom:1px solid var(--line-dark); background:rgba(11,16,14,.92); backdrop-filter:blur(18px); }
.brand { width:fit-content; }
.site-header nav { display:flex; gap:clamp(1rem,2.6vw,2.2rem); }
.site-header nav a,.header-cta,.footer-links a { font-family:var(--mono); font-size:.73rem; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.site-header nav a { color:rgba(240,232,216,.66); }
.site-header nav a:hover,.footer-links a:hover { color:var(--gold); }
.header-cta { justify-self:end; padding:.7rem 1rem; color:var(--ink); background:var(--gold); }
.eyebrow { margin:0 0 1.15rem; color:var(--brass); font-family:var(--mono); font-size:.73rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow.dark { color:var(--terra); }
.eyebrow::before { content:""; display:inline-block; width:2.2rem; height:1px; margin:0 .75rem .22rem 0; background:currentColor; }
h1,h2,h3 { margin-top:0; font-family:var(--display); font-weight:400; letter-spacing:.005em; line-height:.94; text-transform:uppercase; text-wrap:pretty; }
h1 { margin-bottom:1.5rem; font-size:clamp(3rem,5.6vw,5.4rem); }
h2 { margin-bottom:1.25rem; font-size:clamp(2.5rem,4.8vw,4.9rem); }
h3 { margin-bottom:.7rem; font-size:clamp(1.5rem,2.3vw,2.2rem); }
p { text-wrap:pretty; }
.button { display:inline-flex; min-height:3.35rem; align-items:center; justify-content:center; padding:0 1.5rem; color:var(--ink); background:var(--gold); box-shadow:.38rem .38rem 0 var(--terra); font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:transform 160ms ease,box-shadow 160ms ease; }
.button:hover { transform:translate(.18rem,.18rem); box-shadow:.2rem .2rem 0 var(--terra); }
.hero { display:grid; grid-template-columns:minmax(24rem,.94fr) minmax(28rem,1.06fr); gap:2rem; align-items:center; min-height:calc(100svh - 4.75rem); padding:clamp(4rem,8vw,7rem) max(4vw,calc((100vw - 90rem)/2)) 2rem; overflow:hidden; background:radial-gradient(circle at 75% 25%,rgba(240,180,41,.09),transparent 30rem),var(--ink); }
.hero-copy { position:relative; z-index:6; }
.hero h1 { max-width:none; }
.hero-note { max-width:33rem; margin:0 0 2rem; color:rgba(240,232,216,.74); font-size:clamp(1.02rem,1.4vw,1.18rem); }
.hero-actions { display:flex; gap:1.5rem; align-items:center; }
.underlink { color:rgba(240,232,216,.7); font-family:var(--mono); font-size:.8rem; text-underline-offset:.3rem; }
.hero-cast { position:relative; min-height:min(48rem,76vw); isolation:isolate; }
.hero-halo { position:absolute; z-index:-2; inset:8% 7% 10%; border:1px solid rgba(215,182,111,.34); border-radius:50% 50% 44% 44%; background:radial-gradient(circle at 50% 42%,rgba(240,180,41,.16),transparent 54%),linear-gradient(180deg,rgba(20,80,58,.55),rgba(11,16,14,.2)); box-shadow:inset 0 0 0 1rem rgba(240,232,216,.025); }
.hero-creature,.hero-lanista { position:absolute; filter:drop-shadow(0 2rem 1.5rem rgba(0,0,0,.42)); }
.hero-anthropic { z-index:2; top:-1%; left:0; width:51%; transform:rotate(-5deg); }
.hero-openai { z-index:3; right:-4%; bottom:0; width:55%; transform:rotate(4deg); }
.hero-google { z-index:1; top:4%; right:7%; width:44%; transform:rotate(6deg); }
.hero-lanista { z-index:4; bottom:-2%; left:30%; width:27%; image-rendering:pixelated; }
.cast-tag { position:absolute; z-index:6; padding:.38rem .55rem; border:1px solid rgba(240,232,216,.22); color:rgba(240,232,216,.72); background:rgba(11,16,14,.78); font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; backdrop-filter:blur(8px); }
.tag-anthropic { top:13%; left:2%; }.tag-openai { right:0; bottom:17%; }.tag-google { top:10%; right:8%; }
.name-ribbon { display:flex; overflow:hidden; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); background:var(--deep); }
.name-ribbon span { flex:1 0 auto; padding:.85rem 1.35rem; border-right:1px solid var(--line-dark); color:rgba(240,232,216,.56); font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(18rem,.6fr); gap:clamp(2rem,7vw,7rem); align-items:end; margin-bottom:clamp(3rem,6vw,5.5rem); }
.section-heading h2 { margin-bottom:0; }.section-heading>p { max-width:34rem; margin:0; font-size:1.04rem; }

/* I. How it works — the product explanation the site used to leave out entirely. */
.how-section { padding:clamp(5rem,9vw,8rem) max(4vw,calc((100vw - 82rem)/2)); color:var(--ink); background:var(--paper); }
.how-section .section-heading>p { color:rgba(11,16,14,.78); }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.how-grid article { padding:2rem 1.75rem 2.25rem; background:var(--paper); }
.how-grid h3 { max-width:16ch; }
.how-grid p { max-width:34ch; margin:0; color:rgba(11,16,14,.72); font-size:.98rem; }
.step-n { display:block; margin-bottom:1.4rem; color:var(--terra); font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.12em; }

/* II. The Match — the three mechanics, each with its own object. */
.match-section { padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); background:var(--ink); }
.match-section>header { max-width:55rem; margin-bottom:clamp(3rem,6vw,5rem); }
.match-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.match-grid article { padding:1.5rem 1.5rem 2rem; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.match-grid article>span { color:var(--brass); font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.12em; }
.match-grid article>p { max-width:26rem; margin-bottom:0; color:rgba(240,232,216,.66); font-size:.98rem; }
.relic { position:relative; display:grid; min-height:19rem; place-items:center; margin-bottom:1.5rem; background:radial-gradient(circle,rgba(240,180,41,.15),transparent 60%); }
.relic img { width:13rem; image-rendering:pixelated; }
.relic .relic-overlay { position:absolute; width:8.5rem; transform:translate(38%,44%); }
.fuel-relic { align-content:center; }
/* The track sits under the lantern rather than across it; it is the Fuel level, drawn down. */
.fuel-track { width:70%; height:.72rem; margin-top:.75rem; background:rgba(240,232,216,.12); }
.fuel-track i { display:block; width:28%; height:100%; background:var(--gold); }
.thinking-section { padding:clamp(5rem,9vw,8rem) max(4vw,calc((100vw - 90rem)/2)); overflow:hidden; background:radial-gradient(circle at 12% 50%,rgba(184,81,45,.17),transparent 25rem),var(--deep); }
.thinking-section header { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:3rem; }
.thinking-section header h2 { max-width:12ch; margin:0; }
.thinking-line { display:grid; grid-template-columns:repeat(11,minmax(6.5rem,1fr)); min-width:70rem; border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark); }
.thinking-line figure { display:grid; gap:.55rem; justify-items:center; margin:0; padding:1.2rem .6rem 1rem; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.thinking-line img { width:5.5rem; image-rendering:pixelated; }
.thinking-line figcaption { color:rgba(240,232,216,.56); font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }

/* III. The games — four, with the arena's own blurbs and seat counts. */
.games-section { padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); color:var(--ink); background:var(--cream); }
.games-section .section-heading>p { color:rgba(11,16,14,.74); }
.games-heading h2 { max-width:17ch; }
.games-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.game-panel { position:relative; min-height:34rem; overflow:hidden; background:var(--paper); }
.game-panel:nth-child(2),.game-panel:nth-child(3) { color:var(--cream); background:var(--deep); }
.game-art { position:absolute; inset:0 0 9rem; display:grid; place-items:center; }
.single-art img { width:clamp(11rem,24vw,19rem); image-rendering:pixelated; }
.coup-fan { display:flex; justify-content:center; align-items:center; }
.coup-fan img { position:absolute; width:clamp(7.5rem,14vw,12rem); image-rendering:pixelated; filter:drop-shadow(0 1rem 1rem rgba(0,0,0,.3)); }
.coup-fan img:nth-child(1){transform:translate(-125%,8%) rotate(-19deg)}.coup-fan img:nth-child(2){transform:translate(-63%,-3%) rotate(-10deg)}.coup-fan img:nth-child(3){transform:translate(0,-8%)}.coup-fan img:nth-child(4){transform:translate(63%,-3%) rotate(10deg)}.coup-fan img:nth-child(5){transform:translate(125%,8%) rotate(19deg)}
.game-copy { position:absolute; z-index:2; right:2rem; bottom:1.9rem; left:2rem; }
.game-copy span { display:block; margin-bottom:.5rem; color:var(--terra); font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.game-panel:nth-child(2) .game-copy span,.game-panel:nth-child(3) .game-copy span { color:var(--brass); }
.game-copy h3 { margin:0 0 .55rem; }
.game-blurb { max-width:36ch; margin:0 0 .6rem; font-size:.95rem; opacity:.76; }
.game-seats { margin:0; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; opacity:.58; }

/* IV. The roster — one card a house, the caption on its own rule so it never sits on the art. */
.roster-section { padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); color:var(--ink); background:var(--paper); }
.roster-section .section-heading>p { color:rgba(11,16,14,.76); }
.roster-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(11,16,14,.22); border:1px solid rgba(11,16,14,.22); }
.roster-card { position:relative; display:grid; min-height:20rem; margin:0; overflow:hidden; grid-template-rows:1fr auto; background:var(--cream); }
.roster-card img { width:min(88%,17rem); margin:0 auto; place-self:center; transition:transform 260ms ease; }
.roster-card:hover img { transform:translateY(-.4rem) scale(1.03); }
.roster-lead { grid-column:span 2; grid-row:span 2; min-height:41rem; }
.roster-lead img { width:min(78%,30rem); }
.roster-card figcaption { display:flex; justify-content:space-between; align-items:baseline; padding:.85rem 1.25rem; border-top:1px solid rgba(11,16,14,.18); color:var(--ink); }
.roster-card figcaption span { font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; opacity:.6; }
.roster-card figcaption b { font-family:var(--display); font-size:1.15rem; font-weight:400; letter-spacing:.02em; text-transform:uppercase; }
.tone-terra { background:#cc724f; }.tone-cream { background:#f0dfc0; }.tone-blue { background:#7592a2; }.tone-night { background:#284038; }.tone-olive { background:#a6a568; }.tone-gold { background:#d6ad55; }
.tone-night figcaption { border-top-color:rgba(240,232,216,.2); color:var(--cream); }
/* The twelfth cell says what the house Agents are, rather than leaving a hole in the grid. */
.roster-note { grid-column:span 2; align-content:center; padding:2rem 1.5rem; background:var(--deep); }
.roster-note figcaption { display:block; padding:0; border-top:0; color:var(--cream); }
.roster-note figcaption b { display:block; margin-bottom:.8rem; color:var(--brass); font-size:1.35rem; }
.roster-note figcaption p { margin:0; color:rgba(240,232,216,.7); font-size:.92rem; }

/* V. CREDIT — the Orbio integration, which the first version of this page never named. */
.credit-section { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2.5rem,7vw,7rem); align-items:center; padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); background:linear-gradient(180deg,var(--felt),var(--deep)); }
.credit-copy h2 { max-width:14ch; }
.credit-lead { max-width:40rem; font-size:1.15rem; }
.credit-lead b { color:var(--gold); }
.credit-copy>p { max-width:40rem; color:rgba(240,232,216,.72); }
.credit-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:2.5rem 0 0; background:var(--line-dark); border:1px solid var(--line-dark); }
.credit-facts div { padding:1rem 1.15rem; background:rgba(11,16,14,.42); }
.credit-facts dt { color:var(--brass); font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.credit-facts dd { margin:.35rem 0 0; font-size:.95rem; }
.credit-art { position:relative; min-height:20rem; }
.credit-art img { position:absolute; image-rendering:pixelated; filter:drop-shadow(0 1.5rem 1rem rgba(0,0,0,.4)); }
.credit-art img:nth-child(1) { z-index:2; bottom:4%; left:6%; width:clamp(9rem,17vw,14rem); }
.credit-art img:nth-child(2) { top:0; right:4%; width:clamp(13rem,24vw,20rem); }

/* VI. The record — why any of the above can be believed. */
.fair-section { padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); color:var(--ink); background:var(--cream); }
.fair-section .section-heading>p { color:rgba(11,16,14,.74); }
.fair-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light); }
.fair-grid article { padding:2rem 1.75rem 2.25rem; background:var(--cream); }
.fair-grid h3 { max-width:20ch; font-size:clamp(1.3rem,1.9vw,1.75rem); }
.fair-grid p { max-width:46ch; margin:0; color:rgba(11,16,14,.72); font-size:.98rem; }

.world-section { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(3rem,9vw,9rem); align-items:center; min-height:42rem; padding:clamp(5rem,9vw,9rem) max(4vw,calc((100vw - 82rem)/2)); background:radial-gradient(circle at 25% 50%,rgba(240,180,41,.16),transparent 26rem),var(--deep); }
.world-stage { position:relative; min-height:27rem; }
.world-stage img { position:absolute; width:clamp(8rem,15vw,13rem); image-rendering:pixelated; filter:drop-shadow(0 1.5rem 1rem rgba(0,0,0,.35)); }
.world-stage img:nth-child(1){bottom:0;left:36%;width:clamp(11rem,21vw,18rem)}.world-stage img:nth-child(2){top:0;left:8%;transform:rotate(-8deg)}.world-stage img:nth-child(3){right:5%;bottom:8%;transform:rotate(9deg)}.world-stage img:nth-child(4){top:5%;left:42%}.world-stage img:nth-child(5){top:4%;right:4%;transform:rotate(7deg)}
.world-copy h2 { max-width:13ch; }
.world-copy>p { max-width:26rem; margin-bottom:2rem; color:rgba(240,232,216,.72); }
footer { display:grid; grid-template-columns:1fr auto auto; gap:3rem; align-items:end; padding:3rem 4vw; border-top:1px solid var(--line-dark); background:var(--ink); }
.footer-brand { display:grid; gap:.8rem; }
.footer-brand span,footer>p { margin:0; color:rgba(240,232,216,.52); font-family:var(--mono); font-size:.74rem; }
.footer-links { display:flex; gap:1.5rem; }
@media (max-width:70rem){.hero{grid-template-columns:1fr}.hero-cast{min-height:min(46rem,95vw)}.roster-grid{grid-template-columns:repeat(3,1fr)}.roster-lead{grid-column:span 2}.credit-section,.how-grid{grid-template-columns:1fr}.how-grid article{padding:1.75rem 1.5rem 2rem}.credit-art{min-height:16rem}}
@media (max-width:52rem){.site-header{grid-template-columns:1fr auto}.site-header nav{display:none}.section-heading,.world-section{grid-template-columns:1fr}.roster-grid,.games-grid,.match-grid,.fair-grid{grid-template-columns:repeat(2,1fr)}.roster-lead{grid-row:span 1;min-height:26rem}.roster-card{min-height:24rem}.roster-note{grid-column:span 2}.thinking-section{overflow-x:auto}.game-panel{min-height:28rem}.match-grid article:last-child{grid-column:span 2}.world-stage{min-height:24rem}footer{grid-template-columns:1fr;align-items:start}}
@media (max-width:35rem){.site-header{min-height:4rem}.header-cta{padding:.6rem .7rem;font-size:.66rem}.hero{min-height:auto;padding-top:4.5rem}h1{font-size:clamp(2.9rem,14vw,4.4rem)}.hero-actions{align-items:flex-start;flex-direction:column}.hero-cast{min-height:27rem;margin-top:-1rem}.cast-tag{display:none}.section-heading{gap:1rem}.roster-grid,.games-grid,.match-grid,.fair-grid,.credit-facts{grid-template-columns:1fr}.roster-lead,.match-grid article:last-child,.roster-note{grid-column:span 1}.roster-card{min-height:22rem}.game-panel{min-height:26rem}.game-copy{right:1.25rem;bottom:1.4rem;left:1.25rem}.game-art{inset:0 0 11rem}.match-grid{border-top:0}.relic{min-height:16rem}.world-stage{min-height:18rem}.world-stage img{width:7rem}.world-stage img:nth-child(1){width:10rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}