Spaces:
Running
Running
| /* Sled Volt: 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}} | |
| /* in-game shop (shop.js): quiet rows, one accent, never during play */ | |
| .linkbtn{background:none;border:0;padding:4px 2px;color:#BFE9FF;font:600 14px system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px} | |
| .oshop{opacity:.9}.gline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-content:space-between} | |
| .shop{display:flex;flex-direction:column;gap:8px;max-width:620px;width:100%;margin:0 auto} | |
| .shop-row{display:flex;align-items:center;gap:10px;justify-content:space-between;border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);padding:10px 12px} | |
| .shop-t{display:flex;flex-direction:column;gap:2px;min-width:0}.shop-t b{font:800 19px var(--cond);letter-spacing:.03em}.shop-t span{font-size:13px;color:#BFD3F0} | |
| .shop-row .shop-buy{flex:none;min-width:84px;min-height:44px;display:inline-grid;place-items:center;text-decoration:none} | |
| .shop-note{margin:0 auto;max-width:620px;width:100%;color:#FFE14D;font-weight:700} | |
| .shop-fine{margin:4px auto 0;max-width:620px;width:100%;font-size:12px;color:#A3B8D8;line-height:1.45}.shop-fine a{color:#BFE9FF} | |
| .shop-code{max-width:620px;width:100%;margin:0 auto;font-size:13px;color:#BFD3F0}.shop-code form{display:flex;gap:6px;margin-top:6px}.shop-code input{flex:1;min-width:0;border-radius:10px;border:0;padding:8px;font:inherit} | |