:root {
  --bg: #171817;
  --panel: #222322;
  --panel-strong: #2d2d2b;
  --line: #5b574e;
  --line-bright: #b9a676;
  --text: #f5ead2;
  --muted: #c9bea7;
  --accent: #d8bd76;
  --accent-strong: #f1d99a;
  --danger: #d6614a;
  --blue: #5fa8c9;
  --red: #cf5d56;
  --green: #86b070;
  --purple: #9c7ebe;
  --colorless: #d8cfbc;
  font-family: "Segoe UI", "Arial Black", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Global scrollbar style, matching the gold/dark look introduced for Match History, applied
   everywhere (in-game chat, deckbuilder, admin area included) instead of only that one panel. */
html {
  scrollbar-color: rgba(216, 189, 118, 0.62) rgba(0, 0, 0, 0.22);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
}

*::-webkit-scrollbar-thumb {
  background: rgba(216, 189, 118, 0.62);
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(216, 189, 118, 0.8);
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(60deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.025) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.025) 75%),
    radial-gradient(circle at 22% 12%, rgba(216, 189, 118, 0.13), transparent 34%),
    linear-gradient(135deg, #111211, var(--bg) 58%, #252522);
  background-size: 72px 42px, 72px 42px, auto, auto;
  color: var(--text);
}

body.compact-gameplay {
  --game-ui-scale: 1;
}

body.match-active > #app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* High-resolution desktop players should not have to use browser zoom to read the board.
   Scale only active gameplay, leaving menu/deckbuilder/admin screens at their native size. */
@media (min-width: 1920px) and (min-height: 1080px) {
  body.compact-gameplay {
    --game-ui-scale: 1.12;
  }
}

@media (min-width: 2560px) and (min-height: 1380px) {
  body.compact-gameplay {
    --game-ui-scale: 1.28;
  }
}

@media (min-width: 3200px) and (min-height: 1800px) {
  body.compact-gameplay {
    --game-ui-scale: 1.45;
  }
}

@media (min-width: 3840px) and (min-height: 2100px) {
  body.compact-gameplay {
    --game-ui-scale: 1.6;
  }
}

@media (min-width: 1920px) and (min-height: 1080px) {
  body.compact-gameplay > #app {
    width: calc(100% / var(--game-ui-scale));
    min-height: calc(100vh / var(--game-ui-scale));
    min-height: calc(100dvh / var(--game-ui-scale));
    margin-inline: auto;
    transform: scale(var(--game-ui-scale));
    transform-origin: top center;
  }
}

.main-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    linear-gradient(60deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.025) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.025) 75%),
    rgb(12, 12, 12);
  background-size: 86px 50px, 86px 50px, auto;
}

.main-menu.hidden {
  display: none;
}

.landscape-gate {
  display: none;
}

.landscape-gate-card {
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(216, 189, 118, 0.62);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.1), transparent 44%),
    #20211f;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72);
  text-align: center;
}

.landscape-gate-card strong {
  color: var(--accent-strong);
  font-size: 18px;
  text-transform: uppercase;
}

.landscape-gate-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.landscape-gate-card button {
  min-height: 42px;
  border-color: rgba(216, 189, 118, 0.68);
  text-transform: uppercase;
}

.menu-panel {
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
  max-width: calc(100vw - 48px);
  margin: 0;
  padding: 28px;
  border: 1px solid rgba(216, 189, 118, 0.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.08), transparent 34%),
    rgb(28, 29, 28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 247, 218, 0.05);
}

.main-menu.deckbuilder-open {
  place-items: start center;
}

.main-menu.deckbuilder-open .menu-panel {
  width: min(1480px, calc(100vw - 48px));
  max-height: none;
  margin: 0 0 16px;
  padding: 20px;
}

.menu-panel h1,
.menu-panel p {
  margin: 0;
}

.legal-footer {
  color: var(--muted);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.match-row,
.secret-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 190px);
  gap: 8px;
}

.online-match-row {
  grid-template-columns: 1fr;
}

.online-match-section,
.solo-section {
  gap: 0;
}

.play-mode-toggle {
  width: 100%;
  min-height: 40px;
}

.play-mode-toggle.active {
  border-radius: 5px 5px 0 0;
  border-color: var(--accent);
  color: var(--accent-strong);
}

.play-mode-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(216, 189, 118, 0.38);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: rgba(12, 12, 12, 0.28);
}

.play-mode-panel[hidden] {
  display: none;
}

.lab-mode-section {
  display: grid;
}

.lab-mode-section button {
  width: 100%;
  min-height: 40px;
}

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

.online-mode-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.online-mode-caption {
  font-size: 11px;
  opacity: 0.65;
  text-align: center;
}

.online-ranked-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.online-ranked-row button {
  width: 100%;
  min-height: 40px;
}

.deck-select-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.deck-select-caption {
  font-size: 11px;
  opacity: 0.65;
}

.match-row select,
.secret-row input,
.match-row button,
.secret-row button {
  width: 100%;
  min-height: 40px;
}

.setup-cancel-match-btn {
  width: 100%;
  margin-top: 12px;
  background: #7a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.85;
}
.setup-cancel-match-btn:hover { opacity: 1; }

.auth-settings-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#deckbuilder-access-section {
  margin-bottom: -10px;
}

.auth-settings-block .menu-section {
  margin-top: 0;
}

.settings-toggle {
  width: 100%;
}

.discord-link-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.discord-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.discord-link-row + .discord-link-row {
  margin-top: 8px;
}

.discord-link-status {
  font-size: 12px;
  color: var(--muted);
}

.discord-connect-btn {
  background: #5865f2 !important;
  color: #fff !important;
}

.settings-delete-account-btn {
  width: 100%;
  margin-top: 14px;
  background: #7a1a1a !important;
  color: #fff !important;
  opacity: 0.75;
}
.settings-delete-account-btn:hover {
  opacity: 1;
}

.settings-audio-toggles {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.settings-audio-btn {
  min-width: 80px;
}

.volume-settings {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.volume-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.volume-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.settings-panel {
  display: none;
}

.main-menu.settings-open .settings-toggle-section {
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  padding-bottom: 0;
}

.main-menu.settings-open .settings-panel {
  display: block;
  padding: 14px 10px 10px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-top: none;
  border-radius: 0 0 7px 7px;
  background: rgba(12, 12, 12, 0.28);
}

.match-preferences {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.match-preferences label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}

.match-preferences input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.solo-section {
  gap: 8px;
}

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

.solo-deck-row select,
#tutorial-btn {
  width: 100%;
  min-height: 40px;
}

.solo-btn-row {
  display: grid;
  /* Was a hardcoded 3 columns for VS Solo / VS Bot / VS AI Bot - VS AI Bot is hidden (display:none)
     for now, not removed (see index.html), but a fixed 3-column grid still reserved its slot as
     empty space instead of letting the other 2 buttons split the row evenly. auto-fit collapses
     any 0-width (hidden) track automatically, so the remaining visible buttons share the row
     50/50 - and this still expands back to 3 even columns on its own if VS AI Bot ever becomes
     visible again. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}

.solo-btn-row button {
  width: 100%;
  min-height: 40px;
}

.menu-section.online-match-section,
.menu-section.solo-section {
  gap: 0;
}

.online-match-section .online-stats-bar {
  margin-bottom: 8px;
}

.match-history-section { gap: 8px; }

#match-history-btn {
  width: 100%;
  min-height: 40px;
  border-color: rgba(216, 189, 118, 0.62);
}

.main-menu.match-history-open { place-items: start center; }

.main-menu.match-history-open .menu-panel {
  width: min(520px, 100%);
  margin-bottom: 16px;
}

.match-history-content { min-width: 0; }
.history-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.rankings-tabs { grid-template-columns: 1fr 1fr 1fr; }
.rankings-content { margin-top: 12px; }
.rankings-table { width: 100%; }
.history-tabs button { min-height: 42px; text-transform: uppercase; letter-spacing: .08em; }
.history-tabs button.active { border-color: var(--accent); color: var(--accent-strong); background: rgba(216,189,118,.12); }
.history-tab-panel { min-width: 0; }
.tournament-history-list { display: grid; gap: 9px; }
.tournament-history-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .7fr) minmax(130px, .5fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
}
.tournament-history-card > span:first-child { display: grid; gap: 3px; }
.tournament-history-card small { color: var(--muted); }
.tournament-history-back { margin-bottom: 12px; }
.tournament-history-detail { display: grid; gap: 18px; }
.tournament-history-detail header { display: grid; gap: 7px; }
.tournament-history-detail h2, .tournament-history-detail p { margin: 0; }
.tournament-history-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.tournament-history-facts span { padding: 5px 8px; border: 1px solid rgba(216,189,118,.3); border-radius: 999px; color: var(--muted); }
.tournament-history-standings .is-current-player { background: rgba(216,189,118,.13); color: var(--accent-strong); }
@media (max-width: 700px) {
  body[data-site-page="history"] .menu-panel { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  .tournament-history-card { grid-template-columns: 1fr; gap: 7px; }
  .tournament-history-detail { overflow-x: auto; }
}

.stats-section { gap: 8px; }

#stats-btn {
  width: 100%;
  min-height: 40px;
  border-color: rgba(216, 189, 118, 0.62);
}

.main-menu.stats-open { place-items: start center; }

.main-menu.stats-open .menu-panel {
  width: min(520px, 100%);
  margin-bottom: 16px;
}

.stats-content { min-width: 0; }

.stats-overview-metrics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.stats-winrate-row,
.stats-mmr-row,
.stats-achievements-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 10px;
  text-align: center;
}

.stats-winrate-value,
.stats-mmr-value,
.stats-achievements-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1;
}

.stats-winrate-sub,
.stats-mmr-sub,
.stats-achievements-sub {
  font-size: 12px;
  opacity: 0.65;
}

.rankings-search { display: flex; gap: 8px; margin: 12px 0; }
.rankings-search input { flex: 1; min-width: 0; }
.rankings-search button { flex: 0 0 auto; }

.stats-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.stats-actions-row button {
  width: 100%;
  min-height: 40px;
}

.site-nav {
  position: sticky; z-index: 120; top: 0; height: 58px; display: flex; align-items: center;
  justify-content: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid rgba(216,189,118,.35);
  background: rgba(12,13,12,.96); backdrop-filter: blur(14px);
}
.site-nav[hidden] { display: none; }
.site-nav a { min-width: 130px; padding: 10px 16px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-weight: 800; text-align:center;text-decoration:none;text-transform: uppercase; cursor: pointer; }
.site-nav a:hover, .site-nav a.active { color: var(--accent-strong); border-color: rgba(216,189,118,.45); background: rgba(216,189,118,.09); }
.site-nav a[data-site-page="tournaments"] { display: grid; align-content: center; gap: 2px; line-height: 1; }
#next-automated-tournament-countdown { color: var(--accent); font-size: 9px; font-weight: 700; text-transform: none; white-space: nowrap; }
/* Automated tournaments are on standby - the nav entry is a static, non-interactive "Coming
   soon" badge instead of a live countdown link. */
.site-nav a.site-nav-disabled { cursor: default; opacity: 0.55; pointer-events: none; }
.next-event-label-mobile { display: none; }
@media (max-width: 900px) {
  .next-event-label-desktop { display: none; }
  .next-event-label-mobile { display: inline; }
}
.site-nav .site-nav-brand{position:absolute;left:18px;display:grid;gap:0;min-width:0;padding:2px 10px;border:0;background:transparent;text-align:left;line-height:1}.site-nav .site-nav-brand:hover,.site-nav .site-nav-brand.active{border:0;background:transparent;filter:brightness(1.12)}.site-nav-brand .brand-title{font-size:20px}.site-nav-brand .brand-subtitle{font-size:8px}.site-nav-brand .brand-fanmade{font-size:7px}
.guide-page-body { min-height: 100vh; background: #0d0e0d; color: var(--text); }
.guide-page { width: min(960px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 80px; }
.guide-hero { margin-bottom: 36px; }
.guide-hero h1 { margin: 0 0 12px; color: var(--accent-strong); font-size: clamp(34px, 6vw, 64px); line-height: 1.02; text-transform: uppercase; }
.guide-hero p { max-width: 780px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.guide-section { margin-top: 28px; padding: 22px; border: 1px solid rgba(216,189,118,.3); border-radius: 8px; background: var(--panel); }
.guide-section h2 { margin: 0 0 14px; color: var(--accent-strong); font-size: 25px; }
.guide-section h3 { margin: 22px 0 7px; color: var(--text); font-size: 18px; }
.guide-section p, .guide-section li { color: var(--muted); line-height: 1.65; }
.guide-section a { color: var(--accent-strong); }
.guide-section ul { margin: 10px 0 0; padding-left: 22px; }
.guide-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-facts article { padding: 15px; border: 1px solid rgba(216,189,118,.18); border-radius: 6px; background: rgba(0,0,0,.18); }
.guide-facts strong { display: block; margin-bottom: 5px; color: var(--text); }
@media (max-width: 800px) {
  .guide-page-body .site-nav { height: auto; min-height: 58px; flex-wrap: wrap; padding-left: 8px; padding-right: 8px; }
  .guide-page-body .site-nav .site-nav-brand { position: static; width: 100%; text-align: center; }
  .guide-page-body .site-nav a { min-width: auto; padding: 8px; font-size: 11px; }
  .guide-facts { grid-template-columns: 1fr; }
}
.main-menu { inset:58px 0 0;padding-top:24px; }
.site-page { position: fixed; z-index: 105; inset: 58px 0 0; overflow: auto; padding: 32px 24px 40px; background: rgba(13,14,13,.98); }
.site-page[hidden] { display: none; }
body.site-page-active .topbar,
body.site-page-active > #app > .layout,
body.site-page-active > #app > .hand-panel,
body.site-page-active > #app > .legal-footer { display:none !important; }
body.site-page-active .main-menu.hidden { display:grid; }
.site-page-shell { width: min(1320px,100%); margin: 0 auto; }
.site-page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.site-page-heading h1, .library-detail h1 { margin: 2px 0 4px; color: var(--text); font-size: clamp(32px,5vw,56px); text-transform: uppercase; }
.site-page-heading p { margin: 0; color: var(--muted); }
.site-page-heading a[href="/decks/tournament-decklists"] {
  color: var(--accent-strong);
  text-decoration-color: rgba(241, 217, 154, 0.65);
  text-underline-offset: 3px;
}
.site-page-heading a[href="/decks/tournament-decklists"]:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.library-controls { display: grid; grid-template-columns: minmax(260px,1fr) auto 180px; gap: 12px; padding: 15px; border: 1px solid rgba(216,189,118,.35); border-radius: 7px; background: var(--panel); }
.library-controls.tournament-library-controls { grid-template-columns: minmax(260px,1fr) auto minmax(180px,220px) max-content; }
.tournament-library-controls > select { width: max-content; min-width: 0; max-width: 100%; }
.tournament-library-controls .tournament-player-range { min-width: 180px; }
.library-controls > input, .library-controls > select { min-height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 4px; background: #131413; color: var(--text); }
.library-color-filters { display: flex; gap: 5px; }
.library-color-filters button { border: 1px solid var(--line); border-radius: 4px; background: #171817; color: var(--muted); text-transform: capitalize; cursor: pointer; }
.library-color-filters button.active { border-color: var(--accent); color: white; }
.library-color-filters .color-red.active { background: rgba(207,93,86,.35); }.library-color-filters .color-blue.active { background: rgba(95,168,201,.35); }.library-color-filters .color-green.active { background: rgba(134,176,112,.35); }.library-color-filters .color-purple.active { background: rgba(156,126,190,.35); }
.library-status { min-height: 38px; padding: 12px 2px 8px; color: var(--muted); }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items:start; gap: 16px; }
.tournaments-section { margin-top: 20px; }
.tournaments-browser { margin-top: 20px; padding: 16px; border: 1px solid rgba(216,189,118,.28); border-radius: 8px; background: var(--panel); }
.tournaments-browser .tournaments-section { margin-top: 0; }
.history-tabs.tournament-view-tabs { grid-template-columns: repeat(3, 1fr); }
.tournaments-section h2 { margin: 0 0 12px; color: var(--text); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.tournaments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tournaments-empty { color: var(--muted); grid-column: 1 / -1; }
.tournament-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid rgba(216,189,118,.28); border-radius: 8px; background: linear-gradient(145deg,#252624,#191a19); }
.tournament-card h3 { margin: 0; color: var(--text); font-size: 18px; }
.tournament-card-time { margin: 0; color: var(--accent); font-weight: 700; }
.tournament-card-meta, .tournament-card-cap { margin: 0; color: var(--muted); font-size: 13px; }
.tournament-card-prizes, .tournament-card-description { margin: 4px 0 0; color: var(--text); font-size: 13px; }
.tournament-register-btn { margin-top: 8px; align-self: start; }
.tournament-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.tournament-card-waitlist, .tournament-card-checkin { margin: 4px 0 0; color: #f0d98e; font-size: 12px; }
.tournament-automated-badge { display: inline-block; margin-left: 6px; padding: 3px 6px; border: 1px solid rgba(126,196,235,.45); border-radius: 999px; color: #9ed8f3; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; vertical-align: middle; }
.tournament-create-dialog form { display: grid; gap: 12px; width: min(480px, calc(100vw - 40px)); }
.tournament-create-dialog label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.tournament-create-dialog input, .tournament-create-dialog select, .tournament-create-dialog textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: #131413; color: var(--text); font: inherit; }
.tournament-create-actions { display: flex; justify-content: flex-end; gap: 10px; }
.form-error { margin: 0; color: #e08b7d; min-height: 1em; }

.tournament-detail { margin-top: 24px; padding: 18px; border: 1px solid rgba(216,189,118,.35); border-radius: 8px; background: var(--panel); }
.tournaments-grid > .tournament-detail { grid-column: 1 / -1; width: 100%; margin: 4px 0 8px; box-sizing: border-box; }
.tournament-role-notice { margin: 0 0 16px; padding: 10px 12px; border: 1px solid rgba(216,189,118,.45); border-radius: 8px; color: #f0d98e; background: rgba(216,189,118,.08); }
.tournament-your-pairing { display: grid; gap: 10px; justify-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(216,189,118,.2); text-align: center; }
.tournament-your-pairing h3 { margin: 0; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.tournament-pairing-table { border: 2px solid var(--accent); border-radius: 8px; overflow: hidden; min-width: 260px; }
.tournament-pairing-table-header { padding: 6px; background: rgba(216,189,118,.18); color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 12px; }
.tournament-pairing-table-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 10px; gap: 8px; }
.tournament-pairing-you { justify-self: start; font-weight: 700; color: var(--text); }
.tournament-pairing-opponent { justify-self: end; font-weight: 700; color: var(--text); }
.tournament-pairing-vs { color: var(--muted); font-size: 12px; }
.tournament-pairing-bye, .tournament-pairing-result { margin: 0; color: var(--muted); }
.tournament-deck-submit { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tournament-deck-submit select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: #131413; color: var(--text); }
.tournament-deck-submitted { color: var(--accent); font-size: 13px; }
.tournament-manage-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tournament-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tournament-tabs button { border-bottom: 2px solid transparent; background: none; color: var(--muted); }
.tournament-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.tournament-pairings-table { width: 100%; border-collapse: collapse; }
.tournament-pairings-table th, .tournament-pairings-table td { padding: 6px 10px; border-bottom: 1px solid rgba(216,189,118,.16); text-align: left; font-size: 13px; color: var(--text); }
.tournament-pairings-table th { color: var(--muted); text-transform: uppercase; font-size: 11px; }
.tournament-bracket { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; }
.tournament-bracket-round { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.tournament-bracket-round h4 { margin: 0 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.tournament-edit-result { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tournament-edit-result input[type="number"] { width: 60px; }
.tournament-edit-result-btn { margin-left: 6px; font-size: 11px; padding: 2px 6px; }
.tournament-spectate-btn { display: block; margin: 6px 0 0 auto; font-size: 11px; padding: 3px 8px; }
.tournament-checkin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid rgba(216,189,118,.3); border-radius: 8px; }
.tournament-checkin-status { margin: 0 0 14px; color: #9ed5a9; }
.tournament-participants-panel { margin-top: 16px; border-top: 1px solid rgba(216,189,118,.16); padding-top: 12px; }
.tournament-add-participant { display: flex; gap: 6px; margin-top: 8px; }
.public-deck-card { display:flex;flex-direction:column;height:auto;min-height:0;overflow:hidden;border:1px solid rgba(216,189,118,.28);border-radius:8px;background:linear-gradient(145deg,#252624,#191a19);cursor:pointer;transition:transform .16s,border-color .16s; }
.public-deck-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.public-deck-card.selected { border-color: var(--accent-strong); box-shadow: 0 0 0 2px rgba(216,189,118,.16); }
.library-card-art { height: 195px; display: flex; justify-content: center; overflow: hidden; background: #0d0e0d; }
.library-card-art img { width: min(38%,150px); height: 118%; margin: -8px -12px 0; object-fit: cover; border-radius: 7px; box-shadow: 0 8px 24px #000; transform: rotate(-3deg); }
.library-card-art img:nth-child(even) { transform: rotate(4deg) translateY(8px); }
.library-no-lucky { display: grid; place-items: center; color: var(--muted); text-transform: uppercase; }
.library-card-body { padding: 15px; }.library-card-body p { margin: 5px 0 13px; color: var(--muted); }.library-card-title { display:flex;align-items:center;gap:10px; }.library-card-title h2 { margin:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.library-creator strong{color:var(--text)}
.library-card-title h2 a {
  color: var(--accent);
  text-decoration: none;
}
.library-card-title h2 a:hover,
.library-card-title h2 a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.deck-color-dots { display:flex;gap:3px }.deck-color-dots i { width:13px;height:13px;border-radius:50%; }.deck-color-dots .color-red{background:var(--red)}.deck-color-dots .color-blue{background:var(--blue)}.deck-color-dots .color-green{background:var(--green)}.deck-color-dots .color-purple{background:var(--purple)}
.library-deck-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.library-deck-tags span{padding:4px 7px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase}.library-deck-tags .legal-badge{border-color:rgba(134,176,112,.6);color:#acd49b;background:rgba(134,176,112,.08)}
.library-card-meta { display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:12px }
.library-like-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px 12px;border:1px solid rgba(216,189,118,.48);border-radius:4px;background:rgba(216,189,118,.08);color:var(--text);font-weight:800;cursor:pointer}.library-like-btn span{color:#e77770;font-size:18px}.library-like-btn strong{min-width:24px;margin-left:auto;padding-left:8px;border-left:1px solid var(--line)}.library-like-btn:hover,.library-like-btn.liked{border-color:#e77770;background:rgba(207,93,86,.13)}
.library-empty { grid-column:1/-1;padding:60px;text-align:center;border:1px dashed var(--line);color:var(--muted) }
.library-detail { margin-top:18px;padding:24px;border:1px solid rgba(216,189,118,.35);border-radius:8px;background:var(--panel) }.library-deck-list{display:grid;gap:14px}.library-deck-section{display:grid;gap:7px}.library-deck-section h2{display:flex;justify-content:space-between;align-items:center;margin:0;padding-bottom:5px;border-bottom:1px solid rgba(216,189,118,.3);color:var(--accent-strong);font-size:14px;text-transform:uppercase}.library-deck-section h2 span{display:grid;place-items:center;min-width:24px;height:22px;border:1px solid var(--line);border-radius:3px;color:var(--muted);font-size:11px}.library-deck-section-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.library-deck-card-row{display:flex;gap:10px;align-items:center;padding:8px;background:#171817;border:1px solid #3d3d38}.library-deck-list img{width:44px;height:62px;object-fit:cover}.library-deck-list span{display:grid;font-size:12px}.library-deck-list small{color:var(--muted)}.library-import-footer{display:flex;justify-content:center;margin-top:14px}.library-import-footer button{width:auto;min-width:180px;padding:7px 12px;border:1px solid var(--accent);border-radius:4px;background:rgba(216,189,118,.1);color:var(--text);font-size:11px;font-weight:800;cursor:pointer}
.public-deck-card>.library-detail{width:100%;margin:0;padding:15px;border:0;border-top:1px solid rgba(216,189,118,.35);border-radius:0;background:rgba(10,11,10,.38);cursor:default}.public-deck-card>.library-detail .library-deck-list{grid-template-columns:1fr;max-height:430px;padding-right:3px;overflow:auto}.public-deck-card>.library-detail .library-deck-section-cards{grid-template-columns:1fr}.public-deck-card>.library-detail .library-deck-card-row{min-width:0}.public-deck-card>.library-detail .library-deck-list strong{white-space:normal}
.library-deck-card-row{cursor:default;transition:border-color .14s,background .14s}.library-deck-card-row:hover{border-color:rgba(216,189,118,.6);background:#20211f}
.library-floating-card-preview{position:fixed;z-index:1000;display:grid;place-items:center;width:250px;height:365px;padding:10px;overflow:hidden;border:1px solid rgba(216,189,118,.65);border-radius:7px;background:radial-gradient(circle at center,rgba(216,189,118,.16),transparent 62%),rgba(8,9,8,.97);box-shadow:0 16px 42px rgba(0,0,0,.8);pointer-events:none}.library-floating-card-preview[hidden]{display:none}.library-floating-card-preview img{width:100%;height:100%;object-fit:contain;border-radius:5px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.72))}.library-floating-card-preview.structure-preview{width:380px;height:270px}
@media(max-width:900px){.library-floating-card-preview{width:min(230px,calc(100vw - 24px));height:min(340px,65vh)}.library-floating-card-preview.structure-preview{width:min(340px,calc(100vw - 24px));height:min(240px,48vh)}}
.tracker-shell{max-width:1100px}.tracker-board{display:grid;gap:18px}.tracker-player{padding:16px;border:1px solid rgba(216,189,118,.35);border-radius:9px;background:var(--panel)}.tracker-player h2{margin:0 0 10px;text-align:center;color:var(--accent);text-transform:uppercase}.tracker-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tracker-counter{display:grid;place-items:center;gap:6px;min-height:190px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#151615}.tracker-counter strong{font-size:62px;line-height:1}.tracker-counter span{color:var(--accent);font-weight:900;letter-spacing:.12em}.tracker-counter button{width:100%;border:0;background:transparent;color:var(--text);font-size:30px;cursor:pointer}.tracker-center{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:54px}.tracker-center-left{justify-self:stretch;display:grid;place-items:center}.tracker-time{justify-self:center;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}.tracker-center-actions{justify-self:end;display:grid;grid-template-columns:minmax(120px,1.35fr) minmax(105px,1fr);gap:10px}.tracker-center button{min-width:120px;padding:12px;border:1px solid var(--accent);border-radius:5px;background:rgba(216,189,118,.12);color:var(--text);font-weight:900;cursor:pointer}.tracker-center .tracker-day-night{min-width:180px;color:#f0c040;border-color:rgba(240,192,64,.72);background:rgba(240,192,64,.1);text-shadow:0 2px 10px rgba(0,0,0,.5)}.tracker-center .tracker-day-night.is-night{color:#a0c4ff;border-color:rgba(95,168,201,.78);background:linear-gradient(135deg,rgba(50,83,145,.34),rgba(24,42,78,.55));box-shadow:inset 0 0 18px rgba(95,168,201,.12)}
.tracker-reset-dialog article{width:min(430px,calc(100vw - 32px));padding:24px;border:1px solid var(--accent);border-radius:8px;background:linear-gradient(180deg,rgba(216,189,118,.08),transparent 45%),var(--panel);color:var(--text);box-shadow:0 24px 60px rgba(0,0,0,.65)}.tracker-reset-dialog h2{margin:6px 0}.tracker-reset-dialog p:not(.eyebrow){color:var(--muted)}.tracker-reset-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.tracker-reset-dialog button{padding:12px;border:1px solid var(--accent);border-radius:4px;background:rgba(216,189,118,.12);color:var(--text);font-weight:800;cursor:pointer}.tracker-reset-dialog button.secondary{border-color:var(--line);background:#181918}.tracker-reset-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.deck-privacy-dialog article{width:min(480px,calc(100vw - 32px));padding:24px;border:1px solid var(--accent);border-radius:8px;background:var(--panel);color:var(--text)}.deck-privacy-dialog h2{margin:6px 0}.deck-privacy-dialog p{color:var(--muted)}.privacy-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 10px}.deck-privacy-dialog button{padding:12px;border:1px solid var(--accent);background:rgba(216,189,118,.12);color:var(--text);cursor:pointer}.deck-privacy-dialog .secondary{width:100%;border-color:var(--line)}
@media(max-width:900px){.site-nav .site-nav-brand{display:none}.site-nav a{min-width:0;flex:1;padding-inline:7px;font-size:11px}.library-controls{grid-template-columns:1fr}.library-color-filters{overflow:auto}.library-grid{grid-template-columns:1fr}.library-deck-list{grid-template-columns:1fr 1fr}.tracker-counter{min-height:145px}.tracker-counter strong{font-size:42px}.tracker-center{grid-template-columns:1fr auto 1fr;gap:10px}.tracker-center button{min-width:0;padding:10px 6px;font-size:11px}.tracker-center .tracker-day-night{width:min(100%,105px);min-width:0}.tracker-time{font-size:27px}.tracker-center-actions{width:auto;grid-template-columns:64px 58px;gap:5px;justify-self:end}.tracker-center-actions button[data-track-action="reset"]{font-size:9px}}

.stats-actions-row > div {
  display: grid;
  gap: 4px;
  text-align: center;
}

.stats-actions-row > div > small {
  color: var(--accent-strong);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.match-history-list {
  display: grid;
  gap: 9px;
  max-height: min(58vh, 680px);
  padding-right: 3px;
  overflow-y: auto;
}

.match-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  gap: 7px;
  min-height: 116px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid;
  border-radius: 7px;
  background: #181918;
  box-shadow: inset 0 0 0 1px rgba(255, 247, 218, 0.04), 0 8px 20px rgba(0, 0, 0, 0.24);
}

.match-history-card.victory {
  border-color: rgba(230, 200, 111, 0.78);
  background: radial-gradient(circle at 50% 45%, rgba(230, 200, 111, 0.22), transparent 58%), linear-gradient(135deg, rgba(111, 87, 28, 0.32), rgba(24, 25, 24, 0.96) 62%);
}

.match-history-card.defeat {
  border-color: rgba(190, 83, 72, 0.76);
  background: radial-gradient(circle at 50% 45%, rgba(190, 83, 72, 0.2), transparent 58%), linear-gradient(135deg, rgba(105, 35, 30, 0.34), rgba(24, 25, 24, 0.96) 62%);
}

.match-history-side {
  display: grid;
  grid-template-rows: auto minmax(34px, 1fr) auto;
  justify-items: center;
  min-width: 0;
  gap: 6px;
  text-align: center;
}

.match-history-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-history-lucky-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.match-history-lucky-art {
  position: relative;
  flex: 0 1 38px;
  width: 38px;
  min-width: 24px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(245, 234, 210, 0.34);
  border-radius: 4px;
  background: #101110;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.42);
}

.match-history-lucky-art img {
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: auto;
}

.match-history-no-lucky {
  color: rgba(201, 190, 167, 0.62);
  font-size: 9px;
  font-style: italic;
}

.match-history-order {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-history-result {
  align-self: center;
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
}

.match-history-result strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.victory .match-history-result strong { color: #e6c86f; text-shadow: 0 3px 16px rgba(230, 200, 111, 0.38); }
.defeat .match-history-result strong { color: #d97868; text-shadow: 0 3px 16px rgba(190, 83, 72, 0.38); }

.match-history-score {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.match-history-result b { color: var(--muted); font-weight: 500; }

.match-history-mode {
  color: rgba(245, 234, 210, 0.68);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.match-history-status {
  margin: 0;
  padding: 16px 8px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.match-history-status.error { color: #d97868; }

.match-history-sample-label {
  margin: 0 0 7px;
  color: rgba(216, 189, 118, 0.82);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.match-history-empty-demo-label {
  display: grid;
  gap: 3px;
  margin: 0 0 9px;
  padding: 9px 10px;
  border: 1px solid rgba(216, 189, 118, 0.38);
  border-radius: 6px;
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.08);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.match-history-empty-demo-label span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
}

.match-history-pagination {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(216, 189, 118, 0.22);
}

.match-history-pagination button {
  width: 34px;
  min-height: 32px;
  padding: 0;
  border-color: rgba(216, 189, 118, 0.54);
  color: var(--accent-strong);
  font-size: 16px;
  line-height: 1;
}

.match-history-pagination span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

#play-bot-btn {
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1255 100%);
  border-color: #9b72cf;
  color: #c09cf0;
}

.menu-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 7px;
  background: rgba(12, 12, 12, 0.28);
}

.online-stats-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted, #aaa);
  padding-bottom: 2px;
}
.online-stats-bar .stat-pill {
  display: flex;
  align-items: center;
  gap: 5px;
}
.online-stats-bar .stat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.online-stats-bar .stat-dot.green { background: #4caf50; }
.online-stats-bar .stat-dot.blue  { background: #42a5f5; }
.online-stats-bar .stat-dot.gold  { background: #d8bd76; }

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

.deck-picker {
  display: grid;
  gap: 8px;
}

.auth-row,
.deck-picker {
  align-items: center;
}

.auth-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.auth-actions {
  display: flex;
  gap: 6px;
  justify-content: end;
}

.deck-picker label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.deckbuilder-toggle {
  width: 100%;
}

.deckbuilder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 270px) minmax(360px, 400px);
  gap: 10px;
  width: 100%;
  max-height: none;
  min-height: 650px;
  height: auto;
  padding: 10px;
  border: 1px solid rgba(216, 189, 118, 0.28);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.26);
}

.deckbuilder-main,
.deckbuilder-list,
.deckbuilder-center {
  display: grid;
  min-height: 0;
}

.deckbuilder-center {
  grid-template-rows: auto minmax(min-content, 1fr);
  gap: 8px;
  min-width: 0;
}

.deckbuilder-center-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* Desktop 3-column layouts (>=981px): swap visual position of preview and deck list.
   Preview (wrapped by the header/actions it needs) takes the narrower middle column,
   deck list gains the wider column for the chart and card lines.
   Below 981px the shell stacks to 1 column and DOM order (main, list, center) is left untouched. */
@media (min-width: 981px) {
  .deckbuilder-shell {
    align-items: start;
  }

  .deckbuilder-main {
    order: 1;
    height: min(76vh, 860px);
  }

  .deckbuilder-center {
    order: 2;
    min-height: 650px;
  }

  .deckbuilder-list {
    order: 3;
    height: min(76vh, 860px);
  }
}

.deckbuilder-main {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.deck-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
}

.deck-filters label,
.tournament-library-controls .range-filter {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.range-pair {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  min-width: 0;
}

.range-filter-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
}

.deck-filters .range-filter {
  grid-column: span 2;
  min-width: 220px;
}

/* Strength/Defence/Damage sit on one compact row inside the filter panel, wrapping only on
   narrow viewports (see the mobile media query further down for the stacked fallback). */
.stat-range-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stat-range-row .range-filter {
  flex: 1 1 150px;
  min-width: 130px;
}

.range-filter-label strong {
  color: var(--accent-strong);
  white-space: nowrap;
}

.range-pair::before,
.range-pair::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
}

.range-pair::before {
  left: 0;
  right: 0;
  background: rgba(201, 190, 167, 0.25);
  box-shadow: inset 0 0 0 1px rgba(216, 189, 118, 0.18);
}

.range-pair::after {
  left: var(--range-start);
  right: calc(100% - var(--range-end));
  background: var(--accent);
  box-shadow: 0 0 8px rgba(216, 189, 118, 0.28);
}

.range-pair input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  outline: 0;
  pointer-events: none;
  touch-action: none;
}

.range-pair .range-min {
  z-index: 2;
}

.range-pair .range-max {
  z-index: 3;
}

.range-pair input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.range-pair input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid #171817;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(216, 189, 118, 0.8), 0 3px 8px rgba(0, 0, 0, 0.48);
  cursor: grab;
  pointer-events: auto;
}

.range-pair input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  background: transparent;
}

.range-pair input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #171817;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(216, 189, 118, 0.8), 0 3px 8px rgba(0, 0, 0, 0.48);
  cursor: grab;
  pointer-events: auto;
}

.range-pair input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}

.range-pair input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}

.range-pair input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.range-pair input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.range-pair input {
  width: 100%;
}

.deckbuilder-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: start;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.library-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  align-content: start;
  width: 100%;
  height: 224px;
  overflow: hidden;
  padding: 6px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

.library-card-img-wrap {
  position: relative;
  width: 100%;
  max-height: 166px;
  aspect-ratio: 5 / 7.8;
  overflow: hidden;
  border-radius: 5px;
  background: #111110;
}

.library-card-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.library-card strong,
.library-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card strong {
  font-size: 12px;
  text-transform: uppercase;
}

.library-card span {
  color: var(--muted);
  font-size: 10px;
}

.library-card b {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #11110f;
  font-size: 12px;
}

.deckbuilder-list {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.deckbuilder-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: visible;
  padding: 8px;
  border: 1px solid rgba(216, 189, 118, 0.28);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.34);
}

.deck-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.3);
}

.deck-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.deck-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  height: 100px;
  padding-top: 14px;
}

.deck-chart-bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.deck-chart-bar-value {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted, #b9b3a4);
}

.deck-chart-bar {
  width: 100%;
  max-width: 22px;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.deck-chart-bar-label {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.deckbuilder-preview-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.deckbuilder-preview-img-wrap {
  position: relative;
  width: 100%;
}

.deckbuilder-preview-body img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 2px solid rgba(216, 189, 118, 0.68);
  border-radius: 8px;
  background: #111110;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52);
}

.deckbuilder-preview-empty {
  margin: auto;
}

.deckbuilder-preview-meta {
  width: 100%;
  color: var(--gold);
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
}

.preview-card-metadata {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.deckbuilder-preview-text {
  padding: 8px 10px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.5);
  color: #e8e3d8;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}

.deck-line[data-preview-card] {
  cursor: default;
}

.deck-stats {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.38);
  color: var(--muted);
  font-size: 12px;
}

.deck-flags {
  display: grid;
  gap: 5px 10px;
  padding: 7px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.deck-flags label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.deck-stats.valid strong {
  color: #9bd890;
}

.deck-stats.invalid strong,
.deck-errors {
  color: #ffb0a2;
}

.deck-errors {
  display: grid;
  gap: 3px;
  max-height: 74px;
  overflow: auto;
  font-size: 11px;
}

.deck-errors p {
  margin: 0;
}

.deck-list-sort {
  display: flex;
  gap: 6px;
}

.deck-list-sort select {
  flex: 1;
  font-size: 12px;
}

.deck-list-lines {
  display: grid;
  flex: 1 1 160px;
  align-content: start;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(216, 189, 118, 0.18);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.28);
}

.deck-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: var(--text);
  font-size: 12px;
}

.deck-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-line button {
  min-width: 26px;
  min-height: 24px;
  padding: 0;
}

.deck-line button[data-menu-action="deck-plus"] {
  border-color: var(--accent-strong);
  background: var(--accent);
  color: #11110f;
}

.deck-line button[data-menu-action="deck-plus"]:hover:not(:disabled) {
  background: var(--accent-strong);
}

.deck-line button[data-menu-action="deck-minus"] {
  border-color: rgba(216, 189, 118, 0.32);
  background: #0d0e0d;
  color: var(--text);
}

.deckbuilder-title-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.deckbuilder-title-actions button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

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

.deckbuilder-actions button {
  min-height: 30px;
  padding: 0 6px;
  font-size: 11px;
}

.deckbuilder-action-status {
  margin: 6px 0 0;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.38);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.export-dropdown {
  position: relative;
}

.export-dropdown > button {
  width: 100%;
}

.export-dropdown-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  flex-direction: column;
  gap: 3px;
  background: rgba(12, 12, 12, 0.97);
  border: 1px solid rgba(216, 189, 118, 0.4);
  border-radius: 6px;
  padding: 4px;
}

.export-dropdown.open .export-dropdown-menu {
  display: flex;
}

.export-dropdown-menu button {
  width: 100%;
  min-height: 28px;
  font-size: 11px;
}

.tutorial-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 189, 118, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.08), transparent 42%),
    rgba(12, 12, 12, 0.72);
}

.tutorial-panel h2,
.tutorial-panel p {
  margin: 0;
}

.tutorial-panel h2 {
  color: var(--accent-strong);
  font-size: 16px;
  line-height: 1.15;
}

.tutorial-panel p {
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.tutorial-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.tutorial-nav button:nth-child(2) {
  /* Next / Finish */
}

.tutorial-exit-btn {
  font-size: 12px;
  opacity: 0.7;
  border-color: rgba(255,255,255,0.18);
  background: transparent;
  padding: 6px 10px;
  min-height: 0;
}

.tutorial-exit-btn:hover {
  opacity: 1;
}

.tutorial-panel .control-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tutorial-panel .control-row.single {
  grid-template-columns: 1fr;
}

.tutorial-focus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.tutorial-focus-card {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(216, 189, 118, 0.26);
  border-radius: 8px;
  background: rgba(28, 29, 28, 0.74);
}

.tutorial-focus-card img {
  width: min(150px, 100%);
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.46);
}

.tutorial-focus-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 11px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button,
select,
input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #2c2c29;
  color: var(--text);
  font: inherit;
}

button {
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 800;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(216, 189, 118, 0.25);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) minmax(320px, 400px);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 3px 12px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.28);
  background:
    linear-gradient(90deg, rgba(216, 189, 118, 0.08), transparent 44%),
    rgba(17, 18, 17, 0.9);
}

.brand-lockup {
  display: grid;
  align-content: center;
  gap: 1px;
  text-transform: uppercase;
}

.brand-title {
  margin: 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 2px 0 #5d5033, 0 8px 20px rgba(0, 0, 0, 0.58);
}

.brand-subtitle {
  color: var(--accent-strong);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.8vw, 22px);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.brand-fanmade {
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid rgba(216, 189, 118, 0.58);
  color: #141413;
  background: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

.menu-brand {
  justify-items: center;
  text-align: center;
}

.app-brand .brand-title {
  font-size: 24px;
  line-height: 0.9;
}

.app-brand .brand-subtitle {
  font-size: 9px;
  line-height: 1;
}

.app-brand .brand-fanmade {
  margin-top: 1px;
  padding: 1px 5px;
  font-size: 7px;
  line-height: 1;
}

.legal-footer {
  display: grid;
  gap: 2px;
  margin: 0 10px 10px;
  padding: 6px 10px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.44);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.legal-links-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.privacy-policy-link {
  color: var(--muted, #8a7a55);
  text-decoration: none;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.privacy-policy-link:hover { opacity: 1; text-decoration: underline; }

.menu-legal-footer {
  width: min(980px, calc(100vw - 48px));
  margin: 16px 0 0;
  background: rgba(12, 12, 12, 0.58);
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 250;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: min(980px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid rgba(216, 189, 118, 0.52);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.1), transparent 42%),
    rgb(28, 29, 28);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  transform: translateX(-50%);
}

.cookie-banner strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-strong);
  font-size: 15px;
  text-transform: uppercase;
}

.cookie-banner p {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cookie-actions button {
  min-width: 110px;
  min-height: 38px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cookie-actions [data-cookie-action="accept"] {
  background: var(--accent);
  color: #12110f;
}

.game-status {
  justify-self: center;
  margin: 0;
  color: var(--accent-strong);
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Two instances share this class, only one ever visible at a time: #day-night-indicator-topbar
   (static, in .topbar-actions, updated by render() in app.js) for desktop, and the inline one
   rendered by renderDayNightIndicator() inside .compact-player-actions for mobile — needed
   because .compact-player-actions is display:none above ~1023px and .topbar-actions' sibling
   .game-status/.app-brand row is display:none below it, so neither location alone covers both
   layouts. */
.day-night-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f0c040;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.day-night-indicator.is-night {
  color: #a0c4ff;
}

#day-night-indicator-topbar {
  order: -1;
  margin-right: auto;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.topbar-actions button {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* Wraps each in-game music/SFX topbar button so clicking it opens a volume popover (same slider
   as the main-menu settings panel's .volume-settings) instead of muting on the spot — dragging
   the slider all the way down still effectively silences it, and the "Mute" button inside covers
   the instant on/off case the direct click used to. */
.topbar-audio-control {
  position: relative;
  flex: 0 0 auto;
}

.audio-volume-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 160px;
  padding: 10px;
  border: 1px solid rgba(216, 189, 118, 0.4);
  border-radius: 8px;
  background: #1c1a15;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.audio-volume-popover.open {
  display: block;
}

.audio-volume-popover .volume-row {
  margin-bottom: 8px;
}

.audio-volume-popover .popover-mute-btn {
  width: 100%;
  min-height: 28px;
  font-size: 11px;
}

.mobile-surrender-btn,
.compact-end-turn-btn,
.compact-player-stats,
.compact-player-actions,
.compact-card-name,
.compact-card-stats {
  display: none;
}

.menu-panel button,
.topbar-actions button {
  border-color: rgba(216, 189, 118, 0.46);
  background:
    linear-gradient(180deg, rgba(245, 234, 210, 0.08), transparent),
    #2b2b28;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topbar-actions #report-bug-btn {
  border-color: rgba(214, 97, 74, 0.78);
  color: #ffd4cb;
}

#queue-public-btn,
#queue-secret-btn,
#play-solo-btn,
#tutorial-btn,
#menu-friends-btn,
#menu-notifications-btn,
.menu-panel .deckbuilder-toggle {
  background: var(--accent);
  color: #12110f;
}

#queue-tabletop-btn {
  background: linear-gradient(135deg, #25231f 0%, #34322d 100%);
  border-color: rgba(216, 189, 118, 0.62);
  color: #fff7de;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.layout {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(560px, 1fr) minmax(220px, 300px);
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}

/* Grid items default to min-width:auto, so a crowded battlefield can make the centre track use
   its full min-content width and push the controls beyond the viewport. Firefox is particularly
   strict here (and display:contents field groups make that minimum even larger). Keep every
   column constrained to the width assigned by .layout; adjustFieldZoneCardSizes() can then see
   the real available width and activate its compact Structure/Gear arrangement. */
.layout > * {
  min-width: 0;
}

.side-panel,
.table,
.hand-panel,
.chat-panel {
  border: 1px solid rgba(216, 189, 118, 0.25);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%),
    rgba(31, 32, 31, 0.86);
  border-radius: 8px;
}

.side-panel {
  display: grid;
  align-content: stretch;
  gap: 8px;
  padding: 8px;
  min-height: 0;
}

#left-panel {
  grid-template-rows: minmax(220px, 320px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

#right-panel {
  min-height: 0;
  overflow: hidden;
}

#right-panel .gameplay-controls {
  height: 100%;
  min-height: 0;
}

#left-panel-chat,
#left-panel-notices {
  min-height: 0;
  overflow: hidden;
}

#left-panel-notices {
  display: grid;
  height: 100%;
  max-height: 100%;
}

#left-panel-notices > .game-notices {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

#left-panel-notices > .match-log-panel {
  overflow: hidden;
}

#left-panel-notices > .match-log-panel > .match-log-list {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.player-card {
  display: grid;
  gap: 6px;
}

.player-card h2 {
  margin: 0;
  font-size: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.stat {
  min-height: 46px;
  padding: 6px;
  border-radius: 6px;
  background: #181918;
}

.stat strong {
  display: block;
  font-size: 18px;
}

.soul-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(216, 189, 118, 0.28);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.34);
}

.soul-zone-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.soul-compact-count {
  display: none;
}

.soul-desktop-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-strong);
  align-self: center;
  justify-self: end;
  letter-spacing: 0.02em;
}

.soul-row {
  --soul-card-w: clamp(28px, 5vh, 52px);
  display: flex;
  flex: 1 1 0;
  flex-wrap: nowrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.soul-mini-card {
  position: relative;
  display: grid;
  place-items: end center;
  flex: 0 0 var(--soul-card-w);
  width: var(--soul-card-w);
  height: auto;
  aspect-ratio: 2 / 3;
  margin-right: calc(var(--soul-card-w) / -3);
  z-index: calc(20 - var(--soul-index, 0));
  padding: clamp(1px, 0.5vh, 4px) 1px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  /* Palworld's real soul.webp art was removed in the Naruto rebrand and never replaced - this
     base rule is only ever a fallback now (every real naruto pip overrides it with its own
     chakra.webp/summon.webp/card-back.webp), so just a flat color instead of a broken url()
     that fails the esbuild bundle (see scripts/build-site.mjs, npm run build). */
  background: #111714;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.35);
  color: #f8f2db;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease;
}

.soul-mini-card span {
  opacity: 0;
}

.soul-mini-card:last-child {
  margin-right: 0;
}

.soul-mini-card.tapped {
  opacity: 0.64;
  transform: rotate(90deg) scale(0.9);
}

.empty-soul {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battlefield-souls {
  justify-self: center;
  width: min(100%, 360px);
  min-width: 0;
  max-width: 100%;
  padding: 4px 6px;
  overflow: hidden;
}

.board-tools {
  display: grid;
  align-items: center;
  gap: 8px;
  min-height: 92px;
}

.board-tools.opponent {
  grid-template-columns: max-content minmax(70px, 1fr) minmax(160px, 280px) max-content;
}

.board-tools.current {
  grid-template-columns: max-content minmax(180px, 1fr) minmax(160px, 280px) max-content;
}

.board-tools .battlefield-souls {
  width: 100%;
  min-height: 110px;
  align-self: stretch;
}

.board-tools.current .battlefield-souls {
  justify-self: stretch;
}

.soul-draw-board-btn {
  align-self: center;
  justify-self: center;
  width: min(120px, 100%);
  min-height: 44px;
  padding: 0 8px;
  border-color: rgba(216, 189, 118, 0.54);
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.board-tools.opponent .opponent-hand-wrap,
.board-tools.opponent .battlefield-souls {
  align-self: stretch;
}

@media (min-width: 1280px) {
  .board-tools.opponent .battlefield-souls .soul-row {
    flex-wrap: nowrap;
  }
}

/* ── Life + Resource unified block ─────────────────────────── */
.life-resource-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
  width: max-content;
  min-width: 130px;
  max-width: 180px;
  padding: 8px 11px;
  border: 1px solid rgba(216, 189, 118, 0.46);
  border-radius: 7px;
  background: rgba(12, 12, 12, 0.62);
  gap: 5px;
}

.board-tools.current .pile-row,
.board-tools.opponent .life-resource-wrap {
  justify-self: end;
}

.board-tools.current .life-resource-wrap {
  align-self: stretch;
}

.life-resource-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Set once by submitRpsChoice() (game.firstPlayerIndex) and never reset — stays next to the
   player's name for the rest of the match, not just while it's their turn. Plain inline text
   (no pill/border/background) so it just flows after the name instead of needing its own layout
   handling — a badge shape kept wrapping awkwardly at narrow nameplate widths. */
.turn-order-badge {
  margin-left: 4px;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: none;
}

.compact-stat-life .turn-order-badge {
  margin-left: 2px;
}

.life-resource-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.life-hp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.life-hp-block .life-value {
  font-size: 30px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.life-hp-block .life-unit {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.resource-badges {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}

.resource-badges span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 5px;
  background: rgba(12, 12, 12, 0.44);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.resource-badges strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1280px) and (min-width: 981px) {
  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 230px) minmax(280px, 320px);
  }
}

body[data-action-mode="attack"] .targetable-life {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(242, 187, 76, 0.22);
}

.life-resource-wrap.combat-target-player {
  border-color: #f3dc9c;
  background:
    radial-gradient(circle at 50% 40%, rgba(243, 220, 156, 0.2), transparent 64%),
    rgba(12, 12, 12, 0.76);
  box-shadow: 0 0 0 2px rgba(243, 220, 156, 0.34), 0 0 22px rgba(243, 220, 156, 0.55);
  animation: combatPulseGold 720ms ease-in-out infinite alternate;
}

.life-resource-wrap.combat-target-player .life-value,
.life-resource-wrap.combat-target-player .life-unit {
  color: #fff2bf;
}

/* Marks whichever player must act on a pending resolution (see getActivePendingActorIndex in
   app.js), including cross-player chains (e.g. Zoe's Strategy forcing the opponent to discard)
   that light this up on the side not currently taking its turn. Uses the site's own accent gold
   (--accent) rather than an alarm red/orange, and a slow glow pulse instead of a hard on/off
   blink, so it reads as "your attention is needed here" without clashing with the rest of the UI.
   The pulse also drives `filter: brightness()` alongside the box-shadow glow, since brightness is
   never clipped by a container's overflow and stays visible even if some ancestor still clips the
   glow. The "Action needed" label itself is NOT a ::after pinned to this element: several
   responsive rows constrain/clip this plate (`overflow: hidden` at some breakpoints, tight
   max-height at others), so a label anchored here and pushed above via negative offset kept
   ending up clipped or covered depending on layout. syncPendingActorBadge() in app.js instead
   renders it as a single `position: fixed` element positioned from this plate's own
   getBoundingClientRect() — see .pending-actor-badge below — immune to any ancestor's overflow,
   stacking context or z-index. */
.life-resource-wrap.pending-actor-highlight,
.compact-stat-life.pending-actor-highlight {
  border-color: var(--accent);
  animation: pendingActorPulse 1400ms ease-in-out infinite;
}

/* Positioned in app.js (syncPendingActorBadge): left/top are set inline from the highlighted
   plate's current bounding rect, recomputed on every render and on window resize. */
.pending-actor-badge {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 500;
  margin-top: -4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #241605;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes pendingActorPulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 0 1px rgba(216, 189, 118, 0.32), 0 0 8px rgba(216, 189, 118, 0.22);
  }
  50% {
    filter: brightness(1.4);
    box-shadow: 0 0 0 2px rgba(216, 189, 118, 0.85), 0 0 18px rgba(216, 189, 118, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .life-resource-wrap.pending-actor-highlight,
  .compact-stat-life.pending-actor-highlight {
    animation: none;
    filter: brightness(1.2);
    box-shadow: 0 0 0 2px rgba(216, 189, 118, 0.6), 0 0 14px rgba(216, 189, 118, 0.45);
  }
}

.pile-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-pile {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 5 / 7.8;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111110;
  color: var(--text);
  overflow: hidden;
}

button.board-pile {
  min-height: 0;
  padding: 0;
  cursor: pointer;
}

.board-pile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.board-pile strong {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 999px;
  background: rgba(10, 15, 13, 0.86);
  color: #fff7d7;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.discard-pile.empty {
  background: rgba(12, 12, 12, 0.38);
  color: var(--muted);
  font-size: 10px;
}

.exile-pile {
  border-color: #a855f7;
}

.exile-pile.empty {
  background: rgba(12, 12, 12, 0.38);
  color: var(--muted);
  font-size: 10px;
}

.exile-claimed {
  opacity: 0.7;
  border-left: 3px solid #a855f7;
}

/* Anchored to the top of .card-game-overlay (which is position:relative), i.e. the same
   height as the "C x | Dur y" stats line, instead of the bottom of the whole card — that
   used to overlap the ACT/Tap button labels rendered further down in the same overlay. */
.structure-stats-band {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  pointer-events: none;
  border-radius: 0 0 4px 4px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* When a Pal is assigned, .card-game-overlay (and the durability band nested in it above) is
   hidden entirely so the assigned-pal-slot overlay isn't covering ACT/Tap buttons that can no
   longer be used anyway. Durability still needs to be visible somewhere, so this variant is
   rendered as a sibling of the (hidden) overlay instead, anchored to the bottom of the whole
   card rather than the top of the overlay. */
.structure-stats-band-covered {
  top: 50%;
  right: auto;
  bottom: auto;
  width: 48%;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
}

.pal-badges {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}

.pal-badge {
  display: block;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  padding: 2px 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pal-badges .pal-badge:first-child { border-radius: 4px 4px 0 0; }

.freeze-badge       { background: rgba(70, 170, 230, 0.90); }
.taunt-badge        { background: rgba(220, 140, 10, 0.90); }
.stealth-badge      { background: rgba(80, 60, 140, 0.90); }
.assault-badge      { background: rgba(180, 30, 30, 0.90); }
.retaliate-badge    { background: rgba(120, 20, 120, 0.90); }
.breakthrough-badge { background: rgba(30, 130, 180, 0.90); }
.nocturnal-badge    { background: rgba(30, 30, 80, 0.90); }

.night-banner { background: linear-gradient(135deg, #1a1a3e 0%, #2d2d6b 100%); color: #a0c4ff; }
.day-banner   { background: linear-gradient(135deg, #f0c040 0%, #f8e080 100%); color: #3a2a00; }

.claimed-exile-card {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.table {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  grid-template-rows: auto auto;
  min-height: 0;
  padding: 8px;
}

.battlefield {
  display: grid;
  gap: 4px;
}

.battlefield.opponent {
  align-content: start;
}

.battlefield.current {
  align-content: start;
}

body.match-active .table {
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

body.match-active .battlefield {
  align-content: stretch;
  min-height: 0;
}

body.match-active .battlefield.opponent {
  grid-template-rows: minmax(0, 1fr) auto;
}

body.match-active .battlefield.current {
  grid-template-rows: auto minmax(0, 1fr);
}

body.match-active .field-band {
  min-height: 186px;
}

body.match-active .field-zone {
  min-height: 100%;
}

.zone-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.judge-call-btn {
  border: 1px solid rgba(216, 189, 118, 0.4);
  background: rgba(216, 189, 118, 0.12);
  color: var(--accent, #d8bd76);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}

.judge-call-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.judge-call-btn:hover:not(:disabled) {
  background: rgba(216, 189, 118, 0.22);
}

.mobile-judge-call-btn {
  display: none;
}

.spectate-list-content {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  min-width: 280px;
}

.spectate-match-row {
  padding: 10px 14px;
  border: 1px solid rgba(216, 189, 118, 0.3);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.3);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.spectate-match-row:hover {
  background: rgba(216, 189, 118, 0.14);
}

.spectate-empty {
  color: var(--muted);
  font-size: 13px;
}

.judge-call-row {
  border-color: rgba(200, 90, 70, 0.5);
}

.field-band {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-height: 186px;
  padding: 8px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(216, 189, 118, 0.045), transparent 34%, rgba(255, 255, 255, 0.018)),
    rgba(12, 12, 12, 0.13);
}

.field-band.opponent {
  border-color: rgba(216, 189, 118, 0.22);
}

.field-band.current {
  border-color: rgba(216, 189, 118, 0.32);
}

.field-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.field-priority-btn {
  min-height: 24px;
  padding: 0 8px;
  border-color: rgba(242, 187, 76, 0.48);
  font-size: 11px;
  font-weight: 800;
}

.field-priority-btn:disabled {
  border-color: rgba(199, 194, 173, 0.28);
}

.zone,
.field-zone {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 100px));
  justify-content: center;
  gap: 6px;
  min-height: 142px;
}

.field-zone {
  align-items: start;
  align-self: stretch;
}

/* Scripted desktop fields keep a stable visual order regardless of play order: Gear, Pal, Structure.
   The wrappers normally dissolve into the existing one-row grid. When JS detects that the row
   no longer fits, only the Structure group becomes a compact two-high grid aligned right. */
.scripted-organized-field > .field-main-cards,
.scripted-organized-field > .field-structure-grid,
.scripted-organized-field .field-pal-cards,
.scripted-organized-field .field-gear-cards {
  display: contents;
}

/* In the normal one-row desktop arrangement, flex uses every card slot's true outer width.
   A grid with fixed 100px tracks ignored the wider tapped slots and let consecutive cards overlap. */
@media (min-width: 1024px) {
  .scripted-organized-field:not(.structure-column-layout) {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
  }

  .scripted-organized-field:not(.structure-column-layout) > .field-structure-grid > .structure-stack {
    flex: 0 0 100px;
    width: 100px;
    max-width: 100px;
  }

  .scripted-organized-field:not(.structure-column-layout) .attack-player-target {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    align-self: flex-start;
  }
}

/* Firefox fallback: expose real flex items instead of relying on display:contents descendants
   becoming direct flex items. This preserves Gear -> Pal -> Structure order while giving Gecko
   bounded groups whose minimum size can shrink with the centre layout column. */
@supports (-moz-appearance: none) {
  @media (min-width: 1024px) {
    .scripted-organized-field:not(.structure-column-layout) > .field-main-cards,
    .scripted-organized-field:not(.structure-column-layout) > .field-structure-grid,
    .scripted-organized-field:not(.structure-column-layout) .field-pal-cards,
    .scripted-organized-field:not(.structure-column-layout) .field-gear-cards {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      min-width: 0;
    }

    .scripted-organized-field:not(.structure-column-layout) > .field-main-cards {
      flex: 0 1 auto;
    }

    .scripted-organized-field:not(.structure-column-layout) .field-pal-cards,
    .scripted-organized-field:not(.structure-column-layout) .field-gear-cards {
      flex: 0 0 auto;
    }

    .scripted-organized-field:not(.structure-column-layout) > .field-structure-grid {
      flex: 0 1 auto;
    }
  }
}

.scripted-organized-field.structure-column-layout {
  grid-template-columns: minmax(0, 1fr) auto !important;
  justify-content: stretch;
  align-items: start;
}

.scripted-organized-field.structure-column-layout > .field-main-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 100px));
  justify-content: center;
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.scripted-organized-field.structure-column-layout.gear-column-layout > .field-main-cards {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.field-status.field-status-overlay {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 12;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(12, 12, 12, 0.68);
  pointer-events: auto;
  width: auto;
  max-width: calc(100% - 4px);
  justify-content: flex-end;
}

/* A minimized Structure column must not put Pal/Gear back into fixed 100px tracks. Tapped
   permanents reserve their rotated ~139px footprint through their own max-content slot. */
.scripted-organized-field.structure-column-layout:not(.gear-column-layout) > .field-main-cards {
  grid-template-columns: max-content max-content;
}

.scripted-organized-field.structure-column-layout:not(.gear-column-layout) .field-gear-cards:not(.tapped-two-row-layout),
.scripted-organized-field.structure-column-layout .field-pal-cards:not(.tapped-two-row-layout) {
  display: flex;
  flex-wrap: nowrap;
  align-items: start;
  gap: 6px;
}

.scripted-organized-field.gear-column-layout:not(.structure-column-layout) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

.scripted-organized-field.gear-column-layout:not(.structure-column-layout) > .field-main-cards {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: center;
  align-items: start;
  gap: 6px;
  min-width: 0;
}

.scripted-organized-field.gear-column-layout .field-pal-cards {
  display: flex;
  align-items: start;
  gap: 6px;
}

.scripted-organized-field.gear-column-layout .field-gear-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--compact-gear-width, 100px);
  justify-content: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.scripted-organized-field.structure-column-layout > .field-structure-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: var(--compact-structure-width, 132px);
  justify-content: end;
  align-content: start;
  gap: 6px;
}

.scripted-organized-field.structure-column-layout .structure-stack {
  grid-column: auto;
}

/* In the compact multi-row Structure layout, assignment is shown like mobile: the Pal remains
   in the Pal group and both cards receive separate dashed outlines. structure-occupied also
   stays set from actUsed after the Pal leaves, until the next Stand Phase resets the Structure. */
.scripted-organized-field.structure-column-layout .card.structure-occupied {
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}

@media (max-width: 1023px) {
  .scripted-organized-field,
  .scripted-organized-field.structure-column-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
  }

  .scripted-organized-field > .field-main-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Mirror the two scripted fields around the central prompt strip. Compact mode reverses only
     the current player's main group so its pre-existing Pal -> Gear -> Structure visual order
     survives the desktop DOM order (Gear -> Pal -> Structure). */
  .battlefield.opponent .scripted-organized-field > .field-structure-grid {
    order: 0;
  }

  .battlefield.opponent .scripted-organized-field > .field-main-cards {
    order: 1;
    flex-direction: column;
  }

  .battlefield.current .scripted-organized-field > .field-main-cards {
    flex-direction: column-reverse;
  }

  .scripted-organized-field .field-pal-cards,
  .scripted-organized-field .field-gear-cards,
  .scripted-organized-field > .field-structure-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    gap: 6px;
    width: 100%;
    max-width: 484px;
    margin-inline: auto;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot,
  .scripted-organized-field .field-gear-cards > .field-card-slot,
  .scripted-organized-field > .field-structure-grid > .structure-stack {
    flex: 0 0 92px;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot.tapped-card-slot,
  .scripted-organized-field .field-gear-cards > .field-card-slot.tapped-card-slot {
    flex-basis: 154px;
    width: 154px;
    min-width: 154px;
  }

  .scripted-organized-field .field-pal-cards:empty,
  .scripted-organized-field .field-gear-cards:empty,
  .scripted-organized-field > .field-structure-grid:empty {
    display: none;
  }

  .scripted-organized-field > .field-structure-grid > .structure-stack {
    grid-column: auto;
    width: 92px;
    max-width: 92px;
  }
}

.opponent-hand-wrap {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 60px;
  padding: 4px 6px;
  border: 1px solid rgba(216, 189, 118, 0.28);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.34);
}

.opponent-hand-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.opponent-hand-count strong {
  display: grid;
  place-items: center;
  min-width: 20px;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(216, 189, 118, 0.42);
  border-radius: 999px;
  background: rgba(216, 189, 118, 0.12);
  color: var(--text);
  font-size: 11px;
}

.opponent-hand-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 4px;
  overflow: hidden;
}

.board-pile-label {
  display: none;
}

.discard-pile.empty .board-pile-label,
.exile-pile.empty .board-pile-label {
  display: inline;
}

.opponent-hand-card {
  flex: 0 0 38px;
  aspect-ratio: 5 / 7;
  margin-left: 0;
  border: 1px solid rgba(215, 208, 191, 0.7);
  border-radius: 5px;
  background: #111714;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
  transform: rotate(180deg) translateY(calc((var(--hand-index) % 2) * -2px));
}

.opponent-hand-card:not(:first-child) {
  margin-left: clamp(
    -38px,
    calc((100% - (38px * var(--opponent-hand-count))) / var(--opponent-hand-gaps)),
    -10px
  );
}

.opponent-hand-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.opponent-hand-empty {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.structure-stack {
  position: relative;
  grid-column: span 2;
  justify-self: center;
  width: 100%;
  max-width: 226px;
}

.structure-stack > .card {
  width: 100%;
}

.assigned-pal-slot {
  position: absolute;
  top: 7%;
  right: 4%;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 48%;
  height: 86%;
  padding: 4px;
  border: 1px solid rgba(242, 187, 76, 0.55);
  border-radius: 6px;
  background: rgba(10, 15, 13, 0.86);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.48);
}

.assigned-pal-slot:hover {
  z-index: 90;
}

.assigned-pal-slot.click-target {
  border-color: rgba(242, 187, 76, 0.96);
  box-shadow:
    0 0 0 2px rgba(242, 187, 76, 0.82),
    0 0 18px rgba(242, 187, 76, 0.58);
}

.assigned-pal-slot.blocker-selected {
  border-color: #5da9e9;
  box-shadow:
    0 0 0 3px rgba(93, 169, 233, 0.92),
    0 0 18px rgba(93, 169, 233, 0.62);
}

.assigned-pal-slot.effect-selected {
  border-color: var(--danger);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--danger) 88%, transparent),
    0 0 18px color-mix(in srgb, var(--danger) 62%, transparent);
}

.assigned-pal-slot .card.assigned-overlay-card {
  width: auto;
  height: 100%;
  max-width: 100%;
  padding: 2px;
  border-width: 1px;
  border-radius: 5px;
  aspect-ratio: 5 / 7.8;
}

.assigned-pal-slot .assigned-overlay-card .card-game-overlay {
  width: 100%;
  min-width: 0;
  padding: 2px;
  font-size: clamp(7px, 0.65vw, 9px);
  line-height: 1.05;
}

.assigned-pal-slot .assigned-overlay-card .card-game-overlay > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assigned-pal-slot .card.assigned-overlay-card:hover {
  z-index: 91;
}

.assigned-structure-act {
  position: absolute;
  left: 4%;
  bottom: 5%;
  z-index: 82;
}

.assigned-structure-act button {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 9px;
}

.pal-damage-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(180, 30, 30, 0.92);
  color: #fff;
  font-size: clamp(8px, 0.65vw, 11px);
  font-weight: 800;
  padding: 2px 5px;
  border: 1px solid rgba(255, 190, 180, 0.48);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(90, 0, 0, 0.55);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

.battlefield .card.real-card[data-card-type="Structure"].structure-covered > .pal-damage-badge {
  left: 4px;
  right: auto;
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(64px, 0.8fr) minmax(88px, 1fr) auto;
  gap: 6px;
  width: 100%;
  min-height: 0;
  aspect-ratio: 5 / 7.8;
  padding: 8px;
  border: 2px solid var(--colorless);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 42%),
    #2b2b28;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.card.real-card {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  padding: 5px;
  overflow: visible;
  background: #111110;
  container-type: inline-size;
}

.battlefield .card.real-card {
  gap: 2px;
  padding: 3px;
  border-width: 1px;
  border-radius: 6px;
}

/* Scripted field actions are contextual: the card keeps its full artwork and current
   dimensions, while its controls float below it after the player clicks the card. */
.battlefield .card.real-card:not([data-card-type="Structure"]) {
  grid-template-rows: minmax(0, 1fr);
}

.battlefield .card.real-card:not([data-card-type="Structure"]) .card-face {
  /* Start from the complete scan, then apply a controlled zoom. This keeps the field visually
     full without the harsher edge loss of `cover`, which clipped mana costs too tightly. */
  object-fit: contain;
  object-position: center;
  transform: scale(1.06);
}

.hand-grid .card.real-card:not([data-card-type="Structure"]) .card-face {
  /* Hand cards now use the same controlled crop as battlefield cards. Their action row moved
     outside the card, so this zoom reclaims the newly available image area while retaining a
     little breathing room around the printed cost. */
  object-fit: contain;
  object-position: center;
  transform: scale(1.015);
}

.battlefield .card.real-card:not([data-card-type="Structure"]) .card-game-overlay {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  z-index: 3;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.battlefield .card.real-card:not([data-card-type="Structure"]) .card-game-overlay > span {
  display: block;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(8, 9, 8, 0.88);
  color: #fff;
  text-align: center;
}

.battlefield .card.real-card.has-inline-gear-tap .card-game-overlay > span {
  display: none;
}

.battlefield .card.real-card.has-inline-gear-tap .card-game-overlay {
  pointer-events: none;
}

.battlefield .card.real-card.has-inline-gear-tap .inline-gear-tap {
  width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid #ffbd4a;
  border-radius: 4px;
  background: linear-gradient(180deg, #352814, #17140f);
  color: #fff4ce;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.48);
  pointer-events: auto;
}

.battlefield .card.real-card.has-inline-gear-tap .inline-gear-tap:disabled {
  opacity: 0.42;
  filter: grayscale(0.45);
}

.scripted-card-actions {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 360;
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 360px);
  transform: translateX(-50%);
}

.scripted-card-actions .three-pal-buttons {
  display: flex;
  gap: 8px;
  width: max-content;
}

.scripted-card-actions button {
  min-width: 82px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #ffbd4a;
  border-radius: 8px;
  background: linear-gradient(180deg, #352814, #17140f);
  color: #fff4ce;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.scripted-card-actions button:disabled {
  opacity: 0.42;
  filter: grayscale(0.45);
}

.card.scripted-actions-open {
  z-index: 350 !important;
}

.scripted-hand-actions {
  position: absolute;
  right: auto;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 360;
  display: flex;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 360px);
  transform: translateX(-50%);
}

.scripted-hand-actions > button,
.scripted-hand-actions .interrupt-actions button {
  min-width: 82px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #ffbd4a;
  border-radius: 8px;
  background: linear-gradient(180deg, #352814, #17140f);
  color: #fff4ce;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.scripted-hand-actions .interrupt-actions {
  display: flex;
  gap: 8px;
}

.scripted-hand-actions button:disabled {
  opacity: 0.42;
  filter: grayscale(0.45);
}

.card.scripted-hand-actions-open {
  z-index: 350 !important;
}

.card.hand-dragging .scripted-hand-actions,
.card.scripted-dragging .scripted-hand-actions {
  display: none;
}

.card.small {
  aspect-ratio: 5 / 7.8;
}

.card.selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.card.click-target {
  cursor: crosshair;
  outline: 2px solid rgba(242, 187, 76, 0.86);
  outline-offset: 2px;
}

.card.blocker-selected {
  outline: 3px solid #5da9e9;
  outline-offset: 2px;
}

.card.effect-selected {
  outline: 3px solid var(--danger);
  outline-offset: 2px;
}

.card.freeze-hover-highlight {
  outline: 3px solid rgba(70, 170, 230, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 14px 2px rgba(70, 170, 230, 0.55);
}

.card.combat-attacker {
  border-color: #ffe08a;
  box-shadow:
    0 0 0 2px rgba(255, 224, 138, 0.62),
    0 0 22px rgba(255, 224, 138, 0.72),
    inset 0 0 0 1px rgba(255, 244, 204, 0.32);
  animation: combatPulseGold 720ms ease-in-out infinite alternate;
}

.card.combat-defender {
  border-color: #c9f6ff;
  box-shadow:
    0 0 0 3px rgba(120, 232, 255, 0.92),
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 32px rgba(72, 219, 255, 0.92),
    inset 0 0 0 1px rgba(236, 252, 255, 0.52);
  animation: combatPulseBlue 720ms ease-in-out infinite alternate;
}

.card.combat-blocker {
  border-color: #ff765f;
  box-shadow:
    0 0 0 2px rgba(255, 118, 95, 0.6),
    0 0 20px rgba(255, 118, 95, 0.68),
    inset 0 0 0 1px rgba(255, 223, 214, 0.24);
  animation: combatPulseRed 720ms ease-in-out infinite alternate;
}

.card.tapped {
  rotate: 90deg;
  opacity: 0.86;
  transition: rotate 500ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease;
}

/* Rotation does not alter grid geometry. A tapped 100px Pal/Gear therefore reserves its actual
   landscape width (portrait height = 100 * 454 / 326), rather than an arbitrary two-column span. */
.scripted-organized-field .field-card-slot {
  position: relative;
  display: grid;
  place-items: start center;
  width: 100px;
  min-width: 100px;
  min-height: 142px;
}

.scripted-organized-field .field-card-slot > .card {
  width: 100px;
  margin: 0;
}

.scripted-organized-field .field-card-slot.tapped-card-slot {
  grid-column: auto;
  width: calc(100px * 454 / 326);
  min-width: calc(100px * 454 / 326);
}

.scripted-organized-field.gear-column-layout .field-pal-cards .field-card-slot.tapped-card-slot {
  flex: 0 0 calc(100px * 454 / 326);
}

/* Tapped controls are rendered as a slot sibling, outside the rotating card. Their centre is
   therefore the actual landscape slot centre, and their top follows the visible rotated bottom. */
@media (min-width: 1024px) {
  .scripted-organized-field .field-card-slot.slot-actions-open {
    z-index: 350;
  }

  .scripted-organized-field .field-card-slot > .tapped-slot-actions {
    top: calc(((100px * 454 / 326 - 100px) / 2) + 109px);
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center top;
  }
}

.battlefield .card.real-card:not([data-card-type="Structure"]) {
  aspect-ratio: 326 / 454;
}

.card:hover,
.card.tapped:hover {
  z-index: 50;
}

.card.assigned {
  outline: 3px dashed #35f2c2;
  outline-offset: -5px;
  box-shadow: 0 0 16px rgba(53, 242, 194, .5);
}

.card[data-assignment-slot].assigned,
.card[data-assignment-slot].structure-occupied {
  outline: 3px dashed var(--assignment-color) !important;
  outline-offset: -5px;
  box-shadow: 0 0 17px color-mix(in srgb, var(--assignment-color) 58%, transparent) !important;
}

.card[data-assignment-slot="0"] { --assignment-color: #35f2c2; }
.card[data-assignment-slot="1"] { --assignment-color: #ff5ccf; }
.card[data-assignment-slot="2"] { --assignment-color: #59a8ff; }
.card[data-assignment-slot="3"] { --assignment-color: #ffd447; }
.card[data-assignment-slot="4"] { --assignment-color: #ff704d; }
.card[data-assignment-slot="5"] { --assignment-color: #b87cff; }
.card[data-assignment-slot="6"] { --assignment-color: #8cff47; }
.card[data-assignment-slot="7"] { --assignment-color: #39e8ff; }
.card[data-assignment-slot="8"] { --assignment-color: #ff9de1; }
.card[data-assignment-slot="9"] { --assignment-color: #fff27a; }

.card.scripted-dragging {
  opacity: .38;
  filter: saturate(.7);
}

.scripted-drop-target {
  outline: 3px dashed #ffca55 !important;
  outline-offset: 3px;
  box-shadow: 0 0 24px rgba(255, 202, 85, .72) !important;
}

#scripted-combat-arrow,
#scripted-effect-arrow {
  position: fixed;
  inset: 0;
  z-index: 240;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 183, 63, .7));
}

/* Combat arrows belong to the board/document, not to the browser viewport. Their SVG dimensions
   and path coordinates are set in page space by renderScriptedCombatArrow(), so scrolling keeps
   both endpoints anchored to the rendered attacker and target instead of dragging the arrow
   along with the screen. The pointer-following effect arrow intentionally remains fixed. */
#scripted-combat-arrow {
  position: absolute;
  right: auto;
  bottom: auto;
}

#scripted-combat-arrow > path,
#scripted-effect-arrow > path {
  fill: none;
  stroke: #ffbd4a;
  stroke-width: 5;
  stroke-linecap: round;
  marker-end: url(#combat-arrow-head);
}

#scripted-combat-arrow marker path,
#scripted-effect-arrow marker path {
  fill: #ffbd4a;
  stroke: none;
}

#scripted-effect-arrow {
  z-index: 250;
  filter: drop-shadow(0 0 5px rgba(62, 242, 199, .7));
}

#scripted-effect-arrow > path {
  stroke: #42efc7;
  stroke-width: 4;
  marker-end: url(#effect-arrow-head);
}

#scripted-effect-arrow marker path {
  fill: #42efc7;
}

.scripted-organized-field .field-pal-cards,
.scripted-organized-field .field-gear-cards {
  column-gap: 34px;
  row-gap: 18px;
}

.drag-direct-attack-target {
  animation: directAttackTargetIn 150ms ease-out both;
}

@keyframes directAttackTargetIn {
  from { opacity: 0; scale: .88; }
  to { opacity: 1; scale: 1; }
}

.card.interrupt-drag-choice {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 420 !important;
  width: min(150px, 24vw) !important;
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px #ff6b42, 0 0 42px rgba(255, 75, 35, .72) !important;
}

.card.interrupt-drag-choice .interrupt-actions {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  width: max-content;
  transform: translateX(-50%);
}

.card.interrupt-drag-choice .interrupt-actions button {
  min-height: 48px;
  border: 1px solid #ffbd4a;
  border-radius: 8px;
  background: linear-gradient(180deg, #352814, #17140f);
  color: #fff4ce;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}

.card.combat-collision {
  z-index: 330 !important;
  animation: scriptedCombatCollision 300ms ease-in-out both !important;
}

.battlefield.current .card.combat-collision {
  --combat-collision-y: -34px;
}

.battlefield.opponent .card.combat-collision {
  --combat-collision-y: 34px;
}

@keyframes scriptedCombatCollision {
  0% { translate: 0 0; }
  55% { translate: 0 var(--combat-collision-y, 0); scale: 1.06; }
  100% { translate: 0 0; }
}

.card.red {
  border-color: var(--red);
}

.card.blue {
  border-color: var(--blue);
}

.card.green {
  border-color: var(--green);
}

.card.purple {
  border-color: var(--purple);
}

.card.colorless {
  border-color: var(--colorless);
}

.card-header {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
}

.card-type {
  color: var(--muted);
  font-size: 12px;
}

.card-art {
  display: grid;
  place-items: center;
  min-height: 36px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 24px;
}

.card-art svg {
  width: 100%;
  max-width: 96px;
  height: 46px;
}

.card-face-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
}

.battlefield .card-face-wrap {
  border-radius: 4px;
}

.card-face {
  display: block;
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  height: 100%;
  object-fit: contain;
}

/* Structure artwork is stored portrait. Rather than rotating (which only ever shows a thin
   off-center sliver of the source image and looks great or terrible depending on where that
   sliver happens to land on any given card's art), just crop it centered like Pal art — the
   card-face-wrap box here is already landscape-shaped, so a plain centered cover crop reliably
   captures a recognizable, full-width slice of the scene for every card. */
.card.real-card[data-card-type="Structure"] .card-face {
  object-fit: contain;
}

.hand-grid .card.real-card[data-card-type="Structure"] .card-face {
  transform: rotate(180deg);
}

.battlefield .card.real-card[data-card-type="Structure"] {
  aspect-ratio: 326 / 454;
  /* Beats the compact media query's generic ".battlefield .card.real-card" grid-template-rows
     override (which the [data-card-type="Structure"] attribute here outranks on specificity
     regardless of viewport). Unlike the tall portrait rows used by Pal cards (and by the
     compact thumbnail row), this landscape card is short overall (~156px at the usual
     226px-wide slot) — reusing the portrait card's row minimums (64px + 88px = 152px) left
     almost nothing for the art row once the overlay claimed its minimum. Give the art row
     (2) the space instead and let the overlay row (3) size to its own content. */
  grid-template-rows: minmax(0, 1fr) auto;
}

/* face-wrap fills only its grid row (1fr), leaving room for the stats overlay.
   position:relative + the absolutely-positioned face below sidesteps a CSS grid quirk: inside
   a `place-items:center` grid cell (the base .card-face-wrap rule), a child's percentage
   height doesn't reliably resolve against the cell's actual size, so plain width:100%/
   height:100% on the img was silently falling back to its natural aspect ratio and getting
   center-cropped by the grid alignment instead of by object-fit — landing on the card's own
   rules-text box instead of the art. Absolute positioning is exempt from that quirk. */
.battlefield .card.real-card[data-card-type="Structure"] .card-face-wrap {
  /* height:auto (not a fixed 44px) beats the compact media query's generic
     ".card.real-card .card-face-wrap" thumbnail-row override on specificity. */
  position: absolute;
  inset: 5px;
  height: auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* Rotating the portrait source to show it in full (an earlier approach here) backfired: once
   the art row is tall enough to matter, its aspect ratio ends up close enough to the *whole*
   rotated card (~525:376) that "full containment" shows barely any cropping at all — i.e. the
   card's own rules-text box and name band alongside the art, not just a clean scenic crop.
   Cropping straight in (no rotation) like the in-hand thumbnail avoids that: it always shows a
   full-width horizontal slice of the source centered vertically, landing inside the art band
   (roughly the middle ~60% of the card, between the rules text at top and the name band at
   bottom) regardless of how tall this particular slot ends up being. */
.battlefield .card.real-card[data-card-type="Structure"] .card-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100cqh;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

.scripted-organized-field.gear-column-layout .field-gear-cards > .field-card-slot {
  width: var(--compact-gear-width, 100px);
  min-width: var(--compact-gear-width, 100px);
  min-height: calc(var(--compact-gear-width, 100px) * 454 / 326);
}

.scripted-organized-field.gear-column-layout .field-gear-cards > .field-card-slot > .card {
  width: var(--compact-gear-width, 100px);
}

.hand-player-identity {
  min-width: 0;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.hand-zone-title .hand-player-identity {
  font-weight: 700;
}

.battlefield .card.real-card[data-card-type="Structure"] .card-game-overlay {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  background: rgba(12, 12, 12, 0.88);
  border-radius: 3px;
  font-size: 9px;
}

.battlefield .card.real-card[data-card-type="Structure"] > .compact-card-name,
.battlefield .card.real-card[data-card-type="Structure"] > .compact-card-stats,
.battlefield .card.real-card[data-card-type="Structure"] .card-game-overlay > span {
  display: none;
}

.battlefield .card.real-card[data-card-type="Structure"]:not(.structure-covered) .card-game-overlay {
  padding-bottom: 16px;
}

.battlefield .card.real-card[data-card-type="Structure"]:not(.structure-covered) .card-game-overlay:not(:has(button)):not(:has(.card-target)) {
  height: 14px;
  min-height: 14px;
  padding: 0;
}

.battlefield .card.real-card.structure-covered .card-game-overlay {
  display: none;
}

.battlefield .card.real-card[data-card-type="Structure"].structure-covered .compact-card-name {
  display: none;
}

.card-zoom {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  display: none;
  width: min(320px, 42vw);
  max-height: min(78vh, 520px);
  object-fit: contain;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: #111110;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.72);
  pointer-events: none;
  transform: translateX(-50%);
}

.card:hover .card-zoom {
  display: none;
}

.attack-notice {
  display: grid;
  grid-template-rows: auto auto minmax(48px, 1fr);
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(242, 187, 76, 0.45);
  border-radius: 8px;
  background: rgba(10, 15, 13, 0.88);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

/* Bigger sibling of .turn-order-badge (app.js renderMulliganTurnOrderPlate), shown centered over
   each player's still-empty field only during RPS/mulligan setup. Absolutely positioned within
   .field-zone (position:relative above) rather than slotted into the card grid like
   .attack-player-target — the field has no cards yet at this point, so nothing to overlap. */
.mulligan-turn-order-plate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 28px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.16), rgba(12, 12, 12, 0.88)),
    #1c1a15;
  box-shadow: 0 0 24px rgba(216, 189, 118, 0.3);
  pointer-events: none;
  text-align: center;
}

.mulligan-turn-order-plate strong {
  font-size: 30px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.mulligan-turn-order-plate span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mulligan-turn-order-plate {
    padding: 10px 18px;
  }

  .mulligan-turn-order-plate strong {
    font-size: 22px;
  }

  .mulligan-turn-order-plate span {
    font-size: 9px;
  }
}

.attack-player-target {
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  min-height: 140px;
  aspect-ratio: 5 / 7.8;
  padding: 8px;
  border: 2px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(242, 187, 76, 0.2), rgba(12, 12, 12, 0.82)),
    #25241f;
  color: var(--text);
  text-align: center;
  box-shadow: 0 0 18px rgba(242, 187, 76, 0.28);
}

.attack-player-target strong {
  font-size: 13px;
  text-transform: uppercase;
}

.attack-player-target span {
  color: var(--accent-strong);
  font-size: 10px;
}

.combat-prompt-action {
  width: 100%;
  min-height: 52px;
  align-self: stretch;
  border-color: rgba(242, 187, 76, 0.66);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.attack-notice strong,
.attack-notice b {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.attack-notice strong {
  color: var(--text);
  font-size: 12px;
}

.attack-notice div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.attack-notice b {
  color: var(--accent);
  font-weight: 800;
}

.attack-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  width: min(48vw, 520px);
  height: 120px;
  color: var(--text);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.attack-arrow-source {
  position: absolute;
  left: 0;
  top: 50%;
  max-width: 130px;
  padding: 3px 6px;
  border: 1px solid rgba(114, 190, 154, 0.45);
  border-radius: 999px;
  background: rgba(10, 15, 13, 0.74);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
}

.attack-arrow-lines {
  position: absolute;
  inset: 0 0 0 112px;
}

.attack-arrow-path {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(100% - 16px);
  height: 0;
  border-top: 3px solid var(--accent);
  filter: drop-shadow(0 0 7px rgba(114, 190, 154, 0.55));
  transform: translateY(calc((var(--arrow-index) - (var(--arrow-count) - 1) / 2) * 24px)) rotate(calc((var(--arrow-index) - (var(--arrow-count) - 1) / 2) * 7deg));
  transform-origin: left center;
}

.attack-arrow.redirected .attack-arrow-path {
  border-top-color: var(--danger);
  filter: drop-shadow(0 0 7px rgba(232, 93, 117, 0.58));
}

.attack-arrow-path::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -8px;
  border-left: 14px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  color: var(--accent);
}

.attack-arrow.redirected .attack-arrow-path::after {
  color: var(--danger);
}

.attack-arrow-label {
  position: absolute;
  right: 4px;
  bottom: 8px;
  max-width: 150px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(10, 15, 13, 0.74);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-art-fallback {
  display: none;
  width: 100%;
  height: 100%;
}

.card-face-wrap.missing-image .card-art-fallback {
  display: grid;
}

.card-game-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border-radius: 5px;
  background: rgba(12, 12, 12, 0.9);
  font-size: 11px;
}

.battlefield .card-game-overlay {
  gap: 3px;
  padding: 3px;
  font-size: 9px;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
}

.battlefield .card-game-overlay > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.card-game-overlay button,
.card-game-overlay .card-target {
  width: 100%;
  min-height: 28px;
  font-size: 11px;
}

.battlefield .card-game-overlay button,
.battlefield .card-game-overlay .card-target {
  min-height: 22px;
  padding: 0 4px;
  font-size: 9px;
}

.three-pal-buttons {
  display: contents;
}

.battlefield .three-pal-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  width: 100%;
}

.battlefield .three-pal-buttons button:last-child {
  grid-column: 1 / -1;
}

.card-text {
  color: var(--muted);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.card-text.text-lg {
  font-size: 12px;
}

.card-text.text-md {
  font-size: 11px;
}

.card-text.text-sm {
  font-size: 10px;
}

.card-text.text-xs {
  font-size: 9px;
  line-height: 1.18;
}

.card-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
}

.card-stats button,
.card-target {
  width: 100%;
  min-height: 30px;
  font-size: 12px;
}

.interrupt-actions {
  display: grid;
  gap: 4px;
}

.quick-option .interrupt-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interrupt-actions button {
  min-height: 26px;
  padding: 0 6px;
  font-size: 10px;
}

.damage {
  color: var(--danger);
  font-weight: 700;
}

.power-buffed {
  color: #65c18c;
  font-weight: 800;
}

.card-stat-token {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  line-height: 1;
  vertical-align: -0.14em;
  white-space: nowrap;
}

.card-stat-icon {
  width: 1.22em;
  height: 1.22em;
  flex: 0 0 auto;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-stat-icon-power { color: #e8edf1; fill: rgba(232, 237, 241, 0.18); }
.card-stat-icon-strike { color: #f0b64b; fill: rgba(240, 182, 75, 0.22); }
.card-stat-icon-durability { color: #80c9e8; fill: rgba(128, 201, 232, 0.2); }

.card-stat-value {
  color: inherit;
  font-weight: 800;
}

.controls {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 100%;
}

.control-top,
.control-info,
.control-bottom {
  display: grid;
  gap: 8px;
}

.control-info {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.control-bottom {
  align-content: end;
}

.undo-response-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.gameplay-controls .hover-preview-panel {
  min-height: 120px;
}

.end-turn-control {
  min-height: 52px;
  border-color: rgba(216, 189, 118, 0.72);
  background:
    linear-gradient(180deg, rgba(216, 189, 118, 0.12), transparent),
    #2c2c29;
  font-size: 15px;
}

.surrender-control {
  border-color: rgba(214, 97, 74, 0.78);
  color: #ffd4cb;
}

.control-bottom button {
  min-height: 40px;
  border-color: rgba(216, 189, 118, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.control-bottom .end-turn-control {
  min-height: 52px;
}

.hover-preview-panel {
  position: relative;
  display: grid;
  place-items: center;
  container-type: size;
  contain: size layout paint;
  min-width: 0;
  min-height: 180px;
  max-width: 100%;
  height: 100%;
  padding: 10px;
  border: 1px solid rgba(216, 189, 118, 0.32);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.42);
  overflow: hidden;
}

.hover-preview-panel.pinned-event-preview {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(216, 189, 118, 0.32), 0 0 18px rgba(216, 189, 118, 0.28);
}

.hover-preview-pinned-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #241605;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.hover-preview-panel.empty {
  place-items: center;
  min-height: 180px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.hover-preview-card-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: auto;
  height: min(calc(100cqh - 20px), calc((100cqw - 20px) * 454 / 313));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 313 / 454;
  min-width: 0;
  min-height: 0;
}

.hover-preview-card-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 2px solid rgba(216, 189, 118, 0.68);
  border-radius: 10px;
  background: #111110;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.hover-preview-panel.structure-preview .hover-preview-card-frame > img,
.mobile-card-preview.structure-preview img,
.mill-preview-card.structure-preview img,
.discard-hover-preview.structure-preview img {
  transform: rotate(180deg);
}

.preview-effect-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(12, 12, 12, 0.82);
  color: #e8e3d8;
  font-size: 11px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
  word-break: break-word;
}

.preview-effect-text--pal {
  bottom: 18%;
  left: 4px;
  right: 4px;
  border-radius: 6px;
}

.hover-preview-panel.mill-preview-active {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 180px;
  height: 100%;
  padding: 8px;
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 54%, rgba(216, 189, 118, 0.16), transparent 62%),
    rgba(7, 10, 9, 0.94);
  box-shadow: inset 0 0 24px rgba(216, 189, 118, 0.08), 0 0 16px rgba(216, 189, 118, 0.12);
}

.mill-preview-heading {
  display: grid;
  gap: 2px;
  width: 100%;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.3);
  text-align: center;
  text-transform: uppercase;
}

.mill-preview-heading strong {
  color: var(--accent-strong);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.mill-preview-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mill-preview-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mill-preview-cards[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mill-preview-cards[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mill-preview-cards[data-count="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.mill-preview-cards[data-count="5"],
.mill-preview-cards[data-count="6"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.mill-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  container-type: size;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.hover-preview-panel .mill-preview-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
  object-fit: contain;
  border: 2px solid rgba(216, 189, 118, 0.84);
  border-radius: 4px;
  background: #101411;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(7, 10, 9, 0.82);
}


.hover-preview-panel .mill-preview-card.lucky img {
  border-color: #fff0a8;
  box-shadow: 0 0 0 2px rgba(255, 240, 168, 0.25), 0 0 20px rgba(255, 220, 112, 0.5);
}

.mobile-card-preview {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 6, 0.9);
  pointer-events: none;
}

.mobile-card-preview[hidden] {
  display: none;
}

.mobile-card-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(330px, calc(100vw - 32px));
  max-height: min(460px, calc(100vh - 32px));
  object-fit: contain;
  border: 2px solid var(--accent);
  border-radius: 9px;
  background: #111110;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72);
}

/* Structure artwork is stored portrait. Unlike deckbuilder previews, this in-game
   long-press/hold preview intentionally shows the raw file as-is (no rotation). */

.mill-preview-card strong {
  position: absolute;
  inset: auto 2px 2px;
  overflow: hidden;
  padding: 2px;
  border-radius: 3px;
  background: rgba(5, 7, 6, 0.86);
  color: #fff5d6;
  font-size: 7px;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mill-animation-active .card-zoom {
  display: none !important;
}

body.mill-animation-active .discard-hover-preview {
  display: none !important;
}

body.mill-animation-active .mobile-card-preview {
  display: none !important;
}

.target-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(31, 32, 31, 0.9);
}

.rps-turn-order-panel {
  text-align: center;
}

.rps-turn-order-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.rps-turn-order-actions button {
  min-width: 132px;
  border-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 900;
}

.compact-field-prompts {
  display: none;
}

/* Tabletop keeps turn-order and inactivity decisions in the strip between the fields. The
   utility toolbar remains in the left column on desktop and is still rendered here on mobile. */
.compact-field-prompts.tabletop-central-prompts.has-tabletop-central-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px;
}

.compact-field-prompts.tabletop-central-prompts.has-tabletop-central-action > .tabletop-field-toolbar,
.compact-field-prompts.tabletop-central-prompts.has-tabletop-central-action > .mobile-judge-call-btn {
  display: none;
}

.tabletop-rps-turn-order-panel {
  width: max-content;
  max-width: 100%;
}

.tabletop-rps-turn-order-panel .rps-turn-order-actions {
  flex-wrap: nowrap;
}

.desktop-central-day-night {
  display: none;
}

.target-panel label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.target-panel select {
  width: 100%;
}

.rematch-prompt-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.rematch-square-btn {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.zoe-panel {
  gap: 8px;
}

.zoe-skip-return-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px;
  font-size: .85rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}

button.discard-list-item.zoe-pick-pal {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
}

button.discard-list-item.zoe-pick-pal:hover {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
}

.zoe-mode,
.zoe-mode-buttons,
.zoe-resource-dialog {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
}

.zoe-mode b {
  color: var(--accent);
  font-size: 11px;
}

.zoe-mode label,
.zoe-resource-dialog label {
  grid-template-columns: 1fr 64px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.zoe-mode input,
.zoe-mode select,
.zoe-resource-dialog input {
  width: 100%;
  min-width: 0;
}

.discard-mini-list {
  display: grid;
  gap: 5px;
}

.discard-mini-list button {
  min-height: 30px;
  padding: 5px 8px;
  text-align: left;
}

.damage-assignment {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #181918;
}

.quick-window {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: rgba(31, 32, 31, 0.9);
}

.quick-window p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.quick-option {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #242522;
}

.quick-option span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.quick-option select,
.quick-option button {
  width: 100%;
  min-height: 30px;
  font-size: 12px;
}

.damage-assignment label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.damage-assignment input,
.damage-assignment select {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
}

.control-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hand-panel {
  margin: 0 10px 6px;
  padding: 6px 10px 7px;
  overflow-x: clip;
}

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

.mulligan-grid.single {
  grid-template-columns: 1fr;
}

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

.spectate-hand-half {
  min-width: 0;
  overflow-x: auto;
}

.mulligan-status {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.mulligan-player {
  display: grid;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mulligan-hand-row {
  display: block;
  min-width: 0;
}

.setup-hover-preview-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.setup-hover-preview-wrap .hover-preview-panel {
  flex: 1;
  min-height: 0;
  height: 100%;
}


.setup-controls-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.setup-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.setup-actions strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.controls > button,
.setup-actions button {
  min-height: 46px;
  border-color: rgba(216, 189, 118, 0.54);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.setup-actions button {
  min-height: 50px;
  padding: 0 18px;
  font-size: 16px;
}

.hand-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.hand-grid > .card {
  flex: 0 1 140px;
  max-width: 140px;
}

.hand-grid.player-hand > .card {
  flex-basis: 140px;
  max-width: 140px;
}

.hand-grid.crowded {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  overflow: visible;
  padding-inline: 4px;
  max-width: 100%;
  --hand-overlap-min: -88px;
  --hand-edge-buffer: 18px;
}

.hand-grid.crowded > .card {
  flex: 0 0 140px;
  margin-right: clamp(
    var(--hand-overlap-min),
    calc((100% - var(--hand-edge-buffer) - (140px * var(--hand-count))) / var(--hand-gaps)),
    -2px
  );
  transition: margin 140ms ease, transform 140ms ease, filter 140ms ease;
}

.hand-grid.more-crowded {
  --hand-overlap-min: -96px;
}

.hand-grid.very-crowded {
  --hand-overlap-min: -104px;
}

.hand-grid.crowded > .card:last-child {
  margin-right: 0;
}

.hand-grid.crowded > .card:hover,
.hand-grid.crowded > .card.hand-drop-target,
.hand-grid.crowded > .card.hand-dragging {
  z-index: 30;
  transform: translateY(-8px);
}

.hand-grid .card.hand-dragging {
  opacity: 0.45;
}

.hand-grid .card.hand-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  height: 320px;
  max-height: 320px;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

#left-panel .chat-panel {
  height: 320px;
  max-height: 320px;
  min-height: 0;
}

.game-notices {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(216, 189, 118, 0.25);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%),
    rgba(31, 32, 31, 0.72);
}

.game-notices.combat-active {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}

.game-notices.combat-active .attack-notice {
  min-height: 100%;
}

.game-notices.empty {
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

body.match-active > #app > .legal-footer,
body.match-active .cookie-banner {
  display: none;
}

/* Legal copy belongs to the visible /play lobby only. */
body:not(.legal-footer-route) .legal-footer,
body.match-active .legal-footer {
  display: none !important;
}

.game-notices.match-log-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.claim-inactivity-btn {
  border: 1px solid #ff6b6b;
  border-radius: 7px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #c92f35, #821c22);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(218, 45, 54, 0.35);
}

.match-clock {
  flex: 0 0 auto !important;
  width: max-content;
  min-width: max-content !important;
  max-width: 100%;
  justify-self: center;
  border: 1px solid rgba(216, 189, 118, .55);
  border-radius: 999px;
  padding: 4px 12px;
  background: rgba(18, 19, 18, .9);
  color: var(--accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.match-clock-critical {
  border-color: #ff6b6b;
  color: #ff8c8c;
}

.match-history-cause {
  color: #e9b2b2;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
}

.match-log-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  font-size: 12px;
  line-height: 1.35;
}

.match-log-list p {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.log-card-name {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: underline dotted rgba(216, 189, 118, 0.68);
  text-underline-offset: 2px;
  cursor: help;
}

.log-card-hover-preview {
  position: fixed;
  z-index: 10050;
  width: 112px;
  padding: 4px;
  pointer-events: none;
  border: 1px solid rgba(216, 189, 118, 0.82);
  border-radius: 8px;
  background: #111211;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
}

.log-card-hover-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.log-card-hover-preview.structure-preview {
  width: 158px;
}

@media (hover: none), (pointer: coarse) {
  .log-card-name {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: inherit;
  }
}

.chat-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow: auto;
}

.chat-list p {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-list strong {
  color: var(--text);
}

.chat-empty {
  color: var(--muted);
}

.chat-system-notice {
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.chat-form input {
  min-width: 0;
}

.chat-form button {
  min-height: 34px;
}

@media (min-width: 1024px) {
  .scripted-organized-field.all-untapped-field-layout > .field-main-cards,
  .scripted-organized-field.all-untapped-field-layout > .field-structure-grid,
  .scripted-organized-field.single-tapped-field-layout > .field-main-cards,
  .scripted-organized-field.single-tapped-field-layout > .field-structure-grid {
    align-self: center;
  }

  .scripted-organized-field .permanent-type-layout {
    align-self: center;
  }

  .scripted-organized-field:not(.structure-column-layout) .field-pal-cards.permanent-type-layout:not(.tapped-two-row-layout),
  .scripted-organized-field:not(.structure-column-layout) .field-gear-cards.permanent-type-layout:not(.tapped-two-row-layout),
  .scripted-organized-field:not(.structure-column-layout) > .field-structure-grid.permanent-type-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* Two or more tapped permanents of the same type share the full field-band height in two
     rows. The JS variables deliberately use the band interior without subtracting zone-title. */
  .scripted-organized-field .field-pal-cards.tapped-two-row-layout,
  .scripted-organized-field .field-gear-cards.tapped-two-row-layout {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, var(--tapped-pair-card-width));
    grid-auto-columns: max-content;
    align-content: start;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 6px;
    height: calc(var(--tapped-pair-card-width) * 2 + 6px);
    margin-top: calc(-1 * var(--tapped-pair-title-offset));
  }

  .scripted-organized-field .tapped-two-row-layout > .field-card-slot:not(.tapped-card-slot),
  .scripted-organized-field .tapped-two-row-layout > .attack-player-target {
    grid-row: 1 / -1;
    align-self: center;
  }

  .scripted-organized-field .tapped-two-row-layout > .field-card-slot.tapped-card-slot {
    width: var(--tapped-pair-card-height);
    min-width: var(--tapped-pair-card-height);
    height: var(--tapped-pair-card-width);
    min-height: var(--tapped-pair-card-width);
  }

  .scripted-organized-field .tapped-two-row-layout > .field-card-slot.tapped-card-slot > .card {
    width: var(--tapped-pair-card-width);
    translate: 0 calc(
      (var(--tapped-pair-card-width) - var(--tapped-pair-card-height)) / 2
    );
  }

  .scripted-organized-field .tapped-two-row-layout > .field-card-slot > .tapped-slot-actions {
    top: calc(
      ((var(--tapped-pair-card-height) - var(--tapped-pair-card-width)) / 2)
      + var(--tapped-pair-card-width)
      + 9px
    );
  }
}

.mobile-hand-drag-ghost {
  position: fixed;
  z-index: 10020;
  width: 82px;
  height: auto;
  border-radius: 5px;
  opacity: 0.82;
  pointer-events: none;
  transform: translate(-50%, -70%);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.75));
}

.card.mobile-hand-dragging {
  opacity: 0.48;
}

@media (max-width: 1023px) {
  .hand-grid .card[data-card-role="hand"] {
    touch-action: pan-x;
  }
}

.chat-mute-btn {
  min-height: 26px;
  padding: 2px 8px;
  border-color: rgba(239, 139, 128, 0.55);
  color: #f3b0a8;
  font-size: 11px;
}

.chat-mute-btn.active {
  border-color: var(--accent);
  color: var(--accent-strong);
}

@media (max-width: 1023px) {
  .card img,
  [data-preview-card] img,
  [data-preview-src] img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
  }
}

dialog {
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.shortcuts-dialog article {
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 40px));
}

#log-dialog {
  overflow: visible;
}

.shortcut-list {
  display: grid;
  gap: 8px;
}

.shortcut-list > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 6px;
  background: rgba(12, 12, 12, 0.34);
}

.shortcut-list kbd {
  padding: 5px 8px;
  border: 1px solid rgba(216, 189, 118, 0.56);
  border-radius: 5px;
  background: #252520;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.shortcuts-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.log-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: min(60vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.log-list p {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--muted);
}

.log-list p.log-connection {
  color: var(--accent-strong);
}

.winner-dialog {
  width: min(620px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border-color: rgba(216, 189, 118, 0.82);
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 189, 118, 0.2), transparent 58%),
    #181918;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.86), 0 0 34px rgba(216, 189, 118, 0.2);
}

.winner-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
}

.winner-dialog.is-win {
  border-color: rgba(230, 200, 111, 0.9);
  background:
    radial-gradient(circle at 50% 38%, rgba(230, 200, 111, 0.24), transparent 58%),
    #181918;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.86), 0 0 38px rgba(230, 200, 111, 0.24);
}

.winner-dialog.is-loss {
  border-color: rgba(190, 83, 72, 0.88);
  background:
    radial-gradient(circle at 50% 38%, rgba(190, 83, 72, 0.2), transparent 58%),
    #181918;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.86), 0 0 34px rgba(190, 83, 72, 0.2);
}

.opening-player-dialog {
  width: min(620px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  border-color: rgba(216, 189, 118, 0.82);
  background:
    radial-gradient(circle at 50% 38%, rgba(216, 189, 118, 0.2), transparent 58%),
    #181918;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.86), 0 0 34px rgba(216, 189, 118, 0.2);
}

.opening-player-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
}

.opening-player-dialog article {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: min(360px, calc(100dvh - 32px));
  padding: 32px;
  text-align: center;
}

.opening-player-dialog article > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.opening-player-dialog h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(216, 189, 118, 0.28);
}

.opening-player-dialog button {
  min-width: 150px;
  min-height: 46px;
  border-color: rgba(216, 189, 118, 0.72);
  font-size: 15px;
  text-transform: uppercase;
}

.queue-dialog {
  width: min(380px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
  border-color: rgba(216, 189, 118, 0.5);
  background: #181918;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.82);
}

.queue-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
}

.queue-dialog article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 32px 28px;
  text-align: center;
}

#queue-dialog-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.queue-timer {
  font-size: clamp(42px, 10vw, 64px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  line-height: 1;
}

.surrender-dialog {
  min-width: min(420px, calc(100vw - 32px));
}

.winner-dialog article {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: min(360px, calc(100dvh - 32px));
  padding: 32px;
  text-align: center;
}

.winner-dialog article > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.surrender-dialog article {
  display: grid;
  gap: 14px;
}

.winner-dialog h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: clamp(28px, 5vw, 54px);
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(216, 189, 118, 0.28);
}

.surrender-dialog h2,
.surrender-dialog p {
  margin: 0;
}

.winner-dialog button {
  min-width: 150px;
  min-height: 46px;
  border-color: rgba(216, 189, 118, 0.72);
  font-size: 15px;
  text-transform: uppercase;
}

.winner-dialog.is-win h2 {
  color: #e6c86f;
  text-shadow: 0 4px 26px rgba(230, 200, 111, 0.34);
}

.winner-dialog.is-loss h2 {
  color: #d97868;
  text-shadow: 0 4px 26px rgba(190, 83, 72, 0.32);
}

.winner-dialog.is-loss button {
  border-color: rgba(190, 83, 72, 0.72);
}

.reconnect-dialog h2 {
  max-width: 560px;
  white-space: pre-line;
}

.reconnect-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(216, 189, 118, 0.22);
  border-top-color: var(--accent-strong);
  border-radius: 50%;
  animation: reconnect-spin 0.9s linear infinite;
}

@keyframes reconnect-spin {
  to { transform: rotate(360deg); }
}

.discard-dialog {
  width: min(900px, calc(100vw - 32px));
  overflow: visible;
}

.discard-dialog article {
  display: grid;
  gap: 14px;
}

.discard-dialog-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.discard-column {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.discard-column > .zone-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.discard-column > .zone-title > :last-child {
  justify-self: end;
}

.zone-pal-counters {
  display: flex;
  justify-self: center;
  gap: 8px;
  color: var(--accent-strong);
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.discard-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 62vh;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 15, 13, 0.28);
}

.discard-list p {
  margin: 0;
  color: var(--muted);
}

.discard-list-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(36, 37, 34, 0.88);
}

.discard-list-item img {
  width: 42px;
  aspect-ratio: 5 / 7.8;
  object-fit: contain;
  border-radius: 4px;
  background: #111110;
}

.discard-list-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.discard-list-item strong,
.discard-list-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discard-list-item span {
  color: var(--muted);
  font-size: 12px;
}

.discard-list-item[data-preview-src] {
  cursor: zoom-in;
}

.discard-list-item[data-preview-src]:hover {
  border-color: rgba(216, 189, 118, 0.62);
  background: rgba(48, 48, 44, 0.96);
}

.discard-hover-preview {
  position: fixed;
  z-index: 1000;
  width: min(300px, 34vw);
  height: min(70vh, 520px);
  padding: 6px;
  border: 1px solid rgba(216, 189, 118, 0.72);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.discard-hover-preview[hidden] {
  display: none;
}

.discard-hover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

.discard-hover-preview.structure-preview {
  width: min(460px, 48vw);
  height: min(48vh, 340px);
}

.hand-actions {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 8px;
}

.effect-order-dialog article {
  display: grid;
  gap: 12px;
  max-width: 420px;
}

.pal-effect-discard-dialog,
.damage-order-dialog {
  max-width: calc(100vw - 24px);
}

.pal-effect-discard-dialog article {
  display: grid;
  gap: 12px;
  width: min(1180px, calc(100vw - 24px));
  max-height: min(82vh, 720px);
  overflow: hidden;
}

.pal-effect-discard-content {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  max-height: min(76vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
}

.damage-order-dialog article {
  display: grid;
  gap: 12px;
  width: min(820px, 92vw);
}

.damage-order-dialog p {
  margin: 0;
  color: var(--muted);
}

.damage-order-list {
  display: flex;
  gap: 10px;
  min-height: 190px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.34);
}

.damage-order-card {
  position: relative;
  display: grid;
  flex: 0 0 128px;
  gap: 5px;
  align-content: start;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(36, 37, 34, 0.94);
  color: var(--text);
  cursor: grab;
}

.damage-order-card:active {
  cursor: grabbing;
}

.damage-order-card.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.damage-order-card img {
  width: 100%;
  aspect-ratio: 5 / 7.8;
  object-fit: contain;
  border-radius: 5px;
  background: #111714;
}

.damage-order-card strong,
.damage-order-card span:not(.damage-order-index) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.damage-order-index {
  position: absolute;
  left: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #07110d;
  font-weight: 900;
}

.discard-choice-card {
  display: grid;
  min-width: 0;
  gap: 6px;
  align-content: start;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(31, 32, 31, 0.95);
  color: var(--text);
  cursor: pointer;
}

.discard-choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.card.discard-fly,
.discard-choice-card.discard-fly {
  z-index: 200;
  pointer-events: none;
  animation: flyToDiscard 520ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.card.deploy-fly {
  z-index: 200;
  pointer-events: none;
  animation: flyToField 520ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.battlefield-discard-clone {
  pointer-events: none;
  will-change: transform, opacity;
}

.draw-fly-ghost {
  will-change: transform, opacity;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.72), 0 0 10px rgba(216, 189, 118, 0.22);
  border: 1px solid rgba(216, 189, 118, 0.3);
}

@keyframes combatPulseGold {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}

@keyframes combatPulseBlue {
  from { filter: brightness(1.08) saturate(1.16); }
  to { filter: brightness(1.34) saturate(1.34); }
}

@keyframes combatPulseRed {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

@keyframes flyToDiscard {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  55% {
    opacity: 0.82;
    transform: translate(22vw, -10vh) scale(0.62) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translate(34vw, -18vh) scale(0.28) rotate(10deg);
  }
}

@keyframes flyToField {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  60% {
    opacity: 0.9;
    transform: translate(0, -15vh) scale(0.9) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translate(0, -28vh) scale(0.74) rotate(-4deg);
  }
}

.discard-choice-card img {
  width: 100%;
  aspect-ratio: 5 / 7.8;
  object-fit: contain;
  border-radius: 5px;
  background: #111110;
}

.discard-choice-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.dialog-header h2 {
  margin: 0;
}

.dialog-board-btn,
.restore-choice-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.restore-choice-btn {
  border-color: rgba(242, 187, 76, 0.72);
  background: rgba(242, 187, 76, 0.14);
  color: #fff2bf;
}

body.choice-look-field-active #right-panel,
body.choice-look-field-active #left-panel-chat,
body.choice-look-field-active .topbar,
body.choice-look-field-active .battlefield,
body.choice-look-field-active #hand-panel {
  pointer-events: none;
}

.choice-look-field-prompt {
  pointer-events: auto;
}

.choice-look-field-panel {
  width: 100%;
  align-items: center;
}

.admin-dialog {
  max-width: calc(100vw - 24px);
  width: min(1480px, calc(100vw - 48px));
}

.admin-dialog article {
  display: grid;
  gap: 16px;
  max-height: min(88vh, 920px);
  overflow: hidden;
}

#meta-stats-dialog,
#personal-stats-dialog {
  width: calc(100vw - 20px);
  max-width: calc(100vw - 20px);
}

.admin-content {
  overflow-y: auto;
  min-height: 80px;
  max-height: calc(min(88vh, 920px) - 80px);
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-user-table th,
.admin-user-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-user-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-actions {
  display: flex;
  gap: 8px;
}

.admin-danger-btn {
  border-color: rgba(220, 60, 60, 0.6);
  background: rgba(220, 60, 60, 0.12);
  color: #ffaaaa;
}

.admin-danger-btn:hover:not(:disabled) {
  background: rgba(220, 60, 60, 0.25);
}

.admin-match-danger-btn {
  border-color: rgba(230, 135, 45, 0.65);
  background: rgba(230, 135, 45, 0.14);
  color: #ffc88f;
}

.admin-match-danger-btn:hover:not(:disabled) {
  background: rgba(230, 135, 45, 0.3);
}

.admin-broadcast-bar {
  display: flex;
  justify-content: center;
  padding: 16px 14px 20px;
}

.admin-broadcast-btn {
  border-color: rgba(220, 160, 30, 0.6);
  background: rgba(220, 160, 30, 0.12);
  color: #ffd080;
  font-weight: 600;
}

.admin-broadcast-btn:hover {
  background: rgba(220, 160, 30, 0.25);
}

.admin-presence-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 13px;
}

.admin-presence-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.admin-presence-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
  min-width: 110px;
}

.admin-presence-names {
  color: #d4c89a;
  font-size: 13px;
}

.admin-presence-offline {
  opacity: 0.4;
}

.admin-row-in_game td:nth-child(3) { color: #7ecfff; }
.admin-row-bot_game td:nth-child(3) { color: #d8bd76; }
.admin-row-solo_game td:nth-child(3) { color: #c9a7e8; }
.admin-row-deckbuilder td:nth-child(3) { color: #d8bd76; }
.admin-row-online   td:nth-child(3) { color: #7de09a; }
.admin-row-offline  td:nth-child(3) { opacity: 0.45; }

.admin-role-cell { font-size: 12px; font-weight: 600; }
.admin-role-admin { color: #d8bd76; }
.admin-role-judge { color: #7ecfff; }
.admin-role-regular { color: var(--muted); font-weight: 400; }

.admin-expand-btn {
  background: none;
  border: none;
  color: #d4c89a;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-expand-btn:hover { color: #f0d88a; }
.admin-expand-arrow { font-size: 9px; opacity: 0.6; }

.admin-detail-row td { padding: 0 !important; }

.admin-detail-cell {
  padding: 0 !important;
  background: rgba(0,0,0,0.25);
}

.admin-detail-loading {
  padding: 10px 16px;
  font-size: 12px;
  opacity: 0.5;
}

.admin-detail-content {
  display: flex;
  gap: 0;
  padding: 10px 16px 14px;
}

.admin-detail-section {
  flex: 1;
  min-width: 0;
}

.admin-detail-section + .admin-detail-section {
  border-left: 1px solid rgba(255,255,255,0.07);
  padding-left: 20px;
  margin-left: 16px;
}

.admin-detail-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.admin-detail-copy-all {
  font-size: 11px;
  padding: 2px 8px;
  text-transform: none;
  letter-spacing: normal;
  flex-shrink: 0;
}

.admin-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}

.admin-detail-meta {
  font-size: 10px;
  opacity: 0.45;
  margin-left: 6px;
}

.admin-detail-empty {
  font-size: 12px;
  opacity: 0.35;
}

.admin-detail-del {
  font-size: 11px;
  padding: 2px 8px;
  border-color: rgba(220, 60, 60, 0.4);
  background: rgba(220, 60, 60, 0.08);
  color: #ffaaaa;
  flex-shrink: 0;
}
.admin-detail-del:hover { background: rgba(220, 60, 60, 0.2); }

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-tab-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.admin-tab-btn.active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.14);
}

.admin-emergency-panel {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(220, 60, 60, 0.35);
  border-radius: 10px;
  background: rgba(220, 60, 60, 0.06);
}

.admin-emergency-panel .admin-danger-btn {
  min-width: 180px;
  font-weight: 800;
}

.admin-emergency-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  width: 100%;
}

.admin-emergency-filter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.admin-emergency-filter input {
  appearance: none;
  width: 38px;
  height: 22px;
  margin: 1px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.admin-emergency-filter input::after {
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
  transition: transform 120ms ease, background 120ms ease;
}

.admin-emergency-filter input:checked {
  border-color: var(--accent);
  background: rgba(216, 189, 118, 0.35);
}

.admin-emergency-filter input:checked::after {
  background: var(--accent-strong);
  transform: translateX(16px);
}

.admin-emergency-filter input:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-emergency-filter span,
.admin-emergency-filter small {
  display: block;
}

.admin-emergency-filter small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.admin-emergency-panel .match-history-status {
  min-height: 1.4em;
  margin: 0;
}

.client-version-dialog article {
  display: grid;
  gap: 16px;
  max-width: 420px;
  padding: 22px;
  text-align: center;
}
.client-version-dialog p { margin: 0; font-size: 16px; color: var(--text); }
.client-version-dialog button { justify-self: center; min-width: 130px; }

.admin-ml-hero { padding: 18px; margin-bottom: 14px; border: 1px solid rgba(216,189,118,.25); border-radius: 10px; background: linear-gradient(135deg, rgba(216,189,118,.12), rgba(87,144,189,.08)); }
.admin-ml-hero > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.admin-ml-hero span, .admin-ml-grid span { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.admin-ml-hero strong { font-size: 28px; color: var(--accent-strong); }
.admin-ml-hero small { color: #9ed7aa; font-weight: 700; }
.admin-ml-hero p { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.admin-ml-progress { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.admin-ml-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b68842, #7ed09a); }
.admin-ml-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-ml-grid article { display: grid; gap: 5px; padding: 14px; border-radius: 9px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.admin-ml-grid strong { font-size: 21px; color: #eee3ba; }
.admin-ml-grid small { color: var(--muted); font-size: 11px; }
.admin-ml-switch-card button { margin-top: 5px; padding: 7px 10px; font-size: 11px; border-color: rgba(222,190,91,.6); }
.admin-ml-switch-card button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.admin-ml-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.admin-ml-breakdown { padding: 13px; border-radius: 9px; background: rgba(0,0,0,.16); }
.admin-ml-breakdown h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; color: var(--accent-strong); }
.admin-ml-breakdown-row { display: grid; grid-template-columns: 1fr auto 46px; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.admin-ml-breakdown-row small { color: var(--muted); text-align: right; }
.admin-ml-footnote { display: grid; gap: 5px; margin-top: 14px; padding: 12px; color: var(--muted); font-size: 11px; }
.admin-training-panel { display: grid; gap: 14px; }
.admin-training-job { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(216,189,118,.22); border-radius: 9px; background: rgba(255,255,255,.035); }
.admin-training-job > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--accent-strong); }
.admin-training-job small { color: var(--muted); }
#admin-training-form { display: grid; gap: 13px; padding: 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(0,0,0,.14); }
.admin-training-settings { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 12px; align-items: end; }
.admin-training-settings label, .admin-training-settings > div { display: grid; gap: 6px; }
.admin-training-settings input { width: 100%; }
.admin-training-settings span { color: var(--muted); font-size: 12px; }
#admin-training-form fieldset { display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid rgba(216,189,118,.18); border-radius: 8px; }
#admin-training-form legend { padding: 0 7px; color: var(--accent-strong); font-weight: 700; }
.admin-training-random { display: flex; gap: 8px; align-items: center; }
.admin-training-decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; max-height: 280px; overflow: auto; }
.admin-training-decks label { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; padding: 8px; border-radius: 6px; background: rgba(255,255,255,.035); }
.admin-training-decks small { color: var(--muted); text-transform: uppercase; font-size: 9px; }
.admin-training-start { justify-self: center; min-width: 220px; }
.admin-training-import { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr) auto; gap: 10px; align-items: center; padding: 14px; border: 1px solid rgba(126,208,154,.2); border-radius: 9px; background: rgba(126,208,154,.04); }
.admin-training-import > div { display: grid; gap: 4px; }
.admin-training-import span { color: var(--muted); font-size: 11px; }
.admin-training-import p { grid-column: 1 / -1; margin: 0; }
.admin-training-history { display: grid; gap: 8px; }
@media (max-width: 760px) {
  .admin-ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-ml-breakdowns { grid-template-columns: 1fr; }
  .admin-training-settings, .admin-training-decks { grid-template-columns: 1fr; }
  .admin-training-import { grid-template-columns: 1fr; }
  .admin-training-import p { grid-column: auto; }
}

.stats-period-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.winner-mmr-delta {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--accent-strong);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
}

.winner-mmr-total {
  line-height: 1;
}

.winner-mmr-breakdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 12px;
  color: var(--muted);
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 700;
  line-height: 1.25;
}

.winner-dialog.is-loss .winner-mmr-delta {
  color: #ef8b80;
}

.stats-scope-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid rgba(216, 189, 118, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.stats-scope-tabs button { min-height: 38px; color: var(--muted); background: transparent; }
.stats-scope-tabs button.active { color: var(--accent-strong); border-color: var(--accent); background: rgba(216, 189, 118, 0.12); }

.stats-subscriber-notice {
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(216, 189, 118, 0.3);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(216, 189, 118, 0.075);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.stats-subscriber-notice strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-strong);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stats-subscriber-notice p { margin: 0; }

.stats-sample-notice {
  text-align: center;
}

.stats-subscribe-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.stats-period-btn {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.stats-period-btn.active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.14);
}

.stats-instance-select-row {
  margin-bottom: 14px;
}

.stats-custom-range-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.stats-custom-range-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.stats-custom-range-row input[type="date"] {
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.stats-instance-select {
  width: 100%;
  max-width: 320px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  color-scheme: dark;
}

.stats-instance-select option {
  color: var(--text);
  background: #2c2c29;
}

.stats-instance-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.stats-instance-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.stats-instance-btn.active {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.14);
}

.stats-export-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.stats-export-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-color: rgba(216, 189, 118, 0.5);
  background: rgba(216, 189, 118, 0.1);
  color: var(--accent-strong);
}

.stats-export-btn:hover:not(:disabled) { background: rgba(216, 189, 118, 0.22); }

.stats-report {
  padding: 14px;
  margin-bottom: 20px;
  background: #181918;
  border: 1px solid rgba(216, 189, 118, 0.3);
  border-radius: 8px;
}

.stats-report-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.24);
}

.stats-report-logo {
  position: absolute;
  left: 14px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.stats-report-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.stats-report-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--accent-strong);
}

.stats-report-subtitle {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.stats-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stats-leaderboard-table th,
.stats-leaderboard-table td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.stats-leaderboard-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-rank {
  font-weight: 800;
  color: var(--accent-strong);
}

.stats-winrate {
  font-weight: 800;
  color: #8fd48a;
}

.stats-insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.stats-insight-card,
.stats-detail-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(216, 189, 118, 0.24);
  border-radius: 8px;
  background: rgba(15, 16, 15, 0.62);
}

.stats-detail-card {
  min-width: 0;
  overflow-x: auto;
}

.stats-insight-card > span,
.stats-insight-card small {
  color: var(--muted);
  font-size: 11px;
}

.stats-insight-card > strong {
  color: var(--accent-strong);
  font-size: 20px;
}

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

.stats-detail-card h3 {
  margin: 0 0 4px;
  color: var(--accent-strong);
  font-size: 14px;
}

.stats-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
}

.stats-mini-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stats-card-metrics-row,
.stats-emerging-row,
.stats-movers-row,
.stats-three-column-row,
.stats-matchup-row,
.stats-matchup-header {
  display: grid;
  align-items: center;
  justify-content: initial;
  column-gap: 18px;
}

.stats-card-metrics-row {
  grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(92px, 0.7fr));
  min-width: 630px;
}

.stats-emerging-row {
  grid-template-columns: minmax(300px, 1.6fr) repeat(2, minmax(120px, 0.7fr));
  min-width: 580px;
}

.stats-movers-row,
.stats-three-column-row,
.stats-opponents-row {
  grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(105px, 0.75fr));
}

.stats-card-metrics-row > span:not(:first-child),
.stats-emerging-row > span:not(:first-child),
.stats-movers-row > span:not(:first-child),
.stats-three-column-row > span:not(:first-child),
.stats-opponents-row > span:not(:first-child) {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  text-align: right;
}

.stats-opponents-row {
  display: grid;
  align-items: center;
  justify-content: initial;
  column-gap: 18px;
}

.stats-mini-row small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.stats-metric-value {
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}

.stats-mini-row > strong {
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stats-matchup-header,
.stats-matchup-row {
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(240px, 1fr);
  min-width: 760px;
}

.stats-matchup-header {
  padding: 3px 0 7px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.24);
  color: var(--accent-strong);
  font-size: 12px;
  text-align: center;
}

.stats-matchup-row > span:not(:first-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.stats-mini-card-icon {
  width: 24px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
}

.stats-package-card-icon {
  width: 48px;
  height: 68px;
  border-radius: 4px;
}

.stats-grid-header {
  padding: 2px 0 7px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.24);
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stats-grid-header > strong {
  justify-self: end;
  color: var(--accent-strong);
  font-size: 11px;
}

.stats-delta.positive { color: #8fd48a; }
.stats-delta.negative { color: #e08a7f; }
.stats-delta.neutral { color: var(--muted); }

.stats-reliability,
.stats-tier {
  display: inline-flex;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  font-weight: 800;
}

.stats-reliability.high,
.tier-s { color: #8fd48a; border: 1px solid rgba(143, 212, 138, 0.45); }
.stats-reliability.medium,
.tier-a { color: var(--accent-strong); border: 1px solid rgba(216, 189, 118, 0.45); }
.stats-reliability.low,
.tier-c { color: #e08a7f; border: 1px solid rgba(224, 138, 127, 0.45); }
.tier-rogue { color: #bba4ef; border: 1px solid rgba(187, 164, 239, 0.45); }

.stats-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stats-form-row span {
  display: grid;
  padding: 8px;
  text-align: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.stats-form-row small { color: var(--muted); }

.stats-method-note {
  margin: 8px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.stats-result-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stats-result-strip span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #111;
  font-size: 10px;
  font-weight: 900;
}

.stats-result-strip .win { background: #8fd48a; }
.stats-result-strip .loss { background: #e08a7f; }

.stats-share-bars {
  display: grid;
  gap: 6px;
}

.stats-share-deck > summary {
  display: grid;
  grid-template-columns: 110px minmax(80px, 1fr) 48px;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.stats-share-deck > summary::-webkit-details-marker { display: none; }

.stats-share-deck > summary:hover {
  background: rgba(216, 189, 118, 0.07);
}

.stats-share-deck[open] > summary {
  background: rgba(216, 189, 118, 0.1);
}

.stats-share-deck > summary > strong {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stats-share-bars i {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.stats-share-bars b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f7542, #e6c86f);
}

.stats-share-deck-panel {
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px solid rgba(216, 189, 118, 0.2);
  border-radius: 8px;
  background: rgba(8, 9, 8, 0.34);
}

.stats-deck-insights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.stats-representative-deck {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.stats-representative-deck-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.stats-representative-deck-heading > div,
.stats-representative-deck-heading > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-representative-deck-heading > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.stats-representative-deck-heading small {
  color: var(--muted);
  font-size: 10px;
}

.stats-copy-deck-btn {
  min-height: 28px;
  padding: 0 10px;
  border-color: rgba(216, 189, 118, 0.48);
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.1);
  font-size: 10px;
  white-space: nowrap;
}

.stats-db-deck-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-items: start;
  gap: 16px 10px;
  padding: 10px 4px 4px;
}

.stats-db-deck-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.stats-db-deck-stack {
  position: relative;
  width: 78px;
  height: calc(122px + var(--deck-copy-offset));
}

.stats-db-deck-stack img {
  position: absolute;
  top: calc(var(--deck-copy-index) * 8px);
  left: 0;
  width: 78px;
  height: 122px;
  object-fit: cover;
  border: 1px solid rgba(216, 189, 118, 0.42);
  border-radius: 5px;
  background: #111110;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.42);
}

.stats-db-deck-visual.structure .stats-db-deck-stack {
  width: 122px;
  height: calc(78px + var(--deck-copy-offset));
}

.stats-db-deck-visual.structure .stats-db-deck-stack img {
  top: calc(-22px + var(--deck-copy-index) * 8px);
  left: 22px;
  transform: rotate(90deg);
}

.stats-db-deck-count {
  position: absolute;
  z-index: 6;
  right: -6px;
  bottom: -5px;
  display: grid;
  place-items: center;
  min-width: 27px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid rgba(216, 189, 118, 0.65);
  border-radius: 999px;
  color: #171817;
  background: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stats-db-deck-visual figcaption {
  width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 800px) {
  .stats-insights-grid,
  .stats-secondary-grid { grid-template-columns: 1fr 1fr; }

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

.stats-order-split {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  line-height: 1.1;
}

.stats-order-split small {
  font-weight: 600;
  font-size: 10px;
  color: var(--muted);
}

.stats-order-split.good { color: #e6c86f; }
.stats-order-split.bad { color: #f0a698; }
.stats-order-split.even { color: var(--text); }

.stats-order-split-empty {
  color: rgba(201, 190, 167, 0.4);
}

.stats-share {
  font-weight: 800;
  color: var(--accent-strong);
}

.stats-deck-icon-strip {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stats-deck-others {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.stats-deck-icon {
  position: relative;
  width: 56px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(245, 234, 210, 0.34);
  border-radius: 4px;
  background: #101110;
}

.stats-deck-icon img {
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: auto;
}

.stats-deck-icon-compact {
  width: 48px;
  height: 44px;
}

.stats-deck-icon-extra {
  font-size: 10px;
  color: var(--muted);
  padding: 0 3px;
}

.stats-deck-no-lucky {
  color: rgba(201, 190, 167, 0.62);
  font-size: 11px;
  font-style: italic;
}

.stats-matrix-scroll {
  overflow-x: auto;
}

.stats-matrix-legend {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stats-matrix-table {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.stats-matrix-table th,
.stats-matrix-table td {
  width: 92px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 4px;
  overflow: hidden;
}

.stats-matrix-corner {
  width: 104px;
  min-width: 104px;
}

.stats-matrix-corner {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stats-matrix-corner span,
.stats-matrix-corner small,
.stats-matrix-axis-label {
  display: block;
}

.stats-matrix-corner small,
.stats-matrix-axis-label {
  margin-bottom: 4px;
  color: rgba(201, 190, 167, 0.7);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-matrix-cell {
  position: relative;
  width: 92px;
  height: 92px;
  min-width: 92px;
  padding: 0 !important;
}

.stats-matrix-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* "to bottom right" (not a fixed 135deg angle) keeps the divider's iso-color line running
     exactly through the top-right/bottom-left corners — matching the .stats-matrix-half
     clip-path triangles below — even when the cell isn't perfectly square. */
  background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(245, 234, 210, 0.3) calc(50% - 0.5px), rgba(245, 234, 210, 0.3) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.stats-matrix-half {
  position: absolute;
  inset: 0;
  display: flex;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.stats-matrix-half.first {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 0 0 8px;
}

.stats-matrix-half.second {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 8px 8px 0;
}

.stats-matrix-half.good { color: #e6c86f; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.stats-matrix-half.bad { color: #f0a698; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.stats-matrix-half.even { color: var(--text); }
.stats-matrix-half.empty { color: rgba(201, 190, 167, 0.4); }

.stats-matrix-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(201, 190, 167, 0.4);
}

.stats-matrix-mirror {
  text-align: center;
  color: rgba(201, 190, 167, 0.35);
}

.rps-dialog {
  max-width: calc(100vw - 24px);
}

.rps-dialog article {
  display: grid;
  gap: 16px;
  width: min(360px, calc(100vw - 32px));
  text-align: center;
}

.rps-dialog h2 {
  margin: 0;
}

.rps-dialog p {
  margin: 0;
  color: var(--muted);
}

.rps-choices {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.rps-choices button {
  flex: 1;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rps-emoji {
  font-size: 32px;
  line-height: 1;
}

.rps-label {
  font-size: 13px;
}

.rps-reveal-dialog {
  max-width: calc(100vw - 24px);
}

.rps-reveal-dialog article {
  padding: 28px 32px;
}

.rps-reveal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 240px;
}

.rps-reveal-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rps-reveal-row-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 90px;
}

.rps-reveal-boxes {
  display: flex;
  gap: 8px;
}

.rps-reveal-box {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.15s, background 0.15s;
}

.rps-reveal-box.selected {
  border-color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.15);
}

.rps-last-round {
  font-size: 13px;
  color: var(--accent-strong);
  background: rgba(216, 189, 118, 0.08);
  border: 1px solid rgba(216, 189, 118, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
}

.rps-waiting {
  font-style: italic;
}

.hidden {
  display: none !important;
}

.reveal-dialog {
  max-width: calc(100vw - 24px);
}

.reveal-dialog article {
  display: grid;
  gap: 16px;
  width: min(320px, calc(100vw - 32px));
  text-align: center;
}

.reveal-dialog h2 {
  margin: 0;
}

.reveal-dialog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.reveal-dialog-img {
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  animation: reveal-card-in 0.45s cubic-bezier(0.2, 0.84, 0.28, 1) both;
}

.card-pick-dialog {
  width: min(540px, calc(100vw - 24px));
}

/* Spectator pickers stay non-modal so chat and Leave game remain reachable. Since dialog.show()
   does not enter the browser top layer, explicitly keep this read-only variant above the board. */
.card-pick-dialog.spectator-readonly-overlay[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 1200;
  max-height: min(76vh, 720px);
  margin: 0;
  overflow: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.82), 0 0 28px rgba(216, 189, 118, 0.2);
}

.card-pick-dialog article {
  display: grid;
  gap: 10px;
}

.card-pick-dialog h2 {
  margin: 0;
}

.card-pick-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Trash/Exclusion pile viewer: a vertical list of small card rows (fixed reading order) instead
   of a wrapping grid of full-size cards scattered in whatever order they landed in the pile -
   matches PalWorld TCG Simulator's real .discard-list-item pile viewer. */
.naruto-pile-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
/* .naruto-pile-item also carries the base .naruto-card class (for the shared hover-preview
   wiring), whose own width:100px/flex:0 0 100px rule (styles.css ~13111) - same specificity,
   later in the file - was winning over this row's own width:100%, squashing every pile row down
   to a fixed 100px-wide column and wrapping its text one word per line. The extra
   .naruto-pile-list ancestor in this selector outweighs that rule instead of relying on source
   order. */
.naruto-pile-list .naruto-pile-item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: default;
}
.naruto-pile-item-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 100px;
  border-radius: 5px;
  object-fit: cover;
}
.naruto-pile-item-thumb-blank {
  background: rgba(255, 255, 255, 0.08);
}
.naruto-pile-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  text-align: left;
}
.naruto-pile-item-info strong {
  font-size: 0.95rem;
  white-space: normal;
}
.naruto-pile-item-info span {
  font-size: 0.78rem;
  opacity: 0.75;
}
.naruto-pile-item-ability {
  opacity: 0.9 !important;
  font-style: italic;
}
/* On Summon choice dialog: each option is a real <button> wrapping a .naruto-pile-item row, so
   it's keyboard/click-accessible - strip the button's own box model so only the inner row's
   layout/appearance shows. */
/* One unified, bigger grid of options (wraps to fill the dialog's width) instead of narrow list
   rows split into separate per-zone sections - each card carries its own zone badge inline
   instead, so a single-zone choice doesn't leave a mostly-empty section wasting space. */
.naruto-onsummon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 4px;
}
.naruto-onsummon-option {
  position: relative;
  display: block;
  width: 96px;
  padding: 6px;
  border: 1px solid rgba(216, 189, 118, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}
.naruto-onsummon-option:hover,
.naruto-onsummon-option:focus-visible {
  border-color: rgba(216, 189, 118, 0.7);
  background: rgba(255, 255, 255, 0.08);
}
.naruto-onsummon-option .naruto-pile-item {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  pointer-events: none;
}
.naruto-onsummon-option .naruto-pile-item-thumb {
  width: 84px;
  height: 112px;
}
.naruto-onsummon-option .naruto-pile-item-info {
  align-items: center;
  text-align: center;
  width: 100%;
}
.naruto-onsummon-option .naruto-pile-item-info strong {
  white-space: normal;
  font-size: 0.72rem;
  line-height: 1.15;
}
/* Zone-of-origin badge, shown directly on each card instead of a section heading - the option
   might be sitting in the deck or the trash, and the player needs to know which. */
.naruto-onsummon-zone-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(216, 189, 118, 0.4);
  color: var(--muted, #b8b0a0);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-pick-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.card-pick-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.card-pick-btn.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.card-pick-btn img {
  height: 120px;
  border-radius: 6px;
}

.card-pick-btn span {
  font-size: 0.7em;
  max-width: 90px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-pick-btn.is-pal {
  border-color: var(--accent);
}

.card-pick-btn.view-only {
  cursor: default;
  opacity: 0.9;
}

.power-debuffed {
  color: #ff8a80;
  font-weight: 800;
}

.sacrifice-pick-btn {
  width: 96px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 9px;
  background: rgba(8, 10, 12, 0.38);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.sacrifice-pick-btn:hover,
.sacrifice-pick-btn.selected {
  border-color: var(--accent);
  background: rgba(216, 189, 118, 0.08);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.sacrifice-pick-btn .card {
  width: 100%;
  pointer-events: auto;
  touch-action: none;
}

.sacrifice-pick-btn .card-zoom {
  display: none !important;
}

.sacrifice-pick-btn .compact-card-name {
  font-size: 8px;
}

.sacrifice-pick-btn .card-game-overlay {
  gap: 2px;
  padding: 3px;
  font-size: 8px;
  line-height: 1.1;
}

.sacrifice-field-state {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sacrifice-field-state.stand {
  color: #80df99;
}

.sacrifice-field-state.rest {
  color: #f0a66c;
}

.antique-dresser-name-picker {
  width: 100%;
  display: flex;
  justify-content: center;
}

.antique-dresser-name-picker input {
  width: 100%;
  max-width: 360px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 2px solid var(--border, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.25);
  color: inherit;
  font-size: 0.95em;
}

.antique-dresser-name-picker input:focus {
  border-color: var(--accent);
  outline: none;
}

.card-effect-banner {
  gap: 14px;
}

.card-effect-banner-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.card-effect-banner-target {
  font-size: 0.78em;
  color: var(--fg);
  opacity: 0.85;
  white-space: nowrap;
}

@keyframes reveal-card-in {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.88) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

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

.rules-grid p {
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: #181918;
  color: var(--muted);
}

@media (max-width: 980px) {
  .main-menu.deckbuilder-open .menu-panel {
    width: calc(100vw - 24px);
  }

  .deckbuilder-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .deckbuilder-main,
  .deckbuilder-list {
    min-height: 520px;
  }

  .deckbuilder-center {
    min-height: 640px;
  }

  .deckbuilder-preview {
    min-height: min(70vh, 560px);
  }

  .deckbuilder-preview-body img {
    width: min(100%, 400px);
    height: auto;
  }

  .deckbuilder-library {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

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

  .board-tools.opponent,
  .board-tools.current {
    grid-template-columns: 1fr;
  }

  .board-tools.current .pile-row,
  .board-tools.opponent .pile-row,
  .board-tools.current .life-resource-wrap,
  .board-tools.opponent .life-resource-wrap {
    justify-self: center;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(66px, 92px));
  }

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

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

  .mulligan-hand-row {
    grid-template-columns: 1fr;
  }

  .discard-dialog-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .deckbuilder-library {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  .topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .game-status {
    justify-self: start;
    text-align: left;
  }

  .hand-grid {
    gap: 5px;
  }

  .hand-grid > .card {
    flex-basis: 112px;
    max-width: 112px;
  }

  .hand-grid.player-hand > .card {
    flex-basis: 112px;
    max-width: 112px;
  }
}

body.mill-animation-active .layout,
body.mill-animation-active .hand-panel {
  pointer-events: none;
}

/* Mobile piccolo: up to 480px */
@media (max-width: 480px) {
  body {
    overflow-x: hidden;
  }

  .main-menu {
    padding: 8px 8px 76px;
  }

  .menu-panel,
  .main-menu.deckbuilder-open .menu-panel {
    width: calc(100vw - 16px);
    max-width: none;
    padding: 12px;
    gap: 10px;
  }

  .match-row,
  .secret-row,
  .solo-deck-row,
  .auth-grid,
  .cookie-banner {
    grid-template-columns: 1fr;
  }

  .match-row button,
  .secret-row button {
    order: -1;
  }

  .online-match-row button {
    order: 0;
  }

  .cookie-banner {
    bottom: 8px;
    width: calc(100vw - 16px);
    padding: 10px;
  }

  .cookie-actions button {
    min-width: 0;
  }

  .topbar {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 6px;
  }

  .app-brand {
    justify-items: center;
    text-align: center;
  }

  .game-status {
    justify-self: center;
    font-size: 14px;
    text-align: center;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  .topbar-actions button {
    min-width: 0;
    min-height: 30px;
    padding-inline: 4px;
    font-size: 9px;
    white-space: normal;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "table" "right" "left";
    gap: 6px;
    padding: 6px;
  }

  #left-panel { grid-area: left; }
  #table { grid-area: table; }
  #right-panel { grid-area: right; }

  .side-panel,
  .table {
    padding: 5px;
  }

  #left-panel {
    grid-template-rows: minmax(180px, 260px) auto;
  }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
    gap: 6px;
  }

  .board-tools.opponent {
    grid-template-areas: "piles life" "hand hand" "souls souls";
  }

  .board-tools.current {
    grid-template-areas: "life piles" "souls souls" "action action";
  }

  .board-tools.opponent > .pile-row,
  .board-tools.current > .pile-row { grid-area: piles; }
  .board-tools.opponent > .opponent-hand-wrap { grid-area: hand; }
  .board-tools.opponent > .battlefield-souls,
  .board-tools.current > .battlefield-souls { grid-area: souls; }
  .board-tools.opponent > .life-resource-wrap,
  .board-tools.current > .life-resource-wrap { grid-area: life; }
  .board-tools.current > .soul-draw-board-btn { grid-area: action; }

  .board-tools .life-resource-wrap {
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .board-tools .life-resource-wrap,
  .board-tools .pile-row {
    justify-self: center;
  }

  .board-tools .life-resource-wrap {
    width: 100%;
    min-width: 0;
    min-height: 54px;
  }

  .resource-badges span {
    min-width: 0;
    padding: 5px;
  }

  .life-value {
    font-size: 28px;
  }

  .field-band {
    min-height: 150px;
    padding: 5px;
  }

  .field-band .zone-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .field-status {
    width: 100%;
    justify-content: space-between;
    font-size: 10px;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(54px, 72px));
    gap: 4px;
    min-height: 112px;
  }

  .hand-panel {
    margin: 0 6px 6px;
    padding: 5px;
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card {
    flex-basis: 92px;
    max-width: 92px;
  }

  .hand-grid.crowded {
    --hand-overlap-min: -72px;
    --hand-edge-buffer: 10px;
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 6px;
  }

  .deckbuilder-main,
  .deckbuilder-list {
    min-height: 440px;
  }

  .deckbuilder-center {
    min-height: 520px;
  }

  .deckbuilder-preview {
    min-height: 420px;
  }

  .deck-filters {
    grid-template-columns: 1fr;
  }

  .deckbuilder-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .library-card {
    height: 204px;
  }

  .deckbuilder-preview-body img {
    width: min(100%, 280px);
    height: auto;
  }

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

  .legal-footer,
  .menu-legal-footer {
    width: auto;
    margin-inline: 6px;
    font-size: 8px;
  }

  .menu-legal-footer {
    background: none;
  }
}

/* Mobile: 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
  .main-menu {
    padding: 14px 14px 80px;
  }

  .menu-panel,
  .main-menu.deckbuilder-open .menu-panel {
    width: calc(100vw - 28px);
    max-width: none;
    padding: 16px;
  }

  .topbar {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 8px;
    padding: 6px 8px;
  }

  .topbar-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .topbar-actions button {
    min-width: 0;
    white-space: normal;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "table" "right" "left";
    gap: 8px;
    padding: 8px;
  }

  #left-panel { grid-area: left; }
  #table { grid-area: table; }
  #right-panel { grid-area: right; }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .board-tools.opponent {
    grid-template-areas: "piles life" "hand hand" "souls souls";
  }

  .board-tools.current {
    grid-template-areas: "life piles" "souls souls" "action action";
  }

  .board-tools.opponent > .pile-row,
  .board-tools.current > .pile-row { grid-area: piles; }
  .board-tools.opponent > .opponent-hand-wrap { grid-area: hand; }
  .board-tools.opponent > .battlefield-souls,
  .board-tools.current > .battlefield-souls { grid-area: souls; }
  .board-tools.opponent > .life-resource-wrap,
  .board-tools.current > .life-resource-wrap { grid-area: life; }
  .board-tools.current > .soul-draw-board-btn { grid-area: action; }

  .board-tools .life-resource-wrap {
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .field-band {
    min-height: 164px;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(60px, 84px));
    min-height: 124px;
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card {
    flex-basis: 104px;
    max-width: 104px;
  }

  .hand-grid.crowded {
    --hand-overlap-min: -80px;
    --hand-edge-buffer: 14px;
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  .deckbuilder-main,
  .deckbuilder-list {
    min-height: 500px;
  }

  .deckbuilder-center {
    min-height: 600px;
  }

  .deckbuilder-preview {
    min-height: 500px;
  }

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

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

  .deckbuilder-preview-body img {
    width: min(100%, 360px);
    height: auto;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
  }
}

/* Mobile deckbuilder information hierarchy:
   1) saved-deck picker/name/stats, 2) current decklist and actions, 3) preview,
   4) filters plus the complete available-card catalog at the bottom.
   display:contents lets the center header and preview take independent positions without
   changing the desktop DOM/three-column layout. */
@media (max-width: 767px) {
  .deckbuilder-center {
    display: contents;
  }

  .deckbuilder-center-header {
    order: 1;
  }

  .deckbuilder-list {
    order: 2;
  }

  .deckbuilder-preview {
    order: 3;
  }

  .deckbuilder-main {
    order: 4;
  }
}

/* ===== Routed lobby / header navigation ===== */
.site-nav {
  justify-content: flex-start;
  padding-inline: 18px 280px;
}

.site-nav .site-nav-brand {
  left: 50%;
  transform: translateX(-50%);
  justify-items: center;
  text-align: center;
}

.site-nav-dropdown {
  position: relative;
  min-width: 112px;
}

.site-nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}

.site-nav-dropdown-toggle::after { content: "▾"; margin-left: 7px; color: var(--accent); }
.site-nav-dropdown.open .site-nav-dropdown-toggle,
.site-nav-dropdown-toggle:hover { color: var(--accent-strong); border-color: rgba(216,189,118,.45); background: rgba(216,189,118,.09); }

.site-nav-dropdown > div {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 300;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid rgba(216,189,118,.45);
  border-radius: 7px;
  background: rgba(18,19,18,.99);
  box-shadow: 0 16px 38px rgba(0,0,0,.65);
}
.site-nav-dropdown.open > div { display: grid; }

.site-nav-dropdown > div a { min-width: 0; text-align: left; }

.main-menu.play-layout-ready .menu-panel {
  grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
  width: 90vw;
  max-width: 90vw;
  align-items: start;
}

.menu-brand { display: none; }
.menu-panel > #menu-status { grid-column: 1 / -1; min-height: 20px; text-align: center; }

.auth-settings-block {
  position: fixed;
  z-index: 260;
  top: 8px;
  right: 16px;
  display: grid;
  grid-template-columns: auto 42px;
  gap: 7px;
  width: auto;
}

.account-menu-toggle,
.settings-toggle {
  min-height: 40px;
  border: 1px solid rgba(216,189,118,.45);
  background: rgba(28,29,28,.98);
  color: var(--text);
}

.account-menu-toggle { min-width: 132px; padding: 7px 14px; }
.settings-toggle { display: grid; place-items: center; width: 42px; padding: 8px; font-size: 0; }
.settings-toggle svg { width: 21px; height: 21px; fill: var(--accent); }
.settings-toggle-section { grid-column: 2; grid-row: 1; padding: 0; border: 0; background: transparent; }

#menu-auth,
.settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 49px;
  display: none;
  width: min(350px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid rgba(216,189,118,.45);
  border-radius: 8px;
  background: rgba(22,23,22,.99);
  box-shadow: 0 18px 42px rgba(0,0,0,.68);
}

.account-open #menu-auth { display: block; }
.auth-settings-block.settings-open .settings-panel {
  top: calc(100% + 8px);
  right: 0;
  display: block;
  width: min(390px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(216,189,118,.45);
  border-radius: 8px;
}

.account-dropdown-links { display: grid; gap: 6px; }
.account-dropdown-links a {
  padding: 10px 12px;
  border: 1px solid rgba(216,189,118,.2);
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
}
.account-dropdown-links a:hover { border-color: var(--accent); color: var(--accent-strong); }

#deckbuilder-access-section,
.main-menu:not(.deckbuilder-open) #menu-dynamic,
.main-menu:not(.stats-open) .stats-section,
.main-menu:not(.match-history-open) .match-history-section,
#admin-btn-section { display: none !important; }

.online-match-section,
.solo-section,
.lab-mode-section,
.spectate-section,
.menu-panel > .menu-section:has(#tutorial-btn) { grid-column: 1; }

.menu-audio-row {
  grid-column: 2;
  grid-row: 2 / span 8;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  gap: 8px;
  min-height: 500px;
  padding: 14px;
  border: 1px solid rgba(216,189,118,.35);
  border-radius: 9px;
  background: rgba(18,19,18,.62);
}

#menu-friends-btn { grid-column: 1; grid-row: 1; }
#menu-notifications-btn { grid-column: 2; grid-row: 1; }
.menu-audio-row .menu-discord-btn { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
#menu-discord-btn { display: none; }
.play-discord-btn { grid-column: 1; justify-self: center; }
#friends-panel {
  position: static;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-height: none;
  min-height: 360px;
  box-shadow: none;
}
.friends-panel-inner { max-height: none; min-height: 360px; }
.social-login-gate { display: grid; place-content: center; gap: 8px; min-height: 360px; padding: 28px; color: var(--muted); text-align: center; }
.social-login-gate strong { color: var(--accent-strong); font-size: 18px; text-transform: uppercase; }

.donate-section { grid-column: 1 / -1; width: min(720px, 100%); justify-self: center; }

body[data-site-page="deckbuilder"] .main-menu,
body[data-site-page="stats"] .main-menu,
body[data-site-page="history"] .main-menu {
  place-items: start center;
}

body[data-site-page="deckbuilder"] .menu-panel {
  width: min(1540px, calc(100vw - 28px));
  max-width: none;
}

body[data-site-page="deckbuilder"] .menu-panel > :not(.auth-settings-block):not(#menu-dynamic) {
  display: none !important;
}

body[data-site-page="deckbuilder"] .main-menu:not(.deckbuilder-open) #menu-dynamic,
body[data-site-page="deckbuilder"] #menu-dynamic { display: block !important; grid-column: 1 / -1; }
.deckbuilder-route-gate { min-height: 52vh; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.deckbuilder-route-gate h2 { margin: 0; color: var(--accent-strong); text-transform: uppercase; }
.deckbuilder-route-gate p { max-width: 560px; color: var(--muted); }
.deckbuilder-route-gate button { min-width: 150px; }
.deckbuilder-route-loading p::after { content: ""; display: inline-block; width: 1.2em; animation: deckbuilder-loading-dots 1.2s steps(4, end) infinite; }
@keyframes deckbuilder-loading-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

body[data-site-page="stats"] .menu-panel { width: min(900px, calc(100vw - 32px)); }
body[data-site-page="history"] .main-menu.match-history-open .menu-panel {
  width: 90vw;
  max-width: 90vw;
}

.tournament-event-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}
.tournament-event-dialog article { min-height: 100dvh; }
.tournament-event-dialog p {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 2.6vw, 32px);
  line-height: 1.3;
}
body[data-site-page="stats"] .main-menu.stats-detail-open .menu-panel {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  overflow-x: hidden;
}
body[data-site-page="stats"] .menu-panel > :not(.auth-settings-block):not(.stats-section),
body[data-site-page="history"] .menu-panel > :not(.auth-settings-block):not(.match-history-section) { display: none !important; }
body[data-site-page="stats"] .stats-section,
body[data-site-page="history"] .match-history-section { display: grid !important; grid-column: 1 / -1; }
body[data-site-page="stats"] #stats-btn,
body[data-site-page="history"] #match-history-btn { display: none; }
body[data-site-page="history"] .match-history-content { width: 100%; }

.cards-database-shell,
.card-detail-shell { box-sizing: border-box; width: 100%; max-width: 1720px; min-width: 0; }
#cards-database-page,
#card-detail-page { overflow-x: hidden; }
.seo-breadcrumbs { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--muted, #b9b29f); font-size: .82rem; }
.seo-breadcrumbs a { color: var(--gold, #e3c76c); text-decoration: none; }
.cards-database-content { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr) minmax(250px, 340px); gap: 18px; align-items: start; }
.cards-database-filters { position: sticky; top: 76px; display: flex; flex-direction: column; min-width: 0; width: 100%; max-height: calc(100vh - 92px); overflow-x: hidden; overflow-y: auto; padding: 14px; border: 1px solid #665a31; border-radius: 8px; background: #171816; }
.cards-database-filters > *,
.cards-database-filters input,
.cards-database-filters select,
.cards-database-filters .range-filter,
.cards-database-filters .range-pair { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; }
.cards-database-filters .range-pair input { width: 100%; }
.cards-database-results { min-width: 0; }
.cards-database-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 12px; }
.cards-database-grid > a { min-width: 0; padding: 7px; border: 1px solid #4f4935; border-radius: 7px; background: #171816; color: #eee8d8; text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.cards-database-grid > a:hover,
.cards-database-grid > a.selected { border-color: #d5b954; background: #242216; transform: translateY(-2px); }
.cards-database-grid img { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 5px; background: #0d0e0d; }
.cards-database-grid strong,
.cards-database-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-database-grid strong { margin-top: 7px; font-size: .78rem; }
.cards-database-grid span { margin-top: 2px; color: #aaa38f; font-size: .68rem; }
.cards-database-preview { position: sticky; top: 76px; padding: 14px; border: 1px solid #665a31; border-radius: 8px; background: #171816; }
.cards-database-preview img { display: block; width: 100%; max-height: calc(100vh - 265px); object-fit: contain; border-radius: 6px; }
.cards-database-preview h2 { margin: 12px 0 4px; color: #f3ead4; font-size: 1.15rem; }
.cards-database-preview p { color: #bdb5a0; font-size: .78rem; }
.cards-database-preview a { display: block; margin-top: 12px; padding: 10px; border: 1px solid #c6a94e; border-radius: 5px; color: #f2d875; text-align: center; text-decoration: none; }
.card-detail-back { display: inline-flex; align-items: center; margin: 0 0 16px; padding: 9px 13px; border: 1px solid #8b7738; border-radius: 5px; background: #1b1b17; color: #f0d66f; text-decoration: none; }
.card-detail-back:hover { border-color: #e1c259; background: #282419; }
.card-detail-shell,
.card-profile,
.card-profile > *,
.card-profile-info,
.card-profile-heading,
.card-profile-effect,
.card-profile-data,
.card-profile-art { min-width: 0; max-width: 100%; }
#card-detail-page .seo-breadcrumbs { flex-wrap: wrap; max-width: 100%; }
#card-detail-page .seo-breadcrumbs > *,
.card-profile-heading h1,
.card-profile-effect p,
.card-profile-production,
.card-profile-data dd { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.card-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); grid-template-areas: "heading heading" "info art"; gap: 20px clamp(28px, 4vw, 64px); align-items: start; padding: clamp(18px, 3vw, 38px); border: 1px solid #665a31; border-radius: 10px; background: linear-gradient(135deg, #20211d 0%, #121411 58%, #19180f 100%); box-shadow: inset 0 1px #fff1, 0 18px 50px #0005; }
.card-profile-heading { grid-area: heading; padding: 0 0 18px; border-bottom: 1px solid #5d5432; }
.card-profile-heading h1 { margin: 3px 0 14px; color: #f4efe1; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.05; }
.card-profile-info { grid-area: info; min-width: 0; }
.card-profile-art { grid-area: art; position: sticky; top: 76px; margin: 0; padding: 13px; border: 1px solid #4f4935; border-radius: 8px; background: #0d0f0d; }
.card-profile-art img { display: block; width: 100%; max-height: calc(100vh - 155px); object-fit: contain; border-radius: 7px; filter: drop-shadow(0 12px 20px #000b); }
.card-profile-art figcaption { padding: 11px 3px 1px; color: #aaa38f; font-size: .72rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.card-profile-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.card-profile-badges span,
.card-profile-production { padding: 6px 9px; border: 1px solid #665a31; background: #25251f; color: #d9d0b9; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.card-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; }
.card-profile-stats article { padding: 15px; border: 1px solid #393a34; border-radius: 5px; background: #1c201d; text-align: center; }
.card-profile-stats span,
.card-profile-stats strong { display: block; }
.card-profile-stats span { color: #afa995; font-size: .78rem; }
.card-profile-stats strong { margin-top: 3px; color: #f4efe1; font-size: 1.85rem; }
.card-profile-effect,
.card-profile-data { margin-top: 20px; padding: 20px; border-left: 3px solid #b99c3f; border-top: 1px solid #34372f; border-right: 1px solid #34372f; border-bottom: 1px solid #34372f; border-radius: 3px 7px 7px 3px; background: #181b18; }
.card-profile-effect h2,
.card-profile-data h2 { margin: 0 0 12px; color: #f0e8d6; }
.card-profile-effect p { margin: 0; color: #ded7c5; line-height: 1.7; white-space: pre-line; }
.card-profile-data dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 28px; margin: 0; }
.card-profile-data dl div { display: grid; gap: 3px; }
.card-profile-data dt { color: #aaa38f; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.card-profile-data dd { margin: 0; color: #f1ead8; }
@media (max-width: 980px) {
  .cards-database-content { grid-template-columns: 1fr; }
  .cards-database-filters,
  .cards-database-preview { position: static; max-height: none; }
  .cards-database-preview { display: none; }
}
@media (max-width: 820px) {
  .card-profile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "art" "info"; }
  .card-profile-art { position: static; width: min(100%, 390px); justify-self: center; }
}
@media (max-width: 650px) {
  #cards-database-page,
  #card-detail-page { padding-right: 14px; padding-left: 14px; }
  .cards-database-content,
  .cards-database-results,
  .cards-database-grid { min-width: 0; max-width: 100%; }
  .cards-database-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-profile { padding: 15px; }
  .card-profile-art img { max-height: 68vh; }
  .card-profile-data dl { grid-template-columns: 1fr; }
}
body[data-site-page="stats"] .stats-content {
  width: min(900px, 100%);
  justify-self: center;
}
.stats-overview {
  display: grid;
  grid-template-rows: minmax(72px, 1fr) auto;
  min-height: 150px;
  text-align: center;
}
.stats-overview .profile-route-subtitle {
  place-self: center;
  margin: 0;
}
.stats-overview .stats-winrate-row,
.stats-overview .stats-mmr-row,
.stats-overview .stats-achievements-row {
  padding-top: 0;
}
.achievements-total {
  margin: 0 0 12px;
  font-size: 14px;
}
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.achievement-card {
  padding: 12px 14px;
  border: 1px solid rgba(216, 189, 118, .3);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}
.achievement-card h3 {
  margin: 0 0 2px;
  font-size: 14px;
}
.achievement-tier {
  margin: 0 0 8px;
  font-size: 12px;
  opacity: .7;
}
.achievement-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.achievement-progress-fill {
  height: 100%;
  background: var(--accent-strong);
}
.achievement-progress-text {
  margin: 6px 0 0;
  font-size: 11px;
  opacity: .75;
}
.stats-inline-detail {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(216, 189, 118, .42);
  border-radius: 8px;
  background: rgba(12, 13, 12, .55);
}
body[data-site-page="stats"] .main-menu.stats-detail-open .stats-section,
body[data-site-page="stats"] .main-menu.stats-detail-open .stats-inline-detail,
body[data-site-page="stats"] .main-menu.stats-detail-open .stats-inline-body,
body[data-site-page="stats"] .main-menu.stats-detail-open .stats-report {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}
.stats-inline-detail .stats-leaderboard-table,
.stats-inline-detail .stats-matrix-table {
  width: 100%;
}
.stats-inline-detail[hidden],
.stats-inline-body[hidden] { display: none; }
.stats-inline-detail h2 {
  margin: 0;
  color: var(--accent-strong);
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}
.stats-inline-body {
  min-width: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.route-page-heading { margin-bottom: 12px; text-align: left; }
.route-page-heading h1 { margin: 2px 0 5px; color: var(--text); font-size: clamp(28px, 4vw, 48px); text-transform: uppercase; }
.route-page-heading p:not(.eyebrow) { color: var(--muted); }
:is(.route-page-heading, .site-page-heading) .profile-route-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
}
.profile-route-title strong {
  color: var(--text);
  font: inherit;
}
.profile-route-separator {
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}
:is(.route-page-heading, .stats-overview) .profile-route-subtitle {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}
.deckbuilder-route-heading { margin-bottom: 16px; }

@media (max-width: 767px) {
  .site-nav {
    height: 92px;
    align-items: end;
    justify-content: center;
    gap: 3px;
    padding: 48px 6px 5px;
  }
  .site-nav .site-nav-brand { display: grid; top: 5px; }
  .site-nav a,
  .site-nav-dropdown { flex: 1; min-width: 0; }
  .site-nav a,
  .site-nav-dropdown-toggle { padding: 7px 5px; font-size: 10px; }
  /* The toggle button sits near the left edge of a narrow nav — anchoring the menu to the
     button's own edges (like the desktop left:0/right:0 rules) can push it partly off-screen.
     Anchor to the viewport instead so it's always fully visible regardless of button position. */
  .site-nav-dropdown > div { position: fixed; left: 12px; right: 12px; top: 96px; width: auto; min-width: 0; }
  .main-menu { inset: 92px 0 0; padding: 12px; }
  .site-page { inset: 92px 0 0; }
  .auth-settings-block { top: 5px; right: 6px; }
  .account-menu-toggle { min-width: 104px; min-height: 34px; padding: 5px 8px; font-size: 10px; }
  .settings-toggle { width: 34px; min-height: 34px; padding: 6px; }
  .main-menu.play-layout-ready .menu-panel {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    gap: 14px;
    padding: 14px;
  }
  .main-menu.play-layout-ready .menu-panel > #menu-status:empty {
    display: none;
    min-height: 0;
  }
  .online-match-section,
  .solo-section,
  .spectate-section,
  .menu-panel > .menu-section:has(#tutorial-btn) { grid-column: 1; }
  .menu-audio-row {
    grid-column: 1;
    grid-row: auto;
    min-height: 440px;
  }
  .donate-section { grid-column: 1; order: 20; }
  #friends-panel,
  .friends-panel-inner { min-height: 330px; }
}

/* Tablet: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .topbar {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 8px;
    padding: 6px 10px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
    grid-template-areas: "table right" "left left";
    align-items: start;
    gap: 8px;
    padding: 8px;
  }

  #left-panel { grid-area: left; }
  #table { grid-area: table; }
  #right-panel { grid-area: right; }

  #left-panel {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: minmax(250px, auto);
  }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 0;
  }

  .board-tools.opponent {
    grid-template-areas: "piles life" "hand hand" "souls souls";
  }

  .board-tools.current {
    grid-template-areas: "life piles" "souls souls" "action action";
  }

  .board-tools.opponent > .pile-row,
  .board-tools.current > .pile-row { grid-area: piles; }
  .board-tools.opponent > .opponent-hand-wrap { grid-area: hand; }
  .board-tools.opponent > .battlefield-souls,
  .board-tools.current > .battlefield-souls { grid-area: souls; }
  .board-tools.opponent > .life-resource-wrap,
  .board-tools.current > .life-resource-wrap { grid-area: life; }
  .board-tools.current > .soul-draw-board-btn { grid-area: action; }

  .board-tools .life-resource-wrap {
    grid-template-columns: 1fr;
    justify-self: stretch;
    width: 100%;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(60px, 86px));
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card {
    flex-basis: 112px;
    max-width: 112px;
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
    height: auto;
    min-height: 0;
  }

  .deckbuilder-main,
  .deckbuilder-list {
    min-height: 520px;
  }

  .deckbuilder-center {
    grid-column: 1 / -1;
    min-height: 600px;
  }

  .deckbuilder-preview {
    min-height: 500px;
  }

  .deckbuilder-library {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  .deckbuilder-preview-body img {
    width: min(100%, 380px);
    height: auto;
  }
}

/* Laptop: 1024px to 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .topbar {
    grid-template-columns: minmax(170px, 220px) minmax(200px, 1fr) auto;
  }

  .layout {
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(210px, 260px);
    gap: 8px;
    padding: 8px;
  }

  .side-panel,
  .table {
    padding: 7px;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(62px, 88px));
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 240px) minmax(280px, 320px);
  }

  .deckbuilder-library {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

/* Desktop: 1440px to 1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
  .layout {
    grid-template-columns: minmax(190px, 250px) minmax(560px, 1fr) minmax(220px, 300px);
    gap: 10px;
    padding: 10px;
  }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-areas: none;
  }

  .board-tools.opponent > *,
  .board-tools.current > * {
    grid-area: auto;
  }

  .board-tools.opponent {
    grid-template-columns: max-content minmax(70px, 1fr) minmax(160px, 280px) max-content;
  }

  .board-tools.current {
    grid-template-columns: max-content minmax(180px, 1fr) max-content max-content;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(64px, 92px));
    min-height: 142px;
  }

  .field-band {
    min-height: 186px;
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 270px) minmax(360px, 400px);
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card {
    flex-basis: 120px;
    max-width: 120px;
  }
}

/* Large Desktop: 1920px and above */
@media (min-width: 1920px) {
  .main-menu.deckbuilder-open .menu-panel {
    width: min(1760px, calc(100vw - 64px));
  }

  .topbar {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) minmax(320px, 400px);
    gap: 12px;
    padding: 3px 12px;
  }

  .layout {
    grid-template-columns: minmax(190px, 250px) minmax(560px, 1fr) minmax(220px, 300px);
    gap: 10px;
    padding: 10px;
  }

  .side-panel,
  .table {
    padding: 8px;
  }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-areas: none;
    gap: 8px;
  }

  .board-tools.opponent > *,
  .board-tools.current > * {
    grid-area: auto;
  }

  .board-tools.opponent {
    grid-template-columns: max-content minmax(70px, 1fr) minmax(160px, 280px) max-content;
  }

  .board-tools.current {
    grid-template-columns: max-content minmax(180px, 1fr) max-content max-content;
  }

  .board-pile {
    width: 46px;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(64px, 92px));
    gap: 6px;
    min-height: 142px;
  }

  .field-band {
    min-height: 186px;
    padding: 8px;
  }

  .hand-panel {
    margin-inline: 10px;
    padding: 6px 10px 7px;
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card {
    flex-basis: 120px;
    max-width: 120px;
  }

  .hand-grid.crowded > .card {
    flex-basis: 120px;
  }

  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(400px, 460px);
    min-height: 720px;
    height: auto;
  }

  .deckbuilder-main,
  .deckbuilder-list {
    height: min(80vh, 940px);
  }

  .deckbuilder-center {
    min-height: 720px;
  }

  .deckbuilder-library {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }

  .library-card {
    height: 246px;
  }
}

/* Large 16:10 desktop panels (e.g. 2560x1600 @ 100% scaling) have enough
   room to grow the library thumbnails further instead of just adding
   more columns at the same minimum size. */
@media (min-width: 2200px) {
  .deckbuilder-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) minmax(460px, 520px);
  }

  .deckbuilder-library {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }

  .library-card {
    height: 300px;
    padding: 8px;
  }

  .library-card-img-wrap {
    max-height: 220px;
  }
}

/* Desktop game board density also follows the available height.
   This keeps wide-but-short windows and scaled displays proportional. */
@media (min-width: 1024px) {
  body.match-active > #app {
    grid-template-rows: auto auto minmax(210px, 1fr);
  }

  body.match-active .table {
    /* Add the prompt row on top of the former board height instead of taking it out of the
       battlefields. The extra 64px covers the 56px strip plus its additional grid gap. */
    height: calc(60vh + 64px);
    height: calc(60dvh + 64px);
    grid-template-rows: minmax(0, 1fr) minmax(56px, max-content) minmax(0, 1fr);
  }

  /* Scripted prompts use a quiet, fixed central strip on desktop. This keeps Plays & Targets
     permanently visible in the left panel and mirrors the already-established compact layout. */
  body.match-active .compact-field-prompts {
    position: relative;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 4px 8px 4px 112px;
    overflow: auto;
    border: 1px solid rgba(216, 189, 118, 0.32);
    border-radius: 6px;
    background: rgba(10, 11, 10, 0.72);
    box-shadow: inset 0 0 12px rgba(216, 189, 118, 0.035);
  }

  body.match-active #day-night-indicator-topbar {
    display: none;
  }

  body.match-active .desktop-central-day-night {
    position: absolute;
    top: 50%;
    left: 8px;
    z-index: 42;
    display: flex;
    width: 96px;
    min-width: 96px;
    min-height: 34px;
    padding: 4px 8px;
    border-color: rgba(216, 189, 118, 0.46);
    border-radius: 6px;
    background: rgba(31, 32, 31, 0.84);
    font-size: 11px;
    transform: translateY(-50%);
  }

  body.match-active .compact-field-prompts.tabletop-toolbar > .tabletop-field-toolbar {
    display: none;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) > * {
    flex: 1 1 0;
    min-width: 0;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) {
    flex-wrap: wrap;
    height: auto;
    max-height: 104px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .attack-notice,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    padding: 4px 10px;
    border-color: rgba(216, 189, 118, 0.38);
    border-radius: 5px;
    background: rgba(25, 26, 25, 0.76);
    box-shadow: none;
    overflow: hidden;
  }

  /* The central strip is a one-line action summary, not a second rules-text panel. Field/card
     targeting already communicates the instruction visually, so keep only the source name and
     any actionable control (notably Skip Effect). */
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel > span,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel > p {
    display: none;
  }

  /* Remote/waiting prompts often wrap the source name inside the explanatory span instead of
     rendering it as a direct sibling. Promote only that nested name into the one-line strip. */
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel > span:has(> strong) {
    display: contents;
  }

  /* Strategy cards are the exception: their mode buttons are the choice itself. Keep the card
     name in a compact leading cell and divide every remaining pixel evenly among the options. */
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel {
    flex-wrap: nowrap;
    justify-content: stretch;
    overflow: hidden;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel > strong {
    flex: 0 1 190px;
    min-width: 90px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel > .zoe-mode-buttons,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel > button {
    flex: 1 1 0;
    min-width: 0;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel > .zoe-mode-buttons {
    flex-wrap: nowrap;
    align-self: stretch;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel.strategy-choice-panel > .zoe-mode-buttons > button {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .attack-notice > div:not(.post-attack-return-actions) {
    display: none;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) strong,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) span {
    font-size: 11px;
    line-height: 1.15;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel > strong,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .attack-notice > strong,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .post-attack-return-actions > span {
    flex: 0 1 220px;
    min-width: 70px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) button,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .combat-prompt-action {
    width: auto;
    min-width: 0;
    min-height: 30px;
    padding: 4px 10px;
    border-color: rgba(216, 189, 118, 0.42);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .zoe-mode-buttons,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .discard-mini-list,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .rematch-prompt-actions,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .post-attack-return-actions {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .rematch-panel {
    flex-direction: row;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .rematch-prompt-actions > button,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .post-attack-return-actions > button,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .zoe-mode-buttons > button,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .discard-mini-list > button {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .rematch-square-btn {
    width: auto;
    height: 30px;
    aspect-ratio: auto;
    padding: 4px 12px;
  }

  /* Stay on the 56px single row whenever the controls fit. Intrinsically sized controls are the
     escape hatch: if compressing them further would make their label unusable, the panel and its
     group may wrap once and the grid's central track grows with it, up to 104px. */
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .attack-notice,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .target-panel,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .zoe-mode-buttons,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .discard-mini-list,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .rematch-prompt-actions,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .post-attack-return-actions {
    flex-wrap: wrap;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) button,
  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .combat-prompt-action {
    min-width: max-content;
  }

  body.match-active .compact-field-prompts:not(.tabletop-toolbar) .mobile-judge-call-btn {
    display: none;
  }

  body.match-active #left-panel,
  body.match-active #right-panel {
    height: calc(60vh + 64px);
    height: calc(60dvh + 64px);
    max-height: calc(60vh + 64px);
    max-height: calc(60dvh + 64px);
    overflow: hidden;
  }

  body.match-active #left-panel {
    grid-template-rows: minmax(180px, 32vh) minmax(0, 1fr);
  }

  .topbar {
    min-height: clamp(36px, 5vh, 44px);
  }

  .layout {
    grid-template-columns:
      clamp(170px, 13.5vw, 250px)
      minmax(0, 1fr)
      clamp(220px, 16.5vw, 300px);
    gap: clamp(5px, 0.5vw, 8px);
    padding: 4px clamp(5px, 0.55vw, 8px);
  }

  .side-panel,
  .table {
    padding: clamp(5px, 0.5vw, 8px);
  }

  .table {
    gap: clamp(4px, 0.55vh, 6px);
  }

  body.match-active .layout,
  body.match-active .table {
    min-height: 0;
  }

  .board-tools,
  .board-tools.opponent,
  .board-tools.current {
    height: clamp(54px, 9vh, 92px);
    max-height: 92px;
    min-height: clamp(54px, 9vh, 92px);
    gap: clamp(4px, 0.75vh, 8px);
    overflow: hidden;
  }

  .board-tools .battlefield-souls,
  .opponent-hand-wrap {
    box-sizing: border-box;
    height: 100%;
    max-height: 92px;
    min-height: clamp(44px, 7.5vh, 60px);
    overflow: hidden;
  }

  .board-tools .battlefield-souls {
    padding: 6px 10px;
  }

  .board-tools .battlefield-souls .soul-row {
    --soul-card-w: clamp(28px, 4vh, 42px);
    box-sizing: border-box;
    min-height: 0;
    padding: 2px 0 3px;
  }

  .board-tools .life-resource-wrap {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    max-height: 92px;
    padding: 6px 9px;
    gap: 2px;
    overflow: hidden;
  }

  .board-tools .life-resource-name {
    min-height: 13px;
    line-height: 13px;
  }

  .life-resource-wrap {
    min-height: clamp(48px, 8.25vh, 66px);
    padding-block: clamp(5px, 1vh, 8px);
  }

  .board-pile {
    width: clamp(36px, 5.75vh, 46px);
  }

  .field-band {
    min-height: clamp(116px, 19vh, 186px);
    padding: clamp(5px, 1vh, 8px);
  }

  body.match-active .field-band {
    min-height: clamp(116px, 19vh, 186px);
  }

  .zone,
  .field-zone {
    --responsive-field-card-min: clamp(48px, 7vh, 64px);
    --responsive-field-card-max: clamp(68px, 11vh, 100px);
    grid-template-columns: repeat(auto-fit, minmax(var(--responsive-field-card-min), var(--responsive-field-card-max)));
    min-height: clamp(88px, 14vh, 142px);
    gap: clamp(4px, 0.75vh, 6px);
  }

  body.match-active .field-zone {
    min-height: 100%;
  }

  #left-panel {
    --responsive-chat-height: clamp(180px, 32vh, 320px);
    grid-template-rows: var(--responsive-chat-height) minmax(0, 1fr);
    max-height: calc(100vh - clamp(82px, 13vh, 150px));
    max-height: calc(100dvh - clamp(82px, 13vh, 150px));
  }

  #left-panel .chat-panel {
    height: var(--responsive-chat-height);
    max-height: var(--responsive-chat-height);
  }

  .hand-panel {
    height: 100%;
    box-sizing: border-box;
    container-type: size;
    container-name: player-hand-panel;
    min-height: clamp(170px, calc(35vh - 210px), 292px);
    min-height: clamp(170px, calc(35dvh - 210px), 292px);
    margin: 0 clamp(5px, 0.55vw, 8px) 2px;
    padding: clamp(3px, 0.5vh, 5px) clamp(5px, 0.55vw, 8px);
  }

  body.match-active .hand-panel:not(:has(.mulligan-grid)) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.match-active .hand-panel:not(:has(.mulligan-grid)) > .hand-grid {
    align-self: center;
  }

  .hand-grid {
    /* The cqh limit reserves room for the title and contextual action. This keeps the complete
       printed card (including the Pal stats at its foot) visible at every desktop browser zoom. */
    --responsive-hand-card-width: clamp(54px, min(17.5dvh, calc(71cqh - 36px)), 196px);
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card,
  .hand-grid.crowded > .card {
    flex-basis: var(--responsive-hand-card-width);
    width: var(--responsive-hand-card-width);
    max-width: var(--responsive-hand-card-width);
    max-height: calc(100cqh - 38px);
  }

  body.match-active .hand-grid.player-hand .card.real-card[data-card-role="hand"] {
    /* Card scans are consistently about 326x454 (ratio 0.7185). The former generic 5/7.8
       container was too narrow, so widening to the source ratio preserves almost the same
       height while using the hand's horizontal room and fitting the complete printed image. */
    aspect-ratio: 326 / 454;
  }

  /* In partita l'artwork usa lo stesso spazio verticale del mulligan: sotto la carta resta
     soltanto l'azione contestuale (Deploy, Discard, scelta effetto, ecc.), senza duplicare le
     statistiche che sono gia' leggibili nell'immagine stampata. */
  body.match-active .hand-grid.player-hand .card.real-card[data-card-role="hand"]
    .card-game-overlay > span:first-child {
    display: none;
  }

  body.match-active .hand-grid.player-hand .card.real-card[data-card-role="hand"]
    .card-game-overlay {
    gap: 0;
    padding: 0;
    background: transparent;
  }

  .hand-grid.crowded {
    --hand-overlap-min: clamp(-90px, -9vh, -56px);
  }

  .hand-grid.more-crowded {
    --hand-overlap-min: clamp(-98px, -10vh, -60px);
  }

  .hand-grid.very-crowded {
    --hand-overlap-min: clamp(-104px, -11vh, -64px);
  }

  .hand-grid.crowded > .card {
    margin-right: clamp(
      var(--hand-overlap-min),
      calc((100% - var(--hand-edge-buffer) - (var(--responsive-hand-card-width) * var(--hand-count))) / var(--hand-gaps)),
      -2px
    );
  }

  body > #app > .legal-footer {
    gap: 1px;
    margin-bottom: clamp(3px, 1vh, 10px);
    padding-block: clamp(3px, 0.75vh, 6px);
    font-size: clamp(7px, 1.05vh, 10px);
    line-height: 1.15;
  }
}

@media (min-width: 1280px) {
  .board-tools.opponent,
  .board-tools.current {
    grid-template-areas: none;
  }

  .board-tools.opponent > *,
  .board-tools.current > * {
    grid-area: auto;
  }

  .board-tools.opponent {
    grid-template-columns: max-content minmax(0, 1fr) minmax(120px, 352px) max-content;
  }

  .board-tools.opponent > * {
    min-width: 0;
  }

  .board-tools.opponent .life-resource-wrap {
    min-width: 130px;
    justify-self: end;
    position: relative;
    z-index: 2;
  }

  .board-tools.current {
    grid-template-columns: max-content minmax(120px, 1fr) max-content max-content;
  }
}

/* Compact play surface: phones and tablets */
@media (max-width: 1023px) {
  body.match-active > #app {
    grid-template-rows: auto auto minmax(178px, 1fr);
  }

  .damage-order-dialog {
    box-sizing: border-box;
    width: min(760px, calc(100vw - 12px));
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 8px;
    overflow: hidden;
  }

  .damage-order-dialog article {
    grid-template-rows: auto auto minmax(0, auto) auto;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 30px);
    max-height: calc(100dvh - 30px);
    overflow: hidden;
  }

  .damage-order-dialog .dialog-header {
    gap: 6px;
  }

  .damage-order-dialog .dialog-header h2 {
    margin: 0;
    font-size: 14px;
  }

  .damage-order-dialog p {
    max-height: 2.5em;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
  }

  .damage-order-dialog .damage-order-list {
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 0;
    max-height: min(42vh, 220px);
    max-height: min(42dvh, 220px);
    padding: 4px;
    overflow: hidden;
  }

  .damage-order-dialog .damage-order-card {
    flex: 1 1 0;
    width: 0;
    max-width: 128px;
    min-width: 0;
    gap: 2px;
    padding: 3px;
    overflow: hidden;
  }

  .damage-order-dialog .damage-order-card img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(30vh, 160px);
    max-height: min(30dvh, 160px);
    object-fit: contain;
  }

  .damage-order-dialog .damage-order-card strong,
  .damage-order-dialog .damage-order-card span:not(.damage-order-index) {
    font-size: clamp(7px, 1.8vw, 10px);
    line-height: 1.1;
  }

  .damage-order-dialog .damage-order-index {
    left: 5px;
    top: 5px;
    width: clamp(16px, 4vw, 21px);
    height: clamp(16px, 4vw, 21px);
    font-size: clamp(8px, 2vw, 11px);
  }

  .damage-order-dialog #assign-damage-btn,
  .damage-order-dialog .dialog-board-btn {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .setup-controls-panel > .player-card,
  .setup-controls-panel .setup-actions > strong,
  .tutorial-focus-cards {
    display: none;
  }

  .setup-controls-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .setup-controls-panel .setup-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
    padding: 0;
  }

  .setup-controls-panel .setup-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 4px 8px;
    font-size: 10px;
  }

  .deckbuilder-preview {
    display: none !important;
  }

  [data-menu-action="toggle-preview"] {
    display: none;
  }

  [data-preview-card] {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .topbar {
    display: block;
    min-height: 0;
    padding: 4px 6px;
  }

  .app-brand,
  .game-status,
  #day-night-indicator-topbar,
  #shortcuts-btn,
  #rules-btn {
    display: none;
  }

  /* All 6 visible action buttons (audio x2, Go to home, Report Bug, Log, Surrender) share the
     same equal-width columns and sizing, one per column, so everything fits on a single row
     instead of wrapping. */
  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  .topbar-actions #log-btn,
  .topbar-actions #new-game-btn,
  .topbar-actions #report-bug-btn,
  .topbar-actions .mobile-surrender-btn {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 4px 2px;
    font-size: 8.5px;
  }

  .topbar-actions .topbar-audio-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 0;
    padding-inline: 5px !important;
    font-size: 13px !important;
  }

  .topbar-actions .mobile-surrender-btn {
    border-color: rgba(214, 97, 74, 0.78);
    color: #ffd4cb;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "table" "right";
    align-items: start;
  }

  body.compact-gameplay .layout {
    grid-template-areas: "table";
  }

  body.match-active .table {
    align-content: start;
    grid-template-rows: auto 68px auto;
  }

  body.match-active.tabletop-mode-active .table {
    grid-template-rows: auto auto auto;
  }

  body.match-active .battlefield {
    align-content: start;
    grid-template-rows: auto;
  }

  body.match-active .field-band {
    min-height: 112px;
  }

  body.match-active .field-zone {
    min-height: 86px;
  }

  body.match-active .hand-panel {
    --mobile-hand-card-width: 84px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    min-height: 178px;
    height: 100%;
  }

  body.match-active .hand-panel .hand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--mobile-hand-card-width));
    grid-auto-rows: auto;
    justify-content: center;
    align-items: start;
    align-content: start;
    min-height: 0;
    height: auto;
    gap: 6px;
  }

  body.match-active .hand-panel:has(.mulligan-grid) {
    grid-template-rows: auto;
    min-height: 0;
    height: auto;
  }

  body.match-active .mulligan-grid .hand-grid {
    align-content: start;
    align-items: start;
    height: auto;
    grid-auto-rows: auto;
  }

  body.match-active .mulligan-grid .hand-grid .card.real-card {
    height: auto;
    max-height: none;
    grid-template-rows: auto 44px auto auto;
  }

  body.match-active .mulligan-grid .hand-grid .card.real-card .card-face-wrap {
    height: 44px;
    max-height: 44px;
  }

  body.match-active .hand-grid.player-hand.single-row-hand {
    align-content: start;
    align-items: start;
    height: auto;
    grid-auto-rows: auto;
  }

  body.match-active .hand-grid.player-hand.single-row-hand .card.real-card {
    height: auto;
    max-height: none;
    grid-template-rows: auto 44px auto auto;
  }

  body.match-active .hand-grid.player-hand.single-row-hand .card.real-card .card-face-wrap {
    height: 44px;
    max-height: 44px;
  }

  #left-panel {
    display: none;
  }

  #table {
    grid-area: table;
  }

  #right-panel {
    grid-area: right;
    min-height: 0;
    padding: 5px;
  }

  #right-panel.gameplay-side-panel {
    display: none;
  }

  .gameplay-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 4px;
    min-height: 0;
  }

  .gameplay-controls .control-top,
  .gameplay-controls .control-bottom {
    display: contents;
  }

  .gameplay-controls .control-info {
    display: none;
  }

  .gameplay-controls .control-bottom button,
  .gameplay-controls .control-bottom .end-turn-control,
  .gameplay-controls .surrender-control {
    min-width: 0;
    min-height: 38px;
    padding: 4px;
    font-size: 10px;
    line-height: 1.05;
  }

  .board-tools.opponent,
  .board-tools.current {
    grid-template-areas: none;
    grid-template-rows: auto;
    align-items: center;
    gap: 4px;
    min-height: 0;
  }

  .board-tools.opponent {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .board-tools.current {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .board-tools.opponent > *,
  .board-tools.current > * {
    grid-area: auto;
  }

  .board-tools .life-resource-wrap {
    grid-column: span 2;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2px;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 3px 5px;
    border-radius: 5px;
  }

  .board-tools .life-resource-name {
    font-size: 7px;
    letter-spacing: 0;
  }

  .board-tools .life-resource-body {
    grid-template-columns: 1fr auto;
    gap: 3px;
    align-items: center;
  }

  .board-tools .life-hp-block {
    align-items: center;
  }

  .board-tools .life-hp-block .life-value {
    font-size: 13px;
  }

  .board-tools .life-hp-block .life-unit {
    font-size: 7px;
  }

  .board-tools .resource-badges {
    grid-template-rows: 1fr 1fr;
    gap: 2px;
  }

  .board-tools .resource-badges span {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    gap: 2px;
    padding: 2px 3px;
    font-size: 0;
  }

  .board-tools .resource-badges span[title="Fruit"]::before,
  .board-tools .resource-badges span[title="Wood"]::before {
    font-size: 7px;
    font-weight: 800;
  }

  .board-tools .resource-badges span[title="Fruit"]::before {
    content: "F";
  }

  .board-tools .resource-badges span[title="Wood"]::before {
    content: "W";
  }

  .board-tools .resource-badges strong {
    font-size: 11px;
  }

  .board-tools .battlefield-souls {
    place-items: center;
    align-self: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 3px;
  }

  .battlefield-souls > span,
  .battlefield-souls .soul-desktop-count,
  .battlefield-souls .soul-row,
  .battlefield-souls .empty-soul {
    display: none;
  }

  .battlefield-souls .soul-compact-count {
    display: block;
    color: var(--accent-strong);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .battlefield-souls .soul-compact-count > span {
    display: none;
  }

  .opponent-hand-wrap {
    place-items: center;
    align-self: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 3px;
  }

  .opponent-hand-row,
  .opponent-hand-count > span {
    display: none;
  }

  .opponent-hand-count {
    display: grid;
    place-items: center;
  }

  .opponent-hand-count strong {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font-size: 12px;
  }

  .pile-row {
    gap: 4px;
    width: 100%;
  }

  .board-tools.opponent .pile-row,
  .board-tools.current .pile-row {
    grid-column: span 2;
  }

  .board-pile,
  button.board-pile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    min-height: 30px;
    aspect-ratio: auto;
    padding: 3px;
    overflow: visible;
  }

  .board-pile img {
    display: none;
  }

  .board-pile-label,
  .discard-pile.empty .board-pile-label {
    display: none;
  }

  .board-pile strong {
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    color: var(--accent-strong);
    font-size: 12px;
  }

  .board-tools.current .soul-draw-board-btn {
    grid-column: 1 / span 4;
    grid-row: 2;
    width: 100%;
    min-height: 36px;
  }

  .board-tools.current .compact-end-turn-btn {
    grid-column: 5 / span 2;
    grid-row: 2;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 4px;
    border-color: rgba(216, 189, 118, 0.72);
    font-size: 10px;
    line-height: 1.05;
    text-transform: uppercase;
  }

  /* Dedicated compact rows: one statistics row, one actions row. */
  .board-tools.opponent,
  .board-tools.current {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 4px;
  }

  .board-tools > .pile-row,
  .board-tools > .opponent-hand-wrap,
  .board-tools > .battlefield-souls,
  .board-tools > .life-resource-wrap,
  .board-tools > .soul-draw-board-btn {
    display: none;
  }

  .board-tools > .compact-player-stats {
    display: grid;
    grid-template-columns: minmax(52px, 1.5fr) repeat(3, minmax(20px, 0.6fr)) repeat(4, minmax(22px, 0.65fr));
    gap: 2px;
    width: 100%;
    min-width: 0;
  }

  .compact-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    min-height: 26px;
    padding: 1px 2px;
    overflow: hidden;
    border: 1px solid rgba(216, 189, 118, 0.32);
    border-radius: 5px;
    background: rgba(12, 12, 12, 0.52);
    color: var(--muted);
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
    /* Removes the ~300ms tap-delay some mobile browsers add while waiting to see if a tap turns
       into a double-tap-to-zoom gesture — every .compact-stat here is either a button (Deck,
       Grave, Exile menus) or hosts the tabletop-compact-counter hit zones below. */
    touch-action: manipulation;
  }

  /* Tabletop's mobile stat chips (HP, Food, Wood, Souls) are too narrow for explicit -/+ buttons
     (compare the desktop tabletop-counter), so the whole chip becomes two invisible tap zones —
     right half increases/taps, left half decreases/untaps — with the label floating on top,
     pointer-events:none so it never blocks either zone underneath it. */
  .tabletop-compact-counter {
    position: relative;
    padding: 0;
  }

  .tabletop-compact-counter-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 1px 2px;
    pointer-events: none;
  }

  .compact-stat-life.tabletop-compact-counter .tabletop-compact-counter-label {
    display: grid;
    place-items: center;
    gap: 1px;
  }

  .tabletop-compact-counter-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tabletop-compact-counter-hit:first-of-type {
    left: 0;
  }

  .tabletop-compact-counter-hit:last-of-type {
    right: 0;
  }

  .compact-stat strong {
    color: var(--accent-strong);
    font-size: 9px;
  }

  .compact-stat-life {
    display: grid;
    place-items: center;
    gap: 1px;
  }

  .compact-stat-life b {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 6px;
    font-weight: 700;
    text-overflow: ellipsis;
  }

  button.compact-discard-stat {
    width: 100%;
    min-height: 28px;
    cursor: pointer;
  }

  .board-tools > .compact-player-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    width: 100%;
  }

  /* Specificity note: .board-tools.current .compact-end-turn-btn (below, for the OTHER
     non-compact layout where this button is a direct grid item of .board-tools.current itself)
     has 3 class selectors and would otherwise win over a plain ".compact-player-actions
     .compact-end-turn-btn" rule regardless of source order, forcing this button to
     grid-column:5/span2; grid-row:2 — which doesn't exist in this 3-column sub-grid and silently
     pushes Day/Night and the Soul Draw button apart onto separate rows via implicit columns.
     Matching (and exceeding) that specificity here is required, not optional. */
  .board-tools.current .compact-player-actions .soul-draw-board-btn,
  .board-tools.current .compact-player-actions .compact-end-turn-btn {
    grid-column: auto;
    grid-row: auto;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 4px;
    font-size: 9px;
    line-height: 1.05;
  }

  .compact-player-actions .day-night-indicator {
    font-size: 11px;
  }

  /* Compact cards: name, cropped art, then only the necessary actions. Battlefield Structures
     are excluded here (and from the two rules below): they keep the dedicated landscape
     aspect-ratio: 454/313 slot and rotated full-image treatment from the non-media rules
     above, rather than collapsing into the same tiny 44px thumbnail as every other card —
     that box is too small to show more than a sliver of the (portrait source, rotated) art. */
  .card.real-card,
  .battlefield .card.real-card {
    grid-template-rows: auto 44px auto auto;
    gap: 2px;
    width: 100%;
    min-height: 0;
    aspect-ratio: auto;
    padding: 3px;
  }

  .compact-card-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 8px;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compact-card-stats {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--accent-strong);
    font-size: 7px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card.real-card .card-face-wrap {
    width: 100%;
    height: 44px;
    min-height: 44px;
    aspect-ratio: auto;
    flex-shrink: 0;
  }

  .card.real-card .card-face,
  .card.real-card[data-card-type="Structure"] .card-face {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center 32%;
    transform: none;
  }

  /* Pal art is framed with the character higher up, hence the 32% bias above. Structure
     artwork (a portrait scan of the whole printed card) has no such consistent focal point,
     so a plain centered crop is the more reliable default across different card art. */
  .card.real-card[data-card-type="Structure"] .card-face {
    object-position: center;
  }

  /* Mobile: make battlefield Structure cards match the Pal/Gear thumbnail layout (name top,
     cropped 44px art, stats/durability below) instead of the desktop landscape/rotated
     treatment above — these selectors match that treatment's specificity so they win by
     appearing later in the cascade. */
  .battlefield .card.real-card[data-card-type="Structure"] {
    aspect-ratio: auto;
    grid-template-rows: auto 44px auto auto;
  }

  .battlefield .card.real-card[data-card-type="Structure"] .card-face-wrap {
    position: static;
    inset: auto;
    width: 100%;
    height: 44px;
    min-height: 44px;
    overflow: hidden;
    container-type: normal;
  }

  .battlefield .card.real-card[data-card-type="Structure"] .card-face {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    transform: rotate(180deg);
    object-fit: cover;
    object-position: center;
  }

  .battlefield .card.real-card[data-card-type="Structure"] .card-game-overlay {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    background: transparent;
    border-radius: 0;
    font-size: 7px;
    padding: 0;
  }

  .battlefield .card.real-card[data-card-type="Structure"]:not(.structure-covered) .card-game-overlay {
    padding-bottom: 0;
  }

  .battlefield .card.real-card[data-card-type="Structure"]:not(.structure-covered) .card-game-overlay:not(:has(button)):not(:has(.card-target)) {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .battlefield .card.real-card[data-card-type="Structure"] > .compact-card-name,
  .battlefield .card.real-card[data-card-type="Structure"] > .compact-card-stats {
    display: block;
  }

  .battlefield .card.real-card[data-card-type="Structure"] .structure-stats-band,
  .battlefield .card.real-card[data-card-type="Structure"] .structure-stats-band-covered {
    display: none;
  }

  /* Occupied structures (a Pal is assigned there) no longer show that Pal overlaid on top on
     mobile (see structureOccupiedMobile in app.js) — dashed outline instead, matching the
     .assigned Pal treatment. */
  .card.structure-occupied {
    outline: 2px dashed var(--accent);
    outline-offset: -6px;
  }

  .card.real-card .card-game-overlay,
  .battlefield .card-game-overlay {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0;
    background: transparent;
  }

  .card.real-card .card-game-overlay > span {
    display: none;
  }

  .card.real-card .card-game-overlay button,
  .battlefield .card-game-overlay button,
  .card.real-card .card-game-overlay .card-target {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 21px;
    padding: 2px;
    overflow: hidden;
    font-size: 7px;
    line-height: 1;
    text-overflow: ellipsis;
  }

  .three-pal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
  }

  .three-pal-buttons button {
    flex: 1 1 40%;
    min-height: 21px;
    padding: 2px;
    font-size: 7px;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .three-pal-buttons button:last-child:nth-child(3) {
    flex: 1 1 100%;
  }

  .card.real-card .interrupt-actions {
    display: flex;
    flex: 1 1 100%;
    gap: 2px;
  }

  .card.real-card {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
  }

  .hand-grid > .card,
  .hand-grid.player-hand > .card,
  .hand-grid.crowded > .card {
    flex-basis: var(--mobile-hand-card-width, 84px);
    max-width: var(--mobile-hand-card-width, 84px);
  }

  .hand-grid.crowded,
  .hand-grid.more-crowded,
  .hand-grid.very-crowded {
    flex-wrap: wrap;
  }

  body.match-active .hand-grid.crowded {
    --hand-overlap-min: -64px;
    --hand-edge-buffer: 10px;
    gap: 6px;
  }

  body.match-active .hand-grid.crowded > .card,
  body.match-active .hand-grid.more-crowded > .card,
  body.match-active .hand-grid.very-crowded > .card {
    margin-right: 0;
  }

  body.match-active .hand-grid > .card,
  body.match-active .hand-grid.player-hand > .card,
  body.match-active .hand-grid.crowded > .card {
    width: var(--mobile-hand-card-width);
    max-width: var(--mobile-hand-card-width);
    height: auto;
    max-height: none;
  }

  body.match-active .hand-grid .card.real-card {
    align-self: start;
    grid-template-rows: auto 44px auto auto;
    height: auto;
    max-height: none;
  }

  body.match-active .hand-grid .card.real-card .card-face-wrap {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    background: #111110;
  }

  body.match-active .hand-grid .card.real-card .card-face,
  body.match-active .hand-grid .card.real-card[data-card-type="Structure"] .card-face {
    object-fit: contain;
    object-position: center;
  }

  /* Structures now use the same compact thumbnail layout as Pal/Gear cards on mobile (see
     Structure overrides above — the landscape aspect-ratio no longer applies), so they take a
     single-column slot like every other card instead of the old double-wide landscape one. */
  .structure-stack {
    grid-column: span 1;
    max-width: var(--mobile-hand-card-width, 84px);
    /* Not auto: the base rule's justify-self:center means this box's own width is authoritative
       (not the stretched grid-column track), and its child .card below is width:100% of it — an
       auto/100% pair here resolves circularly and collapses to a sliver. width:100% here instead
       resolves against the (well-defined) grid column track, matching the desktop pattern. */
    width: 100%;
  }

  .structure-stack > .card {
    width: 100%;
    height: auto;
  }

  .zone,
  .field-zone {
    grid-template-columns: repeat(auto-fit, minmax(64px, 84px));
    min-height: 88px;
  }

  /* Attack player target: match the compact card slot size instead of the desktop full-card
     footprint, which stole too much space from the field grid on phones. */
  .attack-player-target {
    gap: 2px;
    min-height: 88px;
    aspect-ratio: auto;
    padding: 4px;
  }

  .attack-player-target strong {
    font-size: 8px;
  }

  .attack-player-target span {
    font-size: 7px;
  }

  .field-band {
    min-height: 124px;
  }

  .compact-field-prompts {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 4px;
    overflow: auto;
    border: 1px solid rgba(216, 189, 118, 0.52);
    border-radius: 7px;
    background: rgba(12, 12, 12, 0.94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.48);
  }

  .mobile-judge-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 4px;
    top: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(216, 189, 118, 0.4);
    border-radius: 6px;
    background: rgba(216, 189, 118, 0.14);
    font-size: 14px;
    z-index: 21;
  }

  .mobile-chat-bar {
    width: 100%;
    margin-top: 6px;
  }

  .mobile-chat-bar .chat-panel {
    max-height: 220px;
  }

  .table {
    grid-template-rows: auto 68px auto;
  }

  /* The tabletop toolbar's button count can wrap past the fixed 68px this strip normally reserves
     for scripted combat prompts — two classes here outrank the single-class ".compact-field-prompts"
     height rule above, and the body-scoped row override outranks ".table" above it, so both switch
     to auto-sizing (content-driven) only when the toolbar variant is actually being shown. */
  .compact-field-prompts.tabletop-toolbar {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .compact-field-prompts.tabletop-central-prompts > .tabletop-field-toolbar {
    display: flex;
  }

  body.tabletop-mode-active .table {
    grid-template-rows: auto auto auto;
  }

  .compact-field-prompts > * {
    flex: 1 1 180px;
    min-width: 0;
  }

  .compact-field-prompts .attack-notice,
  .compact-field-prompts .target-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    padding: 4px 6px;
    border-radius: 5px;
    box-shadow: none;
  }

  .compact-field-prompts .rematch-panel {
    flex-direction: column;
    align-items: center;
  }

  .compact-field-prompts .attack-notice > div:not(.post-attack-return-actions) {
    display: none;
  }

  .compact-field-prompts .post-attack-return-actions {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .compact-field-prompts strong,
  .compact-field-prompts span {
    font-size: 9px;
    line-height: 1.15;
  }

  .compact-field-prompts .combat-prompt-action,
  .compact-field-prompts button {
    width: auto;
    min-width: 0;
    min-height: 28px;
    padding: 3px 7px;
    font-size: 9px;
    line-height: 1.05;
  }

  .compact-field-prompts .rematch-square-btn {
    width: 44px;
    height: 44px;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  .compact-field-prompts .zoe-mode-buttons,
  .compact-field-prompts .discard-mini-list {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .compact-field-prompts.compact-mill-preview-active {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    place-items: stretch;
    padding: 3px 6px;
    overflow: hidden;
    border-color: var(--accent);
    background:
      radial-gradient(circle at 50% 50%, rgba(216, 189, 118, 0.16), transparent 68%),
      rgba(7, 10, 9, 0.96);
    box-shadow: inset 0 0 18px rgba(216, 189, 118, 0.08), 0 0 12px rgba(216, 189, 118, 0.12);
  }

  .compact-mill-preview-active .mill-preview-heading,
  .compact-mill-preview-active .mill-preview-card > strong {
    display: none;
  }

  .compact-mill-preview-active .mill-preview-cards {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .compact-mill-preview-active .mill-preview-card {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 1 auto;
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 5 / 7;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .compact-mill-preview-active .mill-preview-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid rgba(216, 189, 118, 0.84);
    border-radius: 3px;
    background: #101411;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.58);
  }


  .compact-mill-preview-active .mill-preview-card.lucky img {
    border-color: #fff0a8;
    box-shadow: 0 0 0 1px rgba(255, 240, 168, 0.25), 0 0 10px rgba(255, 220, 112, 0.5);
  }
}

.landscape-gate.visible {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 189, 118, 0.12), transparent 42%),
    rgba(8, 9, 8, 0.97);
  touch-action: none;
}


@media (max-width: 767px) {
  .setup-hover-preview-wrap {
    display: none;
  }

  .deck-filters .range-filter {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .auth-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .auth-row > span {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .auth-actions button {
    width: 100%;
    min-width: 0;
  }

  #menu-notifications-btn .notifications-label { display: inline; }
}

/* ── Audio buttons ──────────────────────────────────────────────────────── */

.menu-audio-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 2px;
}

.menu-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #5865F2;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-discord-btn:hover {
  background: #4752C4;
}

.discord-logo {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.menu-audio-row .audio-music-btn {
  min-width: 110px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.82;
}

.topbar-audio-btn {
  min-width: 36px !important;
  padding-inline: 7px !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  position: relative;
  overflow: hidden;
}

.audio-music-btn.audio-off,
.audio-sfx-btn.audio-off {
  opacity: 0.38;
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}

/* ── Quick / Interrupt banner ───────────────────────────────────────────── */

.quick-play-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a2640 0%, #0e1a30 100%);
  border: 2px solid var(--blue);
  box-shadow: 0 6px 32px rgba(95, 168, 201, 0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
  will-change: transform, opacity;
}

.quick-play-banner.interrupt {
  background: linear-gradient(135deg, #2a1a10 0%, #1a0d08 100%);
  border-color: var(--danger);
  box-shadow: 0 6px 32px rgba(214, 97, 74, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

.quick-banner-img {
  width: 56px;
  height: 78px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.quick-banner-label {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  text-shadow: 0 0 12px rgba(95, 168, 201, 0.7);
  white-space: nowrap;
}

.quick-play-banner.interrupt .quick-banner-label {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(214, 97, 74, 0.7);
}

.quick-play-banner.lucky {
  background: linear-gradient(135deg, #2a2000 0%, #1a1500 100%);
  border-color: #f2bb4c;
  box-shadow: 0 6px 40px rgba(242, 187, 76, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}

.quick-play-banner.lucky .quick-banner-label {
  color: #f2bb4c;
  text-shadow: 0 0 16px rgba(242, 187, 76, 0.9);
}

/* ── Blocking effect-resolution banner (on-deploy / death) ─────────────── */

.effect-announce-banner {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 18, 0);
  backdrop-filter: blur(0px);
  transition: background 220ms ease, backdrop-filter 220ms ease;
  pointer-events: all;
}

.effect-announce-banner.show {
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(3px);
}

.effect-announce-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 40px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a2640 0%, #0e1a30 100%);
  border: 2px solid var(--blue);
  box-shadow: 0 8px 40px rgba(95, 168, 201, 0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms ease, transform 220ms ease;
}

.effect-announce-banner.show .effect-announce-inner {
  opacity: 1;
  transform: scale(1);
}

.effect-announce-death .effect-announce-inner {
  background: linear-gradient(135deg, #2a1a10 0%, #1a0d08 100%);
  border-color: var(--danger);
  box-shadow: 0 8px 40px rgba(214, 97, 74, 0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

.effect-announce-img {
  width: 96px;
  height: 134px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.effect-announce-label {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  text-shadow: 0 0 12px rgba(95, 168, 201, 0.7);
}

.effect-announce-death .effect-announce-label {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(214, 97, 74, 0.7);
}

.effect-announce-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
}

.effect-announce-owner {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== TRANSITION BANNERS ===== */

.turn-banner,
.combat-phase-banner,
.attack-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 32px;
  border-radius: 14px;
  pointer-events: none;
  will-change: transform, opacity;
  white-space: nowrap;
}

.turn-banner {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.turn-banner.your-turn {
  background: linear-gradient(135deg, #0a2040 0%, #061428 100%);
  border: 2px solid #5fa8c9;
  box-shadow: 0 6px 36px rgba(95, 168, 201, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #7ec8e3;
  text-shadow: 0 0 18px rgba(95, 168, 201, 0.9);
}

.turn-banner.opponent-turn {
  background: linear-gradient(135deg, #2a0a0a 0%, #1a0606 100%);
  border: 2px solid #d6614a;
  box-shadow: 0 6px 36px rgba(214, 97, 74, 0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #e8826a;
  text-shadow: 0 0 18px rgba(214, 97, 74, 0.9);
}

.combat-phase-banner {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.combat-phase-banner.your-phase {
  background: linear-gradient(135deg, #0a2040 0%, #061428 100%);
  border: 2px solid #5fa8c9;
  box-shadow: 0 6px 28px rgba(95, 168, 201, 0.45);
  color: #7ec8e3;
  text-shadow: 0 0 12px rgba(95, 168, 201, 0.8);
}

.combat-phase-banner.opponent-phase {
  background: linear-gradient(135deg, #2a0a0a 0%, #1a0606 100%);
  border: 2px solid #d6614a;
  box-shadow: 0 6px 28px rgba(214, 97, 74, 0.45);
  color: #e8826a;
  text-shadow: 0 0 12px rgba(214, 97, 74, 0.8);
}

.attack-banner {
  background: linear-gradient(135deg, #1a1000 0%, #100a00 100%);
  border: 2px solid #c9962a;
  box-shadow: 0 6px 36px rgba(201, 150, 42, 0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 10px 20px;
  gap: 14px;
}

.attack-banner-card {
  width: 60px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.attack-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attack-banner-label {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f2c94c;
  text-shadow: 0 0 16px rgba(242, 201, 76, 0.9);
}

.attack-banner-player {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 4px;
  line-height: 1.2;
}

/* ===== SPELL PLAY BANNER ===== */

.spell-play-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a0a2e 0%, #0e0618 100%);
  border: 2px solid #9b72cf;
  box-shadow: 0 6px 36px rgba(155, 114, 207, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
  will-change: transform, opacity;
  white-space: nowrap;
}

.spell-banner-card {
  width: 60px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spell-banner-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.spell-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.spell-banner-label {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c09cf0;
  text-shadow: 0 0 16px rgba(155, 114, 207, 0.9);
}

.spell-banner-targets-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.spell-banner-targets {
  display: flex;
  gap: 6px;
  align-items: center;
}

.spell-banner-card.resource {
  width: auto;
  height: auto;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
}

.spell-banner-resource {
  display: flex;
  align-items: center;
  gap: 3px;
}

.spell-banner-rsym {
  font-size: 1.1rem;
}

.spell-banner-sep {
  color: rgba(255,255,255,0.35);
  font-weight: 400;
}

.damage-step-banner {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 14px;
  pointer-events: none;
  will-change: transform, opacity;
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #2a0800 0%, #180400 100%);
  border: 2px solid #e05a2a;
  box-shadow: 0 6px 36px rgba(224, 90, 42, 0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #ff7a4a;
  text-shadow: 0 0 18px rgba(224, 90, 42, 0.9);
}

body.banner-animation-active .layout,
body.banner-animation-active .table,
body.banner-animation-active .hand-panel,
body.banner-animation-active .compact-field-prompts {
  pointer-events: none;
  user-select: none;
}

/* ===== FRIENDS & NOTIFICATIONS SYSTEM ===== */

.menu-friends-btn,
.menu-notifications-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #d8bd76 !important;
  color: #12110f !important;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.menu-friends-btn:hover,
.menu-notifications-btn:hover { filter: brightness(1.15); }

.menu-notifications-btn { padding: 6px 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.notifications-label { display: inline; }

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e03333;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
}

#friends-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 200;
  background: var(--panel, #222322);
  border: 1px solid #c9a22755;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  width: min(480px, 95vw);
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.menu-audio-row { position: relative; }

.donate-section {
  margin: 10px 16px 4px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 189, 118, 0.35);
  border-radius: 10px;
  background: rgba(216, 189, 118, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.donate-text {
  font-size: 12px;
  color: #bfaa80;
  line-height: 1.5;
  margin: 0;
  font-weight: 500;
}

.donate-disclaimer {
  font-size: 10px;
  color: #857560;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
}

.donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  background: rgba(216, 189, 118, 0.12);
  border: 1px solid rgba(216, 189, 118, 0.4);
  border-radius: 20px;
  color: #d8bd76;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.donate-btn:hover {
  background: rgba(216, 189, 118, 0.22);
  border-color: rgba(216, 189, 118, 0.7);
  color: #f0d88a;
}

@media (max-width: 767px) {
  .menu-audio-row {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 6px;
    justify-content: center;
  }

  #menu-friends-btn                 { grid-column: 1; grid-row: 1; min-width: 0; }
  #menu-notifications-btn           { grid-column: 2; grid-row: 1; min-width: 0; }
  .menu-audio-row .menu-discord-btn { grid-column: 1; grid-row: 2; min-width: 0; }
  .menu-audio-row .audio-music-btn  { grid-column: 2; grid-row: 2; min-width: 0; }
}

.friends-panel-inner {
  display: flex;
  height: 100%;
  max-height: 70vh;
}
.friends-panel-inner.has-chat { flex-direction: row; }

.friends-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.friends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid #ffffff15;
}
.friends-title {
  font-weight: 700;
  font-size: 15px;
  color: #c9a227;
}
.friends-close {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
.friends-close:hover { background: #ffffff15; color: #fff; }

.friends-add-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #ffffff10;
}
.friends-add-row input {
  flex: 1;
  background: #171817;
  border: 1px solid #ffffff25;
  border-radius: 5px;
  color: #e8e4d8;
  padding: 5px 8px;
  font-size: 13px;
}
.friends-add-status {
  padding: 0 12px 6px;
  font-size: 12px;
  color: #c9a227;
  margin: 0;
}

.friends-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.friends-empty {
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 20px;
  margin: 0;
}

.friends-requests-section {
  border-bottom: 1px solid #ffffff10;
  padding: 4px 0;
}

.friend-row,
.friend-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  gap: 8px;
}
.friend-row:hover { background: #ffffff08; }

.friend-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
.friend-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-profile-link {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.friend-profile-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.friend-profile-link:focus-visible { outline: 1px dotted var(--accent-strong); outline-offset: 3px; }

.friend-profile-dialog { width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid rgba(216,189,118,.55); border-radius: 9px; background: #171817; color: var(--text); overflow: hidden; }
.friend-profile-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.friend-profile-dialog > article { display: grid; grid-template-rows: auto minmax(0,1fr); max-height: min(760px, calc(100vh - 28px)); }
.friend-profile-dialog > article > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid rgba(216,189,118,.25); }
.friend-profile-dialog h2, .friend-profile-dialog h3, .friend-profile-dialog p { margin: 0; }
.friend-profile-dialog h2 { color: var(--accent-strong); text-transform: uppercase; }
#friend-profile-close-btn { padding: 5px 9px; border: 1px solid var(--line); background: #20211f; color: var(--text); }
#friend-profile-content { min-height: 220px; padding: 18px; overflow: auto; }
.friend-profile-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.friend-profile-summary article { display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(216,189,118,.24); border-radius: 7px; background: rgba(255,255,255,.025); }
.friend-profile-summary span, .friend-profile-summary small, .friend-profile-achievement p { color: var(--muted); }
.friend-profile-summary strong { color: var(--accent-strong); font-size: 28px; }
.friend-profile-achievements { display: grid; gap: 10px; margin-top: 18px; }
.friend-profile-achievements h3 { color: var(--text); text-transform: uppercase; }
.friend-profile-achievement { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(216,189,118,.2); border-radius: 7px; background: #1d1e1c; }
.friend-profile-achievement > header { display: flex; justify-content: space-between; gap: 10px; color: var(--accent); }
.friend-profile-tier-list { display: flex; flex-wrap: wrap; gap: 6px; }
.friend-profile-tier-list > span { padding: 5px 7px; border-radius: 5px; background: rgba(216,189,118,.09); color: var(--muted); font-size: 11px; }
.friend-profile-tier-list strong { color: var(--text); }
.friend-profile-status { padding: 32px 12px; color: var(--muted); text-align: center; }
.friend-profile-status.error { color: #e69b91; }
@media (max-width: 560px) { .friend-profile-summary { grid-template-columns: 1fr; } }
.friend-status {
  font-size: 11px;
  white-space: nowrap;
}
.friend-status.online { color: #4caf50; }
.friend-status.in-game { color: #ff9800; }
.friend-status.offline { color: #888; }

.friend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.friend-dot.online { background: #4caf50; }
.friend-dot.in-game { background: #ff9800; }
.friend-dot.offline { background: #555; }

.friend-actions { display: flex; gap: 4px; align-items: center; }

.friends-btn-primary {
  background: #c9a227;
  color: #111;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.friends-btn-primary:hover { background: #e0b82e; }

.friends-btn-secondary {
  background: #333;
  color: #ccc;
  border: none;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.friends-btn-secondary:hover { background: #444; }

.friends-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.8;
}
.friends-btn-icon:hover { opacity: 1; background: #ffffff15; }
.friends-btn-remove { opacity: 0.4; }
.friends-btn-remove:hover { opacity: 1; }

.friends-invite-flow {
  padding: 10px 12px;
  background: #1a1a18;
  border-bottom: 1px solid #ffffff10;
}
.friends-invite-flow.refused .friends-invite-title { color: #e03333; }
.friends-invite-title { font-size: 13px; margin-bottom: 8px; }
.friends-invite-actions { display: flex; gap: 6px; margin-top: 8px; }
.friends-deck-select {
  width: 100%;
  background: #171817;
  border: 1px solid #ffffff25;
  border-radius: 5px;
  color: #e8e4d8;
  padding: 5px 8px;
  font-size: 13px;
}

/* Chat panel */
.friends-chat-panel {
  width: 220px;
  border-left: 1px solid #ffffff15;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.friends-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px;
  border-bottom: 1px solid #ffffff15;
  font-size: 12px;
  color: #bbb;
}
.friends-close-chat {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 3px;
}
.friends-close-chat:hover { background: #ffffff15; }

.friends-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-empty { color: #666; font-size: 12px; text-align: center; margin: auto; }

.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msg.theirs { justify-content: flex-start; }
.chat-bubble {
  max-width: 85%;
  padding: 5px 9px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg.mine .chat-bubble { background: #c9a22733; color: #e8e4d8; border-bottom-right-radius: 3px; }
.chat-msg.theirs .chat-bubble { background: #333; color: #ddd; border-bottom-left-radius: 3px; }

.friends-chat-input-row {
  display: flex;
  gap: 5px;
  padding: 7px 8px;
  border-top: 1px solid #ffffff10;
}

.friends-chat-status {
  margin: 0;
  padding: 4px 10px;
  color: #ff9d92;
  font-size: 12px;
}
.friends-chat-input-row input {
  flex: 1;
  background: #171817;
  border: 1px solid #ffffff20;
  border-radius: 5px;
  color: #e8e4d8;
  padding: 4px 7px;
  font-size: 12px;
  min-width: 0;
}

/* ===== Tabletop mode ===== */

.card.tabletop-tap {
  transform: rotate(90deg);
}

/* The card that owns a Target link (or is currently picking one) pulses gold; the card it points
   at pulses crimson — distinct colors so the source/target pair reads at a glance on a busy board. */
.card.tabletop-target-source {
  outline: 3px solid var(--accent);
  outline-offset: -6px;
  animation: tabletopTargetSourcePulse 900ms ease-in-out infinite;
}

.card.tabletop-target-marked {
  outline: 3px solid #e65353;
  outline-offset: -6px;
  animation: tabletopTargetMarkedPulse 900ms ease-in-out infinite;
}

@keyframes tabletopTargetSourcePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(216, 189, 118, 0.6); }
  50% { box-shadow: 0 0 26px rgba(216, 189, 118, 1); }
}

@keyframes tabletopTargetMarkedPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(230, 83, 83, 0.6); }
  50% { box-shadow: 0 0 26px rgba(230, 83, 83, 1); }
}

.tabletop-target-btn-active {
  background: #e65353 !important;
  border-color: #e65353 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(230, 83, 83, 0.8);
}

.card.tabletop-effect-active {
  animation: tabletopEffectBlink 900ms ease-in-out infinite;
}

@keyframes tabletopEffectBlink {
  0%, 100% {
    outline: 2px solid #7fd8ff;
    outline-offset: -6px;
    box-shadow: 0 0 6px rgba(127, 216, 255, 0.35);
  }
  50% {
    outline: 2px solid #7fd8ff;
    outline-offset: -6px;
    box-shadow: 0 0 20px rgba(127, 216, 255, 0.9);
  }
}

.tabletop-field-zone {
  position: relative;
  /* Free-position board cards are absolutely positioned (see .tabletop-board-layer), so they
     never contribute to this container's intrinsic height — without this it would be stuck at
     exactly one row (the .field-zone min-height below) no matter how many cards were dragged
     onto it. --tabletop-field-rows is set inline per player from player.tabletopFieldRows
     (Extend/Reduce field in the tabletop toolbar), synced so both clients agree on its height. */
  min-height: calc(var(--tabletop-field-rows, 1) * 142px);
}

/* Desktop shows the same toolbar in the left panel instead (see .game-notices.tabletop-toolbar-panel
   below) — #left-panel is always visible there, unlike mobile where it's hidden entirely during
   gameplay. This strip stays mobile-only (scoped inside the max-width:1023px query further down)
   so tabletop doesn't end up with the toolbar duplicated in both places on desktop. */
.tabletop-field-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.tabletop-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Desktop's left-panel variant (renderGameNotices) stacks every button in a single column
   ("uno sotto l'altro") instead of the mobile strip's horizontal wrap. */
.game-notices.tabletop-toolbar-panel .tabletop-field-toolbar,
.game-notices.tabletop-toolbar-panel .tabletop-toolbar-group {
  flex-direction: column;
  align-items: stretch;
}

.tabletop-toolbar-btn {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.tabletop-click-tool-btn {
  font-weight: 700;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.tabletop-click-tool-red {
  background: #a83232 !important;
  border-color: #e65353 !important;
  color: #fff !important;
}

.tabletop-click-tool-green {
  background: #2f7d4a !important;
  border-color: #4fd383 !important;
  color: #fff !important;
}

/* Grid items positioned absolute default their auto insets to the grid container's own edges
   (not "free" like a normal absolutely-positioned box), which fights any explicit width. Routing
   free-position board cards through this plain (non-grid) overlay — itself the one absolutely
   positioned grid item, sized to exactly cover .field-zone via that same auto-edge behavior —
   gives the cards inside it normal, unconstrained absolute positioning against a non-grid parent. */
.tabletop-board-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card.tabletop-board-card {
  position: absolute;
  /* !important: the compact-layout media query's ".battlefield .card.real-card" rule outranks
     this on specificity (three classes vs. two) at narrow viewports, and would otherwise stretch
     this card to fill the free-position overlay layer instead of a normal card-sized box. */
  --tabletop-card-w: 92px;
  width: var(--tabletop-card-w) !important;
  pointer-events: auto;
  z-index: 20;
}

.card.tabletop-board-card[data-card-type="Pal"] {
  z-index: 60;
}

.card.tabletop-board-card[data-card-type="Structure"],
.card.tabletop-board-card[data-card-type="Event"] {
  z-index: 10;
}

/* Structures render landscape (like the normal .structure-stack slot) instead of the portrait
   Pal/Gear/Event size — otherwise their wide art gets squeezed into a tiny square. Width is
   derived from the portrait card's own rendered height (aspect-ratio 5/7.8, see the base .card
   rule) times the landscape artwork ratio (454/313), so a Structure is never taller than a
   Pal/Gear/Event on the same board — only wider, just enough to keep the artwork readable. */
.card.tabletop-board-card[data-card-type="Structure"] {
  width: calc(var(--tabletop-card-w) * 7.8 / 5 * 454 / 313) !important;
  aspect-ratio: 454 / 313;
}

/* Mobile boards are much narrower than desktop tables, so the fixed portrait/landscape sizes
   above (92px / ~208px) ate a disproportionate share of the field — shrinking the shared base
   width here scales every board card (Pal/Gear/Event/Structure) down together. */
@media (max-width: 1023px) {
  #scripted-effect-arrow {
    display: none !important;
  }

  /* Mobile field controls follow the card's action order vertically. Keeping the desktop
     max-content row here makes the first/last field columns push Attack or the final Effect
     outside the viewport on narrow phones. */
  .scripted-card-actions,
  .scripted-card-actions .three-pal-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: max-content;
  }

  .scripted-card-actions button {
    width: 100%;
    min-width: 92px;
    min-height: 32px;
    padding: 5px 8px;
  }

  /* Hand actions intentionally rise above the selected card. Give the complete hand panel its
     own foreground layer and let that popover escape the panel, otherwise Chrome on iOS can
     paint Deploy underneath the preceding field/table. */
  body.match-active .hand-panel {
    position: relative;
    z-index: 400;
    overflow: visible;
  }

  /* The card itself taps by 15deg and scales to 75%, but its contextual UI must remain upright
     and at the normal readable size beneath it. These inverse transforms cancel both effects. */
  .card.tapped .scripted-card-actions {
    top: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) rotate(-15deg) scale(1.333333);
    transform-origin: center top;
  }

  .card.tapped {
    rotate: 0deg;
    scale: 1;
    transform: rotate(15deg) scale(0.75);
    transform-origin: center;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot,
  .scripted-organized-field .field-gear-cards > .field-card-slot {
    width: 100%;
    min-width: 0;
    height: 72px;
    min-height: 72px;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot > .card,
  .scripted-organized-field .field-gear-cards > .field-card-slot > .card {
    width: 100%;
  }

  .battlefield .card.real-card:not([data-card-type="Structure"]) {
    aspect-ratio: auto;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot.tapped-card-slot,
  .scripted-organized-field .field-gear-cards > .field-card-slot.tapped-card-slot {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    height: 72px;
    min-height: 72px;
    overflow: visible;
  }

  .scripted-organized-field .field-pal-cards > .field-card-slot.tapped-card-slot > .card.tapped,
  .scripted-organized-field .field-gear-cards > .field-card-slot.tapped-card-slot > .card.tapped {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    aspect-ratio: auto;
    margin: 0;
    translate: none;
    transform: translate(-50%, -50%) rotate(15deg) scale(0.75);
  }

  .scripted-organized-field .field-card-slot.tapped-card-slot > .card.tapped > .compact-card-stats {
    position: relative;
    z-index: 5;
    overflow: visible;
    scale: 1.333333;
    transform-origin: center;
  }

  .scripted-organized-field .field-card-slot.tapped-card-slot > .card.tapped > .pal-damage-badge {
    scale: 1.333333;
    transform-origin: top right;
  }

  .scripted-organized-field .field-pal-cards,
  .scripted-organized-field .field-gear-cards,
  .scripted-organized-field > .field-structure-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    max-width: none;
  }

  .scripted-organized-field > .field-structure-grid > .structure-stack {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 72px;
    min-height: 72px;
  }

  .scripted-organized-field > .field-structure-grid > .structure-stack > .card {
    width: 100%;
  }

  .card.tabletop-board-card {
    --tabletop-card-w: 62px;
  }
}

body.tabletop-targeting-active .card {
  cursor: crosshair;
}

.tabletop-actions-btn {
  position: relative;
  z-index: 8;
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
  pointer-events: auto;
}

/* Battlefield Pal/Gear overlays are pointer-transparent so their stats never block the card's
   tap gesture. Actions is the deliberate exception: it must win hit-testing over the card body. */
.battlefield .card-game-overlay .tabletop-actions-btn {
  pointer-events: auto;
}

.tabletop-popover {
  position: fixed;
  z-index: 200;
  display: grid;
  gap: 6px;
  min-width: 160px;
  max-width: 260px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tabletop-popover[hidden] {
  display: none;
}

.tabletop-popover-title {
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 2px;
}

.tabletop-popover button {
  width: 100%;
  text-align: left;
  min-height: 30px;
}

.tabletop-popover-back {
  opacity: 0.75;
}

.tabletop-counter-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.tabletop-counter-row button {
  width: auto;
  min-height: 26px;
  padding: 0 8px;
}

.tabletop-deck-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tabletop-deck-menu-row button {
  flex: 1;
}

.tabletop-deck-count-input {
  width: 56px;
  min-height: 30px;
  padding: 0 6px;
}

.tabletop-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tabletop-counter button {
  min-height: 22px;
  min-width: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}

/* Tabletop mode's Wood/Fruit steppers need more room than the plain text spans they replace.
   The HP/Wood/Fruit column is already sized to fit its content (grid-template-columns:
   max-content ...), so raising this box's own max-width is enough — the Soul column keeps its
   normal flexible (1fr) share instead of being capped down to a fixed width, which previously
   clipped the Soul row and hid cards once there were more than a couple of them. */
.tabletop-board-tools .life-resource-wrap {
  min-width: 210px;
  max-width: 280px;
}

.soul-mini-card[data-action="tabletop-toggle-soul"] {
  cursor: pointer;
}

.tabletop-soul-zone-hit {
  flex: 1 1 0;
  align-self: stretch;
  min-width: 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tabletop-soul-zone-hit:hover {
  background: rgba(216, 189, 118, 0.08);
}

.tabletop-ramp-btn {
  min-height: 24px;
  padding: 0 10px;
  font-size: 11px;
  margin-left: auto;
}

.tabletop-deramp-btn {
  margin-left: 0;
}

.day-night-indicator.tabletop-clickable {
  cursor: pointer;
}

.day-night-indicator.tabletop-clickable:hover {
  filter: brightness(1.2);
}

.tabletop-peek-hidden strong {
  opacity: 0.6;
}

.tabletop-peek-move-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tabletop-peek-move-row button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}
.player-identity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  vertical-align: middle;
}

.field-player-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.field-title-suffix {
  flex: 0 0 auto;
}

.player-identity-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-tournament-crowns {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}

.player-tournament-crowns svg {
  width: 15px;
  height: 15px;
  fill: #ffd84d;
  filter: drop-shadow(0 1px 1px #6d4b00);
}

.player-winstreak-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid rgba(255, 180, 58, 0.65);
  border-radius: 999px;
  color: #ffe4a3;
  background: rgba(103, 43, 13, 0.72);
  font-size: 0.72rem;
  line-height: 1.2;
}

.player-ranked-mmr {
  flex: 0 0 auto;
  color: #f1d982;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.interrupt-actions button.active {
  border-color: var(--accent);
  color: var(--accent-bright, #ffe59a);
  background: rgba(126, 91, 24, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 216, 77, 0.2);
}

/* Final lobby composition overrides. Keep these last: the legacy social popup rules live earlier
   in the stylesheet and must not turn the routed Friends/Notifications panel into an overlay. */
.site-nav {
  justify-content: center;
  padding-inline: 230px 280px;
}

.site-nav .site-nav-brand {
  left: 18px;
  transform: none;
  justify-items: center;
  text-align: center;
}

/* Keep the Events countdown on its own compact line. This final override must stay after the
   generic navigation flex rules used by the routed lobby and mobile layouts. */
.site-nav a[data-site-page="tournaments"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}
.site-nav a[data-site-page="tournaments"] > span,
#next-automated-tournament-countdown {
  display: block;
  width: 100%;
  text-align: center;
}
#next-automated-tournament-countdown {
  font-size: 10px;
  line-height: 1;
}

.main-menu.play-layout-ready .menu-brand {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  place-self: center;
  align-content: center;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  text-align: center;
}

.main-menu.play-layout-ready .menu-brand .brand-title {
  font-size: clamp(24px, 2.8vw, 36px);
}

.main-menu.play-layout-ready .menu-brand .brand-subtitle {
  font-size: clamp(9px, 1vw, 12px);
}

.main-menu.play-layout-ready .menu-brand .brand-fanmade {
  margin-top: 2px;
  padding: 1px 5px;
  font-size: 7px;
}

.main-menu.play-layout-ready .menu-panel > #menu-status {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  width: min(34vw, 100%);
  text-align: left;
}

.main-menu.play-layout-ready .online-match-section { grid-row: 3; }
.main-menu.play-layout-ready .solo-section { grid-row: 4; }
.main-menu.play-layout-ready .lab-mode-section { grid-row: 5; }
.main-menu.play-layout-ready .spectate-section { grid-row: 6; }
.main-menu.play-layout-ready .menu-panel > .menu-section:has(#tutorial-btn) { grid-row: 7; }
.main-menu.play-layout-ready .play-discord-btn { grid-row: 8; }

.menu-audio-row {
  display: grid !important;
  grid-column: 2;
  grid-row: 3 / 9;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(360px, 1fr);
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 500px;
  padding: 0;
  border: 0;
  background: transparent;
}

#menu-friends-btn,
#menu-notifications-btn {
  justify-content: center;
  justify-self: center;
  width: min(190px, 100%);
  text-align: center;
}

.main-menu.play-layout-ready .deck-select-caption {
  text-align: center;
}

.main-menu.play-layout-ready .match-row select,
.main-menu.play-layout-ready .solo-deck-row select {
  text-align: center;
  text-align-last: center;
}

.main-menu.play-layout-ready .match-row select option,
.main-menu.play-layout-ready .solo-deck-row select option {
  text-align: center;
}

.main-menu.play-layout-ready .play-discord-btn {
  display: none !important;
}

#menu-friends-btn {
  grid-column: 1;
  grid-row: 1;
}

#menu-discord-btn {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  justify-self: center;
}

#menu-notifications-btn {
  grid-column: 3;
  grid-row: 1;
}

#friends-panel {
  position: static !important;
  inset: auto !important;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  max-width: none;
  min-height: 450px;
  height: 100%;
  align-self: stretch;
  max-height: none !important;
  overflow: hidden;
  border: 1px solid rgba(216, 189, 118, 0.35);
  border-radius: 9px;
  background: rgba(18,19,18,.78);
  box-shadow: none !important;
}

#friends-panel .friends-panel-inner {
  height: 100%;
  min-height: 100%;
  max-height: none;
}

.main-menu.play-layout-ready .donate-section {
  grid-column: 1;
  grid-row: 8;
  justify-self: center;
}

@media (max-width: 767px) {
  .site-nav {
    justify-content: center;
    padding-inline: 6px;
  }
  .site-nav .site-nav-brand {
    left: 8px;
    transform: none;
    justify-items: center;
    text-align: center;
  }
  .site-nav-brand .brand-fanmade { display: none; }
  .main-menu.play-layout-ready .menu-brand { grid-row: auto; }
  .main-menu.play-layout-ready .menu-panel > #menu-status {
    width: 100%;
  }
  .main-menu.play-layout-ready .online-match-section,
  .main-menu.play-layout-ready .solo-section,
  .main-menu.play-layout-ready .lab-mode-section,
  .main-menu.play-layout-ready .spectate-section,
  .main-menu.play-layout-ready .menu-panel > .menu-section:has(#tutorial-btn),
  .main-menu.play-layout-ready .play-discord-btn,
  .main-menu.play-layout-ready .menu-audio-row,
  .main-menu.play-layout-ready .donate-section {
    grid-column: 1;
    grid-row: auto;
  }
  .menu-audio-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(380px, 1fr);
    min-height: 440px;
  }
  .main-menu.play-layout-ready .play-discord-btn { display: none !important; }
  #menu-friends-btn {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  #menu-discord-btn {
    display: inline-flex !important;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: center;
    min-width: 0;
    padding-inline: 10px;
    font-size: 10px;
    white-space: nowrap;
  }
  #menu-notifications-btn {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
  }
  #friends-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  #friends-panel { min-height: 380px; }
}

/* Keep the Friends controls usable beside an open chat and order compact actions first. */
.friends-panel-inner.has-chat .friends-main,
.friends-panel-inner.has-chat .friends-chat-panel {
  flex: 1 1 50%;
  width: auto;
  min-width: 0;
}

.friends-add-row,
.friends-chat-input-row,
.friends-invite-flow {
  flex-direction: column;
}

.friends-invite-flow {
  display: flex;
}

.friends-add-row button,
.friends-chat-input-row button,
.friends-invite-actions {
  order: 2;
}

.friends-invite-actions {
  flex-direction: column;
}

.friends-add-row button,
.friends-chat-input-row button,
.friends-invite-actions button {
  width: 100%;
}

.friends-add-row input,
.friends-chat-input-row input,
.friends-invite-flow .friends-deck-select {
  order: 1;
}
/* Persistent first-login website tour. */
.website-tour-offer-dialog {
  width: min(560px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--gold, #c9aa57);
  border-radius: 10px;
  color: #f5ead2;
  background: #151713;
  box-shadow: 0 24px 70px #000d;
}

.website-tour-offer-dialog::backdrop {
  background: #050605e8;
}

.website-tour-offer-panel {
  padding: clamp(24px, 5vw, 42px);
  text-align: center;
}

.website-tour-offer-panel h2 {
  margin: 8px 0 14px;
  color: #f0d47d;
}

.website-tour-offer-panel > p:last-of-type {
  margin: 0 auto;
  max-width: 430px;
  color: #d8cfbd;
  line-height: 1.55;
}

.website-tour-offer-actions,
.website-tour-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.website-tour-offer-actions button {
  min-width: 130px;
}

.website-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.website-tour-dimmer {
  display: none;
}

.website-tour-spotlight {
  position: fixed;
  border: 2px solid #f4d568;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #6f581c, 0 0 26px 8px #e9c85c99;
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.website-tour-card {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(590px, calc(100vw - 28px));
  transform: translateX(-50%);
  padding: 22px 24px;
  border: 1px solid #c9aa57;
  border-radius: 10px;
  background: #171914;
  color: #f5ead2;
  box-shadow: 0 18px 55px #000e;
  pointer-events: auto;
}

.website-tour-step-count {
  margin: 0 0 5px;
  color: #d7b95f;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.website-tour-card h2 {
  margin: 0 0 9px;
  color: #f0d47d;
}

.website-tour-card > p:last-of-type {
  margin: 0;
  color: #ddd3c0;
  line-height: 1.5;
}

.website-tour-controls {
  justify-content: flex-end;
  margin-top: 18px;
}

.website-tour-controls #website-tour-end-btn {
  margin-right: auto;
}

@media (max-width: 600px) {
  .website-tour-offer-actions {
    flex-direction: column-reverse;
  }

  .compact-player-actions .undo-response-controls {
    display: contents;
  }

  .website-tour-offer-actions button {
    width: 100%;
  }

  .website-tour-card {
    padding: 18px;
  }

  .website-tour-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .website-tour-controls #website-tour-end-btn {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.lab-inline-toolbar {
  display: grid;
  gap: 7px;
}

.lab-inline-toolbar strong,
.lab-editing-notice {
  color: #f1d99a;
}

.lab-inline-toolbar small {
  color: var(--muted);
  line-height: 1.35;
}

.lab-editing-active #hand-panel,
.lab-editing-active #right-panel {
  pointer-events: none;
  filter: saturate(.65);
  opacity: .78;
}

.lab-editing-active #table .card[data-permanent="true"] {
  cursor: crosshair;
}

.card.lab-actions-open {
  z-index: 700 !important;
}

.lab-mobile-actions {
  display: none;
}

@media (max-width: 1023px) {
  body.lab-mode-active .desktop-central-day-night {
    display: none;
  }

  body.lab-mode-active .compact-field-prompts {
    padding-left: 104px;
    overflow: visible;
  }

  body.lab-mode-active .lab-mobile-actions {
    position: absolute;
    top: 50%;
    left: 6px;
    z-index: 720;
    display: flex;
    gap: 3px;
    transform: translateY(-50%);
  }

  body.lab-mode-active .lab-mobile-actions button {
    width: auto;
    min-width: 42px;
    min-height: 30px;
    padding: 3px 6px;
    font-size: 9px;
  }

  body.lab-editing-active .board-tools .lab-zone-action {
    display: none;
  }

  body.lab-editing-active .lab-compact-zone-trigger {
    position: relative;
    overflow: visible;
    border-color: var(--accent-strong);
    background: rgba(216, 189, 118, .14);
    box-shadow: inset 0 0 0 1px rgba(216, 189, 118, .38), 0 0 9px rgba(216, 189, 118, .28);
    cursor: pointer;
  }

  body.lab-editing-active .lab-compact-zone-trigger:has(.lab-zone-actions-menu) {
    z-index: 780;
  }

  body.lab-editing-active .battlefield.current .lab-compact-zone-trigger::before {
    position: absolute;
    top: -13px;
    left: 50%;
    color: var(--accent-strong);
    content: "▲";
    font-size: 10px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(216, 189, 118, .8);
    transform: translateX(-50%);
  }

  body.lab-editing-active .battlefield.opponent .lab-compact-zone-trigger::after {
    position: absolute;
    bottom: -13px;
    left: 50%;
    color: var(--accent-strong);
    content: "▼";
    font-size: 10px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(216, 189, 118, .8);
    transform: translateX(-50%);
  }

  body.lab-editing-active .lab-compact-zone-trigger .lab-zone-actions-menu {
    z-index: 800;
  }

  body.lab-editing-active .battlefield.current .lab-compact-zone-trigger .lab-zone-actions-menu {
    top: auto;
    bottom: calc(100% + 14px);
  }

  body.lab-editing-active .battlefield.opponent .lab-compact-zone-trigger .lab-zone-actions-menu {
    top: calc(100% + 14px);
    bottom: auto;
  }
}

.lab-control-panel {
  height: 100%;
  overflow-y: auto;
}

#lab-inline-builder-host {
  min-width: 0;
}

.lab-control-panel .lab-card-adder {
  gap: 7px;
  padding: 8px;
  min-width: 0;
  border-color: rgba(216, 189, 118, .32);
  font-size: 10px;
}

.lab-control-panel .lab-card-adder label {
  gap: 3px;
  min-width: 0;
  font-size: 10px;
}

.lab-control-panel .lab-card-adder input,
.lab-control-panel .lab-card-adder select,
.lab-control-panel .lab-card-adder button {
  min-width: 0;
  min-height: 29px;
  padding: 3px 6px;
  font-size: 10px;
}

.lab-control-panel .lab-card-preview {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 7px;
  min-height: 90px;
  max-height: 150px;
  overflow-y: auto;
}

.lab-control-panel .lab-card-preview img {
  width: 64px;
  max-height: 90px;
}

.lab-control-panel .lab-card-preview p {
  margin: 5px 0 0;
  font-size: 9px;
  line-height: 1.3;
}

.lab-control-panel .lab-card-preview span {
  font-size: 9px;
}

body.lab-mode-active #left-panel {
  grid-template-rows: minmax(0, 1fr);
}

.lab-edit-toggle {
  order: -1;
  border-color: var(--accent);
  color: var(--accent-strong);
}

.lab-card-controls {
  position: absolute;
  right: auto;
  top: 50%;
  bottom: auto;
  left: 50%;
  z-index: 380;
  width: max-content;
  transform: translate(-50%, -50%);
}

.lab-card-actions-toggle {
  width: auto;
  min-height: 24px;
  padding: 2px 6px;
  border-color: var(--accent);
  font-size: 9px;
}

.lab-card-actions-menu {
  position: absolute;
  right: 50%;
  bottom: calc(100% + 4px);
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 100px;
  padding: 6px;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  background: #171817;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .65);
  transform: translateX(50%);
}

.lab-card-actions-menu button {
  min-height: 27px;
  padding: 3px 7px;
  font-size: 9px;
}

.life-resource-wrap,
.soul-row-wrap,
.deck-pile {
  position: relative;
}

.lab-zone-action {
  position: absolute;
  z-index: 390;
}

.lab-zone-action-player {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lab-zone-action-soul,
.lab-zone-action-deck {
  right: 50%;
  bottom: 3px;
  transform: translateX(50%);
}

.lab-zone-action > button {
  min-height: 24px;
  padding: 2px 6px;
  border-color: var(--accent);
  font-size: 9px;
}

.lab-zone-actions-menu {
  position: absolute;
  right: 50%;
  bottom: calc(100% + 4px);
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 92px;
  padding: 6px;
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  background: #171817;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .65);
  transform: translateX(50%);
}

.lab-zone-actions-menu button {
  min-height: 27px;
  padding: 3px 7px;
  font-size: 9px;
}

body.lab-editing-active #table,
body.lab-editing-active #table .battlefield,
body.lab-editing-active #table .board-tools,
body.lab-editing-active #table .pile-row,
body.lab-editing-active #table .board-pile,
body.lab-editing-active #table .life-resource-wrap,
body.lab-editing-active #table .soul-row-wrap,
body.lab-editing-active #table .field-band,
body.lab-editing-active #table .field-zone,
body.lab-editing-active #table .field-card-slot,
body.lab-editing-active #table .card {
  overflow: visible !important;
}

.battlefield.opponent .lab-card-actions-menu,
.battlefield.opponent .lab-zone-actions-menu {
  top: calc(100% + 4px);
  bottom: auto;
}

.lab-toolbox-dialog {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 10px;
  color: var(--text);
  background: #171817;
}

.lab-toolbox-dialog::backdrop {
  background: #0009;
}

.lab-toolbox-dialog > article {
  padding: 18px;
}

.lab-toolbox-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr);
  gap: 16px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

#lab-manual-controls {
  display: none;
}

.lab-card-adder,
.lab-player-controls {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #20211f;
}

.lab-card-adder label {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

.lab-card-adder input,
.lab-card-adder select {
  width: 100%;
  min-width: 0;
}

.lab-card-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  min-height: 170px;
}

.lab-card-preview img {
  width: 120px;
  max-height: 170px;
  object-fit: contain;
}

.lab-card-preview div,
.lab-card-preview p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lab-card-preview span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

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

.lab-control-row,
.lab-field-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lab-control-row > span,
.lab-field-card-row > span {
  flex: 1 1 150px;
}

.lab-field-card-controls {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.lab-field-card-row {
  padding: 7px;
  border: 1px solid #ffffff12;
  border-radius: 5px;
}

.lab-field-card-row small {
  display: block;
  color: var(--muted);
}

@media (max-width: 760px) {
  .lab-toolbox-grid,
  .lab-manual-controls {
    grid-template-columns: 1fr;
  }
}

.coming-soon-btn,
button[disabled].coming-soon-btn {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.coming-soon-label {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #9a9a9a);
  opacity: 0.85;
}

.page-coming-soon-label {
  display: inline-block;
  margin: 0.25em 0 0.75em;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 184, 0, 0.15);
  color: #ffb800;
}

/* --- Naruto TCG board (new ruleset, replaces Palworld board for VS Solo/VS Bot) --- */
.naruto-player-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px;
}
.naruto-player-row .field-zone {
  flex: 1;
  min-width: 0;
}
/* .naruto-player-row .field-zone (above) has higher specificity (2 classes) than a bare
   .naruto-leader-zone (1 class) and would win regardless of source order, silently discarding
   this fixed flex-basis back to flex:1 (grow/shrink like Characters/Support) - qualify with
   .naruto-player-row too so this rule actually wins. */
.naruto-player-row .naruto-leader-zone {
  /* Used to be a fixed, non-shrinking 390px (2x the card's own width) - rotation clearance for a
     full 90deg tapped-leader lie-down. The Leader now only tilts a small 18deg + scales down when
     tapped instead (see .naruto-leader-zone .naruto-card.tapped) and no longer needs that extra
     room, so this shrinks along with Character/Support cards (flex: 0 1, same min/max range as
     those) instead of staying rigid at every desktop width - a fixed-width zone next to zones that
     DO shrink was exactly what broke down first as the viewport narrowed. */
  flex: 0 1 125px;
  min-width: 80px;
  max-width: 125px;
  text-align: center;
}
.naruto-leader-zone .naruto-card {
  /* Leader is half the Field card's size (Field is itself 160/250px min/max, see
     .naruto-characters .zone-cards .naruto-card below). Fills whatever width the zone above
     settles on instead of a separate fixed 125px, so it shrinks in step with it. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
}
/* A full 90deg rotation (the treatment every other tapped card gets) swaps the Leader's own
   width/height outright - there's no amount of container slack that keeps that contained without
   resorting to fragile pre-swapped dimensions per breakpoint (tried and discarded - still spilled
   onto the board on mobile, where the Leader zone is absolutely-positioned with no real slack).
   A much smaller tilt (not a full lie-down) keeps the Leader's own bounding box close enough to
   its untapped size/position that it never leaves its own slot on either desktop or mobile - the
   same idea as PalWorld TCG Sim's own compact-mode tap tilt, just reserved for the Leader only
   instead of every card. Applies to both breakpoints (this rule lives outside any media query),
   so no separate mobile override is needed. */
.naruto-leader-zone .naruto-card.tapped {
  rotate: 18deg;
  scale: 0.88;
}
/* .field-zone (styles.css ~2853, shared with the Palworld board) is `display: grid` with
   auto-fit 100px columns meant for .card elements as *direct* grid children. Naruto's markup
   nests cards one level deeper inside a .zone-cards wrapper, so that wrapper itself became a
   single ~100px grid cell — squeezing every card into one narrow column and forcing them to
   stack vertically past the zone's visible bounds. Take these two zones out of that grid so
   .zone-cards can flex-wrap across the zone's full width like the real board's row layout. */
.naruto-characters.field-zone,
.naruto-supports.field-zone {
  display: block;
  position: relative;
}
/* Zone count badge: a small pill centered over the zone instead of a plain text heading above
   it - matches this sim's existing pill styling (.naruto-stat-pill) rather than raw text. */
/* Normal document flow, placed after .zone-cards in the markup, so it always sits directly below
   the played cards instead of overlaying/potentially covering them. Local player only (see the
   isLocal check at the render call sites) - the opponent's zones don't show this label at all. */
.zone-label {
  margin-top: 3px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(216, 189, 118, 0.4);
  background: rgba(10, 10, 10, 0.75);
  color: var(--muted, #b8b0a0);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* Fit all 5 possible cards on one row, on each side of the leader, without wrapping - shrink
   cards to share the row (flex-basis 0, flex-grow/shrink 1) instead of a fixed width that only
   fit 4 before overflowing to a second line. */
.naruto-characters .zone-cards,
.naruto-supports .zone-cards {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
/* .card (styles.css ~3312) sets width:100% with no flex-basis, so inside the flex zone above it
   was filling the entire row by itself. Let naruto field/support cards shrink together to fit 5
   per row (min 64px so text stays legible-ish); the hand row (below) keeps the larger fixed size
   via .naruto-hand .naruto-card, which isn't part of this nowrap 5-per-row constraint. */
.naruto-card {
  flex: 0 0 100px;
  width: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.68rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
}
/* Palworld-style art-on-top card face: cards with a real art file (.has-art) get their
   padding/text-stack layout swapped for an image box + a dark stats band, matching
   PalWorld TCG Simulator's .card-face-wrap/.card-game-overlay pattern (see renderCard() in
   that project's src/app.js). This only touches the CONTENT inside .naruto-card - the outer
   element keeps the exact same classes/flex-basis/tap-rotation as every other naruto card. */
.naruto-card.has-art {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Anchors .naruto-card-face-fill's absolute inset:0 to this card's own box - the shared base
     .card rule (styles.css ~3319) sets its own aspect-ratio (5/7.8), which doesn't match the
     real card art's 600/838 shape, so the face-wrap's own aspect-ratio used to leave a blank gap
     under the image wherever the two ratios disagreed (e.g. the Leader card). */
  position: relative;
}
/* The Attack/Effect/Recover popover (.naruto-hand-menu) renders as a CHILD of this same
   .naruto-card for Field/Leader cards (see renderNarutoCard's extraContent param), positioned
   via position:absolute to open just outside the card's own box - but overflow:hidden above
   clips any child content that extends past that box, so the popover was toggling open in state
   correctly (see narutoOnFieldClick) while never actually becoming visible. Only override back to
   visible while this card's own menu is the one currently open (state.narutoFieldMenuId), so the
   art still clips normally everywhere else. */
.naruto-card.has-art.naruto-menu-open {
  overflow: visible;
}
/* z-index:9999 on .naruto-hand-menu itself (below) only wins locally, among its own siblings -
   a TAPPED card (.card.tapped sets rotate + opacity, and opacity != 1 alone creates a brand new
   stacking context per spec) traps that z-index inside itself, so the popover could still paint
   BEHIND a later, unrelated sibling in the DOM - the player's Chakra/Name/Summon bar
   (.naruto-board-tools), which sits right below the field row. Give the CARD ITSELF a high
   z-index while its own menu is open so the whole subtree (including the popover) climbs above
   that bar instead of just the popover trying to on its own. */
.naruto-card.naruto-menu-open {
  z-index: 500;
}
.naruto-card-face-wrap {
  position: relative;
  width: 100%;
  /* Matches the real card art's actual proportions (600x838), not an approximated 3:4. Only
     takes effect where nothing overrides it to fill the card's real box instead (see
     .naruto-card-face-fill below). */
  aspect-ratio: 600 / 838;
  overflow: hidden;
  background: #0d0e0d;
}
/* Hand/field/leader cards: fill the card's actual box exactly (whatever height the shared base
   .card rule gives it) and crop the art to match via object-fit: cover, the same technique
   already used for face-down Support's card-back art - instead of sizing to the art's own
   aspect-ratio and risking a leftover blank gap when it doesn't match the card box's ratio. */
.naruto-card-face-fill {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.naruto-card-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  /* iOS Safari shows its own "save/copy image" callout on a long-press regardless of the
     draggable="false" attribute or -webkit-user-drag above - that callout (and Android's image
     long-press menu/drag-ghost) was firing instead of/alongside this app's own custom long-press
     preview handler (bindNarutoMobileHoldPreview in app.js), breaking the preview on mobile. */
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.naruto-card-stats-band {
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
}
/* Hand/field cards with art and no stats band previously forced their face to stretch to
   100% of an undefined-height parent (aspect-ratio: auto), which silently discarded the real
   600x838 aspect-ratio set on .naruto-card-face-wrap above and left the card's visible shape
   unchanged no matter what that ratio was set to. Dropping the override lets the wrap's own
   aspect-ratio size the card - width stays whatever .naruto-card sets, height follows from it. */
.naruto-card.has-art .naruto-card-ability {
  padding: 0 5px 4px;
}
/* Field character/leader stats, overlaid on the art itself (no stats band): Damage sits alone
   top-left, HP+Power sit top-right - all pills share the same dark template. */
.naruto-card-stat-topleft {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.naruto-card-stat-topright {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.naruto-card-stat-bottomright {
  position: absolute;
  bottom: 4px;
  right: 4px;
  pointer-events: none;
}
.naruto-card-stat-bottomleft {
  position: absolute;
  bottom: 4px;
  left: 4px;
  pointer-events: none;
}
/* Field-card stat circles, sized down 25% from their original 24px/0.93rem baseline. */
.naruto-stat-pill {
  min-width: 18px;
  padding: 1.5px 4.5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  background: rgba(10, 10, 10, 0.92);
  color: #f0b64b;
}
.naruto-stat-hp {
  color: #e8edf1;
}
/* Chakra cost pill (own face-down support cards only): same dark template as the other stat
   pills but a distinct color so it doesn't read as another combat stat. */
.naruto-stat-cost {
  color: #80c9e8;
}
/* If the art file fails to load (onerror removes the <img>), fall back to a plain dark box so
   the stats band still reads cleanly instead of sitting over a blank hole. */
.naruto-card.has-art.missing-image .naruto-card-face-wrap {
  background: rgba(255, 255, 255, 0.08);
}
/* Field AND Support cards share the exact same size (80/125px min/max) - Field previously ran
   noticeably bigger (120/188px), which read as oversized/inconsistent next to the Leader (also
   125px) and Support cards sitting right next to it. Rendered as direct .zone-cards flex children
   (the extra .naruto-field-card-wrap div that used to sit between them - for the Attack/Effect
   popover's anchoring - is gone; the popover now renders inside .naruto-card itself via
   renderNarutoCard's extraContent param, anchored by .card's own position:relative), so Field and
   Support share the identical structure and these identical flex mechanics apply to both the same
   way. flex-grow: 0 (not 1) - cards stay at their natural 125px size when there's room, instead of
   stretching to fill whatever's left in the row with just 1-2 Characters in play. flex-shrink: 1
   still engages and brings them down toward the 80px floor once there isn't enough room for
   everyone at 125px each. */
.naruto-characters .zone-cards .naruto-card,
.naruto-supports .zone-cards .naruto-card,
.naruto-characters .zone-cards .naruto-card-slot-empty,
.naruto-supports .zone-cards .naruto-card-slot-empty {
  flex: 0 1 125px;
  width: auto;
  min-width: 80px;
  max-width: 125px;
  padding: 4px 5px;
  font-size: 0.6rem;
}
/* Empty preset "silhouette" for an unfilled Character/Support slot - up to 5 always render (see
   renderNarutoPlayerRow), regardless of how many cards are actually in play, so a near-empty zone
   still reads as "1 of 5 spaces used" instead of its lone card stretching to fill the whole row. */
.naruto-card-slot-empty {
  /* Hidden by default (desktop) - display:none removes it from the flex layout entirely, so it
     no longer competes for row width as a flex item. On desktop, the tapped-pair math (below)
     and the general Character/Support shrink range are both built around the ACTUAL number of
     cards in play; always rendering 5 fixed slots regardless of card count fed extra flex items
     into that same row, so everything (including tapped cards, which need their own rotated
     footprint) got squeezed smaller than the empty slots' own outlines implied - the two stopped
     matching. Mobile re-enables this (see the block at the end of this file) since its fixed
     1/5-width sizing doesn't have that same shrink-competition problem. */
  display: none;
  aspect-ratio: 5 / 7.8;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}
/* PalWorld TCG Sim's own tapped-pair layout (.tapped-two-row-layout): 2 consecutive tapped
   Characters (grouped in narutoGroupFieldForPairing) share ONE stack, a flex column of both
   cards, instead of each individually reserving its own rotated-footprint slot in the row like a
   single tapped card does. Sizing (width/height on both this container and the cards inside) is
   entirely JS-driven now - see narutoAdjustTappedCardSpacing's pair-sizing pass in app.js - since
   getting the pair to both fill the row's full height AND keep each card's real proportions
   needs actual measured pixel values (rotate:90deg only changes what's PAINTED, never a box's own
   layout size), not a fixed CSS percentage that was never quite right at every width. */
.naruto-tapped-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Baseline CSS sizing, same range a normal single card in this row uses - narutoAdjustTapped
     CardSpacing's JS pass RESETS its own inline overrides before re-measuring this element's
     width each time it runs (so a resize doesn't compound on its own last result), so this rule
     has to be able to size the container on its own with no inline style present at all - without
     it, offsetWidth read back ~0 (an unconstrained flex item with no content yet to size itself
     against), collapsing every paired card's computed size to 0 right along with it. */
  flex: 0 1 125px;
  min-width: 80px;
  max-width: 125px;
}
/* Each paired card stays visibly rotated 90deg (rotate:90deg, inherited from
   .card.tapped/.naruto-card.tapped, not overridden here) like any other tapped card. Scoped as
   .naruto-characters .zone-cards .naruto-tapped-pair .naruto-card (4 classes) - a bare
   ".naruto-tapped-pair .naruto-card" (2 classes) LOST to ".naruto-characters .zone-cards
   .naruto-card" above (3 classes, higher specificity) regardless of source order, so paired cards
   were silently rendering at the normal single-card size/full opacity instead - visually
   indistinguishable from an untapped card, even though the tapped game state and DOM class were
   both still correct. */
.naruto-characters .zone-cards .naruto-tapped-pair .naruto-card {
  /* CSS fallback only - narutoAdjustTappedCardSpacing sets an exact inline width/height on every
     card right after render, this just avoids a 0-size flash on the very first paint before that
     JS pass runs. */
  width: 64%;
  min-width: 0;
  max-width: none;
  flex: none;
  margin: 0;
  opacity: 0.85;
}
/* Below 1023px, Palworld's own compact-layout .card.tapped rule (styles.css ~11886, inside
   @media (max-width: 1023px)) swaps the standalone `rotate: 90deg` for a subtle `transform:
   rotate(15deg) scale(0.75)` "peek" tilt instead - meant for its own mobile field, but .card.tapped
   is the same shared base-class chain every .naruto-card carries, so it silently applied to
   paired cards here too and made them look upright/untapped at anything but a wide desktop
   viewport. .naruto-tapped-pair .naruto-card.tapped (3 classes) outranks .card.tapped (2 classes)
   regardless of which side is inside a media query, so this wins at every width and forces the
   real 90deg lie-down rotation a paired card is supposed to show. */
.naruto-tapped-pair .naruto-card.tapped {
  rotate: 90deg;
  scale: 1;
  transform: none;
}
/* Field AND face-up Support cards with art fill edge-to-edge (no padding) so the stat pills can
   sit flush against the image instead of leaving a visible margin around it - this only used to
   cover .naruto-characters, so face-up Support cards (same has-art/hand-art-only markup, see
   renderNarutoPlayerRow's location:"field" support-card branch) kept a padding margin around
   their art that Field cards didn't, making them shrink/scale differently as their row runs out
   of room even though both zones share the same underlying flex-shrink mechanics. */
.naruto-characters .zone-cards .naruto-card.has-art.hand-art-only,
.naruto-supports .zone-cards .naruto-card.has-art.hand-art-only {
  padding: 0;
}
.naruto-card[draggable="true"] {
  cursor: grab;
}
.naruto-card.face-down {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06) 6px, rgba(255,255,255,0.12) 6px, rgba(255,255,255,0.12) 12px);
}
/* Opponent's face-down Support: the real card-back art, with a "SUPPORT" label overlaid at the
   top-center (black text, matching the same treatment as the deck pile's card-back). */
.naruto-card.face-down.naruto-support-back {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #0c0d0c;
}
/* Anchored to the bottom of the slot instead of scaled/cropped to fill it - the card-back art
   keeps its own real proportions (no overflow past the card's own box), leaving empty space at
   the top when the slot's box ratio is taller than the art's. That empty space stays the dark
   .naruto-support-back background, with the white "SUPPORT" label (below) sitting over it. */
.naruto-support-back-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  object-fit: contain;
  display: block;
}
.naruto-support-back-label {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  /* White, not black - the top of the slot is now empty dark background (see
     .naruto-support-back-img above), not card-back art, so black text is no longer legible there. */
  color: #fff;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
/* The owner's own face-down support still shows the grey-line "hidden" grid, but the card's own
   art shows through faintly underneath it so its owner (not the opponent) can recognize it. */
.naruto-card.face-down.own-face-down {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #0c0d0c;
}
.own-face-down-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.own-face-down-grid {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 6px, rgba(255,255,255,0.16) 6px, rgba(255,255,255,0.16) 12px);
}
/* .card.tapped (styles.css ~3566, the real Palworld rule, still in effect since naruto cards
   also carry the base .card class) already rotates 90deg via the standalone CSS `rotate`
   property. `rotate` and `transform` are independent and COMPOSE instead of overriding one
   another - this rule used to also set `transform: rotate(90deg)`, stacking on top of the
   inherited `rotate: 90deg` for a combined 180deg flip instead of a clean quarter turn.
   The horizontal margin needed to keep the now-landscape card from overlapping its neighbors
   depends on the card's own rendered size (which varies with row width/card count), so it's
   computed per-card in JS - see narutoAdjustTappedCardSpacing() in app.js - rather than a single
   guessed value here. */
.naruto-card.tapped {
  opacity: 0.85;
  margin-top: 12px;
  margin-bottom: 12px;
}
.naruto-card.summoning-sick {
  border-color: rgba(255, 184, 0, 0.6);
}
.naruto-card.naruto-targetable {
  outline: 2px solid #ff4d4d;
  box-shadow: 0 0 12px 3px rgba(255, 77, 77, 0.65);
  animation: naruto-targetable-pulse 1.1s ease-in-out infinite;
}
@keyframes naruto-targetable-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 77, 77, 0.5); }
  50% { box-shadow: 0 0 16px 5px rgba(255, 77, 77, 0.85); }
}
/* Cursor-following target arrow, same shape as Palworld's #scripted-effect-arrow. */
#naruto-target-arrow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 900;
}
#naruto-target-arrow path {
  fill: none;
  stroke: #ff4d4d;
  stroke-width: 3;
  marker-end: url(#naruto-target-arrow-head);
}
/* Without stroke:none here, the generic "#naruto-target-arrow path" rule above also matches this
   marker's own inner <path> (any descendant <path>, including ones inside <defs>/<marker>) and
   wraps its small 6x6-viewBox triangle in a 3px stroke, bloating a clean arrowhead into a blob. */
#naruto-target-arrow marker path {
  fill: #ff4d4d;
  stroke: none;
}
.naruto-card.naruto-activatable {
  outline: 2px solid #4dc3ff;
}
.naruto-card.naruto-selected {
  outline: 3px solid #ffd24d;
  box-shadow: 0 0 0 2px rgba(255, 210, 77, 0.4);
}
/* Declared-attack combat glow, matching PalWorld TCG Sim's own .card.combat-attacker/
   .combat-defender (styles.css ~3545) - gold on the attacking card/Leader, cyan on the card/
   Leader being attacked, both pulsing for the whole chain window. */
.naruto-card.naruto-combat-attacker {
  border-color: #ffe08a;
  box-shadow:
    0 0 0 2px rgba(255, 224, 138, 0.62),
    0 0 22px rgba(255, 224, 138, 0.72),
    inset 0 0 0 1px rgba(255, 244, 204, 0.32);
  animation: naruto-combat-pulse-gold 720ms ease-in-out infinite alternate;
}
.naruto-card.naruto-combat-defender {
  border-color: #c9f6ff;
  box-shadow:
    0 0 0 3px rgba(120, 232, 255, 0.92),
    0 0 10px rgba(255, 255, 255, 0.72),
    0 0 32px rgba(72, 219, 255, 0.92),
    inset 0 0 0 1px rgba(236, 252, 255, 0.52);
  animation: naruto-combat-pulse-blue 720ms ease-in-out infinite alternate;
}
@keyframes naruto-combat-pulse-gold {
  from { box-shadow: 0 0 0 2px rgba(255, 224, 138, 0.5), 0 0 14px rgba(255, 224, 138, 0.55); }
  to { box-shadow: 0 0 0 2px rgba(255, 224, 138, 0.78), 0 0 26px rgba(255, 224, 138, 0.88); }
}
@keyframes naruto-combat-pulse-blue {
  from { box-shadow: 0 0 0 3px rgba(120, 232, 255, 0.7), 0 0 18px rgba(72, 219, 255, 0.7); }
  to { box-shadow: 0 0 0 3px rgba(120, 232, 255, 1), 0 0 34px rgba(72, 219, 255, 1); }
}
/* Static attacker -> target arrow for a DECLARED attack (chain window open) - distinct from the
   cursor-following #naruto-target-arrow above, which only exists before a target is picked.
   position: absolute + page-space coordinates (set in renderNarutoCombatArrow), matching PalWorld
   TCG Sim's own #scripted-combat-arrow - a viewport-fixed line would visibly detach from the
   attacker/target cards the instant the page scrolled, since getBoundingClientRect() is always
   viewport-relative regardless of how the arrow itself is positioned. */
#naruto-combat-arrow {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 899;
  filter: drop-shadow(0 0 5px rgba(255, 183, 63, 0.7));
}
#naruto-combat-arrow path {
  fill: none;
  stroke: #ffbd4a;
  stroke-width: 5;
  stroke-linecap: round;
  marker-end: url(#naruto-combat-arrow-head);
}
#naruto-combat-arrow marker path {
  fill: #ffbd4a;
  stroke: none;
}
.naruto-combat-label {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 901;
  background: rgba(10, 10, 10, 0.8);
  border: 1px solid rgba(255, 189, 74, 0.5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}
/* .table (styles.css ~2721, body.match-active .table) is a 2-row CSS grid built for the Palworld
   board's exactly-2-children layout (opponent battlefield + player battlefield), with both rows
   forced to an equal 1fr share. The naruto board puts 4-5 children in #table (opponent chakra
   bar, opponent field row, local field row, local chakra bar, optional chain banner) - the grid
   silently assigned its two 1fr row tracks to the first two children (bar + opponent row),
   ballooning them with unused leftover height while the rest auto-sized normally below. Switch
   to a plain flex column, sized by content, whenever #table holds naruto content. */
.table:has(.naruto-board-tools) {
  display: flex !important;
  flex-direction: column !important;
  align-content: normal !important;
}
/* The two field rows (opponent + local) are grouped and centered as a unit in whatever vertical
   space is left between the opponent's chakra bar (top) and the local player's chakra bar
   (bottom), instead of hugging the top with a large gap below (the bars stay their own natural
   height; only this middle group grows/centers). */
.naruto-field-rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 0;
}
.naruto-card-name {
  font-weight: 700;
}
.naruto-card-stats {
  opacity: 0.85;
}
.naruto-card-ability {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 2px;
}
/* Reserves the SAME box a single real card in this zone would take (same flex/aspect-ratio range
   as .naruto-card in .naruto-characters/.naruto-supports .zone-cards) - with zero cards this used
   to just hug its own "—" text, collapsing the whole zone/row down to a sliver, then jumping to a
   full card's height the instant the first Character/Support was actually played - a jarring
   resize right as the board state changed. Reserving the height up front avoids that jump. */
.naruto-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 125px;
  min-width: 80px;
  max-width: 125px;
  aspect-ratio: 5 / 7.8;
  opacity: 0.4;
  font-size: 0.75rem;
}
/* Each player gets their own Chakra+Summon+pile bar directly above/below their own field row
   (opponent bar above the opponent's field, local bar below the local player's field) - mirrors
   the Palworld board's real .board-tools pattern: a nameplate/life box and the pile-row are their
   OWN elements flanking a narrow resource band, not all crammed inside one bordered box. */
.naruto-board-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 4px 8px;
  min-height: 0;
}
/* The band itself holds ONLY the Chakra/Summon pips - hug their natural height/width instead of
   stretching to fill the row (that's what forced the nameplate/controls to be squeezed inside). */
.naruto-chakra-only {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Restored to the taller padding the local player's bar had before the nameplate/controls were
     split out to the sides - that earlier version hugged ~82px total, this matches it again. */
  padding: 10px 10px;
  height: auto;
  overflow: visible;
  /* Pip height = --soul-card-w x 1.5 (.soul-mini-card's own 2/3 aspect-ratio, above) - the
     default clamp(28px, 5vh, 52px) doesn't line up with .board-pile's fixed 46px width/5:7.8
     aspect (~71.8px tall), so Chakra/Summon pips sat at a different height than the Deck/Trash/
     Exclusion piles next to them. 48px here yields ~72px, matching .board-pile's height so every
     row element (Field/Leader/Support cards and these piles) sits on the same line. */
  --soul-card-w: 48px;
}
/* .soul-row (styles.css ~2245) redeclares --soul-card-w on itself, which shadows whatever value
   it would otherwise inherit from .naruto-chakra-only above regardless of that rule's own
   specificity - custom properties resolve per-element like any other property, so the closest
   matching rule for .soul-row itself wins. Re-declare it here, scoped under .naruto-chakra-only,
   so it actually reaches the pips instead of silently falling back to the default clamp(). */
.naruto-chakra-only .soul-row {
  --soul-card-w: 48px;
}
/* Both bars (opponent's and local player's) render identical markup/CSS, but confirm they line
   up: force the same min-height on both regardless of any pip-size clamp() rounding difference. */
.naruto-board-tools .naruto-chakra-only {
  min-height: 76px;
}
/* Fills the previously-empty middle space of each chakra bar: the opponent's bar shows their
   hand size (fanned face-down cards, Palworld-style), the local player's bar shows the
   priority-passing banner during a chain window (was a nonsensical position:fixed overlay at
   the top of the whole screen before). */
.naruto-bar-middle {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* Centers the priority banner (its natural content width) in the available space; the opponent
     hand fan below overrides this by stretching itself to fill the full width instead. */
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.naruto-opponent-hand {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 3px 6px;
}
.naruto-opponent-hand .opponent-hand-row {
  min-height: 0;
}
.naruto-opponent-hand-card {
  background: #0c0d0c url("assets/cards/card-back.webp?v=3") center / contain no-repeat;
}
/* Setup choices (Go First/Second, Keep hand/Mulligan) and multi-select Confirm/Cancel, rendered
   compactly inside .naruto-action-band rather than as a full-width control-bottom row. */
.naruto-action-band .naruto-mulligan-actions {
  width: auto;
}
.naruto-mulligan-actions button {
  flex: 1 1 0;
  min-height: 30px;
  padding: 3px 10px;
  border-color: rgba(216, 189, 118, 0.54);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}
/* Fixed action band, shown in the local player's chakra bar (mirroring where the opponent's hand
   fan sits in theirs): setup choices, the priority-pass prompt, target-selection hints, and
   multi-select confirm/cancel all render here. */
.naruto-action-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2a1a10 0%, #1a0d08 100%);
  border: 1px solid var(--danger, #d6614a);
  max-width: 100%;
}
.naruto-action-band .quick-banner-label {
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Tap-leader button + Deck/Trash/Exclusion pile counts, grouped on the opposite side from the
   nameplate so the chakra band in the middle stays narrow. */
.naruto-side-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Mobile-only (see the @media max-width:767px block below, which turns this back to flex) - the
   desktop board already shows this same information via the Chakra/Summon pip stack and the
   Deck/Trash/Exclusion pile icons, so this stays hidden there. */
.naruto-mobile-status-bar {
  display: none;
}
/* Compact Pass button, shown next to the local player's own deck pile only while they hold
   priority in an active chain - replaces the old full-width button in the action band. */
.naruto-chain-pass-btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: rgba(216, 189, 118, 0.14);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.naruto-chain-pass-btn:hover {
  background: rgba(216, 189, 118, 0.26);
}
/* Chain window display: replaces the old "Priority: X" text in the action band (the local
   player's chakra bar middle slot, .naruto-bar-middle - a fixed ~76px-tall row with
   overflow:hidden), styled like the hover-preview-panel on the right (same border/background
   treatment) with a "CHAIN" title. Single row so it fits that height: title first, then a mini
   card for each queued activation in play order, connected by left-to-right arrows. */
.naruto-chain-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  max-width: 100%;
  height: 100%;
  border: 1px solid rgba(216, 189, 118, 0.32);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.42);
  overflow: hidden;
}
.naruto-chain-display-title {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.naruto-chain-display-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  overflow: hidden;
}
.naruto-chain-mini-wrap {
  flex: 0 0 auto;
  width: 40px;
}
.naruto-chain-mini-wrap .naruto-card.naruto-chain-mini-card {
  width: 40px;
  aspect-ratio: 5 / 7;
}
.naruto-chain-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  opacity: 0.7;
  font-weight: 700;
  font-size: 0.8rem;
}
/* Stacks the tap-leader button directly above the Chakra pip row, instead of off to the side
   next to the deck/trash/exclusion piles. */
.naruto-chakra-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* Reuse the Palworld Soul row's pip layout/sizing (.soul-mini-card) for Chakra/Summon pips, but
   with Naruto's own chakra.webp/summon.webp art instead of Palworld's soul.webp. */
.naruto-chakra-pip {
  background: #111714 url("assets/cards/chakra.webp?v=3") center / contain no-repeat;
}
.naruto-chakra-pip.locked {
  opacity: 0.25;
  pointer-events: none;
}
/* Spent Chakra flips face-down (card-back art, no rotation) instead of tapping/rotating like a
   normal card - overrides the generic .soul-mini-card.tapped rotate+dim rule. */
.naruto-chakra-pip.tapped {
  transform: none;
  opacity: 1;
  background: #0c0d0c url("assets/cards/card-back.webp?v=3") center / contain no-repeat;
}
/* The Summon token is its own card in the Chakra row (not a checkmark/X pip): shows summon.webp
   always, and just rotates/dims once used this turn (the shared .soul-mini-card.tapped rule) -
   unlike Chakra, it never flips to a card-back. */
.naruto-summon-token {
  /* .soul-mini-card gives every pip a negative right-margin so they overlap in a fan - push past
     that here so the Summon token reads as visually separate from the Chakra pips, not part of
     the same overlapping stack. */
  margin-left: 18px !important;
  background: #0c0d0c url("assets/cards/summon.webp?v=3") center / contain no-repeat;
}
/* The last Chakra pip's own negative right-margin (from .soul-mini-card's fan-overlap rule)
   pulled the Summon token most of the way back in - zero it out so the token's margin-left above
   actually reads as a real gap. */
.naruto-chakra-pip:nth-last-child(2) {
  margin-right: 0 !important;
}
.naruto-summon-label {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  font-size: 7px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.naruto-pile-row {
  display: flex;
  gap: 6px;
}
/* Trash/Exclusion piles are <button> elements (clickable to view their contents) - strip the
   default button chrome so they still look like plain .board-pile boxes. */
.naruto-trash-pile,
.naruto-exclusion-pile {
  font: inherit;
  cursor: pointer;
}
.naruto-life {
  font-weight: 700;
  margin-top: 4px;
}
.naruto-chain-panel {
  padding: 8px;
  border: 1px solid rgba(255, 77, 77, 0.5);
  border-radius: 8px;
}
.naruto-hint {
  padding: 6px 8px;
  border: 1px solid rgba(216, 189, 118, 0.4);
  border-radius: 6px;
  font-size: 0.75rem;
}
.naruto-action-band .naruto-hint {
  padding: 0;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.naruto-pile-row {
  justify-content: flex-end;
}
/* Own player name, shown directly above the own hand row instead of a name+HP plate on the field
   (the Leader card already shows current HP as its own stat pill). Hand-panel already has empty
   space below the cards, so this just nudges the hand down slightly rather than shrinking it. */
.naruto-hand-name {
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-bottom: 4px;
}
/* Hand cards render at the same fixed size as the rest of this app's hand-grid (.hand-grid >
   .card is 140px; see styles.css ~4989) instead of the previous unconstrained flex sizing that
   let .card's width:100% blow the cards up to fill the whole hand panel. */
.naruto-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.naruto-hand .naruto-card {
  flex: 0 1 140px;
  width: 140px;
  max-width: 140px;
}
/* Hand cards always render the Power/Damage/HP pill overlay now (renderNarutoCard's extraContent
   includes fieldStatOverlay for location:"hand" too), but only mobile actually shows it - at
   desktop hand-card size the art alone already reads fine, matching a real hand of face-up cards
   where you'd glance at the art, not a stat readout (this is what location:"hand" originally, and
   still, is meant to look like on desktop). */
.naruto-hand .naruto-card-stat-topleft,
.naruto-hand .naruto-card-stat-topright,
.naruto-hand .naruto-card-stat-bottomleft {
  display: none;
}
.naruto-hand-card-wrap {
  position: relative;
}
/* Beyond 7 cards, overlap them instead of wrapping to a second row - mirrors Palworld's real
   .hand-grid.crowded clamp-based overlap (styles.css ~5008), just targeting the wrapper div
   (.naruto-hand-card-wrap, needed so the Summon/Support popover has a positioning anchor)
   instead of the .card itself. */
.naruto-hand.crowded {
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  overflow: visible;
  padding-inline: 4px;
  max-width: 100%;
}
.naruto-hand.crowded > .naruto-hand-card-wrap {
  flex: 0 0 140px;
  margin-right: clamp(
    -88px,
    calc((100% - 18px - (140px * var(--naruto-hand-count))) / var(--naruto-hand-gaps)),
    -2px
  );
  transition: margin 140ms ease;
}
.naruto-hand.crowded > .naruto-hand-card-wrap:last-child {
  margin-right: 0;
}
.naruto-hand.crowded > .naruto-hand-card-wrap:hover {
  z-index: 30;
}
/* Lightweight absolutely-positioned popover (not a full <dialog>) offering the two hand-card
   actions - Summon to Field / Place as Support - reusing this app's existing button styling. */
.naruto-hand-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  margin-bottom: 6px;
  border: 1px solid rgba(216, 189, 118, 0.5);
  border-radius: 8px;
  background: #1b1b18;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
/* A counter-rotate here (rotate:-90deg, tried previously) only fixes the popover's own CONTENT
   orientation, not its screen POSITION - the popover's own top/left anchoring is resolved in the
   card's PRE-rotation coordinate space, then the parent's rotate carries that already-resolved
   position around as part of its rigid transformed subtree before the child's own counter-rotate
   (which only spins around the CHILD's own center) ever applies - net result, the menu still
   opened at a diagonal offset from the card, not straight below it, even with its buttons
   individually upright. See narutoRelocateTappedFieldMenu (app.js) instead: for a TAPPED card it
   physically moves the already-rendered popover element out of the rotated card's subtree
   entirely (appended to document.body) and repositions it using the card's own actual
   getBoundingClientRect() - which correctly reflects the card's real POST-rotation visual
   footprint - avoiding the nested-transform math above altogether. Untapped cards' popovers are
   unaffected and keep rendering in place as before. */
.naruto-relocated-field-menu {
  position: fixed;
  z-index: 9999;
}
.naruto-hand-menu button {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(216, 189, 118, 0.5);
  border-radius: 6px;
  background: #2c2c29;
  color: var(--text, #e8e3d8);
  font-size: 0.75rem;
  cursor: pointer;
}
.naruto-hand-menu button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Field character/leader Attack/Effect popover: renders as a direct child of .naruto-card itself
   (see renderNarutoCard's extraContent param) rather than a sibling in a separate wrapper div, so
   .naruto-card can be a plain direct .zone-cards flex child exactly like Support cards. .card (the
   shared base class every .naruto-card carries) is already position:relative, so the popover's
   position:absolute anchors to the card correctly with no extra wrapper needed. Opens downward
   (below the card) instead of upward like the hand-card popover, since field/leader cards sit in
   the middle of the board rather than at the bottom edge. */
.naruto-characters .naruto-hand-menu,
.naruto-leader-zone .naruto-hand-menu {
  top: 100%;
  bottom: auto;
  margin-bottom: 0;
  margin-top: 6px;
}
/* Text-face hover preview (naruto cards have no card art) rendered inside the shared
   .hover-preview-card-frame so positioning/sizing matches the Palworld board's preview panel. */
/* The right panel becomes a flex column so the hover-preview panel can grow to fill essentially
   all available vertical space, leaving only enough room for the End Turn button / chain panel
   at the bottom (point 8). Overrides the shared .controls grid layout for the naruto board only. */
.naruto-controls {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 10px;
}
.naruto-control-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.naruto-control-info .hover-preview-panel {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.naruto-control-bottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.naruto-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Real-art hover preview: same idea as Palworld's .hover-preview-card-frame > img +
   .preview-effect-text (styles.css ~4446-4497 in PalWorld TCG Simulator) - the card image
   fills the frame and the name/type/stats/ability text sits in a scrim overlay anchored to
   the bottom of the SAME frame, instead of a separate text-only box below the art. */
.naruto-preview-frame-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(216, 189, 118, 0.68);
  border-radius: 10px;
  background: #111110;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.naruto-hover-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.naruto-preview-frame-art.missing-image {
  background: rgba(255, 255, 255, 0.06);
}
.naruto-hover-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(10px, 4cqw, 20px);
  background: #08090a;
  color: #e8e3d8;
  font-size: clamp(0.85rem, 4.5cqw, 1.1rem);
}
.naruto-hover-card-overlay .naruto-card-name {
  font-size: clamp(1rem, 6cqw, 1.35rem);
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1.2;
}
.naruto-hover-card-overlay .naruto-hover-card-type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.65rem, 3cqw, 0.8rem);
  color: var(--muted);
  margin-bottom: 8px;
}
.naruto-hover-card-overlay .naruto-card-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.naruto-hover-card-overlay .naruto-card-ability {
  font-size: clamp(0.75rem, 3.5cqw, 0.95rem);
  opacity: 0.92;
  line-height: 1.35;
}
/* Printed sub-types (Water/Toad/Mount Myoboku, The Taka, Team 7, ...) - a separate list from the
   card TYPE (Character/Support/Leader) already shown above, so it gets its own line right under
   the ability text rather than being folded into it. */
.naruto-hover-card-types {
  margin-top: 8px;
  font-size: clamp(0.65rem, 3cqw, 0.8rem);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.naruto-hover-card .naruto-hover-card-types {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 189, 118, 0.32);
}
/* Fill the shared .hover-preview-card-frame at the same scale as the real Palworld card-art
   preview (which sizes to min(100cqh, 100cqw*aspect)) instead of a small fixed-width box, so the
   naruto text-face preview reads at the same visual size as the original panel. */
.naruto-hover-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 6cqw, 28px);
  border: 2px solid rgba(216, 189, 118, 0.68);
  border-radius: 10px;
  background: #111110;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  font-size: clamp(0.95rem, 6cqw, 1.4rem);
  overflow: auto;
}
.naruto-hover-card.face-down {
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.75;
}
.naruto-hover-card .naruto-card-name {
  font-size: clamp(1.15rem, 8cqw, 1.7rem);
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.2;
}
.naruto-hover-card-type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.7rem, 3.5cqw, 0.95rem);
  color: var(--muted);
  margin-bottom: 14px;
}
.naruto-hover-card .naruto-card-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: clamp(0.9rem, 5cqw, 1.2rem);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(216, 189, 118, 0.32);
}
.naruto-hover-card .naruto-card-ability {
  font-size: clamp(0.8rem, 4cqw, 1.05rem);
  opacity: 0.9;
  line-height: 1.4;
}

a.disabled-nav-link,
a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile board layout - restructures each player's row from the desktop's side-by-side
   Characters | Leader | Support into something close to PalWorld TCG Sim's own mobile board:
   two stacked rows of up to 5 (Characters on top, Support below) sharing the row's available
   height, with the Leader pulled out to its own absolutely-positioned slot just inside the near
   edge (right for the local player, left for the opponent, mirroring where each side's own
   board naturally reads from) instead of eating into the middle of that space. Chakra/Summon
   pips and the separate Deck/Trash/Exclusion pile icons are both replaced by one compact text
   status row (name, Chakra x/y, Summon ready/spent, Hand/Deck counts, tappable Trash/Exclusion).
   The hover-preview panel (a whole side-panel column, unaffordable on a phone width) is replaced
   by the same "keep pressed to preview" interaction PalWorld TCG Sim uses on mobile (see
   bindNarutoMobileHoldPreview) - setup/priority/pass messages are untouched, they already render
   in the action band above/below the field rows regardless of viewport width.
   Deliberately placed at the very end of the file: every selector here (.naruto-chakra-stack,
   .naruto-pile-row, .naruto-mobile-status-bar, .naruto-card sizing) already has an unconditional
   same-specificity rule defined earlier - CSS resolves equal-specificity conflicts by source
   order alone regardless of which side is inside a media query, so being anywhere earlier than
   the LAST matching rule for each of these selectors would just silently lose again.
   Breakpoint matches the shared .layout grid's own compact-mode switch (styles.css ~7835,
   "@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }", PalWorld TCG Sim's
   pattern for when chat/table/controls stop sitting side by side) rather than an independent
   767px - between 767 and 980px the desktop Naruto board (390px non-shrinking Leader zone + up to
   5 Character/Support cards each) no longer had the wide 3-column layout's width to work with
   once .layout itself already stacked to 1 column, but this block's own compact/mobile treatment
   hadn't kicked in yet - a gap covered by neither breakpoint, where the board simply overflowed/
   squeezed. Keeping both switches in sync closes that gap. */
@media (max-width: 980px) {
  body.match-active #hover-preview-panel {
    display: none;
  }
  /* A little breathing room between the opponent's field and the local player's own field - at
     the desktop 8px gap (.naruto-field-rows, styles.css ~13614) the two rows read as touching at
     mobile's much smaller scale (opponent's Characters row sits directly above the local player's
     own Leader/Characters row with no visible separation). */
  .naruto-field-rows {
    gap: 16px;
    /* .naruto-field-rows centers itself in whatever vertical space #table has left over between
       the opponent's status bar (top) and the local player's own (bottom) - flex-start instead
       keeps that same centering behavior for the gap BETWEEN the two field rows (still governed
       by the gap above), but stops padding out extra blank space above the opponent's bar itself
       whenever the field rows don't need the FULL leftover height to begin with. */
    justify-content: flex-start;
  }
  /* Desktop's own Surrender button (top of the right control panel) is replaced by
     #mobile-surrender-btn next to Back to menu in the topbar - see index.html/app.js. Keeping
     both would put two Surrender entry points on screen, one of them sitting awkwardly right
     above End Turn. */
  .naruto-controls .surrender-control {
    display: none;
  }
  .naruto-player-row {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    /* Room on the left for the Leader slot (94px wide + a real gap, not just 2px) - both Leaders
       sit on the left now, freeing the entire right side of the row for Character/Support cards
       divided evenly into 5 columns instead of splitting that space between two Leader slots. */
    padding: 4px 4px 4px 116px;
    /* Height budget the 40%-of-available-height card sizing below resolves against - percentage
       heights need a definite ancestor, and nothing further up this flex chain (#table's own
       column layout, sized purely by content) provides one on its own. */
    height: 24vh;
  }
  .naruto-characters.field-zone,
  .naruto-supports.field-zone {
    /* Splits the row's available height between the two zones (instead of each hugging its own
       content height), leaving headroom for a tapped card's rotated footprint within its own
       zone rather than only at the row's own outer edge. */
    flex: 1 1 0;
    min-height: 0;
  }
  .naruto-characters .zone-cards,
  .naruto-supports .zone-cards {
    height: 100%;
    align-items: center;
  }
  /* Mirrors the opponent's field (Support on top, Characters below) so the two boards read as a
     reflection meeting in the middle, same as PalWorld TCG Sim's own front-line-to-front-line
     layout - the local player already reads Characters-then-Support top-to-bottom by DOM order,
     this just visually reverses that for the opponent's row without touching the markup itself. */
  .naruto-player-row.opponent .naruto-characters {
    order: 2;
  }
  .naruto-player-row.opponent .naruto-supports {
    order: 1;
  }
  /* Both Leaders on the left now (was right for the local player, mirroring the opponent's own
     left placement) - frees the entire right side of the row for Character/Support cards. */
  .naruto-player-row .naruto-leader-zone {
    position: absolute;
    top: 50%;
    left: 6px;
    right: auto;
    translate: 0 -50%;
    flex: none;
    width: 94px;
  }
  /* 75% of the desktop Leader size (125px x 0.75 =~ 94px) - detached from the true edge by a
     small gap rather than flush against it. */
  .naruto-player-row .naruto-leader-zone .naruto-card {
    width: 94px;
  }
  .naruto-board-tools {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Superseded by .naruto-mobile-status-bar below - the pip stack and the separate deck/trash/
     exclusion pile icons together cost more vertical space than the phone-width board can spare
     (a single "spent" Chakra card-back alone rivals a Field card's own height at these sizes), so
     both are replaced entirely by one compact text row instead of just shrinking them further. */
  .naruto-chakra-stack,
  .naruto-pile-row {
    display: none;
  }
  /* Opponent's hand is already counted in their own status bar ("Hand N") - the fanned face-down
     card strip above it is redundant on top of that, and costs vertical space a phone-width board
     can't spare. */
  .naruto-opponent-hand {
    display: none;
  }
  .naruto-mobile-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 4px 6px;
    font-size: 0.68rem;
  }
  /* Both the opponent's and the local player's status info now render as one single centered
     line each (renderNarutoMobileStatusBar) - .naruto-board-tools wraps (see above) so the
     100%-wide status bar forces naruto-bar-middle (prompts/chain display, local player only) onto
     its own line right underneath instead of squeezing beside it. */
  .naruto-mobile-status-bar {
    width: 100%;
    justify-content: center;
  }
  .naruto-mobile-status-name {
    font-weight: 700;
    color: var(--accent, #d8bd76);
  }
  .naruto-mobile-status-item {
    white-space: nowrap;
  }
  button.naruto-mobile-status-btn {
    padding: 2px 6px;
    border: 1px solid rgba(216, 189, 118, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  /* Field/Support cards fill the ENTIRE height of their own zone (not just a fraction of it) and
     divide the zone's full width evenly across however many cards are present (flex: 1 1 0, up to
     5) - like PalWorld TCG Sim's own mobile field, where each of up to 5 columns is an even share
     of the row's width regardless of the card's own natural aspect ratio. Since width and height
     are now both dictated by the layout instead of the card's aspect-ratio, the art has to crop
     (object-fit: cover, already set - see object-position below) instead of being distorted. */
  /* Re-enable the empty preset slots for this breakpoint only - hidden (display:none) by default
     on desktop, where they were fighting tapped cards for shrink space in the row (see the base
     .naruto-card-slot-empty rule). Mobile's fixed 1/5-width sizing below doesn't have that
     problem, so the "always show 5 slots" treatment stays here. */
  .naruto-characters .zone-cards .naruto-card-slot-empty,
  .naruto-supports .zone-cards .naruto-card-slot-empty {
    display: block;
  }
  .naruto-characters .zone-cards .naruto-card,
  .naruto-supports .zone-cards .naruto-card,
  .naruto-characters .zone-cards .naruto-card-slot-empty,
  .naruto-supports .zone-cards .naruto-card-slot-empty,
  .naruto-tapped-pair {
    /* Fixed 1/5-of-row basis (not flex:1, which divided the row evenly across however many cards
       were actually present - a single Character would stretch to fill the entire zone). Up to 5
       always fit; empty slots (.naruto-card-slot-empty) make up the rest. */
    flex: 0 1 20%;
    height: 100%;
    width: auto;
    min-width: 0;
    max-width: 20%;
  }
  /* Field/Support card art: cropped to the TOP of the image instead of centered, so the Power/
     Damage/HP pills (which sit at the top of the overlay) stay legible at this size - the rest of
     the card is only really readable via the long-press preview anyway (see
     bindNarutoMobileHoldPreview) once cards are this small. */
  .naruto-characters .naruto-card-face,
  .naruto-supports .naruto-card-face,
  .naruto-hand .naruto-card-face {
    object-position: top;
  }
  /* Field/Support zone labels ("Field"/"Support") are redundant on mobile - which row is which is
     already obvious from the board's own top-to-bottom arrangement (and mirrored for the
     opponent), unlike desktop where the zones sit side by side and could use the label. */
  .zone-label {
    display: none;
  }
  /* The opponent's face-down Support cards show a plain "SUPPORT" text label (own face-down cards
     get real stat pills instead, see renderNarutoCard) - at mobile's tiny card size that label
     just crowds an already-small card with redundant text; which row is which is already obvious
     from the board's fixed layout. */
  .naruto-support-back-label {
    display: none;
  }
  /* Hand: exactly 5 even-width columns (flex: 1 1 0, same idea as Field/Support above) instead of
     a fixed 140px card that wraps to a second row past 4-5 cards. Height cut to about half a
     properly-proportioned card at that width (the "cut in half" look) - object-position: top
     above keeps the stat pills + the top of the artwork in that visible half, the same crop point
     Field/Support cards use once they're this small. */
  .naruto-hand {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 0 4px;
  }
  /* .naruto-hand's direct flex children are .naruto-hand-card-wrap divs, not .naruto-card itself
     (the card renders nested one level inside, so the popover has a positioning anchor) - flex
     sizing has to live on the wrap to actually control row width; .naruto-card below just fills
     whatever box the wrap gives it. Fixed 1/5-of-row basis (not flex:1, which stretched a single
     card to fill the whole hand row) matches the same "always reserve its own fifth" treatment
     Field/Support slots use now, so a near-empty hand looks the same width-per-card as a full one.
     Still shrinks (flex-shrink:1) past 5 cards so a fuller hand doesn't overflow the row. */
  .naruto-hand-card-wrap {
    flex: 0 1 20%;
    min-width: 0;
  }
  .naruto-hand .naruto-card {
    height: 9vh;
    width: 100%;
    max-width: none;
  }
  .naruto-hand .naruto-card-stat-topleft,
  .naruto-hand .naruto-card-stat-topright,
  .naruto-hand .naruto-card-stat-bottomleft {
    display: flex;
  }
  /* .controls' shared 3-row grid (auto / minmax(0,1fr) / auto - styles.css ~4362) reserves the
     WHOLE middle 1fr track for .control-info even though its only content, the hover-preview
     panel, is already display:none on mobile - an empty grid row still eats all the leftover
     vertical space, pushing End Turn down and leaving a big blank gap above it. .control-top (the
     desktop Surrender button, hidden here too) has the same problem on a smaller scale. Collapse
     .naruto-controls back to a single auto row and hide both empty tracks outright instead of
     just their content. */
  .naruto-controls {
    grid-template-rows: auto;
  }
  .naruto-controls .control-top,
  .naruto-controls .control-info {
    display: none;
  }
  .naruto-controls .end-turn-control {
    min-height: 32px;
    font-size: 12px;
    padding: 4px;
  }
}