:root {
  color-scheme: light dark;
  --bg: #f3f3f3;
  --ink: #111;
  --muted: #555;
  --line: #111;
  --panel: #fff;
  --soft: #e2e2e2;
  --red: #e00000;
  --red-dark: #780000;
  --red-hot: #ff4040;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
}

.game-shell {
  width: min(100% - 24px, 980px);
  margin: 0 auto;
  padding: 24px 0 40px;
}

.game-nav {
  display: flex;
  margin-bottom: 18px;
}

.game-nav a,
.game-nav button,
.game-card b,
.custom-actions button,
.shop-item {
  border: 2px solid var(--line);
  color: var(--ink);
  background: var(--soft);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.game-nav a,
.game-nav button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
}

.game-nav {
  align-items: center;
  gap: 8px;
}

.nav-spacer {
  flex: 1;
}

.auth-status {
  font-weight: 700;
}

.hero {
  margin-bottom: 18px;
}

.hero p,
.panel-heading p,
.name-field span,
.login-form span,
.custom-shop label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.hub-hero h1 {
  font-size: clamp(3rem, 12vw, 7rem);
}

.button-stage,
.shop-panel,
.leaderboard-panel,
.game-panel {
  margin-top: 18px;
  padding: 16px;
  border: 2px solid var(--line);
  background: var(--panel);
}

.button-stage {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.game-card {
  display: grid;
  align-content: start;
  min-height: 190px;
  padding: 14px;
  border: 2px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
}

.game-card:hover,
.game-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.game-icon {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border: 2px solid var(--line);
  color: #fff;
  background: var(--red);
}

.game-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

.game-card strong {
  font-size: 1.35rem;
}

.game-card small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.game-card b {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: 32px;
  margin-top: 16px;
  padding: 0 12px;
}

.game-card-soon {
  opacity: 0.72;
}

.game-card-soon .game-icon {
  color: var(--ink);
  background: #ddd;
}

.name-field {
  display: grid;
  width: min(100%, 320px);
}

.name-field input,
.login-form input,
.custom-shop input {
  min-height: 40px;
  border: 2px solid var(--line);
  padding: 0 10px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  font-weight: 700;
}

.name-field input {
  text-align: center;
}

.big-button {
  display: grid;
  place-items: center;
  width: min(68vw, 320px);
  aspect-ratio: 1;
  border: 5px solid #111;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  background: var(--red);
  box-shadow: 0 14px 0 var(--red-dark);
  transform: translateY(0);
}

.big-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.big-button:hover {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.big-button:active {
  transform: translateY(12px);
  box-shadow: 0 2px 0 var(--red-dark);
}

.big-button[data-style="orange"] {
  --red: #ff7a18;
  --red-dark: #a83f00;
}

.big-button[data-style="yellow"] {
  --red: #ffd64d;
  --red-dark: #b57900;
  color: #111;
}

.big-button[data-style="green"] {
  --red: #34d058;
  --red-dark: #17672a;
}

.big-button[data-style="cyan"] {
  --red: #26d8f0;
  --red-dark: #087f95;
  color: #111;
}

.big-button[data-style="blue"] {
  --red: #287cff;
  --red-dark: #123d90;
}

.big-button[data-style="purple"] {
  --red: #8f45ff;
  --red-dark: #48208f;
}

.big-button[data-style="pink"] {
  --red: #ff4fad;
  --red-dark: #921751;
}

.big-button[data-style="white"] {
  --red: #fff;
  --red-dark: #888;
  color: #111;
}

.big-button[data-style="black"] {
  --red: #111;
  --red-dark: #000;
}

.big-button[data-style="gold"] {
  --red: #f5b800;
  --red-dark: #956600;
  color: #111;
}

.big-button.is-custom-style {
  color: var(--button-custom-ink, #fff);
  background: var(--button-custom-bg);
}

.big-button span {
  font-size: clamp(2.4rem, 10vw, 5rem);
  font-weight: 900;
  letter-spacing: 0;
}

.player-count,
.error {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.error {
  color: #b00000;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.shop-item,
.custom-actions button {
  min-height: 64px;
  cursor: pointer;
}

.shop-item {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 8px;
}

.shop-item:disabled,
.custom-actions button:disabled,
.plain-actions button:disabled,
.score-row:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.swatch {
  width: 26px;
  aspect-ratio: 1;
  border: 2px solid var(--line);
  background: var(--swatch);
}

.shop-item strong {
  text-transform: capitalize;
}

.shop-item small {
  color: var(--muted);
  font-weight: 700;
}

.custom-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.custom-shop label {
  display: grid;
  gap: 6px;
}

.login-form {
  display: grid;
  gap: 12px;
  max-width: 360px;
}

.login-form label {
  display: grid;
  gap: 6px;
}

.custom-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--line);
}

.panel-heading h2 {
  margin: 0 0 6px;
  font-size: 1.6rem;
}

.leaderboard {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border: 2px solid var(--line);
  background: var(--soft);
}

.leaderboard strong,
.leaderboard span {
  font-weight: 700;
}

.leaderboard small {
  color: var(--muted);
  font-weight: 700;
}

.doom-frame {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 420px;
  border: 2px solid var(--line);
  background: #000;
  color: #fff;
}

.doom-frame .dosbox-container {
  width: min(100%, 800px) !important;
  height: min(62vw, 500px) !important;
}

.doom-frame .dosbox-container canvas {
  image-rendering: pixelated;
}

.doom-frame .dos-root {
  width: 100%;
  min-height: 420px;
}

.plain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.plain-actions button,
.score-row,
.die {
  border: 2px solid var(--line);
  color: var(--ink);
  background: var(--soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.plain-actions button {
  min-height: 38px;
  padding: 0 12px;
}

.key-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.key-table caption {
  margin-bottom: 6px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
}

.key-table th,
.key-table td {
  border: 2px solid var(--line);
  padding: 8px;
  text-align: left;
}

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

.die {
  min-height: 84px;
  font-size: 2.4rem;
}

.die.is-held {
  color: #fff;
  background: #111;
}

.score-grid {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.score-row,
.score-total,
.score-history li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  text-align: left;
}

.score-total,
.score-history li {
  border: 2px solid var(--line);
  background: var(--panel);
  font-weight: 700;
}

.score-summary {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.score-history {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --ink: #eee;
    --muted: #aaa;
    --line: #eee;
    --panel: #191919;
    --soft: #252525;
  }
}

@media (max-width: 560px) {
  .game-shell {
    width: min(100% - 16px, 980px);
    padding-top: 16px;
  }

  .button-stage,
  .leaderboard-panel,
  .game-panel,
  .shop-panel {
    padding: 12px;
  }

  .game-grid,
  .shop-grid,
  .custom-shop,
  .custom-actions {
    grid-template-columns: 1fr;
  }

  .leaderboard li {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
  }
}