/* Sledvolt: game page styles on top of the CyberMax fun kit (fun.css). Phone first, safe-area aware. (c) 2026 CyberMax. */
@font-face{font-family:"Barlow Condensed";font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-800.woff2) format("woff2")}
:root{--game:#5CE1FF;--game2:#8E7BFF;--acc:#FF6A3D;--snow:#F4F8FF;--ice:#7FDCFF;--night:#0B1830;--cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif}
.headline{margin:4px 0 12px}.headline .tag{margin:0;max-width:620px}
.stage{position:relative;width:100%;aspect-ratio:16/10;max-height:78vh;min-height:420px;border-radius:22px;overflow:hidden;background:linear-gradient(#7FBFFF,#E6F2FF);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media (max-width:700px){.headline .tag{display:none}.headline h1{font-size:26px}.headline{margin:0 0 8px}.stage{aspect-ratio:auto;height:calc(100svh - 120px);min-height:520px;max-height:none;border-radius:18px;margin:0 -8px;width:calc(100% + 16px)}}
@media (min-width:1100px){.wrap{max-width:1080px}.seo,footer{max-width:760px;margin-left:auto;margin-right:auto}.headline{text-align:center}.headline .tag{margin:0 auto}}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
body.playing{overflow:hidden}
body.playing .stage{position:fixed;inset:0;width:100%;height:100%;max-height:none;min-height:0;margin:0;border-radius:0;z-index:50;aspect-ratio:auto}
/* HUD */
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--cond);color:#fff;text-shadow:0 2px 0 rgba(10,24,48,.55),0 0 16px rgba(10,24,48,.35);padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.hud-tl{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top))}
.score{font-size:clamp(34px,7vw,54px);line-height:.95;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.sub{display:flex;gap:10px;align-items:center;font-size:20px;margin-top:2px}
.mult{background:var(--acc);color:#11141B;text-shadow:none;border-radius:8px;padding:0 7px;font-size:18px}
.mult.x2{background:linear-gradient(135deg,#FFE14D,#FF6A3D)}
.combo{background:#8E7BFF;border-radius:8px;padding:0 7px;text-shadow:none;font-size:18px;animation:pulse .5s}
.coins b{color:#FFE27A}
.hud-tc{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);text-align:center}
.dist{font-size:22px;opacity:.95}
.vs{margin-top:4px;font-size:16px;background:rgba(11,24,48,.55);border-radius:10px;padding:2px 10px;text-shadow:none}
.vs.ahead{background:rgba(47,211,160,.8);color:#06221A}
.hud-tr{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top))}
.hbtn{pointer-events:auto;width:48px;height:48px;border-radius:14px;border:0;background:rgba(11,24,48,.45);color:#fff;font:800 18px var(--cond);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hud-pw{position:absolute;left:max(14px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 92px);display:flex;flex-direction:column;gap:6px}
.pw{display:flex;align-items:center;gap:6px;font-size:16px}.pw i{font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;text-shadow:none;color:#11141B}
.pw .bar{width:70px;height:7px;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden}.pw .bar b{display:block;height:100%;background:#fff}
.volt{pointer-events:auto;position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));width:92px;height:92px;border-radius:50%;border:0;background:rgba(11,24,48,.5);color:#fff;font:800 22px var(--cond);letter-spacing:.04em;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:manipulation}
.volt svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.volt .ring-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:8}.volt .ring{fill:none;stroke:#5CE1FF;stroke-width:8;stroke-linecap:round;stroke-dasharray:276.5;stroke-dashoffset:276.5;transition:stroke-dashoffset .2s}
.volt span{position:relative;opacity:.65}.volt.full{background:radial-gradient(circle,#5CE1FF,#2B7BFF);box-shadow:0 0 30px #5CE1FF;animation:pulse 0.8s infinite alternate}.volt.full span{opacity:1}
.volt.on{background:#FFE14D;color:#11141B;box-shadow:0 0 40px #FFE14D}
.pop{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:clamp(28px,6vw,46px);opacity:0;white-space:nowrap}
.pop.on{animation:popup .7s ease-out}
.biome{position:absolute;left:50%;top:22%;transform:translateX(-50%);font-size:clamp(26px,5vw,40px);opacity:0;letter-spacing:.06em;white-space:nowrap}
.biome.on{animation:fade 2.4s ease-out}
.beast{position:absolute;left:50%;bottom:max(130px,18%);transform:translateX(-50%);background:rgba(200,30,60,.85);border-radius:12px;padding:4px 14px;font-size:20px;text-shadow:none;animation:pulse .4s infinite alternate;white-space:nowrap}
.hud.danger::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(220,30,60,.55);pointer-events:none}
.hint{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);background:rgba(11,24,48,.65);border-radius:14px;padding:8px 16px;font-size:22px;text-shadow:none;white-space:nowrap}
@keyframes popup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}
@keyframes fade{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.06)}}
.beast{animation-name:bpulse}@keyframes bpulse{from{opacity:.75}to{opacity:1}}
/* overlays */
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));text-align:center;color:#fff}
.ov h2{margin:0;font:800 34px var(--cond);letter-spacing:.03em}
.menu{background:linear-gradient(180deg,rgba(8,20,44,.15),rgba(8,20,44,.55) 60%,rgba(8,20,44,.75))}
.logo{margin:0;font:800 clamp(58px,13vw,104px)/0.9 var(--cond);letter-spacing:.02em;text-shadow:0 4px 0 #0B1830,0 0 40px rgba(92,225,255,.6);transform:skewX(-8deg)}
.logo span{color:#fff}.logo i{font-style:normal;color:#5CE1FF;-webkit-text-stroke:2px #0B1830}
.mstats{margin:0;font:800 20px var(--cond);letter-spacing:.03em;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.btn.big{min-height:62px;min-width:220px;font:800 28px var(--cond);letter-spacing:.06em;border-radius:18px;background:linear-gradient(135deg,#FF8A3D,#FF5A2D);color:#11141B;box-shadow:0 8px 0 #A8341A,0 14px 34px rgba(255,90,45,.45)}
.btn.big:active{transform:translateY(4px);box-shadow:0 4px 0 #A8341A}
.mrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mbtn{min-width:160px;min-height:56px;border-radius:14px;border:1.5px solid rgba(255,255,255,.35);background:rgba(11,24,48,.55);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 14px;font:inherit;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mbtn b{font:800 20px var(--cond);letter-spacing:.04em}.mbtn span{font-size:13px;opacity:.85}
.mbtn:hover,.btn.ghost:hover{border-color:#5CE1FF}
.ov .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(11,24,48,.45)}
.small3 .btn{min-height:44px}#m-sound{min-width:48px}
.keys{margin:2px 0 0;font-size:14px;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.also{margin:0;font-size:13px;opacity:.85}.also a{color:#BDEBFF}
.chal{background:rgba(142,123,255,.85);border-radius:14px;padding:8px 14px;font-weight:700;max-width:440px}
.over{background:rgba(8,18,40,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.why{margin:0;font:800 22px var(--cond);letter-spacing:.04em;color:#FFD0C2}
.oscore{margin:0;font:800 clamp(64px,14vw,96px)/0.95 var(--cond);text-shadow:0 4px 0 #0B1830}
.orec{margin:0;font:800 24px var(--cond);color:#FFE14D;animation:pulse .5s infinite alternate}
.oline{margin:0;font-size:15px;opacity:.92}
.omis{list-style:none;margin:2px 0;padding:0;font-size:14px;display:flex;flex-direction:column;gap:3px;min-width:min(340px,90%)}
.omis li{display:flex;justify-content:space-between;gap:10px;background:rgba(255,255,255,.08);border-radius:9px;padding:4px 10px}.omis li.done{background:rgba(47,211,160,.3)}
.tapnote{margin:0;font-size:13px;opacity:.7}
.post{display:flex;gap:6px}.post input{width:90px;text-transform:uppercase;font:800 22px var(--cond);text-align:center;border-radius:10px;border:0;padding:6px}
.sheet{justify-content:flex-start;background:rgba(8,18,40,.9);overflow:auto;text-align:left;align-items:stretch}
.sheet .top-row{display:flex;justify-content:space-between;align-items:center;max-width:620px;width:100%;margin:0 auto}
.tabs{display:flex;gap:6px;max-width:620px;width:100%;margin:0 auto}.tabs button{flex:1;min-height:44px;border-radius:12px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:800 18px var(--cond);cursor:pointer}.tabs button[aria-pressed=true]{background:#5CE1FF;color:#0B1830;border-color:#5CE1FF}
#s-body{max-width:620px;width:100%;margin:0 auto;display:grid;gap:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card{border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);padding:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.card.eq{border-color:#5CE1FF;box-shadow:0 0 0 2px #5CE1FF inset}.card b{font:800 19px var(--cond);letter-spacing:.03em}
.sw{width:100%;height:46px;border-radius:10px}.card .btn{width:100%;min-height:40px}
.mis{border-radius:12px;background:rgba(255,255,255,.07);padding:10px 12px}.mis .bar{height:8px;border-radius:9px;background:rgba(255,255,255,.2);margin-top:6px;overflow:hidden}.mis .bar b{display:block;height:100%;background:#2FD3A0}
.board{list-style:none;margin:0;padding:0;display:grid;gap:4px}.board li{display:flex;justify-content:space-between;background:rgba(255,255,255,.07);border-radius:9px;padding:6px 12px;font-variant-numeric:tabular-nums}.board li.me{background:rgba(92,225,255,.3)}
.count{position:absolute;inset:0;display:grid;place-items:center;font:800 120px var(--cond);color:#fff;text-shadow:0 6px 0 #0B1830;pointer-events:none}
.under{margin:8px 2px 0}
@media (max-width:560px){.mbtn{min-width:0;flex:1 1 140px;max-width:48%}.mbtn span{font-size:12px}.small3{flex-wrap:nowrap}.small3 .btn{flex:1 1 auto;min-width:0}.logo{font-size:64px}.small3 .btn{padding:6px 10px}.oline{font-size:14px}}
@media (max-height:430px){.logo{font-size:52px}.btn.big{min-height:52px;font-size:24px}.mbtn{min-height:48px}.keys,.also{display:none}.ov{gap:6px}.oscore{font-size:58px}.omis{display:none}}