/* Neon Commons component treatment. All UI colours come from tokens.css. */
body {
  background: var(--ink);
}
button,
a.primary {
  font-weight: 550;
}
.brand,
.header-actions,
#location,
#minimap-toggle {
  border-color: var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
/* Opaque glass colour keeps the moving canvas out of expensive backdrop blur. */
.header-actions,
#location {
  background: var(--bg);
}
.brand {
  padding: var(--s2) var(--s4) var(--s2) var(--s2);
  border-color: var(--border);
}
.brand-mark {
  border-radius: var(--radius-sm);
}
.brand small {
  color: var(--muted);
  font-size: 8px;
}
.header-actions {
  padding: var(--s1);
}
.header-actions button {
  background: transparent;
}
.header-actions button:hover {
  background: var(--surface);
}
#location {
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow);
}
#location-number {
  color: var(--accent);
  letter-spacing: 1.4px;
}
#location h1 {
  margin-top: var(--s2);
}
#location p {
  color: var(--muted);
}
#minimap-toggle {
  overflow: hidden;
  border-color: var(--glass-border);
}
#minimap-canvas {
  border-radius: var(--s1);
  border-color: var(--border);
}
.minimap-heading {
  color: var(--accent);
}
.minimap-key {
  color: var(--muted);
}
#walk-hud,
footer > span,
footer > div,
#toast {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
#walk-hud {
  color: var(--muted);
}
#mode {
  color: var(--accent);
}
footer > span {
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
footer > div {
  background: var(--bg);
}
footer button,
footer a {
  border-radius: var(--radius-sm);
}
footer button {
  background: transparent;
}
#action kbd {
  background: var(--accent-fg);
  color: var(--accent);
  border: 0;
}
#action {
  min-height: 48px;
}
#touch-controls {
  gap: var(--s1);
}
#touch-controls button {
  background: var(--bg);
  border-color: var(--glass-border);
}
dialog,
.pixel-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
dialog .close {
  border: 0;
  background: var(--surface);
}
.dialog-heading .eyebrow {
  color: var(--accent);
}
#content-links a {
  border: 0;
  border-radius: var(--radius-sm);
}
.dialog-icon {
  background: var(--surface);
  color: var(--accent);
  border-radius: var(--radius-md);
}
.place-list button {
  border-color: var(--border);
  background: var(--surface);
}
.place-list button:hover {
  border-color: var(--accent);
}
.place-list small {
  color: var(--accent);
}
#npc-portrait {
  border-radius: var(--radius-md);
  border-color: var(--border);
}
.npc-speech {
  border-radius: var(--radius-sm);
}
#npc-choices button {
  background: var(--bg);
}
#npc-choices button:hover {
  background: var(--surface);
  border-color: var(--accent);
}
#npc-choices kbd {
  border: 0;
  border-radius: var(--s1);
}
.npc-help {
  color: var(--muted);
}
#chat-toggle {
  border-color: var(--glass-border);
}
#chat-input {
  border-radius: var(--radius-sm);
}
body.in-lobby {
  background:
    radial-gradient(ellipse at 85% 0%, var(--lobby-glow) 0%, transparent 48%),
    var(--ink);
}
#lobby-title {
  font-weight: 650;
  letter-spacing: -2.5px;
}
.lobby-heading .eyebrow {
  color: var(--accent);
}
.lobby-totals > div {
  border-top: 1px solid var(--border);
}
.lobby-totals strong {
  color: var(--accent);
}
.roster-panel,
.town-ticket {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border-color: var(--border);
}
.roster-panel {
  background: var(--bg);
}
.ticket-caption {
  background: var(--bg);
  color: var(--accent);
}
.ticket-body {
  background: var(--bg);
}
#lobby-art {
  border-bottom: 1px solid var(--border);
}
.empty-portrait {
  border-radius: var(--radius-md);
  color: var(--accent-fg);
}
.member-portrait {
  border-radius: var(--radius-md);
  border-color: var(--border);
  box-shadow: none;
}
.member-portrait.tone-1,
.member-portrait.tone-2,
.member-portrait.tone-3 {
  color: var(--accent-fg);
}
.member-badge.playing {
  color: var(--accent);
}
#lobby-empty {
  border-top-color: var(--border);
}
.lobby-filters button {
  border-radius: var(--radius-sm);
}
@media (min-width: 701px) {
  #lobby-art {
    height: 300px;
    object-position: 50% 26%;
  }
  .ticket-body h2 {
    font-size: var(--xl);
  }
}
@media (max-width: 600px) {
  .brand {
    padding: var(--s1);
  }
  #location {
    padding: var(--s2) var(--s3);
  }
  #location h1 {
    margin-top: var(--s1);
  }
  #minimap {
    width: 120px;
  }
  .header-actions {
    gap: 0;
  }
  #lobby-title {
    letter-spacing: -1.8px;
  }
  #lobby-art {
    max-height: 240px;
    object-position: 50% 27%;
  }
  #npc-dialog {
    border-radius: var(--radius-md);
  }
}