:root{--night:#0a1020;--night2:#111a30;--pitch:#0e3b2c;--turf:#15603f;--chalk:#eef4ec;--muted:#a9bcb2;--gold:#f2c14e;--gold2:#ffe08f;--red:#f0605d;--line:rgba(238,244,236,.14);--r:14px;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--cond:"Arial Narrow","Roboto Condensed","Helvetica Neue",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--chalk);font:17px/1.65 var(--font)}
a{color:var(--gold2)}
a:hover{color:#fff}
.wrap{width:min(1040px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dim{color:var(--muted)}
button{font:inherit;cursor:pointer}
/* header */
.site-head{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1730,var(--night))}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--chalk);text-decoration:none;font:800 19px/1 var(--cond);letter-spacing:.02em;text-transform:uppercase}
.brand em{font-style:normal;color:var(--gold)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:15px;padding:6px 10px;border-radius:999px}
.nav a:hover{color:var(--chalk);background:rgba(255,255,255,.06)}
/* hero + stage */
.hero{padding:18px 0 8px;background:radial-gradient(120% 70% at 50% 0,rgba(21,96,63,.55),transparent 70%)}
.hero-title{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:12px}
.hero h1{margin:0;font:800 clamp(28px,5vw,44px)/1.05 var(--cond);text-transform:uppercase;letter-spacing:.01em}
.tagline{margin:0;color:var(--muted);font-size:15px}
.stage{position:relative;width:100%;height:min(700px,calc(100svh - 110px));min-height:600px;border-radius:var(--r);overflow:hidden;background:var(--pitch);box-shadow:0 0 0 1px var(--line),0 24px 60px -20px rgba(0,0,0,.7)}
@media (min-width:760px){.stage{height:auto;aspect-ratio:16/10;min-height:600px;max-height:calc(100vh - 120px)}}
.stage:fullscreen{max-height:none;height:100%;border-radius:0}
.cover{position:absolute;inset:0;cursor:pointer}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,32,.15) 30%,rgba(10,16,32,.92))}
.cover-ui{position:absolute;inset:auto 0 0 0;padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.cover-facts{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cover-facts li{font:700 13px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:rgba(10,16,32,.7);border:1px solid var(--line)}
.play-btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:16px 30px;background:var(--gold);color:#13100a;font:800 20px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em;box-shadow:0 10px 30px -8px rgba(242,193,78,.7);transition:transform .15s}
.cover:hover .play-btn,.play-btn:focus-visible{transform:translateY(-2px) scale(1.03)}
/* loader */
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(circle at 50% 45%,var(--turf),var(--pitch) 70%)}
.loader[hidden]{display:none}
.pitch-lines{position:absolute;inset:18px;border:2px solid rgba(238,244,236,.18);border-radius:8px}
.pitch-lines::before{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border:2px solid rgba(238,244,236,.18);border-radius:50%}
.pitch-lines::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(238,244,236,.18)}
.vault-door{position:relative;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--gold) 0 25%,#c99a2e 0 50%,var(--gold) 0 75%,#c99a2e 0);animation:spin 2.4s linear infinite;box-shadow:0 0 0 6px rgba(10,16,32,.5)}
.vault-door span{position:absolute;inset:22px;border-radius:50%;background:var(--night)}
.ball{position:absolute;top:calc(50% - 90px);left:calc(50% - 120px);width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#cfd6cf);animation:roll 1.2s ease-in-out infinite alternate}
.loader p{position:relative;margin:0;font:700 15px/1.4 var(--font);letter-spacing:.03em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes roll{from{transform:translate(0,0)}to{transform:translate(220px,40px)}}
@media (prefers-reduced-motion:reduce){.vault-door,.ball{animation:none}}
/* actions */
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 4px}
.act{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--night2);color:var(--chalk);text-decoration:none;font-size:15px}
.act:hover{border-color:rgba(242,193,78,.6)}
.act.like[aria-pressed=true]{color:var(--red);border-color:rgba(240,96,93,.6)}
.act.full{margin-left:auto}
.share-msg{color:var(--gold2);font-size:14px}
/* copy */
.copy{padding:28px 0 8px}
.prose{max-width:760px}
.prose h2{font:800 clamp(24px,3.6vw,30px)/1.2 var(--cond);text-transform:uppercase;letter-spacing:.01em;margin:40px 0 10px;color:#fff}
.prose h3{font-size:19px;margin:24px 0 6px;color:var(--gold2)}
.prose p,.prose li{color:#dde6df}
.prose table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.prose th{background:var(--night2)}
.prose img{max-width:100%;height:auto;border-radius:var(--r)}
.prose code{background:var(--night2);padding:1px 6px;border-radius:6px}
/* faq */
.faq{padding:12px 0 8px;max-width:760px}
.faq h2,.comments h2{font:800 clamp(24px,3.6vw,30px)/1.2 var(--cond);text-transform:uppercase;margin:36px 0 12px}
.faq details{border:1px solid var(--line);border-radius:var(--r);margin:8px 0;background:var(--night2)}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 16px 14px;color:#dde6df}
/* comments */
.comments{padding:8px 0 40px;max-width:760px}
.c-form{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--night2)}
.c-form[data-gf-replying]{border-color:var(--gold)}
.c-form input,.c-form textarea{width:100%;font:inherit;color:var(--chalk);background:var(--night);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.c-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:999px;padding:10px 18px;background:var(--gold);color:#13100a;font-weight:800}
.link{background:none;border:0;color:var(--gold2);padding:0;font-size:14px}
.replying:empty,[data-gf-reply-cancel]{display:none}
.c-form[data-gf-replying] [data-gf-reply-cancel]{display:inline}
.c-msg{color:var(--gold2);font-size:14px}
.c-list,.c-replies{list-style:none;margin:14px 0 0;padding:0}
.c-replies{margin:8px 0 0 18px;border-left:2px solid var(--line);padding-left:12px}
.c-item{padding:12px 0;border-bottom:1px solid var(--line)}
.c-head{margin:0;font-size:14px;color:var(--muted)}
.c-head b{color:var(--chalk)}
.c-text{margin:4px 0;white-space:pre-wrap}
.owner{display:none;font-size:12px;font-weight:800;color:#13100a;background:var(--gold);border-radius:6px;padding:1px 6px}
[data-gf-owner] > .c-head .owner{display:inline}
[data-gf-owner]{background:linear-gradient(90deg,rgba(242,193,78,.08),transparent)}
.to:empty{display:none}
.c-list[data-gf-empty]::before{content:"No comments yet. Post your best deep cut and see who can beat it.";color:var(--muted)}
/* inner pages */
.page{padding:28px 0 40px}
.page h1{font:800 clamp(28px,5vw,40px)/1.1 var(--cond);text-transform:uppercase;margin:0 0 10px}
.lede{font-size:19px;color:var(--muted);max-width:760px}
.back{margin-top:30px}
/* footer */
.site-foot{border-top:1px solid var(--line);background:#070c18;padding:26px 0 34px;font-size:15px;color:var(--muted)}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.foot-nav a{color:var(--chalk)}
.foot-note{font-size:13px}

/* ================= game frame (/embed/play) ================= */
.fbg-body{background:radial-gradient(130% 90% at 50% 0,#13503a,var(--pitch) 55%,#08281d);min-height:100vh;margin:0}
.fbg{min-height:100vh;display:flex;flex-direction:column;padding:10px;gap:8px;max-width:760px;margin:0 auto;font-size:16px}
.fbg-top{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}
.fbg-modes{display:inline-flex;background:rgba(10,16,32,.55);border-radius:999px;padding:3px;border:1px solid var(--line)}
.fbg-modes button{border:0;background:none;color:var(--muted);padding:7px 13px;border-radius:999px;font-weight:700;font-size:14px}
.fbg-modes button[aria-pressed=true]{background:var(--chalk);color:var(--night)}
.fbg-vault{justify-self:end;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fbg-vault-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fbg-vault strong{font:800 24px/1 var(--cond);color:var(--gold);font-variant-numeric:tabular-nums}
.fbg-vault-of{color:var(--muted);font-size:14px;white-space:nowrap}
.fbg-vault-bar{flex-basis:100%;height:6px;border-radius:9px;background:rgba(10,16,32,.6);overflow:hidden}
.fbg-vault-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#c99a2e,var(--gold2));transition:width .6s}
.fbg-dots{grid-column:1/-1;display:flex;gap:6px;list-style:none;margin:0;padding:0}
.fbg-dots .d{flex:1;height:8px;border-radius:9px;background:rgba(238,244,236,.16)}
.fbg-dots .live{background:var(--chalk);animation:pulse 1.2s ease-in-out infinite}
.fbg-dots .deep{background:#7dd3fc}.fbg-dots .solid{background:#4ade80}.fbg-dots .safe{background:var(--gold)}.fbg-dots .miss{background:var(--red)}
@keyframes pulse{50%{opacity:.45}}
.fbg-screen{flex:1;display:flex;flex-direction:column;gap:10px;background:rgba(10,16,32,.72);border:1px solid var(--line);border-radius:18px;padding:18px;backdrop-filter:blur(4px)}
.fbg-screen[hidden]{display:none}
.fbg-kicker{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.fbg-big{margin:0;font:800 clamp(24px,5vw,34px)/1.12 var(--cond);text-transform:uppercase}
.fbg-note{margin:0;color:var(--muted);font-size:15px}
.fbg-chips{display:flex;flex-wrap:wrap;gap:8px}
.fbg-chips button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--chalk);border-radius:999px;padding:8px 13px;font-size:14px}
.fbg-chips button[aria-pressed=true]{background:var(--gold);color:#13100a;border-color:var(--gold);font-weight:800}
.fbg-chips button:disabled{opacity:.4;cursor:not-allowed}
.fbg-toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:15px}
.fbg-toggle input{width:18px;height:18px;accent-color:var(--gold)}
.fbg-cta{border:0;border-radius:999px;padding:14px 24px;background:var(--gold);color:#13100a;font:800 18px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em;align-self:flex-start}
.fbg-cta:hover{background:var(--gold2)}
.fbg-ghost{border:1px solid var(--line);border-radius:999px;padding:12px 18px;background:none;color:var(--chalk);font-weight:700}
.fbg-stats{margin:auto 0 0;color:var(--muted);font-size:14px}
.fbg-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.fbg-q{margin:0;font:800 clamp(22px,4.4vw,30px)/1.2 var(--cond)}
.fbg-hint{margin:0;color:var(--muted);font-size:14px}
.fbg-clockbar{position:relative;height:10px;border-radius:9px;background:rgba(238,244,236,.12);overflow:visible}
.fbg-clockbar[hidden]{display:none}
.fbg-clockbar span{position:absolute;inset:0 auto 0 0;width:var(--p,100%);border-radius:9px;background:var(--chalk);transition:width .2s linear}
.fbg-clockbar.low span{background:var(--red)}
.fbg-clockbar em{position:absolute;right:0;top:12px;font-style:normal;font-size:12px;color:var(--muted)}
.fbg-field{position:relative;margin-top:6px}
.fbg-field input{width:100%;font:600 20px/1.2 var(--font);padding:14px 16px;border-radius:12px;border:2px solid rgba(238,244,236,.3);background:#fff;color:#0a1020}
.fbg-field input:focus{outline:none;border-color:var(--gold)}
.fbg-sug{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;color:#0a1020;border-radius:12px;box-shadow:0 18px 40px -10px rgba(0,0,0,.6);max-height:240px;overflow:auto}
.fbg-sug[hidden]{display:none}
.fbg-sug li{padding:10px 12px;border-radius:8px;cursor:pointer}
.fbg-sug li:hover,.fbg-sug li.on{background:#fdf0c8}
.fbg-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fbg-row .fbg-cta{align-self:auto;margin-left:auto}
.fbg-tries{display:inline-flex;gap:5px;align-items:center}
.fbg-tries i{width:12px;height:12px;border-radius:50%;border:2px solid var(--chalk);opacity:.35}
.fbg-tries i.on{background:var(--chalk);opacity:1}
.fbg-msg{margin:0;min-height:1.4em;font-size:15px}
.fbg-msg.bad{color:#ffb4b2}.fbg-msg.warn{color:var(--gold2)}
.fbg-r-head{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:rgba(238,244,236,.06)}
.fbg-r-head .amt{font:800 40px/1 var(--cond);font-variant-numeric:tabular-nums}
.fbg-r-head .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.fbg-r-head.deep .amt{color:#7dd3fc}.fbg-r-head.solid .amt{color:#4ade80}.fbg-r-head.safe .amt{color:var(--gold)}.fbg-r-head.miss .amt{color:var(--red)}
.fbg-r-you{margin:0;font-weight:700}
.fbg-r-you:empty{display:none}
.fbg-r-q{margin:0;color:var(--muted);font-size:14px}
.fbg-r-cols{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.fbg-r-cols{grid-template-columns:1fr 1fr}}
.fbg-r-cols h2{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fbg-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fbg-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(238,244,236,.05);border-left:4px solid transparent;font-size:15px}
.fbg-list li span{color:var(--muted);white-space:nowrap}
.fbg-list li.me{outline:2px solid var(--gold)}
.fbg-list li.deep{border-left-color:#7dd3fc}.fbg-list li.solid{border-left-color:#4ade80}.fbg-list li.safe{border-left-color:var(--gold)}.fbg-list li.miss{border-left-color:var(--red)}
.fbg-list-end li span{color:var(--chalk)}
.fbg-total{margin:0;font:800 clamp(48px,12vw,72px)/1 var(--cond);color:var(--gold);font-variant-numeric:tabular-nums}
.fbg-grid{margin:0;font-size:26px;letter-spacing:4px}
.fbg-board{padding:12px;border-radius:14px;background:rgba(238,244,236,.05)}
.fbg-board p{margin:0 0 8px;font-weight:700}
.fbg-name{display:flex;gap:8px;margin-top:10px}
.fbg-name input{flex:1;min-width:0;font:inherit;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--night);color:var(--chalk)}
.fbg-name button{border:0;border-radius:10px;padding:9px 14px;background:var(--chalk);color:var(--night);font-weight:800}
.fbg-row-end{margin-top:auto}
.prose figure{margin:22px 0}
.prose figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:6px}