:root{
  --ink:#0b1d3a; --deep:#0a2347; --navy:#143a72; --blue:#2566a8; --sky:#5198cf;
  --ice:#9ad6ee; --snow:#f4fbff; --cream:#eafdff; --orange:#ff7a4d; --ember:#c2531f;
  --gold:#ffd23f; --cyan:#5ec8e8; --pink:#ff5d8f; --red:#ff5d6c; --green:#3fb98a; --purple:#9b6cff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:#06122a;
  background-image:
    radial-gradient(circle at 20% 0%, #102d57 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, #0c2348 0%, transparent 55%);
  font-family:'Press Start 2P','Pixelify Sans',monospace;
  color:var(--cream);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}
#app{ position:relative; }

/* scaled game viewport */
#game{
  width:800px; height:500px; position:relative;
  transform-origin:center center;
  image-rendering:pixelated;
}
.frame{
  position:absolute; inset:0; overflow:hidden;
  box-shadow:0 0 0 4px var(--ink), 14px 14px 0 rgba(0,0,0,.45);
}

/* generic pixel button */
.btn{
  font-family:inherit; cursor:pointer; border:none; color:var(--ink);
  background:var(--orange); box-shadow:0 0 0 4px var(--ink), 6px 6px 0 var(--ink);
  letter-spacing:1px; transition:transform .05s;
}
.btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 4px var(--ink),3px 3px 0 var(--ink); }
.btn.sm{ box-shadow:0 0 0 3px var(--ink); }
.btn.blue{ background:var(--navy); color:var(--cream); }
.btn.cyan{ background:var(--cyan); }
.btn.gold{ background:var(--gold); }

canvas{ display:block; image-rendering:pixelated; }

/* ---- TITLE ---- */
.title-bg{
  position:absolute; inset:0;
  background:linear-gradient(#0a2347 0%,#0a2347 24%,#143a72 24%,#143a72 44%,#2566a8 44%,#2566a8 62%,#5198cf 62%,#5198cf 78%,#9ad6ee 78%,#9ad6ee 100%);
}
.logo{ position:absolute; left:50%; top:54px; transform:translateX(-50%); text-align:center; width:100%; }
.logo .ice{ font-size:64px; line-height:1; color:#eafdff; text-shadow:5px 5px 0 #2566a8,9px 9px 0 var(--ink); letter-spacing:2px; }
.logo .dash{ font-size:64px; line-height:1.05; margin-top:12px; color:var(--gold); text-shadow:5px 5px 0 var(--ember),9px 9px 0 var(--ink); letter-spacing:2px; }
.tagline{ display:inline-block; margin-top:22px; background:var(--orange); color:var(--ink); font-size:11px; padding:7px 12px; box-shadow:0 0 0 3px var(--ink); letter-spacing:2px; }
.hi{ position:absolute; top:20px; font-size:10px; color:var(--ice); letter-spacing:1px; }
.menu-stack{ position:absolute; right:60px; bottom:96px; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.press-start{ position:absolute; left:0; right:0; bottom:22px; text-align:center; font-size:12px; color:var(--gold); letter-spacing:1px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.mascot{ position:absolute; left:120px; bottom:54px; }
.mascot .shadow{ position:absolute; left:0; bottom:0; width:180px; height:40px; background:#f4fbff; opacity:.5; border-radius:50%; }

/* ---- generic header bar ---- */
.hbar{ position:absolute; left:0; right:0; top:0; height:60px; background:var(--ink);
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; box-shadow:0 4px 0 var(--blue); z-index:5; }
.hbar .ttl{ font-size:15px; color:var(--cream); letter-spacing:2px; }
.coins{ display:flex; align-items:center; gap:8px; background:var(--navy); padding:8px 11px; box-shadow:0 0 0 3px var(--blue); font-size:12px; color:var(--gold); }
.star{ width:14px; height:14px; background:var(--gold); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* ---- PARK SELECT ---- */
.park-bg{ position:absolute; inset:0; background:linear-gradient(#bfe6ff,#9ad6ee 55%,#7cc4e6); }
.node{ position:absolute; width:96px; height:96px; background:var(--blue); box-shadow:0 0 0 4px var(--ink); overflow:hidden; cursor:pointer; }
.node.cur{ box-shadow:0 0 0 4px var(--ink),0 0 0 9px var(--orange); }
.node.locked{ cursor:not-allowed; }
.node .lock{ position:absolute; inset:0; background:rgba(8,22,48,.62); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.node-label{ position:absolute; width:168px; text-align:center; font-size:10px; color:var(--ink); letter-spacing:1px; }
.node-cost{ position:absolute; width:120px; text-align:center; font-size:9px; color:var(--navy); }

/* ---- SKATERS ---- */
.skaters-bg{ position:absolute; inset:0; background:#0a2347; }
.preview{ position:absolute; left:24px; top:78px; width:226px; height:404px; background:linear-gradient(#143a72,#0b1d3a);
  box-shadow:0 0 0 3px var(--blue); display:flex; flex-direction:column; align-items:center; padding-top:16px; }
.preview .nm{ font-size:20px; color:var(--cream); margin-top:10px; text-shadow:2px 2px 0 var(--ink); }
.preview .sub{ font-size:8px; color:var(--orange); margin-top:8px; letter-spacing:1px; }
.stat{ display:flex; align-items:center; gap:8px; width:184px; }
.stat span{ font-size:7px; color:var(--ice); width:42px; }
.bar{ flex:1; height:9px; background:#06122a; box-shadow:0 0 0 1px var(--blue); }
.bar i{ display:block; height:100%; }
.grid8{ position:absolute; left:266px; top:78px; right:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cell{ position:relative; height:150px; background:var(--ink); box-shadow:0 0 0 3px var(--blue);
  display:flex; flex-direction:column; align-items:center; padding-top:10px; overflow:hidden; cursor:pointer; }
.cell.sel{ box-shadow:inset 0 0 0 3px var(--gold),0 0 0 3px var(--blue); }
.cell .cnm{ font-size:9px; color:var(--cream); margin-top:6px; }
.cell .owned{ font-size:7px; color:var(--green); margin-top:6px; }
.cell .lock{ position:absolute; inset:0; background:rgba(8,22,48,.74); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.cell .cost{ font-size:8px; color:var(--gold); }
.toast{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:var(--navy); color:var(--cream);
  font-size:9px; padding:9px 14px; box-shadow:0 0 0 3px var(--blue); white-space:nowrap; }

/* ---- RACE ---- */
.controls{ position:absolute; inset:0; pointer-events:none; }
.cbtn{ position:absolute; pointer-events:auto; font-family:inherit; cursor:pointer; border:none;
  background:rgba(11,29,58,.55); color:var(--cream); box-shadow:0 0 0 3px rgba(94,200,232,.6);
  font-size:22px; width:84px; height:64px; display:flex; align-items:center; justify-content:center; }
.cbtn:active{ background:rgba(94,200,232,.4); }
.cbtn.left{ left:14px; bottom:14px; }
.cbtn.right{ left:108px; bottom:14px; }
.cbtn.dash{ right:14px; bottom:14px; width:108px; background:rgba(255,210,63,.85); color:var(--ink); font-size:13px; }
.cbtn.trick{ right:14px; bottom:90px; width:140px; background:rgba(255,122,77,.92); color:var(--ink); font-size:12px; }
.cbtn.safe{ right:14px; bottom:14px; width:140px; background:rgba(94,200,232,.9); color:var(--ink); font-size:12px; }
.cbtn.hidden{ display:none; }

/* ---- RESULTS ---- */
.res-bg{ position:absolute; inset:0; background:linear-gradient(#0a2347,#143a72 60%,#2566a8); overflow:hidden; }
.res-banner{ position:absolute; left:0; right:0; top:30px; text-align:center; }
.res-banner .big{ font-size:44px; text-shadow:5px 5px 0 var(--ember),8px 8px 0 var(--ink); letter-spacing:2px; }
.res-banner .sub{ margin-top:14px; font-size:13px; color:var(--cream); letter-spacing:2px; }
.standings{ position:absolute; left:40px; top:150px; width:300px; background:var(--ink); box-shadow:0 0 0 3px var(--blue); padding:16px; }
.srow{ display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:12px; }
.tally{ margin-top:8px; border-top:3px solid var(--blue); padding-top:10px; display:flex; flex-direction:column; gap:7px; }
.tally .tr{ display:flex; justify-content:space-between; font-size:9px; }
.tally .tr.tot{ margin-top:4px; border-top:2px dashed var(--blue); padding-top:8px; font-size:11px; }
.res-right{ position:absolute; right:40px; top:150px; width:340px; display:flex; flex-direction:column; gap:12px; }
.unlock-card{ background:var(--orange); box-shadow:0 0 0 3px var(--ink); padding:12px; display:flex; align-items:center; gap:14px; }
.confetti{ position:absolute; pointer-events:none; }

.spark{ color:var(--gold); }
.muted{ color:#7fb2e6; }