/* UltraDark — neon UI over a black arena. The canvas is the game; DOM is
   only menus/overlays. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #05020c;
  color: #dfe8ff;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.screen {
  pointer-events: auto;
  background: rgba(8, 4, 20, 0.92);
  border: 1px solid rgba(57, 240, 255, 0.25);
  box-shadow: 0 0 40px rgba(57, 240, 255, 0.12), inset 0 0 60px rgba(57, 240, 255, 0.04);
  border-radius: 12px;
  padding: 28px 34px;
  text-align: center;
  max-width: min(92vw, 560px);
  max-height: 92vh; overflow-y: auto;
}
.screen.compact { padding: 16px 22px; background: rgba(8, 4, 20, 0.85); }
.hidden { display: none !important; }

.logo { font-size: 2.6rem; letter-spacing: 0.18em; color: #fff; text-shadow: 0 0 18px #39f0ff; }
.logo span { color: #39f0ff; }
.tag { color: #8fa3c8; margin: 6px 0 18px; }
h2 { letter-spacing: 0.12em; margin-bottom: 12px; }
h3 { letter-spacing: 0.1em; margin-bottom: 10px; color: #39f0ff; }
.code { color: #ffe45b; font-family: ui-monospace, monospace; letter-spacing: 0.2em; text-shadow: 0 0 12px rgba(255, 228, 91, 0.7); }
.dim { color: #66779c; margin-top: 12px; font-size: 0.85rem; }
.tiny { font-size: 0.72rem; }

.row { margin: 10px 0; }
.buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
input {
  background: #0d0722; border: 1px solid #2c3f66; color: #fff; border-radius: 8px;
  padding: 10px 14px; font-size: 1.05rem; text-align: center; letter-spacing: 0.15em;
  text-transform: uppercase; width: 240px; outline: none;
}
input:focus { border-color: #39f0ff; box-shadow: 0 0 12px rgba(57, 240, 255, 0.3); }

.btn {
  background: #10082a; color: #dfe8ff; border: 1px solid #39f0ff55; border-radius: 8px;
  padding: 12px 22px; font-size: 1rem; letter-spacing: 0.08em; cursor: pointer;
  transition: transform 0.06s, box-shadow 0.12s;
}
.btn:hover { box-shadow: 0 0 16px rgba(57, 240, 255, 0.35); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(160deg, #0f4b57, #0b2340); border-color: #39f0ff; color: #fff; text-shadow: 0 0 8px #39f0ff; }
.btn.big { font-size: 1.15rem; padding: 14px 30px; }
.btn.invite { border-color: #ffe45b88; color: #ffe45b; }
.btn.invite:hover { box-shadow: 0 0 16px rgba(255, 228, 91, 0.35); }
.btn.bank { border-color: #b8ff5e88; color: #b8ff5e; }
.btn:disabled { opacity: 0.4; cursor: default; }

.pilots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.pilot {
  border: 1px solid #2c3f66; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  width: 116px; background: #0a0620;
}
.pilot .nm { font-weight: 700; letter-spacing: 0.1em; }
.pilot .ab { font-size: 0.68rem; color: #8fa3c8; margin-top: 4px; }
.pilot.sel { border-color: var(--c, #39f0ff); box-shadow: 0 0 14px color-mix(in srgb, var(--c, #39f0ff) 45%, transparent); }

.roster { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 16px; }
.roster .slot {
  border: 1px dashed #2c3f66; border-radius: 8px; padding: 8px 12px; color: #66779c;
  display: flex; justify-content: space-between; align-items: center;
}
.roster .slot.filled { border-style: solid; color: #dfe8ff; }

.cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 12px; }
.card {
  width: 150px; text-align: left; border: 1px solid #2c3f66; border-radius: 10px;
  background: #0a0620; padding: 12px; cursor: pointer; transition: transform 0.08s, box-shadow 0.12s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 0 18px rgba(57, 240, 255, 0.3); border-color: #39f0ff; }
.card.picked { outline: 2px solid #b8ff5e; }
.card .fam { font-size: 0.62rem; letter-spacing: 0.14em; color: #66779c; }
.card .nm { font-weight: 700; margin: 4px 0; }
.card .ds { font-size: 0.78rem; color: #a9b8d8; }
.card.r2 { border-color: #c26bfa66; } .card.r2:hover { border-color: #c26bfa; box-shadow: 0 0 18px rgba(194, 107, 250, 0.35); }
.card.cursed { border-color: #ff4d4d88; } .card.cursed .fam { color: #ff4d4d; }

.timerbar { height: 6px; background: #131033; border-radius: 3px; overflow: hidden; }
.timerbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #39f0ff, #c26bfa); transition: width 0.2s linear; }

.scorebody { font-size: 1.05rem; line-height: 1.9; margin: 8px 0; }
.scorebody .big { font-size: 2rem; color: #ffe45b; text-shadow: 0 0 16px rgba(255, 228, 91, 0.5); }
.scorebody .lost { color: #ff5b6e; }

.toast {
  position: fixed; bottom: 8vh; left: 50%; transform: translateX(-50%);
  background: rgba(8, 4, 20, 0.95); border: 1px solid #39f0ff66; border-radius: 8px;
  padding: 10px 18px; pointer-events: none; transition: opacity 0.3s; z-index: 40;
}
.banner {
  position: fixed; top: 18vh; left: 50%; transform: translateX(-50%);
  font-size: 2.2rem; font-weight: 800; letter-spacing: 0.25em; color: #fff;
  text-shadow: 0 0 24px #39f0ff; pointer-events: none; z-index: 30; white-space: nowrap;
}
.banner.warn { color: #ff5b6e; text-shadow: 0 0 24px #ff5b6e; }

/* touch controls */
#touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.stick {
  position: absolute; bottom: 12vh; width: 110px; height: 110px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04);
}
.stick i {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px;
  border-radius: 50%; background: rgba(57, 240, 255, 0.35); border: 1px solid #39f0ff;
}
#stick-l { left: 6vw; } #stick-r { right: 6vw; }
.tbtn {
  position: absolute; bottom: 26vh; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid #39f0ff55; background: rgba(16, 8, 42, 0.7); color: #fff; font-size: 1.3rem;
  pointer-events: auto;
}
#tbtn-bomb { right: calc(6vw + 130px); }
#tbtn-abil { right: calc(6vw - 10px); bottom: calc(26vh + 40px); }

.btn.small { padding: 8px 14px; font-size: 0.85rem; }
.btn.daily { border-color: #7a5cff88; color: #b8a6ff; }
.btn.daily:hover { box-shadow: 0 0 16px rgba(122, 92, 255, 0.4); }
.lb-tab.active { border-color: #ffe45b; color: #ffe45b; }

.setting { margin: 14px 0; text-align: left; }
.setting label { display: flex; justify-content: space-between; color: #a9b8d8; font-size: 0.9rem; margin-bottom: 6px; }
.setting input[type="range"] { width: 100%; accent-color: #39f0ff; }

.lb-body { min-width: min(80vw, 420px); margin: 10px 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.lb-row { display: flex; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #1a1440; align-items: baseline; }
.lb-row .rank { color: #66779c; width: 2.2em; text-align: right; }
.lb-row .score { color: #ffe45b; width: 7em; text-align: right; }
.lb-row .who { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .wave { color: #8fa3c8; }
.lb-row:first-child .rank, .lb-row:first-child .score { color: #fff; text-shadow: 0 0 10px #ffe45b; }

@media (max-width: 640px) {
  .screen { padding: 18px 14px; }
  .logo { font-size: 1.9rem; }
  .card { width: 128px; }
}