:root{--green:#0F2620;--green2:#163a31;--line:#2c5a4d;--navy:#1E2D4F;--gold:#FFC93C;--cream:#F6ECD6;--muted:#A9C2B6;--red:#EF4A3C}
*{box-sizing:border-box}
html{background:var(--green);-webkit-text-size-adjust:100%}
html.snap{scroll-snap-type:y proximity}
body{margin:0;background:var(--green);color:var(--cream);font-family:'Work Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
.slab{font-family:'Alfa Slab One',Georgia,serif;font-weight:400}
.gold{color:var(--gold)}

/* header */
.hdr{position:relative;display:flex;justify-content:center;align-items:center;padding:14px 16px 6px;max-width:1240px;margin:0 auto}
.hdr .logo{width:min(400px,50vw)}
.hdr nav{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap}
.hdr nav a{text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding:8px 4px}
.hdr nav a:hover,.hdr nav a[aria-current]{color:var(--gold)}
.hdr nav i{color:var(--gold);font-style:normal;font-size:13px}
@media (max-width:899px){.hdr nav{right:12px}}
@media (max-width:600px){.hdr{padding:10px 12px 4px}.hdr .logo{width:56vw}.hdr nav{position:static;transform:none}.hdr nav i{display:none}.hdr nav a{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:.08em}.hdr nav a:first-child{left:10px}.hdr nav a:last-child{right:10px}}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;background:var(--gold);color:var(--green);font:800 17px/1 'Work Sans',sans-serif;border-radius:999px;padding:13px 24px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.pill svg{width:16px;height:16px;fill:currentColor}
.pill.ghost{background:transparent;color:var(--cream);box-shadow:none;border:2px solid var(--gold)}
.pill.red{background:var(--red);color:#fff}
.pill:active{transform:translateY(1px)}
.pill.glow{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,0)}50%{box-shadow:0 0 18px 6px rgba(255,201,60,.7)}}
@media (prefers-reduced-motion:reduce){.pill.glow{animation:none}}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* signup */
.signup h2{font-family:'Alfa Slab One',serif;font-weight:400;color:var(--gold);font-size:40px;line-height:1.05;margin:0 0 12px}
.signup p{margin:0 0 16px;font-size:19px}
.signup form{display:flex;flex-direction:column;gap:10px}
.signup input{font:700 17px 'Work Sans',sans-serif;color:var(--green);background:var(--cream);border:0;border-radius:12px;padding:15px 16px;width:100%}
.signup input::placeholder{color:#4F625A}
.signup button{font:800 18px 'Work Sans',sans-serif;background:var(--gold);color:var(--green);border:0;border-radius:12px;padding:15px;cursor:pointer}
.signup .done{display:none;font-weight:700;color:var(--gold)}
.signup.sent form{display:none}.signup.sent .done{display:block}
html.sub .sub-hide{display:none!important}
.follow{margin-top:18px;text-align:center}
.follow b{display:block;color:var(--gold);font-size:15px;margin-bottom:10px}
.icons{display:flex;gap:6px;justify-content:center;flex-wrap:nowrap}
.icons a{width:38px;height:38px;flex:0 0 38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font:800 19px 'Work Sans',sans-serif;text-decoration:none}
.icons svg{width:20px;height:20px}
.icons .fb{background:#1877F2}.icons .ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}.icons .tt,.icons .th{background:#000}.icons .yt{background:#FF0000}.icons .pn{background:#E60023}.icons .li{background:#0A66C2}

/* lineup stage */
.stage{position:relative;display:flex;justify-content:center;align-items:flex-start;max-width:1240px;margin:0 auto;padding:6px 16px 0}
.stage .mach{position:relative;flex:none}
.stage .mach>img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.stage .vcol{flex:none;display:flex;flex-direction:column;align-items:center}
.stage .vb{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.55);cursor:pointer}
.stage .vb video{width:100%;height:100%;object-fit:cover;display:block}
.stage .r{height:64px;display:flex;align-items:center;justify-content:center}
.stage .side{flex:0 1 330px;align-self:center;text-align:center;padding:0 0 4vh 8px}
.stage.ph{flex-direction:column;align-items:center;padding:4px 12px 0}
.stage.ph .side{align-self:stretch;max-width:420px;margin:24px auto 0;padding:0}
.stage.ph:not(.game) .mach{display:none}
.stage.ph.game .vb{display:none}
.stage.ph.game .vcol{order:-1}
.stage.mid{flex-wrap:wrap}
.stage.mid .side{flex:1 0 100%;max-width:440px;margin:28px auto 0;padding:0}

.hs{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center}
.instr{color:#2a1606;font-weight:700;line-height:1.15;font-size:calc(var(--mh) * .0165);padding:0 5%}
.plate{color:var(--gold);font-family:'Alfa Slab One',serif;font-size:calc(var(--mh) * .04);cursor:pointer;flex-direction:column;line-height:1;border-radius:8px;transition:box-shadow .2s;background:radial-gradient(ellipse at 50% 40%,#1f3466,#111d3c 80%);box-shadow:inset 0 0 14px rgba(0,0,0,.85)}
.plate small{font-family:'Work Sans',sans-serif;font-weight:800;font-size:calc(var(--mh) * .0125);margin-top:2px;max-width:95%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plate.ok{box-shadow:0 0 0 3px #7fd38a inset,0 0 14px rgba(127,211,138,.8)}
.plate.fill{background-size:cover;background-position:center;color:var(--cream);justify-content:flex-end;padding-bottom:2px;box-shadow:inset 0 0 0 2px rgba(60,30,5,.6)}
.plate.fill .num{position:absolute;left:5px;top:4px;font-size:calc(var(--mh) * .02);color:var(--gold);text-shadow:0 1px 2px #000}
.plate.fill small{background:rgba(10,10,10,.7);padding:1px 5px;border-radius:4px;color:var(--cream)}
.plate.ok.fill small{color:#bff5c6}
.win{border-radius:6px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;opacity:0;transition:opacity .5s,transform .15s}
.win.on{opacity:1}
.win span{position:absolute;left:0;right:0;bottom:0;background:rgba(10,10,10,.72);color:var(--cream);font-weight:800;font-size:calc(var(--mh) * .014);padding:2px 0}
.win.used{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><polygon points='52.0,32.0 57.1,38.7 50.8,38.8 53.3,46.9 47.3,44.9 46.9,53.3 42.0,49.3 38.7,57.1 35.5,51.7 29.7,57.9 28.5,51.7 21.0,55.6 22.0,49.3 13.6,50.4 16.7,44.9 8.4,43.0 13.2,38.8 6.1,34.3 12.0,32.0 6.9,25.3 13.2,25.2 10.7,17.1 16.7,19.1 17.1,10.7 22.0,14.7 25.3,6.9 28.5,12.3 34.3,6.1 35.5,12.3 43.0,8.4 42.0,14.7 50.4,13.6 47.3,19.1 55.6,21.0 50.8,25.2 57.9,29.7' fill='%231E2D4F'/><circle cx='32' cy='32' r='6.5' fill='%23d7dce1'/></svg>") center/auto 80% no-repeat!important;box-shadow:inset 0 0 8px rgba(0,0,0,.25)}
.win.used span{display:none}
.win:active{transform:scale(.97)}
.btn{font-family:'Alfa Slab One',serif;color:var(--cream);text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:calc(var(--mh) * .02);white-space:nowrap;cursor:pointer;border-radius:12px;user-select:none;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(2px)}
.btn.glow{animation:cg 1.6s ease-in-out infinite}@keyframes cg{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px #FFC93C) brightness(1.15)}}
.btn.off{color:rgba(246,236,214,.45)}
.bulb{border-radius:50%;transition:background .3s,box-shadow .3s}
.bulb.out{background:radial-gradient(circle,#2a1a10 40%,#120a06 75%);box-shadow:inset 0 0 6px #000}
.mach.flash .bulb{animation:fl .25s steps(2) infinite}
@keyframes fl{50%{background:rgba(255,240,180,.9);box-shadow:0 0 20px #ffd76a}}
.lever{cursor:pointer}
.fly{position:fixed;z-index:50;border-radius:6px;background-size:cover;background-position:center;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.6);transition:all .38s cubic-bezier(.3,.9,.3,1)}

/* sections */
.sec{max-width:1080px;margin:0 auto;padding:56px 16px}
.sec h2.t{font-family:'Alfa Slab One',serif;font-weight:400;font-size:36px;line-height:1.1;margin:0 0 8px;text-align:center}
.sec .sub{color:var(--muted);text-align:center;margin:0 0 26px}
html.snap .snapme,html.snap .hdr{scroll-snap-align:start}
.hero{min-height:calc(100svh - 190px)}

/* tiles */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}
.tile{display:flex;flex-direction:column;gap:8px;text-decoration:none;align-items:stretch}
.tile .pic{border-radius:8px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.45);aspect-ratio:9/16;background:#0a1a15}
.tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.tile:hover .pic img{transform:scale(1.03)}
.tile .cap{text-align:center;font-weight:700;font-size:15px}
.tile .cap span{color:var(--gold)}
.tile .pill{align-self:center;margin-top:auto;padding:10px 20px;font-size:15px}
@media (max-width:500px){.tile .pill{padding:9px 16px;font-size:14px}}

/* shelves */
.shelf+.shelf{border-top:1px solid rgba(246,236,214,.14);margin-top:40px;padding-top:40px}
.shelf h2{font-family:'Alfa Slab One',serif;font-weight:400;font-size:32px;text-align:center;margin:0 0 6px}
.shelf h2 b{color:var(--gold);font-weight:400}
.shelf .count{display:block;text-align:center;color:var(--muted);font-size:15px;margin:0 0 20px}
#progress{position:fixed;left:0;top:0;height:3px;width:0;background:var(--gold);box-shadow:0 0 8px rgba(255,201,60,.7);z-index:100}

/* page player */
.player{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 16px 0}
.player .vb{position:relative;width:min(92vw,calc((100svh - 390px) * 9 / 16),460px);aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 12px 30px rgba(0,0,0,.55);cursor:pointer}
.player .vb video{width:100%;height:100%;object-fit:cover;display:block}
.still{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 16px 0}
.still img{width:min(92vw,600px,calc((100svh - 390px) * 4 / 5));border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.soon{font-family:'Alfa Slab One',serif;color:var(--gold);font-size:20px;text-align:center;margin:4px 0 0}
.after{padding:22px 16px 10px}

/* ending + footer */
.ending{text-align:center}
.ending .signup{max-width:440px;margin:22px auto 0;background:var(--navy);border-radius:20px;padding:28px 22px}
.ending .signup h2{font-size:32px}
footer{max-width:1080px;margin:40px auto 0;padding:26px 16px 40px;border-top:1px solid rgba(246,236,214,.12);text-align:center;color:var(--muted);font-size:14px}
footer .q{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0 0 18px}
footer .q span{color:var(--cream);font-weight:600}
footer .q input{font:600 15px 'Work Sans',sans-serif;border:0;border-radius:10px;padding:10px 12px;background:var(--cream);color:var(--green);width:220px}
footer .q button{font:800 15px 'Work Sans',sans-serif;border:0;border-radius:10px;padding:10px 16px;background:var(--gold);color:var(--green);cursor:pointer}
footer .icons{margin:0 0 14px}
