/* Back Nine web pages (landing, privacy, credits). The game itself uses style.css. */
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:400;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
:root{--ink:#1A1628;--night:#15121F;--panel:rgba(30,25,48,.78);--line:rgba(255,255,255,.12);--text:#F6EBD9;--muted:#BDB2D6;--orange:#F2A65A;--gold:#FFD36E;--mint:#7FD1B9;--lav:#B8A6E8;--coral:#F28B82}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--text);font:400 17px/1.55 Nunito,system-ui,sans-serif;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,18,31,.35),rgba(21,18,31,.82) 55%,var(--night)),url(img/sky_04.jpg) center top/cover no-repeat}
a{color:var(--gold)}
h1,h2,h3,.fred{font-family:Fredoka,Nunito,sans-serif;line-height:1.15}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.top{display:flex;align-items:center;gap:12px;padding:18px 0}
.top img{width:44px;height:44px;border-radius:12px}
.top b{font:700 22px Fredoka}
.top .sp{flex:1}
.top a.small{color:var(--muted);text-decoration:none;font-weight:800;font-size:15px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:28px 0 40px}
.hero h1{font-size:clamp(46px,8vw,82px);margin:0;color:var(--orange);text-shadow:0 6px 0 rgba(0,0,0,.25)}
.hero p.lead{font-size:clamp(18px,2.4vw,22px);color:var(--text);margin:14px 0 22px;max-width:520px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 24px;border-radius:18px;font:700 19px Fredoka,Nunito,sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#FFC07A,var(--orange));color:var(--ink);box-shadow:0 6px 0 #B9662A}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--line)}
.join{display:flex;gap:10px;margin-top:16px;max-width:420px}
.join input{flex:1;min-width:0;height:56px;border-radius:18px;border:1px solid var(--line);background:rgba(20,17,31,.7);color:var(--text);font:700 24px Fredoka;letter-spacing:6px;text-align:center;text-transform:uppercase}
.join .btn{height:56px}
.shots{display:grid;grid-template-columns:2.2fr .9fr 1fr;gap:16px;align-items:center;margin:8px 0 48px}
.shots figure{margin:0}
.shots img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);display:block}
.shots figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}
.hero .phone{justify-self:center;max-width:300px;width:100%}
.hero .phone img{width:100%;border-radius:28px;border:6px solid #2B2440;box-shadow:0 24px 60px rgba(0,0,0,.5)}
section{margin:0 0 48px}
section h2{font-size:32px;margin:0 0 16px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:18px}
.card .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--orange);color:var(--ink);font:700 18px Fredoka;margin-bottom:8px}
.card h3{margin:0 0 6px;font-size:20px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.code{display:inline-block;font:700 28px Fredoka;letter-spacing:3px;color:var(--gold)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(127,209,185,.16);color:var(--mint);font-weight:800;font-size:13px;margin:0 6px 6px 0}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:15px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
footer a{color:var(--muted)}
.doc{max-width:760px;margin:0 auto;padding:10px 20px 40px}
.doc .box{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 26px;margin:0 0 18px}
.doc h1{font-size:40px;margin:10px 0 6px}
.doc h2{font-size:24px;margin:0 0 8px}
.doc p,.doc li{color:#E9E0F5}
.doc .muted{color:var(--muted)}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:20px;padding-top:8px}
  .hero .phone{max-width:220px;order:-1}
  .shots{grid-template-columns:1fr 1fr}
  .shots figure:first-child{grid-column:1/-1}
  .cards{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
}
@media (max-width:420px){.cards{grid-template-columns:1fr}.btn{width:100%}.join .btn{width:auto}}
.hero>*,.shots>*,.two>*,.cards>*{min-width:0}