.toolbar button,
.overlay-card button,
.dpad button {
  min-height: 44px;
  min-width: 44px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.stage-panel,
.board-panel {
  min-width: 0;
}

.stage {
  position: relative;
}

.stage canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 640;
  display: block;
  border-radius: 12px;
  background: #10282c;
  touch-action: none;
  cursor: crosshair;
}

.touch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 14px 0 8px;
}

.hint,
.rival-note,
.best,
.elapsed {
  margin: 0;
  color: var(--muted);
}

.hint {
  flex: 1;
  min-width: min(100%, 220px);
  font-size: 14px;
}

.dpad {
  display: grid;
  grid-template-columns: 48px 48px 48px;
  grid-template-areas:
    ". up ."
    "left . right"
    ". down .";
  gap: 6px;
  touch-action: none;
}

.dpad button {
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 20px;
}

.dpad button[data-dir="up"] { grid-area: up; }
.dpad button[data-dir="left"] { grid-area: left; }
.dpad button[data-dir="down"] { grid-area: down; }
.dpad button[data-dir="right"] { grid-area: right; }

.joystick {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(16, 36, 40, 0.65);
  position: relative;
  touch-action: none;
}

.joystick-knob {
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  left: 32px;
  top: 32px;
}

.timer {
  margin: 0;
  font: 600 32px/1.1 Georgia, serif;
  color: var(--gold);
}

.elapsed {
  margin: 2px 0 8px;
  font-variant-numeric: tabular-nums;
}

.board-panel h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.rooms a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
}

.stage .joystick {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
}

.boost {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 72px;
  height: 72px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  padding: 0;
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}

.board li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  border-top: 1px solid var(--line);
  padding: 4px 0;
}

.board li strong,
.board li span {
  display: block;
}

.board .who {
  color: var(--ink);
  font-weight: 700;
}

.board .meta,
.board .score {
  color: var(--muted);
  font-size: 13px;
}

.board .score {
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.board li.is-self {
  background: rgba(237, 195, 126, 0.16);
  border-radius: 8px;
  padding-left: 6px;
  padding-right: 6px;
  box-shadow: inset 0 0 0 2px rgba(237, 195, 126, 0.85);
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  box-shadow: 0 0 0 2px rgba(238, 240, 220, 0.16);
}

.best {
  margin-top: 12px;
  font-size: 14px;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 20, 24, 0.72);
  border-radius: 12px;
}

.overlay-card {
  width: min(100%, 320px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
}

.overlay-card h2 {
  margin: 0 0 8px;
}

.overlay-card p {
  margin: 0 0 14px;
}

.overlay-card button {
  min-width: 140px;
}

@media (max-width: 800px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .toolbar button {
    flex: 1 1 calc(50% - 8px);
  }
}

html,body{max-width:100%;overflow-x:hidden}.game-shell{padding-top:16px}.game-shell h1{font:700 30px/1.2 system-ui;margin:4px 0 8px}.intro{margin-bottom:12px}.intro p{font-size:15px;margin:0}.arena-controls{gap:10px;margin:10px 0 14px;font-size:13px}.arena-controls label{display:flex;align-items:center;gap:6px}.arena-controls select,.arena-controls button{font-size:13px;min-height:38px;padding:7px 11px;border-radius:5px}.arena-controls #connection{color:var(--muted);margin-left:auto}.stage-panel{padding:8px}.stage canvas{border-radius:6px}.board-panel{padding:14px}.leaderboard{margin-top:12px}.leaderboard summary{cursor:pointer;color:var(--accent);font-size:14px}.board li{min-height:38px}.touch-row .dpad{display:none}.touch-row{margin-top:8px}.hint{font-size:12px}.board-panel h2{font:600 18px system-ui}.joystick{width:96px;height:96px;opacity:.72}.joystick-knob{width:40px;height:40px}.help{padding:14px 0;margin-top:16px}#status{font-size:13px;margin:8px 0}.site-header{padding-top:14px;padding-bottom:14px}@media(max-width:800px){.board-panel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 12px}.board-panel h2{display:none}.board-panel .timer{font:700 22px ui-monospace}.board-panel .elapsed,.board-panel #people{margin:0}.board-panel .leaderboard{margin:0 0 0 auto}.leaderboard[open]{flex-basis:100%;margin:0!important}.board-panel .board{max-height:170px}.board-panel .best{display:none}}@media(max-width:650px){.site-header{padding:10px 12px;gap:6px}.brand{font-size:23px}.site-header nav{font-size:12px;gap:14px}.game-shell{padding:12px 8px}.game-shell h1{font-size:24px}.intro p{font-size:13px}.arena-controls{gap:7px;font-size:12px}.arena-controls select,.arena-controls button{padding:6px 8px;min-width:0;flex:none!important}.arena-controls #connection{font-size:11px}.stage canvas{aspect-ratio:auto;height:clamp(340px,58svh,540px);width:100%}.stage-panel{padding:5px;border-radius:8px}.layout{gap:8px}.boost{width:62px;height:62px}.touch-row{display:none}.joystick{left:12px;bottom:12px}.hint{font-size:12px}}