:root {
  --sky: #7ec8f5;
  --pill-bg: rgba(20, 30, 50, 0.78);
  --gold: #ffd21e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--sky); font-family: 'Bricolage Grotesque', sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#scene-container { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* Loading */
#loading {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #9ad6ff 0%, #4a8fd1 100%);
  transition: opacity 0.6s ease;
}
.load-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(18px, 5vw, 40px);
  color: #fff; text-shadow: 3px 3px 0 #d0342c, 6px 6px 0 rgba(0,0,0,0.25);
  animation: bob 1.2s ease-in-out infinite;
}
.load-msg { margin-top: 28px; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }
.dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.hud-pill {
  position: absolute; top: 16px;
  background: var(--pill-bg); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-family: 'Press Start 2P', monospace; font-size: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); backdrop-filter: blur(4px);
}
#star-pill { left: 16px; color: var(--gold); }
#coin-pill { left: 50%; transform: translateX(-50%); top: 16px; }

.hud-buttons { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; pointer-events: auto; }
.hud-btn {
  width: 46px; height: 46px; border: none; border-radius: 12px;
  background: var(--pill-bg); color: #fff; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.hud-btn:active { transform: scale(0.9); }

#toast {
  position: absolute; top: 80px; left: 50%; transform: translate(-50%, -20px);
  font-family: 'Press Start 2P', monospace; font-size: clamp(16px, 4vw, 28px);
  color: #fff; text-shadow: 2px 2px 0 #d0342c, 4px 4px 0 rgba(0,0,0,0.3);
  opacity: 0; transition: opacity 0.3s, transform 0.3s; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); animation: pop 0.4s; }
@keyframes pop { 0%{transform:translate(-50%,10px) scale(0.6);} 60%{transform:translate(-50%,0) scale(1.15);} 100%{transform:translate(-50%,0) scale(1);} }

#controls-legend {
  position: absolute; bottom: 60px; left: 16px; pointer-events: auto;
  background: var(--pill-bg); color: #fff; padding: 12px 16px; border-radius: 12px;
  font-size: 13px; line-height: 1.7; max-width: 300px; cursor: pointer;
  backdrop-filter: blur(4px);
}
.legend-head { font-family: 'Press Start 2P', monospace; font-size: 10px; margin-bottom: 8px; color: var(--gold); }
#controls-legend.collapsed .legend-body { display: none; }
#controls-legend.collapsed .legend-head::after { content: ' (tap to open)'; }

/* Mobile controls */
#mobile-controls { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
#joystick {
  position: absolute; bottom: 40px; left: 30px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 3px solid rgba(255,255,255,0.5);
  pointer-events: auto; touch-action: none;
}
#thumb {
  position: absolute; top: 50%; left: 50%; margin: -32px 0 0 -32px;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.05s;
}
#jump-btn {
  position: absolute; bottom: 50px; right: 40px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff5a4f, #d0342c);
  border: 4px solid #fff; color: #fff; font-family: 'Press Start 2P', monospace;
  font-size: 12px; pointer-events: auto; touch-action: none;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
#jump-btn:active { transform: scale(0.9); }

/* Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 25, 45, 0.7); backdrop-filter: blur(6px);
}
.panel {
  background: linear-gradient(160deg, #fffdf5, #ffe9c7);
  border: 4px solid #d0342c; border-radius: 20px; padding: 32px 40px;
  text-align: center; max-width: 90vw; min-width: 280px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.panel h2 { font-family: 'Press Start 2P', monospace; font-size: 20px; color: #d0342c; margin-bottom: 14px; }
.panel p { margin-bottom: 22px; font-weight: 800; color: #555; }
.big-btn {
  display: block; width: 100%; margin: 10px 0; padding: 14px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: 'Press Start 2P', monospace; font-size: 13px; color: #fff;
  background: #2a6bd4; box-shadow: 0 4px 0 #1a4a99; transition: transform 0.1s;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a4a99; }
.big-btn.ghost { background: #888; box-shadow: 0 4px 0 #555; }

#board-list { margin-bottom: 20px; min-width: 260px; }
.board-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 4px 0; border-radius: 10px;
  background: rgba(0,0,0,0.05); font-weight: 800;
}
.rank { width: 30px; font-family: 'Press Start 2P', monospace; font-size: 12px; }
.bname { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bstars { color: #c88a00; font-weight: 800; }
.board-empty { padding: 20px; color: #777; font-weight: 800; line-height: 1.6; }

/* Footer */
#footer {
  position: fixed; bottom: 4px; left: 50%; transform: translateX(-50%);
  z-index: 60; font-size: 11px; color: rgba(255,255,255,0.85);
  display: flex; gap: 12px; align-items: center; pointer-events: auto;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); white-space: nowrap;
}
#footer a { color: #fff; font-weight: 800; text-decoration: underline; }
.disclaimer { opacity: 0.7; font-size: 9px; }

@media (max-width: 600px) {
  .hud-pill { font-size: 12px; padding: 8px 12px; }
  #controls-legend { display: none; }
  .disclaimer { display: none; }
}