:root {
  --accent: #4ECDC4;
  --accent-rgb: 78, 205, 196;
  --accent-hover: #45b8b0;
  --accent-active: #3ca39c;
}

.admin-mode {
  --accent: #FFD700;
  --accent-rgb: 255, 215, 0;
  --accent-hover: #e6c200;
  --accent-active: #cca800;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0a0f;
  color: #eee;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wrapper {
  position: relative;
  width: 1024px;
  height: 576px;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #1a1a2e;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 15, 0.9);
  text-align: center;
  gap: 12px;
}

.hidden,
#authForm.hidden,
#welcomePanel.hidden,
.settings-panel.hidden,
#settingsBtn.hidden,
#statsBtn.hidden,
.overlay.hidden,
#xpBar.hidden,
#resultsOverlay.hidden {
  display: none;
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.subtitle {
  color: #888;
  font-size: 1rem;
  margin-bottom: 4px;
}

.menu-columns {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 820px;
  justify-content: center;
}

.menu-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 260px;
  flex-shrink: 0;
}

.menu-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 420px;
  flex-shrink: 0;
}

input[type="text"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 16px;
  color: #fff;
  font-size: 1rem;
  width: 220px;
  text-align: center;
  outline: none;
}

input[type="text"]:focus {
  border-color: var(--accent);
}

input[type="password"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 16px;
  color: #fff;
  font-size: 1rem;
  width: 220px;
  text-align: center;
  outline: none;
}

input[type="password"]:focus {
  border-color: var(--accent);
}

button {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  color: #0a0a0f;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

button:hover {
  background: var(--accent-hover);
}

button:active {
  background: var(--accent-active);
}

.error {
  color: #FF6B6B;
  font-size: 0.85rem;
}

.hud {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 150px;
  pointer-events: none;
}

.lb-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

#lbEntries {
  font-size: 0.75rem;
}

.lb-entry {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: rgba(255,255,255,0.6);
}

.lb-entry.top {
  color: #FFD700;
  font-weight: 600;
}

.lb-entry .lb-kills {
  color: rgba(255,255,255,0.4);
}

.lb-entry.top .lb-kills {
  color: rgba(255,215,0,0.6);
}

.hotbar {
  position: absolute;
  bottom: 12px;
  right: 12px;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.hot-slot {
  width: 80px;
  height: 48px;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.hot-slot.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}

.hot-key {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
}

.hot-name {
  font-size: 0.7rem;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.settings-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.settings-btn:hover {
  opacity: 1;
}

.settings-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.settings-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  z-index: 20;
  overflow: hidden;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.settings-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}

.settings-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.stats-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  max-height: 70vh;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  z-index: 25;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stats-panel.hidden {
  display: none;
}

.char-stats-panel {
  position: absolute;
  z-index: 30;
  /* Clip to the panel's own bounds (set in JS to match the Stats.png art) so
     stat-row text can never visually spill past the artwork like it was. */
  overflow: hidden;
}

.char-stats-panel.hidden {
  display: none;
}

#charStatsCanvas {
  display: block;
  pointer-events: none;
}

#charStatsContent {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.85);
  overflow-y: auto;
  overflow-x: hidden;
}

#charStatsContent .char-stat-row {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

#charStatsClose {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#charStatsClose:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.inventory-panel {
  position: absolute;
  z-index: 30;
  overflow: hidden;
}

.inventory-panel.hidden {
  display: none;
}

#inventoryCanvas {
  display: block;
}

#inventorySlotsLayer {
  position: absolute;
  inset: 0;
  /* Layer itself doesn't intercept clicks — individual .inv-slot/.equip-slot
     elements re-enable pointer-events so drag/drop (not built yet) can target
     just the slots, not the whole panel. */
  pointer-events: none;
}

.inv-slot, .equip-slot {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  overflow: hidden;
  /* No border/background by default — the slot art is already baked into
     inventory.png. Borders only show up with HUD debug (J key) for alignment
     checks, via .slot-debug below. */
}

.inv-slot.slot-debug {
  border: 1px dashed rgba(78, 205, 196, 0.85);
  background: rgba(78, 205, 196, 0.08);
}

.equip-slot.slot-debug {
  border: 1px dashed rgba(255, 200, 61, 0.85);
  background: rgba(255, 200, 61, 0.08);
}

.slot-item-label {
  padding: 2px;
  word-break: break-word;
  line-height: 1.1;
}

/* Wallet readout inside the inventory panel (2026-07-13) — positioned/sized
   via the same CurrencyDisplay hud-layout.json entry Travis places with
   hud-position-tool.html, same panel-relative math as .inv-slot/.equip-slot
   above. Unlike those, this is plain text, not an interactive slot — no
   pointer-events needed, no drag/drop, no hover tooltip. */
.currency-display {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* Left-aligned within its box (2026-07-13, per Travis), not centered —
     the box sits over art he placed on the left side of the panel. */
  justify-content: flex-start;
  padding-left: 4px;
  font-family: "Teko", "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  /* No color/text-shadow here anymore (2026-07-13) — every denomination gets
     its own color via .currency-gold/-silver/-bronze below, set via
     game-data.js's formatCurrencyHtml(). This is just a fallback for the
     rare case content ends up here NOT wrapped in one of those spans. */
  color: #fff;
}

/* Per-denomination currency colors (2026-07-13, per Travis: "a nice vibrant
   bronze... a nice shiny silver... a nice gold") — used everywhere currency
   is displayed (inventory panel, welcome panel, Char Stats, gold-coin world-
   drop hover tooltip), always via game-data.js's formatCurrencyHtml(), never
   hardcoded per call site, so a color tweak here updates every location at
   once.

   Originally used a blurred text-shadow "glow" — Travis flagged it as
   making the text look blurry, and asked for the text itself to be
   shinier instead. Fixed same day: no more blur-radius shadow (just a
   crisp 1px shadow for legibility against busy backgrounds, not a glow),
   and each color is now a metallic gradient (pale highlight -> base color
   -> darker edge) painted onto the text via background-clip, which reads
   as "shiny" without softening/blurring the letterforms at all. */
.currency-gold, .currency-silver, .currency-bronze {
  font-weight: 700;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9);
}

.currency-gold {
  color: #ffd700;
}

.currency-silver {
  color: #b8c8d4;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.currency-bronze {
  color: #c07028;
}

.slot-item-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.item-tooltip {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  min-width: 120px;
  font-family: monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.item-tooltip.hidden {
  display: none;
}

.item-tooltip .tooltip-name {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}

.item-tooltip .tooltip-stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.item-tooltip .tooltip-stat span:last-child {
  color: rgba(255, 255, 255, 0.9);
}

/* Master chest world-hover tooltip (2026-07-14) — reuses #dropTooltip/
   .item-tooltip's box + .tooltip-header/.tooltip-icon-wrap/.tooltip-name
   (same as the world item-drop tooltip), just adds this description line
   underneath. max-width forces the flavor text to wrap instead of stretching
   the tooltip box out to a single long line. */
.item-tooltip .tooltip-desc {
  margin-top: 4px;
  max-width: 220px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* World item-drop hover tooltip — lives directly in #wrapper (not nested in
   #inventoryPanel like the slot tooltip above) so it works regardless of
   whether the inventory panel is open. Adds an icon next to the name, which
   the plain slot tooltip doesn't need since the slot itself already shows
   the icon. */
.drop-tooltip .tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.drop-tooltip .tooltip-icon-wrap {
  width: 32px;
  height: 32px;
  flex: none;
}

.drop-tooltip .tooltip-header .tooltip-name {
  margin-bottom: 0;
}

.slot-occupied {
  cursor: grab;
}

.slot-dragging {
  opacity: 0.35;
}

.drag-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  /* Solid background/border/shadow so the ghost is always clearly visible
     against ANY part of the game behind it — fixed 2026-07-13, was
     previously just a bare icon (or, for the many items with no
     ITEM_ICONS art yet, a tiny borderless text label) floating with
     nothing behind it, which players reported as looking "invisible" while
     dragging. Matches .item-tooltip's box treatment for a consistent,
     unmistakably-a-UI-element look. */
  background: rgba(10, 10, 15, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.inventory-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.inventory-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#inventoryContent {
  width: 100%;
  height: 100%;
  position: relative;
}

#masterChestContent {
  width: 100%;
  height: 100%;
  position: relative;
}

.char-stat-row {
  display: flex;
  justify-content: space-between;
}

.char-stat-label { color: rgba(255, 255, 255, 0.4); }
.char-stat-value { color: var(--accent); font-weight: 600; }

#statsBtn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  margin-bottom: 6px;
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  text-align: center;
}

#statsBtn:hover {
  background: var(--accent);
  color: #000;
}

.stats-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stats-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 0.8rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s, background 0.15s;
}

.stats-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
}

.stats-tab.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

#statsClose {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#statsClose:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

#statsContent {
  padding: 12px 16px;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  overflow-y: auto;
}

.stats-rooms-toggle {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  margin-top: 4px;
  display: inline-block;
}

#statsRoomDetails {
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
}

.settings-body {
  padding: 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-label {
  font-size: 0.9rem;
  color: #eee;
  font-weight: 500;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 12px 0;
}

.settings-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FFD700;
  margin-bottom: 8px;
}

#roomList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#roomBrowserHeader {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  text-align: left;
}

.room-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-size: 0.85rem;
}

.room-entry:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.room-entry.selected {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
}

.room-entry.empty {
  cursor: default;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  justify-content: center;
}

.room-entry.empty:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.room-first-line {
  display: flex;
  align-items: center;
  width: 100%;
}

.room-first-line .room-level {
  flex-shrink: 0;
}

.room-first-line .room-name {
  flex: 1;
  text-align: center;
}

.room-first-line .room-players {
  flex-shrink: 0;
}

.room-names {
  font-size: 0.7rem;
  color: #eee;
  text-align: left;
  width: 100%;
  margin-top: 2px;
}

.room-name {
  font-weight: 600;
  color: #eee;
}

.room-players {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

.room-level {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
  text-align: right;
}

.room-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  flex-direction: column;
}

.room-actions button {
  flex: 1;
  padding: 7px 20px;
  font-size: 0.85rem;
}

#signInPrompt {
  font-size: 0.75rem;
  color: #FF6B6B;
  text-align: center;
  margin-top: 2px;
}

#authForm {
  width: 100%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

#authForm input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #eee;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

#authForm input:focus {
  border-color: var(--accent);
}

.auth-toggle {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

.auth-toggle a {
  color: var(--accent);
  text-decoration: none;
}

.auth-toggle a:hover {
  text-decoration: underline;
}

.auth-note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: -4px;
}

.guest-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
  margin-top: 4px;
}

.guest-btn:hover {
  color: rgba(255, 255, 255, 0.6);
}

.lobby-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  transition: color 0.15s, border-color 0.15s;
}

.lobby-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

#welcomePanel {
  width: 100%;
  max-width: 220px;
  padding: 10px 14px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
}

#welcomeMsg {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}

#accountStats {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

#adminBadge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #FFD700;
  opacity: 0.6;
}

.lobby-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
  text-align: right;
}

.escape-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 15, 0.85);
  z-index: 15;
  gap: 12px;
}

.escape-overlay.hidden {
  display: none;
}

.escape-warning {
  color: #FF6B6B;
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.4;
  text-align: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.escape-actions {
  display: flex;
  gap: 8px;
}

.escape-actions button {
  flex: 1;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 15, 0.9);
  z-index: 50;
  gap: 12px;
}

.loading-overlay.hidden {
  display: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255,255,255,0.1);
  border-top-color: #c9902e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-family: "Lilita One", Arial, sans-serif;
  color: #fff8df;
  font-size: 24px;
  text-shadow: 3px 3px 0 #050505;
}

#startNowBtn {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 12px 40px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

#lobbyGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}

.lobby-card {
  background: #292933;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 180px;
}

.lobby-card.empty {
  opacity: 0.35;
}

.lobby-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #eee;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-card-preview {
  flex: 1;
  display: block;
  background: transparent;
}

.lobby-card-stats {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 4px;
}

.lobby-card-exp {
  text-align: left;
}

.lobby-card-rank {
  text-align: right;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.lobby-card-build {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--accent);
  user-select: none;
}

.build-arrow {
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s;
}

.build-arrow:hover {
  color: var(--accent);
}

.build-name {
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.lobby-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.lobby-actions button {
  padding: 10px 30px;
}

#resultsOverlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 480px;
  max-height: 480px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
}

#resultsPlayerList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.result-row .result-rank {
  width: 28px;
  color: #888;
  font-size: 0.75rem;
}

.result-row .result-name {
  flex: 1;
  text-align: left;
  font-weight: 600;
  color: #eee;
}

.result-row .result-stat {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  margin-left: 12px;
  white-space: nowrap;
}

.result-row.top-player {
  border-color: #FFD700;
  background: rgba(255,215,0,0.06);
}

.results-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.lobby-card.ready {
  border-color: #4ECDC4;
}

.lobby-card.ready .lobby-card-name::after {
  content: ' \u2713';
  color: #4ECDC4;
  font-weight: bold;
}

#joinGameBtn {
  position: absolute;
  bottom: 16px;
  right: 100px;
  z-index: 5;
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ---- Next Wave Popup ---- */
.nwp-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 48px;
  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  transition: background 0.15s;
}
.nwp-tab:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nwp-tab.hidden { display: none; }

.nwp-shell {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-120%);
  background: rgba(20,20,20,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  width: 200px;
  z-index: 100;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nwp-shell.in { transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: auto; }
.nwp-shell.out { transform: translateY(-50%) translateX(-120%); opacity: 0; pointer-events: none; }

.nwp-shell .nwp-close {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: none;
  color: rgba(255,255,255,0.35); font-size: 13px; line-height: 22px;
  text-align: center; cursor: pointer; z-index: 5;
  transition: background 0.15s, color 0.15s;
}
.nwp-shell .nwp-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.nwp-shell .nwp-title {
  text-align: center; font-weight: 700; text-transform: uppercase;
  color: #FFC83D; font-size: 18px; letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  padding: 12px 10px 0; flex-shrink: 0;
}
.nwp-shell .nwp-divider {
  height: 1px; background: rgba(255,255,255,0.12);
  margin: 5px 10px 7px; flex-shrink: 0;
}

.nwp-shell .nwp-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 6px 4px; overflow-y: auto; flex: 1; min-height: 0;
}
.nwp-shell .nwp-list::-webkit-scrollbar { width: 3px; }
.nwp-shell .nwp-list::-webkit-scrollbar-track { background: transparent; }
.nwp-shell .nwp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.nwp-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 6px;
  transition: background 0.15s, transform 0.15s;
  min-height: 28px;
}
.nwp-row:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }
.nwp-row { min-height: 52px; }
.nwp-row .icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 6px; background: rgba(255,255,255,0.04); flex-shrink: 0; }
.nwp-row .icon img { width: 100%; height: 100%; object-fit: contain; }
.nwp-row .name { flex: 1; text-transform: uppercase; color: #fff; font-weight: 600; font-size: 10px; letter-spacing: 0.5px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nwp-row .count { font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 #000,1px 0 0 #000,0 -1px 0 #000,-1px 0 0 #000,0 2px 4px rgba(0,0,0,0.5); white-space: nowrap; }

.nwp-more { text-align: center; color: rgba(255,255,255,0.25); font-size: 0.7rem; padding: 2px 0; flex-shrink: 0; }

.nwp-summary {
  display: flex; justify-content: space-between;
  padding: 4px 8px 8px; color: rgba(255,255,255,0.3);
  font-size: 0.65rem; border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

/* Expanded state */
.nwp-shell.expanded {
  width: 360px; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200; cursor: default;
}
.nwp-shell.expanded.in { transform: translate(-50%, -50%); }

.nwp-grid { display: none; padding: 0 8px 8px; }
.nwp-shell.expanded .nwp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px; max-height: 55vh; overflow-y: auto;
}
.nwp-grid::-webkit-scrollbar { width: 4px; }
.nwp-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.nwp-grid .grid-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; min-height: 30px; font-size: 0.8rem;
  transition: background 0.15s;
}
.nwp-grid .grid-cell:hover { background: rgba(255,255,255,0.05); }
.nwp-grid .grid-cell { min-height: 36px; }
.nwp-grid .grid-cell .icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 4px; background: rgba(255,255,255,0.04); flex-shrink: 0; }
.nwp-grid .grid-cell .icon img { width: 100%; height: 100%; object-fit: contain; }
.nwp-grid .grid-cell .name { flex: 1; color: #fff; font-weight: 600; font-size: 10px; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nwp-grid .grid-cell .count { font-size: 15px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 #000,0 1px 3px rgba(0,0,0,0.5); }

.nwp-details {
  display: none; padding: 6px 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35); font-size: 0.7rem;
}
.nwp-shell.expanded .nwp-details { display: flex; gap: 14px; justify-content: center; }

/* Incoming section (nighttime only) */
.nwp-incoming-section { padding: 1px 8px 4px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 2px; }
.nwp-incoming-label { text-align:center;font-size:0.55rem;color:rgba(255,255,255,0.2);letter-spacing:1px;margin-bottom:2px;text-transform:uppercase; }
.nwp-inc-row { display:flex;align-items:center;gap:5px;padding:1px 4px;min-height:18px; }
.nwp-inc-row .icon { width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.nwp-inc-row .icon img { width:16px;height:16px;display:block; }
.nwp-inc-row .name { flex:1;font-size:8px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.3px; }
.nwp-inc-row .count { font-size:13px;font-weight:600;color:rgba(255,255,255,0.3); }

/* Overlay for expanded */
.nwp-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.3);
  z-index: 199; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.nwp-overlay.visible { opacity: 1; pointer-events: auto; }