/* Matches TasoUi/home-soft.uss and the shared primary_gold_atlas button.
   Website sizes are CSS pixels; game USS uses a 1080px authoring space. */
@font-face{font-family:Fredoka;src:url('/assets/fonts/Fredoka-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/fonts/Nunito-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{
  --canvas:#041223;--surface:#13213d;--panel:#0c2446;--edge:#315b91;
  --text:#f5ecdb;--muted:#ceddf1;--gold:#ffd07b;--gold-ink:#041626;
  --blue:#a5c9f6;--purple:#d0a6ff;--paper:#fcf0d8;--ink:#2b2137;
  --display:Fredoka,'Trebuchet MS',sans-serif;--body:Nunito,Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--canvas);color:var(--text);font:600 16px var(--body)}
a{color:inherit}img{display:block;max-width:100%;height:auto}
header{min-height:94px;padding:12px max(5vw,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(#162b4d,#08172b);border-bottom:1px solid var(--edge);box-shadow:0 4px 18px #0005;position:relative;z-index:2}
header .brand{width:115px;flex-shrink:0}
nav{display:flex;gap:12px;align-items:center;font:600 16px var(--display)}
nav a{text-decoration:none;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid transparent;transition:background .15s}
nav a:hover{background:#233e65;border-color:#416394}
nav .language{background:linear-gradient(#2c4875,#152b4d);border:1px solid #5275a4;border-bottom:3px solid #020b18;color:var(--gold);min-width:48px;box-shadow:inset 0 1px #a5c9f644}
.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;min-height:690px;background:radial-gradient(ellipse at 22% 35%,#183354,transparent 65%),var(--canvas);overflow:hidden}
.hero-copy{position:relative;z-index:1;align-self:center;padding:65px 0 75px max(5vw,24px)}
.eyebrow{font:600 12px/1.6 var(--display);letter-spacing:2px;color:var(--blue);margin:0 0 24px}
.hero h1{font:600 clamp(58px,6.5vw,100px)/1.02 var(--display);letter-spacing:-2px;margin:0 0 26px;text-shadow:0 4px 0 #010914}
.hero h1 em{color:var(--gold);font-style:normal;text-shadow:0 3px 0 #8a501c,0 7px 16px #0008}
.lead{font:600 clamp(20px,2vw,25px)/1.5 var(--body);max-width:520px}
.hero-description{max-width:440px;line-height:1.8;color:var(--muted);font-size:17px}
/* Gold face, illuminated upper rim, dark lower lip: the game's primary control. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:60px;max-width:100%;padding:16px 28px;margin-top:20px;border:2px solid #ffe5a0;border-bottom-color:#b56920;border-radius:20px;background:linear-gradient(112deg,#fff0b6 0%,#f9c76b 24%,#ffda8b 55%,#edb353 100%);box-shadow:inset 0 2px 0 #fff7dc,inset 0 -3px 0 #df943d,0 4px 0 #8a4a11,0 6px 0 #020a14,0 10px 18px #0005;color:var(--gold-ink);font:600 18px/1.25 var(--display);text-decoration:none;transition:transform .15s,filter .15s,box-shadow .15s;text-align:center}
.button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.button:active{transform:translateY(4px) scale(.98,.96);box-shadow:inset 0 2px 0 #fff7dc,inset 0 -2px 0 #df943d,0 1px 0 #8a4a11,0 3px 0 #020a14}
.button span{font-size:25px}.build-note{font-size:13px;color:var(--muted);margin-top:25px}
.hero-art{position:relative;min-width:0;overflow:hidden}.hero-art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--canvas),transparent 38%),linear-gradient(0deg,var(--canvas),transparent 25%)}
.art-label{position:absolute;z-index:1;bottom:28px;right:25px;padding:10px 14px;border:1px solid #5375a8;border-radius:12px;font:600 10px/1.4 var(--display);letter-spacing:1px;background:#0c2446e8;color:var(--muted)}
.ticker{display:flex;align-items:center;justify-content:space-around;gap:35px;background:linear-gradient(#243e66,#152a48);border-top:2px solid #416393;border-bottom:3px solid #020b17;padding:20px;overflow:hidden;white-space:nowrap;font:600 20px var(--display);letter-spacing:1px;color:var(--gold);box-shadow:inset 0 1px #97bdf52b}
.section{padding:90px max(5vw,24px)}.section-head{max-width:650px;margin-bottom:42px}
h2{font:600 clamp(33px,3.8vw,56px)/1.1 var(--display);letter-spacing:-.5px;margin:0 0 22px}p{line-height:1.8}
.section-head>p:last-child{font-size:18px;color:var(--muted);max-width:540px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.modes article{border:2px solid #315b91;border-top-color:#638cc4;border-bottom:5px solid #05112a;border-radius:24px;padding:28px;background:linear-gradient(145deg,#214675,#0a2143);box-shadow:inset 0 1px #a5c9f644,0 8px 20px #0004}
.modes article:nth-child(2){background:linear-gradient(145deg,#423b84,#211a4b);border-color:#6e60b2;border-top-color:#9584d7;border-bottom-color:#100c2b}
.modes article:nth-child(3){background:linear-gradient(145deg,#313c53,#16223a);border-top-color:#a78d64}
.mode-number{font:600 49px/1.1 var(--display);color:var(--gold);text-shadow:0 3px #061322}
.modes h3{font:600 23px/1.2 var(--display);margin:20px 0 12px}.modes p{font-size:16px;color:var(--muted);max-width:330px;margin-bottom:0}
.collection{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;background:radial-gradient(ellipse at 80% 50%,#33256b,transparent 65%),#0e1831;border-block:1px solid #3f3c72;min-height:580px}
.collection-copy{max-width:450px}.collection .eyebrow{color:var(--purple)}.collection h2 em{color:var(--gold);font-style:normal}.collection-copy>p{font-size:18px;color:var(--muted)}.collection .small{font-size:14px;color:var(--muted);max-width:380px}
.discs{position:relative;min-height:340px}.disc{position:absolute;width:48%;border-radius:50%;filter:drop-shadow(0 18px 9px #0008)}.d1{left:0;top:45px;transform:rotate(-22deg)}.d2{left:26%;top:0;z-index:2;transform:rotate(8deg)}.d3{right:0;top:130px;transform:rotate(18deg)}
.sticker{position:absolute;z-index:3;left:10%;bottom:0;padding:14px 23px;background:linear-gradient(#ffe5a0,#efb455);border:2px solid #fff0b6;border-bottom:4px solid #9c5b22;border-radius:18px;box-shadow:0 4px 10px #0007;color:var(--gold-ink);font:600 14px/1.3 var(--display);transform:rotate(-9deg)}
.court-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}figure{margin:0;overflow:hidden;border-radius:24px;background:linear-gradient(#233f67,#0b203e);border:2px solid #46699b;border-top-color:#7393bf;box-shadow:0 5px 0 #020b17,0 12px 24px #0004}
figure img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-bottom:2px solid #34537e}figcaption{display:flex;gap:20px;padding:22px 25px;font:600 23px var(--display)}figcaption span{color:var(--gold)}
.support{background:radial-gradient(ellipse at 50% 100%,#193b64,transparent 70%),#0c203c;color:var(--text);text-align:center;border-block:1px solid #315b91}.support .eyebrow{color:var(--gold)}.support p{max-width:570px;margin-inline:auto;color:var(--muted)}.support-link{display:block;width:fit-content;max-width:100%;margin:32px auto 0;padding:10px 0;font-size:15px;color:var(--blue)}
footer{display:flex;gap:30px;align-items:center;justify-content:space-between;padding:45px max(5vw,24px);background:#030d1b;color:var(--muted);font-size:13px}.footer-brand{text-decoration:none;line-height:1;font:600 28px var(--display);letter-spacing:3px;color:var(--text)}.footer-brand span{display:block;font-size:10px;letter-spacing:7px;margin-top:3px}footer div{display:flex;gap:25px}footer a:hover{color:var(--gold)}
/* The game's reading/settings pages use a light paper surface. */
.guide{max-width:880px;margin:48px auto;min-height:80vh;background:var(--paper);color:var(--ink);border:2px solid #ffe3ad;border-bottom:5px solid #9c7045;border-radius:26px;box-shadow:0 12px 32px #0005;padding:60px}.guide .eyebrow{color:#315985}.guide h1{font:600 clamp(40px,5vw,65px)/1.08 var(--display);letter-spacing:-1px;margin:0 0 30px}.guide h2{font-size:27px;letter-spacing:0;margin-top:45px}.guide li{padding:8px 0;line-height:1.7}.guide .small{font-size:14px}.guide a:not(.button){text-underline-offset:4px}
.skip{position:absolute;z-index:10;top:-100px;left:20px;padding:15px;background:var(--paper);color:var(--gold-ink)}.skip:focus{top:10px}a:focus-visible{outline:3px solid #ffa867;outline-offset:6px}
@media(min-width:1500px){.section,header,footer{padding-left:max(calc((100vw - 1320px)/2),5vw);padding-right:max(calc((100vw - 1320px)/2),5vw)}.hero-copy{padding-left:max(calc((100vw - 1320px)/2),5vw)}.guide.section{padding:60px}}
@media(max-width:760px){
header{min-height:80px;padding:10px 20px;gap:12px}header .brand{width:90px}nav{gap:5px;font-size:14px}nav a{padding:10px}nav a:nth-child(2){display:none}
.hero{display:flex;flex-direction:column}.hero-copy{padding:45px 24px 25px;width:100%;min-width:0}.hero h1{font-size:clamp(43px,12.5vw,64px);letter-spacing:-1px}.hero .eyebrow{font-size:10px;letter-spacing:1.5px}.hero-description{max-width:95%;font-size:16px}.hero .lead{font-size:22px}.hero-art{height:470px}.hero-art img{object-position:center 65%}.hero-art:after{background:linear-gradient(var(--canvas),transparent 25%),linear-gradient(0deg,var(--canvas),transparent 18%)}.build-note{margin-bottom:0}
.ticker{font-size:16px;gap:25px;padding:17px;justify-content:flex-start}.section{padding:60px 24px}.section-head{margin-bottom:30px}.modes{grid-template-columns:1fr;gap:18px}.modes article{display:grid;grid-template-columns:65px 1fr;gap:0 15px;padding:24px 20px}.mode-number{grid-row:1/3;font-size:36px}.modes h3{font-size:22px;margin:0}.modes p{margin-top:10px;font-size:15px;max-width:none}
.collection{grid-template-columns:1fr;gap:30px}.discs{min-height:310px;max-width:450px;width:100%;margin:auto}.collection-copy>p{font-size:17px}.court-grid{grid-template-columns:1fr;gap:25px}figcaption{font-size:21px}footer{align-items:flex-start;flex-wrap:wrap;padding:35px 24px;gap:25px}footer p{margin-left:auto}footer div{width:100%;justify-content:space-between;gap:10px}.support .button{font-size:17px;gap:10px;padding-inline:18px}.guide.section{margin:24px 16px;padding:32px 24px}.guide .button{font-size:17px;padding:16px}.guide h1{font-size:42px}
}
@media(max-width:370px){header .brand{width:75px}nav a{padding-inline:8px}nav .language{min-width:42px}.hero h1{font-size:42px}.hero-art{height:410px}.discs{min-height:265px}.section,.hero-copy{padding-inline:20px}.modes article{grid-template-columns:55px 1fr;padding:22px 16px;gap:0 12px}.mode-number{font-size:32px}.guide h1{font-size:36px}.guide.section{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}nav a,.button{transition:none}}
.legal h1{font-size:clamp(32px,6vw,54px);overflow-wrap:anywhere}.legal p{overflow-wrap:anywhere}.legal h2{scroll-margin-top:24px}footer div{flex-wrap:wrap}