/* Game page is 3 columns: build | hero | party or replay. Solo without a party uses replay on the right. */
.theme-hud {
  --bg: #0a0c11;
  --elev: rgba(16, 18, 26, 0.72);
  --soft: rgba(24, 27, 36, 0.8);
  --border: rgba(236, 224, 198, 0.14);
  --text: #f4f0e6;
  --muted: #a8b0bf;
  --dim: #7d8696;
  --accent: #e2c07a;
  --accent-soft: rgba(226, 192, 122, 0.14);
  --danger: #d99a92;
  --radius: 18px;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --max: 1280px;
  --panel:
    linear-gradient(180deg, rgba(22, 25, 34, 0.78), rgba(10, 12, 18, 0.82));
}
body.theme-hud {
  font-family: var(--font);
  color: var(--text);
  background: #090b10;
}
body.theme-hud #art-background {
  opacity: 0.84;
  filter: saturate(0.98) contrast(1.04) brightness(1.38);
}
body.theme-hud #art-background::after {
  background:
    linear-gradient(90deg, rgba(8, 10, 16, 0.08), rgba(8, 10, 16, 0.26) 22%, rgba(8, 10, 16, 0.26) 78%, rgba(8, 10, 16, 0.08)),
    linear-gradient(180deg, rgba(8, 10, 16, 0.02), rgba(8, 10, 16, 0.34));
}
.theme-hud .site {
  max-width: var(--max);
  padding: 16px 20px 64px;
}
.theme-hud .site-header { margin-bottom: 12px; }
.theme-hud .logo {
  padding: 4px 14px 4px 4px;
  border-radius: 14px;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  backdrop-filter: blur(12px);
}
.theme-hud .logo-card {
  width: 38px;
  height: 38px;
  object-fit: contain;
  object-position: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.theme-hud .logo-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #f7f1e4;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.theme-hud .logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  clip-path: none;
  background: var(--accent);
  color: #1a140c;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 650;
  box-shadow: none;
}
.theme-hud .logo-name em { color: var(--accent); font-style: italic; }
.theme-hud .chip-button {
  border-radius: 999px;
  background: rgba(10, 12, 18, 0.62);
  border-color: var(--border);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.78rem;
  font-family: var(--font);
}
.theme-hud .chip-button.active,
.theme-hud .chip-button:hover {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.theme-hud .hero-copy,
.theme-hud .game-card,
.theme-hud .recent-card,
.theme-hud .build-panel,
.theme-hud .result-card,
.theme-hud .side-card,
.theme-hud .empty-roll,
.theme-hud .class-guide,
.theme-hud details.soft,
.theme-hud .sheet {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.theme-hud .hero-copy::before,
.theme-hud .build-panel::before,
.theme-hud .result-card::before,
.theme-hud .side-card::before,
.theme-hud .empty-roll::before,
.theme-hud .class-guide::before,
.theme-hud .game-hero::before { content: none; }
.theme-hud .hero { margin-bottom: 14px; }
.theme-hud .hero-copy {
  display: grid;
  grid-template-columns: minmax(92px, 18%) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 8px;
  align-items: center;
  padding: 14px 18px 14px 12px;
  text-align: left;
}
.theme-hud .hero-logo {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 100%;
  height: 100%;
  max-height: 168px;
  object-fit: contain;
  object-position: center;
  justify-self: center;
  align-self: stretch;
  background: transparent;
}
.theme-hud .hero-heading {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  min-width: 0;
}
.theme-hud .hero-copy h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5.4vw, 3.8rem);
  line-height: 0.92;
  white-space: nowrap;
}
.theme-hud .hero-dash,
.theme-hud .hero-kicker {
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.theme-hud .hero-dash { flex-shrink: 0; }
.theme-hud .hero-kicker { white-space: nowrap; }
.theme-hud .hero-copy p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
  text-align: justify;
  text-align-last: left;
}
.theme-hud .hero-actions {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
  gap: 8px;
}
.theme-hud .hero-actions .btn { padding: 8px 14px; font-size: 0.82rem; }
@media (max-width: 860px) {
  .theme-hud .hero-copy {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
    padding: 10px 14px 14px 10px;
  }
  .theme-hud .hero-logo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
    max-height: none;
    align-self: start;
    object-position: top center;
  }
  .theme-hud .hero-heading {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.35em;
    row-gap: 2px;
  }
  .theme-hud .hero-copy h1 {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }
  .theme-hud .hero-dash {
    grid-column: 2;
    grid-row: 1;
  }
  .theme-hud .hero-kicker {
    grid-column: 1 / 3;
    grid-row: 2;
    white-space: normal;
  }
  .theme-hud .hero-copy p {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .theme-hud .hero-copy p.storage-warn { grid-row: 4; }
  .theme-hud .hero-actions {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}
.theme-hud .eyebrow {
  color: var(--accent);
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.theme-hud .result-kicker,
.theme-hud .side-card h3,
.theme-hud .section-label,
.theme-hud .col-title {
  color: var(--accent);
  font-family: var(--font);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
.theme-hud .hero h1,
.theme-hud .result-title,
.theme-hud .game-title,
.theme-hud .screen-title {
  font-family: var(--serif);
  background: none;
  -webkit-background-clip: unset;
  color: var(--text);
  letter-spacing: -0.03em;
  text-shadow: none;
}
.theme-hud .btn {
  border-radius: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 650;
}
.theme-hud .btn-primary {
  background: var(--accent);
  color: #1a140c;
  box-shadow: 0 10px 24px rgba(226, 192, 122, 0.18);
}
.theme-hud .btn-secondary {
  background: rgba(10, 12, 18, 0.45);
  border: 1px solid var(--border);
  color: var(--text);
}
.theme-hud .btn-ghost {
  border: 0;
  background: transparent;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.theme-hud .btn-ghost:hover { color: var(--text); filter: none; transform: none; }
.theme-hud .search {
  border-radius: 12px;
  background-color: rgba(10, 12, 18, 0.7);
}
.theme-hud .recent-forget {
  background: rgba(8, 10, 16, 0.88);
  border-color: var(--border);
  color: var(--dim);
  border-radius: 10px;
}
.theme-hud .recent-forget:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-hud .section-head .btn-ghost {
  flex: none;
  padding: 4px 8px;
  font-size: 0.75rem;
}
.theme-hud .recents-tabs .chip-button {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-hud .recents-head-desktop .recents-clear {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.theme-hud .recents-head-desktop .recents-clear svg {
  display: block;
}
.theme-hud .recents-clear { color: var(--muted); }
.theme-hud .recents-clear:hover { color: var(--text); }
.theme-hud .recents-clear-all {
  color: var(--muted);
  font-weight: 650;
}
.theme-hud .recents-clear-all:hover { color: var(--text); }
.theme-hud .recent-list {
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.theme-hud .game-card,
.theme-hud .recent-card {
  min-height: 104px;
  background:
    radial-gradient(160px 90px at 0% 0%, color-mix(in srgb, var(--game) 18%, transparent), transparent 70%),
    var(--panel);
}
.theme-hud .game-accent {
  width: 2px;
  background: var(--game, var(--accent));
  box-shadow: none;
}
.theme-hud .crossplay-badge,
.theme-hud .archetype-chip { color: var(--accent); }

.theme-hud .topbar { gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.theme-hud .topbar-copy { min-width: 0; flex: 1; }
.theme-hud .topbar .names-tool { margin-left: auto; }
.theme-hud .back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--elev);
  border-color: var(--border);
  color: var(--text);
}
.theme-hud .screen-title { font-size: 1.35rem; font-weight: 600; }
.theme-hud .hud-meta { margin-top: 6px; }

.theme-hud .game-layout {
  grid-template-columns: minmax(253px, 0.667fr) minmax(320px, 1.4fr) minmax(247px, 0.863fr);
  gap: 16px;
  align-items: start;
}
.theme-hud .build-panel {
  margin: 0;
  padding: 16px 16px 14px;
}
.theme-hud .build-panel .hint { margin: 0 0 12px; font-size: 0.8rem; }
.theme-hud .filter-row,
.theme-hud .quick-control {
  margin: 0 0 6px;
  padding: 10px 12px;
  min-height: 48px;
  border-radius: 12px;
  border-color: rgba(236, 224, 198, 0.1);
  background: rgba(8, 10, 16, 0.38);
}
.theme-hud .filter-row:hover,
.theme-hud .toggle-row.active { border-color: var(--accent); }
.theme-hud .field-icon { display: none; }
.theme-hud .filter-label { font-size: 0.68rem; }
.theme-hud .filter-value { font-weight: 650; }
.theme-hud .toggle-row.active .toggle-dot { background: var(--accent); }
.theme-hud .tip-wrap .tip {
  border-color: var(--border);
  background: #12141c;
  border-radius: 12px;
}
.theme-hud .roll-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0 0;
}
.theme-hud .roll-bar .btn-primary,
.theme-hud .roll-bar .btn-secondary { flex: none; padding: 14px 12px; }
.theme-hud .roll-hint { margin: 8px 0 0; }
.theme-hud .d20-badge { display: none; }

.theme-hud .names-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  justify-content: flex-end;
}
.theme-hud .names-example {
  font-size: 0.78rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-hud .names-example.read-plaque {
  padding: 10px 14px;
  background: #1f2330;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #5a4e32);
  box-shadow: 0 1px 0 rgba(226, 192, 122, 0.22), 0 10px 28px rgba(0, 0, 0, 0.75);
}
.theme-hud .names-example .is-on {
  color: var(--accent);
  font-weight: 650;
}
.theme-hud .names-arrow { color: var(--dim); }

.theme-hud .class-guide { padding: 16px 16px 14px; }
.theme-hud .guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.theme-hud .guide-head > div:first-child {
  min-width: 0;
  flex: 1;
}
.theme-hud .guide-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4em;
  row-gap: 0.12em;
  white-space: normal;
}
.theme-hud .guide-kicker-name,
.theme-hud .guide-kicker-sep {
  flex: 0 0 auto;
}
.theme-hud .guide-kicker-rest {
  flex: 1 1 11rem;
  min-width: min(100%, 11rem);
}
.theme-hud .guide-head .hint { margin: 6px 0 0; }
.theme-hud .class-list { display: grid; gap: 8px; }
.theme-hud .class-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(8, 10, 16, 0.38);
}
.theme-hud .class-card.is-picked { border-color: var(--accent); }
.theme-hud .class-card-main {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.theme-hud .class-card-title { font-weight: 650; font-size: 1rem; }
.theme-hud .class-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.theme-hud .class-card.encyclopedia .class-card-blurb {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-hud .class-card-access {
  margin: 0;
  color: var(--dim);
  font-size: 0.75rem;
}
.theme-hud .class-card.encyclopedia .class-card-main {
  cursor: default;
}
.theme-hud .class-card.encyclopedia .class-card-actions {
  grid-template-columns: 1fr 1.2fr;
  padding: 0 14px 12px;
}
.theme-hud .guide-roles {
  margin-top: 10px;
}
.theme-hud .guide-kinds { margin-top: 10px; }
.theme-hud .class-card-slang,
.theme-hud .class-card-specs,
.theme-hud .result-slang,
.theme-hud .replay-applied {
  margin: 0;
  color: var(--dim);
  font-size: 0.75rem;
}
.theme-hud .class-card-specs { color: var(--muted); }
.theme-hud .replay-card {
  overflow: visible;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background:
    radial-gradient(240px 140px at 100% 0%, var(--accent-soft), transparent 68%),
    var(--panel);
}
.theme-hud .replay-card-focus {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.theme-hud .replay-card h3 {
  margin: 2px 0 6px;
  color: var(--accent);
}
.theme-hud .replay-card > .hint { margin: 0 0 12px; }
.theme-hud .replay-harsh { overflow: visible; }
.theme-hud .replay-harsh .chip-button.tip-wrap {
  cursor: pointer;
  overflow: visible;
}
.theme-hud .replay-harsh .tip {
  width: min(240px, 68vw);
  left: 0;
  transform: none;
  text-transform: none;
  letter-spacing: 0;
}
.theme-hud .replay-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
.theme-hud .replay-count b {
  min-width: 1.2em;
  text-align: center;
  color: var(--text);
}
.theme-hud .replay-slots {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  overflow: visible;
}
.theme-hud .replay-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.theme-hud .replay-slot:hover,
.theme-hud .replay-slot:focus-within { z-index: 6; }
.theme-hud .replay-pick {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0c0e14;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
}
.theme-hud .replay-pick.tip-wrap { cursor: pointer; }
.theme-hud .replay-pick .chev { flex-shrink: 0; color: var(--dim); }
.theme-hud .replay-pick .tip {
  width: min(260px, 70vw);
  left: 0;
  transform: none;
}
.theme-hud .replay-pick:hover { border-color: var(--accent); }
.theme-hud .replay-pick-copy {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.theme-hud .replay-pick-index {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}
.theme-hud .replay-pick-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.theme-hud .replay-pick-hint {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.82rem;
}
.theme-hud .replay-pick-edit {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, #12141c);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
  line-height: 1.2;
}
.theme-hud .replay-slot-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
}
.theme-hud .replay-slot-actions .icon-btn {
  width: 36px;
  height: auto;
  min-height: 44px;
}
.theme-hud .replay-applied {
  margin: 8px 0 0;
  color: var(--dim);
  font-size: 0.75rem;
}
.theme-hud .cross-roles { margin-top: 14px; }
.theme-hud .names-legend {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4bba8;
}
.theme-hud .read-plaque {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, #3a3428);
  background: #0c0e14;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(226, 192, 122, 0.12), 0 10px 28px rgba(0, 0, 0, 0.65);
}
.theme-hud .site-footer .read-plaque {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  line-height: 1.45;
  color: var(--text);
}
.theme-hud .site-footer .read-plaque-wide {
  text-wrap: pretty;
}
.theme-hud .class-card-body {
  padding: 0 14px 12px;
  display: grid;
  gap: 8px;
}
.theme-hud .class-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
}
.theme-hud .result-head .segmented {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theme-hud .hud-build,
.theme-hud .hud-center {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-content: start;
}
.theme-hud .hud-side { min-width: 0; }
.theme-hud .hud-center details.soft { margin: 0; }
.theme-hud .hud-build .side-card,
.theme-hud .hud-center .side-card { margin-bottom: 0; }
.theme-hud .build-quiz { margin-top: 8px; }
.theme-hud #apply-build { margin-top: 8px; }
.theme-hud .empty-roll {
  min-height: 280px;
  display: grid;
  place-content: center;
  text-align: left;
  padding: 28px 24px;
}
.theme-hud .empty-roll .result-kicker { margin-bottom: 8px; }
.theme-hud .empty-roll p { margin: 0; max-width: 36ch; color: var(--muted); line-height: 1.5; }
.theme-hud .result-card {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    radial-gradient(420px 180px at 0% 0%, var(--accent-soft), transparent 58%),
    var(--panel);
}
.theme-hud .result-title { font-size: 1.45rem; margin: 4px 0 14px; }
.theme-hud .result-pick {
  border-radius: 12px;
  background: rgba(8, 10, 16, 0.4);
}
.theme-hud .icon-btn {
  border-radius: 11px;
  background: rgba(10, 12, 18, 0.7);
}
.theme-hud .weapon-chip,
.theme-hud .access-badge,
.theme-hud .pack-chip,
.theme-hud .game-chip,
.theme-hud .platform-badge {
  border-radius: 999px;
  border-color: var(--border);
  background: rgba(8, 10, 16, 0.4);
}
.theme-hud .status-chip.status-closing { color: var(--accent); }
.theme-hud .service-note { margin: 6px 0 0; opacity: 0.8; }
.theme-hud .combo-note {
  border-radius: 14px;
  background: rgba(8, 10, 16, 0.32);
}
.theme-hud .combo-note.plus b { color: var(--accent); }
.theme-hud .combo-note.minus b { color: var(--danger); }
.theme-hud .first-hour b { color: var(--accent); }
.theme-hud .party-slot {
  border-radius: 14px;
  border-color: var(--border);
  background: rgba(8, 10, 16, 0.32);
}
.theme-hud .missing-roles {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 12px;
}
.theme-hud .site-footer {
  display: block;
  text-align: left;
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.75rem;
}
.theme-hud .deal-back {
  background:
    radial-gradient(120px 80px at 50% 18%, rgba(255, 248, 230, 0.16), transparent 62%),
    repeating-linear-gradient(135deg, rgba(226, 192, 122, 0.16) 0 10px, transparent 10px 18px),
    linear-gradient(165deg, #2a2418, #12141c 58%, #0c0d12);
}
.theme-hud .deal-front {
  background:
    radial-gradient(90% 70% at 50% 28%, var(--accent-soft), transparent 64%),
    linear-gradient(180deg, #1c1a16, #0e1016);
}
.theme-hud .toast {
  background: #12141c;
  border-color: var(--accent);
}
.theme-hud .sheet {
  background:
    radial-gradient(350px 180px at 50% 0%, var(--accent-soft), transparent),
    #14161e;
}
.theme-hud .sheet-head { background: #14161e; }
.theme-hud .quiz-game-select {
  background: rgba(8, 10, 16, 0.7);
  border-color: var(--border);
  color: var(--text);
  color-scheme: dark;
}
@media (max-width: 1080px) {
  .theme-hud .game-layout { grid-template-columns: 1fr 1fr; }
  .theme-hud .hud-side { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .theme-hud .game-layout,
  .theme-hud .roll-bar { grid-template-columns: 1fr; }
  .theme-hud .topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
  }
  .theme-hud .topbar .back { grid-column: 1; grid-row: 1; }
  .theme-hud .topbar-copy { grid-column: 2; grid-row: 1; }
  .theme-hud .topbar .names-tool {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    width: 100%;
    gap: 6px;
  }
  .theme-hud .names-toggle-desktop { display: none; }
  .theme-hud .inline-menu-host {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 1 auto;
    min-width: 0;
  }
  .theme-hud .names-toggle-compact {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.72rem;
  }
  .theme-hud .names-toggle { flex: 0 0 auto; }
  .theme-hud .names-toggle .chip-button {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }
  .theme-hud .names-example,
  .theme-hud .names-example.read-plaque {
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    padding: 6px 8px;
    font-size: 0.68rem;
    gap: 4px;
    flex-wrap: wrap;
  }
  .theme-hud .names-example span {
    white-space: nowrap;
  }
  .theme-hud .hud-meta { flex-wrap: wrap; }
  .theme-hud .replay-pick {
    min-width: 0;
    padding: 8px 8px;
    gap: 6px;
  }
  .theme-hud .replay-pick-value { font-size: 0.74rem; }
  .theme-hud .replay-slot-actions .icon-btn {
    width: 32px;
    min-width: 32px;
    min-height: 40px;
  }
}