@font-face{font-family:'Orbitron';src:url('fonts/Orbitron-Bold.ttf') format('truetype');font-weight:400 900;font-style:normal}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;overflow:hidden;width:100%;height:100%;touch-action:none;font-family:'Orbitron',monospace}
#wrap{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}
#wrap canvas{display:block}
#fb{position:fixed;bottom:0;left:0;width:100%;height:38%;background:linear-gradient(to top,#000 0%,rgba(1,13,34,.95) 40%,rgba(1,13,34,.6) 65%,transparent 100%);pointer-events:none;z-index:5}
/* Right-side iso clip mask - covers where road exits bottom-right */
#fb-r{position:fixed;bottom:0;right:0;width:35%;height:55%;background:linear-gradient(135deg,transparent 40%,rgba(0,0,0,.85) 70%,#000 100%);pointer-events:none;z-index:5}
/* Left-side iso clip mask */
#fb-l{position:fixed;bottom:0;left:0;width:22%;height:45%;background:linear-gradient(225deg,transparent 45%,rgba(0,0,0,.7) 72%,#000 100%);pointer-events:none;z-index:5}
#ft{position:fixed;top:0;left:0;width:100%;height:12%;background:linear-gradient(to bottom,#000 0%,transparent 100%);pointer-events:none;z-index:5}
#ui{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;font-family:'Orbitron',monospace;z-index:10}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.off{display:none!important}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-100px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(-100px);opacity:0}}
@keyframes popIn{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* ── MENU ── */
#sm{background:radial-gradient(ellipse at 50% 40%,rgba(0,22,65,.98)0%,rgba(0,4,16,.99)100%)}
#sm::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 48px,rgba(0,80,160,.04) 49px),repeating-linear-gradient(90deg,transparent,transparent 48px,rgba(0,80,160,.03) 49px);pointer-events:none}
.logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(.8rem,3vh,2rem)}
.ti{font-size:clamp(2.8rem,9vw,6rem);font-weight:900;color:#00e5ff;letter-spacing:.1em;line-height:1;animation:titlePulse 3s ease-in-out infinite;text-shadow:0 0 22px #00e5ff,0 0 60px #006688}
@keyframes titlePulse{0%,100%{text-shadow:0 0 22px #00e5ff,0 0 60px #006688}50%{text-shadow:0 0 40px #00e5ff,0 0 100px #0099bb}}
.su{font-size:clamp(.5rem,1.5vw,.75rem);color:#006688;letter-spacing:.7em;margin-top:.3rem}
.m-best-box{background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:8px 28px;margin-bottom:clamp(.6rem,2vh,1.2rem);text-align:center}
.m-best-lbl{font-size:clamp(.36rem,1vw,.5rem);color:#aa8800;letter-spacing:.4em;margin-bottom:3px}
.m-best-val{font-size:clamp(1.5rem,4.5vw,2.8rem);font-weight:900;color:#ffd700;text-shadow:0 0 16px #ffd700}
/* Skin selector */
.skin-row{display:flex;align-items:center;gap:clamp(.5rem,2vw,1rem);pointer-events:all;margin-bottom:clamp(.6rem,2vh,1.1rem)}
.skin-nav{font-family:'Orbitron',monospace;background:rgba(0,40,100,.5);border:1px solid rgba(0,160,255,.3);color:#00aacc;border-radius:7px;width:clamp(28px,6vw,36px);height:clamp(28px,6vw,36px);cursor:pointer;font-size:clamp(.7rem,2vw,.9rem);transition:background .15s}
.skin-nav:hover{background:rgba(0,80,180,.6)} .skin-nav:active{transform:scale(.9)}
.skin-info{display:flex;align-items:center;gap:10px;background:rgba(0,12,35,.8);border:1px solid rgba(0,160,255,.18);border-radius:9px;padding:7px 16px}
#skin-preview{border-radius:50%;border:2px solid rgba(0,220,255,.4);image-rendering:pixelated}
.skin-name{font-size:clamp(.55rem,1.6vw,.78rem);font-weight:700;color:#00e5ff;letter-spacing:.2em}
.skin-lock{font-size:clamp(.38rem,1vw,.5rem);color:#556677;letter-spacing:.15em;margin-top:2px}
/* Buttons */
.btn-row{display:flex;gap:clamp(.5rem,2vw,1rem);pointer-events:all;margin-bottom:clamp(.5rem,1.5vh,.9rem)}
.mbtn{font-family:'Orbitron',monospace;font-weight:700;letter-spacing:.14em;cursor:pointer;border:none;border-radius:8px;transition:transform .12s,box-shadow .12s;pointer-events:all}
.mbtn:active{transform:scale(.93)!important}
.mbtn-play{background:linear-gradient(135deg,#00ccff,#0055cc);color:#fff;font-size:clamp(.65rem,2vw,.92rem);padding:clamp(.65rem,1.8vh,.9rem) clamp(1.5rem,4vw,2.5rem);box-shadow:0 0 20px #00aaff44;text-shadow:0 0 8px #fff}
.mbtn-play:hover{transform:scale(1.05);box-shadow:0 0 32px #00aaff88}
.mbtn-sec{background:rgba(0,55,120,.35);color:#00aacc;font-size:clamp(.52rem,1.5vw,.72rem);padding:clamp(.55rem,1.5vh,.8rem) clamp(1.1rem,3vw,1.6rem);border:1px solid rgba(0,160,255,.28);box-shadow:0 0 10px #00aaff18}
.mbtn-sec:hover{transform:scale(1.04);background:rgba(0,75,160,.45)}
.mbtn-menu{background:rgba(80,0,160,.4);color:#bb66ff;font-size:clamp(.52rem,1.5vw,.72rem);padding:clamp(.55rem,1.5vh,.8rem) clamp(1.1rem,3vw,1.6rem);border:1px solid rgba(160,60,255,.35)}
.mbtn-reset{background:rgba(80,0,0,.35);color:#ff4444;font-size:clamp(.42rem,1.2vw,.6rem);padding:clamp(.4rem,1vh,.6rem) clamp(.8rem,2vw,1.2rem);border:1px solid rgba(255,50,50,.25);letter-spacing:.12em}
.mbtn-reset:hover{background:rgba(120,0,0,.55);border-color:rgba(255,80,80,.45)}
/* Reset confirm dialog */
#reset-confirm{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:999;display:none;align-items:center;justify-content:center;pointer-events:all}
#reset-confirm.show{display:flex}
.rc-box{background:rgba(5,8,25,.97);border:1px solid rgba(255,60,60,.4);border-radius:14px;padding:28px 36px;text-align:center;max-width:360px;box-shadow:0 0 40px rgba(255,0,0,.2)}
.rc-title{font-size:clamp(.8rem,2.5vw,1.1rem);font-weight:700;color:#ff4444;letter-spacing:.2em;margin-bottom:10px}
.rc-text{font-size:clamp(.4rem,1.2vw,.6rem);color:#556677;letter-spacing:.1em;line-height:1.8;margin-bottom:20px}
.rc-btns{display:flex;gap:12px;justify-content:center;pointer-events:all}
.rc-yes{background:rgba(120,0,0,.6);color:#ff4444;border:1px solid rgba(255,60,60,.4);border-radius:8px;padding:8px 22px;cursor:pointer;font-family:'Orbitron',monospace;font-size:clamp(.45rem,1.2vw,.62rem);letter-spacing:.15em;font-weight:700}
.rc-yes:hover{background:rgba(180,0,0,.7)}
.rc-no{background:rgba(0,40,80,.5);color:#00aacc;border:1px solid rgba(0,160,255,.25);border-radius:8px;padding:8px 22px;cursor:pointer;font-family:'Orbitron',monospace;font-size:clamp(.45rem,1.2vw,.62rem);letter-spacing:.15em;font-weight:700}
.rc-no:hover{background:rgba(0,60,120,.6)}
.mbtn-menu:hover{transform:scale(1.04);background:rgba(100,0,200,.5)}
.blink{animation:blink 1s step-end infinite;color:#ff6a00;font-size:clamp(.65rem,1.8vw,.85rem);letter-spacing:.18em;text-shadow:0 0 14px #ff6a00}

/* ── HTP ── */
#htp{background:rgba(0,4,18,.97);pointer-events:all;overflow-y:auto}
.htp-box{background:rgba(0,12,35,.9);border:1px solid rgba(0,160,255,.22);border-radius:14px;padding:clamp(1rem,3vw,2rem) clamp(1.2rem,4vw,2.8rem);max-width:min(92vw,500px);width:100%;max-height:85vh;overflow-y:auto}
.htp-title{font-size:clamp(.9rem,3vw,1.5rem);font-weight:900;color:#00e5ff;letter-spacing:.2em;text-align:center;margin-bottom:1.2rem;text-shadow:0 0 12px #00e5ff}
.htp-row{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.85rem}
.htp-icon{font-size:clamp(1.2rem,3.5vw,1.7rem);min-width:2.2rem;text-align:center;flex-shrink:0;margin-top:2px}
.htp-text{font-size:clamp(.46rem,1.3vw,.65rem);color:#7aaabb;letter-spacing:.05em;line-height:1.7}
.htp-text strong{color:#00e5ff}
.htp-sep{border:none;border-top:1px solid rgba(0,120,200,.15);margin:.8rem 0}
.htp-sub{font-size:clamp(.38rem,1vw,.55rem);color:#334455;letter-spacing:.3em;text-align:center}
.mbtn-back{font-family:'Orbitron',monospace;font-weight:700;letter-spacing:.12em;cursor:pointer;border:1px solid rgba(0,160,255,.25);border-radius:8px;background:rgba(0,55,120,.4);color:#00aacc;font-size:clamp(.5rem,1.5vw,.72rem);padding:.65rem 1.8rem;margin-top:1.2rem;pointer-events:all;transition:transform .12s;display:block;margin-left:auto;margin-right:auto}
.mbtn-back:hover{transform:scale(1.04);background:rgba(0,80,160,.5)} .mbtn-back:active{transform:scale(.93)}

/* ── HUD ── */
#sh{background:transparent}
.hbox{position:absolute;top:clamp(8px,1.8vw,16px);background:rgba(0,5,18,.9);border:1px solid rgba(0,220,255,.14);border-radius:10px;padding:clamp(6px,1.2vw,11px) clamp(10px,2vw,20px)}
.hl{font-size:clamp(.33rem,.8vw,.44rem);color:#00e5ff33;letter-spacing:.4em;margin-bottom:2px}
.hv{font-size:clamp(1.1rem,3.2vw,2rem);font-weight:700;color:#00e5ff;text-shadow:0 0 12px #00e5ff}
.gold{color:#ffd700!important;text-shadow:0 0 12px #ffd700!important}
.spd-wrap{position:absolute;top:clamp(8px,1.8vw,16px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px}
.slbl{font-size:clamp(.33rem,.8vw,.44rem);color:#ff6a0044;letter-spacing:.2em}
.str{width:clamp(45px,7vw,80px);height:4px;background:#060e1e;border-radius:2px;overflow:hidden}
.sfil{height:100%;background:linear-gradient(90deg,#00e5ff,#ff6a00,#ff0000);border-radius:2px;transition:width .4s}
.pop{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1rem,3.5vw,1.8rem);font-weight:900;letter-spacing:.12em;opacity:0;transition:opacity .28s,transform .28s;text-shadow:0 0 22px currentColor;pointer-events:none}

/* ── TOUCH CONTROLS ── */
#tctrl{position:fixed;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding:0 clamp(8px,3vw,22px) clamp(10px,2.5vh,24px);z-index:20;pointer-events:none}
.tc-side{display:flex;gap:8px;pointer-events:all}
.tc-btn{width:clamp(50px,11vw,68px);height:clamp(50px,11vw,68px);border-radius:50%;border:2px solid rgba(0,220,255,.35);background:rgba(0,15,40,.72);display:flex;align-items:center;justify-content:center;font-size:clamp(1.1rem,3vw,1.6rem);color:rgba(0,220,255,.65);font-family:'Orbitron',monospace;font-weight:900;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .08s,border-color .08s;pointer-events:all}
.tc-btn:active,.tc-btn.pressed{background:rgba(0,100,200,.55);border-color:rgba(0,220,255,.9);color:#00e5ff}
#tc-jump{width:clamp(64px,13vw,80px);height:clamp(64px,13vw,80px);font-size:clamp(.8rem,2vw,1rem);letter-spacing:.04em}

/* ── GAME OVER ── */
#so{background:rgba(0,2,10,.94);pointer-events:all}
.ot{font-size:clamp(1.8rem,6vw,4rem);font-weight:900;color:#ff1500;text-shadow:0 0 28px #ff1500,0 0 75px #550000;letter-spacing:.22em}
.ol{font-size:clamp(.8rem,2.5vw,1.2rem);color:#556677;letter-spacing:.08em;margin-top:.8rem}
.ol span{font-weight:700}
.go-best{background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:8px 24px;margin-top:.8rem;text-align:center}
.go-best-lbl{font-size:clamp(.36rem,.9vw,.48rem);color:#887700;letter-spacing:.4em;margin-bottom:2px}
.go-best-val{font-size:clamp(1.2rem,3.5vw,2rem);font-weight:900;color:#ffd700;text-shadow:0 0 12px #ffd700}
.nb{font-size:clamp(.6rem,1.6vw,.85rem);color:#ffd700;letter-spacing:.3em;margin-top:.4rem;text-shadow:0 0 14px #ffd700;animation:blink .5s step-end infinite}
.go-btns{display:flex;gap:clamp(.5rem,2vw,1.1rem);margin-top:1.4rem;pointer-events:all;justify-content:center}

/* ── ACHIEVEMENT BANNER ── */
#track-banner{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-140px);background:rgba(0,12,35,.96);border:1px solid rgba(0,180,255,.4);border-radius:13px;padding:9px 20px;display:flex;align-items:center;gap:11px;z-index:59;white-space:nowrap;pointer-events:none;min-width:min(60vw,260px);box-shadow:0 0 20px rgba(0,160,255,.18);opacity:0}
#track-banner.show{animation:tbSlideDown .5s cubic-bezier(.34,1.56,.64,1) forwards}
#track-banner.hide{animation:tbSlideUp .4s ease-in forwards}
@keyframes tbSlideDown{from{transform:translateX(-50%) translateY(-140px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes tbSlideUp{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(-140px);opacity:0}}
.tb-icon{font-size:1.3rem}
.tb-lbl{font-size:clamp(.3rem,.7vw,.38rem);color:#006688;letter-spacing:.4em;font-family:'Orbitron',monospace}
.tb-name{font-size:clamp(.5rem,1.4vw,.68rem);font-weight:700;color:#00e5ff;letter-spacing:.18em;text-shadow:0 0 10px #00e5ff;font-family:'Orbitron',monospace}
#ach-banner{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-140px);background:rgba(0,8,28,.96);border:1px solid rgba(255,200,0,.4);border-radius:13px;padding:10px 22px;display:flex;align-items:center;gap:12px;z-index:60;white-space:nowrap;pointer-events:none;min-width:min(80vw,320px);box-shadow:0 0 24px rgba(255,200,0,.2);opacity:0}
#ach-banner.show{animation:achSlideDown .5s cubic-bezier(.34,1.56,.64,1) forwards}
#ach-banner.hide{animation:achSlideUp .4s ease-in forwards}
@keyframes achSlideDown{from{transform:translateX(-50%) translateY(-140px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes achSlideUp{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(-140px);opacity:0}}
.ach-icon{font-size:clamp(1.4rem,4vw,1.8rem)}
.ach-label{font-size:clamp(.32rem,.8vw,.42rem);color:#aa8800;letter-spacing:.35em;font-family:'Orbitron',monospace}
.ach-name{font-size:clamp(.55rem,1.5vw,.72rem);font-weight:700;color:#ffd700;letter-spacing:.12em;text-shadow:0 0 10px #ffd700;font-family:'Orbitron',monospace}
.ach-desc{font-size:clamp(.38rem,.9vw,.5rem);color:#887744;letter-spacing:.1em;margin-top:1px;font-family:'Orbitron',monospace}

/* ── ACHIEVEMENTS LIST (in HTP style) ── */
#ach-screen{background:rgba(0,4,18,.97);pointer-events:all;overflow-y:auto}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(42%,180px),1fr));gap:8px;margin-top:.8rem}
.ach-card{background:rgba(0,12,35,.85);border:1px solid rgba(0,100,200,.2);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.ach-card.unlocked{border-color:rgba(255,200,0,.35);background:rgba(20,14,0,.5)}
.ach-card-icon{font-size:.7rem;min-width:2.2rem;text-align:center;opacity:.3;display:flex;align-items:center;justify-content:center}
.ni{font-style:normal;font-family:'Orbitron',monospace;font-weight:900;font-size:.58rem;padding:2px 5px;border-radius:3px;border:1px solid;line-height:1.3;letter-spacing:.04em;white-space:nowrap}
.ach-card.unlocked .ni{filter:drop-shadow(0 0 4px currentColor)}
.ach-card.unlocked .ach-card-icon{opacity:1}
.ach-card-name{font-size:clamp(.36rem,.85vw,.48rem);font-weight:700;color:#445566;letter-spacing:.1em;font-family:'Orbitron',monospace}
.ach-card.unlocked .ach-card-name{color:#ffd700}
.ach-card-desc{font-size:clamp(.3rem,.7vw,.4rem);color:#334455;letter-spacing:.06em;margin-top:1px;font-family:'Orbitron',monospace}
.ach-card.unlocked .ach-card-desc{color:#886633}

/* ── PAUSE OVERLAY ── */
#pause-overlay{display:none;position:fixed;inset:0;background:rgba(0,5,18,.88);
  z-index:7000;align-items:center;justify-content:center;flex-direction:column;
  gap:1rem;pointer-events:all;backdrop-filter:blur(4px);font-family:'Orbitron',monospace}
#pause-overlay.show{display:flex}
.pause-title{font-size:clamp(2rem,8vw,4rem);font-weight:900;color:#00e5ff;
  letter-spacing:.3em;text-shadow:0 0 30px #00e5ff,0 0 60px #006688;animation:blink 1.5s step-end infinite}
.pause-sub{font-size:clamp(.5rem,1.5vw,.75rem);color:#334455;letter-spacing:.3em}
/* ── ROTATE DEVICE (mobile only) ── */
#rotate-msg{display:none;position:fixed;inset:0;background:#000;z-index:9999;
  flex-direction:column;align-items:center;justify-content:center;
  font-family:'Orbitron',monospace;text-align:center;gap:1.2rem}
#rotate-msg.show{display:flex}
.rot-icon{font-size:clamp(3rem,15vw,5rem);animation:rotAnim 1.5s ease-in-out infinite}
@keyframes rotAnim{0%,100%{transform:rotate(0deg)}50%{transform:rotate(90deg)}}
.rot-title{font-size:clamp(.9rem,4vw,1.4rem);font-weight:900;color:#00e5ff;letter-spacing:.2em}
.rot-sub{font-size:clamp(.5rem,2.5vw,.75rem);color:#334455;letter-spacing:.15em}

/* ── COUNTDOWN ── */
#countdown{display:none;position:fixed;inset:0;z-index:8999;
  align-items:center;justify-content:center;pointer-events:none;
  font-family:'Orbitron',monospace}
#countdown.show{display:flex}
#cd-num{font-size:clamp(5rem,20vw,12rem);font-weight:900;
  color:#00e5ff;text-shadow:0 0 40px #00e5ff,0 0 80px #006688;
  animation:cdPop .9s ease-out forwards}
@keyframes cdPop{0%{transform:scale(2.5);opacity:0}30%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}