:root {
  --bg: #f2d89a;
  --panel: #13202c;
  --panel-alt: #1f3445;
  --ink: #f8f1de;
  --road: #49545c;
  --road-line: #ffe16f;
  --grass: #a5c76d;
  --suburb: #e7b47a;
  --danger: #ff6d5e;
  --blue: #59a6ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  background:
    radial-gradient(circle at top, rgba(255, 238, 179, 0.9), transparent 34%),
    linear-gradient(135deg, #ecbb72, #d98d51 56%, #ab6437);
  color: var(--ink);
  overscroll-behavior: none;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 340px 1fr;
}

.panel {
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(19, 32, 44, 0.98), rgba(31, 52, 69, 0.94));
  border-right: 3px solid rgba(255, 235, 156, 0.4);
}

h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1;
}

.tag,
.message,
.help p {
  margin: 0;
  line-height: 1.45;
}

.stack {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

label,
.room-meta {
  display: grid;
  gap: 4px;
  font-size: 0.94rem;
}

.inline-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

input,
button {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  touch-action: manipulation;
}

input {
  background: rgba(255, 249, 224, 0.92);
  color: #111;
}

button {
  background: linear-gradient(180deg, #ffe48d, #f0a84f);
  color: #1b1409;
  cursor: pointer;
  font-weight: 700;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.utility-row {
  grid-template-columns: repeat(2, 1fr);
}

#createBtn,
#joinBtn {
  grid-column: span 1;
}

.room-stack .row {
  grid-template-columns: repeat(3, 1fr);
}

.scoreboard {
  background: rgba(8, 14, 20, 0.35);
  border-radius: 16px;
  padding: 12px;
  min-height: 160px;
}

.scoreboard-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scoreboard-row:last-child {
  border-bottom: 0;
}

.team-0 {
  color: var(--danger);
}

.team-1 {
  color: var(--blue);
}

.viewport {
  display: grid;
  place-items: center;
  padding: 20px;
}

canvas {
  width: min(100%, 1280px);
  height: auto;
  background: #7eb7f4;
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.28);
  touch-action: none;
  user-select: none;
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .viewport {
    padding-top: 0;
  }
}