:root {
  --bg: #050506;
  --panel-top: #1b2d63;
  --panel-bottom: #080f25;
  --gold: #c3a56c;
  --gold-bright: #f0bd3b;
  --gold-hot: #fff4c4;
  --gold-dim: #7e6a48;
  --frost: #d9e4ea;
  --muted: #9cabaf;
  --danger: #7d2723;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--frost);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 5%, rgba(240, 189, 59, 0.10), transparent 26%),
    radial-gradient(circle at 78% -10%, rgba(80, 115, 210, 0.30), transparent 42%),
    linear-gradient(135deg, #020204, var(--bg));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 82%);
}

button, input { font: inherit; }

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold-hot);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

#game {
  width: 100vw;
  height: 100vh;
  display: block;
}

.screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 6%, rgba(199, 163, 90, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(6, 8, 11, 0.96), rgba(12, 17, 22, 0.98));
}

.panel {
  position: relative;
  width: min(880px, calc(100vw - 32px));
  padding: 34px;
  border: 1px solid rgba(219, 188, 103, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, black 50%, rgba(8, 15, 37, 0.96)),
    radial-gradient(circle at 35% 16%, rgba(199, 163, 90, 0.18), transparent 38%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 232, 169, 0.08),
    inset 0 0 42px rgba(0, 0, 0, 0.34);
}

.panel::before,
.side-menu::before,
.hint-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(199, 163, 90, 0.34);
  border-radius: 5px;
}

.title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  text-align: center;
}

.title-row img {
  width: min(520px, 100%);
  max-height: 350px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}

h1, h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 2px 4px #000;
}

.muted {
  color: var(--muted);
  line-height: 1.45;
}

.player-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

input {
  min-width: 0;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--gold-bright);
  background: rgba(5, 7, 10, 0.76);
  outline: none;
}

input:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(226, 201, 121, 0.16);
}

.button-grid,
.house-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.button-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.house-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mode-btn,
.house-card,
.primary-btn,
.secondary-btn,
.menu-button {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, var(--panel-top), var(--panel-bottom)),
    linear-gradient(90deg, transparent, rgba(199, 163, 90, 0.08), transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.045), 0 8px 18px rgba(0,0,0,0.28);
  text-shadow: 0 2px 3px #000;
}

.mode-btn,
.primary-btn,
.secondary-btn {
  padding: 14px 20px;
}

.primary-btn.accent {
  background:
    linear-gradient(180deg, rgba(87, 26, 25, 0.96), rgba(24, 12, 13, 0.98)),
    linear-gradient(90deg, transparent, rgba(226, 201, 121, 0.10), transparent);
}

.mode-btn:hover,
.house-card:hover,
.primary-btn:hover,
.secondary-btn:hover,
.menu-button:hover,
.menu-button.is-selected {
  border-color: var(--gold-hot);
  box-shadow: inset 0 0 0 1px rgba(226, 201, 121, 0.28), 0 0 18px rgba(199, 163, 90, 0.22);
}

.mode-btn.is-disabled,
.mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.mode-btn span {
  color: #aebabe;
  font-size: 12px;
}

.house-card {
  min-height: 190px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  text-transform: uppercase;
}

.house-card img {
  width: 92px;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.55));
}

.side-menu {
  display: none;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 320px;
  z-index: 20;
  padding: 34px 24px 24px;
  flex-direction: column;
  overflow: hidden;
  border-left: 3px double var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(27, 45, 99, 0.88), rgba(8, 15, 37, 0.98)),
    radial-gradient(circle at center, rgba(199, 163, 90, 0.12), transparent 58%);
  box-shadow: -14px 0 44px #000d, inset 0 0 0 1px rgba(255, 232, 169, 0.08);
}

.side-menu h2 {
  margin-bottom: 10px;
  text-align: center;
  font-size: 22px;
}

.title-ornament {
  display: block;
  width: min(240px, 88%);
  height: 28px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 7px rgba(240, 189, 59, 0.18));
}

.menu-scroll {
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 16px 2px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 189, 59, 0.72) rgba(8, 15, 37, 0.64);
}

.menu-scroll::-webkit-scrollbar { width: 9px; }
.menu-scroll::-webkit-scrollbar-track {
  background: rgba(8, 15, 37, 0.64);
  border: 1px solid rgba(126, 106, 72, 0.45);
  border-radius: 999px;
}
.menu-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-hot), var(--gold-bright), var(--gold-dim));
  border-radius: 999px;
  border: 2px solid rgba(8, 15, 37, 0.92);
}

.menu-button {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  margin-bottom: 12px;
  padding: 12px 16px 12px 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.menu-button img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  background: #090b0d;
}

.menu-label {
  display: block;
  overflow-wrap: anywhere;
}

.menu-action {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 22px;
}

.battle-bar {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 12;
  width: min(680px, calc(100vw - 430px));
  min-width: 420px;
  transform: translateX(-50%);
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-areas: "player center pass opponent";
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(199, 163, 90, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(10, 13, 18, 0.86), rgba(5, 8, 12, 0.92)),
    radial-gradient(circle at 50% 0%, rgba(240, 189, 59, 0.12), transparent 58%);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255,255,255,0.045);
  backdrop-filter: blur(10px);
}

.battle-side,
.battle-center {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.battle-side { grid-area: player; }
.battle-center { grid-area: center; }
.battle-side.is-opponent { grid-area: opponent; text-align: right; }
.battle-bar .pass-turn { grid-area: pass; }

.battle-center {
  min-width: 116px;
  padding: 5px 12px;
  border-inline: 1px solid rgba(199, 163, 90, 0.28);
  text-align: center;
}

.battle-side span,
.battle-center span,
.battle-side small {
  overflow: hidden;
  color: #aebabe;
  font-size: 11px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.battle-side strong,
.battle-center strong {
  overflow: hidden;
  color: #f0dfad;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-legend {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  max-width: min(720px, calc(100vw - 352px));
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(199, 163, 90, 0.42);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.72);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

.tactical-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.54);
  color: #cfd7d9;
  font-size: 12px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
}

.swatch.is-move { color: #40ff90; background: #40ff90; }
.swatch.is-protect { color: #2f8cff; background: #2f8cff; }
.swatch.is-guarded { color: #9b5cff; background: #9b5cff; }
.swatch.is-danger { color: #ff3030; background: #ff3030; }
.swatch.is-attack { color: #ff8a1f; background: #ff8a1f; }
.swatch.is-attack-risk { color: #ff5a1f; background: linear-gradient(135deg, #ff8a1f 0 50%, #ff2a2a 50% 100%); }
.swatch.is-risk {
  box-sizing: border-box;
  background: #ff2a2a;
  border: 2px solid #ffd2d2;
  border-left-color: #ff2a2a;
  box-shadow: 0 0 10px rgba(255, 48, 48, 0.82);
}
.swatch.is-threat { color: #ffd21c; background: #ffd21c; }

.hint-card {
  position: fixed;
  left: 16px;
  top: 16px;
  width: 380px;
  z-index: 10;
  padding: 24px 24px 20px;
  border: 1px solid rgba(199, 163, 90, 0.64);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(27,45,99,.76), rgba(8,15,37,.92)),
    radial-gradient(circle at 10% 0%, rgba(199, 163, 90, 0.12), transparent 36%);
  box-shadow: 0 12px 36px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,0.045);
  backdrop-filter: blur(8px);
}

.hud-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.hud-top h1 {
  min-width: 0;
  margin: 0;
  font-size: 18px;
}

.hud-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hud-actions .secondary-btn {
  width: 54px;
  height: 32px;
  padding: 0;
  font-size: 12px;
}

.hint-card p {
  margin: 6px 0;
  color: #c8d0d1;
  font-size: 13px;
  line-height: 1.45;
}

.hud input {
  width: 100%;
  margin: 0 0 8px;
  padding: 7px 9px;
  font-size: 13px;
}

.turn-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(199, 163, 90, 0.42);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.58);
}

.turn-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0dfad;
  font-size: 12px;
}

.turn-strip span:last-child {
  color: #aebabe;
}

.status {
  margin-top: 10px !important;
  color: #f0dfad !important;
  font-size: 13px;
}

.threat-status {
  color: #ffb4a8 !important;
  font-size: 12px;
}

.game-tips {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(199, 163, 90, 0.28);
  color: #d9d0b2;
  font-size: 12px;
  line-height: 1.38;
}

.game-tips div {
  padding-left: 10px;
  border-left: 2px solid rgba(199, 163, 90, 0.48);
}

.battle-log {
  display: none;
  gap: 6px;
  max-height: 116px;
  margin-top: 12px;
  padding-top: 10px;
  overflow: auto;
  border-top: 1px solid rgba(199, 163, 90, 0.28);
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 189, 59, 0.72) rgba(8, 15, 37, 0.64);
}

.battle-log.has-events {
  display: grid;
}

.battle-log div {
  padding: 7px 9px;
  border: 1px solid rgba(199, 163, 90, 0.28);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.54);
  color: #cfd7d9;
  font-size: 12px;
  line-height: 1.35;
}

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

.rules-grid section {
  padding: 12px;
  border: 1px solid rgba(199, 163, 90, 0.42);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.58);
}

.rules-grid h3 {
  margin: 0 0 6px;
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  text-transform: uppercase;
}

.rules-grid p {
  margin: 0;
  color: #c4ced2;
  font-size: 13px;
  line-height: 1.45;
}


.modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(8px);
}

.modal .panel {
  width: min(600px, calc(100vw - 32px));
}

.modal ul {
  margin: 14px 0 18px;
  padding-left: 20px;
  color: #c4ced2;
  line-height: 1.55;
}

.ranking-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 18px;
  max-height: 360px;
  overflow: auto;
}

.ranking-subtitle {
  margin: 20px 0 0;
  color: var(--gold-bright, #dbb867);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ranking-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(199, 163, 90, 0.48);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.62);
  color: #f0dfad;
}

.ranking-row span {
  color: #b8c4c8;
  font-size: 13px;
}

.game-over-overlay,
.ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(8px);
}

.game-over-panel,
.ranking-modal {
  position: relative;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(199, 163, 90, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 18, 24, 0.98), rgba(5, 8, 12, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(199, 163, 90, 0.16), transparent 42%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), inset 0 0 0 1px rgba(255, 232, 169, 0.08);
}

.game-over-panel::before,
.ranking-modal::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(199, 163, 90, 0.32);
  border-radius: 5px;
}

.game-over-kicker {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.game-over-panel h2,
.ranking-modal h2 {
  margin: 6px 0 10px;
  font-size: 34px;
}

.game-over-overlay.is-victory .game-over-panel h2 {
  color: #f0bd3b;
}

.game-over-overlay.is-defeat .game-over-panel h2 {
  color: #ff9d8f;
}

.game-over-summary {
  margin: 0;
  color: #d7e0e3;
  line-height: 1.45;
}

.game-over-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}

.game-over-stats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(199, 163, 90, 0.42);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.62);
}

.game-over-stats strong,
.game-over-stats span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-over-stats strong {
  color: #f0dfad;
  font-size: 18px;
}

.game-over-stats span {
  color: #aebabe;
  font-size: 12px;
}

.game-over-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ranking-modal .close-btn,
.ranking-modal .clear-btn,
.ranking-modal .details-btn,
.ranking-modal .close-details-btn {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--gold-bright);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
}

.ranking-modal .clear-btn {
  margin-left: 8px;
}

.ranking-modal ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.ranking-modal li {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(199, 163, 90, 0.42);
  border-radius: 6px;
  background: rgba(7, 10, 13, 0.62);
  color: #f0dfad;
}

.ranking-modal li span {
  color: #b8c4c8;
  font-size: 13px;
}

@media (max-width: 720px) {
  .button-grid,
  .house-grid,
  .player-row {
    grid-template-columns: 1fr;
  }

  .panel,
  .modal .panel {
    padding: 28px;
  }

  .house-card {
    min-height: 120px;
    flex-direction: row;
  }

  .house-card img {
    width: 72px;
    height: 96px;
  }

  .side-menu {
    width: min(320px, 86vw);
    padding: 34px 22px 22px;
  }

  .hint-card {
    width: calc(100vw - 32px);
    padding: 22px 20px 18px;
  }

  .battle-bar {
    top: auto;
    bottom: 16px;
    width: calc(100vw - 32px);
    min-width: 0;
    grid-template-columns: 1fr;
  }

  .battle-side,
  .battle-side.is-opponent,
  .battle-center {
    text-align: left;
  }

  .battle-center {
    min-width: 0;
    border-block: 1px solid rgba(199, 163, 90, 0.28);
    border-inline: 0;
  }

  .tactical-legend {
    display: none !important;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .ranking-row {
    grid-template-columns: 28px 1fr;
  }

  .game-over-stats,
  .game-over-actions {
    grid-template-columns: 1fr;
  }
}

/* AAA key art pass: generated matte supplies the theatrical frame and banners. */
#start-screen .panel {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 12, 0.04), rgba(2, 7, 12, 0.20)),
    url('../../assets/ui/opening-keyart-aa-v2.webp') center / cover no-repeat;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.78);
}

#start-screen .panel::before,
#start-screen .panel::after,
#start-screen .opening-decor {
  display: none;
}

#start-screen .title-row {
  max-width: 940px;
  margin-top: clamp(10px, 1.8vh, 22px);
}

#start-screen .hero-kicker {
  position: relative;
  margin-bottom: 6px;
  color: #f1c46d;
}

#start-screen .hero-kicker::before,
#start-screen .hero-kicker::after {
  content: "";
  display: inline-block;
  width: clamp(32px, 8vw, 120px);
  height: 1px;
  margin: 0 14px 4px;
  background: linear-gradient(90deg, transparent, rgba(241, 196, 109, 0.92));
}

#start-screen .hero-kicker::after {
  transform: scaleX(-1);
}

#start-screen .logo-plaque {
  width: min(790px, 68%);
  min-height: clamp(210px, 30vh, 300px);
  padding: 30px 40px 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

#start-screen .logo-plaque::before,
#start-screen .logo-plaque::after,
#start-screen .logo-sigil {
  display: none;
}

#start-screen .logo-plaque img {
  max-width: 680px;
  max-height: 205px;
  mix-blend-mode: screen;
  opacity: 0.98;
  filter: contrast(1.18) saturate(0.90) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.84));
}

#start-screen .logo-tagline {
  bottom: 9px;
  color: #f4ce79;
  font-size: clamp(9px, 1vw, 14px);
  text-shadow: 0 2px 6px #000;
}

#start-screen .hero-copy {
  max-width: 850px;
  margin-top: clamp(12px, 2.2vh, 22px);
  color: #f4d58d;
  font-size: clamp(25px, 3.15vw, 44px);
}

#start-screen .muted {
  color: #b8cfda;
  font-size: clamp(13px, 1.25vw, 18px);
  text-shadow: 0 2px 8px #000;
}

#start-screen .player-row {
  margin-top: clamp(16px, 2.4vh, 28px);
}

#start-screen .button-grid {
  margin-top: clamp(14px, 2.4vh, 26px);
}

#start-screen .mode-btn {
  overflow: hidden;
  border: 1px solid rgba(241, 196, 109, 0.76);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(2, 7, 13, 0.08), rgba(2, 7, 13, 0.35)),
    url('../../assets/ui/mode-card-aa.webp') center / cover no-repeat;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(240, 189, 89, 0.20);
}

#start-screen .mode-btn::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(240, 189, 89, 0.18);
  border-radius: 5px;
}

#start-screen .mode-btn:hover {
  border-color: #fff0b8;
  background:
    linear-gradient(90deg, rgba(4, 18, 30, 0.02), rgba(4, 18, 30, 0.20)),
    url('../../assets/ui/mode-card-aa.webp') center / cover no-repeat;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.54), 0 0 26px rgba(63, 157, 218, 0.26), inset 0 0 0 1px rgba(255, 240, 184, 0.32);
}

#start-screen .mode-icon {
  border-color: rgba(247, 209, 127, 0.86);
  background: linear-gradient(180deg, rgba(8, 25, 39, 0.90), rgba(3, 10, 18, 0.94));
}

#start-screen .mode-copy {
  color: #f6d78b;
  text-shadow: 0 3px 6px #000;
}

#start-screen .mode-copy small {
  color: #cfdae0;
}

@media (max-width: 1100px) {
  #start-screen .logo-plaque {
    width: min(770px, 76%);
  }
}

@media (max-width: 720px) {
  #start-screen .panel {
    background-position: center top;
  }

  #start-screen .title-row {
    margin-top: 0;
  }

  #start-screen .hero-kicker::before,
  #start-screen .hero-kicker::after {
    width: 26px;
    margin-inline: 7px;
  }

  #start-screen .logo-plaque {
    width: 100%;
    min-height: 160px;
    padding: 22px 16px 28px;
  }

  #start-screen .logo-plaque img {
    max-height: 130px;
  }
}

@media (min-width: 721px) and (max-width: 1160px) {
  .battle-bar {
    left: 410px;
    width: calc(100vw - 760px);
    min-width: 340px;
    transform: none;
  }

  .battle-side strong,
  .battle-center strong {
    font-size: 14px;
  }

  .tactical-legend {
    max-width: calc(100vw - 372px);
  }
}

/* --- AA+ direction: premium toy table / modular fantasy --- */
:root {
  --bg: #08111b;
  --panel-top: #173451;
  --panel-bottom: #0a1827;
  --gold: #f0bd59;
  --gold-bright: #ffd66e;
  --gold-hot: #fff6cf;
  --gold-dim: #8f7140;
  --frost: #e7f2f2;
  --muted: #a9bec5;
  --toy-blue: #1d5b86;
  --toy-cyan: #79d8db;
  --toy-red: #bf4542;
  --toy-shadow: rgba(0, 0, 0, 0.58);
}

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(121, 216, 219, 0.18), transparent 34%),
    radial-gradient(circle at 92% 24%, rgba(240, 189, 59, 0.14), transparent 28%),
    linear-gradient(145deg, #050a10 0%, #0b1622 48%, #071018 100%);
}

body::before {
  opacity: 0.62;
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, black, transparent 92%);
}

.screen {
  padding: clamp(16px, 3vw, 42px);
  background:
    radial-gradient(circle at 50% 0%, rgba(121, 216, 219, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(5, 10, 16, 0.90), rgba(7, 15, 23, 0.97));
}

.panel {
  width: min(960px, calc(100vw - 28px));
  padding: clamp(24px, 4vw, 44px);
  border: 2px solid rgba(240, 189, 89, 0.78);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(24, 55, 83, 0.98), rgba(8, 22, 36, 0.99)),
    radial-gradient(circle at 25% 0%, rgba(121, 216, 219, 0.18), transparent 36%);
  box-shadow:
    0 34px 90px var(--toy-shadow),
    0 0 0 8px rgba(11, 20, 32, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -18px 30px rgba(0, 0, 0, 0.20);
}

.panel::before,
.side-menu::before,
.hint-card::before,
.game-over-panel::before,
.ranking-modal::before {
  inset: 10px;
  border: 1px solid rgba(121, 216, 219, 0.22);
  border-radius: 16px;
}

.panel::after,
.side-menu::after,
.hint-card::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--toy-cyan);
  box-shadow: 18px 0 0 rgba(240, 189, 89, 0.92), 36px 0 0 rgba(191, 69, 66, 0.86);
}

.title-row {
  gap: 10px;
  margin-bottom: 24px;
}

.title-row img {
  width: min(560px, 100%);
  max-height: 250px;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.44));
}

.hero-kicker,
.menu-kicker {
  color: var(--toy-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-kicker {
  text-align: center;
}

.hero-copy {
  margin: 0;
  color: var(--gold-hot);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.26);
}

h1, h2 {
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0.08em;
}

h1 span {
  color: var(--toy-cyan);
}

.button-grid {
  gap: 14px;
}

.mode-btn,
.house-card,
.primary-btn,
.secondary-btn,
.menu-button {
  border: 2px solid rgba(240, 189, 89, 0.60);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(29, 91, 134, 0.98), rgba(13, 38, 61, 0.98)),
    linear-gradient(90deg, transparent, rgba(121, 216, 219, 0.16), transparent);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -5px 0 rgba(0, 0, 0, 0.18),
    0 9px 0 rgba(3, 10, 17, 0.45),
    0 14px 24px rgba(0, 0, 0, 0.24);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.mode-btn:hover,
.house-card:hover,
.primary-btn:hover,
.secondary-btn:hover,
.menu-button:hover,
.menu-button.is-selected {
  border-color: var(--gold-hot);
  filter: saturate(1.16) brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.16),
    inset 0 -5px 0 rgba(0, 0, 0, 0.18),
    0 11px 0 rgba(3, 10, 17, 0.42),
    0 18px 28px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(121, 216, 219, 0.16);
}

.mode-btn:active,
.house-card:active,
.primary-btn:active,
.secondary-btn:active,
.menu-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.10), 0 3px 0 rgba(3, 10, 17, 0.55);
}

.mode-btn {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: left;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-weight: 900;
}

.mode-btn span {
  color: #c6e5e7;
  font-size: 12px;
  font-weight: 700;
}

.primary-btn.accent {
  background:
    linear-gradient(180deg, rgba(191, 69, 66, 0.98), rgba(91, 25, 29, 0.98)),
    linear-gradient(90deg, transparent, rgba(255, 214, 110, 0.18), transparent);
}

.house-grid {
  gap: 16px;
}

.house-card {
  min-height: 244px;
  padding: 14px 14px 16px;
  justify-content: flex-start;
  gap: 5px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--house-accent) 68%, #f0bd59);
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--house-accent) 25%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(25, 60, 88, 0.98), rgba(8, 23, 37, 0.98));
}

.house-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: var(--house-accent);
  box-shadow: 0 -3px 14px color-mix(in srgb, var(--house-accent) 45%, transparent);
}

.house-card img {
  width: 108px;
  height: 132px;
  margin: -2px auto -1px;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.46));
}

.house-card strong {
  color: var(--gold-hot);
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.house-mark {
  align-self: flex-start;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--house-accent) 68%, white);
  border-radius: 999px;
  color: var(--house-accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.house-region {
  color: #b7d4d8;
  font-size: 11px;
  font-weight: 800;
}

.house-flavor {
  color: #91aeb5;
  font-size: 11px;
  line-height: 1.25;
}

.side-menu {
  width: 344px;
  padding: 34px 24px 24px;
  border-left: 0;
  border-radius: 24px 0 0 24px;
  background:
    linear-gradient(180deg, rgba(23, 52, 81, 0.97), rgba(7, 20, 33, 0.99)),
    radial-gradient(circle at 0 0, rgba(121, 216, 219, 0.18), transparent 42%);
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.50), inset 3px 0 0 rgba(240, 189, 89, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.side-menu h2 {
  margin: 5px 0 8px;
  color: var(--gold-hot);
  font-size: 24px;
}

.menu-kicker {
  display: block;
  text-align: center;
}

.title-ornament {
  opacity: 0.72;
}

.menu-button {
  min-height: 74px;
  border-radius: 14px;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  font-size: 16px;
}

.menu-button img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 2px solid rgba(240, 189, 89, 0.54);
  background: #07111b;
}

.menu-action {
  margin-top: 16px;
}

.battle-bar {
  top: 16px;
  width: min(720px, calc(100vw - 430px));
  padding: 12px 16px;
  border: 2px solid rgba(240, 189, 89, 0.65);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 41, 63, 0.92), rgba(5, 17, 28, 0.94));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.44), inset 0 2px 0 rgba(255, 255, 255, 0.10);
}

.battle-center {
  border-inline: 1px solid rgba(121, 216, 219, 0.38);
}

.battle-center span {
  color: var(--toy-cyan);
  font-weight: 900;
}

.battle-side strong,
.battle-center strong {
  color: var(--gold-hot);
  font-family: "Trebuchet MS", system-ui, sans-serif;
}

.hint-card {
  width: 392px;
  padding: 26px 24px 20px;
  border: 2px solid rgba(121, 216, 219, 0.38);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 52, 81, 0.90), rgba(7, 21, 34, 0.95));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.44), inset 0 2px 0 rgba(255, 255, 255, 0.09);
}

.hud-top h1 {
  font-size: 19px;
}

.turn-strip,
.tactical-legend,
.battle-log div,
.rules-grid section,
.game-over-stats div,
.ranking-row {
  border-radius: 12px;
}

.turn-strip {
  background: rgba(3, 13, 22, 0.64);
  border-color: rgba(121, 216, 219, 0.28);
}

.tactical-legend {
  border-radius: 999px;
  border-color: rgba(121, 216, 219, 0.32);
  background: rgba(6, 18, 29, 0.78);
}

.tactical-legend span {
  border-radius: 999px;
  background: rgba(22, 57, 80, 0.62);
}

.modal,
.game-over-overlay {
  background: rgba(3, 9, 15, 0.78);
}

.game-over-panel,
.ranking-modal {
  border: 2px solid rgba(240, 189, 89, 0.76);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(24, 55, 83, 0.98), rgba(7, 20, 32, 0.99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68), inset 0 2px 0 rgba(255, 255, 255, 0.10);
}

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

  .house-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .house-card {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .screen {
    align-items: flex-start;
    overflow-y: auto;
  }

  .screen .panel {
    margin: 10px auto 24px;
    padding: 22px 18px;
  }

  .title-row img {
    max-height: 156px;
  }

  .title-row {
    margin-bottom: 14px;
  }

  .house-grid {
    grid-template-columns: 1fr;
  }

  .house-card {
    min-height: 154px;
    display: grid;
    grid-template-columns: 74px 1fr;
    grid-template-rows: auto auto auto 1fr;
    align-items: center;
    text-align: left;
  }

  .house-card img {
    grid-row: 1 / span 4;
    width: 70px;
    height: 92px;
    margin: 0;
  }

  .house-mark {
    align-self: end;
  }

  .house-card strong,
  .house-region,
  .house-flavor {
    grid-column: 2;
  }

  .side-menu {
    width: min(344px, 90vw);
  }
}

/* --- Opening screen: cinematic title card --- */
#start-screen {
  align-items: stretch;
  padding: clamp(12px, 2.2vw, 28px);
  background:
    radial-gradient(circle at 50% 16%, rgba(27, 91, 132, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 10, 0.84), rgba(2, 7, 12, 0.98));
}

#start-screen .panel {
  width: min(1460px, calc(100vw - 24px));
  min-height: min(920px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(28px, 4.2vw, 62px) clamp(22px, 5.6vw, 86px) clamp(28px, 3.2vw, 48px);
  border: 2px solid rgba(240, 189, 89, 0.90);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(3, 10, 16, 0.28), rgba(3, 8, 13, 0.44)),
    url('../../assets/ui/opening-background-aa.webp') center / cover no-repeat,
    radial-gradient(circle at 50% 24%, rgba(19, 79, 113, 0.26), transparent 34%),
    radial-gradient(circle at 8% 88%, rgba(17, 47, 64, 0.76), transparent 28%),
    radial-gradient(circle at 92% 84%, rgba(86, 34, 26, 0.52), transparent 28%),
    repeating-linear-gradient(30deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 44px),
    linear-gradient(145deg, #061421, #0a1b2b 50%, #050d15);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.75),
    0 0 0 7px rgba(7, 13, 20, 0.90),
    0 0 0 9px rgba(240, 189, 89, 0.34),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 90px rgba(0, 0, 0, 0.38);
}

#start-screen .panel::before {
  inset: 12px;
  z-index: 0;
  border: 1px solid rgba(240, 189, 89, 0.78);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(36, 118, 160, 0.34);
}

#start-screen .panel::after {
  top: 20px;
  left: 24px;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: #52c7e1;
  box-shadow: 20px 0 0 #e1a943, 40px 0 0 #9f3f3c, calc(100vw - 118px) 0 0 #52c7e1, calc(100vw - 98px) 0 0 #e1a943, calc(100vw - 78px) 0 0 #9f3f3c;
}

#start-screen .title-row,
#start-screen .player-row,
#start-screen .button-grid {
  position: relative;
  z-index: 3;
  width: 100%;
}

#start-screen .title-row {
  gap: 8px;
  margin-bottom: 0;
}

#start-screen .hero-kicker {
  color: #eab965;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.30em;
  text-shadow: 0 2px 8px #000;
}

.opening-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.opening-standard {
  position: absolute;
  top: clamp(34px, 5vw, 70px);
  width: clamp(82px, 9vw, 150px);
  height: clamp(210px, 34vh, 380px);
  border: 2px solid rgba(240, 189, 89, 0.72);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.52));
  opacity: 0.92;
}

.opening-standard::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(240, 189, 89, 0.60);
  clip-path: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), transparent 30%, rgba(0,0,0,0.18));
}

.opening-standard::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 50%;
  width: 52%;
  height: 28%;
  transform: translateX(-50%);
  border: 2px solid rgba(240, 189, 89, 0.80);
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 0 18px rgba(240, 189, 89, 0.20), inset 0 0 16px rgba(0, 0, 0, 0.45);
}

.opening-standard span {
  position: absolute;
  inset: 28% 0 auto;
  color: rgba(240, 189, 89, 0.92);
  font-size: clamp(30px, 4vw, 64px);
  text-align: center;
  text-shadow: 0 0 18px rgba(240, 189, 89, 0.32);
}

.opening-standard-left {
  left: clamp(18px, 3.5vw, 58px);
  background: linear-gradient(180deg, rgba(12, 49, 73, 0.96), rgba(3, 17, 28, 0.96));
}

.opening-standard-right {
  right: clamp(18px, 3.5vw, 58px);
  background: linear-gradient(180deg, rgba(90, 29, 30, 0.96), rgba(27, 8, 13, 0.96));
}

.logo-plaque {
  position: relative;
  width: min(780px, 76%);
  min-height: clamp(190px, 28vh, 300px);
  display: grid;
  place-items: center;
  padding: 22px 30px 30px;
  border: 2px solid rgba(240, 189, 89, 0.86);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(30, 75, 102, 0.28), transparent 62%),
    linear-gradient(145deg, rgba(5, 13, 22, 0.94), rgba(2, 7, 13, 0.96));
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.48),
    inset 0 0 0 7px rgba(0, 0, 0, 0.28),
    inset 0 0 0 9px rgba(240, 189, 89, 0.26),
    inset 0 0 32px rgba(240, 189, 89, 0.10);
  clip-path: polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
}

.logo-plaque::before,
.logo-plaque::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 189, 89, 0.82), transparent);
}

.logo-plaque::before { top: 14%; }
.logo-plaque::after { bottom: 13%; }

.logo-plaque img {
  width: 100%;
  max-width: 680px;
  max-height: 220px;
  object-fit: contain;
  filter: contrast(1.08) saturate(0.92) drop-shadow(0 13px 16px rgba(0, 0, 0, 0.62));
}

.logo-sigil {
  position: absolute;
  top: -22px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff0b4;
  border: 2px solid rgba(240, 189, 89, 0.88);
  border-radius: 50%;
  background: #091521;
  font-size: 22px;
  text-shadow: 0 0 12px rgba(240, 189, 89, 0.44);
}

.logo-tagline {
  position: absolute;
  bottom: 9px;
  color: #eab965;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.24em;
}

#start-screen .hero-copy {
  max-width: 820px;
  margin-top: 20px;
  color: #f6d88e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(23px, 3vw, 42px);
  line-height: 1.16;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.34), 0 0 18px rgba(240, 189, 89, 0.14);
}

#start-screen .muted {
  max-width: 720px;
  margin: 12px auto 0;
  color: #afc3c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.2vw, 17px);
  text-align: center;
}

#start-screen .player-row {
  width: min(860px, 100%);
  margin-top: clamp(20px, 3vh, 36px);
  grid-template-columns: 1fr auto;
  gap: 16px;
}

.player-field {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  min-width: 0;
  border: 2px solid rgba(240, 189, 89, 0.64);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(4, 11, 18, 0.96), rgba(1, 6, 11, 0.96));
  box-shadow: inset 0 0 0 5px rgba(240, 189, 89, 0.08), 0 9px 18px rgba(0, 0, 0, 0.30);
}

.player-field > span {
  color: #eab965;
  font-size: 28px;
  text-align: center;
}

.player-field input {
  width: 100%;
  border: 0;
  border-left: 1px solid rgba(240, 189, 89, 0.28);
  border-radius: 0;
  background: transparent;
  color: #f6d88e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

#ranking-btn {
  min-width: 170px;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
}

#ranking-btn span {
  color: #eab965;
  font-size: 18px;
}

#start-screen .button-grid {
  width: min(1080px, 100%);
  margin-top: clamp(18px, 3vh, 30px);
  gap: 16px;
}

#start-screen .mode-btn {
  min-height: clamp(108px, 15vh, 154px);
  grid-template-columns: 66px 1fr;
  align-items: center;
  padding: 18px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.5vw, 22px);
  text-transform: uppercase;
}

#start-screen .mode-icon {
  display: grid;
  width: 54px;
  height: 74px;
  place-items: center;
  color: #ffe8a3;
  border: 2px solid rgba(240, 189, 89, 0.82);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 55, 82, 0.96), rgba(4, 18, 30, 0.98));
  box-shadow: inset 0 0 0 4px rgba(240, 189, 89, 0.12), 0 7px 12px rgba(0, 0, 0, 0.36);
  font-size: 34px;
  text-shadow: 0 0 15px rgba(240, 189, 89, 0.45);
}

#start-screen .mode-copy {
  display: grid;
  gap: 9px;
  align-content: center;
  color: #f6d88e;
  font-weight: 700;
  line-height: 1.12;
}

#start-screen .mode-copy small {
  color: #b6cbd0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none;
}

#start-screen .mode-btn.is-disabled {
  filter: grayscale(0.7) brightness(0.64);
}

#start-screen .mode-btn.is-disabled .mode-icon {
  color: #b0aa99;
  border-color: rgba(180, 170, 150, 0.45);
}

@media (max-width: 1100px) {
  .opening-standard {
    opacity: 0.34;
  }

  #start-screen .logo-plaque {
    width: min(720px, 86%);
  }
}

@media (max-width: 720px) {
  #start-screen {
    align-items: flex-start;
    overflow-y: auto;
  }

  #start-screen .panel {
    min-height: auto;
    margin: 10px auto 22px;
    padding: 42px 18px 24px;
  }

  #start-screen .opening-standard {
    display: none;
  }

  #start-screen .logo-plaque {
    width: 100%;
    min-height: 150px;
    padding: 16px 12px 24px;
  }

  #start-screen .logo-plaque img {
    max-height: 140px;
  }

  #start-screen .hero-copy {
    margin-top: 14px;
    font-size: 24px;
  }

  #start-screen .player-row {
    grid-template-columns: 1fr;
  }

  #ranking-btn {
    width: 100%;
  }

  #start-screen .mode-btn {
    min-height: 90px;
  }
}

/* Final cascade: keep the generated AAA key art above the first visual pass. */
#start-screen .panel {
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 12, 0.03), rgba(2, 7, 12, 0.16)),
    url('../../assets/ui/opening-keyart-aa-v2.webp') center / 100% 100% no-repeat;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.78);
}

#start-screen .panel::before,
#start-screen .panel::after,
#start-screen .opening-decor {
  display: none;
}

#start-screen .title-row {
  max-width: 940px;
  margin-top: clamp(10px, 1.8vh, 22px);
}

#start-screen .hero-kicker {
  position: relative;
  margin-bottom: 6px;
  color: #f1c46d;
}

#start-screen .hero-kicker::before,
#start-screen .hero-kicker::after {
  content: "";
  display: inline-block;
  width: clamp(32px, 8vw, 120px);
  height: 1px;
  margin: 0 14px 4px;
  background: linear-gradient(90deg, transparent, rgba(241, 196, 109, 0.92));
}

#start-screen .hero-kicker::after { transform: scaleX(-1); }

#start-screen .logo-plaque {
  width: min(790px, 68%);
  min-height: clamp(210px, 30vh, 300px);
  padding: 30px 40px 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

#start-screen .logo-plaque::before,
#start-screen .logo-plaque::after,
#start-screen .logo-sigil { display: none; }

#start-screen .logo-plaque img {
  max-width: 680px;
  max-height: 205px;
  mix-blend-mode: screen;
  opacity: 0.98;
  filter: contrast(1.18) saturate(0.90) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.84));
}

#start-screen .logo-tagline {
  bottom: 9px;
  color: #f4ce79;
  font-size: clamp(9px, 1vw, 14px);
  text-shadow: 0 2px 6px #000;
}

#start-screen .hero-copy {
  max-width: 850px;
  margin-top: clamp(12px, 2.2vh, 22px);
  color: #f4d58d;
  font-size: clamp(25px, 3.15vw, 44px);
}

#start-screen .muted {
  color: #b8cfda;
  font-size: clamp(13px, 1.25vw, 18px);
  text-shadow: 0 2px 8px #000;
}

#start-screen .player-row { margin-top: clamp(16px, 2.4vh, 28px); }
#start-screen .button-grid { margin-top: clamp(14px, 2.4vh, 26px); }

#start-screen .mode-btn {
  overflow: hidden;
  border: 1px solid rgba(241, 196, 109, 0.76);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(2, 7, 13, 0.08), rgba(2, 7, 13, 0.35)),
    url('../../assets/ui/mode-card-aa.webp') center / cover no-repeat;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.44), inset 0 0 0 1px rgba(240, 189, 89, 0.20);
}

#start-screen .mode-btn::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(240, 189, 89, 0.18);
  border-radius: 5px;
}

#start-screen .mode-btn:hover {
  border-color: #fff0b8;
  background:
    linear-gradient(90deg, rgba(4, 18, 30, 0.02), rgba(4, 18, 30, 0.20)),
    url('../../assets/ui/mode-card-aa.webp') center / cover no-repeat;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.54), 0 0 26px rgba(63, 157, 218, 0.26), inset 0 0 0 1px rgba(255, 240, 184, 0.32);
}

#start-screen .mode-icon {
  border-color: rgba(247, 209, 127, 0.86);
  background: linear-gradient(180deg, rgba(8, 25, 39, 0.90), rgba(3, 10, 18, 0.94));
}

#start-screen .mode-copy { color: #f6d78b; text-shadow: 0 3px 6px #000; }
#start-screen .mode-copy small { color: #cfdae0; }

@media (max-width: 1100px) {
  #start-screen .logo-plaque { width: min(770px, 76%); }
}

@media (max-width: 720px) {
  #start-screen .panel { background-position: center top; }
  #start-screen .title-row { margin-top: 0; }
  #start-screen .hero-kicker::before,
  #start-screen .hero-kicker::after { width: 26px; margin-inline: 7px; }
  #start-screen .logo-plaque { width: 100%; min-height: 160px; padding: 22px 16px 28px; }
  #start-screen .logo-plaque img { max-height: 130px; }
}

/* Wordmark renders cleanly at every resolution; the earlier logo bitmap remains preserved as legacy art. */
#start-screen .logo-plaque .legacy-logo-art { display: none; }

#start-screen .brand-sigil {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 3vw, 52px);
  height: clamp(34px, 3vw, 52px);
  margin: 0 auto -2px;
  color: #f9e7ab;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 211, 111, 0.60);
  transform: rotate(45deg);
}

#start-screen .brand-sigil::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  border: 1px solid rgba(249, 231, 171, 0.82);
}

#start-screen .brand-wordmark {
  margin: 0;
  color: #f5cb71;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 8.2vw, 126px);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 0.92;
  text-align: center;
  -webkit-text-stroke: 1px rgba(255, 239, 182, 0.72);
  text-shadow:
    0 2px 0 #432d14,
    0 4px 0 #1b1209,
    0 8px 18px rgba(0, 0, 0, 0.82),
    0 0 28px rgba(240, 189, 89, 0.22);
}

#start-screen .brand-rule {
  display: block;
  width: min(580px, 80%);
  height: 1px;
  margin: 12px auto 8px;
  background: linear-gradient(90deg, transparent, #c79643 12%, #ffe9a6 50%, #c79643 88%, transparent);
  box-shadow: 0 0 10px rgba(240, 189, 89, 0.34);
}

#start-screen .logo-tagline {
  position: static;
  display: block;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 720px) {
  #start-screen .brand-wordmark { font-size: clamp(46px, 14vw, 76px); }
  #start-screen .brand-rule { margin-block: 8px 6px; }
}

/* Tablet portrait and resized desktop windows: this screen is deliberately
   scrollable rather than clipping the last mode inside a fixed-height frame. */
@media (max-width: 1279px) {
  #start-screen {
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
  }

  #start-screen .panel {
    width: min(100%, calc(100vw - 32px));
    min-height: min(920px, calc(100vh - 32px));
    margin: auto;
    padding: 26px 34px 30px;
    justify-content: center;
    overflow: visible;
    background-size: cover;
    background-position: center top;
  }

  #start-screen .title-row {
    max-width: 800px;
    margin-top: 0;
  }

  #start-screen .logo-plaque {
    width: min(620px, 92%);
    min-height: 212px;
    padding: 18px 24px 20px;
  }

  #start-screen .brand-wordmark {
    font-size: clamp(55px, 11vw, 88px);
  }

  #start-screen .hero-copy {
    margin-top: 12px;
    font-size: clamp(24px, 3.6vw, 34px);
  }

  #start-screen .muted {
    margin-top: 8px;
    font-size: 14px;
  }

  #start-screen .player-row {
    margin-top: 14px;
  }

  #start-screen .button-grid {
    grid-template-columns: 1fr;
    margin-top: 14px;
    gap: 12px;
  }

  #start-screen .mode-btn {
    min-height: 112px;
    padding: 14px;
  }
}

@media (max-width: 720px) {
  #start-screen {
    padding: 8px;
  }

  #start-screen .panel {
    width: calc(100vw - 16px);
    margin-bottom: 12px;
    padding: 20px 16px 18px;
    background-size: auto 100%;
  }

  #start-screen .hero-kicker {
    margin-bottom: 2px;
    font-size: 9px;
  }

  #start-screen .logo-plaque {
    width: 100%;
    min-height: 160px;
    padding: 14px 10px 16px;
  }

  #start-screen .brand-sigil {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  #start-screen .brand-wordmark {
    font-size: clamp(46px, 14vw, 70px);
  }

  #start-screen .brand-rule {
    margin-block: 7px 5px;
  }

  #start-screen .logo-tagline {
    font-size: 8px;
  }

  #start-screen .hero-copy {
    margin-top: 9px;
    font-size: 22px;
    line-height: 1.1;
  }

  #start-screen .muted {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.25;
  }

  #start-screen .player-row {
    margin-top: 12px;
    gap: 8px;
  }

  #start-screen .player-field,
  #start-screen #ranking-btn {
    min-height: 48px;
  }

  #start-screen .button-grid {
    margin-top: 12px;
    gap: 10px;
  }

  #start-screen .mode-btn {
    min-height: 82px;
    grid-template-columns: 48px 1fr;
    gap: 8px;
    padding: 10px;
  }

  #start-screen .mode-icon {
    width: 42px;
    height: 54px;
    font-size: 23px;
  }

  #start-screen .mode-copy {
    gap: 4px;
    font-size: 14px;
  }
}

/* Desktop cards use a fixed stage.  The icon and typography now occupy
   explicit coordinates inside each frame, so resizing cannot make them drift
   over the generated ornament. */
@media (min-width: 1280px) {
  #start-screen .button-grid {
    width: 1202px;
    max-width: 100%;
    grid-template-columns: repeat(3, 390px);
    justify-content: center;
    gap: 16px;
  }

  #start-screen .mode-btn {
    display: block;
    width: 390px;
    height: 168px;
    min-height: 168px;
    padding: 0;
    background-position: center;
  }

  #start-screen .mode-icon {
    position: absolute;
    top: 47px;
    left: 30px;
    z-index: 1;
    width: 54px;
    height: 74px;
  }

  #start-screen .mode-copy {
    position: absolute;
    top: 0;
    left: 104px;
    z-index: 1;
    display: grid;
    width: 270px;
    height: 168px;
    gap: 9px;
    align-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.12;
    white-space: nowrap;
  }

  #start-screen .mode-copy small {
    font-size: 12px;
    line-height: 1.25;
  }
}

/* --- Tactical command deck: the in-match UI is a deliberate play surface,
   not an overlay of unrelated panels.  Decorative assets are transparent PNGs. --- */
:root {
  --command-deck-height: 78px;
  --game-gutter: 16px;
  --rail-left: 324px;
  --rail-right: 322px;
  --tactical-ink: rgba(3, 10, 17, 0.92);
  --tactical-cyan: #91bcc7;
  --tactical-gold: #f2bd58;
}

.command-deck {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: var(--command-deck-height);
  grid-template-columns: minmax(224px, 0.82fr) minmax(420px, 1.8fr) minmax(170px, 0.6fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(242, 189, 88, 0.62);
  background:
    linear-gradient(90deg, rgba(6, 18, 29, 0.99), rgba(8, 29, 46, 0.96) 42%, rgba(5, 14, 23, 0.99)),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 38%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(118, 217, 236, 0.25);
}

.command-deck::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(118, 217, 236, 0.38) 16%, rgba(242, 189, 88, 0.85) 50%, rgba(118, 217, 236, 0.38) 84%, transparent);
}

.command-brand {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: clamp(18px, 2.7vw, 44px);
  border-right: 1px solid rgba(242, 189, 88, 0.22);
  color: #f6ce75;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.25vw, 32px);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-shadow: 0 3px 10px rgba(0,0,0,0.80);
}

.command-brand img {
  width: 52px;
  height: 58px;
  margin: -4px 9px -4px -11px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.68));
}

.command-tabs,
.command-status,
.command-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
}

.command-tabs {
  justify-content: center;
}

.command-status {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border-inline: 1px solid rgba(242, 189, 88, 0.14);
  background: radial-gradient(circle at 50% 0%, rgba(242, 189, 88, 0.13), transparent 70%);
  text-align: center;
}

.command-status span {
  color: #9eafb3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.command-status strong {
  color: #f7d48a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.command-tab,
.command-icon {
  display: grid;
  place-items: center;
  border: 0;
  border-inline: 1px solid rgba(242, 189, 88, 0.12);
  color: #c2d3d7;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.command-tab {
  min-width: 110px;
  padding: 0 22px;
}

button.command-tab,
.command-icon {
  cursor: pointer;
}

.command-tab.is-active,
.command-tab:hover,
.command-icon:hover {
  color: #fff0bd;
  background:
    linear-gradient(180deg, rgba(31, 83, 117, 0.48), rgba(7, 21, 34, 0.06)),
    radial-gradient(circle at 50% 8%, rgba(242, 189, 88, 0.20), transparent 64%);
  box-shadow: inset 0 -3px 0 var(--tactical-gold), inset 0 1px 0 rgba(255,255,255,0.12);
}

.command-actions {
  justify-content: flex-end;
  padding-right: clamp(12px, 2vw, 30px);
}

.command-icon {
  width: 68px;
  margin: 13px 5px;
  border: 1px solid rgba(242, 189, 88, 0.46);
  border-radius: 8px;
  background: rgba(4, 14, 23, 0.56);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.command-icon:hover { transform: translateY(-2px); border-color: #fff0bd; }

.title-ornament {
  display: block;
  width: min(220px, 78%);
  height: 54px;
  margin: -12px auto 2px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.60));
}

.side-menu {
  top: calc(var(--command-deck-height) + var(--game-gutter));
  right: var(--game-gutter);
  bottom: var(--game-gutter);
  width: var(--rail-right);
  height: auto;
  padding: 22px 18px 16px;
  overflow: hidden;
  border: 1px solid rgba(242, 189, 88, 0.64);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9, 27, 43, 0.97), rgba(4, 13, 22, 0.98)),
    radial-gradient(circle at 90% 0%, rgba(118, 217, 236, 0.12), transparent 45%);
  box-shadow: -14px 20px 42px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 5px rgba(1,6,10,0.20);
}

.side-menu::before {
  inset: 7px;
  border-color: rgba(242, 189, 88, 0.26);
  border-radius: 9px;
}

.side-menu::after {
  top: 13px;
  left: 50%;
  width: 94px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: url('../../assets/ui/tactical-crest.webp') center / contain no-repeat;
  box-shadow: none;
  opacity: 0.27;
  transform: translateX(-50%);
}

.side-menu h2 {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  letter-spacing: 0.12em;
}

.side-menu .menu-kicker { position: relative; z-index: 1; color: var(--tactical-cyan); }

.menu-scroll {
  position: relative;
  z-index: 1;
  max-height: none;
  padding: 5px 5px 12px 1px;
  margin-right: -4px;
}

.menu-button {
  grid-template-columns: 60px 1fr;
  min-height: 70px;
  gap: 11px;
  margin-bottom: 9px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(242, 189, 88, 0.43);
  border-radius: 9px;
  color: #f1d288;
  background:
    linear-gradient(100deg, rgba(8, 31, 49, 0.98), rgba(5, 13, 22, 0.96)),
    radial-gradient(circle at 10% 50%, rgba(118, 217, 236, 0.08), transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 3px 0 0 rgba(118, 217, 236, 0.16), 0 4px 9px rgba(0,0,0,0.20);
}

.menu-button img {
  width: 56px;
  height: 56px;
  padding: 2px;
  object-fit: contain;
  border: 1px solid rgba(242, 189, 88, 0.64);
  border-radius: 8px;
  background: radial-gradient(circle, rgba(31, 67, 88, 0.82), rgba(2, 8, 13, 0.98));
}

.menu-button.is-selected {
  border-color: #fff0bd;
  background: linear-gradient(100deg, rgba(26, 89, 119, 0.96), rgba(9, 27, 43, 0.98));
  box-shadow: inset 3px 0 0 #f3c86a, inset 0 0 0 1px rgba(255,240,189,0.28), 0 0 18px rgba(93, 200, 235, 0.16);
}

.menu-action {
  position: relative;
  z-index: 1;
  min-height: 52px;
  margin-top: 10px;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: 0.045em;
}

.battle-bar {
  top: calc(var(--command-deck-height) + 13px);
  z-index: 30;
  width: min(840px, calc(100vw - var(--rail-left) - var(--rail-right) - (var(--game-gutter) * 4)));
  min-width: 420px;
  padding: 11px 26px;
  overflow: visible;
  border: 1px solid rgba(242, 189, 88, 0.72);
  border-radius: 4px 4px 12px 12px;
  background:
    linear-gradient(90deg, rgba(8, 27, 44, 0.98), rgba(4, 14, 23, 0.96) 50%, rgba(29, 16, 19, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(242, 189, 88, 0.18), transparent 52%);
  box-shadow: 0 18px 34px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -3px 0 rgba(3,8,12,0.44);
}

.battle-bar::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 78px;
  height: 48px;
  pointer-events: none;
  background: url('../../assets/ui/tactical-crest-mark.webp') center / contain no-repeat;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,0.75));
  transform: translateX(-50%);
}

.battle-side strong,
.battle-center strong { letter-spacing: 0.025em; }
.battle-center { border-inline-color: rgba(242, 189, 88, 0.30); }
.battle-center span { color: var(--tactical-cyan); }

.hint-card {
  top: calc(var(--command-deck-height) + var(--game-gutter));
  left: var(--game-gutter);
  width: var(--rail-left);
  max-height: calc(100vh - var(--command-deck-height) - (var(--game-gutter) * 2));
  padding: 20px 18px 16px;
  overflow-y: auto;
  border: 1px solid rgba(118, 217, 236, 0.44);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(7, 26, 43, 0.97), rgba(4, 13, 22, 0.98)),
    radial-gradient(circle at 0 0, rgba(118, 217, 236, 0.14), transparent 44%);
  box-shadow: 14px 20px 42px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 0 5px rgba(1,6,10,0.20);
}

.hint-card::before { inset: 7px; border-color: rgba(118, 217, 236, 0.22); border-radius: 9px; }
.hint-card::after { display: none; }

.hud-top { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 189, 88, 0.34); }
.hud-top h1 { color: #f3cc77; font-family: Georgia, "Times New Roman", serif; font-size: 15px; letter-spacing: 0.12em; }
.hud-top h1 span { color: var(--tactical-cyan); }
.hud-actions .secondary-btn { width: 46px; height: 28px; border-radius: 6px; font-size: 10px; }
.hud input { border-color: rgba(242, 189, 88, 0.38); background: rgba(1, 7, 12, 0.72); }
.turn-strip { border-color: rgba(242, 189, 88, 0.34); border-radius: 7px; }
.turn-strip span:first-child { color: #f7d98e; font-weight: 700; }
.pass-turn {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  border-color: rgba(145, 188, 199, 0.44);
  border-radius: 7px;
  color: #d9e6e7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pass-turn:disabled {
  cursor: not-allowed;
  border-color: rgba(255, 94, 78, 0.82);
  background: linear-gradient(180deg, rgba(108, 31, 33, 0.94), rgba(43, 11, 17, 0.98));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 193, 0.12), 0 0 18px rgba(255, 67, 58, 0.18);
  color: #ffd9d1;
  opacity: 0.88;
}

.hud.is-king-in-danger .turn-strip,
.threat-status.is-king-threat {
  border-color: rgba(255, 94, 78, 0.86);
  color: #ffd0c7 !important;
  text-shadow: 0 0 14px rgba(255, 78, 68, 0.44);
}

.threat-status.is-king-threat,
.threat-status.is-no-rescue {
  position: relative;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 94, 78, 0.72);
  border-radius: 8px;
  background: linear-gradient(104deg, rgba(93, 20, 24, 0.92), rgba(31, 8, 15, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 219, 170, 0.08), 0 8px 20px rgba(0, 0, 0, 0.26);
}

.threat-status.is-no-rescue { border-color: rgba(255, 180, 98, 0.82); }

@media (prefers-reduced-motion: no-preference) {
  .threat-status.is-king-threat { animation: cyvasse-king-danger 1.45s ease-in-out infinite alternate; }
}

@keyframes cyvasse-king-danger {
  from { box-shadow: inset 0 0 0 1px rgba(255, 219, 170, 0.08), 0 8px 20px rgba(0, 0, 0, 0.26); }
  to { box-shadow: inset 0 0 0 1px rgba(255, 219, 170, 0.17), 0 0 22px rgba(230, 54, 47, 0.34); }
}
.game-tips { color: #c8d5d8; }
.game-tips div { border-left-color: var(--tactical-cyan); }

.tactical-legend {
  left: 50%;
  bottom: 20px;
  z-index: 25;
  max-width: calc(100vw - var(--rail-left) - var(--rail-right) - 72px);
  padding: 7px 10px;
  border-color: rgba(242, 189, 88, 0.38);
  background: rgba(4, 14, 23, 0.86);
  transform: translateX(-50%);
}

@media (min-width: 721px) and (max-width: 1199px) {
  :root { --rail-left: 270px; --rail-right: 274px; --game-gutter: 12px; }
  .command-deck { grid-template-columns: 200px 1fr 150px; }
  .command-brand { padding-left: 16px; font-size: 22px; }
  .command-status strong { font-size: 13px; }
  .command-tab { min-width: 78px; padding-inline: 12px; font-size: 10px; }
  .command-icon { width: 56px; }
  .hint-card { padding-inline: 14px; }
  .battle-bar { min-width: 360px; padding-inline: 14px; }
  .battle-side strong, .battle-center strong { font-size: 14px; }
  .menu-button { grid-template-columns: 52px 1fr; padding-right: 8px; font-size: 14px; }
  .menu-button img { width: 48px; height: 48px; }
}

@media (max-width: 720px) {
  :root { --command-deck-height: 58px; --game-gutter: 9px; }
  .command-deck { grid-template-columns: 1fr auto; height: var(--command-deck-height); }
  .command-brand { padding-left: 12px; font-size: 19px; }
  .command-brand img { width: 38px; height: 46px; margin-right: 4px; }
  .command-tabs, .command-status { display: none; }
  .command-actions { padding-right: 5px; }
  .command-icon { width: 47px; margin: 9px 3px; font-size: 9px; }
  .hint-card { top: calc(var(--command-deck-height) + var(--game-gutter)); width: min(300px, calc(100vw - 18px)); max-height: 46vh; }
  .side-menu { top: auto; right: var(--game-gutter); bottom: var(--game-gutter); width: min(320px, calc(100vw - 18px)); height: min(55vh, 510px); }
  .battle-bar { top: auto; bottom: calc(min(55vh, 510px) + 20px); width: calc(100vw - 18px); min-width: 0; transform: translateX(-50%); }
  .battle-bar::before { display: none; }
  .tactical-legend { display: none !important; }
}

/* Board-safe layout: the renderer is constrained to the center stage rather
   than being obscured by fixed rails.  This wins over the earlier overlay pass. */
#tactical-stage {
  position: fixed;
  inset: var(--command-deck-height) 0 0;
  z-index: 4;
  display: grid;
  grid-template-areas: "context board loadout";
  grid-template-columns: clamp(250px, 18.5vw, 324px) minmax(560px, 1fr) clamp(250px, 18.5vw, 322px);
  gap: var(--game-gutter);
  padding: var(--game-gutter);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(33, 89, 114, 0.20), transparent 47%),
    linear-gradient(145deg, #06111b, #040a10 56%, #080f15);
}

#board-viewport {
  position: relative;
  grid-area: board;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 189, 88, 0.44);
  border-radius: 14px;
  background: #06101a;
  box-shadow: 0 24px 54px rgba(0,0,0,0.54), inset 0 0 0 1px rgba(118,217,236,0.11), inset 0 0 58px rgba(0,0,0,0.36);
}

#board-viewport::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(242, 189, 88, 0.22);
  border-radius: 9px;
}

#game {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background: #07111b;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#game.is-dragging {
  cursor: grabbing;
}

#tactical-stage > .hint-card {
  position: relative;
  top: auto;
  left: auto;
  grid-area: context;
  width: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
}

#tactical-stage > .side-menu {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  grid-area: loadout;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

#board-viewport > .battle-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 8;
  width: min(760px, calc(100% - 36px));
  min-width: 0;
  transform: translateX(-50%);
}

#board-viewport > .tactical-legend {
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 8;
  max-width: calc(100% - 30px);
  transform: translateX(-50%);
}

@media (min-width: 721px) and (max-width: 1180px) {
  #tactical-stage {
    grid-template-areas: "board loadout";
    grid-template-columns: minmax(0, 1fr) clamp(248px, 29vw, 300px);
  }

  #tactical-stage > .hint-card { display: none !important; }

  /* Em telas médias a battle-bar é estreita: o botão "Encerrar turno" vai
     para uma segunda linha, sempre visível e sem espremer os lados. */
  #board-viewport > .battle-bar {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "player center opponent" "pass pass pass";
  }
}

@media (max-width: 720px) {
  #tactical-stage {
    inset: var(--command-deck-height) 0 0;
    display: block;
    padding: var(--game-gutter);
    overflow: hidden;
  }

  #board-viewport { width: 100%; height: 100%; }
  #tactical-stage > .hint-card { display: none !important; }

  #tactical-stage > .side-menu {
    position: absolute;
    right: var(--game-gutter);
    bottom: var(--game-gutter);
    left: var(--game-gutter);
    z-index: 12;
    width: auto;
    height: min(64vh, 380px);
  }

  #board-viewport > .battle-bar {
    top: 10px;
    bottom: auto;
    width: calc(100% - 18px);
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "player center opponent" "pass pass pass";
  }

  #board-viewport > .battle-bar .pass-turn {
    width: 100%;
    justify-self: stretch;
    padding: 10px 14px;
  }
}

/* Em viewports baixos o mostruário precisa de espaço vertical: o ornamento
   decorativo do título é ocultado para que os botões de ação fiquem visíveis. */
@media (max-width: 720px) and (max-height: 560px) {
  #tactical-stage > .side-menu .title-ornament { display: none; }
}

/* --- House selection: cinematic key-art cards, with legacy portraits kept
       in the DOM as a non-destructive fallback. --- */
#house-screen {
  align-items: flex-start;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 28px);
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 99, 141, 0.18), transparent 38%),
    linear-gradient(135deg, #03080d, #091521 54%, #02070b);
}

#house-screen .panel {
  width: min(1420px, calc(100vw - 38px));
  max-width: none;
  padding: clamp(20px, 2.4vw, 34px);
  border-color: rgba(225, 172, 65, 0.86);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 8%, rgba(49, 121, 164, 0.14), transparent 35%),
    linear-gradient(145deg, rgba(8, 20, 31, 0.99), rgba(3, 10, 16, 0.99));
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(243, 206, 112, 0.16),
    inset 0 22px 55px rgba(16, 57, 79, 0.18);
  margin: auto;
}

#house-screen .hero-kicker {
  color: #66c6d8;
  letter-spacing: 0.24em;
  text-align: center;
}

#house-screen h2 {
  margin: 6px 0 8px;
  color: #f6cb6d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 58px);
  letter-spacing: 0.09em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.72);
}

#house-screen .muted {
  max-width: 920px;
  margin-inline: auto;
  color: #b7c6ca;
  font-size: clamp(13px, 1.15vw, 17px);
}

#house-screen .house-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: clamp(18px, 2.2vh, 28px);
}

#house-screen .house-card {
  min-height: clamp(306px, 34vh, 360px);
  padding: 15px 16px 17px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--house-accent) 78%, #f4cf78);
  border-radius: 12px;
  color: #f7ead0;
  background-image:
    linear-gradient(180deg, rgba(2, 8, 14, 0.12) 0%, rgba(3, 10, 16, 0.03) 42%, rgba(2, 7, 12, 0.92) 100%),
    linear-gradient(90deg, rgba(3, 9, 14, 0.34), transparent 58%),
    var(--house-art);
  background-position: center;
  background-size: cover;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 235, 180, 0.12),
    inset 0 -4px 0 color-mix(in srgb, var(--house-accent) 80%, #f5c969);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#house-screen .house-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, transparent 23%, rgba(1, 5, 9, 0.18) 78%),
    linear-gradient(180deg, rgba(2, 8, 14, 0.02) 38%, rgba(1, 6, 11, 0.44) 100%);
}

#house-screen .house-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  width: auto;
  height: auto;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--house-accent) 42%, rgba(255, 225, 150, 0.52));
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.28);
}

#house-screen .house-card > * {
  position: relative;
  z-index: 2;
}

#house-screen .house-card img {
  display: none;
}

#house-screen .house-card .house-mark {
  align-self: flex-start;
  padding: 5px 9px;
  border-color: color-mix(in srgb, var(--house-accent) 72%, #ffeab3);
  border-radius: 4px;
  background: rgba(3, 9, 15, 0.66);
  color: color-mix(in srgb, var(--house-accent) 74%, #fff6d1);
  font-size: clamp(9px, 0.8vw, 12px);
  letter-spacing: 0.13em;
  text-shadow: 0 2px 5px #000;
}

#house-screen .house-card strong {
  margin-top: auto;
  color: #f9d67e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.05vw, 32px);
  letter-spacing: 0.075em;
  line-height: 1;
  text-shadow: 0 3px 9px #000;
}

#house-screen .house-card .house-region {
  margin-top: 8px;
  color: #f0dfb8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 0.9vw, 14px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 5px #000;
}

#house-screen .house-card .house-flavor {
  margin-top: 5px;
  color: #c7d8d7;
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.25;
  text-shadow: 0 2px 5px #000;
}

#house-screen .house-card:hover,
#house-screen .house-card:focus-visible {
  z-index: 3;
  border-color: #fff1b9;
  transform: translateY(-5px) scale(1.012);
  box-shadow:
    0 24px 42px rgba(0, 0, 0, 0.58),
    0 0 26px color-mix(in srgb, var(--house-accent) 42%, transparent),
    inset 0 0 0 1px rgba(255, 241, 185, 0.48),
    inset 0 -4px 0 color-mix(in srgb, var(--house-accent) 82%, #f5c969);
}

@media (max-width: 1060px) {
  #house-screen .house-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #house-screen .house-card { min-height: 300px; }
}

@media (max-width: 620px) {
  #house-screen .panel { width: min(100%, calc(100vw - 22px)); padding: 18px 14px; }
  #house-screen .house-grid { grid-template-columns: 1fr; }
  #house-screen .house-card { min-height: 290px; }
}

/* Cerimônia de fim de partida: superfícies raster/PNG, sem ornamentos SVG. */
.game-over-overlay {
  z-index: 1600;
  align-items: center;
  overflow: auto;
  padding: clamp(18px, 2.4vw, 38px);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10, 44, 62, 0.26), transparent 48%),
    radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(1, 4, 8, 0.90) 100%),
    rgba(1, 5, 10, 0.84);
  backdrop-filter: blur(13px) saturate(1.12);
}

.game-over-overlay .game-over-panel {
  --result-color: #ed734d;
  box-sizing: border-box;
  position: relative;
  width: min(1420px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  min-height: min(860px, calc(100vh - 42px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(30px, 4.7vw, 74px);
  border: 2px solid rgba(234, 185, 84, 0.86);
  border-radius: 14px;
  color: #f5e8c9;
  background-image:
    linear-gradient(90deg, rgba(4, 11, 18, 0.96) 0%, rgba(4, 12, 19, 0.86) 57%, rgba(4, 10, 17, 0.52) 100%),
    linear-gradient(180deg, rgba(1, 6, 11, 0.22) 0%, rgba(2, 6, 11, 0.68) 100%),
    url('../../assets/ui/opening-background-aa.webp');
  background-position: center;
  background-size: cover;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(255, 226, 146, 0.20),
    inset 0 0 72px rgba(0, 0, 0, 0.66),
    inset 0 2px 0 rgba(255, 235, 181, 0.35);
}

.game-over-overlay.is-victory .game-over-panel { --result-color: #f2c656; }

.game-over-overlay .game-over-panel::before {
  inset: 12px;
  border: 1px solid rgba(238, 190, 92, 0.50);
  border-radius: 9px;
  box-shadow:
    inset 0 0 0 1px rgba(1, 7, 12, 0.82),
    inset 0 0 36px rgba(0, 0, 0, 0.46);
}

.game-over-overlay .game-over-panel::after {
  content: "";
  position: absolute;
  inset: 23px;
  pointer-events: none;
  border-top: 1px solid rgba(253, 217, 139, 0.44);
  border-bottom: 1px solid rgba(253, 217, 139, 0.30);
  opacity: 0.86;
}

.game-over-overlay .game-over-panel > * {
  position: relative;
  z-index: 1;
}

.game-over-header {
  position: relative;
  max-width: 980px;
  padding: 9px 0 0;
  text-align: left;
}

.game-over-kicker {
  color: #f1cf7b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 1.65vw, 28px);
  font-weight: 700;
  letter-spacing: 0.085em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.game-over-crest {
  position: absolute;
  top: -20px;
  left: min(57vw, 840px);
  width: clamp(58px, 6.6vw, 92px);
  height: auto;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(234, 184, 79, 0.28));
  opacity: 0.94;
}

.game-over-overlay .game-over-panel h2 {
  max-width: 100%;
  margin: clamp(20px, 2vw, 34px) 0 8px;
  color: var(--result-color);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(68px, 10.7vw, 152px);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 0.82;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(65, 13, 5, 0.92),
    0 0 16px color-mix(in srgb, var(--result-color) 68%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.88);
}

.game-over-rule {
  display: block;
  width: min(690px, 85%);
  height: 15px;
  margin: clamp(18px, 2.4vw, 33px) 0 20px;
  border-top: 1px solid rgba(239, 190, 92, 0.78);
  border-bottom: 1px solid rgba(110, 70, 25, 0.62);
  background: linear-gradient(90deg, transparent 0 47%, #efbd56 47% 53%, transparent 53% 100%) center / 100% 3px no-repeat;
  filter: drop-shadow(0 2px 2px #000);
}

.game-over-summary {
  max-width: 780px;
  margin: 0;
  color: #f0e2c6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.35vw, 42px);
  line-height: 1.12;
  text-shadow: 0 3px 10px #000;
}

.game-over-stats {
  width: min(1260px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 25px);
  margin: clamp(40px, 5.4vw, 76px) 0 clamp(30px, 4vw, 58px);
}

.game-over-overlay .game-over-stat {
  position: relative;
  display: grid;
  grid-template-columns: clamp(47px, 4.8vw, 70px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: clamp(118px, 12.6vw, 174px);
  padding: clamp(16px, 1.9vw, 27px);
  border: 1px solid rgba(230, 180, 81, 0.70);
  border-radius: 8px;
  background:
    linear-gradient(125deg, rgba(8, 28, 42, 0.94), rgba(3, 11, 18, 0.83)),
    rgba(3, 11, 18, 0.88);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 231, 164, 0.12),
    inset 0 -3px 0 color-mix(in srgb, var(--result-color) 42%, #c7973d);
}

.game-over-overlay .game-over-stat::before,
.game-over-overlay .game-over-stat::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(239, 191, 91, 0.72);
  background: #07131c;
  transform: translateY(-50%) rotate(45deg);
}

.game-over-overlay .game-over-stat::before { left: -9px; }
.game-over-overlay .game-over-stat::after { right: -9px; }

.game-over-stat-icon {
  grid-row: 1 / span 2;
  align-self: center;
  width: clamp(34px, 4vw, 58px);
  height: clamp(34px, 4vw, 58px);
  color: transparent;
  font-size: 0;
  text-align: center;
  background: url('../../assets/ui/tactical-crest-mark.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.88)) sepia(0.24) saturate(1.12);
  opacity: 0.92;
}

.game-over-stat-player .game-over-stat-icon {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.88)) sepia(0.32) saturate(1.4) hue-rotate(160deg);
}

.game-over-stat-opponent .game-over-stat-icon {
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.88)) sepia(0.62) saturate(1.6) hue-rotate(320deg);
}

.game-over-overlay .game-over-stat strong,
.game-over-overlay .game-over-stat span:not(.game-over-stat-icon) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-over-overlay .game-over-stat strong {
  align-self: end;
  color: #f5dfaa;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3.5vw, 54px);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1;
  text-shadow: 0 2px 8px #000;
}

.game-over-overlay .game-over-stat span:not(.game-over-stat-icon) {
  align-self: start;
  margin-top: 7px;
  color: #b9c8cc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.6vw, 23px);
  letter-spacing: 0.035em;
  text-transform: lowercase;
}

.game-over-actions {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(15px, 2.2vw, 31px);
}

.game-over-panel .game-over-actions button {
  min-height: clamp(75px, 8.1vw, 112px);
  border: 2px solid rgba(244, 201, 103, 0.82);
  border-radius: 8px;
  color: #f8e4af;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.7vw, 41px);
  font-weight: 700;
  letter-spacing: 0.018em;
  text-shadow: 0 2px 8px #000;
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 244, 195, 0.34),
    inset 0 -3px 0 rgba(0, 0, 0, 0.38);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.game-over-panel .game-over-actions .secondary-btn {
  background: linear-gradient(135deg, #173f62, #071a2c 72%);
}

.game-over-panel .game-over-actions .primary-btn.accent {
  background: linear-gradient(135deg, #9d2e20, #4d120e 76%);
}

.game-over-panel .game-over-actions button:hover,
.game-over-panel .game-over-actions button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.14) saturate(1.08);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.62),
    0 0 24px rgba(240, 188, 81, 0.26),
    inset 0 1px 0 rgba(255, 244, 195, 0.46),
    inset 0 -3px 0 rgba(0, 0, 0, 0.30);
}

@media (max-width: 840px) {
  .game-over-overlay { align-items: flex-start; }
  .game-over-overlay .game-over-panel { min-height: auto; }
  .game-over-crest { right: 4px; left: auto; }
  .game-over-stats,
  .game-over-actions { grid-template-columns: 1fr; }
  .game-over-stats { margin-top: 34px; }
}

@media (max-height: 780px) and (min-width: 841px) {
  .game-over-overlay .game-over-panel { padding: 24px clamp(42px, 4.8vw, 62px); }
  .game-over-header { padding-top: 2px; }
  .game-over-kicker { font-size: clamp(15px, 1.45vw, 22px); }
  .game-over-crest { top: -9px; }
  .game-over-overlay .game-over-panel h2 {
    margin: 16px 0 5px;
    font-size: clamp(72px, 8.7vw, 116px);
  }
  .game-over-rule { height: 10px; margin: 12px 0 13px; }
  .game-over-summary { font-size: clamp(22px, 1.9vw, 30px); }
  .game-over-stats { margin: 26px 0 24px; }
  .game-over-overlay .game-over-stat { min-height: 92px; padding: 14px; }
  .game-over-panel .game-over-actions button { min-height: 72px; }
}

@media (max-width: 520px) {
  .game-over-overlay { padding: 11px; }
  .game-over-overlay .game-over-panel { width: calc(100vw - 22px); padding: 29px 23px; }
  .game-over-overlay .game-over-panel::after { inset: 17px; }
  .game-over-crest { top: 0; width: 54px; }
  .game-over-overlay .game-over-panel h2 { font-size: clamp(57px, 19vw, 90px); }
  .game-over-summary { font-size: 23px; }
}

/* Key art exclusivo por modo: fundos PNG gerados para a abertura. */
#start-screen .mode-btn[data-mode="single"] {
  --mode-key-art: url('../../assets/ui/modes/single-campaign-keyart-v1.webp');
  --mode-key-position: center 62%;
  --mode-key-glow: rgba(64, 149, 224, 0.30);
}

#start-screen .mode-btn[data-mode="dual"] {
  --mode-key-art: url('../../assets/ui/modes/local-duel-keyart-v1.webp');
  --mode-key-position: center 58%;
  --mode-key-glow: rgba(221, 109, 66, 0.24);
}

#start-screen .mode-btn[data-mode="chess"] {
  --mode-key-art: url('../../assets/ui/modes/war-mode-locked-keyart-v1.webp');
  --mode-key-position: center 68%;
  --mode-key-glow: rgba(181, 142, 76, 0.10);
}

#start-screen .mode-btn[data-mode] {
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(1, 7, 13, 0.72) 0%, rgba(2, 10, 17, 0.42) 54%, rgba(2, 8, 14, 0.14) 100%),
    linear-gradient(180deg, rgba(2, 10, 16, 0.10), rgba(2, 7, 13, 0.50)),
    var(--mode-key-art) var(--mode-key-position) / cover no-repeat;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 236, 175, 0.18),
    inset 0 -3px 0 var(--mode-key-glow);
}

#start-screen .mode-btn[data-mode]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 78% 54%, var(--mode-key-glow), transparent 43%);
  mix-blend-mode: screen;
}

#start-screen .mode-btn[data-mode]:hover:not(:disabled) {
  background:
    linear-gradient(90deg, rgba(1, 7, 13, 0.62) 0%, rgba(2, 10, 17, 0.25) 55%, rgba(2, 8, 14, 0.06) 100%),
    linear-gradient(180deg, rgba(2, 10, 16, 0.04), rgba(2, 7, 13, 0.31)),
    var(--mode-key-art) var(--mode-key-position) / cover no-repeat;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.58),
    0 0 28px var(--mode-key-glow),
    inset 0 0 0 1px rgba(255, 240, 184, 0.34),
    inset 0 -3px 0 var(--mode-key-glow);
}

#start-screen .mode-btn[data-mode="single"] .mode-icon {
  color: #e9f4ff;
  background: linear-gradient(180deg, rgba(17, 66, 103, 0.94), rgba(3, 17, 31, 0.98));
}

#start-screen .mode-btn[data-mode="dual"] .mode-icon {
  color: #ffe5ab;
  background: linear-gradient(180deg, rgba(73, 42, 61, 0.94), rgba(18, 10, 19, 0.98));
}

#start-screen .mode-btn[data-mode="chess"] {
  opacity: 0.68;
  filter: grayscale(0.64) brightness(0.70);
}

#start-screen .mode-btn[data-mode="chess"] .mode-icon {
  color: #b4ada0;
  background: linear-gradient(180deg, rgba(45, 44, 43, 0.94), rgba(10, 12, 14, 0.98));
}

/* --- Pré-jogo: molduras unificadas e telhas com leitura de tabuleiro --- */
:root {
  --pre-frame-radius: 4px;
  --pre-inner-radius: 2px;
  --pre-frame-border: rgba(235, 190, 94, 0.76);
  --pre-inner-border: rgba(111, 202, 218, 0.26);
  --pre-surface-deep: rgba(4, 13, 21, 0.98);
  --pre-surface-mid: rgba(11, 32, 48, 0.98);
  --pre-royal-gold: #e9bd62;
  --pre-royal-light: #fff0b4;
  --pre-royal-blue: #071827;
}

/* Remove os três pontos decorativos que imitavam uma janela de aplicativo. */
.panel::after,
.hint-card::after,
#start-screen .panel::after {
  display: none !important;
}

/* Filetes de canto: ornamentação medieval, sem ícones de janela moderna. */
#house-screen .panel::after,
#instructions-modal .panel::after,
#confirmation-modal .panel::after,
#ranking-modal .panel::after,
#rules-modal .panel::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 12px;
  top: 12px;
  right: 12px;
  bottom: 12px;
  left: 12px;
  width: auto;
  height: auto;
  pointer-events: none;
  border: 1px solid rgba(233, 189, 98, 0.28);
  border-radius: var(--pre-inner-radius);
  background:
    linear-gradient(90deg, var(--pre-royal-gold) 0 34px, transparent 34px calc(100% - 34px), var(--pre-royal-gold) calc(100% - 34px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--pre-royal-gold) 0 34px, transparent 34px calc(100% - 34px), var(--pre-royal-gold) calc(100% - 34px)) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, var(--pre-royal-gold) 0 34px, transparent 34px calc(100% - 34px), var(--pre-royal-gold) calc(100% - 34px)) left / 1px 100% no-repeat,
    linear-gradient(0deg, var(--pre-royal-gold) 0 34px, transparent 34px calc(100% - 34px), var(--pre-royal-gold) calc(100% - 34px)) right / 1px 100% no-repeat;
  box-shadow: none;
  opacity: 0.72;
}

#house-screen .panel,
#instructions-modal .panel,
#confirmation-modal .panel,
#ranking-modal .panel,
#rules-modal .panel {
  border: 1px solid var(--pre-frame-border);
  border-radius: var(--pre-frame-radius);
  background:
    linear-gradient(145deg, rgba(13, 34, 50, 0.99), var(--pre-surface-deep)),
    radial-gradient(circle at 50% 0%, rgba(104, 195, 214, 0.10), transparent 42%);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(255, 235, 177, 0.08),
    inset 0 0 0 5px rgba(0, 0, 0, 0.12);
}

#house-screen .panel::before,
#instructions-modal .panel::before,
#confirmation-modal .panel::before,
#ranking-modal .panel::before,
#rules-modal .panel::before,
.side-menu::before {
  inset: 7px;
  border: 1px solid var(--pre-inner-border);
  border-radius: var(--pre-inner-radius);
}

#house-screen .house-card,
#start-screen .mode-btn,
#start-screen .player-field,
#start-screen #ranking-btn,
.side-menu,
.menu-button,
.menu-action {
  border-radius: var(--pre-frame-radius);
}

#house-screen .house-card {
  border-width: 1px;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 238, 181, 0.10),
    inset 0 -3px 0 color-mix(in srgb, var(--house-accent) 80%, #f5c969);
}

#house-screen .house-card::after {
  inset: 6px;
  border-radius: var(--pre-inner-radius);
  background:
    linear-gradient(90deg, rgba(255, 240, 180, 0.70) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 240, 180, 0.70) calc(100% - 24px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(255, 240, 180, 0.70) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 240, 180, 0.70) calc(100% - 24px)) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(255, 240, 180, 0.70) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 240, 180, 0.70) calc(100% - 24px)) left / 1px 100% no-repeat,
    linear-gradient(0deg, rgba(255, 240, 180, 0.70) 0 24px, transparent 24px calc(100% - 24px), rgba(255, 240, 180, 0.70) calc(100% - 24px)) right / 1px 100% no-repeat;
}

/* O painel de terreno passa a parecer um mostruário de peças, não um menu genérico. */
.side-menu {
  border-radius: var(--pre-frame-radius);
  background:
    linear-gradient(180deg, rgba(12, 35, 51, 0.98), rgba(3, 13, 22, 0.99)),
    radial-gradient(circle at 90% 0%, rgba(118, 217, 236, 0.10), transparent 42%);
  box-shadow:
    -14px 20px 42px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 4px rgba(1, 6, 10, 0.22);
}

.menu-button {
  min-height: 76px;
  margin-bottom: 10px;
  border: 1px solid rgba(242, 189, 88, 0.54);
  background:
    linear-gradient(100deg, rgba(10, 37, 55, 0.98), rgba(4, 15, 25, 0.98)),
    linear-gradient(90deg, rgba(118, 217, 236, 0.08), transparent 45%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 4px 0 0 rgba(118, 217, 236, 0.18),
    0 5px 10px rgba(0, 0, 0, 0.24);
}

.menu-button img {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(242, 189, 88, 0.76);
  border-radius: 0;
  clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%);
  background: #06121d;
  filter: saturate(0.88) contrast(1.08);
}

.menu-button .menu-label {
  color: #f2d68f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-align: left;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72);
}

.menu-button.is-selected {
  border-color: #fff0bd;
  background: linear-gradient(100deg, rgba(28, 91, 119, 0.98), rgba(8, 28, 44, 0.99));
  box-shadow:
    inset 4px 0 0 #f3c86a,
    inset 0 0 0 1px rgba(255, 240, 189, 0.30),
    0 0 16px rgba(93, 200, 235, 0.14);
}

.menu-action {
  border-radius: var(--pre-frame-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -3px 0 rgba(0, 0, 0, 0.24),
    0 5px 10px rgba(0, 0, 0, 0.24);
}

#instructions-modal .panel,
#confirmation-modal .panel,
#ranking-modal .panel,
#rules-modal .panel {
  max-width: min(680px, calc(100vw - 32px));
}

/* ============================================================
   ROYAL PREMIUM — passada final de luxo
   Referência: Medieval Wars + Zeptolab (King of Thieves),
   com estética de ouro, riqueza e reinado.
   ============================================================ */
:root {
  --royal-gold-1: #fbe9a6;
  --royal-gold-2: #f0b429;
  --royal-gold-3: #c98a1b;
  --royal-gold-4: #8a5a12;
  --royal-purple: #3a1f5c;
  --royal-purple-deep: #1a0e30;
  --royal-maroon: #6e1f2e;
  --royal-ivory: #fdf6e3;
  --royal-ink: #0a0812;
  --royal-navy: #0d0a1a;
  --royal-font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --royal-font-body: "Cormorant Garamond", Georgia, serif;
}

/* --- Tipografia real: Cinzel para títulos, Cormorant para prosa --- */
.brand-wordmark,
.command-brand,
.command-status strong,
.battle-side strong,
.battle-center strong,
.house-card strong,
.menu-label,
.game-over-kicker,
.game-over-summary,
.game-over-overlay .game-over-stat strong,
.ranking-subtitle,
.side-menu h2,
.hud-top h1,
#house-screen h2,
.game-over-overlay .game-over-panel h2,
#start-screen .mode-btn,
#start-screen .mode-copy {
  font-family: var(--royal-font-display);
}

.hero-copy,
#start-screen .muted,
#house-screen .muted,
.game-over-summary,
.game-over-overlay .game-over-stat span:not(.game-over-stat-icon) {
  font-family: var(--royal-font-body);
}

/* --- Fundo: reino noturno com brilho de ouro e púrpura real --- */
body {
  background:
    radial-gradient(circle at 50% -12%, rgba(240, 180, 41, 0.16), transparent 36%),
    radial-gradient(circle at 12% 88%, rgba(58, 31, 92, 0.34), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(110, 31, 46, 0.22), transparent 34%),
    linear-gradient(150deg, #0a0812 0%, #120b22 46%, #0a0812 100%);
}

body::before {
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(251, 233, 166, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(251, 233, 166, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* --- Painéis: moldura dupla de ouro com filigrana de canto --- */
.panel,
.game-over-panel,
.ranking-modal {
  border: 1px solid rgba(240, 180, 41, 0.85);
  border-radius: 6px;
  background:
    linear-gradient(150deg, rgba(26, 14, 48, 0.98), rgba(10, 8, 18, 0.99)),
    radial-gradient(circle at 50% 0%, rgba(240, 180, 41, 0.10), transparent 46%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(251, 233, 166, 0.10),
    inset 0 0 0 1px rgba(240, 180, 41, 0.22),
    inset 0 0 60px rgba(0, 0, 0, 0.42);
}

/* Filetes de canto em ouro (ornamento de coroa) */
.panel::before,
.game-over-panel::before,
.ranking-modal::before {
  inset: 9px;
  border: 1px solid rgba(240, 180, 41, 0.30);
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--royal-gold-2) 0 30px, transparent 30px calc(100% - 30px), var(--royal-gold-2) calc(100% - 30px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--royal-gold-2) 0 30px, transparent 30px calc(100% - 30px), var(--royal-gold-2) calc(100% - 30px)) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, var(--royal-gold-2) 0 30px, transparent 30px calc(100% - 30px), var(--royal-gold-2) calc(100% - 30px)) left / 1px 100% no-repeat,
    linear-gradient(0deg, var(--royal-gold-2) 0 30px, transparent 30px calc(100% - 30px), var(--royal-gold-2) calc(100% - 30px)) right / 1px 100% no-repeat;
  opacity: 0.55;
}

/* --- Botões: ouro metálico para ações principais --- */
.primary-btn:not(.accent) {
  color: #3a2405;
  border: 1px solid #f6d365;
  background:
    linear-gradient(180deg, #fbe9a6 0%, #f6d365 32%, #eeb42a 58%, #d99a1f 80%, #b97a14 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(90, 50, 5, 0.45),
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.primary-btn:not(.accent):hover {
  border-color: #fff3c4;
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 0 rgba(90, 50, 5, 0.4),
    0 8px 0 rgba(0, 0, 0, 0.32),
    0 18px 30px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(240, 180, 41, 0.4);
}

.primary-btn:not(.accent):active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(90, 50, 5, 0.4),
    0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Ação de destaque: veludo real (burgundy) com texto dourado */
.primary-btn.accent {
  color: #fbe9a6;
  border: 1px solid #c98a1b;
  background:
    linear-gradient(180deg, #7a2436 0%, #5a1626 45%, #3c0d18 100%),
    radial-gradient(circle at 50% 0%, rgba(240, 180, 41, 0.22), transparent 60%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 6px 0 rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.35);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.primary-btn.accent:hover {
  border-color: #f6d365;
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 8px 0 rgba(0, 0, 0, 0.32),
    0 18px 30px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(110, 31, 46, 0.5);
}

.primary-btn.accent:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Botões secundários: aço real escuro com filete de ouro */
.secondary-btn {
  color: #f6d365;
  border: 1px solid rgba(240, 180, 41, 0.6);
  background:
    linear-gradient(180deg, rgba(30, 18, 52, 0.98), rgba(12, 8, 24, 0.99)),
    radial-gradient(circle at 50% 0%, rgba(240, 180, 41, 0.12), transparent 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.3);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.secondary-btn:hover {
  border-color: #f6d365;
  color: #fbe9a6;
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 7px 0 rgba(0, 0, 0, 0.28),
    0 16px 26px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(240, 180, 41, 0.3);
}

.secondary-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* --- Cards de modo: moldura de ouro com brilho --- */
#start-screen .mode-btn {
  border: 1px solid rgba(240, 180, 41, 0.85);
  border-radius: 8px;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(251, 233, 166, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}

#start-screen .mode-btn[data-mode] {
  background:
    linear-gradient(90deg, rgba(10, 8, 18, 0.78) 0%, rgba(20, 12, 34, 0.4) 55%, rgba(10, 8, 18, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 8, 18, 0.1), rgba(10, 8, 18, 0.5)),
    var(--mode-key-art) var(--mode-key-position) / cover no-repeat;
}

#start-screen .mode-btn[data-mode]:hover:not(:disabled) {
  border-color: #fbe9a6;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.6),
    0 0 30px var(--mode-key-glow),
    inset 0 0 0 1px rgba(251, 233, 166, 0.4),
    inset 0 -3px 0 var(--mode-key-glow);
}

#start-screen .mode-icon {
  border: 1px solid rgba(240, 180, 41, 0.9);
  background: linear-gradient(180deg, rgba(30, 18, 52, 0.96), rgba(10, 8, 18, 0.98));
  box-shadow: inset 0 0 0 4px rgba(240, 180, 41, 0.12), 0 7px 12px rgba(0, 0, 0, 0.4);
}

#start-screen .mode-copy {
  color: #fbe9a6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

#start-screen .mode-copy small {
  color: #d8c9a8;
}

/* --- Wordmark: ouro gravado com brilho --- */
#start-screen .brand-wordmark {
  font-family: var(--royal-font-display);
  font-weight: 800;
  color: #f6d365;
  -webkit-text-stroke: 1px rgba(255, 239, 182, 0.6);
  text-shadow:
    0 2px 0 #6b4a12,
    0 4px 0 #3a2405,
    0 8px 20px rgba(0, 0, 0, 0.85),
    0 0 34px rgba(240, 180, 41, 0.35);
}

#start-screen .brand-rule {
  background: linear-gradient(90deg, transparent, #f6d365 12%, #fff3c4 50%, #f6d365 88%, transparent);
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.5);
}

#start-screen .brand-sigil {
  color: #fbe9a6;
  text-shadow: 0 0 16px rgba(240, 180, 41, 0.7);
}

/* --- Cards de casa: veludo real com filete de ouro --- */
#house-screen .house-card {
  border: 1px solid color-mix(in srgb, var(--house-accent) 60%, #f0b429);
  border-radius: 8px;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(251, 233, 166, 0.14),
    inset 0 -4px 0 color-mix(in srgb, var(--house-accent) 80%, #f0b429);
}

#house-screen .house-card::after {
  inset: 6px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(251, 233, 166, 0.8) 0 22px, transparent 22px calc(100% - 22px), rgba(251, 233, 166, 0.8) calc(100% - 22px)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(251, 233, 166, 0.8) 0 22px, transparent 22px calc(100% - 22px), rgba(251, 233, 166, 0.8) calc(100% - 22px)) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(251, 233, 166, 0.8) 0 22px, transparent 22px calc(100% - 22px), rgba(251, 233, 166, 0.8) calc(100% - 22px)) left / 1px 100% no-repeat,
    linear-gradient(0deg, rgba(251, 233, 166, 0.8) 0 22px, transparent 22px calc(100% - 22px), rgba(251, 233, 166, 0.8) calc(100% - 22px)) right / 1px 100% no-repeat;
}

#house-screen .house-card strong {
  color: #f6d365;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

#house-screen .house-card .house-mark {
  border-color: color-mix(in srgb, var(--house-accent) 70%, #f6d365);
  color: color-mix(in srgb, var(--house-accent) 60%, #fbe9a6);
}

/* --- Command deck: barra de comando real --- */
.command-deck {
  border-bottom: 1px solid rgba(240, 180, 41, 0.7);
  background:
    linear-gradient(90deg, rgba(12, 8, 24, 0.99), rgba(26, 14, 48, 0.97) 42%, rgba(10, 8, 18, 0.99)),
    linear-gradient(180deg, rgba(251, 233, 166, 0.08), transparent 40%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 233, 166, 0.14);
}

.command-deck::after {
  background: linear-gradient(90deg, transparent, rgba(240, 180, 41, 0.5) 16%, #f6d365 50%, rgba(240, 180, 41, 0.5) 84%, transparent);
}

.command-brand {
  color: #f6d365;
  font-family: var(--royal-font-display);
  font-weight: 700;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.85);
}

.command-status strong {
  color: #fbe9a6;
  font-family: var(--royal-font-display);
}

.command-status span {
  color: #b9a06a;
}

.command-tab.is-active,
.command-tab:hover,
.command-icon:hover {
  color: #fbe9a6;
  background:
    linear-gradient(180deg, rgba(58, 31, 92, 0.5), rgba(10, 8, 18, 0.06)),
    radial-gradient(circle at 50% 8%, rgba(240, 180, 41, 0.24), transparent 64%);
  box-shadow: inset 0 -3px 0 #f0b429, inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.command-icon {
  border: 1px solid rgba(240, 180, 41, 0.55);
  background: rgba(10, 8, 18, 0.6);
}

/* --- Battle bar: faixa de batalha com ouro --- */
.battle-bar {
  border: 1px solid rgba(240, 180, 41, 0.8);
  border-radius: 4px 4px 12px 12px;
  background:
    linear-gradient(90deg, rgba(26, 14, 48, 0.98), rgba(10, 8, 18, 0.96) 50%, rgba(40, 12, 24, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(240, 180, 41, 0.2), transparent 52%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(251, 233, 166, 0.16), inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}

.battle-side strong,
.battle-center strong {
  color: #f6d365;
  font-family: var(--royal-font-display);
}

.battle-center span {
  color: #d8a94a;
}

.battle-center {
  border-inline-color: rgba(240, 180, 41, 0.35);
}

/* --- HUD / hint card: painel de comando tático --- */
.hint-card {
  border: 1px solid rgba(240, 180, 41, 0.6);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(26, 14, 48, 0.97), rgba(10, 8, 18, 0.98)),
    radial-gradient(circle at 0 0, rgba(240, 180, 41, 0.12), transparent 44%);
  box-shadow: 14px 20px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(251, 233, 166, 0.12), inset 0 0 0 5px rgba(0, 0, 0, 0.2);
}

.hint-card::before {
  inset: 7px;
  border-color: rgba(240, 180, 41, 0.24);
  border-radius: 6px;
}

.hud-top h1 {
  color: #f6d365;
  font-family: var(--royal-font-display);
}

.hud-top h1 span {
  color: #d8a94a;
}

.hud-top {
  border-bottom-color: rgba(240, 180, 41, 0.4);
}

.turn-strip {
  border-color: rgba(240, 180, 41, 0.4);
  background: rgba(6, 4, 12, 0.6);
}

.turn-strip span:first-child {
  color: #f6d365;
}

.game-tips {
  border-top-color: rgba(240, 180, 41, 0.35);
  color: #d8c9a8;
}

.game-tips div {
  border-left-color: #f0b429;
}

.battle-log {
  border-top-color: rgba(240, 180, 41, 0.35);
}

.battle-log div {
  border-color: rgba(240, 180, 41, 0.35);
  background: rgba(6, 4, 12, 0.6);
  color: #d8c9a8;
}

/* --- Side menus: mostruário real --- */
.side-menu {
  border: 1px solid rgba(240, 180, 41, 0.7);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(26, 14, 48, 0.98), rgba(8, 6, 16, 0.99)),
    radial-gradient(circle at 90% 0%, rgba(240, 180, 41, 0.12), transparent 42%);
  box-shadow: -14px 20px 42px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(251, 233, 166, 0.1), inset 0 0 0 5px rgba(0, 0, 0, 0.2);
}

.side-menu::before {
  inset: 7px;
  border-color: rgba(240, 180, 41, 0.28);
  border-radius: 6px;
}

.side-menu h2 {
  color: #f6d365;
  font-family: var(--royal-font-display);
}

.side-menu .menu-kicker {
  color: #d8a94a;
}

.menu-button {
  border: 1px solid rgba(240, 180, 41, 0.6);
  border-radius: 8px;
  color: #f6d365;
  background:
    linear-gradient(100deg, rgba(30, 18, 52, 0.98), rgba(10, 8, 18, 0.98)),
    linear-gradient(90deg, rgba(240, 180, 41, 0.1), transparent 45%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 4px 0 0 rgba(240, 180, 41, 0.2), 0 5px 10px rgba(0, 0, 0, 0.28);
}

.menu-button img {
  border: 1px solid rgba(240, 180, 41, 0.8);
  background: #0a0812;
}

.menu-button .menu-label {
  color: #f6d365;
  font-family: var(--royal-font-display);
  font-weight: 600;
}

.menu-button.is-selected {
  border-color: #fbe9a6;
  background: linear-gradient(100deg, rgba(58, 31, 92, 0.98), rgba(20, 10, 36, 0.99));
  box-shadow: inset 4px 0 0 #f0b429, inset 0 0 0 1px rgba(251, 233, 166, 0.3), 0 0 18px rgba(240, 180, 41, 0.2);
}

.menu-action {
  border-radius: 8px;
}

/* --- Legendas táticas --- */
.tactical-legend {
  border-color: rgba(240, 180, 41, 0.45);
  background: rgba(10, 8, 18, 0.88);
}

.tactical-legend span {
  border-color: rgba(240, 180, 41, 0.2);
  background: rgba(26, 14, 48, 0.6);
  color: #d8c9a8;
}

/* --- Fim de jogo: cerimônia de ouro --- */
.game-over-overlay .game-over-panel {
  border: 2px solid rgba(240, 180, 41, 0.9);
  border-radius: 10px;
  background-image:
    linear-gradient(90deg, rgba(10, 8, 18, 0.97) 0%, rgba(20, 12, 34, 0.88) 57%, rgba(10, 8, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 8, 18, 0.2) 0%, rgba(10, 8, 18, 0.7) 100%),
    url('../../assets/ui/opening-background-aa.webp');
}

.game-over-overlay .game-over-panel::before {
  inset: 12px;
  border-color: rgba(240, 180, 41, 0.55);
  border-radius: 6px;
}

.game-over-kicker {
  color: #f6d365;
  font-family: var(--royal-font-display);
}

.game-over-overlay .game-over-panel h2 {
  font-family: var(--royal-font-display);
}

.game-over-rule {
  border-top-color: rgba(240, 180, 41, 0.85);
  border-bottom-color: rgba(110, 70, 25, 0.7);
  background: linear-gradient(90deg, transparent 0 47%, #f6d365 47% 53%, transparent 53% 100%) center / 100% 3px no-repeat;
}

.game-over-overlay .game-over-stat {
  border-color: rgba(240, 180, 41, 0.75);
  background: linear-gradient(125deg, rgba(26, 14, 48, 0.95), rgba(10, 8, 18, 0.88));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(251, 233, 166, 0.12), inset 0 -3px 0 color-mix(in srgb, var(--result-color) 42%, #f0b429);
}

.game-over-overlay .game-over-stat strong {
  color: #f6d365;
  font-family: var(--royal-font-display);
}

.game-over-panel .game-over-actions button {
  border: 2px solid rgba(240, 180, 41, 0.85);
  color: #fbe9a6;
  font-family: var(--royal-font-display);
}

.game-over-panel .game-over-actions .secondary-btn {
  background: linear-gradient(135deg, #2a1440, #120a24 72%);
}

.game-over-panel .game-over-actions .primary-btn.accent {
  background: linear-gradient(135deg, #7a2436, #3c0d18 76%);
}

/* --- Ranking: filetes de ouro --- */
.ranking-row {
  border-color: rgba(240, 180, 41, 0.55);
  background: rgba(6, 4, 12, 0.7);
  color: #f6d365;
}

.ranking-row span {
  color: #b9a06a;
}

.ranking-subtitle {
  color: #f6d365;
}

/* --- Brilho sutil nos botões de ouro --- */
@media (prefers-reduced-motion: no-preference) {
  .primary-btn:not(.accent) {
    background-image:
      linear-gradient(180deg, #fbe9a6 0%, #f6d365 32%, #eeb42a 58%, #d99a1f 80%, #b97a14 100%),
      linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    background-size: 100% 100%, 220% 100%;
    background-repeat: no-repeat;
    animation: royal-shimmer 5.5s ease-in-out infinite;
  }
}

@keyframes royal-shimmer {
  0% { background-position: 0 0, -220% 0; }
  55% { background-position: 0 0, 220% 0; }
  100% { background-position: 0 0, 220% 0; }
}

/* --- Ajustes responsivos da passada real --- */
@media (max-width: 720px) {
  .primary-btn:not(.accent),
  .primary-btn.accent,
  .secondary-btn {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.3),
      0 4px 0 rgba(0, 0, 0, 0.3),
      0 8px 16px rgba(0, 0, 0, 0.3);
  }
}

/* Readable tactical reference and compact help across all board sizes. */
:root { --ui-reading-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.camera-tools { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.camera-tools button { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #b68c44; border-radius: 8px; background: rgba(10, 13, 22, .94); color: #f6d365; font: 24px/1 system-ui, sans-serif; box-shadow: 0 2px 8px #0008; cursor: pointer; }
.camera-tools button:hover { background: #2a2234; border-color: #f6d365; }
.camera-tools button:focus-visible { outline: 2px solid #fff1b8; outline-offset: 3px; }
#board-viewport { display: flex; flex-direction: column; }
#board-surface { position: relative; order: 2; flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.pass-label-short { display: none; }
.modal { overflow-y: auto; overscroll-behavior: contain; }
.modal .panel {
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  padding: clamp(22px, 3vw, 36px);
}
.modal .panel:focus { outline: none; }
.modal .panel h2 { margin-top: 8px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.modal .panel p, .modal .panel li { font-family: var(--ui-reading-font); font-size: 14px; line-height: 1.65; color: #d6d5dc; }
.modal .panel h3 { font-family: var(--ui-reading-font); font-size: 14px; color: #f6d365; letter-spacing: .02em; }
.modal .panel .title-ornament { height: 25px; width: auto; max-width: 160px; object-fit: contain; margin: 10px 0 18px; }
.modal .panel > .primary-btn { min-height: 44px; margin-top: 18px; }
.onboarding-steps { list-style: none; padding: 0; counter-reset: onboarding; display: grid; gap: 18px; margin: 22px 0; }
.onboarding-steps li { position: relative; padding-left: 42px; counter-increment: onboarding; }
.onboarding-steps li::before { content: counter(onboarding, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #f6d365; font-size: 13px; font-weight: 700; border-bottom: 1px solid #8a6934; padding: 4px 0; }
.onboarding-steps strong { color: #f6eee0; font-size: 15px; }
.onboarding-steps p { margin: 5px 0 0; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 20px; }
.rules-grid section { border-top: 1px solid rgba(240, 180, 41, .24); padding-top: 10px; }
.rules-grid h3 { margin: 0 0 6px; }
.rules-grid p { margin: 0 0 8px; }
.piece-reference { margin-top: 20px; }
.piece-reference table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--ui-reading-font); text-align: left; line-height: 1.5; }
.piece-reference th, .piece-reference td { border-bottom: 1px solid rgba(240,180,41,.17); padding: 9px 7px; }
.piece-reference thead th { color: #f6d365; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.piece-reference tbody th { font-weight: 500; color: #dddbe3; }
.piece-reference td { color: #c4c4d2; }
.modal .panel .guide-note { font-size: 12px; color: #bdb7c7; }
.motion-setting { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; border: 1px solid rgba(240,180,41,.24); border-radius: 8px; padding: 12px; font-family: var(--ui-reading-font); font-size: 14px; color: #e9e1cf; cursor: pointer; }
.motion-setting input { width: 18px; height: 18px; accent-color: #f0b429; margin: 1px 0 0; }
.motion-setting small { display: block; margin-top: 4px; font-size: 12px; color: #bab5c4; line-height: 1.5; }
.command-actions { display: flex; align-items: center; justify-content: flex-end; }
.command-icon { min-width: 48px; min-height: 40px; }
.command-deck { grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.8fr) auto; }
#board-viewport > .battle-bar { position: relative; inset: auto; transform: none; order: 1; flex: 0 0 auto; width: 100%; min-width: 0; margin: 0; padding: 8px 16px 0; grid-template-areas: "player center pass opponent" "help help help help"; gap: 3px 12px; border: 0; border-bottom: 1px solid rgba(240,180,41,.35); border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#board-viewport > .battle-bar::before { display: none; }
#board-viewport > .battle-bar .battle-side > span { display: none; }
#board-viewport > .battle-bar .pass-turn { min-height: 38px; padding-block: 7px; box-shadow: none; }
#board-viewport > .tactical-legend { position: relative; inset: auto; transform: none; order: 3; flex: 0 0 auto; justify-content: center; flex-wrap: nowrap; width: 100%; max-width: none; max-height: 38px; margin: 0; padding: 5px 8px; border: 0; border-top: 1px solid rgba(240,180,41,.2); border-radius: 0; overflow-x: auto; }
#board-viewport > .tactical-legend span { flex: 0 0 auto; padding: 3px 5px; font-size: 10px; }
.battle-context { grid-area: help; min-width: 0; border-top: 1px solid rgba(240,180,41,.22); font-family: var(--ui-reading-font); }
.battle-context summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; cursor: pointer; list-style: none; color: #d5d2dc; font-size: 12px; line-height: 1.5; }
.battle-context summary::-webkit-details-marker { display: none; }
.battle-context summary:focus-visible { outline: 2px solid #fbe9a6; outline-offset: 3px; border-radius: 3px; }
.battle-context summary > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-label { flex-shrink: 0; color: #f6d365; font-size: 11px; }
.context-label span { display: inline-block; margin-left: 3px; }
.battle-context[open] .context-label span { transform: rotate(180deg); }
.battle-context-body { max-height: min(38dvh, 270px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 12px; font-size: 12px; line-height: 1.6; color: #d5d2dc; }
.battle-context-body ul { margin: 0; padding-left: 18px; }
.battle-context-body li + li { margin-top: 5px; }
#battle-context-status { margin: 0 0 8px; color: #f1d69d; }
#battle-context-status:empty { display: none; }
.battle-context.has-threat summary, .battle-context.has-threat #battle-context-status { color: #ffc4b0; }
.context-controls { border-top: 1px solid rgba(240,180,41,.15); padding-top: 9px; margin: 10px 0; color: #bdb7c7; }
.context-controls kbd { border: 1px solid #756548; border-radius: 3px; padding: 1px 4px; color: #e9e1cf; font: inherit; }
.context-colors { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.context-colors span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
#tactical-stage[data-phase="game"] { grid-template-areas: "context board"; grid-template-columns: clamp(250px, 22vw, 324px) minmax(0, 1fr); }
html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 1180px) {
  #tactical-stage[data-phase="game"] { grid-template-areas: "board"; grid-template-columns: minmax(0, 1fr); }
  #board-viewport > .battle-bar { grid-template-areas: "player center opponent" "pass pass pass" "help help help"; }
}
@media (max-width: 720px) {
  .command-deck { grid-template-columns: 1fr auto; }
  .command-brand { font-size: 16px; }
  .command-icon { width: 48px; min-width: 48px; font-size: 10px; margin-inline: 2px; }
  .modal { padding: 12px; }
  .modal .panel { max-height: calc(100dvh - 24px); max-width: calc(100vw - 24px); padding: 22px 18px; }
  .rules-grid { grid-template-columns: 1fr; gap: 12px; }
  .piece-reference th, .piece-reference td { padding: 8px 4px; }
  .piece-reference tbody th { max-width: 125px; }
  #tactical-stage { display: flex; flex-direction: column; gap: 8px; }
  #board-viewport { display: flex; flex-direction: column; flex: 1 1 0; min-height: 170px; height: auto; }
  #board-surface { position: relative; inset: auto; order: 2; flex: 1 1 0; width: 100%; }
  #tactical-stage > .side-menu { position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: min(40dvh, 320px); padding: 12px; }
  #tactical-stage > .side-menu h2 { margin: 0; font-size: 16px; }
  #tactical-stage > .side-menu .title-ornament, #tactical-stage > .side-menu .menu-kicker { display: none; }
  #tactical-stage > .side-menu .menu-scroll { margin-block: 8px; }
  #tactical-stage > .side-menu .menu-action { min-height: 38px; margin-top: 6px; font-size: 12px; }
  #tile-options, #piece-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #tactical-stage .menu-button { margin: 0; min-height: 52px; padding: 6px; grid-template-columns: 38px 1fr; gap: 6px; }
  #tactical-stage .menu-button img { width: 36px; height: 36px; }
  #tactical-stage .menu-button .menu-label { font-family: var(--ui-reading-font); font-size: 11px; line-height: 1.35; }
  #board-viewport > .battle-bar { position: relative; inset: auto; transform: none; order: 1; flex: 0 0 auto; width: 100%; margin: 0; padding: 5px 10px 0; gap: 3px 8px; border: 0; border-bottom: 1px solid rgba(240,180,41,.35); border-radius: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "player center opponent pass" "help help help help"; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
  #board-viewport > .battle-bar .pass-turn { width: auto; min-height: 40px; padding: 6px 8px; font-family: var(--ui-reading-font); font-size: 10px; letter-spacing: .02em; box-shadow: none; }
  .pass-label-long { display: none; }
  .pass-label-short { display: inline; }
  .battle-side > span { display: none; }
  .battle-side strong, .battle-center strong { font-size: 12px; }
  .battle-center { min-width: 84px; padding: 2px 6px; }
  .battle-side span, .battle-center span, .battle-side small { font-size: 9px; }
  .battle-context summary { min-height: 30px; font-size: 11px; }
  .battle-context-body { max-height: min(29dvh, 200px); }
}

@media (max-width: 720px) and (max-height: 560px) and (min-width: 520px) {
  #tactical-stage { display: grid; grid-template-areas: "board loadout"; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px; }
  #tactical-stage[data-phase="game"] { grid-template-areas: "board"; grid-template-columns: minmax(0, 1fr); }
  #board-viewport { min-height: 0; height: 100%; }
  #tactical-stage > .side-menu { height: 100%; min-height: 0; padding: 8px; }
  #tile-options, #piece-options { grid-template-columns: 1fr; }
  .battle-context-body { max-height: 100px; }
}

/* Results stay actionable without scrolling on phones and short displays. */
@media (max-width: 840px), (max-height: 560px) {
  .game-over-overlay { padding: 12px; align-items: center; }
  .game-over-overlay .game-over-panel {
    display: grid;
    gap: 18px;
    width: min(720px, calc(100vw - 24px));
    min-height: 0;
    max-height: calc(100dvh - 24px);
    padding: 24px;
    overflow-y: auto;
  }
  .game-over-overlay .game-over-panel::after { inset: 10px; }
  .game-over-header { padding: 0; }
  .game-over-kicker { font-size: 12px; }
  .game-over-crest { display: none; }
  .game-over-overlay .game-over-panel h2 { margin: 12px 0 8px; font-size: clamp(44px, 10vw, 68px); line-height: 1; }
  .game-over-rule { height: 6px; margin: 10px 0 12px; }
  .game-over-summary { font-size: 18px; line-height: 1.3; }
  .game-over-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .game-over-overlay .game-over-stat { min-height: 68px; padding: 12px 8px; grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .game-over-overlay .game-over-stat .game-over-stat-icon { display: none; }
  .game-over-overlay .game-over-stat::before, .game-over-overlay .game-over-stat::after { display: none; }
  .game-over-overlay .game-over-stat strong { font-size: clamp(15px, 3.2vw, 23px); line-height: 1.15; }
  .game-over-overlay .game-over-stat span:not(.game-over-stat-icon) { margin: 0; font: 11px/1.3 var(--ui-reading-font); }
  .game-over-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-over-panel .game-over-actions button { min-height: 48px; padding: 10px 8px; font-size: 15px; line-height: 1.3; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.25); }
}
.collection-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
#battle-dragon-status { color: #ffbd72; font: 11px/1.35 var(--ui-reading-font); text-align: center; }
#battle-dragon-status:empty, #battle-dragon-detail:empty { display: none; }
#battle-dragon-detail { color: #ffbd72; margin: 0 0 8px; }
@media (max-height: 560px) {
  .game-over-overlay .game-over-panel { gap: 14px; padding: 18px 22px; }
  .game-over-overlay .game-over-panel h2 { margin-top: 8px; font-size: clamp(40px, 8vw, 58px); }
  .game-over-summary { font-size: 16px; }
  .game-over-rule { margin: 7px 0 9px; }
}