/* SNOWGO - first person snowmobile free roam.
   The canvas owns the viewport; HUD, pads and curtain float on top. */

:root{
  --ink:#fbfdff;
  --dim:#c9d6e3;
  --hot:#e8402c;
  --deep:#16222e;
  --shadow:0 1px 3px rgba(10,20,35,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  background:#cfdbe6;
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:none;
}

#stage{ position:fixed; inset:0; display:block; width:100%; height:100%; cursor:grab; }
#stage:active{ cursor:grabbing; }

/* ---------- HUD ---------- */

#hud{ position:fixed; inset:0; pointer-events:none; z-index:5; text-shadow:var(--shadow); }

#compass{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  left:50%;
  width:220px;
  height:26px;
  margin-left:-110px;
  overflow:hidden;
  border-radius:13px;
  background:rgba(16,30,46,.32);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
}
#compassStrip{ position:absolute; top:0; left:0; height:100%; white-space:nowrap; will-change:transform; }
#compassStrip span{
  display:inline-block;
  width:20px;
  line-height:26px;
  text-align:center;
  font-size:10px;
  color:var(--dim);
}
#compassStrip span.card{ font-size:13px; font-weight:700; color:var(--ink); }
#compassStrip span.card.n{ color:#ff6a55; }
#compassTick{ position:absolute; left:50%; bottom:0; width:2px; height:6px; margin-left:-1px; background:var(--ink); }

#tally{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-size:12px;
  color:var(--dim);
  letter-spacing:.04em;
}
#tally b{ color:var(--ink); font-weight:700; margin-left:4px; }

#speedo{
  position:absolute;
  left:18px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  font-weight:800;
  line-height:1;
}
#hudSpeed{ font-size:46px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#speedo small{ font-size:13px; font-weight:600; margin-left:5px; color:var(--dim); }
#hudOdo{ font-size:12px; font-weight:600; color:var(--dim); margin-top:4px; letter-spacing:.06em; }

#toast{
  position:fixed;
  top:22%;
  left:50%;
  transform:translate(-50%,-6px);
  padding:8px 18px;
  border-radius:20px;
  background:rgba(16,30,46,.45);
  font-size:18px;
  font-weight:700;
  letter-spacing:.03em;
  text-shadow:var(--shadow);
  opacity:0;
  transition:opacity .35s, transform .35s;
  pointer-events:none;
  z-index:6;
  white-space:nowrap;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- overview map ---------- */

#map{
  position:fixed;
  inset:0;
  z-index:8;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(14,26,40,.35);
}
#map.show{ display:flex; }
#map .sheet{
  position:relative;
  width:min(88vmin,640px);
  aspect-ratio:1;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  border:3px solid rgba(255,255,255,.7);
}
#mapCanvas{ display:block; width:100%; height:100%; }
#mapMe{
  position:absolute;
  width:20px;
  height:24px;
  pointer-events:none;
}
#mapMe svg{ display:block; width:100%; height:100%; overflow:visible; }

/* ---------- tools ---------- */

#tools{
  position:fixed;
  right:12px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex;
  gap:8px;
  z-index:7;
}
.tool{
  min-width:42px;
  height:36px;
  padding:0 10px;
  border:0;
  border-radius:18px;
  background:rgba(16,30,46,.38);
  color:var(--ink);
  font:700 12px/1 inherit;
  letter-spacing:.06em;
  cursor:pointer;
}
.tool.off{ opacity:.45; }

#btnMenu{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  left:calc(env(safe-area-inset-left,0px) + 12px);
  z-index:7;
  min-width:40px;
  height:40px;
  padding:0;
  border-radius:20px;
  font-size:18px;
}

/* ---------- touch pads (coarse pointers only) ---------- */

#pads{ display:none; }
@media (pointer:coarse){
  #pads{
    position:fixed;
    left:0; right:0;
    bottom:calc(env(safe-area-inset-bottom,0px) + 64px);
    display:flex;
    justify-content:space-between;
    padding:0 14px;
    pointer-events:none;
    z-index:6;
  }
  #speedo{ bottom:calc(env(safe-area-inset-bottom,0px) + 160px); }
  #tools{ bottom:calc(env(safe-area-inset-bottom,0px) + 14px); }
}
.padgroup{ display:flex; gap:10px; }
.pad{
  width:74px;
  height:74px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(16,30,46,.32);
  border:2px solid rgba(255,255,255,.45);
  color:var(--ink);
  font-size:22px;
  font-weight:800;
  pointer-events:auto;
  touch-action:none;
}
.pad-gas,.pad-brake{ font-size:12px; letter-spacing:.08em; }
.pad-gas{ width:84px; height:84px; border-color:rgba(255,140,120,.8); }
.pad.on{ background:rgba(255,255,255,.35); }

/* ---------- curtain ---------- */

#curtain{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:linear-gradient(180deg,rgba(120,150,180,.55),rgba(20,34,50,.7));
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}
#curtain.hide{ display:none; }
.panel{
  width:100%;
  max-width:420px;
  max-height:100%;
  overflow:auto;
  padding:26px 26px 22px;
  border-radius:16px;
  background:rgba(14,26,40,.78);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  text-align:center;
}
.panel h1{ font-size:52px; font-weight:900; letter-spacing:-.03em; line-height:1; }
.panel h1 span{ color:var(--hot); }
.panel .tag{ margin-top:6px; color:var(--dim); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.keys{ margin-top:16px; list-style:none; font-size:13px; color:var(--dim); line-height:2; }
kbd{
  display:inline-block;
  min-width:22px;
  padding:0 5px;
  margin-right:3px;
  border-radius:4px;
  background:rgba(255,255,255,.14);
  color:var(--ink);
  font:700 11px/20px inherit;
}
@media (pointer:coarse){ .keys{ display:none; } }
#btnStart{
  margin-top:18px;
  width:100%;
  height:48px;
  border:0;
  border-radius:24px;
  background:var(--hot);
  color:#fff;
  font:800 16px/1 inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.panel .note{ margin-top:12px; font-size:10px; color:var(--dim); letter-spacing:.04em; opacity:.8; }
#btnReset{
  margin-top:10px;
  width:100%;
  height:40px;
  border:2px solid rgba(255,255,255,.35);
  border-radius:20px;
  background:transparent;
  color:var(--ink);
  font:700 13px/1 inherit;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
#btnReset[hidden]{ display:none; }
#btnStart:disabled{ background:#55616e; cursor:wait; text-transform:none; letter-spacing:.02em; }