:root {
  --cyan: #00f0ff;
  --mag: #ff2a6d;
  --yel: #f9f002;
  --bg: #030309;
  --panel: rgba(5, 10, 20, .82);
  --line: rgba(0, 240, 255, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); touch-action: none; overscroll-behavior: none; }
body { font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: #cfefff; }

/* light mode: variable overrides re-skin the whole HUD */
body.day {
  --cyan: #006e8f;
  --mag: #b8124a;
  --yel: #8a6d00;
  --panel: rgba(240, 246, 252, .85);
  --line: rgba(0, 90, 120, .4);
  color: #16303f;
}
body.day #hud .k, body.day #speedo .lbl, body.day #help, body.day #game .k { color: #4c6377; }
body.day #speedo .num { color: #10242f; }
body.day #cineCount { color: #10242f; }
body.day kbd { background: rgba(225, 236, 244, .95); }
body.day #scan { opacity: .35; }
body.day #vig { background: radial-gradient(120% 100% at 50% 45%, transparent 62%, rgba(20,30,45,.28) 100%); }
body.day #tour .k { color: #7a6420; }
body.day #tour b { color: #6d4e00; }
body.day #compass { color: #a87b00; }
body.day #hud .tag, body.day #game .tag { color: #1c6d86; }
body.day #tour .tag { color: #8a6200; }
body.day #hud .big { color: #7a5e00; text-shadow: none; }
body.day #game .big { color: #045a75; }
body.day #game .k b { color: #0a3a4d; }
body.day #sector .tag { color: #a01040; }
body.day #sector b { color: #142a36; }
body.day .frame { box-shadow: 0 4px 18px rgba(30,50,70,.18); }
canvas { display: block; }

/* == CRT overlays ========================================================= */
#scan, #vig { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  animation: scanshift 9s linear infinite;
}
@keyframes scanshift { to { background-position: 0 3px; } }
#vig { background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,5,.55) 100%); }

/* == launch terminal ====================================================== */
#ui {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(3,3,9,.4), rgba(3,3,9,.92)),
    repeating-linear-gradient(90deg, rgba(0,240,255,.03) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(0,240,255,.03) 0 1px, transparent 1px 60px),
    #05060f;
  transition: opacity .5s ease;
}
#ui.hidden { opacity: 0; pointer-events: none; }

.card {
  position: relative; width: 460px; padding: 42px 40px 34px; text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.card::before {   /* top data strip */
  content: 'SYS//COMMIT-CITY v2 · GRID ONLINE'; position: absolute; top: 10px; left: 14px;
  font-size: 9px; letter-spacing: 2px; color: rgba(0,240,255,.55);
}
.card::after {    /* corner tick */
  content: ''; position: absolute; right: 0; top: 0; width: 26px; height: 26px;
  background: linear-gradient(45deg, transparent 49%, var(--mag) 50%);
}

h1 {
  margin: 18px 0 4px; font-size: 34px; font-weight: 800; letter-spacing: 6px; color: #eaffff;
  text-shadow: 2px 0 var(--mag), -2px 0 var(--cyan);
  animation: glitch 4s steps(1) infinite;
}
@keyframes glitch {
  0%, 92%  { text-shadow: 2px 0 var(--mag), -2px 0 var(--cyan); transform: none; }
  93%      { text-shadow: -3px 0 var(--mag), 3px 0 var(--cyan); transform: translateX(2px) skewX(-4deg); }
  95%      { text-shadow: 3px 1px var(--mag), -3px -1px var(--cyan); transform: translateX(-2px); }
  97%      { text-shadow: 2px 0 var(--mag), -2px 0 var(--cyan); transform: none; }
}
.sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #5f7fa8; margin-bottom: 28px; }
.sub b { color: var(--yel); font-weight: 400; }

input {
  display: block; width: 100%; padding: 14px 16px;
  font: inherit; font-size: 17px; letter-spacing: 2px; text-align: center; text-transform: lowercase;
  color: var(--cyan); background: rgba(0, 12, 18, .9);
  border: 1px solid rgba(0,240,255,.25); border-left: 3px solid var(--cyan); outline: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: rgba(0,240,255,.25); }
input:focus { border-color: var(--cyan); box-shadow: 0 0 24px rgba(0,240,255,.25), inset 0 0 12px rgba(0,240,255,.08); }

button {
  display: block; width: 100%; margin-top: 14px; padding: 14px;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 4px; cursor: pointer;
  color: #051015; background: linear-gradient(100deg, var(--cyan) 0 60%, var(--yel) 60.5%);
  border: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: filter .12s, transform .06s;
}
button:hover { filter: brightness(1.15) saturate(1.2); }
button:active { transform: translate(1px, 1px); }
button:disabled { filter: grayscale(1) brightness(.5); cursor: wait; }

.err { min-height: 15px; margin-top: 16px; font-size: 11px; letter-spacing: 1px; color: var(--mag); text-transform: uppercase; }

/* == cinematic ============================================================ */
.bar {
  position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 25;
  transition: height 1.1s cubic-bezier(.7, 0, .3, 1);
}
#barTop { top: 0; } #barBot { bottom: 0; }
.bar.on { height: 11vh; }

#cine {
  position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 26;
  text-align: center; pointer-events: none; opacity: 0; transition: opacity .8s ease;
}
#cine.on { opacity: 1; }
#cineUser { font-size: 15px; letter-spacing: 6px; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 18px rgba(0,240,255,.5); }
#cineCount {
  margin: 2px 0; font-size: 84px; font-weight: 800; font-style: italic; color: #f4ffff;
  text-shadow: 4px 0 var(--mag), -4px 0 var(--cyan), 0 0 50px rgba(0,240,255,.3);
}
#cineSub { font-size: 12px; letter-spacing: 4px; color: var(--yel); text-transform: uppercase; }

#skipHint {
  position: fixed; right: 24px; bottom: 13vh; z-index: 26; font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(207,239,255,.4); opacity: 0; transition: opacity .6s;
  pointer-events: none;
}
#skipHint.on { opacity: 1; }

/* == HUD ================================================================== */
#hud, #speedo, #help, #sector { position: fixed; z-index: 20; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.show { opacity: 1 !important; }

.frame {
  background: var(--panel); border: 1px solid var(--line); padding: 10px 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

#hud { left: 18px; top: 16px; font-size: 12px; line-height: 2; }
#hud .tag { font-size: 9px; letter-spacing: 3px; color: rgba(0,240,255,.5); display: block; margin-bottom: 2px; }
#hud b { color: var(--cyan); font-weight: 700; }
#hud .big { font-size: 20px; letter-spacing: 1px; color: var(--yel); text-shadow: 0 0 14px rgba(249,240,2,.4); }
#hud .k { color: #58719c; }

#sector { left: 18px; bottom: 20px; font-size: 11px; letter-spacing: 2px; }
#sector .tag { color: var(--mag); margin-right: 8px; }
#sector b { color: #eaffff; }

#speedo { right: 22px; bottom: 20px; text-align: right; }
#speedo .num {
  font-size: 52px; font-weight: 800; font-style: italic; color: #eaffff;
  text-shadow: 3px 0 var(--mag), -3px 0 var(--cyan);
}
#speedo .lbl { display: block; margin-top: -8px; font-size: 10px; letter-spacing: 4px; color: #58719c; }

#help { left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 18px; font-size: 11px; letter-spacing: 1px; color: #58719c; }
kbd {
  background: rgba(0, 20, 30, .9); border: 1px solid rgba(0,240,255,.3); border-bottom-width: 2px;
  padding: 1px 6px; margin: 0 1px; color: var(--cyan); font-size: 10px;
}

/* == game layer =========================================================== */
#tour, #game, #boostBar, #visitCard { position: fixed; z-index: 20; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
#tour.show, #game.show, #boostBar.show { opacity: 1; }

#tour { right: 22px; top: 16px; font-size: 12px; }
#tour .tag { font-size: 9px; letter-spacing: 3px; color: #ffb327; display: block; margin-bottom: 3px; }
#tour b { color: #ffe9b0; font-size: 15px; }
#tour .k { color: #8a7440; margin-left: 6px; }
#compass { display: inline-block; color: #ffb327; font-size: 15px; transition: transform .15s linear; transform-origin: 50% 50%; }

#game { right: 22px; top: 96px; font-size: 12px; text-align: right; }
#game .tag { font-size: 9px; letter-spacing: 3px; color: rgba(0,240,255,.5); display: block; margin-bottom: 2px; }
#game .big { font-size: 24px; color: var(--cyan); font-weight: 800; }
#game .k { color: #58719c; font-size: 10px; }
#game .k b { color: #9fd8ff; }
#comboN { color: var(--yel); font-size: 16px; font-style: italic; }
#comboN.pop { animation: pop .3s ease; }
@keyframes pop { 40% { transform: scale(1.5); } }

#boostBar {
  left: 50%; bottom: 46px; transform: translateX(-50%);
  width: 240px; height: 10px; background: rgba(5,10,20,.8); border: 1px solid var(--line);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
#boostFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--yel)); transition: width .18s ease; }
#boostBar.full #boostFill { animation: pulse 1s ease infinite; }
#boostBar.active #boostFill { background: linear-gradient(90deg, var(--mag), var(--yel)); }
@keyframes pulse { 50% { filter: brightness(1.6); } }
#boostLbl { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 9px; letter-spacing: 3px; color: #58719c; white-space: nowrap; }
#boostBar.full #boostLbl { color: var(--yel); }

#visitCard {
  left: 50%; top: 26%; transform: translate(-50%, 0) scale(.92);
  text-align: center; padding: 22px 44px;
  background: rgba(12,9,2,.85); border: 1px solid rgba(255,179,39,.55);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
#visitCard.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
#vcA { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #ffe9b0; text-shadow: 0 0 26px rgba(255,179,39,.5); }
#vcB { font-size: 15px; letter-spacing: 2px; color: var(--cyan); margin-top: 4px; }
#vcC { font-size: 11px; letter-spacing: 4px; color: #ffb327; margin-top: 8px; }

/* == world clock chip ===================================================== */
#clock {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 20;
  font-size: 11px; letter-spacing: 3px; color: var(--cyan);
  background: var(--panel); border: 1px solid var(--line); padding: 5px 14px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  pointer-events: none; opacity: .85;
}
body.day #clock { color: #0a3a4d; }

/* == touch controls (coarse pointers only) ================================ */
#touch { display: none; }
@media (pointer: coarse) {
  #touch {
    display: flex; position: fixed; inset: auto 0 0 0; z-index: 24;
    justify-content: space-between; align-items: flex-end;
    padding: 0 14px calc(14px + env(safe-area-inset-bottom));
    pointer-events: none; touch-action: none;
  }
  #help { display: none; }
  #touch .tz { display: flex; gap: 12px; pointer-events: auto; }
  #touch .tz.right { flex-direction: column; align-items: flex-end; gap: 10px; }
  #touch .tz.right .row { display: flex; gap: 12px; }
  #touch button {
    width: 74px; height: 74px; margin: 0; padding: 0;
    font-size: 15px; letter-spacing: 1px; font-weight: 800;
    color: var(--cyan); background: rgba(5, 14, 24, .55);
    border: 1px solid var(--line); border-radius: 50%;
    clip-path: none; backdrop-filter: blur(6px);
    -webkit-tap-highlight-color: transparent; user-select: none; touch-action: none;
  }
  #touch button.held { background: rgba(0, 240, 255, .3); color: #051015; }
  #touch button.gas { width: 88px; height: 88px; color: #7dff9a; border-color: rgba(125, 255, 154, .4); }
  #touch button.gas.held { background: rgba(125, 255, 154, .3); }
  #touch button.nitro { width: 64px; height: 40px; border-radius: 20px; font-size: 11px; color: var(--yel); border-color: rgba(249, 240, 2, .4); }
  #touch button.nitro.held { background: rgba(249, 240, 2, .3); }
  #speedo { bottom: 130px; }
  #boostBar { bottom: 120px; }
  #sector { bottom: 120px; }
}