@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(font-6.ttf) format('truetype');
}

/* Layout: a gold-stamped studio masthead, then each game gets its own colour world (Willowmere green, hardwood orange) on a cool paper page. */
:root {
  --paper: #EDEFEA; --paper-2: #E2E6DF; --ink: #15171A; --ink-soft: #4A514E; --line: #CBD1CA;
  --gold: #A97A1C; --gold-hi: #E6C35C; --gold-lo: #7A5410;
  --fever: #1E4A42; --fever-2: #163A34; --fever-ink: #EAF1E8; --fever-muted: #B5CABF;
  --court: #C9581F; --court-2: #A9441A; --wood: #D99A5B; --court-ink: #FFF6EC;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1180px; --night: #121513; --night-ink: #EDEFEA;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before, *::after { animation: none !important; transition: none !important } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased }
a { color: inherit }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px }
img { max-width: 100%; display: block }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px) }
.label { font: 700 12px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .95; letter-spacing: -.005em; text-wrap: balance; margin: 0; text-transform: uppercase }
p { margin: 0 }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10 }
.skip:focus { left: 16px }

/* ---------- header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none }
.coin { width: 40px; height: 40px; flex: none }
.brand b { font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase }
.brand span { display: block; font: 700 10px/1 var(--mono); letter-spacing: .3em; color: var(--ink-soft); margin-top: 3px }
nav { margin-left: auto; display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap }
nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-soft) }
nav a:hover { color: var(--ink) }
@media (max-width: 560px) { nav { display: none } }

/* ---------- hero ---------- */
.hero .wrap { padding-block: clamp(48px, 9vw, 110px) clamp(40px, 6vw, 72px); display: grid; gap: 28px }
.hero h1 { font-size: clamp(64px, 13.5vw, 184px); font-weight: 900; line-height: .84; letter-spacing: -.01em }
.hero h1 .gold { background: linear-gradient(100deg, var(--gold-lo) 0%, var(--gold-hi) 28%, var(--gold) 46%, var(--gold-hi) 64%, var(--gold-lo) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s ease-in-out infinite alternate }
@keyframes foil { from { background-position: 0% 0 } to { background-position: 100% 0 } }
.hero .lede { max-width: 58ch; font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft) }
.hero .lede strong { color: var(--ink); font-weight: 600 }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid var(--ink); transition: transform .15s ease, background .15s ease }
.btn:hover { transform: translateY(-2px) }
.btn.solid { background: var(--ink); color: var(--paper) }
.btn.ghost { background: transparent; color: var(--ink) }
.btn svg { width: 16px; height: 16px }
.ticker { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft) }
.ticker .label b { color: var(--ink) }

/* ---------- game sections ---------- */
.game { position: relative; overflow: hidden }
.game .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: clamp(56px, 8vw, 104px) }
.game .copy { display: grid; gap: 20px; min-width: 0 }
.game h2 { font-size: clamp(44px, 6.4vw, 84px) }
.game .sub { font-size: 19px; max-width: 46ch }
.facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start }
.facts li svg { width: 22px; height: 22px; margin-top: 2px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { padding: 6px 12px; border-radius: 999px; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid currentColor }
@media (max-width: 860px) { .game .wrap { grid-template-columns: minmax(0, 1fr) } .game.court .art { order: -1 } }

.fever { background: radial-gradient(120% 90% at 85% 10%, #2B6155 0%, var(--fever) 45%, var(--fever-2) 100%); color: var(--fever-ink) }
.fever .sub, .fever .facts { color: var(--fever-muted) }
.fever .facts b { color: var(--fever-ink) }
.fever .chip { color: #E6C35C }
.fever h2 em { font-style: normal; color: #E6C35C }
.fever .btn { border-color: #E6C35C }
.fever .btn.solid { background: #E6C35C; color: #14231F }
.fever .btn.ghost { color: var(--fever-ink) }
.shots { position: relative; min-width: 0; padding-bottom: 14% }
.shot { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) }
.shot img { width: 100%; height: auto }
.shot.small { position: absolute; width: 46%; right: -2%; bottom: 0; border: 4px solid var(--fever-2) }
.shot.tiny { position: absolute; width: 40%; left: -3%; bottom: -4%; border: 4px solid var(--fever-2) }
.cap { position: absolute; left: 12px; top: 12px; background: rgba(10,26,22,.78); color: var(--fever-ink); padding: 5px 10px; border-radius: 999px; font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase }
@media (max-width: 600px) { .shots { padding-bottom: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr } .shots .shot:first-child { grid-column: 1 / -1 } .shot.small, .shot.tiny { position: static; width: auto; border: 0 } }

.court { background: var(--court); color: var(--court-ink) }
.court::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 64px); pointer-events: none }
.court .sub, .court .facts { color: #FFE2CC }
.court .chip { color: var(--court-ink) }
.court .btn { border-color: var(--court-ink); color: var(--court-ink) }
.court .btn.solid { background: var(--court-ink); color: var(--court-2) }
.court h2 { font-size: clamp(48px, 7vw, 96px) }
.art { min-width: 0 }
.art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 40px rgba(60,20,0,.35)) }

/* ---------- studio ---------- */
.studio .wrap { padding-block: clamp(64px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px) }
.studio h2 { font-size: clamp(40px, 5.6vw, 72px) }
.studio .intro { display: grid; gap: 22px; align-content: start; min-width: 0 }
.studio .intro p { color: var(--ink-soft); max-width: 52ch }
.rules { display: grid; gap: 0; border-top: 2px solid var(--ink); min-width: 0 }
.rule { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line) }
.rule h3 { font-size: 30px; line-height: 1 }
.rule p { color: var(--ink-soft) }
@media (max-width: 860px) { .studio .wrap { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 520px) { .rule { grid-template-columns: minmax(0, 1fr); gap: 6px } }

/* ---------- contact ---------- */
.contact { background: var(--night); color: var(--night-ink) }
.contact .wrap { padding-block: clamp(56px, 8vw, 100px); display: grid; gap: 22px }
.contact h2 { font-size: clamp(52px, 9vw, 128px) }
.contact h2 .gold { color: #E6C35C }
.contact p { max-width: 52ch; opacity: .82 }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.mail code { font: 700 clamp(17px, 2.4vw, 24px)/1.2 var(--mono); padding: 14px 18px; border: 2px solid color-mix(in srgb, var(--night-ink) 35%, transparent); border-radius: 12px; user-select: all; word-break: break-all }
.mail button { min-height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid #E6C35C; background: #E6C35C; color: #1B1405; font: 700 15px var(--body); cursor: pointer }
.mail .ok { font: 700 12px var(--mono); letter-spacing: .1em; color: #E6C35C }

footer { background: var(--night); color: color-mix(in srgb, var(--night-ink) 62%, transparent); border-top: 1px solid color-mix(in srgb, var(--night-ink) 14%, transparent) }
footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-block: 22px; font-size: 14px }
footer a { text-decoration: none } footer a:hover { color: var(--night-ink) }
footer .sp { margin-left: auto }

:root{--paper:#f3f1e9;--paper-2:#e9e6db;--ink:#18241f;--ink-soft:#57635b;--line:#d4d5c9;--wrap:1320px;--display:"Arial Narrow",Impact,"DejaVu Sans",sans-serif}
.top .wrap{padding-block:18px}.brand b{font-size:21px}.brand span{font-size:9px}section[id]{scroll-margin-top:95px}.hero .wrap{padding-block:68px 52px;gap:24px}.hero h1{font-size:clamp(58px,8.3vw,118px);max-width:920px;letter-spacing:-.06em;line-height:.98}.hero h1 .gold{animation:none;background:none;color:#9c7728}.hero .lede{max-width:650px;font-size:19px}.hero-top{display:flex;align-items:center;justify-content:space-between}.edition{font:11px var(--mono);letter-spacing:.08em;color:var(--ink-soft)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:28px}.hero-bottom .ctas{flex-shrink:0}.btn{font-size:14px;min-height:48px}.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.preview-card{position:relative;background:#14271e;overflow:hidden;border-radius:8px;text-decoration:none;aspect-ratio:2.1}.preview-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.preview-card:hover img{transform:scale(1.035)}.preview-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#071811e8)}.preview-card .overlay{position:absolute;bottom:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:end;color:white;z-index:1}.overlay b{display:block;font-size:27px;letter-spacing:-.03em}.overlay span{font-size:11px;letter-spacing:.1em;text-transform:uppercase}.round-arrow{font-size:25px!important}.ticker{padding-top:20px;font-size:10px}.section-heading{padding-block:55px 28px;display:flex;justify-content:space-between;align-items:end}.section-heading h2{font-size:48px;letter-spacing:-.04em;text-transform:none}.game h2{letter-spacing:-.045em;text-transform:none}.game .wrap{padding-block:75px}.game .sub{font-size:18px}.game .facts{font-size:15px}.art img{border-radius:10px;box-shadow:0 25px 70px #27120b50}.art a{display:block}.art .image-note{font-size:11px;letter-spacing:.06em;margin-top:12px;opacity:.8}.shot{position:relative}.studio h2{letter-spacing:-.045em;text-transform:none}.rule h3{text-transform:none;font-size:25px;letter-spacing:-.04em}.contact h2{font-size:clamp(48px,7vw,88px);letter-spacing:-.05em;text-transform:none}.menu-toggle{display:none;border:1px solid var(--line);background:transparent;padding:9px 13px;border-radius:30px;font:600 14px var(--body);margin-left:auto;color:var(--ink);cursor:pointer}.detail-top{padding-block:36px 24px;display:flex;justify-content:space-between;font-size:13px}.detail-hero{padding-block:32px 60px}.detail-hero h1{font-size:clamp(60px,10vw,140px);letter-spacing:-.065em;margin:25px 0;text-transform:none}.detail-hero .lede{max-width:750px;font-size:21px;color:var(--ink-soft)}.detail-banner{width:100%;max-height:650px;object-fit:cover;border-radius:10px;margin:36px 0 16px}.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-block:40px 64px}.details-grid h3{font-size:29px;text-transform:none;letter-spacing:-.03em;margin:15px 0}.details-grid p{color:var(--ink-soft);font-size:16px}.gallery{padding-block:36px 70px}.gallery h2{font-size:45px;text-transform:none;margin-bottom:26px;letter-spacing:-.03em}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery button{border:0;padding:0;background:none;text-align:left;color:var(--ink);cursor:zoom-in;font:inherit}.gallery img{width:100%;aspect-ratio:1.55;object-fit:cover;border-radius:8px}.gallery figcaption{font-size:13px;padding-top:10px}figure{margin:0}dialog{border:0;background:#101915;color:#fff;max-width:min(1200px,94vw);max-height:94vh;padding:18px;border-radius:12px}dialog::backdrop{background:#07110ddb;backdrop-filter:blur(8px)}dialog img{max-height:75vh;width:auto;margin:auto}dialog button{background:#e6c35c;border:0;border-radius:30px;padding:10px 18px;font:600 14px var(--body);cursor:pointer;display:block;margin:0 0 15px auto}.dialog-caption{padding-top:12px;font-size:14px}footer .wrap{align-items:center}.support-list{max-width:800px;padding-block:20px 75px}.support-list details{border-bottom:1px solid var(--line);padding:22px 0}.support-list summary{font-weight:700;cursor:pointer}.support-list p{margin-top:15px;color:var(--ink-soft)}.text-link{text-underline-offset:5px}.contact .btn{border-color:#e6c35c;color:#e6c35c}.contact .btn.solid{background:#e6c35c;color:#17231c}
@media(max-width:860px){.hero-bottom{display:block}.hero-bottom .ctas{margin-top:25px}.edition{display:none}.hero .wrap{padding-top:42px}.details-grid{grid-template-columns:1fr;gap:18px}.gallery-grid{grid-template-columns:1fr 1fr}.hero-cards{gap:12px}.preview-card{aspect-ratio:1.5}.preview-card .overlay{left:15px;bottom:13px}.overlay b{font-size:22px}.game.court .art{order:0}}
@media(max-width:600px){.menu-toggle{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:22px;border-bottom:1px solid var(--line);gap:24px}nav.open{display:flex}.hero-cards{grid-template-columns:1fr}.preview-card{aspect-ratio:2}.hero h1{font-size:60px}.hero .lede{font-size:17px}.gallery-grid{grid-template-columns:1fr}.section-heading h2{font-size:36px}.section-heading .label{display:none}.brand b{font-size:19px}.ticker{gap:12px}.top .wrap{gap:10px}.detail-hero .lede{font-size:18px}.game h2{font-size:55px}.contact h2{font-size:53px}}

:root{--display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif} .hero h1{letter-spacing:-.025em;font-size:clamp(72px,10.4vw,150px)}
.hero h1{max-width:1180px}

/* Studio identity + privacy page, revision 2 */
.top .wrap{padding-block:8px}.studio-logo{width:230px;height:76px;object-fit:contain}.footer-brand{display:block;flex-shrink:0;background:var(--paper);border-radius:6px;padding:3px 12px}.footer-brand img{width:170px;height:65px;object-fit:contain}footer .wrap{padding-block:28px}
.policy-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:70px;padding-block:64px 100px;align-items:start}.policy-aside{position:sticky;top:122px;display:grid;gap:17px;font-size:14px}.policy-aside .label{margin-top:20px;color:var(--gold)}.policy-aside h2{font-size:38px;line-height:1.08;letter-spacing:-.025em;text-transform:none;margin-bottom:10px}.policy-aside>a:not(.text-link){color:var(--ink-soft);text-decoration:none}.policy-aside>a:hover{color:var(--gold)}
#sk-privacy-policy{min-width:0;max-width:850px;color:var(--ink);font:400 17px/1.75 var(--body);overflow-wrap:anywhere}#sk-privacy-policy h1{font:800 clamp(52px,6vw,84px)/1 var(--display);text-transform:none;letter-spacing:-.025em;margin:12px 0 18px}#sk-privacy-policy h2{font:700 29px/1.25 var(--body);text-transform:none;letter-spacing:-.035em;margin:0 0 20px;text-wrap:initial}#sk-privacy-policy h3{font:700 21px/1.4 var(--body);text-transform:none;letter-spacing:-.015em;margin:25px 0 16px}#sk-privacy-policy p{margin:0 0 18px}#sk-privacy-policy .sk-privacy-eyebrow{font:700 12px var(--mono);letter-spacing:.15em;color:var(--gold)}#sk-privacy-policy .sk-privacy-date{font-size:14px;color:var(--ink-soft);margin-bottom:28px}#sk-privacy-policy .sk-privacy-summary{padding:25px 28px;background:#e5ebe1;border-left:4px solid #a97a1c;border-radius:0 10px 10px 0;margin:28px 0}#sk-privacy-policy .sk-privacy-summary p:last-child{margin-bottom:0}#sk-privacy-policy a{color:#70500e;text-underline-offset:4px}#sk-privacy-policy section{border-top:1px solid var(--line);margin-top:34px;padding-top:34px;scroll-margin-top:120px}#sk-privacy-policy li{margin-bottom:12px}#sk-privacy-policy ul{padding-left:23px}#sk-privacy-policy nav{position:static;display:block;margin:0;padding:0;background:none;border:0}#sk-privacy-policy .sk-privacy-links{display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;list-style:none}#sk-privacy-policy nav a{font-size:13px}#sk-privacy-policy .sk-privacy-links li{margin:0}
@media(max-width:900px){.policy-layout{grid-template-columns:1fr;gap:32px;padding-top:35px}.policy-aside{position:static}.policy-aside>*:not(:first-child){display:none}}
@media(max-width:600px){.studio-logo{width:205px;height:68px}.top .wrap{padding-block:5px}.policy-layout{padding-bottom:60px}#sk-privacy-policy{font-size:16px}#sk-privacy-policy h2{font-size:24px}#sk-privacy-policy .sk-privacy-summary{padding:20px}footer .sp{margin-left:0}.footer-brand{flex-basis:100%;background:none;padding:0}.footer-brand img{background:var(--paper);border-radius:6px;padding:5px 10px}}

/* Quiet project teasers */
.teaser{isolation:isolate}.fever-teaser{background:radial-gradient(ellipse at 80% 20%,#477664,#183e35 75%)}.kings-teaser{background:radial-gradient(ellipse at 80% 20%,#e79852,#ac441e 80%)}.teaser:before{content:"";position:absolute;width:65%;aspect-ratio:1;border:1px solid #ffffff30;border-radius:50%;right:-10%;top:-40%;box-shadow:0 0 0 38px #ffffff08,0 0 0 76px #ffffff06}.teaser-number{position:absolute;right:7%;top:0;font:800 clamp(90px,13vw,185px)/1 var(--display);color:#ffffff18}.project-mark{text-align:center;border:1px solid #ffffff35;border-radius:50%;aspect-ratio:1;max-width:360px;width:100%;margin:auto;display:flex;flex-direction:column;justify-content:center}.project-mark>span{font:800 150px/1 var(--display);opacity:.65}.project-mark p{font:10px var(--mono);letter-spacing:.1em;margin-top:18px}.teaser-page{padding-block:70px 110px;min-height:60vh}.teaser-note{margin:25px 0 30px;color:var(--ink-soft);max-width:600px}.detail-top{gap:20px;flex-wrap:wrap}@media(max-width:600px){.project-mark{max-width:240px}.project-mark>span{font-size:100px}.project-mark p{font-size:8px}.teaser-page{padding-block:40px 70px}}