/* Splash Turf 3D layout + HUD. Game colours live in render3d.js (THEMES). (c) 2026 CyberMax. All rights reserved. */
:root{--game:#13BDF0;--game2:#FF3FA4}
:root{--fizz:#13BDF0;--punch:#FF3FA4;--gold:#FFE14D;--hud:rgba(10,14,40,.62)}
.wrap{max-width:1180px}
.seo,.under,footer{max-width:760px;margin-left:auto;margin-right:auto}
.headline h1{margin:6px 0 0}.headline h1 .num{color:var(--muted);font-weight:700;font-size:.62em}
.tag{margin:0 0 10px}
.stage{position:relative;margin-top:8px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#1B2350 url(loading.jpg) center/cover no-repeat;isolation:isolate}
#c{display:block;width:100%;height:clamp(460px,calc(100svh - 150px),760px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;outline:none;background:transparent}
@media (max-width:900px),(pointer:coarse){body.playing{overflow:hidden}body.playing .stage{position:fixed;inset:0;margin:0;border-radius:0;z-index:60}body.playing #c{height:100svh;height:100dvh}}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;background:radial-gradient(120% 80% at 50% 20%,rgba(14,18,44,.15),rgba(14,18,44,.7));color:#F3F5F8;overflow:auto;text-align:center;z-index:5}
.ov.load{background:rgba(14,18,44,.82);backdrop-filter:blur(6px)}
.ov.sheet{justify-content:flex-start;background:rgba(14,18,44,.92);text-align:left;align-items:stretch}
#menu.logo-only>*:not(.logo){display:none}#menu.logo-only{background:none}
.logo{font:900 clamp(52px,13vw,96px)/.95 system-ui,sans-serif;letter-spacing:-.03em;margin:0;color:#16C1E8;text-shadow:0 6px 0 #0A6F8A,0 14px 34px rgba(0,0,0,.45);transform:rotate(-3deg);animation:wob 2.4s ease-in-out infinite}
.logo i{color:#FF4FA0;font-style:normal;text-shadow:0 6px 0 #A3245F,0 14px 34px rgba(0,0,0,.45)}
.logo small{display:inline-block;margin-left:.12em;font-size:.42em;vertical-align:top;color:#FFE14D;text-shadow:0 4px 0 #B08A00,0 10px 24px rgba(0,0,0,.4);transform:rotate(8deg)}
@keyframes wob{50%{transform:rotate(2deg) scale(1.03)}}
.lbar{width:min(320px,70%);height:12px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}.lbar i{display:block;height:100%;width:4%;background:linear-gradient(90deg,var(--fizz),var(--punch));border-radius:99px;transition:width .2s}
.mday{margin:0;font-weight:800;color:#FFE14D;max-width:460px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.bigplay{min-height:66px;font-size:24px;padding:12px 46px;border-radius:18px;background:#FF4FA0;color:#fff;box-shadow:0 6px 0 #A3245F,0 14px 30px rgba(0,0,0,.3);animation:pulse 1.6s ease-in-out infinite;text-decoration:none;display:inline-flex;align-items:center}
@keyframes pulse{50%{transform:scale(1.05)}}
.mbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:min(380px,100%);text-align:left;background:rgba(12,16,42,.55);border:1.5px solid rgba(255,255,255,.25);color:#fff;border-radius:14px;padding:9px 14px;font:inherit;font-weight:800;cursor:pointer;backdrop-filter:blur(4px)}
.mbtn:hover{background:rgba(12,16,42,.75)}.mbtn span{font-size:13px;font-weight:600;color:#C9D3FF}.mbtn .lock,.chip .lock{font-style:normal;font-size:12px;background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#11141B;border-radius:999px;padding:1px 7px;margin-left:4px}
.mrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:520px}
.mrow .btn.ghost,.sheet .btn.ghost,.over .btn.ghost,.ov .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(12,16,42,.45)}
.chip.dk{background:rgba(12,16,42,.5);color:#fff;border-color:rgba(255,255,255,.3);font-size:13px;min-height:34px;padding:4px 10px}
.chip.dk[aria-pressed=true]{background:#fff;color:#11141B;border-color:#fff}
.hint{font-size:13px;color:#DCE3FF;max-width:440px;margin:2px 0 0;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.sheet h2{margin:0 0 6px;color:#fff}.sheet .top-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
#archive-list{gap:8px;margin-top:10px}#archive-list .chip{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}
.over{position:absolute;inset:0;overflow:auto;margin:0;border-radius:0;background:linear-gradient(rgba(14,18,44,.35),rgba(14,18,44,.92) 46%);color:#F3F5F8;border:0;text-align:center;display:block;padding:22px 16px;z-index:6}
.over h2{margin:6px 0 0;color:#fff;font-size:30px;text-shadow:0 3px 10px rgba(0,0,0,.5)}.over .muted{color:#C9D3FF}
.score{font:900 clamp(46px,12vw,76px)/1 system-ui,sans-serif;margin:6px 0;text-shadow:0 4px 14px rgba(0,0,0,.4)}.score small{font-size:.4em;color:#C9D3FF;vertical-align:middle}
.over .row{justify-content:center;margin:6px 0}
.grid{font-size:26px;letter-spacing:3px;margin:4px 0}
.vs{font-weight:800;color:#FFE14D;margin:4px 0}
.clipv{display:block;width:min(300px,70%);max-height:30vh;margin:6px auto;border-radius:14px;border:3px solid #fff;background:#000;object-fit:cover}
.over .fp-after{text-align:left;color:var(--ink);background:var(--card);border-radius:14px;max-width:480px;margin:14px auto 0}
.under{justify-content:center;margin:12px auto}
/* HUD */
.hud{position:absolute;inset:0;pointer-events:none;z-index:4;color:#fff;font-weight:900;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hud-top{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:min(520px,calc(100% - 120px))}
.hud-top b{font-size:18px;min-width:44px;text-shadow:0 2px 6px rgba(0,0,0,.5)}.hud-top .pf{color:var(--fizz);text-align:right}.hud-top .pp{color:var(--punch)}
.bar{flex:1;height:14px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden;position:relative;box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 0 0 2px rgba(255,255,255,.6)}
.bar i{position:absolute;top:0;bottom:0;transition:width .25s}.bar .f{left:0;background:var(--fizz)}.bar .p{right:0;background:var(--punch)}
.timer{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 22px);left:50%;transform:translateX(-50%);font-size:22px;background:var(--hud);padding:2px 12px;border-radius:12px;letter-spacing:.02em}
.timer.late{color:#FFE14D;animation:pulse .5s ease-in-out infinite}
.spots{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 58px);left:50%;transform:translateX(-50%);display:flex;gap:5px}
.spots i{font-style:normal;font-size:15px;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .3s}
.spots .s1{background:var(--fizz)}.spots .s2{background:var(--punch)}
.feed{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-size:13px;max-width:44%}
.feed div{background:var(--hud);padding:3px 9px;border-radius:9px;transition:opacity .6s}.feed .old{opacity:0}
.ammo{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:5px;align-items:center}
.ammo i{width:16px;height:20px;border-radius:50% 50% 46% 46%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.7)}.ammo i.on{background:var(--fizz);border-color:#fff}.ammo i.mega{background:#FFD23F;transform:scale(1.25)}
.ammo .inf{font-size:20px;background:var(--hud);padding:2px 10px;border-radius:10px}
.power{position:absolute;right:16px;bottom:calc(50px + env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:conic-gradient(#FFE14D calc(var(--k,1)*360deg),rgba(255,255,255,.2) 0);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.cross{position:absolute;left:50%;top:44%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2.5px solid rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(0,0,0,.25);display:none}
.cross.lock{display:block}
.coach{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:rgba(10,14,40,.82);padding:10px 16px;border-radius:14px;font-weight:700;font-size:15px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;max-width:calc(100% - 24px);white-space:normal;text-align:center}
.coach.show{opacity:1;transform:translateX(-50%)}.coach b{color:#FFE14D}
.big{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);font:900 clamp(56px,15vw,120px)/1 system-ui,sans-serif;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.25),0 0 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;z-index:7;white-space:nowrap;transition:transform .25s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.big.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.big.go{color:#FFE14D}.big.win{color:var(--fizz);font-size:clamp(44px,11vw,96px)}.big.lose{color:var(--punch);font-size:clamp(44px,11vw,96px)}.big.late{color:#FFE14D}
.cap{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:8;max-width:88%;padding:12px 20px;border-radius:16px;background:rgba(10,14,40,.85);color:#fff;font:800 clamp(18px,4.4vw,28px)/1.25 system-ui,sans-serif;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none}
.cap.show{opacity:1}.cap b{color:#FFE14D}
.floats{position:absolute;inset:0;overflow:hidden}
.flt{position:absolute;left:0;top:0;font-weight:900;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 12px rgba(0,0,0,.35);white-space:nowrap;display:none;will-change:transform}
.stick{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);opacity:0;transition:opacity .15s}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.stick.r i{background:rgba(255,225,77,.92)}.stick.on{opacity:1}
.zone-hint{display:none;position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:.12em;opacity:.55}.zone-hint.l{left:16px}.zone-hint.r{right:120px}
@media (pointer:coarse){.zone-hint{display:block}}
.hbtn{pointer-events:auto;position:absolute;left:12px;top:max(10px,env(safe-area-inset-top));width:38px;height:38px;border-radius:12px;border:0;background:var(--hud);color:#fff;font-size:14px;font-weight:900}
@media (max-width:560px){.headline .tag{display:none}.headline h1{font-size:26px}.mbtn{padding:7px 12px}.bigplay{min-height:58px;font-size:22px}.over{padding-top:14px}.hud-top{width:calc(100% - 110px);left:calc(50% + 10px)}.feed{top:calc(max(10px,env(safe-area-inset-top)) + 96px);right:8px}.hud-top b{font-size:15px;min-width:36px}}
@media (prefers-reduced-motion:reduce){.logo,.bigplay,.timer.late{animation:none}}
/* Skin Pack row */
.mrow.skins{align-items:center;gap:6px}.sk-l{font-size:13px;font-weight:800;color:#DCE3FF;cursor:pointer}.sk-l .lock{font-style:normal;font-size:12px;background:linear-gradient(135deg,#FFB547,#FF6A3D);color:#11141B;border-radius:999px;padding:1px 7px;margin-left:4px}
.skin{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.6);cursor:pointer;padding:0}.skin.on{outline:3px solid #FFE14D;outline-offset:2px}
.sp-row{display:flex;gap:6px;margin:0 0 10px}.sp-dot{width:26px;height:26px;border-radius:50%;display:inline-block;border:2px solid var(--line)}
.tgup{padding:12px 14px}
/* Telegram Mini App: the stage is the whole app; Telegram's own safe areas and stable viewport height */
body.tg{background:#0E1430}
body.tg .top,body.tg .headline,body.tg .seo,body.tg footer,body.tg .under,body.tg #sx,body.tg #sb,body.tg #sw,body.tg #clip,body.tg #card,body.tg .ov .btn.ghost[href^="classic"]{display:none!important}
body.tg .wrap{padding:0;max-width:none}
body.tg .stage{position:fixed;inset:0;margin:0;border-radius:0;z-index:60}
body.tg #c{height:var(--tgh,100vh)}
body.tg .hud{top:var(--tgt,0px);bottom:var(--tgb,0px)}
body.tg .ov{padding-top:calc(18px + var(--tgt,0px));padding-bottom:calc(18px + var(--tgb,0px))}
body.tg .over{padding-top:calc(16px + var(--tgt,0px))}
.endcard{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#fff;background:radial-gradient(90% 70% at 50% 45%,rgba(14,18,44,.35),rgba(14,18,44,.88));padding:24px}
.endcard .logo{font-size:clamp(56px,16vw,120px)}.endcard p{margin:0;font:800 clamp(20px,5vw,34px)/1.25 system-ui,sans-serif}.endcard .url{background:#FF4FA0;color:#fff;padding:12px 22px;border-radius:16px;box-shadow:0 6px 0 #A3245F;font-size:clamp(18px,4.6vw,30px)}.endcard small{font:700 clamp(14px,3.4vw,20px) system-ui,sans-serif;color:#DCE3FF}
.skin.lk{opacity:.45}.skin.daily{outline:2px dashed #FFE14D;outline-offset:2px;opacity:1}.tgrow .btn i{font-style:normal;opacity:.8}