:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #090b12;
  color: #f6f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
.layout { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1fr) 360px; }
.game-area {
  padding: 32px;
  background: radial-gradient(circle at 20% 10%, #34215b 0, transparent 35%),
    radial-gradient(circle at 90% 80%, #502018 0, transparent 32%), #0d1019;
}
.status-bar {
  max-width: 880px; margin: 0 auto 24px; display: flex;
  justify-content: space-between; align-items: end; gap: 24px;
}
.eyebrow { margin: 0; color: #ffbb38; font-weight: 900; letter-spacing: .18em; }
h1 { margin: 4px 0 0; font-size: clamp(24px, 4vw, 42px); }
h2, h3 { margin-top: 0; }
.muted { color: #999fb0; line-height: 1.5; }
.timers { display: flex; gap: 10px; }
.timers div {
  min-width: 100px; padding: 10px 14px; border: 1px solid #34394a;
  border-radius: 12px; background: #171b28;
}
.timers span { display: block; color: #9da4b8; font-size: 12px; }
.timers strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.bomb-clock strong { color: #ff665e; }
.waiting-room {
  max-width: 880px; margin: 0 auto 16px; padding: 12px 14px;
  border: 1px solid #4c4268; border-radius: 10px; background: #1b1729;
}
.waiting-players { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.waiting-player {
  padding: 6px 10px; border: 1px solid #735bc0; border-radius: 999px;
  color: #ddd4ff; background: #302451; font-size: 13px; font-weight: 700;
}
.grid {
  --columns: 4; --rows: 4; width: min(92%, 1100px); aspect-ratio: 16 / 9; margin: auto;
  display: grid; grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  border: 2px solid #8990a5; background: #171a24; box-shadow: 0 24px 70px #0009;
}
.cell {
  position: relative; min-width: 0; border: 1px solid #454a5a;
  background: linear-gradient(145deg, #1d2230, #151923);
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 5px; padding: 6px;
}
.player {
  position: relative; max-width: 95%; padding: 9px 12px; border-radius: 999px;
  background: #7554dc; border: 2px solid #b8a6ff; box-shadow: 0 4px 12px #0008;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(10px, 1.2vw, 15px); font-weight: 800;
}
.player.bomb {
  background: #bd312c; border-color: #ffb13b;
  animation: pulse .7s infinite alternate;
}
.player.bomb::before { content: "💣 "; }
@keyframes pulse { to { transform: scale(1.06); box-shadow: 0 0 22px #ff382f; } }
.controls {
  padding: 28px; overflow-y: auto; border-left: 1px solid #292d3a; background: #11141e;
}
.control-group { margin: 22px 0; padding-top: 20px; border-top: 1px solid #292d3a; }
label { display: block; margin: 10px 0; color: #c4c8d5; font-size: 13px; }
input, select {
  width: 100%; margin-top: 6px; padding: 10px 12px; color: white;
  border: 1px solid #3c4253; border-radius: 8px; background: #1c202c;
}
button {
  padding: 11px 14px; color: white; border: 1px solid #545b70;
  border-radius: 8px; background: #292f41; cursor: pointer;
}
button:hover { filter: brightness(1.15); }
.primary { width: 100%; background: #704bd7; border-color: #9679eb; }
#startNowButton { margin-left: 6px; color: #ffe0a1; border-color: #7a6338; }
.danger { width: 100%; color: #ff9d98; border-color: #6b3537; background: #351d22; }
.dpad { display: grid; grid-template-columns: repeat(3, 58px); justify-content: center; gap: 6px; }
.dpad button { height: 58px; padding: 5px; font-size: 22px; }
.dpad button:first-child { grid-column: 2; }
.dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.dpad small { display: block; font-size: 10px; color: #adb2c1; }
.message {
  min-height: 44px; padding: 12px; border-radius: 8px;
  color: #cdd2df; background: #1a1e2a;
}
.message.error { color: #ff928b; }
.result {
  max-width: 880px; margin: 18px auto 0; padding: 16px;
  border: 1px solid #644a20; border-radius: 10px;
  color: #ffcf70; background: #2b2111;
}
.hidden { display: none; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .game-area { min-height: 70vh; padding: 20px; }
  .controls { border-left: 0; border-top: 1px solid #292d3a; }
  .grid { width: min(90vw, 650px); }
}