* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #050510; font-family: 'Courier New', monospace; }
canvas { display: block; position: fixed; top: 82px; left: 0; z-index: 1; }

/* ── Site header ── */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(10px,2vw,20px);
  background: #06061a; border-bottom: 1px solid rgba(29,158,117,0.35);
}
#site-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: clamp(14px,2.2vw,20px); font-weight: bold;
  letter-spacing: 4px; color: #5DCAA5; white-space: nowrap;
}
#site-logo .dot { color: #EF9F27; }
#site-links { display: flex; align-items: center; gap: clamp(5px,1.2vw,10px); flex-wrap: nowrap; }
.site-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(29,158,117,0.08); border: 1px solid rgba(29,158,117,0.30);
  color: #5DCAA5; font-family: 'Courier New', monospace;
  font-size: clamp(9px,1.2vw,11px); padding: 4px clamp(7px,1.2vw,12px);
  border-radius: 3px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.site-btn:hover           { background: rgba(29,158,117,0.2); border-color: #1D9E75; color: #5DCAA5; }
.site-btn.ca-btn          { color: #888; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.site-btn.ca-btn:hover    { border-color: rgba(255,255,255,0.25); color: #ccc; }
.site-btn.x-btn           { border-color: rgba(255,255,255,0.2); color: #ddd; }
.site-btn.x-btn:hover     { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.site-btn.pump-btn        { border-color: rgba(239,159,39,0.35); color: #EF9F27; }
.site-btn.pump-btn:hover  { background: rgba(239,159,39,0.12); border-color: #EF9F27; }
#ca-copied { font-size: 9px; color: #1D9E75; opacity: 0; transition: opacity 0.3s; margin-left: 2px; }

/* ── Game HUD ── */
#hud {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 50; height: 30px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(8px,2vw,16px);
  background: rgba(5,5,16,0.85); border-bottom: 1px solid rgba(29,158,117,0.18);
  font-size: clamp(9px,1.4vw,12px); color: #5DCAA5; pointer-events: none;
}
.badge {
  background: rgba(29,158,117,0.08); border: 1px solid rgba(29,158,117,0.22);
  padding: 1px clamp(5px,1vw,9px); border-radius: 3px;
}

/* Centre-top score */
#score-display {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  pointer-events: none;
  font-family: 'Courier New', monospace;
  font-size: clamp(18px, 3.5vw, 28px);
  font-weight: bold;
  color: #fff;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(93,202,165,0.9), 0 0 24px rgba(93,202,165,0.4);
  background: rgba(5,5,16,0.55);
  border: 1px solid rgba(29,158,117,0.4);
  border-radius: 6px;
  padding: 3px 18px 4px;
  white-space: nowrap;
}

/* ── Coin selector bar ── */
#coin-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; height: 34px;
  display: flex; gap: clamp(4px,1vw,7px); justify-content: center; align-items: center;
  padding: 4px; background: rgba(5,5,16,0.9); border-top: 1px solid rgba(29,158,117,0.16);
}
.coin-btn {
  background: transparent; border: 1px solid rgba(29,158,117,0.32);
  color: #5DCAA5; font-family: 'Courier New', monospace;
  font-size: clamp(9px,1.3vw,11px); padding: 2px clamp(6px,1.5vw,12px);
  cursor: pointer; border-radius: 3px; transition: background 0.1s;
}
.coin-btn:hover, .coin-btn.active { background: rgba(29,158,117,0.16); border-color: #1D9E75; }

/* ── Price Y-axis ── */
#price-axis {
  position: fixed; right: 0; top: 82px; bottom: 34px; width: 68px;
  z-index: 40; pointer-events: none; overflow: hidden;
  border-left: 1px solid rgba(29,158,117,0.12);
  background: rgba(5,5,16,0.55);
}
.price-label {
  position: absolute; right: 4px; transform: translateY(-50%);
  font-size: 9px; font-family: 'Courier New'; color: #1D9E75; white-space: nowrap;
}

/* ── Loading / overlay screens ── */
#loading, #overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(5,5,16,0.96); color: #5DCAA5;
}
#loading-bar-outer { width: clamp(140px,25vw,200px); height: 2px; background: #111128; margin-top: 10px; border-radius: 1px; }
#loading-bar       { height: 100%; background: #1D9E75; transition: width 0.3s; border-radius: 1px; }
#overlay           { display: none; }
#overlay h1        { font-size: clamp(18px,4vw,28px); letter-spacing: 6px; margin-bottom: 4px; }
.ctrl-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 14px 0; width: clamp(200px,40vw,280px); }
.ctrl-row   { background: rgba(17,17,40,0.8); border: 1px solid rgba(29,158,117,0.16); padding: 5px 9px; border-radius: 3px; font-size: clamp(9px,1.3vw,11px); color: #777; }
.ctrl-row span { color: #EF9F27; }
#start-btn  { background: #1D9E75; color: #050510; border: none; font-family: 'Courier New', monospace; font-size: clamp(11px,2vw,14px); padding: 9px 28px; border-radius: 3px; cursor: pointer; letter-spacing: 3px; font-weight: bold; }
#start-btn:hover { background: #5DCAA5; }

/* ── Crash panel ── */
#crash-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 100; background: rgba(5,5,16,0.97);
  border: 1px solid #E24B4A; padding: clamp(14px,3vw,24px) clamp(18px,4vw,36px);
  border-radius: 5px; text-align: center; color: #E24B4A; display: none;
}
#crash-panel h2      { font-size: clamp(16px,3vw,24px); letter-spacing: 5px; margin-bottom: 7px; }
#crash-panel .stats  { font-size: clamp(9px,1.3vw,11px); color: #666; margin-bottom: 14px; }
#crash-panel button  { background: #E24B4A; color: #fff; border: none; font-family: 'Courier New', monospace; font-size: clamp(9px,1.3vw,11px); padding: 7px 18px; border-radius: 3px; cursor: pointer; letter-spacing: 2px; }

/* ── Trick message ── */
#trick-msg {
  position: fixed; top: 0; left: 0;
  z-index: 60; font-size: clamp(12px,2.5vw,16px); color: #EF9F27; letter-spacing: 3px;
  pointer-events: none; opacity: 0; transition: opacity 0.35s; white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 0 10px rgba(239,159,39,0.8);
}

/* ── Touch controls ── */
#touch-controls {
  display: none; /* hidden on desktop */
  position: fixed; bottom: 34px; left: 0; right: 0;
  height: 110px; z-index: 55;
  justify-content: space-between; align-items: flex-end;
  padding: 0 10px 8px;
  pointer-events: none;
}
#touch-left, #touch-right {
  display: flex; gap: 8px; align-items: flex-end;
  pointer-events: all;
}
.touch-btn {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29,158,117,0.15);
  border: 1.5px solid rgba(29,158,117,0.45);
  border-radius: 10px;
  color: #5DCAA5; font-family: 'Courier New', monospace;
  font-size: 18px; font-weight: bold;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: background 0.1s;
}
.touch-btn:active, .touch-btn.pressed {
  background: rgba(29,158,117,0.38);
  border-color: #1D9E75;
}
#btn-brake {
  width: 70px; height: 70px; font-size: 22px;
}
.jump-btn {
  width: 72px; height: 72px;
  font-size: 13px; letter-spacing: 1px;
  border-color: rgba(239,159,39,0.5); color: #EF9F27;
}
.jump-btn:active, .jump-btn.pressed {
  background: rgba(239,159,39,0.25); border-color: #EF9F27;
}

/* Show touch controls on touch devices */
@media (pointer: coarse) {
  #touch-controls { display: flex; }
  /* Shrink coin-bar on mobile so it doesn't crowd controls */
  #coin-bar { height: 30px; gap: 4px; }
  .coin-btn  { font-size: 9px; padding: 2px 7px; }
  /* Compact HUD on small screens */
  #hud { font-size: 9px; padding: 0 6px; gap: 4px; flex-wrap: wrap; height: auto; min-height: 30px; }
  /* Hide CA address text on mobile to save space */
  #ca-addr, #ca-copy-btn > span:first-child, #ca-copy-btn > span:nth-child(3) { display: none; }
  #ca-copy-btn { padding: 4px 8px; }
}