/* LAST LIGHT — page shell, lobby, overlays, touch */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000008; overflow: hidden; }
body {
  font-family: "Courier New", monospace;
  color: #c9d4dc;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Lobby ─────────────────────────────────────────────────────────────── */
#lobby-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #0b0e18 0%, #000008 70%);
  z-index: 30;
}
#lobby-screen.hidden { display: none; }
.lobby-box { width: min(560px, 94vw); text-align: center; padding: 18px; }
.game-title {
  font-size: 44px; letter-spacing: 10px; color: #fff3c4;
  text-shadow: 0 0 18px rgba(255, 243, 196, 0.35), 0 0 60px rgba(210, 43, 43, 0.25);
  margin-bottom: 6px;
}
.tagline { color: #5d6a75; font-size: 12px; margin-bottom: 18px; }
.room-row { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 14px; }
.room-row span { color: #5d6a75; font-size: 12px; }
#room-code-input {
  width: 110px; background: #0b0e14; color: #fff3c4; border: 1px solid #232a33;
  padding: 7px 8px; font-family: inherit; font-size: 16px; text-align: center; letter-spacing: 3px;
}
button {
  background: #141a22; color: #c9d4dc; border: 1px solid #2c3540;
  padding: 8px 16px; font-family: inherit; font-size: 13px; cursor: pointer;
}
button:hover { background: #1d2530; }
button:disabled { opacity: 0.4; cursor: default; }
#lobby-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 14px; }
.slot {
  display: flex; justify-content: space-between; padding: 9px 12px;
  background: #0b0e14; border: 1px solid #1a212a; font-size: 13px;
}
.slot.occupied { border-color: #33404d; }
.slot.ready { border-color: #52c46a; }
.slot-name.p1 { color: #4aa3ff; } .slot-name.p2 { color: #ff9f43; }
.slot-name.p3 { color: #5cd65c; } .slot-name.p4 { color: #e056fd; }
.slot-status { color: #5d6a75; }
#btn-ready { width: 200px; padding: 12px; font-size: 16px; letter-spacing: 2px; border-color: #d22b2b; }
#btn-ready.is-ready { background: #26170f; border-color: #52c46a; color: #52c46a; }
#lobby-status-text { margin-top: 10px; font-size: 12px; color: #5d6a75; min-height: 16px; }
#connection-status { font-size: 11px; margin-top: 4px; }
#connection-status.connected { color: #52c46a; }
#connection-status.disconnected { color: #d22b2b; }
.how-to { margin-top: 18px; font-size: 11px; color: #46525c; line-height: 1.7; }
.how-to b { color: #8d9aa5; }

/* ── Game canvas ───────────────────────────────────────────────────────── */
#game-wrapper { position: fixed; inset: 0; display: none; background: #000008; }
#game-wrapper.active { display: block; }
#game-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; image-rendering: pixelated; cursor: crosshair;
}

/* ── Overlays ──────────────────────────────────────────────────────────── */
#countdown-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 8, 0.7); z-index: 20;
}
#countdown-overlay.active { display: flex; }
#countdown-number { font-size: 110px; color: #fff3c4; text-shadow: 0 0 30px rgba(255,243,196,0.4); }
#disconnected-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 8, 0.85); z-index: 25; text-align: center;
}
#disconnected-overlay.active { display: flex; }
.overlay-box h2 { color: #d22b2b; letter-spacing: 4px; margin-bottom: 10px; }
.overlay-box p { color: #8d9aa5; font-size: 13px; margin-bottom: 16px; }
.overlay-box button { margin: 0 6px; }

#rotate-overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: #000008; z-index: 40; text-align: center;
  font-size: 26px; color: #fff3c4; line-height: 1.6;
}
#rotate-overlay span { font-size: 14px; color: #5d6a75; }
@media (orientation: portrait) {
  body.touch #rotate-overlay { display: flex; }
}

#mute-btn, #fullscreen-btn {
  position: absolute; top: 8px; width: 36px; height: 36px; padding: 0;
  background: rgba(10, 14, 20, 0.55); border: 1px solid #232a33; z-index: 22; font-size: 16px;
}
#mute-btn { right: 52px; }
#fullscreen-btn { right: 8px; }

/* ── Touch controls ────────────────────────────────────────────────────── */
#touch-controls { display: none; }
body.touch #touch-controls { display: block; }
.joy-zone {
  position: absolute; bottom: 0; width: 42%; height: 46%; z-index: 21;
}
#joy-left { left: 0; }
#joy-right { right: 0; }
.tbtn {
  position: absolute; z-index: 22; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(20, 26, 34, 0.5); border: 1px solid #33404d; color: #c9d4dc; font-size: 18px;
}
#tbtn-reload { right: 16px; bottom: 52%; }
#tbtn-light { right: 78px; bottom: 58%; }
#tbtn-use { right: 140px; bottom: 52%; }
#tbtn-dash { right: 16px; bottom: 66%; }