:root {
  --bg: #05060d;
  --panel: rgba(8, 10, 24, 0.78);
  --panel-solid: #0a0c1c;
  --line: rgba(62, 240, 255, 0.28);
  --cyan: #3ef0ff;
  --cyan-dim: #1aa9c0;
  --pink: #ff3ea5;
  --violet: #8a5cff;
  --yellow: #ffd84a;
  --text: #e6f6ff;
  --muted: #7f8db3;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gap: 12px;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --term: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--term);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.14) 2px 3px);
  mix-blend-mode: multiply;
  z-index: 1;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
kbd {
  font-family: var(--pixel);
  font-size: 9px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: #0d1130;
  color: var(--cyan);
  white-space: nowrap;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 18px rgba(62, 240, 255, 0.08) inset;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------------- top header ---------------- */
.hud-top {
  position: fixed;
  top: calc(var(--gap) + var(--safe-t));
  left: calc(var(--gap) + var(--safe-l));
  right: calc(var(--gap) + var(--safe-r));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
}
.brand-icon { width: 32px; height: 32px; image-rendering: auto; filter: drop-shadow(0 0 6px rgba(62, 240, 255, 0.6)); }
.brand-text { display: flex; flex-direction: column; gap: 5px; }
.brand-name {
  font-family: var(--pixel);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--text);
  text-shadow: 0 0 8px rgba(62, 240, 255, 0.7), 2px 2px 0 #0b2b45;
  white-space: nowrap;
}
.brand-ticker { font-family: var(--pixel); font-size: 9px; color: var(--cyan); }

.links { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--panel);
  border: 2px solid var(--line);
  cursor: pointer;
  color: var(--text);
  transition: color 0.15s, border-color 0.15s, transform 0.1s;
}
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.small { width: 34px; height: 34px; }
.icon-btn.small svg { width: 16px; height: 16px; }
#btn-mute .ico-off { display: none; }
#btn-mute.muted .ico-on { display: none; }
#btn-mute.muted .ico-off { display: block; }

.buy-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: var(--pixel);
  font-size: 12px;
  text-decoration: none;
  color: #021014;
  background: var(--cyan);
  border: 2px solid #b6fbff;
  box-shadow: 0 4px 0 #0b6f80, 0 0 22px rgba(62, 240, 255, 0.55);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.buy-btn:hover, .buy-btn:focus-visible { background: #8af7ff; outline: none; }
.buy-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b6f80, 0 0 22px rgba(62, 240, 255, 0.55); }
.buy-ticker { font-size: 10px; }

/* ---------------- stats ---------------- */
.hud-stats {
  position: fixed;
  top: calc(var(--gap) + var(--safe-t) + 56px);
  right: calc(var(--gap) + var(--safe-r));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  z-index: 10;
}
.stats { display: flex; gap: 14px; padding: 7px 12px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 52px; }
.stat-label { font-family: var(--pixel); font-size: 8px; color: var(--muted); }
.stat-val { font-family: var(--pixel); font-size: 13px; color: var(--yellow); text-shadow: 0 0 8px rgba(255, 216, 74, 0.5); }
.stat-best .stat-val { color: var(--pink); text-shadow: 0 0 8px rgba(255, 62, 165, 0.5); }
.game-btns { display: flex; flex-direction: column; gap: 6px; }

/* ---------------- contract address ---------------- */
.ca {
  position: fixed;
  left: calc(var(--gap) + var(--safe-l));
  bottom: calc(var(--gap) + var(--safe-b));
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label status copy" "value value value";
  align-items: center;
  gap: 4px 10px;
  padding: 6px 6px 6px 12px;
  z-index: 10;
  max-width: calc(100vw - 24px);
}
.ca-label { grid-area: label; font-family: var(--pixel); font-size: 10px; color: var(--cyan); }
.ca-value {
  grid-area: value;
  font-family: var(--term);
  font-size: 21px;
  line-height: 1;
  color: var(--text);
  word-break: break-all;
  min-width: 0;
  user-select: all;
  -webkit-user-select: all;
}
.ca-status {
  grid-area: status;
  justify-self: start;
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--pink);
  padding: 4px 6px;
  border: 1px solid rgba(255, 62, 165, 0.5);
  white-space: nowrap;
  animation: blink 1.6s steps(2, start) infinite;
}
.ca.is-live .ca-status { color: #5dff9b; border-color: rgba(93, 255, 155, 0.5); animation: none; }
.copy-btn {
  grid-area: copy;
  font-family: var(--pixel);
  font-size: 10px;
  padding: 9px 12px;
  color: #021014;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
  min-width: 86px;
}
.copy-btn:disabled { background: #2a2f4a; color: #6b7397; cursor: not-allowed; }
.copy-btn.copied { background: #5dff9b; }
@keyframes blink { 50% { opacity: 0.45; } }

/* ---------------- center meters ---------------- */
.hud-center {
  position: fixed;
  left: 50%;
  bottom: calc(var(--gap) + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9;
  pointer-events: none;
}
.meters { display: flex; gap: 16px; padding: 8px 12px; }
.meter { display: flex; align-items: center; gap: 8px; }
.meter-label { font-family: var(--pixel); font-size: 8px; color: var(--muted); min-width: 54px; }
#mode-label.flying { color: var(--pink); }
.meter-bar { width: 84px; height: 8px; background: #11152e; border: 1px solid #262c55; }
.meter-fill { height: 100%; width: 0; }
.meter-fill.alt { background: linear-gradient(90deg, var(--violet), var(--pink)); }
.meter-fill.boost { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); width: 100%; }
.hints {
  margin: 0;
  font-size: 18px;
  color: var(--muted);
  text-shadow: 0 1px 0 #000;
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
}

/* ---------------- toasts ---------------- */
.toasts {
  position: fixed;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 8;
}
.toast {
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(62, 240, 255, 0.8), 2px 2px 0 #000;
  animation: toast 1.4s ease-out forwards;
  white-space: nowrap;
}
.toast.pink { color: var(--pink); text-shadow: 0 0 10px rgba(255, 62, 165, 0.8), 2px 2px 0 #000; }
.toast.yellow { color: var(--yellow); text-shadow: 0 0 10px rgba(255, 216, 74, 0.7), 2px 2px 0 #000; }
@keyframes toast {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  12% { opacity: 1; transform: translateY(0) scale(1.05); }
  70% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

/* ---------------- touch controls ---------------- */
.touch { display: none; }
body.is-touch .touch { display: block; }
.stick-zone {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 55vw;
  height: 46vh;
  z-index: 7;
}
.stick-base {
  position: absolute;
  left: calc(28px + var(--safe-l));
  bottom: calc(28px + var(--safe-b));
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 2px solid rgba(62, 240, 255, 0.35);
  background: radial-gradient(circle, rgba(62, 240, 255, 0.08), rgba(8, 10, 24, 0.55) 70%);
}
.stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8af7ff, var(--cyan) 45%, #0b6f80);
  box-shadow: 0 0 18px rgba(62, 240, 255, 0.6);
}
.stick-hint {
  position: absolute;
  left: calc(28px + var(--safe-l));
  bottom: calc(160px + var(--safe-b));
  width: 124px;
  text-align: center;
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--muted);
  transition: opacity 0.3s;
}
.stick-zone.active .stick-hint { opacity: 0; }
.touch-btns {
  position: fixed;
  right: calc(20px + var(--safe-r));
  bottom: calc(28px + var(--safe-b));
  display: flex;
  align-items: flex-end;
  gap: 14px;
  z-index: 7;
}
.tbtn {
  font-family: var(--pixel);
  border-radius: 50%;
  border: 2px solid;
  display: grid;
  place-items: center;
  touch-action: none;
}
.tbtn-fly {
  width: 92px;
  height: 92px;
  font-size: 13px;
  color: #fff;
  border-color: #ff8ccb;
  background: radial-gradient(circle at 40% 35%, #ff7cc0, var(--pink) 50%, #8d1457);
  box-shadow: 0 0 22px rgba(255, 62, 165, 0.55);
}
.tbtn-fly.on { background: radial-gradient(circle at 40% 35%, #c7a8ff, var(--violet) 55%, #3b1f8a); border-color: #c7a8ff; }
.tbtn-boost {
  width: 70px;
  height: 70px;
  font-size: 9px;
  color: #021014;
  border-color: #b6fbff;
  background: radial-gradient(circle at 40% 35%, #b6fbff, var(--cyan) 50%, #0b6f80);
  box-shadow: 0 0 16px rgba(62, 240, 255, 0.45);
}
.tbtn.pressed { transform: scale(0.92); filter: brightness(1.25); }
.tbtn-boost.cooling { filter: grayscale(0.8) brightness(0.6); }

/* ---------------- overlays ---------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: calc(76px + var(--safe-t)) 16px calc(76px + var(--safe-b));
  background: radial-gradient(ellipse at center, rgba(10, 14, 40, 0.72), rgba(3, 4, 10, 0.94));
  overflow-y: auto;
  touch-action: pan-y;
}
.overlay.hidden { display: none; }
.overlay-card {
  width: min(560px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.overlay-card.small { gap: 16px; }
.kicker { margin: 0; font-family: var(--pixel); font-size: 9px; color: var(--pink); letter-spacing: 2px; }
.title {
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(26px, 6vw, 46px);
  line-height: 1.15;
  color: var(--text);
  text-shadow: 3px 3px 0 #0b2b45, 0 0 24px rgba(62, 240, 255, 0.5);
}
.title span { color: var(--cyan); }
.title.small { font-size: 24px; }
.hero-car { width: min(440px, 92%); position: relative; }
.hero-car::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 4%;
  bottom: -6px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(62, 240, 255, 0.45), transparent 70%);
  filter: blur(2px);
}
.hero-car img { width: 100%; display: block; animation: hover 2.4s ease-in-out infinite; image-rendering: auto; }
@keyframes hover { 50% { transform: translateY(-8px); } }
.tagline { margin: 0; font-size: 22px; line-height: 1.15; color: #b7c6e6; }
.load-state { display: flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 9px; color: var(--muted); min-height: 14px; }
.load-state.error { color: var(--yellow); line-height: 1.6; max-width: 460px; }
.load-state.ok { color: #5dff9b; }
.load-state.ok .spinner, .load-state.error .spinner { display: none; }
.spinner { width: 12px; height: 12px; border: 2px solid var(--cyan); border-right-color: transparent; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.play-btn {
  font-family: var(--pixel);
  font-size: 20px;
  padding: 18px 54px;
  color: #021014;
  background: var(--cyan);
  border: 2px solid #b6fbff;
  box-shadow: 0 6px 0 #0b6f80, 0 0 34px rgba(62, 240, 255, 0.6);
  cursor: pointer;
  animation: pulse 1.8s ease-in-out infinite;
}
.play-btn:hover, .play-btn:focus-visible { background: #8af7ff; outline: none; }
.play-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #0b6f80; }
.play-btn:disabled { background: #2a2f4a; color: #6b7397; border-color: #3a4170; box-shadow: none; animation: none; cursor: wait; }
@keyframes pulse { 50% { box-shadow: 0 6px 0 #0b6f80, 0 0 54px rgba(62, 240, 255, 0.85); } }
.ghost-btn {
  font-family: var(--pixel);
  font-size: 12px;
  padding: 12px 22px;
  background: transparent;
  border: 2px solid var(--line);
  cursor: pointer;
}
.ghost-btn:hover, .ghost-btn:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }

.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  width: 100%;
  max-width: 480px;
  text-align: left;
}
.ctrl { display: flex; align-items: center; gap: 8px; font-size: 18px; color: #b7c6e6; }
.tip { margin: 0; font-size: 19px; color: #b7c6e6; }
.c-cyan { color: var(--cyan); }
.c-pink { color: var(--pink); }
.disclaimer { margin: 4px 0 0; font-size: 15px; color: var(--muted); max-width: 460px; line-height: 1.1; }

.touch-only { display: none !important; }
body.is-touch .touch-only { display: flex !important; }
body.is-touch .desktop-only { display: none !important; }

/* hide gameplay HUD bits until playing */
body:not(.playing) .hud-center,
body:not(.playing) .touch,
body:not(.playing) .hud-stats .game-btns { display: none; }

/* ---------------- mobile / narrow ---------------- */
@media (max-width: 760px) {
  :root { --gap: 8px; }
  .brand { padding: 5px 8px 5px 5px; gap: 7px; }
  .brand-icon { width: 24px; height: 24px; }
  .brand-name { font-size: 9px; letter-spacing: 0; }
  .brand-ticker { font-size: 8px; }
  .links { gap: 6px; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 17px; height: 17px; }
  .buy-btn { height: 36px; padding: 0 10px; font-size: 10px; box-shadow: 0 3px 0 #0b6f80, 0 0 16px rgba(62, 240, 255, 0.5); }
  .buy-ticker { display: none; }

  .ca {
    top: calc(var(--gap) + var(--safe-t) + 46px);
    bottom: auto;
    right: calc(var(--gap) + var(--safe-r));
    max-width: none;
    gap: 7px;
    padding: 4px 4px 4px 8px;
  }
  .ca-label { font-size: 8px; }
  .ca-value { font-size: 16px; }
  .ca-status { font-size: 7px; padding: 3px 4px; }
  .copy-btn { font-size: 8px; padding: 7px 8px; min-width: 66px; }

  .hud-stats {
    top: calc(var(--gap) + var(--safe-t) + 106px);
    left: calc(var(--gap) + var(--safe-l));
    right: calc(var(--gap) + var(--safe-r));
    justify-content: space-between;
  }
  .stats { gap: 10px; padding: 5px 8px; }
  .stat { min-width: 40px; gap: 3px; }
  .stat-label { font-size: 7px; }
  .stat-val { font-size: 10px; }
  .game-btns { flex-direction: row; }
  .icon-btn.small { width: 30px; height: 30px; }

  .hud-center { bottom: calc(8px + var(--safe-b)); }
  .meters { flex-direction: column; gap: 6px; padding: 6px 8px; }
  .meter-label { min-width: 40px; font-size: 7px; }
  .meter-bar { width: 52px; height: 6px; }
  body.is-touch .hud-center { bottom: calc(176px + var(--safe-b)); left: auto; right: calc(10px + var(--safe-r)); transform: none; }

  .overlay { padding-top: calc(152px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b)); }
  .overlay-card { gap: 11px; }
  .tagline { font-size: 19px; }
  .play-btn { font-size: 16px; padding: 15px 44px; }
  .controls-grid { grid-template-columns: 1fr; justify-items: center; }
  .ctrl { font-size: 17px; }
  .toast { font-size: 11px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .overlay { padding-top: calc(60px + var(--safe-t)); }
  .hero-car { width: 240px; }
  .controls-grid { display: none; }
  .stick-base { width: 104px; height: 104px; left: calc(18px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); }
  .stick-hint { display: none; }
  .tbtn-fly { width: 78px; height: 78px; }
  .tbtn-boost { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-car img, .play-btn, .ca-status { animation: none; }
}

/* mid-width desktops: lift meters above the CA panel */
@media (min-width: 761px) and (max-width: 1440px) {
  .hud-center { bottom: calc(88px + var(--safe-b)); }
  .hints { font-size: 16px; }
}

@media (max-width: 760px) {
  .hints { display: none; }
}
@media (max-width: 380px) {
  .brand-icon { display: none; }
  .brand { padding: 5px 7px; }
  .brand-name { font-size: 8px; }
  .brand-ticker { font-size: 7px; }
  .links { gap: 4px; }
  .icon-btn { width: 32px; height: 32px; }
  .buy-btn { padding: 0 8px; font-size: 9px; height: 32px; }
  .ca { top: calc(var(--gap) + var(--safe-t) + 42px); }
  .hud-stats { top: calc(var(--gap) + var(--safe-t) + 100px); }
  .ca-value { font-size: 15px; }
}
body.paused .touch, body.paused .hud-center { display: none; }
@media (max-width: 380px) {
  .stick-base { width: 104px; height: 104px; left: calc(14px + var(--safe-l)); }
  .stick-hint { left: calc(14px + var(--safe-l)); width: 104px; bottom: calc(140px + var(--safe-b)); }
  .touch-btns { right: calc(12px + var(--safe-r)); gap: 10px; }
  .tbtn-fly { width: 78px; height: 78px; font-size: 11px; }
  .tbtn-boost { width: 58px; height: 58px; font-size: 8px; }
  body.is-touch .hud-center { bottom: calc(150px + var(--safe-b)); }
}

/* BUY disabled until CONFIG.buyUrl is set */
.buy-btn.disabled,
.buy-btn.disabled:hover {
  background: #2a2f4a;
  color: #6b7397;
  border-color: #3a4170;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 760px) { .buy-btn.disabled .buy-ticker { display: inline; } }
@media (max-width: 380px) { .buy-btn.disabled .buy-ticker { display: none; } }

/* no CA yet: keep "CA: SOON" on one row */
.ca:not(.is-live) {
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "label value status copy";
}
@media (max-width: 760px) {
  body:not(.has-ca) .hud-stats { top: calc(var(--gap) + var(--safe-t) + 86px); }
}
@media (max-width: 380px) {
  body:not(.has-ca) .hud-stats { top: calc(var(--gap) + var(--safe-t) + 80px); }
}