/* --- Self-hosted fonts (Chart Table): Inter body + Fraunces display --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Horizontal Japanese uses local system fonts; no extra font download. */
html:lang(ja) {
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
  --font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif;
  line-break: strict;
  word-break: normal;
}

/* Simplified Chinese uses system CJK fonts and horizontal writing too. */
html:lang(zh-Hans) {
  --font-display: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  line-break: strict;
  word-break: normal;
}

/* Short mat labels must not stack CJK characters on narrow screens. */
html:lang(ja) .zone-label,
html:lang(ja) .slot-label,
html:lang(zh-Hans) .zone-label,
html:lang(zh-Hans) .slot-label {
  white-space: nowrap;
  letter-spacing: normal;
}

:root {
  /* Chart Table palette (mockup Home A — pergamino / madera / latón) */
  --parchment-100: #f2e7cc;
  --parchment-300: #e8d9b5;
  --wood-700: #5a3a22;
  --ink-950: #150e08;
  --ink-900: #241a10;
  --ink-600: #4a3826;
  --table-deep: #201811;
  --gold-500: #c49a3a;
  --gold-300: #e0c266;
  --btn-gold-background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  --btn-gold-color: var(--ink-950);
  --btn-gold-radius: 8px;
  --btn-gold-shadow:
    inset 0 1px 0 rgba(242, 231, 204, 0.4),
    0 6px 22px -7px rgba(224, 194, 102, 0.55);
  --btn-gold-shadow-focus:
    inset 0 1px 0 rgba(242, 231, 204, 0.4),
    0 0 0 2px rgba(224, 194, 102, 0.58),
    0 6px 22px -7px rgba(224, 194, 102, 0.55);
  --btn-gold-shadow-active:
    inset 0 1px 0 rgba(242, 231, 204, 0.35),
    0 3px 12px -7px rgba(224, 194, 102, 0.45);
  --lacquer: #a63a2e;
  --map-blue: #3e5f70;

  /* Semantic tokens */
  --surface-panel: #241a10;
  /* Fondo de todas las páginas, también el del tablero y el replay: rayado
     fino sobre tinta y la luz del farol desde arriba. */
  --page-backdrop:
    repeating-linear-gradient(
      90deg,
      rgba(90, 58, 34, 0.14) 0px,
      rgba(90, 58, 34, 0.14) 3px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 11px
    ),
    linear-gradient(180deg, #241a10 0%, #150e08 100%);
  --page-lantern: radial-gradient(65% 55% at 50% 0%, rgba(224, 194, 102, 0.1), rgba(0, 0, 0, 0) 70%);
  /* Paneles del tablero: la ficha de latón de la portada, Últimas partidas y
     Estadísticas. Es una lista de capas para poder anteponer otras (p. ej. el
     tinte del panel de acciones). */
  --surface-brass: linear-gradient(180deg, rgba(62, 43, 26, 0.72), rgba(30, 21, 13, 0.88));
  --surface-field: #201811;
  --border-hairline: rgba(196, 154, 58, 0.25);
  --border-field: #5a3a22;
  --text-label: #e0c266;
  --text-secondary: rgba(232, 217, 181, 0.7);
  --accent-glow: #e0c266;
  --focus: #e0c266;
  --player-you-color: var(--gold-300);
  --player-opponent-color: color-mix(in srgb, var(--map-blue) 45%, var(--parchment-300) 55%);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Legacy variable names remapped to the Chart Table palette so the whole
     app (incl. the board) shifts tone coherently. */
  --wood: #241a10;
  --wood-light: #5a3a22;
  --text: #f2e7cc;
  --muted: #c4b59a;
  --accent: #c49a3a;
  --accent-dark: #8a6d1a;
  --danger: #a63a2e;
  --panel: rgba(36, 26, 16, 0.86);
  --zone-border: rgba(224, 194, 102, 0.32);

  --card-w-field: 72px;
  --card-h-field: 100px;
  --card-w-hand: 88px;
  --card-h-hand: 122px;
  --card-w-mini: 48px;
  --card-h-mini: 66px;
  --card-w-life: 52px;
  --card-h-life: 72px;
  --don-token-w: 48px;
  --don-token-h: 66px;
}

* { box-sizing: border-box; }

html {
  background-color: var(--ink-950);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--ink-950);
  background-image: var(--page-backdrop);
  background-repeat: repeat;
}

/* Ambient lantern light — subtle warm glow from the top, above page content
   but below modal overlays. Never intercepts clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: var(--page-lantern);
  animation: lantern 7s ease-in-out infinite;
}

/* No ambient lantern pulse over the immersive game board. */
body.page-play::after {
  display: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-glow); }

/* El oro de los enlaces no se lee sobre pergamino: los enlaces de texto de
   paneles y diálogos claros usan madera subrayada, como la política de
   privacidad. Se excluyen los enlaces con clase propia y los de navegación. */
:where(.home-panel, .replay-panel, .deck-modal-dialog, .account-sheet, .account-card, .document-sheet) a:not([class], nav a) {
  color: var(--wood-700);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(90, 58, 34, 0.45);
  text-underline-offset: 0.2em;
}

:where(.home-panel, .replay-panel, .deck-modal-dialog, .account-sheet, .account-card, .document-sheet) a:not([class], nav a):hover {
  color: var(--ink-950);
  text-decoration-color: currentColor;
}

/* --- Chart Table keyframes --- */
@keyframes lantern {
  0%, 100% { opacity: 0.85; }
  42% { opacity: 1; }
  55% { opacity: 0.9; }
  70% { opacity: 0.98; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* --- Home / replay --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  background: linear-gradient(180deg, rgba(36, 26, 16, 0.92), rgba(21, 14, 8, 0.92));
  border-bottom: 1px solid var(--border-hairline);
}

.site-brand {
  margin: 0;
  min-width: 0;
  font-weight: 400;
  line-height: 1.1;
}

.site-brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
}

.site-brand-mark {
  flex: none;
}

.site-brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* El «.ai» del logotipo va en el oro de la marca y sin el espaciado de las
   mayúsculas. */
.site-brand-tld {
  color: var(--gold-300);
  letter-spacing: 0;
}

.site-brand a:hover .site-brand-name {
  color: var(--accent-glow);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.25rem 1rem 1.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
}

.site-footer-copy {
  max-width: 70rem;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
}

.site-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.discord-link {
  gap: 0.5rem;
}

.discord-icon {
  flex: none;
}

.site-footer a {
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer a:hover {
  color: var(--gold-300);
}

.site-menu {
  position: relative;
  flex: none;
}

.site-menu-button {
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.23rem;
  padding: 0;
  background: rgba(10, 7, 4, 0.58);
  border: 1px solid rgba(201, 162, 39, 0.54);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.site-menu-button:hover,
.site-menu-button[aria-expanded="true"] {
  background: rgba(34, 23, 12, 0.9);
  border-color: rgba(201, 162, 39, 0.88);
}

.site-menu-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-menu-button-line {
  display: block;
  width: 1.08rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.site-menu-popup {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 50;
  display: flex;
  min-width: 12.5rem;
  padding: 0.45rem;
  flex-direction: column;
  gap: 0.15rem;
  line-height: normal;
  background: rgba(20, 14, 8, 0.97);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.site-menu-popup[hidden] {
  display: none;
}

.site-menu-popup a,
.site-menu-popup-action {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  text-align: left;
}

.site-menu-popup a:hover,
.site-menu-popup a:focus-visible,
.site-menu-popup-action:hover,
.site-menu-popup-action:focus-visible {
  background: rgba(201, 162, 39, 0.16);
  color: #fff6cf;
  outline: none;
}

.site-menu--play .site-menu-button {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #c9a227, #8a6d1a);
  border: 2px solid #5c4a12;
  color: #1a1208;
}

.toolbar-site-menu {
  margin-left: auto;
}

.container {
  max-width: 480px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.deck-page-container {
  max-width: 1320px;
  margin: 1.5rem auto;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}

.home-panel,
.replay-panel {
  background: linear-gradient(180deg, rgba(34, 23, 12, 0.94), rgba(20, 14, 8, 0.94));
  padding: 1.75rem;
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-panel {
  min-width: 0;
}

.home-panel h2,
.replay-panel h2 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.deck-page-panel h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

.home-field {
  display: block;
  margin-bottom: 1rem;
  color: var(--muted);
  min-width: 0;
}

.home-field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-field input,
.home-field select,
.home-select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: rgba(10, 7, 4, 0.6);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-field select,
select.home-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.35rem;
  background-color: rgba(10, 7, 4, 0.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23f5f0e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.85rem;
  color-scheme: dark;
}

.home-field select option,
select.home-select option {
  background: #1a1208;
  color: var(--text);
}

.home-field input:focus,
.home-field select:focus,
.home-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.home-field input::placeholder {
  color: rgba(196, 181, 154, 0.55);
}

.home-field-error {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  padding: 0.42rem 0.58rem;
  background: rgba(166, 58, 46, 0.08);
  border: 1px solid rgba(166, 58, 46, 0.28);
  border-radius: 6px;
  color: #7f251f;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.home-field-error::before {
  content: "!";
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.01rem;
  background: #a63a2e;
  border-radius: 50%;
  color: #fff8ee;
  font-size: 0.69rem;
  font-weight: 900;
  line-height: 1;
}

.home-field input[aria-invalid="true"] {
  border-color: rgba(166, 58, 46, 0.68);
  box-shadow: 0 0 0 3px rgba(166, 58, 46, 0.1);
}

/* Botones fantasma de navegación en cabeceras de páginas de menú
   (Configuración/Mazos). */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.95rem;
  background: rgba(201, 162, 39, 0.14);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 8px;
  color: #eeda92;
  font-weight: 700;
  font-size: 0.83rem;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    transform 0.12s ease;
}

.btn-ghost:hover {
  border-color: rgba(201, 162, 39, 0.85);
  background: rgba(201, 162, 39, 0.28);
  color: #f8ecb8;
  transform: translateY(-1px);
}

/* --- Home: Chart Table form primitives (layout lives in home.css) --- */
.chart-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.25rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(166, 58, 46, 0.92), rgba(126, 43, 34, 0.94));
  border: 1px solid rgba(224, 194, 102, 0.4);
  border-radius: 8px;
  color: #f7e7cf;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 12px 26px -12px rgba(10, 6, 2, 0.7);
}

.chart-warning span {
  flex: 1 1 18rem;
}

.chart-warning-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(247, 231, 207, 0.6);
  border-radius: 6px;
  color: #fff7d1;
  white-space: nowrap;
}

.chart-warning-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.chart-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.chart-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: radial-gradient(circle at 35% 30%, #c2543f, var(--lacquer) 65%, #7e2b22);
  border-radius: 50%;
  box-shadow: 0 3px 5px rgba(21, 14, 8, 0.4);
}

.chart-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}

.chart-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.chart-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.chart-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.chart-label-link {
  font-size: 0.75rem;
  color: var(--ink-600);
  text-decoration: underline;
  text-underline-offset: 0.14rem;
  text-transform: none;
}

.chart-label-link:hover {
  color: var(--wood-700);
}

.chart-select,
.chart-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 252, 242, 0.75);
  border: 1px solid rgba(90, 58, 34, 0.45);
  border-radius: 8px;
  color: var(--ink-950);
  font: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chart-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  color-scheme: light;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235A3A22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

.chart-select option {
  background: #fbf4e2;
  color: var(--ink-950);
}

.chart-select:hover,
.chart-input:hover {
  border-color: var(--wood-700);
}

.chart-select:focus,
.chart-input:focus,
.chart-dice:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
  border-color: var(--wood-700);
}

.chart-input::placeholder {
  color: rgba(74, 56, 38, 0.55);
}

/* Selector con buscador (js/searchable_select.js): el botón hereda las clases
   del <select> nativo, que queda oculto como fuente de verdad. */
.searchable-select {
  position: relative;
  min-width: 0;
}

.searchable-select-native {
  display: none !important;
}

.searchable-select-trigger {
  display: block;
  text-align: start;
}

.searchable-select-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select.is-open .searchable-select-trigger {
  border-color: var(--wood-700);
}

.searchable-select-popup {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.4rem;
  padding: 0.45rem;
  background: #fbf4e2;
  border: 1px solid rgba(90, 58, 34, 0.45);
  border-radius: 8px;
  box-shadow: 0 14px 30px -12px rgba(21, 14, 8, 0.55);
  color-scheme: light;
}

.searchable-select-popup[hidden] {
  display: none;
}

.searchable-select.is-above .searchable-select-popup {
  top: auto;
  bottom: calc(100% + 4px);
}

.searchable-select-search.chart-input {
  padding: 0.5rem 0.65rem;
}

.searchable-select-options {
  max-height: min(17rem, 45vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.searchable-select-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.1rem;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  color: var(--ink-950);
  font-size: 0.9rem;
  cursor: pointer;
}

.searchable-select-option img {
  flex: none;
  width: 1.5rem;
  height: 1.125rem;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(21, 14, 8, 0.24);
}

.searchable-select-option:hover {
  background: rgba(196, 154, 58, 0.14);
}

.searchable-select-option.is-active {
  background: rgba(196, 154, 58, 0.24);
}

.searchable-select-option[aria-selected="true"] {
  font-weight: 600;
}

.searchable-select-option[aria-disabled="true"] {
  color: var(--ink-600);
  opacity: 0.55;
  cursor: not-allowed;
}

.searchable-select-empty {
  margin: 0;
  padding: 0.45rem 0.55rem;
  color: var(--ink-600);
  font-size: 0.85rem;
}

.chart-seed-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.chart-seed-row .chart-input {
  flex: 1;
  min-width: 0;
  font-feature-settings: "tnum";
}

.chart-dice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  background: rgba(255, 252, 242, 0.75);
  border: 1px solid rgba(90, 58, 34, 0.45);
  border-radius: 8px;
  color: var(--wood-700);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.chart-dice:hover {
  border-color: var(--wood-700);
  transform: rotate(-14deg);
}

.chart-dice:active {
  transform: rotate(346deg);
}

.chart-hint {
  font-size: 0.72rem;
  color: var(--ink-600);
  font-style: italic;
}

.chart-error {
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(166, 58, 46, 0.5);
  background: rgba(166, 58, 46, 0.12);
  color: #7e2b22;
  font-weight: 600;
  font-size: 0.82rem;
}

.chart-seed {
  margin: 0;
}

.chart-seed-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  color: var(--ink-600);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 0.16rem;
}

.chart-seed-summary::-webkit-details-marker {
  display: none;
}

.chart-seed-summary::before {
  content: "›";
  display: inline-block;
  font-size: 1rem;
  line-height: 0;
  transition: transform 0.15s ease;
}

.chart-seed[open] .chart-seed-summary::before {
  transform: rotate(90deg);
}

.chart-seed-summary:hover {
  color: var(--wood-700);
}

.chart-seed-summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.chart-seed-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.chart-btn-gold:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.chart-btn-gold {
  width: 100%;
  padding: 0.8rem 1.25rem;
  background: var(--gold-500);
  border: none;
  border-radius: 8px;
  color: var(--ink-950);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.4), 0 8px 18px -8px rgba(90, 58, 34, 0.6);
}

.chart-btn-gold:hover {
  color: var(--ink-950);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 8px 24px -6px rgba(196, 154, 58, 0.55),
    inset 0 1px 0 rgba(242, 231, 204, 0.4);
}

.chart-btn-gold:active {
  transform: translateY(1px);
}

.chart-btn-gold:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

.chart-queue-form {
  margin: 0;
}

.queue-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.25rem;
  padding: 0.52rem 0.78rem;
  border: 1px solid rgba(90, 58, 34, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 235, 0.48);
  color: var(--ink-600);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.queue-activity[hidden] {
  display: none;
}

.queue-activity-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #557451;
  box-shadow: 0 0 0 3px rgba(85, 116, 81, 0.14);
}

.queue-activity-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
}

.queue-activity-separator {
  color: rgba(74, 56, 38, 0.55);
}

.queue-activity-waiting {
  color: var(--lacquer);
  font-weight: 800;
}

.queue-activity[data-queue-activity-state="empty"] .queue-activity-dot {
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.16);
}

.queue-activity[data-queue-activity-state="waiting"] .queue-activity-dot {
  background: var(--lacquer);
  box-shadow: 0 0 0 3px rgba(166, 58, 46, 0.14);
}

.chart-btn-private {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.78rem 1.25rem;
  border: 1px solid rgba(90, 58, 34, 0.48);
  border-radius: 8px;
  background: rgba(255, 250, 235, 0.48);
  color: var(--wood-700);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.chart-btn-private:hover {
  border-color: var(--wood-700);
  background: rgba(255, 250, 235, 0.8);
  color: var(--wood-700);
}

.chart-btn-private:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.chart-queue-error {
  margin: 0;
  color: #7e2b22;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 640px) {
  .chart-field-row {
    grid-template-columns: 1fr;
  }
}

/* --- Settings --- */
.settings-rows {
  display: flex;
  flex-direction: column;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.05rem 0;
  margin: 0;
  border-top: 1px solid rgba(201, 162, 39, 0.14);
}

/* Grupos «En la web» y «En la partida», en /settings y en el diálogo de la
   partida (partials/settings_controls.html). */
.settings-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.settings-group + .settings-group {
  margin-top: 1.1rem;
}

.settings-group-title {
  margin: 0 0 0.35rem;
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-group .settings-row:first-of-type {
  border-top: 0;
  padding-top: 0.25rem;
}

.settings-group .settings-row:last-child {
  padding-bottom: 0.25rem;
}

.settings-toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

label.settings-row {
  cursor: pointer;
}

.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 14rem;
}

.settings-row-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.settings-row-hint {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.settings-row .home-select {
  width: auto;
  min-width: 11rem;
  flex: none;
}

.settings-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 46px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: rgba(10, 7, 4, 0.7);
  border: 1px solid rgba(201, 162, 39, 0.35);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.15s ease;
}

.settings-toggle:checked {
  background: linear-gradient(180deg, #d8b53a, #a07f1d);
  border-color: var(--accent);
}

.settings-toggle:checked::before {
  transform: translateX(20px);
  background: #fff8e6;
}

.settings-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deck-page-panel {
  min-width: 0;
}

.deck-browser {
  display: grid;
  grid-template-columns: minmax(8.5rem, 20%) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.deck-builder {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.deck-builder-sidebar {
  min-width: 0;
}

.deck-builder-sidebar .home-field {
  margin-bottom: 0.8rem;
}

.deck-builder-sidebar input,
.deck-builder-sidebar textarea {
  width: 100%;
}

.deck-builder-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.deck-builder-feedback {
  min-width: 0;
}

.deck-builder-actions--danger {
  margin-top: 0.45rem;
}

.deck-builder-actions .btn,
.deck-import-panel .btn {
  min-height: 2.35rem;
  padding-inline: 0.55rem;
  font-size: 0.74rem;
}

.deck-import-panel {
  display: flex;
  width: min(100%, 30rem);
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0;
}

.deck-import-panel .home-field {
  margin-bottom: 0;
}

.deck-import-panel textarea {
  display: block;
  width: 100%;
  min-height: 9.5rem;
  max-height: min(15rem, 42vh);
  padding: 0.75rem;
  resize: vertical;
  background: rgba(10, 7, 4, 0.6);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 8px;
  color: var(--text);
  font: 0.86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.deck-import-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.deck-modal[hidden] {
  display: none;
}

.deck-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.deck-modal-backdrop {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.68);
  cursor: pointer;
}

.deck-modal-dialog {
  position: relative;
  width: min(100%, 34rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(34, 23, 12, 0.98), rgba(20, 14, 8, 0.98));
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}

.deck-modal-dialog.deck-import-panel {
  width: min(100%, 30rem);
}

.deck-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.deck-modal-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.2;
}

.deck-modal-close {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.62);
  color: var(--text);
  cursor: pointer;
}

.deck-modal-close::before,
.deck-modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.deck-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.deck-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bug-report-dialog {
  width: min(92vw, 30rem);
  max-width: 30rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.bug-report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
}

.bug-report-panel.deck-modal-dialog {
  width: 100%;
  max-height: min(85vh, 34rem);
}

.bug-report-panel textarea {
  min-height: 9.5rem;
}

.bug-report-note {
  display: block;
  margin: 0;
  color: var(--ink-600);
  font-size: 0.78rem;
  line-height: 1.45;
}

.home-field > .bug-report-note {
  margin-bottom: 0.55rem;
}

.bug-report-panel .btn-ghost {
  background: rgba(90, 58, 34, 0.1);
  border-color: rgba(90, 58, 34, 0.5);
  color: var(--wood-700);
}

.bug-report-panel .btn-ghost:hover,
.bug-report-panel .btn-ghost:focus-visible {
  background: rgba(90, 58, 34, 0.18);
  border-color: var(--wood-700);
  color: var(--ink-950);
}

.settings-dialog {
  width: min(calc(100vw - 2rem), 36rem);
  max-width: min(calc(100vw - 2rem), 36rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.settings-dialog-panel.deck-modal-dialog {
  width: 100%;
  max-height: calc(100dvh - 2rem);
}

.settings-dialog-panel .settings-rows {
  text-align: left;
}

.deck-card-preview-dialog {
  width: min(100%, 23rem);
}

.deck-card-preview-img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.deck-builder-status {
  margin-top: 0.8rem;
  padding: 0.65rem;
  min-height: 3.2rem;
  background: rgba(10, 8, 6, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.deck-builder-status[data-tone="error"] {
  border-color: rgba(220, 72, 72, 0.75);
  color: #ffd2d2;
}

.deck-builder-status[data-tone="ok"] {
  border-color: rgba(110, 186, 118, 0.65);
  color: #d8f5dc;
}

.deck-builder-status p {
  margin: 0 0 0.35rem;
}

.deck-builder-status p:last-child {
  margin-bottom: 0;
}

.deck-builder-main {
  min-width: 0;
}

.deck-summary {
  margin-bottom: 1rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(90, 58, 34, 0.06)),
    rgba(255, 250, 235, 0.54);
  border: 1px solid rgba(90, 58, 34, 0.38);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.deck-summary-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: clamp(0.8rem, 1.8vw, 1.15rem);
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.deck-summary-toggle:hover {
  background: rgba(90, 58, 34, 0.06);
}

.deck-summary-toggle:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: -3px;
}

.deck-summary-title {
  color: var(--wood-700);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.deck-summary-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
}

.deck-summary-count {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  margin: 0;
  color: var(--ink-600);
  font-size: 0.94rem;
  font-weight: 750;
}

.deck-summary-count strong {
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1;
}

.deck-summary-chevron {
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2px solid var(--wood-700);
  border-bottom: 2px solid var(--wood-700);
  transform: translateY(-0.16rem) rotate(45deg);
  transition: transform 0.16s ease;
}

.deck-summary-toggle[aria-expanded="true"] .deck-summary-chevron {
  transform: translateY(0.16rem) rotate(225deg);
}

.deck-summary-details {
  padding: 0 clamp(0.8rem, 1.8vw, 1.15rem) clamp(0.8rem, 1.8vw, 1.15rem);
}

.deck-summary-details[hidden] {
  display: none;
}

.deck-summary-progress {
  height: 0.55rem;
  overflow: hidden;
  background: rgba(90, 58, 34, 0.12);
  border-radius: 999px;
}

.deck-summary-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-300), var(--gold-500));
  border-radius: inherit;
  transition: width 0.18s ease;
}

.deck-cost-curve {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.2rem, 1.2vw, 0.65rem);
  margin-top: 0.9rem;
  padding: 0.65rem 0.55rem 0.25rem;
  background: rgba(90, 58, 34, 0.045);
  border-radius: 8px;
}

.deck-cost-bucket {
  display: grid;
  grid-template-rows: 1.2rem 4.7rem 1.25rem;
  min-width: 0;
  color: rgba(74, 56, 38, 0.7);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}

.deck-cost-bucket > strong {
  color: var(--ink-900);
  font-size: 0.72rem;
  line-height: 1.2rem;
}

.deck-cost-track {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(90, 58, 34, 0.16);
  border-radius: 4px 4px 0 0;
}

.deck-cost-bar {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 248, 214, 0.65);
  transition: height 0.18s ease;
}

.deck-cost-bucket > span:last-child {
  line-height: 1.25rem;
}

.deck-format-status {
  margin-top: 0.8rem;
  padding: 0.75rem 0.85rem;
  background: rgba(90, 58, 34, 0.06);
  border: 1px solid rgba(90, 58, 34, 0.35);
  border-radius: 8px;
  color: var(--ink-600);
}

.deck-format-status header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.deck-format-status strong {
  color: var(--wood-700);
  font-size: 0.86rem;
}

.deck-format-status header span {
  color: rgba(74, 56, 38, 0.68);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: right;
}

.deck-format-status p {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.deck-builder-sidebar .deck-format-status header {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.2rem;
}

.deck-builder-sidebar .deck-format-status header span {
  text-align: left;
}

.deck-format-status[data-deck-format-status="legal"] {
  background: rgba(31, 99, 54, 0.08);
  border-color: rgba(31, 99, 54, 0.62);
}

.deck-format-status[data-deck-format-status="legal"] strong {
  color: #1f6336;
}

.deck-format-status[data-deck-format-status="illegal"] {
  background: rgba(166, 58, 46, 0.08);
  border-color: rgba(166, 58, 46, 0.65);
}

.deck-format-status[data-deck-format-status="illegal"] strong {
  color: var(--lacquer);
}

.deck-builder-current,
.deck-card-results {
  --deck-builder-card-w: 4.4rem;
  --deck-builder-card-h: 6.15rem;
  min-height: 13.5rem;
  max-height: 44vh;
  overflow: auto;
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(calc(var(--deck-builder-card-w) + 1.35rem), 1fr));
  gap: 0.9rem 0.7rem;
  align-content: start;
  align-items: start;
  padding: 0.8rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.08)),
    rgba(10, 8, 6, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
}

.deck-card-results {
  min-height: 18rem;
  max-height: none;
}

.deck-builder-card {
  position: relative;
  width: calc(var(--deck-builder-card-w) + 1.35rem);
  height: calc(var(--deck-builder-card-h) + 2.35rem);
  min-height: 0;
  color: inherit;
}

.deck-card-action {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.deck-card-action:disabled {
  cursor: default;
}

.deck-builder-actions .btn:disabled {
  opacity: 0.55;
}

.deck-builder-card-img {
  display: block;
  width: var(--deck-builder-card-w);
  height: var(--deck-builder-card-h);
  background: #1a1208;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.deck-builder-card-img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.deck-builder-card-img span {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
}

.deck-builder-card-name {
  display: -webkit-box;
  width: var(--deck-builder-card-w);
  height: 2.3em;
  margin-top: 0.32rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.15;
}

.deck-card-zoom {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0.25rem;
  left: calc(var(--deck-builder-card-w) - 1.65rem);
  z-index: 4;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.78);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.deck-card-zoom::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.34rem;
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.deck-card-zoom::after {
  content: "";
  position: absolute;
  left: 0.87rem;
  top: 0.9rem;
  width: 0.42rem;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.deck-card-zoom:hover:not(:disabled),
.deck-card-zoom:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.deck-card-zoom:disabled {
  opacity: 0.45;
  cursor: default;
}

.deck-builder-card--leader .deck-builder-card-img {
  border-color: rgba(201, 162, 39, 0.92);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.35),
    0 5px 13px rgba(0, 0, 0, 0.5);
}

.deck-builder-card.is-pending .deck-builder-card-img,
.deck-search-card.is-pending .deck-builder-card-img {
  filter: grayscale(1);
  opacity: 0.62;
}

.deck-builder-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.deck-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: min(100%, 19rem);
}

.deck-search-field span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.deck-search-field input {
  flex: 1 1 auto;
  min-width: 0;
}

.deck-color-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.deck-color-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 2rem;
  padding: 0.32rem 0.52rem;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.42);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.deck-color-filter input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.deck-color-filter--red { border-color: rgba(202, 64, 64, 0.55); }
.deck-color-filter--green { border-color: rgba(80, 160, 90, 0.55); }
.deck-color-filter--blue { border-color: rgba(67, 135, 210, 0.55); }
.deck-color-filter--purple { border-color: rgba(149, 98, 205, 0.55); }
.deck-color-filter--black { border-color: rgba(190, 190, 190, 0.42); }
.deck-color-filter--yellow { border-color: rgba(220, 188, 74, 0.62); }

.deck-card-action:hover:not(:disabled) .deck-builder-card-img,
.deck-card-action:focus-visible .deck-builder-card-img {
  border-color: rgba(201, 162, 39, 0.8);
}

.deck-search-card .deck-builder-card-name {
  color: var(--text);
}

.deck-browser-controls {
  min-width: 0;
}

.deck-editable-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.deck-hover-preview {
  margin-top: 1rem;
  padding: 0.65rem;
  min-height: 13.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(10, 8, 6, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
}

.deck-hover-preview-placeholder {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
}

.deck-hover-preview-img {
  width: 100%;
  max-width: 13rem;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.deck-hover-preview-title {
  width: 100%;
  color: var(--accent);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
}

.deck-preview-surface {
  --deck-card-w: 4.5rem;
  --deck-card-h: 6.25rem;
  min-width: 0;
  max-height: calc(100vh - 9rem);
  overflow: auto;
  padding: 0.85rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.08)),
    rgba(10, 8, 6, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
}

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

.deck-preview-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.deck-preview-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.2;
}

.deck-preview-header span {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.deck-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.7rem, 1fr));
  gap: 1.05rem 0.8rem;
  align-items: start;
}

.deck-card-stack {
  position: relative;
  justify-self: start;
  width: calc(var(--deck-card-w) + 1.45rem);
  height: calc(var(--deck-card-h) + 2.05rem);
  cursor: pointer;
}

.deck-card-img,
.deck-card-fallback {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--deck-card-w);
  height: var(--deck-card-h);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.5);
  transform: translate(calc(var(--stack-i) * 0.38rem), calc(var(--stack-i) * 0.28rem));
}

.deck-card-img {
  object-fit: fill;
}

.deck-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  background: #1a1208;
  color: var(--text);
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
}

.deck-card-stack--leader .deck-card-img,
.deck-card-stack--leader .deck-card-fallback {
  border-color: rgba(201, 162, 39, 0.92);
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, 0.35),
    0 5px 13px rgba(0, 0, 0, 0.5);
}

.deck-copy-badge,
.deck-role-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: 900;
}

.deck-copy-badge {
  right: 0;
  bottom: 0.15rem;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.25rem;
  background: linear-gradient(180deg, #ffe082, #c9a227);
  border: 2px solid #5c4a12;
  color: #1a1208;
  font-size: 1.05rem;
  line-height: 1;
}

.deck-role-badge {
  left: 0.2rem;
  top: 0.15rem;
  max-width: calc(var(--deck-card-w) - 0.4rem);
  padding: 0.15rem 0.3rem;
  background: rgba(26, 18, 8, 0.88);
  border: 1px solid rgba(201, 162, 39, 0.75);
  color: var(--accent);
  font-size: 0.55rem;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-builder-card .deck-copy-badge {
  right: 1.1rem;
  bottom: 2.05rem;
}

.deck-builder-card .deck-role-badge {
  max-width: calc(var(--deck-builder-card-w) - 0.4rem);
}

@media (max-width: 1100px) {
  .deck-page-container {
    margin: 1rem auto;
  }

  .deck-preview-surface {
    max-height: none;
  }
}

@media (max-width: 700px) {
  .home-panel,
  .replay-panel {
    padding: 1.25rem;
  }

  .settings-row {
    flex-wrap: wrap;
  }

  .settings-row .home-select {
    flex: 1 1 100%;
  }

  .deck-browser {
    grid-template-columns: 1fr;
  }

  .deck-builder {
    grid-template-columns: 1fr;
  }

  .deck-preview-surface {
    --deck-card-w: 3.8rem;
    --deck-card-h: 5.3rem;
    padding: 0.65rem;
  }

  .deck-builder-current,
  .deck-card-results {
    --deck-builder-card-w: 3.8rem;
    --deck-builder-card-h: 5.3rem;
  }

  .deck-hover-preview {
    display: none;
  }

  .deck-modal {
    padding: 0.75rem;
  }

  .deck-import-panel {
    max-height: calc(100dvh - 1.5rem);
    padding: 0.9rem;
  }

  .deck-import-panel textarea {
    min-height: 9rem;
    max-height: min(13rem, 38dvh);
  }

  .deck-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .deck-modal-actions .btn {
    width: 100%;
  }

  .deck-summary-toggle {
    padding: 0.75rem;
  }

  .deck-summary-details {
    padding: 0 0.75rem 0.75rem;
  }

  .deck-cost-curve {
    gap: 0.2rem;
    padding-inline: 0.3rem;
  }

  .deck-cost-bucket {
    grid-template-rows: 1.15rem 3.8rem 1.2rem;
    font-size: 0.66rem;
  }

  .deck-format-status header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .deck-format-status header span {
    text-align: left;
  }

  .deck-search-field {
    width: 100%;
  }

  .deck-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(4.85rem, 1fr));
    gap: 0.85rem 0.5rem;
  }

  .deck-preview-header {
    display: block;
  }

  .deck-preview-header span {
    display: block;
    margin-top: 0.2rem;
  }
}

/* --- Play page full screen --- */
body.page-play {
  overflow: hidden;
  height: 100vh;
}

.main-play {
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
}

#board {
  height: 100%;
}

.tcg-table {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0.5rem;
  gap: 0.5rem;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: var(--panel);
  border: 2px solid var(--accent-dark);
  border-radius: 4px;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.turn-pill, .phase-pill, .seed-pill, .ai-model-pill {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  color: var(--muted);
}

.ai-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.ai-model-info {
  position: relative;
  display: inline-flex;
}

.ai-model-info-trigger {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 750;
  line-height: 1;
  cursor: help;
  opacity: 0.86;
}

.ai-model-info-trigger:hover,
.ai-model-info-trigger:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 2px rgba(224, 194, 102, 0.2);
}

.ai-model-tooltip {
  position: absolute;
  z-index: 420;
  top: calc(100% + 0.65rem);
  right: -0.4rem;
  bottom: auto;
  display: grid;
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.7rem 0.8rem;
  gap: 0.4rem;
  border: 1px solid rgba(224, 194, 102, 0.42);
  border-radius: 6px;
  background: #1a1208;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
  color: var(--parchment-100);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.2rem);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: normal;
}

.ai-model-tooltip::after {
  position: absolute;
  top: auto;
  right: 0.65rem;
  bottom: 100%;
  border: 5px solid transparent;
  border-bottom-color: #1a1208;
  content: "";
}

.ai-model-tooltip strong {
  color: var(--gold-200);
  font-size: 0.75rem;
}

.ai-model-tooltip-release {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(224, 194, 102, 0.18);
  color: var(--muted);
}

.ai-model-info-trigger:focus-visible + .ai-model-tooltip,
.ai-model-info[data-open="true"] .ai-model-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: hover) {
  .ai-model-info:hover .ai-model-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  text-transform: uppercase;
}

.badge.human { background: #1a5c34; color: #9ef0b8; }
.badge.bot { background: #6b4f0a; color: #ffe08a; }

.table-body {
  flex: 1;
  display: grid;
  /* Escritorio base (<=1600px): el mat se capa a 700px y el sobrante queda
     para manos + historial. En pantallas mayores se escala más abajo. */
  grid-template-columns: minmax(330px, 1fr) minmax(0, 700px) minmax(180px, 18vw);
  gap: 0.5rem;
  min-height: 0;
}

.side-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.side-right {
  gap: 0.35rem;
}

/* --- Card preview (above action dock) --- */
.card-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.4rem;
  background: rgba(10, 8, 6, 0.88);
  border: 2px solid var(--accent-dark);
  border-radius: 6px;
  overflow: hidden;
}

.card-preview-placeholder {
  margin: auto;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  padding: 0.5rem;
  line-height: 1.35;
}

.card-preview--active .card-preview-placeholder {
  display: none;
}

.card-preview-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100% - 4.5rem);
  object-fit: contain;
  image-rendering: auto;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.card-preview-text,
.deck-hover-preview-text {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 8px 6px 0 0;
  border-top: 1px solid rgba(196, 154, 58, 0.22);
  color: var(--parchment-100);
  font-size: 0.875rem;
  line-height: 1.65;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 154, 58, 0.42) transparent;
}

.card-preview-text:focus-visible,
.deck-hover-preview-text:focus-visible {
  outline: 1px solid var(--gold-300);
  outline-offset: -1px;
}

.card-effect-chip {
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 5px;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.65;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.card-effect-chip + .card-effect-chip {
  margin-left: 4px;
}

.card-effect-chip--timing { background: #0c6fa5; }
.card-effect-chip--limit { background: #dc4883; }
.card-effect-chip--trigger { background: #ffdf3f; color: #171304; }
.card-effect-chip--counter { background: #db0002; }
.card-effect-chip--keyword { background: #eb7134; }
.card-effect-chip--cost { background: #000; }

.card-preview-source {
  cursor: help;
  touch-action: manipulation;
}

.card-preview-source:hover,
.card-preview-source:focus-visible {
  outline: 1px solid rgba(201, 162, 39, 0.85);
  outline-offset: 1px;
}

/* «Doble clic en las cartas para verlas en grande»: solo en el catalejo vacío. */
.card-zoom-hint-line {
  max-width: 220px;
  margin: 0;
  color: rgba(232, 217, 181, 0.62);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
}

.card-zoom-hint-line svg {
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--gold-300);
}

.card-preview-placeholder .card-zoom-hint-line {
  margin-top: -6px;
  font-size: 0.8125rem;
}

/* Aviso de doble clic sobre la carta tocada de tu mano (board.js,
   bindCardZoomHint). La flecha apunta a la carta. */
.card-zoom-hint {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 9px 10px 9px 14px;
  border-radius: 12px;
  background: #1d140c;
  box-shadow: 0 0 0 1px rgba(224, 194, 102, 0.6), 0 12px 26px rgba(0, 0, 0, 0.6);
  color: var(--parchment-100);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.card-zoom-hint[hidden] {
  display: none;
}

.card-zoom-hint::after {
  content: "";
  position: absolute;
  left: var(--card-zoom-hint-arrow, 50%);
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #1d140c;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 1px 1px 0 rgba(224, 194, 102, 0.6);
}

.card-zoom-hint.is-below::after {
  top: -6px;
  bottom: auto;
  box-shadow: -1px -1px 0 rgba(224, 194, 102, 0.6);
}

.card-zoom-hint-dismiss {
  flex: none;
  padding: 7px 11px;
  border: 0;
  border-radius: var(--btn-gold-radius);
  background: var(--btn-gold-background);
  color: var(--btn-gold-color);
  font: 700 0.75rem/1 var(--font-body);
  cursor: pointer;
  box-shadow: var(--btn-gold-shadow);
}

.card-zoom-hint-dismiss:focus-visible {
  outline: none;
  box-shadow: var(--btn-gold-shadow-focus);
}

/* Catalejo móvil (board.js, bindCardSpyglass): la carta tocada muestra su texto
   con el panel de los diálogos del tablero, sin tapar su zona. board.js lo pone
   bajo la barra superior o encima de la mano y fija su altura máxima. */
.card-spyglass {
  position: fixed;
  top: var(--card-spyglass-top, 56px);
  bottom: var(--card-spyglass-bottom, auto);
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 59;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  max-height: var(--card-spyglass-max-height, 60dvh);
  margin: 0 auto;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #312416 0%, #241a10 55%, #1d150d 100%);
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  color: var(--parchment-100);
  box-shadow:
    0 18px 40px -12px rgba(21, 14, 8, 0.88),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
}

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

.card-spyglass-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(196, 154, 58, 0.22);
}

.card-spyglass-cost {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(196, 154, 58, 0.55);
  border-radius: 50%;
  background: rgba(21, 14, 8, 0.45);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.card-spyglass-title {
  flex: 1 1 auto;
  min-width: 0;
}

.card-spyglass-name {
  margin: 0;
  overflow: hidden;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-spyglass-sub {
  margin: 2px 0 0;
  color: rgba(232, 217, 181, 0.6);
  font-size: 0.75rem;
  line-height: 1.3;
}

.card-spyglass-stats {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 3px;
}

.card-spyglass-power {
  padding: 1px 6px;
  border-radius: 4px;
  background: #050505;
  color: #f4f1e8;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.card-spyglass-power--positive {
  color: #9ef0b8;
}

.card-spyglass-power--negative {
  color: #ff8585;
}

.card-spyglass-counter {
  color: rgba(232, 217, 181, 0.6);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.card-spyglass-cost[hidden],
.card-spyglass-sub[hidden],
.card-spyglass-stats[hidden],
.card-spyglass-power[hidden],
.card-spyglass-counter[hidden],
.card-spyglass-traits[hidden] {
  display: none;
}

.card-spyglass-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.card-spyglass-thumb {
  position: relative;
  width: 92px;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: zoom-in;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.75);
}

.card-spyglass-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 7px;
}

.card-spyglass-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px rgba(224, 194, 102, 0.4);
  pointer-events: none;
}

.card-spyglass-thumb:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

.card-spyglass-zoom-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.8);
  color: var(--text);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.46);
}

.card-spyglass-text {
  min-width: 0;
  color: var(--parchment-100);
  font-size: 0.875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card-spyglass-text:focus-visible {
  outline: 1px solid var(--gold-300);
  outline-offset: 2px;
}

.card-spyglass-traits {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(196, 154, 58, 0.22);
  color: var(--gold-300);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (min-width: 1101px) {
  .card-spyglass {
    display: none;
  }
}

/* --- Action dock --- */
.action-dock {
  flex: 0 0 auto;
  max-height: 48vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #c9a227 0%, #8a6d1a 100%);
  border: 2px solid #5c4a12;
  border-radius: 6px;
  padding: 0.55rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dock-title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  text-transform: uppercase;
  color: #1a1208;
  text-align: center;
  letter-spacing: 0.04em;
}

.dock-muted {
  color: #3d2914;
  font-size: 0.68rem;
  text-align: center;
  margin: 0;
}

.counter-step-summary {
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.4rem;
  background: rgba(26, 18, 8, 0.18);
  border: 1px solid rgba(26, 18, 8, 0.35);
  border-radius: 4px;
}

.counter-step-line {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: #1a1208;
}

.counter-step-bonus {
  margin-top: 0.2rem;
  font-weight: 700;
  color: #0d4f6e;
}

.replacement-summary {
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.5rem;
  background: rgba(26, 18, 8, 0.2);
  border: 1px solid rgba(26, 18, 8, 0.38);
  border-radius: 4px;
}

.replacement-summary-title {
  margin: 0 0 0.25rem;
  color: #1a1208;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.replacement-summary-text {
  margin: 0;
  color: #1a1208;
  font-size: 0.68rem;
  line-height: 1.35;
}

.replacement-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.context-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.context-panel[hidden] {
  display: none !important;
}

.context-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1208;
  line-height: 1.35;
  text-align: left;
}

.context-panel-meta-compact {
  display: none;
}

.context-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-dock-default {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#board.has-action-selection #action-dock-default,
#board.don-pick-mode #action-dock-default,
#board.attack-pick-mode #action-dock-default,
#board.effect-pick-mode #action-dock-default,
#board.board-replace-pick-mode #action-dock-default,
#board.replacement-bottom-deck-pick-mode #action-dock-default,
#board.replacement-rest-card-pick-mode #action-dock-default,
.tcg-table.has-action-selection #action-dock-default,
.tcg-table.don-pick-mode #action-dock-default,
.tcg-table.attack-pick-mode #action-dock-default,
.tcg-table.effect-pick-mode #action-dock-default,
.tcg-table.board-replace-pick-mode #action-dock-default,
.tcg-table.replacement-bottom-deck-pick-mode #action-dock-default,
.tcg-table.replacement-rest-card-pick-mode #action-dock-default {
  display: none;
}

.card-action-target {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.card-action-target.is-selected {
  overflow: visible;
  z-index: 20;
  transform: scale(1.04);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

.card-action-target.is-selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  border: 3px solid #f8f3e0;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 14px 3px rgba(255, 252, 235, 0.85),
    0 0 24px 6px rgba(255, 230, 160, 0.55);
  pointer-events: none;
  z-index: 15;
}

.card-action-target.is-selected::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 16;
}

/* Field slots are layout hit areas. A rested character reserves a square, so
   selection chrome must follow the physical card (`.card-inner`) rather than
   that outer slot. This also keeps the halo aligned after the 90deg transform. */
.card-slot--field.card-action-target.is-selected {
  overflow: visible;
  z-index: 20;
  transform: none;
  filter: none;
}

.card-slot--field.card-action-target.is-selected::before,
.card-slot--field.card-action-target.is-selected::after {
  content: none;
}

.card-slot--field.card-action-target.is-selected > .card-inner {
  outline: 3px solid #5c4300;
  outline-offset: 4px;
  box-shadow:
    0 0 0 3px #fff0a8,
    0 0 18px 5px rgba(151, 103, 0, 0.58);
}

.card-slot--hand.card-action-target.is-selected {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* La carta seleccionada de tu mano se eleva sobre las demás (en móvil, más:
   ver el bloque de la mano en <=1100px). */
.hand-panel--you .card-slot--hand {
  transition: transform 0.16s ease;
}

.hand-panel--you .card-slot--hand.card-action-target.is-selected {
  transform: translateY(-7px) scale(1.04);
  filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  .hand-panel--you .card-slot--hand {
    transition: none;
  }
}

.card-slot--hand.card-action-target.is-selected::before {
  inset: -4px;
  border-width: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 0 12px 2px rgba(255, 252, 235, 0.75),
    0 0 18px 4px rgba(255, 230, 160, 0.5);
}

/* En el abanico el slot puede ser mas estrecho que la carta: los halos de
   seleccion se dimensionan contra la carta, no contra el slot. */
.hand-row .card-slot--hand.card-action-target.is-selected::before {
  inset: auto;
  top: -4px;
  left: -4px;
  width: calc(var(--card-w-hand) + 8px);
  height: calc(var(--card-h-hand) + 8px);
  box-sizing: border-box;
}

.hand-row .card-slot--hand.card-action-target.is-selected::after {
  inset: auto;
  top: -2px;
  left: -2px;
  width: calc(var(--card-w-hand) + 4px);
  height: calc(var(--card-h-hand) + 4px);
}

.drag-path-overlay {
  --drag-path-color: #ffe08a;
  position: fixed;
  z-index: 10001;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--drag-path-color);
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.drag-path-overlay *,
.drag-path-svg {
  pointer-events: none;
}

.drag-path-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.drag-path-shadow,
.drag-path-line,
.drag-path-flow,
.drag-path-mark {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.drag-path-shadow {
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drag-path-line {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px currentColor);
  transition: stroke-width 0.12s ease, opacity 0.12s ease;
}

/* A moving highlight communicates direction without moving the aiming curve. */
.drag-path-flow {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  opacity: 0.72;
  filter: drop-shadow(0 0 4px currentColor);
  animation: drag-path-flow-forward 0.85s linear infinite;
}

.drag-path-head {
  fill: currentColor;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 1.5;
  transition: opacity 0.12s ease;
}

.drag-path-origin {
  fill: #fff8dd;
  stroke: currentColor;
  stroke-width: 3;
}

.drag-path-endpoint {
  fill: rgba(10, 19, 27, 0.86);
  stroke: currentColor;
  stroke-width: 3;
  opacity: 0;
}

.drag-path-mark {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* Neutral is dotted with an arrowhead; valid is solid with a check; invalid is
   dashed with a cross. Shape and rhythm keep the states distinct without color. */
.drag-path-overlay[data-drag-path-state="neutral"] .drag-path-line {
  stroke-dasharray: 2 9;
}

.drag-path-overlay[data-drag-path-state="valid"] {
  --drag-path-color: #65f09d;
}

.drag-path-overlay[data-drag-path-state="valid"] .drag-path-line {
  stroke-width: 5;
  stroke-dasharray: none;
}

.drag-path-overlay[data-drag-path-state="valid"] .drag-path-flow {
  stroke-width: 2.5;
  stroke-dasharray: 10 20;
  opacity: 0.82;
  animation-duration: 0.65s;
}

.drag-path-overlay[data-drag-path-state="valid"] .drag-path-head,
.drag-path-overlay[data-drag-path-state="invalid"] .drag-path-head {
  opacity: 0;
}

.drag-path-overlay[data-drag-path-state="valid"] .drag-path-endpoint,
.drag-path-overlay[data-drag-path-state="valid"] .drag-path-mark--valid,
.drag-path-overlay[data-drag-path-state="invalid"] .drag-path-endpoint,
.drag-path-overlay[data-drag-path-state="invalid"] .drag-path-mark--invalid {
  opacity: 1;
}

.drag-path-overlay[data-drag-path-state="valid"] .drag-path-endpoint {
  animation: drag-path-valid-pulse 0.9s ease-in-out infinite;
}

.drag-path-overlay[data-drag-path-state="invalid"] {
  --drag-path-color: #ff7979;
}

.drag-path-overlay[data-drag-path-state="invalid"] .drag-path-line {
  stroke-dasharray: 13 8;
  stroke-linecap: butt;
}

.drag-path-overlay[data-drag-path-state="invalid"] .drag-path-flow {
  stroke-dasharray: 3 18;
  stroke-linecap: butt;
  opacity: 0.58;
  animation-name: drag-path-flow-backward;
  animation-duration: 1.05s;
}

@keyframes drag-path-flow-forward {
  to {
    stroke-dashoffset: -48;
  }
}

@keyframes drag-path-flow-backward {
  to {
    stroke-dashoffset: 48;
  }
}

@keyframes drag-path-valid-pulse {
  50% {
    stroke-width: 5;
    filter: drop-shadow(0 0 7px currentColor);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drag-path-overlay *,
  .drag-path-overlay,
  .battle-arrow-layer * {
    animation: none !important;
    transition: none !important;
  }
}

.don-action-source {
  cursor: grab;
  transition: transform 0.15s ease, filter 0.15s ease;
  border-radius: 4px;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.don-action-source.is-selected {
  transform: scale(1.14);
  outline: 4px solid #f8f3e0;
  outline-offset: 3px;
  filter:
    drop-shadow(0 0 10px rgba(255, 252, 235, 0.98))
    drop-shadow(0 0 22px rgba(255, 230, 160, 0.85));
}

.don-action-source.is-dragging {
  cursor: grabbing;
  opacity: 0.34;
  transform: scale(0.96);
  filter: saturate(0.6);
}

.hand-drag-source {
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-drag: none;
}

/* Toda la mano propia se puede reordenar arrastrando. En la fila del móvil
   el gesto es del juego en ambos ejes: en horizontal reordena y hacia arriba
   juega la carta (la fila apenas necesita desplazarse: las cartas se solapan). */
.hand-row[data-hand-reorder] > .card-slot--hand {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.hand-drag-source.is-hand-play-dragging,
.card-slot--hand.is-hand-dragging {
  cursor: grabbing;
  opacity: 0.34;
  filter: saturate(0.55);
}

/* Por encima de la carta flotante: el hueco suele quedar bajo el puntero. */
.hand-reorder-marker {
  position: fixed;
  z-index: 10001;
  left: 0;
  top: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--gold-300);
  box-shadow: 0 0 10px rgba(224, 194, 102, 0.85);
  transform: translateX(-50%);
  pointer-events: none;
}

.hand-reorder-marker[hidden] {
  display: none;
}

.hand-play-drag-ghost {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 7px;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.62),
    0 0 20px rgba(186, 255, 211, 0.7);
  pointer-events: none;
  user-select: none;
  transform: rotate(2deg) scale(1.05);
}

.hand-play-drag-ghost > .card-inner {
  width: 100%;
  height: 100%;
  transform: none;
}

.tcg-table.hand-play-drag-mode .mat-half[data-human-mat="true"].is-hand-play-viable,
.hand-play-drag-mode .mat-half[data-human-mat="true"].is-hand-play-viable {
  border-color: rgba(186, 255, 211, 0.88);
  box-shadow:
    inset 0 0 55px rgba(5, 122, 65, 0.25),
    inset 0 0 0 2px rgba(186, 255, 211, 0.35),
    0 0 18px rgba(5, 122, 65, 0.48);
}

.tcg-table.hand-play-drag-mode .mat-half[data-human-mat="true"].is-hand-play-drop-target,
.hand-play-drag-mode .mat-half[data-human-mat="true"].is-hand-play-drop-target {
  border-color: #baffd3;
  box-shadow:
    inset 0 0 70px rgba(5, 122, 65, 0.42),
    inset 0 0 0 3px rgba(186, 255, 211, 0.72),
    0 0 24px rgba(5, 122, 65, 0.7);
}

.don-drag-ghost {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform: scale(1.08);
  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 12px rgba(255, 230, 160, 0.72));
}

.tcg-table.don-pick-mode .card-action-target[data-action-target="unit"].is-attach-viable:not(.is-selected),
.don-pick-mode .card-action-target[data-action-target="unit"].is-attach-viable:not(.is-selected) {
  --target-edge: #07546d;
  --target-keyline: #c5f2ff;
  --target-glow: rgba(14, 116, 144, 0.58);
  cursor: crosshair;
}

.tcg-table.don-drag-mode
  .card-action-target[data-action-target="unit"].is-don-drop-target
  > .card-inner,
.don-drag-mode
  .card-action-target[data-action-target="unit"].is-don-drop-target
  > .card-inner {
  outline-style: solid;
  transform: translateY(-3px) scale(1.035);
}

.tcg-table.attack-pick-mode .card-attack-target[data-action-target="attack-target"].is-attack-viable:not(.is-selected),
.attack-pick-mode .card-attack-target[data-action-target="attack-target"].is-attack-viable:not(.is-selected) {
  --target-edge: #7f1d1d;
  --target-keyline: #fecaca;
  --target-glow: rgba(185, 28, 28, 0.58);
  cursor: crosshair;
}

.attack-drag-source {
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.attack-drag-source.is-attack-draggable {
  cursor: grab;
}

.attack-drag-source.is-attack-dragging {
  cursor: grabbing;
}

.attack-drag-ghost {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 5px;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.58),
    0 0 18px rgba(254, 202, 202, 0.76);
  pointer-events: none;
  user-select: none;
  transform: rotate(-2deg) scale(1.04);
}

.attack-drag-ghost > .card-inner {
  width: 100%;
  height: 100%;
  transform: none;
}

.tcg-table.attack-drag-mode .battle-unit.is-attack-drop-target > .card-inner,
.attack-drag-mode .battle-unit.is-attack-drop-target > .card-inner {
  outline-style: solid;
}

.card-attack-target {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tcg-table.effect-pick-mode .card-effect-target[data-action-target="effect-target"].is-effect-viable:not(.is-selected),
.tcg-table.effect-pick-mode .battle-unit.is-effect-viable:not(.is-selected),
.effect-pick-mode .card-effect-target[data-action-target="effect-target"].is-effect-viable:not(.is-selected),
.effect-pick-mode .battle-unit.is-effect-viable:not(.is-selected) {
  --target-edge: #075b32;
  --target-keyline: #baffd3;
  --target-glow: rgba(5, 122, 65, 0.58);
  cursor: crosshair;
  pointer-events: auto;
}

.tcg-table.board-replace-pick-mode .card-board-replace-target[data-action-target="board-replace"].is-board-replace-viable:not(.is-selected),
.tcg-table.board-replace-pick-mode .battle-unit.is-board-replace-viable:not(.is-selected),
.board-replace-pick-mode .card-board-replace-target[data-action-target="board-replace"].is-board-replace-viable:not(.is-selected),
.board-replace-pick-mode .battle-unit.is-board-replace-viable:not(.is-selected) {
  --target-edge: #075b32;
  --target-keyline: #baffd3;
  --target-glow: rgba(5, 122, 65, 0.58);
  cursor: pointer;
}

.tcg-table.replacement-bottom-deck-pick-mode .card-replacement-cost-target[data-action-target="replacement-bottom-deck"].is-replacement-bottom-deck-viable:not(.is-selected),
.tcg-table.replacement-bottom-deck-pick-mode .battle-unit.is-replacement-bottom-deck-viable:not(.is-selected),
.replacement-bottom-deck-pick-mode .card-replacement-cost-target[data-action-target="replacement-bottom-deck"].is-replacement-bottom-deck-viable:not(.is-selected),
.replacement-bottom-deck-pick-mode .battle-unit.is-replacement-bottom-deck-viable:not(.is-selected) {
  --target-edge: #765800;
  --target-keyline: #ffe58b;
  --target-glow: rgba(151, 103, 0, 0.58);
  cursor: pointer;
}

.tcg-table.replacement-rest-card-pick-mode .card-replacement-rest-target[data-action-target="replacement-rest-card"].is-replacement-rest-card-viable:not(.is-selected),
.tcg-table.replacement-rest-card-pick-mode [data-action-target="replacement-rest-card"].is-replacement-rest-card-viable:not(.is-selected),
.replacement-rest-card-pick-mode .card-replacement-rest-target[data-action-target="replacement-rest-card"].is-replacement-rest-card-viable:not(.is-selected),
.replacement-rest-card-pick-mode [data-action-target="replacement-rest-card"].is-replacement-rest-card-viable:not(.is-selected) {
  --target-edge: #765800;
  --target-keyline: #ffe58b;
  --target-glow: rgba(151, 103, 0, 0.58);
  cursor: pointer;
}

.card-slot--field:is(
    .is-attach-viable,
    .is-attack-viable,
    .is-effect-viable,
    .is-board-replace-viable,
    .is-replacement-bottom-deck-viable,
    .is-replacement-rest-card-viable
  ):not(.is-selected) {
  overflow: visible;
  /* `--row-stack` keeps the mobile character row's reversed stacking while
     picking targets; elsewhere it is unset and every target sits at 10. */
  z-index: calc(10 + var(--row-stack, 0));
  outline: 0;
  animation: none;
}

.card-slot--field:is(
    .is-attach-viable,
    .is-attack-viable,
    .is-effect-viable,
    .is-board-replace-viable,
    .is-replacement-bottom-deck-viable,
    .is-replacement-rest-card-viable
  ):not(.is-selected) > .card-inner {
  outline: 3px dashed var(--target-edge);
  outline-offset: 4px;
  box-shadow:
    0 0 0 3px var(--target-keyline),
    0 0 16px 4px var(--target-glow);
}

.tcg-table.effect-pick-mode .don-token.card-effect-target.is-effect-viable:not(.is-selected),
.effect-pick-mode .don-token.card-effect-target.is-effect-viable:not(.is-selected) {
  position: relative;
  z-index: 10;
  outline: 3px dashed var(--target-edge);
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px var(--target-keyline),
    0 0 16px 4px var(--target-glow);
}

.card-effect-target,
.card-replacement-cost-target,
.card-replacement-rest-target {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tcg-table.rested-don-pick-mode .don-token--rested.is-rested-don-viable,
.rested-don-pick-mode .don-token--rested.is-rested-don-viable {
  outline: 3px dashed #765800;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe58b, 0 0 14px 3px rgba(151, 103, 0, 0.58);
  cursor: crosshair;
}

.tcg-table.return-don-pick-mode .don-token[data-return-don-pick],
.return-don-pick-mode .don-token[data-return-don-pick] {
  outline: 3px dashed #765800;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe58b, 0 0 14px 3px rgba(151, 103, 0, 0.58);
  cursor: crosshair;
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

.tcg-table.replacement-rest-card-pick-mode .don-token.don-rest-card-pick.is-replacement-rest-card-viable,
.replacement-rest-card-pick-mode .don-token.don-rest-card-pick.is-replacement-rest-card-viable {
  outline: 3px dashed #765800;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe58b, 0 0 14px 3px rgba(151, 103, 0, 0.58);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

.return-don-pick-mode .don-stack:has([data-return-don-pick]) {
  pointer-events: auto;
  z-index: 5;
}

.return-don-pick-mode .card-slot--field:has([data-return-don-pick]),
.replacement-rest-card-pick-mode
  .card-slot--field:has(.don-rest-card-pick.is-replacement-rest-card-viable) {
  z-index: 20;
}

/* En modo return-don, los DON adjuntos al líder/personajes viven dentro de
   `.don-stack`, solapado por `.card-inner` (z-index 2). Sin esto la carta
   captura el clic antes de que llegue al token DON (los DON del área de coste
   funcionan porque no tienen carta encima). Hacemos transparente al puntero la
   carta cuyo slot contiene un DON seleccionable para que el clic alcance el token. */
.return-don-pick-mode .card-slot--field:has([data-return-don-pick]) .card-inner {
  pointer-events: none;
}

.replacement-rest-card-pick-mode .don-stack:has(.don-rest-card-pick.is-replacement-rest-card-viable) {
  pointer-events: auto;
  z-index: 5;
}

.replacement-rest-card-pick-mode .card-slot--field:has(.don-rest-card-pick.is-replacement-rest-card-viable) .card-inner {
  pointer-events: none;
}

.tcg-table.return-don-pick-mode .don-return-pick.is-return-don-viable,
.return-don-pick-mode .don-return-pick.is-return-don-viable,
.tcg-table.return-don-pick-mode .don-attached.don-return-pick.is-return-don-viable,
.return-don-pick-mode .don-attached.don-return-pick.is-return-don-viable {
  outline: 3px dashed #765800;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe58b, 0 0 14px 3px rgba(151, 103, 0, 0.58);
  cursor: crosshair;
  pointer-events: auto;
}

.tcg-table.replacement-rest-card-pick-mode .don-attached.don-rest-card-pick.is-replacement-rest-card-viable,
.replacement-rest-card-pick-mode .don-attached.don-rest-card-pick.is-replacement-rest-card-viable {
  outline: 3px dashed #765800;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffe58b, 0 0 14px 3px rgba(151, 103, 0, 0.58);
  cursor: pointer;
  pointer-events: auto;
}

.don-return-pick {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tcg-table.discard-pick-mode .card-slot--hand.card-action-target.is-discard-viable,
.discard-pick-mode .card-slot--hand.card-action-target.is-discard-viable {
  outline: 2px dashed #f87171;
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.45);
  cursor: crosshair;
}

.tcg-table.reveal-pick-mode .card-slot--hand.card-action-target.is-reveal-viable,
.reveal-pick-mode .card-slot--hand.card-action-target.is-reveal-viable {
  outline: 2px dashed #38bdf8;
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
  cursor: crosshair;
}

.tcg-table.hand-to-life-pick-mode .card-slot--hand.card-action-target.is-hand-to-life-viable,
.hand-to-life-pick-mode .card-slot--hand.card-action-target.is-hand-to-life-viable {
  outline: 2px dashed #34d399;
  outline-offset: 3px;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
  cursor: crosshair;
}

.don-rested-pick {
  transition: transform 0.15s ease, filter 0.15s ease;
}

.wizard-target-hint {
  margin: 0 0 0.75rem;
  color: #e8e0d0;
  font-size: 0.95rem;
}

.cost-row--attachable .don-action-source:hover {
  transform: scale(1.06);
}

.action-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.action-hotkey-hint {
  display: none;
}

.action-hotkey {
  display: none;
}

/* Chapa de los atajos del dock (board.js): el <kbd> de los tooltips del replay,
   en tinta sobre el latón. Solo se ve con ratón en escritorio, donde hay teclado.
   Es contenido generado sin texto alternativo: no entra en el nombre del botón.
   La salida «no hacer» lleva dos chapas juntas, 0 y Esc. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .action-dock .btn-action[data-action-hotkey-label]::before,
  .turn-order-dialog .btn-gold[data-action-hotkey-label]::before,
  .opening-draw-panel [data-action-hotkey-label]::before {
    content: attr(data-action-hotkey-label);
    content: attr(data-action-hotkey-label) / "";
  }

  .action-dock .btn-action[data-action-hotkey-alt-label]::after,
  .turn-order-dialog .btn-gold[data-action-hotkey-alt-label]::after,
  .opening-draw-panel [data-action-hotkey-alt-label]::after {
    content: attr(data-action-hotkey-alt-label);
    content: attr(data-action-hotkey-alt-label) / "";
    order: -1;
    margin-inline-start: -0.2rem;
  }

  .turn-order-dialog .btn-gold[data-action-hotkey-label],
  .opening-draw-continue[data-action-hotkey-label] {
    gap: 0.4rem;
  }

  .action-dock .btn-action[data-action-hotkey-label]::before,
  .action-dock .btn-action[data-action-hotkey-alt-label]::after,
  .turn-order-dialog .btn-gold[data-action-hotkey-label]::before,
  .turn-order-dialog .btn-gold[data-action-hotkey-alt-label]::after,
  .opening-draw-panel [data-action-hotkey-label]::before,
  .opening-draw-panel [data-action-hotkey-alt-label]::after {
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    min-width: 1.55rem;
    /* Sobresale sobre el relleno del botón: no cambia su altura. */
    margin-block: -0.2rem;
    padding: 0.1rem 0.36rem 0.16rem;
    border: 1px solid rgba(224, 194, 102, 0.5);
    border-radius: 4px;
    background: #1a1208;
    box-shadow: inset 0 -2px 0 rgba(224, 194, 102, 0.22);
    color: var(--parchment-100);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
  }

  .action-dock .btn-action[data-action-hotkey-label]::before,
  .turn-order-dialog .btn-gold[data-action-hotkey-label]::before,
  .opening-draw-panel [data-action-hotkey-label]::before {
    order: -1;
  }

  .opening-draw-choice[data-action-hotkey-label]::before {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
  }

  /* «0» y «Esc» juntos: cada ficha en su columna, el texto en la última. */
  .opening-draw-choice[data-action-hotkey-alt-label] {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 0.4rem;
  }

  .opening-draw-choice[data-action-hotkey-alt-label]::after {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    margin-inline-start: 0;
  }
}

.action-dock .btn-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1rem 0.85rem;
  min-height: 3.4rem;
  background: linear-gradient(180deg, #e8c96a, #c9a227);
  border: 2px solid #5c4a12;
  border-radius: 6px;
  color: #1a1208;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.btn-action {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  padding: 0.38rem 0.45rem;
  background: linear-gradient(180deg, #e8c96a, #c9a227);
  border: 1px solid #5c4a12;
  border-radius: 3px;
  color: #1a1208;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Chip de cantidad recomendada (el máximo, mostrado primero): mismo latón,
   con un aro sutil para señalarlo sin auto-elegirlo (FAQ: se puede dar menos). */
.btn-action-recommended {
  border-color: #8a6d1a;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.55);
  font-weight: 700;
}

.action-dock .action-label {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.action-dock .btn-primary {
  background: linear-gradient(180deg, #ffe082, #ffb300);
  border-color: #7a5a00;
}

.action-label {
  flex: 1;
  min-width: 0;
}

.side-left { gap: 0.4rem; }

.hand-panel {
  background: var(--panel);
  border: 2px solid var(--accent-dark);
  border-radius: 4px;
  padding: 0.35rem;
  flex-shrink: 0;
}

.hand-panel--opp .hand-row {
  --card-w-hand: 62px;
  --card-h-hand: 86px;
}

/* La mano propia ya no crece (una sola fila con solape): el alto sobrante
   de la columna lo absorbe el historial (.game-log, flex: 1). */
.hand-panel--you { flex: 0 0 auto; display: flex; flex-direction: column; }

.hand-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.player-seat-identity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.hand-panel--you .player-seat-identity {
  color: var(--player-you-color);
}

.hand-panel--opp .player-seat-identity,
.opp-hand-trigger .player-seat-identity,
.opp-hand-dialog-title .player-seat-identity {
  color: var(--player-opponent-color);
}

.player-seat-avatar {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  flex: 0 0 1.35rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(90, 58, 34, 0.1);
  border: 1px solid rgba(90, 58, 34, 0.32);
  border-radius: 999px;
}

.player-seat-avatar-image {
  display: block;
}

.player-seat-avatar .account-menu-silhouette {
  width: 0.95rem;
  height: 0.95rem;
}

.player-seat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-seat-hand-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.player-hand-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

.hand-revealed-label {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--text-secondary);
}

.hand-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-content: flex-start;
  padding: 10px;
  box-sizing: border-box;
}

/* Abanico: cada slot reserva carta + hueco; cuando no caben, los slots
   encogen (flex-shrink) y las cartas — de ancho fijo dentro del slot — se
   solapan en horizontal (las siguientes pintan encima por orden DOM). */
.hand-row .card-slot--hand {
  flex: 0 1 calc(var(--card-w-hand) + 0.3rem);
  width: auto;
  min-width: 20px;
  overflow: visible;
  box-shadow: none;
}

.hand-row .card-slot--hand .card-inner {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Al pasar el raton NO se levanta la carta (taparia a su vecina derecha):
   la carta completa ya se ve en el preview de la columna derecha. */

/* La última carta no encoge: evita que sobresalga del panel por la derecha. */
.hand-row .card-slot--hand:last-child {
  flex-shrink: 0;
  min-width: var(--card-w-hand);
}

/* El diálogo de la mano rival (móvil / fin de partida) sigue en cuadrícula. */
.hand-row--opp-dialog {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.hand-row--opp-dialog .card-slot--hand {
  flex: 0 0 auto;
}

.hand-panel--you .hand-row {
  flex: none;
  min-height: calc(var(--card-h-hand) + 20px);
}

.game-log {
  --log-you-color: var(--player-you-color);
  --log-opponent-color: var(--player-opponent-color);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 80px;
  min-width: 0;
  overflow: hidden;
  background: rgba(40, 40, 40, 0.75);
  border: 2px solid #555;
  border-radius: 4px;
  padding: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.game-log-header {
  flex: 0 0 auto;
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #666;
}

.game-log-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: auto;
  padding-top: 0.4rem;
}

.game-log-anchor {
  height: 1px;
  overflow: hidden;
}

.game-chat-form {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  margin-top: 0.25rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(196, 154, 58, 0.28);
}

.game-chat-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 0.2rem;
  background: transparent;
  border: 0;
  color: #eee;
  font: inherit;
  outline: none;
}

.game-chat-input::placeholder {
  color: rgba(221, 221, 221, 0.48);
}

.game-chat-input:focus {
  box-shadow: inset 0 -1px 0 var(--accent);
}

.game-chat-submit {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.game-chat-submit:disabled {
  cursor: wait;
  opacity: 0.45;
}

.log-line { margin-bottom: 0.2rem; color: #ddd; }

.log-player {
  color: #ddd;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.log-player--you {
  color: var(--log-you-color);
}

.log-player--opponent {
  color: var(--log-opponent-color);
}

.log-player-label {
  font-weight: 800;
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ccc;
}

.history-list li {
  display: grid;
  grid-template-columns: minmax(3ch, max-content) minmax(0, 1fr);
  align-items: start;
  column-gap: 0.45em;
  margin-bottom: 0.25rem;
}

.history-index {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-list li.log-player--you .history-index {
  color: var(--log-you-color);
}

.history-list li.log-player--opponent .history-index {
  color: var(--log-opponent-color);
}

.history-entry {
  min-width: 0;
  overflow-wrap: anywhere;
}

.history-list li.history-load-older {
  display: block;
  margin-bottom: 0.45rem;
}

.history-load-older-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  background: transparent;
  color: rgba(232, 217, 181, 0.72);
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.history-load-older-button:hover,
.history-load-older-button:focus-visible {
  color: #fff;
}

.history-load-older-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.history-chat-message {
  --chat-accent: var(--log-you-color);
  text-transform: none !important;
}

.history-chat-message.log-player--opponent {
  --chat-accent: var(--log-opponent-color);
}

.history-chat-marker {
  display: none;
  min-width: 0;
}

.history-chat-entry {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 6px 9px;
  border-inline-start: 2px solid var(--chat-accent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--chat-accent) 9%, transparent);
  color: var(--parchment-100);
  font-weight: 800;
  text-shadow: none;
}

.history-chat-author {
  color: var(--chat-accent);
  text-transform: none;
}

.history-card-ref {
  color: inherit;
  cursor: zoom-in;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.history-card-ref:hover {
  color: var(--accent);
  outline: none;
  text-decoration-style: solid;
}

/* --- Playmat column --- */
.mat-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 0;
}

.battle-arrow-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #ff5a5f;
  pointer-events: none;
  /* Las unidades de combate (incluidos sus DON!! adjuntos) están en 21. */
  z-index: 22;
  overflow: visible;
}

.battle-unit--attacker,
.battle-unit--defender {
  position: relative;
  z-index: 21;
  overflow: visible;
  outline: 0;
  box-shadow: none;
}

.battle-unit--attacker > .card-inner {
  outline: 2px solid #ff6b6b;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.65);
}

.battle-unit--defender > .card-inner {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.65);
}

.battle-auto-resolve {
  display: none;
}

.mat-half {
  flex: 1;
  min-height: 0;
  border: 3px solid rgba(90, 58, 34, 0.55);
  border-radius: 6px;
  overflow: hidden;
  background-color: #241a10;
  background-image: radial-gradient(120% 100% at 50% 0%, rgba(224, 194, 102, 0.07), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.32));
  box-shadow: inset 0 0 55px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(224, 194, 102, 0.06);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.mat-half--flipped {
  transform: rotate(180deg);
}

.mat-half--flipped .mat-inner {
  transform: rotate(180deg);
  /* En el mat rival la banda de DON!!/cost area va primero (arriba). */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "don   cost  cost  cost"
    "life  chars chars deck"
    ".     chars chars trash";
}

.mat-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 64px 1fr 64px 64px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "life  chars chars deck"
    ".     chars chars trash"
    "don   cost  cost  cost";
  gap: 0.25rem;
  padding: 0.35rem;
}

@media (min-width: 1601px) {
  :root {
    --card-w-field: clamp(72px, 4.5vw, 108px);
    --card-h-field: clamp(100px, 6.25vw, 150px);
    --card-w-hand: clamp(88px, 5.5vw, 132px);
    --card-h-hand: clamp(122px, 7.625vw, 183px);
    --card-w-mini: clamp(48px, 3vw, 72px);
    --card-h-mini: clamp(66px, 4.125vw, 99px);
    --card-w-life: clamp(52px, 3.25vw, 78px);
    --card-h-life: clamp(72px, 4.5vw, 108px);
    --don-token-w: clamp(48px, 3vw, 72px);
    --don-token-h: clamp(66px, 4.125vw, 99px);
  }

  .tcg-table {
    max-width: 2400px;
    margin: 0 auto;
  }

  .table-body {
    grid-template-columns:
      minmax(clamp(330px, 20.625vw, 495px), clamp(580px, 36.25vw, 870px))
      minmax(0, clamp(700px, 43.75vw, 1050px))
      minmax(clamp(180px, 11.25vw, 270px), clamp(288px, 18vw, 432px));
  }

  .hand-panel--opp .hand-row {
    --card-w-hand: clamp(62px, 3.875vw, 93px);
    --card-h-hand: clamp(86px, 5.375vw, 129px);
  }

  .mat-column {
    gap: clamp(0.35rem, 0.35vw, 0.525rem);
  }

  .mat-inner {
    grid-template-columns:
      clamp(64px, 4vw, 96px)
      1fr
      clamp(64px, 4vw, 96px)
      clamp(64px, 4vw, 96px);
  }

  .char-row--units {
    gap: clamp(1rem, 1vw, 1.5rem);
  }

  .char-row--leader {
    gap: clamp(0.35rem, 0.35vw, 0.525rem);
  }
}

.zone {
  position: relative;
  border: 2px dashed var(--zone-border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.zone-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  padding: 0.15rem 0.3rem;
  text-transform: uppercase;
}

.zone-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  min-height: 0;
  overflow: hidden;
}

.zone-trash { grid-area: trash; }

.zone-trash .zone-content {
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.15rem;
  /* Altura estable con o sin cartas. */
  min-height: calc(var(--card-h-mini) + 0.4rem);
}

.zone-trash-trigger {
  all: unset;
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: 4px;
}

.zone-trash-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

.zone-trash-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.trash-dialog {
  border: none;
  padding: 0;
  max-width: min(92vw, 760px);
  width: min(92vw, 760px);
  max-height: 85vh;
  background: transparent;
  color: inherit;
}

.trash-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.trash-dialog-panel {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 1rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trash-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.trash-dialog-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.trash-dialog-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0.5rem;
  overflow-y: auto;
  padding: 0.25rem;
}

.trash-card-zoom {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 1.05rem;
  right: 0.25rem;
  z-index: 4;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.8);
  color: var(--text);
  cursor: zoom-in;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.46);
}

.trash-card-zoom::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  width: 0.48rem;
  height: 0.48rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.trash-card-zoom::after {
  content: "";
  position: absolute;
  left: 0.88rem;
  top: 0.9rem;
  width: 0.43rem;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.trash-card-zoom:hover,
.trash-card-zoom:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.trash-card-zoom:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 5px 14px rgba(0, 0, 0, 0.46);
}

.trash-dialog-close {
  flex-shrink: 0;
}

.zone-life { grid-area: life; }

.zone-life .zone-content {
  overflow: visible;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.15rem;
}
.zone-deck { grid-area: deck; }
.zone-don-deck { grid-area: don; }

.zone-don-deck .zone-content {
  /* Altura estable con o sin cartas. */
  min-height: calc(var(--card-h-mini) + 0.4rem);
}

.zone-characters { grid-area: chars; }

.zone-characters .zone-content {
  overflow: visible;
}
.zone-cost { grid-area: cost; }

.zone-cost .zone-content {
  /* Altura estable con o sin DON!! en juego. */
  min-height: calc(var(--don-token-h) + 0.4rem);
}

.char-row, .cost-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.char-row--units {
  --don-base: 14px;
  --don-fan-step: 5px;
  gap: 1rem;
  flex-wrap: nowrap;
  align-items: flex-end;
  overflow: visible;
}

.char-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
}

.mat-half--flipped .char-area {
  flex-direction: column-reverse;
}

.char-row--leader {
  --don-base: 16px;
  --don-fan-step: 6px;
  flex: 0 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow: visible;
}

.leader-line-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

/* A rested leader and stage keep their upright slots, so both turned cards
   spill into the gap between them and overlap. Layer 0 keeps the whole stage,
   including its own pick and selection layers, under the leader's artwork
   (layer 2): the overlap hides the stage's left edge, its name strip, instead
   of the power badge on the leader's right edge. The leader keeps its battle
   and pick layers, and the stage label keeps its order inside the stage. */
.leader-line-slot--stage {
  position: relative;
  z-index: 0;
}

.slot-label {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}

.cost-row {
  justify-content: flex-start;
  padding: 0 0.35rem;
  flex-wrap: wrap;
}

.cost-stat, .cost-rested {
  font-size: 0.65rem;
  font-weight: 700;
  margin-right: 0.35rem;
}

.don-token {
  width: var(--don-token-w);
  height: var(--don-token-h);
  object-fit: contain;
  flex-shrink: 0;
}

.don-token--rested {
  transform: rotate(90deg);
}

.life-stack, .deck-stack {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.life-stack-pile {
  --life-step: 12px;
  --life-card-h: var(--card-h-life);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--card-w-life);
}

.life-stack-pile > .stack-count--life {
  top: 2px;
  bottom: auto;
  z-index: 5;
}

.life-stack-card {
  position: relative;
  width: var(--card-w-life);
  height: var(--life-card-h);
  flex-shrink: 0;
}

.life-stack-card + .life-stack-card {
  margin-top: calc(-1 * (var(--life-card-h) - var(--life-step)));
}

.stack-count, .zone-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}

.zone-empty {
  font-size: 0.7rem;
  color: var(--muted);
}

/* --- Cards --- */
.card-slot {
  position: relative;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.card-slot--field {
  width: var(--card-w-field);
  height: var(--card-h-field);
}

.card-slot--field:has(.don-stack),
.card-slot--field:has(.status-badges),
.card-slot--has-don {
  overflow: visible;
}

.card-slot--hand {
  width: var(--card-w-hand);
  height: var(--card-h-hand);
}

.card-slot--hand.card-action-target.is-selected {
  z-index: 25;
}

.card-slot--mini {
  width: var(--card-w-mini);
  height: var(--card-h-mini);
}

.card-slot--life {
  width: var(--card-w-life);
  height: var(--card-h-life);
}

/* Grosor del mazo: un canto más por cada tramo de diez cartas (mat_half.html
   calcula data-deck-tier; 31 o más = 4). */
.zone-deck .card-slot--life[data-deck-tier] {
  border-radius: 4px;
}

.zone-deck .card-slot--life[data-deck-tier="1"] {
  box-shadow: 1px 1px 0 #1d2b5c, 2px 3px 6px rgba(0, 0, 0, 0.45);
}

.zone-deck .card-slot--life[data-deck-tier="2"] {
  box-shadow: 1px 1px 0 #1d2b5c, 2px 2px 0 #18244d, 3px 4px 8px rgba(0, 0, 0, 0.45);
}

.zone-deck .card-slot--life[data-deck-tier="3"] {
  box-shadow:
    1px 1px 0 #1d2b5c,
    2px 2px 0 #18244d,
    3px 3px 0 #131d3f,
    4px 5px 10px rgba(0, 0, 0, 0.45);
}

.zone-deck .card-slot--life[data-deck-tier="4"] {
  box-shadow:
    1px 1px 0 #1d2b5c,
    2px 2px 0 #18244d,
    3px 3px 0 #131d3f,
    4px 4px 0 #0f1733,
    5px 7px 12px rgba(0, 0, 0, 0.45);
}

/* En móvil y tablet el contador queda a 3 px del mazo: los cantos crecen hacia
   la derecha y bajan como mucho 2 px para no taparlo. */
@media (max-width: 1100px) {
  .zone-deck .card-slot--life[data-deck-tier="1"] {
    box-shadow: 1px 0.5px 0 #1d2b5c, 1px 2px 3px rgba(0, 0, 0, 0.35);
  }

  .zone-deck .card-slot--life[data-deck-tier="2"] {
    box-shadow: 1px 0.5px 0 #1d2b5c, 2px 1px 0 #18244d, 2px 2px 3px rgba(0, 0, 0, 0.35);
  }

  .zone-deck .card-slot--life[data-deck-tier="3"] {
    box-shadow:
      1px 0.5px 0 #1d2b5c,
      2px 1px 0 #18244d,
      3px 1.5px 0 #131d3f,
      3px 2px 4px rgba(0, 0, 0, 0.35);
  }

  .zone-deck .card-slot--life[data-deck-tier="4"] {
    box-shadow:
      1px 0.5px 0 #1d2b5c,
      2px 1px 0 #18244d,
      3px 1.5px 0 #131d3f,
      4px 2px 0 #0f1733,
      4px 2px 4px rgba(0, 0, 0, 0.35);
  }
}

/* Descarte en montón a partir de dos cartas: asoman dos cartas torcidas. */
.zone-trash .card-slot--pile {
  position: relative;
  isolation: isolate;
}

.zone-trash .card-slot--pile::before,
.zone-trash .card-slot--pile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 5px;
  background: #d9ccb0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}

.zone-trash .card-slot--pile::before {
  transform: rotate(-7deg) translate(-2px, 1px);
}

.zone-trash .card-slot--pile::after {
  transform: rotate(5deg) translate(2px, 2px);
}

.card-slot--leader {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.card-slot--leader.card-action-target.is-selected {
  outline: none;
}

.card-slot--empty {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.12);
  box-shadow: none;
}

.card-slot.rested {
  overflow: visible;
}

.page-play .card-slot--field.rested:not(.card-slot--empty) {
  background: transparent;
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}

/* Rest is communicated by orientation, never by fading the physical card.
   Keep the invariant on both the slot and its artwork so selection animations
   cannot make rested leaders, characters, stages or DON!! translucent. */
.page-play .card-slot.rested,
.page-play .card-slot.rested .card-inner,
.page-play .card-slot.rested .don-attached,
.page-play .don-token--rested {
  opacity: 1 !important;
}

.page-play .card-slot.rested .card-inner,
.page-play .card-slot.rested .don-attached,
.page-play .don-token--rested {
  filter: none !important;
}

/* Only the physical card rests. Attached DON!! cards are independent pieces
   and remain upright behind it. The turn itself is animated by board.js after
   each swap, in live matches and replays alike. */
.card-slot.rested .card-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

.char-row--units .card-slot--field.rested {
  width: var(--card-h-field);
  height: var(--card-w-field);
}

.char-row--units .card-slot--field.rested .card-inner {
  width: var(--card-w-field);
  height: var(--card-h-field);
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.card-slot--field .card-inner {
  z-index: 2;
}

/* `fill` y no `cover`: los huecos ya tienen proporción de carta, pero 63:88 y
   480×671/600×838 difieren en fracciones de píxel. Con `cover` el sobrante se
   recorta y Chrome deja de usar su reducción de calidad: el texto se empasta.
   En huecos de carta, `fill` deforma como mucho ~2,5 %; el mazo de DON!! del
   móvil (32×43) llega al 4 %, poco más de 1 px. Lo mismo vale para el resto de
   imágenes de carta completa en huecos de carta. */
.card-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

/* Sombra muy sutil de las cartas sobre la mesa. drop-shadow sigue las esquinas
   redondeadas (transparentes) de la propia imagen. */
.mat-half .card-slot--field .card-image,
.hand-panel--you .card-slot--hand .card-image {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.26)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16));
}

/* Con ratón, la carta del campo sin girar sube 2 px al pasar por encima. Usa
   `translate` y no `transform`: el giro de descanso/enderezado (transform,
   animado por board_presentation.js) no debe recibir ninguna transición CSS. */
@media (hover: hover) and (pointer: fine) {
  .card-slot--field:not(.rested):not(.card-slot--empty) > .card-inner {
    transition: translate 0.14s ease;
  }

  .card-slot--field:not(.rested):not(.card-slot--empty):hover > .card-inner {
    translate: 0 -2px;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .card-slot--field:not(.rested):not(.card-slot--empty) > .card-inner {
    transition: none;
  }
}

.card-text-fallback {
  padding: 0.25rem;
  font-size: 0.55rem;
  height: 100%;
  background: #1a1208;
}

.don-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.don-attached {
  /* DON!! adjuntos recogidos bajo la carta: asoman 7 px y 3 px más por cada
     uno. Estos valores propios mandan sobre los que declaran las filas. */
  --don-base: 7px;
  --don-fan-step: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--card-w-field);
  height: var(--card-h-field);
  object-fit: fill;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translate(
    calc(-1 * (var(--don-base) + var(--don-i) * var(--don-fan-step))),
    calc(var(--don-base) + var(--don-i) * var(--don-fan-step))
  );
  z-index: calc(0 - var(--don-i));
}

.don-count-label {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  color: #ff4dad;
  -webkit-text-stroke: 0.6px #fff;
  paint-order: stroke fill;
  text-shadow:
    0 0 2px #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff,
    0 1px 0 #fff,
    0 -1px 0 #fff;
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
}

.power-badge {
  position: absolute;
  min-width: 2.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.06rem 0.28rem;
  border-radius: 2px;
  background: #050505;
  color: #f4f1e8;
  text-align: center;
  z-index: 7;
  top: 1px;
  right: 1px;
}

/* Coste efectivo cuando un efecto lo modifica. */
.cost-badge {
  position: absolute;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.06rem 0.28rem;
  border-radius: 2px;
  background: #050505;
  color: #f4f1e8;
  z-index: 2;
  top: 1px;
  left: 1px;
}

.power-badge--positive,
.cost-badge--positive {
  color: #9ef0b8;
  font-weight: 900;
}

.power-badge--negative,
.cost-badge--negative {
  color: #ff8585;
  font-weight: 900;
}

.status-badges {
  position: absolute;
  bottom: 14%;
  right: 1px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}

.status-badge {
  padding: 0.08rem 0.35rem;
  border-radius: 2px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-badge--cannot_attack,
.status-badge--cannot_rested {
  width: min(64px, calc(var(--card-w-field) - 2px));
  padding: 0.14rem 0.25rem;
  line-height: 0.92;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
}

@media (max-width: 1100px) {
  .status-badge--cannot_attack,
  .status-badge--cannot_rested {
    width: calc(var(--card-w-field) - 2px);
    padding: 0.125rem;
    font-size: 0.328125rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 1100px) and (max-height: 600px) {
  .status-badge--cannot_attack,
  .status-badge--cannot_rested {
    padding: 0.1rem;
    font-size: 0.28125rem;
  }
}

.status-badge--freeze {
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.95), rgba(14, 165, 233, 0.95));
  color: #0f172a;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

.status-badge--negate {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(100, 116, 139, 0.95));
  color: #0f172a;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.45);
}

.status-badge--cannot_attack {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(220, 38, 38, 0.95));
  color: #fff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
}

.status-badge--cannot_rested {
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.95), rgba(190, 18, 60, 0.95));
  color: #fff;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.45);
}

.status-badge--rush {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.95), rgba(22, 163, 74, 0.95));
  color: #052e16;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
}

.status-badge--rush_character {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(13, 148, 136, 0.95));
  color: #042f2e;
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.45);
}

.status-badge--blocker {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(217, 119, 6, 0.95));
  color: #1c1000;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.45);
}

.status-badge--unblockable {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(124, 58, 237, 0.95));
  color: #fff;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.45);
}

.status-badge--double_attack {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(37, 99, 235, 0.95));
  color: #eff6ff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);
}

.status-badge--attack_active {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.95), rgba(20, 184, 166, 0.95));
  color: #112018;
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.4);
}

.btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.btn-gold {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 2.625rem;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1rem;
  color: var(--btn-gold-color);
  background: var(--btn-gold-background);
  border: 0;
  border-radius: var(--btn-gold-radius);
  box-shadow: var(--btn-gold-shadow);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: filter 140ms ease, box-shadow 140ms ease;
}

.btn-gold--full {
  width: 100%;
}

.btn-gold:hover {
  filter: brightness(1.05);
  color: var(--btn-gold-color);
}

.btn-gold:focus-visible {
  outline: none;
  box-shadow: var(--btn-gold-shadow-focus);
  color: var(--btn-gold-color);
}

.btn-gold:active {
  filter: brightness(0.97);
  box-shadow: var(--btn-gold-shadow-active);
}

.btn-action:hover, .btn-toolbar:hover { filter: brightness(1.05); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: 1px solid var(--accent-dark);
  color: var(--ink-950);
  font-weight: 700;
}

.btn-toolbar {
  padding: 0.35rem 0.75rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border: 1px solid var(--accent-dark);
  border-radius: 4px;
  color: var(--ink-950);
  font-weight: 700;
  font-size: 0.75rem;
}

/* Los enlaces de la barra conservan la tinta del botón sobre el oro. */
a.btn-toolbar:hover {
  color: var(--ink-950);
}

.btn-danger {
  background: linear-gradient(180deg, #c2543f, #7e2b22);
  color: #fff;
  border: 1px solid #5c1c15;
}

.bug-report-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bug-report-icon {
  display: inline-grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

/* Los estilos de botón de barra y menú ganarían al [hidden] del navegador. */
.btn.btn-toolbar[data-fullscreen-toggle][hidden] {
  display: none;
}

.fullscreen-icon {
  display: block;
  flex: none;
}

[data-fullscreen-toggle]:not(.is-active) .fullscreen-icon--exit,
[data-fullscreen-toggle].is-active .fullscreen-icon--enter {
  display: none;
}

.action-dock .btn-action.btn-danger {
  background: linear-gradient(180deg, #c44, #822);
  color: #fff;
  border-color: #511;
}

.inline-form { display: inline; }

.wizard-panel h4 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #1a1208;
  text-align: center;
}

.wizard-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 100%;
  overflow-y: auto;
}

/* Chips de cantidad (Enderezar N DON!!, Dar N DON!!...): fila compacta con
   salto de línea — 4+ botones apilados a ancho completo desbordaban el dock
   en escritorio y móvil (2026-07-14). */
.wizard-options--chips,
.action-list--chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.35rem;
}

.wizard-options--chips form,
.action-list--chips form {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.wizard-options--chips .btn-action,
.action-list--chips .btn-action {
  width: auto;
  max-width: 100%;
  padding: 0.34rem 0.6rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* En escritorio, hasta tres cantidades caben apiladas a todo el ancho, como el
   resto del dock; desde cuatro siguen en fila por el desbordamiento de arriba. */
@media (min-width: 1101px) {
  .action-dock .wizard-options--chips:not(:has(> form:nth-of-type(4))) {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .action-dock .wizard-options--chips:not(:has(> form:nth-of-type(4))) > form,
  .action-dock .wizard-options--chips:not(:has(> form:nth-of-type(4))) .btn-action {
    width: 100%;
  }
}

/* Elecciones numéricas 0–10: todos los valores permanecen visibles y tocables en
   una sola pantalla, también en móvil. El texto completo queda en aria-label y
   title; la superficie visual usa solo el número para evitar desbordamientos. */
.action-list.action-list--numbers {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 0.4rem;
  overflow: visible;
}

.action-list--numbers form {
  display: contents;
}

.action-list.action-list--numbers.action-list--numbers-wide {
  grid-template-columns: repeat(6, minmax(42px, 1fr));
}

.action-dock .action-list--numbers .btn-action {
  width: 100%;
  min-width: 42px;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  font-size: 1rem;
  line-height: 1;
}

/* Cada efecto de End Phase conserva la identidad de la copia que lo origina.
   En el dock lateral se apila; cuando el dock pasa abajo, las decisiones cortas
   pueden compartir una fila sin repetir el nombre de la carta. */
.end-phase-groups {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  overflow-y: auto;
}

.end-phase-source-step {
  min-width: 0;
}

.end-phase-source-prompt {
  margin: 0 0 0.45rem;
  color: #1a1208;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.end-phase-source-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  min-width: 0;
}

.end-phase-source-choice {
  width: 100%;
}

.end-phase-group {
  min-width: 0;
  padding: 0.45rem;
  border: 1px solid rgba(92, 74, 18, 0.7);
  border-radius: 6px;
  background: rgba(255, 232, 160, 0.18);
}

.end-phase-group-title {
  margin: 0 0 0.45rem;
  color: #1a1208;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.end-phase-group-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  min-width: 0;
}

.end-phase-group-actions form {
  min-width: 0;
}

.end-phase-source-back {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.4rem;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.wizard-pass-action {
  margin-top: 0.65rem;
}

.confirm-panel p:not(.opening-choice-title) {
  font-size: 0.95rem;
  color: #1a1208;
  margin: 0 0 0.65rem;
  text-align: center;
  line-height: 1.35;
}

/* --- Overlays --- */
.flash.error {
  background: #5a1515;
  color: #ffb4b4;
  padding: 0.5rem;
  border-radius: 4px;
}

.game-over-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2.75rem;
  background: radial-gradient(
    120% 95% at 50% 42%,
    rgba(21, 14, 8, 0.5) 0%,
    rgba(21, 14, 8, 0.85) 58%,
    rgba(21, 14, 8, 0.95) 100%
  );
  backdrop-filter: blur(7px) brightness(0.58) saturate(0.85);
}

.game-over {
  position: relative;
  width: min(calc(100vw - 2rem), 37.5rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: linear-gradient(180deg, #2a1e12 0%, #1b130b 62%);
  border: 1px solid rgba(196, 154, 58, 0.35);
  border-radius: 14px;
  padding: 2.125rem 2.375rem 1.875rem;
  box-shadow:
    0 28px 60px -12px rgba(42, 26, 12, 0.78),
    inset 0 1px 0 rgba(242, 231, 204, 0.1),
    0 0 0 1px rgba(196, 154, 58, 0.12),
    0 0 70px -22px rgba(196, 154, 58, 0.35);
  scrollbar-color: rgba(196, 154, 58, 0.45) transparent;
}

.game-over-minimize {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.game-over-header {
  display: grid;
  gap: 0.375rem;
  text-align: center;
}

.game-over-kicker {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.game-over .result {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.625rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.game-over .result--win {
  color: #9ef0b8;
}

.game-over .result--loss {
  color: #e0805f;
}

.game-over .result--neutral {
  color: var(--parchment-100);
}

.game-over-share {
  margin-top: 1.25rem;
  padding: 1.25rem 1.375rem;
  background: linear-gradient(180deg, rgba(196, 154, 58, 0.16), rgba(90, 58, 34, 0.12));
  border: 1px solid rgba(196, 154, 58, 0.5);
  border-radius: 12px;
  box-shadow:
    0 28px 60px -20px rgba(42, 26, 12, 0.78),
    inset 0 1px 0 rgba(242, 231, 204, 0.08),
    0 0 42px -16px rgba(224, 194, 102, 0.55);
}

.game-over-share-heading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.game-over-share-icon {
  display: grid;
  width: 2.625rem;
  height: 2.625rem;
  flex: none;
  place-items: center;
  border-radius: 10px;
  color: var(--ink-950);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.5);
}

.game-over-share-copy {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
}

.game-over-share-copy strong {
  font-family: var(--font-display);
  color: var(--text);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.1;
}

.game-over-share-copy > span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.game-over-share-link-row {
  display: flex;
  gap: 0.625rem;
  margin-top: 1rem;
}

.game-over-replay-link {
  display: flex;
  min-width: 0;
  height: 2.75rem;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  padding: 0 0.875rem;
  overflow: hidden;
  color: var(--text);
  background: var(--surface-field);
  border: 1px solid var(--border-field);
  border-radius: 8px;
}

.game-over-replay-link:hover,
.game-over-replay-link:focus-visible {
  color: var(--parchment-100);
  border-color: var(--gold-500);
}

.game-over-replay-link svg {
  flex: none;
  color: var(--text-secondary);
}

.game-over-replay-link span {
  overflow: hidden;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-over-copy-link {
  display: inline-flex;
  height: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: none;
  padding: 0 1rem;
  white-space: nowrap;
}

.game-over-copy-link--mobile {
  display: none;
}

.game-over-share-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.game-over-share-via {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-over-share-channel {
  display: inline-flex;
  height: 2.375rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font: 600 0.875rem var(--font-body);
}

.game-over-share-channel:hover,
.game-over-share-channel:focus-visible {
  color: var(--parchment-100);
  background: rgba(196, 154, 58, 0.1);
  border-color: var(--accent);
}

.game-over-share-copied {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  color: var(--gold-300);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.game-over-share-copied[hidden] {
  display: none;
}

.game-over-discord-error {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.game-over-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.375rem;
}

.game-over .btn {
  min-height: 2.75rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.1;
}

.game-over-actions > .btn {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.game-over-actions > .bug-report-trigger {
  grid-column: 1;
}

.game-over-actions:has(.game-over-deck-share) > .game-over-home:first-child {
  grid-column: 1 / -1;
}

.game-over-deck-share {
  gap: 0.4rem;
}

.game-over-deck-status,
.game-over-deck-link {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
}

.game-over-deck-link {
  display: block;
}

.game-over-deck-status[hidden],
.game-over-deck-link[hidden] {
  display: none;
}

.game-over-actions > form {
  min-width: 0;
  margin: 0;
}

.game-over-actions > form > .btn {
  width: 100%;
  height: 100%;
}

.game-over-rematch-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  text-align: center;
}

.game-over-rematch-primary:disabled,
.game-over-rematch-primary .btn:disabled {
  cursor: wait;
  opacity: 0.72;
}

.game-over .game-over-home:hover,
.game-over .game-over-home:focus-visible {
  color: var(--ink-950);
  filter: brightness(1.06);
}

.game-over-secondary {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-hairline);
}

.game-over-secondary:hover,
.game-over-secondary:focus-visible {
  color: var(--text);
  background: rgba(196, 154, 58, 0.1);
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .game-over-overlay {
    padding: 0.625rem 0.75rem;
    backdrop-filter: blur(6px) brightness(0.54) saturate(0.85);
  }

  .game-over {
    width: 100%;
    max-height: calc(100dvh - 1.25rem);
    padding: 1.375rem 1.125rem 1.25rem;
    border-radius: 20px;
  }

  .game-over-minimize {
    top: 0.75rem;
    right: 0.75rem;
  }

  .game-over-header {
    gap: 0.25rem;
  }

  .game-over-kicker {
    font-size: 0.6875rem;
  }

  .game-over .result {
    font-size: 2rem;
  }

  .game-over-share {
    margin-top: 1rem;
    padding: 1rem;
  }

  .game-over-share-heading {
    gap: 0.75rem;
  }

  .game-over-share-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .game-over-share-copy strong {
    font-size: 1.1875rem;
  }

  .game-over-share-copy > span {
    font-size: 0.78125rem;
  }

  .game-over-share-link-row {
    display: block;
    margin-top: 0.875rem;
  }

  .game-over-replay-link {
    width: 100%;
  }

  .game-over-replay-link span {
    font-size: 0.84375rem;
  }

  .game-over-copy-link--desktop {
    display: none;
  }

  .game-over-copy-link--mobile {
    display: inline-flex;
    min-width: 0;
    flex: 1;
    padding-inline: 0.875rem;
    font-size: 0.875rem;
  }

  .game-over-share-actions {
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.625rem;
  }

  .game-over-share-via {
    display: none;
  }

  .game-over-share-channel {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }

  .game-over-share-channel span {
    display: none;
  }

  .game-over-share-copied {
    min-height: 1rem;
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    font-size: 0.8125rem;
  }

  .game-over-actions {
    gap: 0.625rem;
    margin-top: 1rem;
  }

  .game-over-actions .btn {
    min-width: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
  }
}

.turn-order-dialog {
  border: none;
  padding: 0;
  width: min(calc(100vw - 3rem), 23.75rem);
  max-width: min(calc(100vw - 3rem), 23.75rem);
  color: var(--text);
  background: transparent;
  overflow: visible;
}

.turn-order-dialog::backdrop {
  background: radial-gradient(
    120% 95% at 50% 42%,
    rgba(21, 14, 8, 0.12) 0%,
    rgba(21, 14, 8, 0.32) 58%,
    rgba(21, 14, 8, 0.48) 100%
  );
  -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
}

.private-notice-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.private-notice-body--rich { white-space: normal; line-height: 1.6; }
.private-notice-body--rich p, .private-notice-body--rich ul, .private-notice-body--rich ol,
.private-notice-body--rich blockquote { margin: 0 0 12px; }
.private-notice-body--rich ul, .private-notice-body--rich ol { padding-left: 24px; }
.private-notice-body--rich blockquote { padding-left: 12px; border-left: 3px solid var(--muted); }
.private-notice-body--rich a { color: var(--accent); text-decoration: underline; }
.private-notice-body--rich > :last-child { margin-bottom: 0; }

.turn-order-dialog-panel {
  display: flex;
  width: 100%;
  max-height: calc(100dvh - 3rem);
  padding: 1rem;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.75rem;
  background: linear-gradient(
    180deg,
    rgba(58, 42, 26, 0.6) 0%,
    #241a10 55%,
    #1d150d 100%
  );
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  box-shadow:
    0 18px 40px -12px rgba(42, 26, 12, 0.65),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
  scrollbar-color: rgba(196, 154, 58, 0.45) transparent;
  text-align: left;
  animation: modal-panel-enter 180ms ease-out both;
}

.turn-order-dialog-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--parchment-100);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

.turn-order-kicker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.turn-order-dialog-panel .turn-order-kicker {
  margin: 0;
  flex: 0 0 auto;
  color: var(--gold-300);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.turn-order-kicker-rule {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(196, 154, 58, 0.16);
}

.announcement-body {
  white-space: pre-line;
}

.announcement-error {
  color: var(--lacquer);
  font-size: 0.82rem;
  margin: 0;
}

.match-notice-body {
  white-space: pre-line;
}

.match-notice-kicker {
  color: var(--gold-300);
}

.match-notice-dialog--warning .turn-order-dialog-panel {
  border-color: rgba(224, 194, 102, 0.4);
}

.match-notice-dialog--critical .turn-order-dialog-panel {
  border-color: rgba(224, 128, 95, 0.5);
}

.match-notice-dialog--critical .match-notice-kicker {
  color: #e8a087;
}

.turn-order-result {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--parchment-100);
  text-wrap: balance;
}

.turn-order-detail {
  margin: 0;
  max-width: none;
  color: rgba(232, 217, 181, 0.7);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.turn-order-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(158, 240, 184, 0.15);
  color: #9ef0b8;
  border: 1px solid rgba(158, 240, 184, 0.35);
}

/* --- Sorteo de inicio (opening_draw.js) ---
   La moneda lleva la rosa de la portada sobre el separador de los tapetes: en color la
   cara de quien mira, en blanco y negro la del rival. Queda sobre la presentación y el
   aviso de la IA, y bajo los avisos, el reinicio y los diálogos nativos. --coin lo fija
   el JS a partir del hueco entre los dos líderes. */
.opening-draw {
  --coin: 150px;
  position: fixed;
  inset: 0;
  z-index: 92;
  pointer-events: none;
}

.opening-draw-veil {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: radial-gradient(
    120% 95% at 50% 42%,
    rgba(21, 14, 8, 0.12) 0%,
    rgba(21, 14, 8, 0.32) 58%,
    rgba(21, 14, 8, 0.48) 100%
  );
  -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  opacity: 0;
  transition: opacity 260ms ease-out;
}

/* Mientras elige el rival no se bloquea la mesa: chat, menú y Conceder siguen a mano. */
.opening-draw.is-passive .opening-draw-veil {
  pointer-events: none;
}

.opening-draw-leader {
  position: fixed;
  object-fit: fill;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 260ms ease-out, filter 320ms ease-out, box-shadow 320ms ease-out, scale 320ms ease-out;
}

.opening-draw-leader.is-winner {
  box-shadow: 0 0 0 2px var(--gold-300), 0 0 26px 4px rgba(224, 194, 102, 0.55);
  scale: 1.04;
}

.opening-draw-leader.is-loser {
  filter: brightness(0.6) saturate(0.75);
}

.opening-draw-tag {
  position: fixed;
  display: grid;
  justify-items: end;
  gap: 0.25rem;
  max-width: 11rem;
  text-align: right;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

/* Sin sitio a la izquierda del líder (móvil estrecho), la etiqueta va a su derecha. */
.opening-draw-tag.is-after {
  justify-items: start;
  text-align: left;
  transform: translateX(-6px);
}

.opening-draw-who {
  color: var(--gold-300);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.opening-draw-name {
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.opening-draw-mini {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-inline-end: 0.35em;
  vertical-align: -0.2em;
  border: 0.16em solid var(--gold-500);
  border-radius: 50%;
  background: radial-gradient(circle, var(--lacquer) 0 22%, var(--parchment-100) 24% 100%);
}

.opening-draw-mini--back {
  border-color: #a9a39a;
  background: radial-gradient(circle, #6f6a63 0 22%, #e6e3de 24% 100%);
}

.opening-draw-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(158, 240, 184, 0.35);
  border-radius: 999px;
  background: rgba(158, 240, 184, 0.15);
  color: #9ef0b8;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opening-draw-badge--chooser {
  border-color: rgba(196, 154, 58, 0.5);
  background: rgba(196, 154, 58, 0.14);
  color: var(--gold-300);
}

.opening-draw-badge[hidden] {
  display: none;
}

.opening-draw-shadow,
.opening-draw-coin {
  position: fixed;
  width: var(--coin);
  aspect-ratio: 1;
  translate: -50% -50%;
}

.opening-draw-shadow {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 260ms ease-out;
}

.opening-draw-coin {
  perspective: calc(var(--coin) * 4.7);
  opacity: 0;
  scale: 0.86;
  transition: opacity 280ms ease-out, scale 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.opening-draw-coin-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Canto de latón: cinco discos apilados que se ven de perfil al girar. El más
   externo (±2) queda por dentro de las caras (--coin / 50), nunca delante. */
.opening-draw-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold-500) 62%, var(--ink-950));
  transform: translateZ(calc(var(--coin) * var(--edge-z) / 110));
}

.opening-draw-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(var(--coin) / 30) solid var(--gold-500);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #f6eed8 0%, var(--parchment-100) 55%, var(--parchment-300) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--coin) / 100) rgba(242, 231, 204, 0.5),
    inset 0 calc(var(--coin) / -25) calc(var(--coin) / 11) rgba(90, 58, 34, 0.25);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(calc(var(--coin) / 50));
}

.opening-draw-face svg {
  display: block;
  width: 100%;
  height: 100%;
}

.opening-draw-face--back {
  border-color: #a9a39a;
  transform: rotateX(180deg) translateZ(calc(var(--coin) / 50));
}

.opening-draw-face--back svg {
  filter: grayscale(1) contrast(1.08);
}

.opening-draw.is-on .opening-draw-veil,
.opening-draw.is-on .opening-draw-leader,
.opening-draw.is-on .opening-draw-tag,
.opening-draw.is-on .opening-draw-shadow,
.opening-draw.is-on .opening-draw-coin {
  opacity: 1;
}

.opening-draw.is-on .opening-draw-coin {
  scale: 1;
}

.opening-draw.is-on .opening-draw-tag {
  transform: none;
}

.opening-draw.is-leaving > * {
  opacity: 0 !important;
  transition: opacity 220ms ease-out;
}

.opening-draw-panel {
  position: fixed;
  width: min(18.5rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  pointer-events: auto;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 200ms ease-out, translate 200ms ease-out;
  animation: none;
}

.opening-draw-panel.is-shown {
  opacity: 1;
  translate: 0 0;
}

/* Preparado pero aún sin mostrar (la mano se está repartiendo): no recibe clics. */
.opening-draw-panel:not(.is-shown) {
  pointer-events: none;
}

.opening-draw-panel > div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.opening-draw-panel .opening-deadline {
  justify-content: flex-start;
  margin: 0;
  color: var(--text-secondary);
}

.opening-draw-panel .opening-deadline time {
  color: var(--gold-300);
}

.opening-draw-choices {
  display: grid;
  gap: 0.5rem;
}

.opening-draw-panel.is-sheet .opening-draw-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opening-draw-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--btn-gold-radius);
  color: var(--btn-gold-color);
  background: var(--btn-gold-background);
  box-shadow: var(--btn-gold-shadow);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.opening-draw-choice:hover {
  filter: brightness(1.05);
}

.opening-draw-choice:focus-visible {
  outline: none;
  box-shadow: var(--btn-gold-shadow-focus);
}

.opening-draw-choice:active {
  filter: brightness(0.97);
  box-shadow: var(--btn-gold-shadow-active);
}

.opening-draw-choice:disabled {
  opacity: 0.65;
  cursor: default;
}

.opening-draw-choice-label {
  grid-column: -2 / -1;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.opening-draw-choice-detail {
  grid-column: -2 / -1;
  color: rgba(21, 14, 8, 0.72);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

/* «Continuar» ocupa todo el ancho del panel, como el resto de botones de la web. */
.opening-draw-panel .opening-draw-continue {
  width: 100%;
  align-self: stretch;
}

.opening-draw-waiting {
  animation: opening-draw-pulse 1.6s ease-in-out infinite;
}

@keyframes opening-draw-pulse {
  50% {
    opacity: 0.55;
  }
}

/* El Stage inicial y el aviso de la IA esperan debajo hasta «Continuar». */
body.opening-draw-active #starting-stage-popup,
body.opening-draw-active .ai-thinking-overlay {
  visibility: hidden;
}

@media (max-width: 1100px) {
  .opening-draw-tag {
    max-width: 8.5rem;
  }

  .opening-draw-who {
    font-size: 0.625rem;
  }

  .opening-draw-name {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-draw *,
  .opening-draw-panel {
    transition-duration: 0ms !important;
    animation: none !important;
  }
}

/* --- Mano inicial (opening_hand.js) ---
   Usa la capa, el velo y el panel del sorteo. Las cartas del abanico son copias de
   la mano del tablero: la mano real se oculta mientras tanto y reaparece cuando las
   copias llegan a su hueco. El catalejo (escritorio) y la previsualización móvil
   suben por encima del velo para leer las cartas. */
.opening-hand-fan {
  position: fixed;
  pointer-events: none;
}

.opening-hand-card {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  perspective: 900px;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 160ms linear;
}

.opening-hand-card.is-visible {
  opacity: 1;
}

.opening-hand-card:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 6px;
}

.opening-hand-card-lift,
.opening-hand-card-inner {
  position: absolute;
  inset: 0;
  display: block;
}

.opening-hand-card-lift {
  transition: translate 160ms ease-out, scale 160ms ease-out;
}

.opening-hand-card-inner {
  transform-style: preserve-3d;
}

.opening-hand-card-front,
.opening-hand-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 5px;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.7);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.opening-hand-card-back {
  transform: rotateY(180deg);
}

/* La carta bajo el ratón se eleva, como la elegida en la mano. */
@media (hover: hover) and (pointer: fine) {
  .opening-hand.is-dealt .opening-hand-card:hover .opening-hand-card-lift,
  .opening-hand.is-dealt .opening-hand-card:focus-visible .opening-hand-card-lift {
    translate: 0 -12px;
    scale: 1.05;
  }
}

.opening-hand-shuffle {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.opening-hand-shuffle.is-visible {
  opacity: 1;
}

.opening-hand-shuffle img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4px;
}

.opening-hand-hint {
  position: fixed;
  margin: 0;
  translate: -50% 0;
  color: rgba(232, 217, 181, 0.78);
  font-size: 0.78rem;
  font-style: italic;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease-out;
}

.opening-hand.is-dealt .opening-hand-hint {
  opacity: 1;
}

.opening-hand-rival {
  width: fit-content;
  margin: 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(232, 217, 181, 0.24);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.opening-hand-rival.is-waiting {
  animation: opening-draw-pulse 1.6s ease-in-out infinite;
}

.opening-hand-rival.is-done {
  border-color: rgba(158, 240, 184, 0.35);
  background: rgba(158, 240, 184, 0.12);
  color: #9ef0b8;
}

body.opening-hand-active .hand-panel--you .card-slot--hand {
  visibility: hidden;
}

body.opening-hand-active .card-preview {
  position: relative;
  z-index: 93;
}

body.opening-hand-active .card-spyglass {
  z-index: 94;
}

body.opening-hand-active .ai-thinking-overlay {
  visibility: hidden;
}

/* Bajo el sorteo y la mano el panel de acciones repetiría los mismos botones,
   difuminados. En escritorio se retira y el catalejo ocupa toda la columna para
   leer las cartas enteras; en móvil solo se oculta, sin mover la mano. Sus botones
   siguen en el DOM: los paneles de la capa los pulsan por código y atienden ellos
   las teclas. */
@media (min-width: 1101px) {
  body.opening-draw-active .action-dock,
  body.opening-hand-active .action-dock {
    display: none;
  }
}

@media (max-width: 1100px) {
  body.opening-draw-active .action-dock,
  body.opening-hand-active .action-dock {
    visibility: hidden;
  }
}

@media (max-width: 1100px) {
  .opening-hand-hint {
    display: none;
  }
}

.life-stack-card--revealed .card-image {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.deck-top--revealed .card-image {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* A public reveal stays in its hidden position for a few seconds: the face
   covers the card back and the badge says why. The client removes it. */
.public-reveal-mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: public-reveal-in 220ms ease-out both;
}

.public-reveal-face {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.public-reveal-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--gold-500);
  pointer-events: none;
}

.card-slot--hand:has(> .public-reveal-mark) {
  box-shadow:
    0 0 0 1px rgba(224, 194, 102, 0.5),
    0 0 10px rgba(224, 194, 102, 0.55);
}

.card-slot > .public-reveal-mark ~ .stack-count {
  z-index: 2;
}

.public-reveal-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 4px);
  padding: 2px;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 194, 102, 0.75);
  border-radius: 999px;
  background: rgba(28, 20, 13, 0.92);
  color: var(--gold-300);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.public-reveal-badge svg {
  width: 10px;
  height: 10px;
  flex: none;
}

/* Small slots (rival hand row, deck) show only the eye; the label stays
   available to screen readers and in the badge title. */
.public-reveal-badge span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.hand-panel--you .public-reveal-badge,
.opp-hand-dialog .public-reveal-badge {
  padding: 1px 5px;
}

.hand-panel--you .public-reveal-badge span,
.opp-hand-dialog .public-reveal-badge span {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  text-overflow: ellipsis;
}

.mat-mobile-rival-card--revealed {
  outline: 1.5px solid var(--gold-500);
  box-shadow: 0 0 6px rgba(224, 194, 102, 0.6);
}

@keyframes public-reveal-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-reveal-mark {
    animation: none;
  }
}

.game-over-overlay[hidden] {
  display: none;
}

.board-shell {
  position: relative;
}

.admin-match-mode-banner {
  position: fixed;
  top: 0.45rem;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  padding: 0.42rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(150, 18, 29, 0.96);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

/* Lost server connection: informative only, the board stays usable. */
.board-connection-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(224, 194, 102, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 32, 20, 0.96), rgba(28, 20, 13, 0.96));
  color: var(--parchment-100);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  word-break: auto-phrase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.board-connection-banner[hidden] {
  display: none;
}

/* Reinicio del servidor: bloquea el tablero bajo la barra superior, que sigue
   accesible para salir por el menú. JS fija `top` según la barra. */
.board-restart-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background: rgba(21, 14, 8, 0.55);
  -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
}

.board-restart-overlay[hidden] {
  display: none;
}

.board-restart-panel {
  display: flex;
  width: min(100%, 23.75rem);
  max-height: calc(100% - 1rem);
  padding: 1rem;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(58, 42, 26, 0.6) 0%, #241a10 55%, #1d150d 100%);
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  box-shadow:
    0 18px 40px -12px rgba(42, 26, 12, 0.65),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
  animation: modal-panel-enter 180ms ease-out both;
}

.board-restart-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.board-restart-panel h2 {
  margin: 0;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

.board-restart-panel p {
  margin: 0;
  color: rgba(232, 217, 181, 0.85);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.board-restart-panel .btn[hidden] {
  display: none;
}

.toast.competitive-resume-notice {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gold-500);
  border-radius: 0.75rem;
  background: var(--wood);
  color: var(--text);
  font-size: 0.875rem;
  text-align: center;
  pointer-events: none;
  animation: none;
}

.presentation-layer {
  position: fixed;
  inset: 0;
  z-index: 82;
  pointer-events: none;
  contain: layout style;
}

body.ai-thinking-active .presentation-layer {
  z-index: 91;
}

.presentation-resolution-anchor {
  position: fixed;
  left: 50%;
  top: 50%;
  width: clamp(6.5rem, 9vw, 8rem);
  aspect-ratio: 5 / 7;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.presentation-card-copy {
  position: fixed;
  z-index: 84;
  display: block;
  margin: 0;
  object-fit: fill;
  border-radius: 0.35rem;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.62),
    0 0 0 2px rgba(224, 194, 102, 0.48);
  transform-origin: top left;
  pointer-events: none;
  will-change: transform, opacity;
}

.presentation-don-copy {
  z-index: 85;
  border-radius: 0.2rem;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.48),
    0 0 0 2px rgba(224, 194, 102, 0.4);
}

/* Returning DON!! turn to rest on the way: rotate around their center. */
.presentation-don-return-copy {
  transform-origin: center;
}

/* Turn start: a short, non-blocking banner over the table. */
.presentation-turn-banner {
  position: fixed;
  top: 38%;
  left: 50%;
  z-index: 88;
  padding: 0.55rem 1.6rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(224, 194, 102, 0.72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 32, 20, 0.96), rgba(28, 20, 13, 0.96));
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 26px -6px rgba(224, 194, 102, 0.45);
  pointer-events: none;
  animation: presentation-turn-banner var(--presentation-banner-duration, 900ms)
    cubic-bezier(.2,.8,.2,1) both;
}

.presentation-turn-banner.is-opponent {
  border-color: rgba(214, 120, 96, 0.72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 26px -6px rgba(214, 120, 96, 0.45);
}

@keyframes presentation-turn-banner {
  0% { transform: translate(-50%, -80%) scale(0.94); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  78% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -62%) scale(0.98); opacity: 0; }
}

@keyframes presentation-turn-banner-fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .presentation-turn-banner {
    animation-name: presentation-turn-banner-fade;
  }
}

/* Powers of the open battle, anchored to the seam; the winning side glows. */
.presentation-battle-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 87;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 90, 95, 0.78);
  border-radius: 999px;
  background: rgba(28, 19, 12, 0.94);
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: presentation-battle-chip-in 180ms ease-out both;
}

@media (min-width: 1101px) {
  .presentation-battle-chip {
    font-size: 1.06rem;
    border: 2px solid rgba(255, 90, 95, 0.95);
    box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12),
                0 0 16px rgba(255, 90, 95, 0.22),
                0 6px 18px rgba(0, 0, 0, 0.5);
  }
}

/* This shared space yields to connection/wait notices and to cards presented
   at the resolution center. The powers return when the decision is ready. */
.mat-mobile-divider:has(> .ai-wait-notice:not([hidden])) .presentation-battle-chip,
body:has(.presentation-turn-banner, .presentation-resolution-copy) .presentation-battle-chip {
  visibility: hidden;
}

.presentation-battle-chip-power.is-ahead {
  color: #ffd76a;
}

.presentation-battle-chip-versus::before {
  content: "\2694\FE0E";
  opacity: 0.75;
}

@keyframes presentation-battle-chip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A result that no Life or K.O. shows: repelled, prevented or without effect. */
.presentation-battle-notice {
  position: fixed;
  top: 45%;
  left: 50%;
  z-index: 88;
  padding: 0.3rem 0.8rem;
  transform: translate(-50%, 0);
  border: 1px solid rgba(224, 194, 102, 0.72);
  border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(45, 32, 20, 0.96), rgba(28, 20, 13, 0.96));
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: presentation-battle-notice var(--presentation-notice-duration, 650ms) ease both;
}

.presentation-battle-notice.is-fizzled {
  border-color: rgba(190, 180, 160, 0.6);
  color: rgba(245, 236, 214, 0.86);
}

@keyframes presentation-battle-notice {
  0% { transform: translate(-50%, 6px); opacity: 0; }
  20%, 78% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -4px); opacity: 0; }
}

@keyframes presentation-battle-notice-fade {
  0%, 100% { opacity: 0; }
  20%, 78% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .presentation-battle-chip {
    animation: none;
  }

  .presentation-battle-notice {
    animation-name: presentation-battle-notice-fade;
  }
}

.presentation-don-destination-hidden {
  visibility: hidden;
}

.presentation-bubble {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  z-index: 86;
  display: flex;
  width: max-content;
  max-width: min(94vw, 42rem);
  min-height: 3.25rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem 0.45rem 0.65rem;
  transform: translateX(-50%);
  border: 1px solid rgba(224, 194, 102, 0.72);
  border-radius: 0.8rem;
  background: linear-gradient(180deg, rgba(45, 32, 20, 0.98), rgba(28, 20, 13, 0.98));
  color: var(--parchment-100);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.52);
  pointer-events: auto;
}

.presentation-bubble[hidden] {
  display: none;
}

.presentation-layer.is-showing-ability-cue .presentation-bubble,
.presentation-layer.is-showing-ability-cue .presentation-bubble-history {
  visibility: hidden;
  pointer-events: none;
}

.presentation-bubble.is-lingering .presentation-bubble-actions {
  display: none;
}

.presentation-bubble-history {
  position: fixed;
  top: 4.65rem;
  left: 50%;
  z-index: 85;
  display: flex;
  width: min(90vw, 38rem);
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.presentation-bubble-history-item {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 2.3rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.65rem;
  border: 1px solid rgba(224, 194, 102, 0.38);
  border-radius: 0.65rem;
  background: rgba(28, 20, 13, 0.92);
  color: var(--parchment-100);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.34);
  opacity: 0.82;
  animation: presentation-bubble-history-enter 180ms ease-out both;
}

.presentation-bubble-history-item img {
  width: 1.6rem;
  height: 2.24rem;
  flex: none;
  object-fit: fill;
  border-radius: 0.15rem;
}

.presentation-bubble-history-item span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes presentation-bubble-history-enter {
  from {
    transform: translateY(-0.35rem);
    opacity: 0;
  }
}

.presentation-bubble-thumbnail {
  width: 2.4rem;
  height: 3.35rem;
  flex: none;
  object-fit: fill;
  border-radius: 0.2rem;
  cursor: zoom-in;
}

.presentation-bubble-label {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presentation-bubble--reveal .presentation-bubble-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

.presentation-bubble-actions {
  display: flex;
  flex: none;
  gap: 0.2rem;
}

.presentation-skip-current,
.presentation-skip-all {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(224, 194, 102, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--parchment-100);
  font: inherit;
  cursor: pointer;
}

.presentation-skip-current:focus-visible,
.presentation-skip-all:focus-visible,
.presentation-bubble-thumbnail:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

.presentation-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.presentation-result-cue {
  position: fixed;
  z-index: 85;
  padding: 0.22rem 0.48rem;
  transform: translate(-50%, -110%);
  border-radius: 999px;
  background: rgba(22, 16, 10, 0.94);
  color: #ffe08a;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.42);
}

.presentation-stat-delta,
.presentation-life-delta {
  pointer-events: none;
  animation: presentation-floating-delta var(--presentation-cue-duration, 400ms)
    cubic-bezier(.16,.84,.28,1) both;
}

.presentation-stat-delta.is-beneficial,
.presentation-life-delta.is-beneficial {
  border: 1px solid rgba(103, 232, 154, 0.62);
  background: rgba(10, 50, 30, 0.96);
  color: #9ef0b8;
}

.presentation-stat-delta.is-harmful,
.presentation-life-delta.is-harmful {
  border: 1px solid rgba(255, 112, 112, 0.62);
  background: rgba(63, 16, 16, 0.96);
  color: #ff9a9a;
}

.presentation-stat-delta.is-neutral,
.presentation-life-delta.is-neutral,
.presentation-result-cue.is-neutral {
  border: 1px solid rgba(255, 224, 138, 0.56);
  background: rgba(54, 40, 17, 0.96);
  color: #ffe08a;
}

.presentation-life-delta.is-critical,
.presentation-result-cue.is-critical {
  border: 1px solid rgba(255, 116, 175, 0.72);
  background: rgba(68, 12, 40, 0.97);
  color: #ffb1d4;
}

@keyframes presentation-floating-delta {
  0% {
    transform: translate(-50%, -75%) scale(0.78);
    opacity: 0;
  }
  24% {
    transform: translate(-50%, -125%) scale(1.08);
    opacity: 1;
  }
  72% {
    transform: translate(-50%, -155%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -190%) scale(0.96);
    opacity: 0;
  }
}

.presentation-stat-delta.is-below,
.presentation-life-delta.is-below {
  animation-name: presentation-floating-delta-below;
}

@keyframes presentation-floating-delta-below {
  0% { transform: translate(-50%, 20%) scale(.78); opacity: 0; }
  24% { transform: translate(-50%, 52%) scale(1.08); opacity: 1; }
  72% { transform: translate(-50%, 72%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 92%) scale(.96); opacity: 0; }
}

.presentation-result-cue.is-below:not(.presentation-stat-delta, .presentation-life-delta) {
  transform: translate(-50%, 22%);
}

.presentation-stat-target.is-beneficial {
  animation: presentation-stat-positive var(--presentation-cue-duration, 400ms) ease-out both;
}

.presentation-stat-target.is-harmful {
  animation: presentation-stat-negative var(--presentation-cue-duration, 400ms) ease-out both;
}

.presentation-stat-target.is-neutral {
  animation: presentation-stat-neutral var(--presentation-cue-duration, 400ms) ease-out both;
}

@keyframes presentation-stat-positive {
  0%, 100% { box-shadow: inherit; filter: brightness(1); }
  42% { box-shadow: 0 0 0 5px rgba(84, 223, 139, 0.34); filter: brightness(1.18); }
}

@keyframes presentation-stat-negative {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  28% { transform: translateX(-2px); filter: brightness(1.18); }
  44% { transform: translateX(2px); }
  62% { transform: translateX(-1px); filter: brightness(.88); }
}

@keyframes presentation-stat-neutral {
  0%, 100% { filter: brightness(1); }
  42% { filter: brightness(1.16) saturate(.8); }
}

.presentation-life-change.is-harmful {
  animation: presentation-life-stack-hit var(--presentation-cue-duration, 420ms) ease-out both;
}

.presentation-life-change.is-beneficial {
  animation: presentation-stat-positive var(--presentation-cue-duration, 420ms) ease-out both;
}

.presentation-life-change.is-neutral {
  animation: presentation-stat-neutral var(--presentation-cue-duration, 420ms) ease-out both;
}

.presentation-life-change.is-critical {
  animation: presentation-life-stack-hit var(--presentation-cue-duration, 420ms) ease-out both;
}

.presentation-life-count-change {
  animation: presentation-life-count-pop var(--presentation-cue-duration, 420ms)
    cubic-bezier(.2,.82,.24,1) both;
}

.presentation-life-count-change.is-harmful {
  color: #ff9a9a;
}

.presentation-life-count-change.is-beneficial {
  color: #9ef0b8;
}

.presentation-life-count-change.is-neutral {
  color: #ffe08a;
}

.presentation-life-count-change.is-critical {
  color: #ff9ac8;
}

.presentation-life-impact {
  animation: presentation-leader-impact var(--presentation-cue-duration, 420ms) ease-out both;
}

.presentation-life-impact.is-reason-effect-damage {
  animation-name: presentation-leader-effect-impact;
}

.presentation-life-impact.is-reason-banish-damage {
  animation-name: presentation-leader-banish-impact;
}

.presentation-life-copy {
  z-index: 87;
  outline: 2px solid rgba(224, 194, 102, 0.64);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.56),
    0 0 18px rgba(224, 194, 102, 0.28);
}

.presentation-life-copy.is-harmful {
  outline-color: rgba(255, 110, 110, 0.64);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.56), 0 0 18px rgba(255, 78, 78, 0.34);
}

.presentation-life-copy.is-critical {
  outline-color: rgba(255, 116, 175, 0.76);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.58), 0 0 22px rgba(255, 60, 145, 0.42);
}

@keyframes presentation-life-stack-hit {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  24% { transform: translateX(-3px); filter: brightness(1.35); }
  42% { transform: translateX(3px); filter: sepia(.35) saturate(1.5); }
}

@keyframes presentation-life-count-pop {
  0% { transform: scale(.76); }
  42% { transform: scale(1.34); }
  100% { transform: scale(1); }
}

@keyframes presentation-leader-impact {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  18% { transform: translateX(-3px); filter: brightness(1.5); }
  34% { transform: translateX(3px); filter: sepia(.55) saturate(1.7); }
  52% { transform: translateX(-1px); }
}

@keyframes presentation-leader-effect-impact {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  34% { transform: scale(.97); filter: brightness(1.4) saturate(1.5); }
  58% { transform: scale(1.01); filter: sepia(.38); }
}

@keyframes presentation-leader-banish-impact {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  26% { transform: scale(.96); filter: brightness(1.5) hue-rotate(310deg); }
  54% { transform: scale(1.015); filter: saturate(1.8) contrast(1.15); }
}

.presentation-ko-copy {
  z-index: 86;
  overflow: visible;
  transform-origin: top left;
}

.presentation-ko-card-body,
.presentation-ko-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.presentation-ko-card-body {
  transform-origin: center;
  animation: presentation-ko-recoil var(--presentation-ko-recoil-duration, 300ms)
    var(--presentation-ko-recoil-delay, 180ms) ease-out both;
}

.presentation-ko-card-image {
  display: block;
  border-radius: inherit;
  object-fit: fill;
}

.presentation-ko-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 51.111%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-12deg);
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 30%,
    color-mix(in srgb, #a63a2e 82%, #e0c266 18%),
    #a63a2e 55%,
    color-mix(in srgb, #a63a2e 62%, #150e08 38%)
  );
  color: #f2e7cc;
  font-size: clamp(
    0.48rem,
    calc(var(--presentation-ko-card-width, 72px) * 0.1222),
    1.375rem
  );
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(242, 231, 204, 0.3);
  pointer-events: none;
  animation: presentation-ko-seal var(--presentation-ko-seal-duration, 340ms)
    cubic-bezier(.2,1.1,.3,1) both;
}

.presentation-ko-mark::before {
  position: absolute;
  width: 80.435%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(242, 231, 204, 0.55);
  border-radius: 50%;
  content: "";
}

.presentation-trash-arrival {
  animation: presentation-trash-arrival 160ms cubic-bezier(.16,.9,.3,1.2) both;
}

@keyframes presentation-ko-seal {
  0% { transform: translate(-50%, -50%) scale(1.7) rotate(-4deg); opacity: 0; }
  55% { transform: translate(-50%, -50%) scale(.96) rotate(-12deg); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1.04) rotate(-11deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-12deg); opacity: 1; }
}

@keyframes presentation-ko-recoil {
  0% { transform: none; }
  30% { transform: scale(.97) translateY(2px); }
  100% { transform: none; }
}

@keyframes presentation-trash-arrival {
  0% { transform: scale(.9); filter: brightness(1); }
  55% { transform: scale(1.09); filter: brightness(1.38); }
  100% { transform: scale(1); filter: brightness(1); }
}

.presentation-anchor-pulse {
  animation: presentation-anchor-pulse var(--presentation-cue-duration, 400ms) ease-in-out infinite;
}

@keyframes presentation-anchor-pulse {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(255, 224, 138, 0.68);
  }
  55% {
    filter: brightness(1.2);
    box-shadow: 0 0 0 5px rgba(255, 224, 138, 0.34);
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 8px rgba(255, 224, 138, 0);
  }
}

.presentation-destination-hidden {
  visibility: hidden;
  animation: presentation-destination-safety 0s linear 2s forwards;
}

@keyframes presentation-destination-safety {
  to {
    visibility: visible;
  }
}

body.presentation-blocking #board form,
body.presentation-blocking #board .action-dock button,
body.presentation-blocking #board [data-action-target] {
  pointer-events: none;
}

/* Replay playback must remain operable while a card animation is running. */
body.page-replay.presentation-blocking #board [data-replay-play-pause] {
  pointer-events: auto;
}

.game-over-overlay.presentation-waiting {
  visibility: hidden;
  pointer-events: none;
}

.presentation-inspect {
  z-index: 120;
  width: min(90vw, 27rem);
  max-height: 92dvh;
  padding: 2.5rem 1rem 1rem;
  border: 1px solid rgba(224, 194, 102, 0.52);
  border-radius: 0.8rem;
  background: #1d150d;
  pointer-events: auto;
}

.presentation-inspect::backdrop {
  background: rgba(10, 7, 4, 0.78);
  backdrop-filter: blur(2px);
}

.presentation-inspect img {
  display: block;
  width: 100%;
  max-height: calc(92dvh - 4rem);
  object-fit: contain;
}

.presentation-inspect-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--parchment-100);
  cursor: pointer;
}

@media (max-width: 720px) {
  .presentation-resolution-anchor {
    width: 6.5rem;
  }

  .presentation-bubble {
    top: 0.4rem;
    width: max-content;
    max-width: calc(100vw - 0.8rem);
  }

  .presentation-bubble-history {
    top: 4.3rem;
    width: calc(100vw - 1.4rem);
  }

  .presentation-bubble-history-item:nth-child(n + 3) {
    display: none;
  }

  .presentation-bubble-label {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .presentation-card-copy,
  .presentation-ko-card-body,
  .presentation-anchor-pulse,
  .presentation-stat-delta,
  .presentation-stat-target,
  .presentation-life-change,
  .presentation-life-count-change,
  .presentation-life-impact,
  .presentation-ko-mark,
  .presentation-trash-arrival,
  .presentation-bubble-history-item {
    animation: none !important;
    transition: opacity 100ms linear !important;
  }

}

.leader-thinking-anchor {
  position: relative;
}

.ai-thinking-leader {
  position: absolute;
  right: calc(100% + 2px);
  top: 12%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 4rem;
  padding: 0.55rem 0.2rem 0.4rem;
  border: 1px solid var(--gold-500);
  border-radius: 0.75rem 0.75rem 0.2rem 0.75rem;
  background: var(--ink-950);
  color: var(--gold-300);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* The leader slot stays upright; account for the artwork extending to the
   left when it rests, using the leader dimensions at each screen size. */
.leader-thinking-anchor:has(> .card-slot--leader.rested) > .ai-thinking-leader {
  right: calc(
    100% + 2px
    + (var(--card-h-leader, var(--card-h-field)) - var(--card-w-leader, var(--card-w-field))) / 2
  );
}

.ai-thinking-label {
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.ai-thinking-dots {
  display: flex;
  gap: 4px;
}

.ai-thinking-dots > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-thinking-dot 1.4s ease-in-out infinite;
}

.ai-thinking-dots > span:nth-child(2) { animation-delay: 160ms; }
.ai-thinking-dots > span:nth-child(3) { animation-delay: 320ms; }

@keyframes ai-thinking-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Reuse the seam between the mats without adding a row or moving the cards.
   On mobile, the existing divider anchors this to the unequal mat heights. */
.mat-mobile-divider.mobile-only {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 23;
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
}

.mat-mobile-divider > span {
  display: none;
}

.ai-wait-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 0.35rem 0.9rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(224, 194, 102, 0.5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(45, 32, 20, 0.96), rgba(28, 20, 13, 0.96));
  color: var(--parchment-100);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* The brief turn announcement has priority in this shared position. */
body:has(.presentation-turn-banner) .ai-wait-notice {
  visibility: hidden;
}

.ai-thinking-leader[hidden],
#ai-wait-notice[hidden],
.ai-wait-notice [hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ai-thinking-dots > span { animation: none; }
}

.ai-thinking-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 3rem 1.5rem;
  background: radial-gradient(
    120% 95% at 50% 42%,
    rgba(21, 14, 8, 0.12) 0%,
    rgba(21, 14, 8, 0.32) 58%,
    rgba(21, 14, 8, 0.48) 100%
  );
  -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
}

.ai-thinking-overlay[hidden]:not(.is-visible) {
  display: none;
}

.ai-thinking-overlay.is-visible,
body.ai-thinking-active .ai-thinking-overlay {
  display: flex;
}

.ai-thinking-panel {
  display: flex;
  width: min(100%, 23.75rem);
  max-height: calc(100dvh - 6rem);
  padding: 1rem;
  overflow-y: auto;
  flex-direction: column;
  gap: 0.75rem;
  background: linear-gradient(
    180deg,
    rgba(58, 42, 26, 0.6) 0%,
    #241a10 55%,
    #1d150d 100%
  );
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  box-shadow:
    0 18px 40px -12px rgba(42, 26, 12, 0.65),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
  scrollbar-color: rgba(196, 154, 58, 0.45) transparent;
  animation: modal-panel-enter 180ms ease-out both;
}

.ai-thinking-status {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
}

.ai-thinking-spinner {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  border: 2px solid rgba(196, 154, 58, 0.22);
  border-top-color: var(--gold-300);
  border-right-color: var(--gold-500);
  border-radius: 50%;
  animation: ai-thinking-spin 1.05s linear infinite;
}

.ai-thinking-text {
  margin: 0;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ai-thinking-tip {
  display: flex;
  width: 100%;
  padding-top: 0.75rem;
  flex-direction: column;
  gap: 0.3125rem;
  border-top: 1px solid rgba(196, 154, 58, 0.16);
}

.ai-thinking-tip[hidden] {
  display: none;
}

.ai-thinking-tip-label {
  display: block;
  color: var(--gold-300);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-thinking-tip-text {
  margin: 0;
  color: rgba(232, 217, 181, 0.7);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

@keyframes modal-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

.turn-order-dialog-panel .btn-gold {
  min-width: 0;
  margin-top: 0.25rem;
  align-self: flex-end;
}

@media (max-width: 640px) {
  .turn-order-dialog {
    width: calc(100vw - 3rem);
    max-width: calc(100vw - 3rem);
  }

  .turn-order-dialog::backdrop {
    -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
    backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  }

  .turn-order-dialog-panel {
    max-height: calc(100dvh - 3rem);
    padding: 1rem;
    border-radius: 12px;
  }

  .turn-order-dialog-panel h2 {
    font-size: 1.25rem;
  }

  .turn-order-detail {
    font-size: 0.875rem;
  }

  .ai-thinking-overlay {
    padding: 1.5rem;
    -webkit-backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
    backdrop-filter: blur(2px) brightness(0.78) saturate(0.92);
  }

  .ai-thinking-panel {
    max-height: calc(100dvh - 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .turn-order-dialog-panel,
  .ai-thinking-panel {
    animation: none;
  }

  .ai-thinking-spinner {
    animation-duration: 1.5s;
  }
}

.primary {
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--ink-950);
  border: 1px solid var(--accent-dark);
  border-radius: 4px;
  font-weight: 700;
}

/* --- Look (búsqueda en el mazo) --- */
.look-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 1rem;
}

.look-overlay[data-minimizable-popup][hidden] {
  display: none !important;
}

.look-panel {
  background: var(--panel);
  border: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  max-width: min(96vw, 60rem);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
}

.look-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.look-hint {
  margin: 0 0 1rem;
  color: #d8c9a8;
  font-size: 0.95rem;
}

.look-empty-message {
  max-width: 30rem;
  margin: 0 auto 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(232, 201, 106, 0.5);
  border-radius: 6px;
  background: rgba(232, 201, 106, 0.1);
  color: var(--text);
  font-size: 0.9rem;
}

.look-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

.look-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 7.5rem;
}

.look-card-img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
}

.look-tray-img[data-card-zoom-src] {
  touch-action: manipulation;
}

.look-card--disabled .look-card-img {
  filter: grayscale(0.85) brightness(0.6);
}

.look-card-zoom {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 1.05rem;
  right: 0.28rem;
  z-index: 3;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 4px;
  background: rgba(10, 8, 6, 0.8);
  color: var(--text);
  cursor: zoom-in;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.46);
}

.look-card-zoom::before {
  content: "";
  position: absolute;
  left: 0.47rem;
  top: 0.41rem;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.look-card-zoom::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.02rem;
  width: 0.5rem;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.look-card-zoom:hover,
.look-card-zoom:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.look-card-zoom:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 5px 14px rgba(0, 0, 0, 0.46);
}

.btn-look {
  width: 100%;
  font-size: 0.8rem;
}

.look-return-same-order {
  margin-top: 1rem;
}

.look-finish {
  margin-top: 1rem;
}

.look-destinations {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.look-tray {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.look-tray-label {
  font-size: 0.85rem;
  color: #9ef0b8;
}

.look-tray-img {
  width: 3.2rem;
  border-radius: 4px;
}

/* --- Burbuja de aviso (toast, partials/toast.html) --- */
/* Notificación no bloqueante y reutilizable: aparece arriba y se desvanece
   sola a los var(--toast-duration). La de jugadas del bot (.bot-toast) va
   acompañada de .bot-ack-auto-continue, que reanuda al bot en el mismo plazo;
   su X (opcional) permite saltarse la espera. Sobre el spinner de IA (90)
   para seguir leyéndose si el bot tarda en calcular. */
.toast {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 92vw;
  padding: 0.45rem 1.2rem;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-size: 0.95rem;
  color: #d8ccb8;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation:
    toast-in 0.25s ease-out,
    toast-out 0.45s ease-in calc(var(--toast-duration, 2000ms) - 450ms) forwards;
}

.toast-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-strong {
  color: #ffe08a;
}

.attack-invalid-toast,
.replay-busy-toast {
  border-color: #f87171;
  color: #fff1f2;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(248, 113, 113, 0.3);
}

/* El aviso de replays saturados es una frase entera: en móvil parte línea. */
.replay-busy-toast {
  width: max-content;
  max-width: calc(100vw - 2rem);
  box-sizing: border-box;
  border-radius: 0.75rem;
}

.replay-busy-toast .toast-text {
  white-space: normal;
  text-align: center;
}

/* X de cierre anticipado: anillo que se rellena en sentido horario durante
   var(--toast-duration). Clicable aunque el resto de la burbuja no lo sea. */
.toast-close {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: #d8ccb8;
  cursor: pointer;
  pointer-events: auto;
}

.toast-close-x {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.toast-close:hover .toast-close-x {
  color: #ffe08a;
}

.toast-close-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* la cuenta empieza a las 12 */
}

.toast-close-track,
.toast-close-fill {
  fill: none;
  stroke-width: 2;
}

.toast-close-track {
  stroke: rgba(216, 204, 184, 0.25);
}

.toast-close-fill {
  stroke: #ffe08a;
  /* perímetro 2·π·r con r=8.5 (viewBox 20×20) */
  stroke-dasharray: 53.41;
  stroke-dashoffset: 53.41;
  animation: toast-ring-fill var(--toast-duration, 2000ms) linear forwards;
}

@keyframes toast-ring-fill {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -0.6rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -0.6rem);
    visibility: hidden;
  }
}

/* --- Replay --- */
.tcg-table--replay .mat-half--turn-active {
  border-color: #f4cf72;
  box-shadow:
    0 0 0 3px rgba(244, 207, 114, 0.9),
    0 0 22px rgba(224, 187, 111, 0.35),
    inset 0 0 0 1px rgba(255, 236, 179, 0.65);
}

/* Solo se oscurece el tapete: las cartas conservan su brillo y sus colores. */
.tcg-table--replay .mat-half:not(.mat-half--turn-active) {
  background-color: #ece6dc;
  background-blend-mode: multiply;
}

.tcg-table--replay .action-dock {
  overflow: visible;
}

.replay-dock {
  --replay-seek-height: 1.6rem;
  --replay-track-height: 5px;
  --replay-thumb-size: 15px;
  --replay-action-offset: calc((var(--replay-seek-height) - var(--replay-track-height)) / 4);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.replay-progress {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  color: var(--gold-300);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

.replay-seek {
  /* The native thumb travels within the track, including its transparent
     touch border. End the fill at its center instead of a full-width percent. */
  --replay-fill-position: calc(var(--replay-progress-ratio, 0) * (100% - var(--replay-thumb-size)) + var(--replay-thumb-size) / 2);
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--replay-seek-height);
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--gold-300);
}

.replay-step-counter {
  color: var(--parchment-300);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 3px #1a1208;
  pointer-events: none;
}

.replay-seek::-webkit-slider-runnable-track {
  height: var(--replay-track-height);
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold-300) var(--replay-fill-position), rgba(192, 169, 125, 0.25) var(--replay-fill-position));
}

.replay-seek::-moz-range-track {
  height: var(--replay-track-height);
  border-radius: 999px;
  background: linear-gradient(to right, var(--gold-300) var(--replay-fill-position), rgba(192, 169, 125, 0.25) var(--replay-fill-position));
}

.replay-seek::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--replay-thumb-size);
  height: var(--replay-thumb-size);
  margin-top: calc((var(--replay-track-height) - var(--replay-thumb-size)) / 2);
  appearance: none;
  border: 2px solid #382817;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 2px rgba(224, 187, 111, 0.2);
}

.replay-seek::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--replay-thumb-size);
  height: var(--replay-thumb-size);
  border: 2px solid #382817;
  border-radius: 50%;
  background: var(--gold-300);
  box-shadow: 0 0 0 2px rgba(224, 187, 111, 0.2);
}

.replay-seek:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 4px;
}

.replay-seek:disabled {
  cursor: default;
}

/* Only an empty replay is natively disabled; request gating uses aria-disabled. */
.replay-seek:disabled[max="0"] {
  opacity: 0.5;
}

@media (max-width: 1100px), (pointer: coarse) {
  .replay-dock {
    --replay-seek-height: 44px;
    --replay-track-height: 6px;
    --replay-thumb-size: 44px;
  }

  .replay-seek {
    touch-action: none;
  }

  /* El borde transparente amplía el agarre a 44px con una bola visible de 24px. */
  .replay-seek::-webkit-slider-thumb {
    border: 10px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 2px #382817;
  }

  .replay-seek::-moz-range-thumb {
    border: 10px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 2px #382817;
  }
}

.replay-seek-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(224, 187, 111, 0.3);
  border-radius: 6px;
  background: #21180f;
  color: var(--gold-300);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
}

.replay-progress:hover .replay-seek-tooltip,
.replay-progress:focus-within .replay-seek-tooltip {
  opacity: 1;
}

.replay-current-action {
  display: grid;
  align-content: center;
  min-height: 2.6em;
  /* Share the range's invisible lower touch padding with the space above the
     buttons. Opposite margins keep the dock height and all touch targets intact. */
  margin: calc(-1 * var(--replay-action-offset)) 0 var(--replay-action-offset);
  pointer-events: none;
  color: var(--parchment-300);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}

.replay-controls,
.replay-transport-controls,
.replay-view-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.replay-control {
  position: relative;
  display: inline-flex;
}

.replay-controls {
  flex-wrap: wrap;
  column-gap: 0.65rem;
}

.replay-view-controls .replay-tooltip {
  right: 0;
  left: auto;
  --replay-tooltip-offset: 0;
}

.action-dock .replay-control-button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(26, 18, 8, 0.58);
  border-radius: 50%;
  background: rgba(26, 18, 8, 0.88);
  color: var(--gold-300);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 3px 9px rgba(26, 18, 8, 0.3);
}

.action-dock .replay-control-button--play {
  border-color: var(--gold-300);
  background: var(--gold-300);
  color: #1a1208;
}

.action-dock .replay-control-button--visibility[aria-pressed="true"] {
  border-color: var(--gold-300);
  background: #4d3920;
}

.replay-media-icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
  color: currentColor;
}

.replay-media-icon[hidden] {
  display: none;
}

.replay-media-icon::before,
.replay-media-icon::after {
  position: absolute;
  content: "";
}

.replay-media-icon--previous::before,
.replay-media-icon--first::before {
  top: 50%;
  border-top: 0.34rem solid transparent;
  border-right: 0.58rem solid currentColor;
  border-bottom: 0.34rem solid transparent;
  transform: translateY(-50%);
}

.replay-media-icon--previous::before {
  left: 0.2rem;
}

.replay-media-icon--first::before {
  left: 0.3rem;
}

.replay-media-icon--first::after,
.replay-media-icon--last::after {
  top: 0.16rem;
  width: 0.14rem;
  height: 0.68rem;
  border-radius: 1px;
  background: currentColor;
}

.replay-media-icon--first::after {
  left: 0.08rem;
}

.replay-media-icon--play::before,
.replay-media-icon--next::before,
.replay-media-icon--last::before {
  top: 50%;
  border-top: 0.34rem solid transparent;
  border-bottom: 0.34rem solid transparent;
  border-left: 0.58rem solid currentColor;
  transform: translateY(-50%);
}

.replay-media-icon--play::before,
.replay-media-icon--next::before {
  left: 0.25rem;
}

.replay-media-icon--last::before {
  left: 0.12rem;
}

.replay-media-icon--last::after {
  right: 0.08rem;
}

.replay-media-icon--pause::before,
.replay-media-icon--pause::after {
  top: 0.14rem;
  width: 0.22rem;
  height: 0.72rem;
  border-radius: 1px;
  background: currentColor;
}

.replay-media-icon--pause::before {
  left: 0.2rem;
}

.replay-media-icon--pause::after {
  right: 0.2rem;
}

.action-dock .replay-control-button:hover:not(:disabled),
.action-dock .replay-control-button:focus-visible {
  border-color: var(--parchment-100);
  color: var(--parchment-100);
  transform: translateY(-1px);
}

.action-dock .replay-control-button--play:hover:not(:disabled),
.action-dock .replay-control-button--play:focus-visible {
  border-color: var(--gold-300);
  background: var(--gold-300);
  color: #1a1208;
}

.action-dock .replay-control-button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.replay-tooltip {
  position: absolute;
  z-index: 350;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  width: max-content;
  max-width: 13rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(224, 194, 102, 0.5);
  border-radius: 5px;
  background: #1a1208;
  color: var(--parchment-100);
  font-size: 0.68rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--replay-tooltip-offset, -50%), 0.2rem);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  white-space: nowrap;
}

.replay-tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: #1a1208;
  content: "";
  transform: translateX(-50%);
}

.replay-tooltip kbd {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: 0.2rem;
  padding: 0.08rem 0.28rem;
  border: 1px solid rgba(224, 194, 102, 0.42);
  border-radius: 3px;
  background: rgba(224, 194, 102, 0.12);
  color: var(--parchment-100);
  font: inherit;
  font-weight: 750;
  text-align: center;
}

.replay-control:has(.replay-control-button:focus-visible) .replay-tooltip {
  opacity: 1;
  transform: translate(var(--replay-tooltip-offset, -50%), 0);
}

/* El hover emulado por un toque no debe dejar ayuda pegada al botón. */
@media (hover: hover) and (pointer: fine) {
  .replay-control:hover .replay-tooltip {
    opacity: 1;
    transform: translate(var(--replay-tooltip-offset, -50%), 0);
  }
}

/* Avisos del replay (formato no reproducible, reconstrucción fallida o partida
   terminada durante la preparación): tarjeta de pergamino como los estados
   vacíos de Partidas. También se inserta dentro del tablero del replay, que
   no carga home.css, así que no depende de él. */
.replay-notice-page {
  padding: 0 1rem;
}

.replay-notice {
  max-width: 36rem;
  margin: clamp(2.5rem, 9vh, 5.5rem) auto;
  padding: clamp(1.9rem, 5vw, 2.75rem) clamp(1.25rem, 5vw, 2.6rem);
  border: 1px solid rgba(90, 58, 34, 0.55);
  border-radius: 14px;
  background:
    radial-gradient(40% 30% at 12% 88%, rgba(90, 58, 34, 0.1), rgba(0, 0, 0, 0) 70%),
    radial-gradient(30% 24% at 88% 10%, rgba(90, 58, 34, 0.12), rgba(0, 0, 0, 0) 70%),
    repeating-linear-gradient(0deg, rgba(62, 95, 112, 0.07) 0 1px, rgba(0, 0, 0, 0) 1px 52px),
    repeating-linear-gradient(90deg, rgba(62, 95, 112, 0.07) 0 1px, rgba(0, 0, 0, 0) 1px 52px),
    linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  box-shadow: 0 34px 70px -24px rgba(10, 6, 2, 0.85), inset 0 0 90px rgba(90, 58, 34, 0.16);
  color: var(--ink-950);
  text-align: center;
  overflow-wrap: anywhere;
}

.replay-notice--summary {
  max-width: 44rem;
}

.replay-notice--inline {
  margin: 1.5rem auto;
}

/* Dentro del tablero no hay márgenes de página: en móvil no toca los bordes. */
#board > .replay-notice {
  width: calc(100% - 2rem);
}

.replay-notice-course {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(16rem, 70%);
  margin: 0 auto 1.4rem;
}

.replay-notice-course .home-x {
  flex: none;
  color: var(--lacquer);
}

.replay-notice-course-line {
  flex: 1;
  border-top: 2px dashed rgba(194, 84, 63, 0.95);
}

.replay-notice-course-dot {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #c2543f;
  box-shadow: 0 0 0 4px rgba(166, 58, 46, 0.25);
}

.replay-notice .replay-notice-kicker {
  max-width: none;
  margin: 0 0 0.6rem;
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.replay-notice h1,
.replay-notice h2 {
  margin: 0 0 0.7rem;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.replay-notice p {
  max-width: 50ch;
  margin: 0 auto;
  color: var(--ink-600);
  font-size: 0.98rem;
  line-height: 1.65;
}

.replay-notice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
}

.replay-notice-actions .btn-gold {
  padding: 0.8rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.replay-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.75rem;
  margin: 1.6rem 0 0;
  text-align: left;
}

.replay-summary-grid > div {
  padding: 0.8rem 0;
  border-top: 1px dashed rgba(90, 58, 34, 0.3);
}

.replay-summary-grid dt {
  color: var(--ink-600);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.replay-summary-grid dd {
  margin: 0.25rem 0 0;
  color: var(--ink-950);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 38rem) {
  .replay-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  gap: 0.7rem;
  border: none;
  background: rgba(0, 0, 0, 0.88);
  color: inherit;
  cursor: zoom-out;
}

.card-zoom-stage {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.card-zoom-overlay::backdrop {
  background: transparent;
}

.card-zoom-title {
  max-width: min(calc(100vw - 2rem), 36rem);
  margin: 0;
  overflow: hidden;
  color: var(--parchment-100);
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

.card-zoom-overlay[hidden],
.card-zoom-overlay:not([open]) {
  display: none;
}

.card-zoom-image {
  max-width: min(96vw, 28rem);
  max-height: calc(92dvh - 2.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.card-zoom-overlay.has-card-zoom-navigation .card-zoom-image {
  max-width: min(calc(100vw - 7.5rem), 28rem);
}

.card-zoom-nav {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: clamp(2.5rem, 6vw, 3.2rem);
  height: clamp(4rem, 11vw, 5.2rem);
  padding: 0;
  border: 1px solid rgba(224, 186, 83, 0.78);
  border-radius: 999px;
  background: rgba(35, 25, 14, 0.9);
  color: var(--gold-300);
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease;
}

.card-zoom-nav::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  content: "";
}

.card-zoom-nav--previous::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.card-zoom-nav--next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

.card-zoom-nav:hover:not(:disabled),
.card-zoom-nav:focus-visible {
  border-color: var(--gold-300);
  background: rgba(72, 49, 21, 0.96);
  color: var(--parchment-100);
  transform: translateY(-1px);
}

.card-zoom-nav:focus-visible {
  outline: 2px solid var(--parchment-100);
  outline-offset: 3px;
}

.card-zoom-nav:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: none;
}

.card-zoom-keyboard-hint {
  display: none;
  margin: 0;
  color: rgba(255, 248, 225, 0.72);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .card-zoom-overlay.has-card-zoom-navigation .card-zoom-keyboard-hint {
    display: block;
  }

  .card-zoom-overlay.has-card-zoom-navigation .card-zoom-image {
    max-height: calc(92dvh - 4rem);
  }
}

@media (max-width: 480px) {
  .card-zoom-overlay {
    padding: 0.5rem;
    gap: 0;
  }

  .card-zoom-stage {
    gap: 0.35rem;
  }

  .card-zoom-overlay.has-card-zoom-navigation .card-zoom-image {
    max-width: calc(100vw - 6rem);
  }

  .card-zoom-nav {
    width: 2.25rem;
    height: 4rem;
  }
}

/* --- Mobile layout (<= 1100px) --- */
.mobile-only {
  display: none;
}

@media (min-width: 1101px) {
  .mobile-menu-dialog,
  .opp-hand-dialog {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only.mobile-menu-trigger,
  .mobile-only.mobile-card-zoom-toggle,
  .mobile-only.mobile-fullscreen-toggle {
    display: inline-flex;
    flex-shrink: 0;
    min-width: 2.25rem;
    padding: 0.35rem 0.55rem;
    font-size: 1.1rem;
    line-height: 1;
  }

  .mobile-only.toolbar-site-menu {
    display: block;
    flex-shrink: 0;
  }

  .mobile-card-zoom-toggle.is-active {
    background: linear-gradient(180deg, #ffe082, #ffb300);
    outline: 2px solid #fff;
    outline-offset: 1px;
  }

  .mobile-only.toolbar-compact {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: visible;
  }

  .toolbar-compact .turn-pill,
  .toolbar-compact .phase-pill {
    font-size: 0.65rem;
    white-space: nowrap;
  }

  .toolbar-compact .badge {
    margin-left: auto;
    flex-shrink: 0;
  }

  .tcg-table {
    height: 100vh;
    height: 100dvh;
    padding: 0.25rem;
    gap: 0.25rem;
  }

  .table-toolbar {
    flex-shrink: 0;
    padding: 0.3rem 0.45rem;
    gap: 0.4rem;
  }

  .table-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 0.25rem;
  }

  .side-left {
    display: contents;
  }

  .side-left > .game-log {
    display: none;
  }

  /* La mano del rival vive en el toolbar (boton que abre su dialogo): el
     panel entero desaparece y su altura pasa a los mats. */
  .hand-panel--opp {
    display: none;
  }

  .toolbar-compact .opp-hand-trigger {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--accent-dark);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    cursor: pointer;
  }

  .toolbar-compact .opp-hand-trigger:active,
  .toolbar-compact .opp-hand-trigger:focus-visible {
    color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .mat-column {
    order: 2;
    flex: 1;
    min-height: 0;
    gap: 0.25rem;
  }

  .mat-half {
    min-height: 0;
  }

  .mat-half--flipped {
    transform: none;
  }

  .mat-half--flipped .mat-inner {
    transform: none;
    /* En movil la banda DON!!/cost del rival vuelve ABAJO: si falta altura se
       recorta esa banda, nunca las cartas (lider y personajes van primero). */
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "life  chars chars deck"
      ".     chars chars trash"
      "don   cost  cost  cost";
  }

  .mat-half--flipped .char-area {
    flex-direction: column;
    /* El aire sobrante queda al fondo: las cartas suben y no se recortan. */
    justify-content: flex-start;
  }

  /* El lider rival va arriba del area de personajes: con poca altura lo que
     se recorta es la fila de personajes/huecos, nunca el lider. */
  .mat-half--flipped .char-row--leader {
    order: -1;
  }

  /* La banda de DON!! no envuelve a otra linea (robaria altura al mat): los
     tokens encogen en una sola fila y se recortan por la derecha. */
  .cost-row {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .cost-row .don-token {
    flex: 0 1 var(--don-token-w);
    min-width: 10px;
    object-fit: cover;
    object-position: left center;
  }

  /* Dock de acciones compacto: cada px ahorrado es altura para los mats.
     (El tope de altura vive en la regla del breakpoint de 700px.) */
  .action-dock {
    padding: 0.35rem;
  }

  .dock-title {
    display: none;
  }

  .action-dock .btn-action {
    padding: 0.5rem 0.75rem;
    min-height: 2.4rem;
    font-size: 0.9rem;
  }

  .counter-step-summary {
    margin: 0 0 0.2rem;
  }

  .counter-step-line {
    font-size: 0.62rem;
  }

  .table-toolbar {
    padding: 0.2rem 0.4rem;
  }

  .hand-panel {
    padding: 0.25rem;
  }

  .hand-panel--you {
    order: 3;
    flex-shrink: 0;
    max-height: 16vh;
    flex: none;
    min-height: 0;
    padding-top: 0.25rem;
  }

  .hand-panel--you .hand-label {
    display: none;
  }

  .hand-panel--you .hand-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex: none;
    --card-w-hand: 56px;
    --card-h-hand: 78px;
    /* Padding minimo: la altura sobrante pasa a los mats. */
    padding: 3px 4px;
    min-height: calc(var(--card-h-hand) + 6px);
  }

  .side-right {
    display: contents;
  }

  #card-preview {
    display: none;
  }

  .action-dock {
    order: 4;
    flex-shrink: 0;
    /* Tope: un menu contextual largo scrollea dentro del dock en vez de
       aplastar los mats (cartas recortadas). */
    max-height: 32vh;
    overflow-y: auto;
    padding: 0.35rem;
  }

  /* (El menu contextual compacto se ajusta mas abajo, en las reglas
     existentes de .action-dock .btn-action / .context-panel-title.) */

  .action-dock .dock-title {
    display: none;
  }

  .action-list,
  .context-panel-actions,
  .replacement-actions,
  .wizard-options,
  .action-dock-default {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    overflow: visible;
    max-height: none;
  }

  .wizard-panel,
  .confirm-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
  }

  .wizard-options,
  .confirm-panel-actions {
    grid-column: 1 / -1;
  }

  /* Los chips de cantidad mantienen la fila con wrap también en móvil
     (la rejilla 1fr 1fr de arriba estiraba cada chip a media pantalla). */
  .wizard-options--chips,
  .action-list--chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* Con ``form { display: contents }`` los botones son los items del flex;
     ganar a ``.action-dock .btn-action { width: 100% }`` exige un selector
     más específico. */
  .action-dock .wizard-options--chips .btn-action,
  .action-dock .action-list--chips .btn-action {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .end-phase-groups {
    gap: 0.4rem;
    overflow: visible;
  }

  .end-phase-group {
    padding: 0.35rem;
  }

  .end-phase-group-title {
    margin-bottom: 0.35rem;
    font-size: 0.7rem;
  }

  .action-dock-default:empty {
    display: none;
  }

  .action-list form,
  .action-dock-default form,
  .confirm-panel form,
  .wizard-options form {
    display: contents;
  }

  .action-dock .btn-action {
    width: 100%;
    min-height: 2rem;
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 0.4rem 0.5rem;
  }

  .context-panel {
    margin-bottom: 0.25rem;
  }

  .context-panel-title {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }

  .context-panel-meta {
    margin: -4px 0 2px;
    color: rgba(232, 217, 181, 0.6);
    font-size: 0.71875rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }

  .counter-step-summary {
    grid-column: 1 / -1;
  }

  .replacement-summary {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
    padding: 0.35rem 0.45rem;
  }

  .replacement-summary-title {
    font-size: 0.62rem;
  }

  .replacement-summary-text {
    font-size: 0.62rem;
  }

  .wizard-panel h4,
  .confirm-panel p:not(.opening-choice-title) {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
  }

  .wizard-target-hint {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
  }

  :root {
    --card-w-field: 40px;
    --card-h-field: 56px;
    --card-w-mini: 36px;
    --card-h-mini: 50px;
    --card-w-life: 40px;
    --card-h-life: 56px;
    --don-token-w: 36px;
    --don-token-h: 50px;
  }

  .char-row--units,
  .char-row--leader {
    --don-base: 9px;
    --don-fan-step: 3px;
    gap: 0.3rem;
  }

  .char-row--units {
    gap: 0.35rem;
  }

  .card-slot--field .power-badge,
  .card-slot--field .cost-badge {
    font-size: 0.5rem;
    padding: 0.03rem 0.17rem;
  }

  .card-slot--field .power-badge {
    min-width: 1.6rem;
  }

  .card-slot--field .don-count-label {
    font-size: 0.48rem;
    -webkit-text-stroke: 0.4px #fff;
  }

  .card-slot--empty {
    width: var(--card-w-field);
    height: var(--card-h-field);
  }

  .mat-inner {
    grid-template-columns: 40px 1fr 40px 40px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0.25rem;
    gap: 0.15rem;
    align-items: start;
  }

  .zone-life,
  .zone-deck,
  .zone-trash,
  .zone-don-deck {
    align-self: start;
    height: auto;
    min-height: 0;
  }

  .zone-life .zone-content,
  .zone-deck .zone-content,
  .zone-trash .zone-content,
  .zone-don-deck .zone-content {
    flex: 0 0 auto;
    padding: 0.1rem;
  }

  .life-stack-pile {
    --life-step: 4px;
    max-height: calc(var(--card-h-life) + var(--life-step));
    overflow: hidden;
  }

  .zone-characters {
    min-height: 0;
  }

  .zone-label,
  .slot-label {
    display: none;
  }

  .tcg-table.card-zoom-mode .card-slot {
    cursor: zoom-in;
  }

  .opp-hand-dialog {
    border: none;
    padding: 0;
    max-width: min(96vw, 32rem);
    width: min(96vw, 32rem);
    max-height: 85vh;
    background: transparent;
    color: inherit;
  }

  .opp-hand-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }

  .opp-hand-dialog-panel {
    background: var(--panel);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 1rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .opp-hand-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .opp-hand-dialog-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .opp-hand-dialog-close {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
  }

  .hand-row--opp-dialog {
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    max-height: 60vh;
    --card-w-hand: 72px;
    --card-h-hand: 100px;
  }

  .mobile-menu-dialog {
    border: none;
    padding: 0;
    max-width: min(92vw, 26rem);
    width: min(92vw, 26rem);
    max-height: 85vh;
    background: transparent;
    color: inherit;
  }

  .mobile-menu-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }

  .mobile-menu-panel {
    background: var(--panel);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 1rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .mobile-menu-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
  }

  .mobile-menu-close {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
  }

  .mobile-menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .mobile-menu-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(201, 162, 39, 0.25);
  }

  .mobile-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
  }

  .mobile-menu-section-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mobile-menu-section .game-log {
    flex: 1;
    min-height: 8rem;
    max-height: 40vh;
    overflow: hidden;
  }
}

/* En el layout movil el dock ocupa todo el ancho. A partir de 560px caben
   dos decisiones legibles; en vertical estrecho vuelven a una sola columna. */
@media (min-width: 560px) and (max-width: 1100px) {
  .end-phase-group-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Parchment menu pages (Decks / Settings / Changelog / lobby): main block
   matches the home chart surface --- */
.home-panel,
.replay-panel {
  color: var(--ink-900);
  background: radial-gradient(38% 30% at 10% 92%, rgba(90, 58, 34, 0.1), rgba(0, 0, 0, 0) 70%),
    radial-gradient(32% 26% at 92% 6%, rgba(90, 58, 34, 0.12), rgba(0, 0, 0, 0) 70%),
    repeating-linear-gradient(0deg, rgba(62, 95, 112, 0.06) 0px, rgba(62, 95, 112, 0.06) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 52px),
    repeating-linear-gradient(90deg, rgba(62, 95, 112, 0.06) 0px, rgba(62, 95, 112, 0.06) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 52px),
    linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  border: 1px solid rgba(90, 58, 34, 0.5);
  box-shadow: 0 24px 55px -20px rgba(10, 6, 2, 0.72), inset 0 0 80px rgba(90, 58, 34, 0.13);
}

.home-panel h1,
.home-panel h2,
.replay-panel h2 {
  color: var(--ink-950);
}

/* labels + fields on parchment */
.home-field,
.home-field span,
.deck-search-field span,
.settings-row-hint,
.deck-editable-note,
.deck-hover-preview-placeholder {
  color: var(--ink-600);
}

.settings-row-title,
.deck-modal-header h3 {
  color: var(--ink-950);
}

.home-field input,
.home-field select,
.home-select,
.deck-builder-sidebar input,
.deck-builder-sidebar textarea,
.deck-import-panel textarea,
#deck-card-search {
  background: rgba(255, 252, 242, 0.82);
  border: 1px solid rgba(90, 58, 34, 0.45);
  color: var(--ink-950);
}

.home-field select,
select.home-select {
  color-scheme: light;
  background-color: rgba(255, 252, 242, 0.82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%235A3A22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 0.7rem;
}

.home-field select option,
select.home-select option {
  background: #fbf4e2;
  color: var(--ink-950);
}

.home-field input:focus,
.home-field select:focus,
.home-select:focus,
.deck-builder-sidebar input:focus,
.deck-builder-sidebar textarea:focus,
.deck-import-panel textarea:focus,
#deck-card-search:focus {
  border-color: var(--wood-700);
  box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.25);
}

.home-field input::placeholder,
.deck-builder-sidebar input::placeholder,
.deck-builder-sidebar textarea::placeholder,
.deck-import-panel textarea::placeholder,
#deck-card-search::placeholder {
  color: rgba(74, 56, 38, 0.55);
}

/* ghost buttons on parchment */
.home-panel .btn-ghost {
  background: rgba(90, 58, 34, 0.1);
  border-color: rgba(90, 58, 34, 0.4);
  color: var(--wood-700);
}

.home-panel .btn-ghost:hover {
  background: rgba(90, 58, 34, 0.18);
  border-color: var(--wood-700);
  color: var(--ink-950);
}

/* Casual queue ---------------------------------------------------------- */
@media (max-width: 640px) {
  .queue-activity {
    width: 100%;
    border-radius: 12px;
    font-size: 0.76rem;
  }
}

/* settings toggles + rows */
.settings-row {
  border-top-color: rgba(90, 58, 34, 0.2);
}

.settings-toggle {
  background: rgba(74, 56, 38, 0.25);
  border-color: rgba(90, 58, 34, 0.42);
}

.settings-toggle::before {
  background: var(--wood-700);
}

.settings-toggle:checked {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  border-color: var(--accent-dark);
}

.settings-toggle:checked::before {
  background: #fff8e6;
}

/* deck builder insets */
.deck-builder-status {
  background: rgba(255, 252, 242, 0.55);
  border-color: rgba(90, 58, 34, 0.35);
  color: var(--ink-600);
}

.deck-page-panel .deck-builder-status[data-tone="ok"] {
  background: rgba(31, 99, 54, 0.1);
  border-color: rgba(31, 99, 54, 0.65);
  color: #1f6336;
}

.deck-page-panel .deck-builder-status[data-tone="error"] {
  background: rgba(166, 58, 46, 0.1);
  border-color: rgba(166, 58, 46, 0.7);
  color: var(--lacquer);
}

.deck-builder-current,
.deck-card-results,
.deck-hover-preview {
  background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(90, 58, 34, 0.05)),
    rgba(255, 250, 235, 0.5);
  border-color: rgba(90, 58, 34, 0.35);
}

.deck-color-filter {
  background: rgba(255, 252, 242, 0.62);
  color: var(--ink-600);
}

.deck-builder-card-name,
.deck-search-card .deck-builder-card-name {
  color: var(--ink-600);
}

.deck-hover-preview-title {
  color: var(--wood-700);
}

.deck-builder-card-img {
  border-color: rgba(90, 58, 34, 0.4);
}

.deck-card-zoom {
  background: rgba(255, 252, 242, 0.88);
  border-color: rgba(90, 58, 34, 0.5);
  color: var(--wood-700);
}

.deck-card-zoom:hover:not(:disabled),
.deck-card-zoom:focus-visible {
  border-color: var(--gold-500);
  color: var(--gold-500);
}

.deck-builder-empty {
  color: var(--ink-600);
}

/* deck modals → parchment */
.deck-modal-dialog {
  background: linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  border-color: rgba(90, 58, 34, 0.5);
}

.deck-modal-close {
  background: rgba(255, 252, 242, 0.7);
  border-color: rgba(90, 58, 34, 0.45);
  color: var(--wood-700);
}

/* --- Match Board · design variants 1a / 1b / 1e / 1f (2026-07) ---
   The real card art, card backs and DON!! assets remain in the existing
   templates. These rules only reshape the table that holds them. */
@keyframes match-board-gold-glow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.86;
  }
}

@keyframes match-board-target-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Mesa: el mismo fondo que el resto de la web, con la luz del farol fija (sin
   el pulso de las demás páginas). También en replays (page-play) y en móvil,
   donde `.tcg-table` no tiene fondo propio. */
body.page-play {
  background-image: var(--page-lantern), var(--page-backdrop);
}

@media (prefers-reduced-motion: reduce) {
  .page-play .card-action-target,
  .page-play .is-attack-viable,
  .page-play .is-effect-viable,
  .look-panel--deck .look-card:not(.look-card--disabled) .look-card-img {
    animation: none !important;
  }
}

/* 1a and 1b use the desktop composition; the shared 1f skin is translated
   into its 300×420 touch dialog below. Keeping the board rules here prevents
   the unfinished 1c/1d mobile mats from being restyled. */
@media (min-width: 1101px) {
  .tcg-table {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0;
    gap: 0;
    background: radial-gradient(60% 34% at 50% 0%, rgba(224, 194, 102, 0.05), transparent 70%);
  }

  .table-toolbar {
    flex: 0 0 auto;
    min-height: 52px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .table-toolbar .toolbar-left,
  .table-toolbar .toolbar-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .table-toolbar .toolbar-right {
    gap: 12px;
    margin-left: auto;
    justify-content: flex-end;
  }

  /* Sin dorado: el dorado queda para las acciones de la partida. */
  .table-toolbar .toolbar-left .btn-toolbar {
    min-height: 32px;
    padding: 7px 14px;
    background: rgba(255, 240, 210, 0.04);
    border: 0;
    border-radius: 8px;
    color: var(--parchment-100);
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.55);
  }

  /* Los enlaces (Inicio, Nueva partida) centran el texto como los botones:
     como bloque lo dejaban 1,5 px más arriba por la altura mínima. */
  .table-toolbar .toolbar-left a.btn-toolbar {
    display: inline-flex;
    align-items: center;
  }

  .table-toolbar .toolbar-left .btn-toolbar:hover,
  .table-toolbar .toolbar-left .btn-toolbar:focus-visible {
    color: var(--parchment-100);
    background: rgba(255, 240, 210, 0.09);
    outline: none;
  }

  .table-toolbar .toolbar-left .btn-toolbar:focus-visible {
    box-shadow:
      inset 0 0 0 1px rgba(224, 194, 102, 0.85),
      0 0 0 2px rgba(224, 194, 102, 0.45);
  }

  .table-toolbar .toolbar-left .bug-report-trigger,
  .table-toolbar .toolbar-left .bug-report-trigger:hover {
    color: #f6d3cc;
    box-shadow: inset 0 0 0 1px rgba(214, 96, 82, 0.6);
  }

  .table-toolbar .toolbar-left .desktop-card-zoom-toggle,
  .table-toolbar .toolbar-left .desktop-fullscreen-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 7px;
    color: var(--text-secondary);
    box-shadow: none;
    font-size: 0;
  }

  .table-toolbar .toolbar-left .desktop-card-zoom-toggle:hover,
  .table-toolbar .toolbar-left .desktop-card-zoom-toggle:focus-visible,
  .table-toolbar .toolbar-left .desktop-fullscreen-toggle:hover,
  .table-toolbar .toolbar-left .desktop-fullscreen-toggle:focus-visible {
    background: rgba(196, 154, 58, 0.08);
    border-color: rgba(224, 194, 102, 0.42);
    color: var(--parchment-100);
    box-shadow: none;
  }

  .desktop-card-zoom-toggle::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    transform: translate(-1px, -1px);
  }

  .desktop-card-zoom-toggle::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 19px;
    width: 6px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: left center;
  }

  .table-toolbar .toolbar-left .desktop-card-zoom-toggle.is-active,
  .table-toolbar .toolbar-left .desktop-fullscreen-toggle.is-active {
    background: rgba(196, 154, 58, 0.14);
    border-color: rgba(224, 194, 102, 0.65);
    color: var(--gold-300);
    box-shadow: none;
    outline: 0;
  }

  .table-toolbar .toolbar-left .bug-report-icon {
    display: none;
  }

  .toolbar-status {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 32px;
    padding: 6px 8px 6px 16px;
    /* Placa de latón. */
    background: linear-gradient(180deg, #3b2b18, #241a0f);
    border: 1px solid rgba(201, 162, 74, 0.6);
    border-radius: 9px;
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 190, 0.16),
      0 5px 12px -5px rgba(0, 0, 0, 0.7);
  }

  .toolbar-status .turn-pill,
  .toolbar-status .phase-pill {
    padding: 0;
    background: transparent;
    color: var(--parchment-100);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }

  .toolbar-status .phase-pill {
    color: var(--text-secondary);
    font-weight: 400;
  }

  .toolbar-divider {
    width: 1px;
    height: 14px;
    flex: 0 0 auto;
    background: var(--border-hairline);
  }

  .toolbar-status .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    box-shadow: none;
  }

  .toolbar-status .badge.human {
    background: transparent;
    color: var(--gold-300);
  }

  .toolbar-status .badge.human::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    background: var(--gold-300);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(224, 194, 102, 0.85);
  }

  .toolbar-status .badge.bot {
    background: rgba(62, 95, 112, 0.28);
    color: color-mix(in srgb, var(--map-blue) 42%, var(--parchment-300) 58%);
    border: 1px solid rgba(62, 95, 112, 0.5);
    box-shadow: none;
  }

  .table-toolbar .seed-pill {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(196, 154, 58, 0.18);
    border-radius: 8px;
    color: rgba(232, 217, 181, 0.55);
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }

  .table-toolbar .site-menu--play .site-menu-button {
    width: 34px;
    min-width: 34px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    color: var(--text-secondary);
  }

  .table-toolbar .site-menu--play {
    height: 32px;
    line-height: 0;
  }

  .table-body {
    grid-template-columns:
      clamp(260px, 20.833vw, 300px)
      minmax(0, 1fr)
      clamp(240px, 20.833vw, 300px);
    gap: 12px;
    padding: 4px 16px 14px;
  }

  .side-left,
  .side-right {
    gap: 12px;
  }

  .hand-panel,
  .game-log,
  .card-preview,
  .action-dock {
    background: var(--surface-brass);
    border: 1px solid rgba(224, 194, 102, 0.24);
    border-radius: 12px;
    box-shadow:
      0 26px 50px -30px rgba(0, 0, 0, 0.95),
      inset 0 1px 0 rgba(242, 231, 204, 0.08);
  }

  .hand-panel {
    padding: 12px 14px;
  }

  .hand-panel--opp {
    border-color: rgba(62, 95, 112, 0.42);
  }

  .hand-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-label);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
  }

  .hand-count {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
  }

  .hand-panel--opp .hand-row {
    --card-w-hand: 38px;
    --card-h-hand: 53px;
    min-height: 53px;
    padding: 0;
    overflow: hidden;
  }

  .hand-panel--opp .hand-row .card-slot--hand {
    flex: 0 0 var(--card-w-hand);
    width: var(--card-w-hand);
    min-width: var(--card-w-hand);
    height: var(--card-h-hand);
    margin-left: -14px;
  }

  .hand-panel--opp .hand-row .card-slot--hand:first-child {
    margin-left: 0;
  }

  .hand-panel--opp .hand-row .card-slot--hand .card-inner {
    width: var(--card-w-hand);
    height: var(--card-h-hand);
  }

  .hand-panel--you {
    min-height: 0;
    max-height: 42vh;
    overflow: hidden;
  }

  .hand-panel--you .hand-label {
    flex: 0 0 auto;
  }

  .hand-panel--you .hand-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding: 10px;
  }

  /* En la cuadrícula el dedo en vertical desplaza la mano; en horizontal
     arrastra la carta para reordenarla o llevarla al tablero. */
  .hand-panel--you .hand-row[data-hand-reorder] > .card-slot--hand {
    touch-action: pan-y;
  }

  .hand-panel--you .hand-row:focus-visible {
    outline: 2px solid var(--gold-300);
    outline-offset: -2px;
    border-radius: 7px;
  }

  .hand-panel--you .hand-row .card-slot--hand,
  .hand-panel--you .hand-row .card-slot--hand:last-child {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 63 / 88;
    flex: none;
  }

  .hand-panel--you .hand-row .card-slot--hand .card-inner {
    width: 100%;
    height: 100%;
  }

  .hand-panel--you .card-slot--hand.card-action-target {
    z-index: 2;
    animation: match-board-gold-glow 2.4s ease-in-out infinite;
  }

  .hand-panel--you .hand-row .card-slot--hand.card-action-target.is-selected::before,
  .hand-panel--you .hand-row .card-slot--hand.card-action-target.is-selected::after {
    inset: -3px;
    width: auto;
    height: auto;
  }

  .game-log {
    min-height: 0;
    padding: 12px 14px;
    background: var(--surface-brass);
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .game-log-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }

  .game-log-title {
    margin: 0;
    color: var(--text-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .game-log-title-rule {
    flex: 1;
    border-top: 1px solid rgba(196, 154, 58, 0.18);
  }

  .game-log-header {
    display: block;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .game-log-matchup {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  .game-log-matchup .log-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .game-log-matchup .log-player--you {
    flex: 1 1 auto;
  }

  .game-log-matchup .log-player--opponent,
  .game-log-matchup-separator {
    flex: 0 1 auto;
  }

  .game-log-scroll {
    padding: 0 4px 0 0;
    scrollbar-color: rgba(196, 154, 58, 0.42) transparent;
  }

  .history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .history-list li {
    display: block;
    margin: 0;
    color: rgba(232, 217, 181, 0.62);
    line-height: 1.7;
  }

  .history-list li:not(.history-group-heading):not(.history-load-older) {
    display: flex;
    gap: 7px;
    line-height: 1.45;
  }

  .history-list .history-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    color: var(--log-you-color);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .history-list .history-group-heading:first-child {
    margin-top: 0;
  }

  .history-list .history-group-heading--opponent {
    color: var(--log-opponent-color);
  }

  .history-group-label {
    flex: 0 0 auto;
  }

  .history-group-rule {
    flex: 1;
    border-top: 1px solid rgba(196, 154, 58, 0.14);
  }

  .history-index {
    display: block;
    width: 20px;
    flex: 0 0 20px;
    padding-top: 2px;
    color: rgba(224, 194, 102, 0.55);
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.65625rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .mat-column {
    gap: 30px;
  }

  .mat-column::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    z-index: 10;
    height: 1px;
    background: rgba(196, 154, 58, 0.22);
    pointer-events: none;
  }

  .mat-column::before {
    content: "✦";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    padding: 0 8px;
    color: rgba(196, 154, 58, 0.48);
    background: var(--ink-950);
    font-size: 0.875rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .mat-half {
    --card-w-field: 78px;
    --card-h-field: 109px;
    --card-w-mini: 44px;
    --card-h-mini: 61px;
    --card-w-life: 44px;
    --card-h-life: 61px;
    --don-token-w: 34px;
    --don-token-h: 47px;
    --card-w-leader: 78px;
    --card-h-leader: 109px;
    border: 1px solid rgba(90, 58, 34, 0.55);
    border-radius: 12px;
    background-color: var(--parchment-300);
    background-image:
      linear-gradient(180deg, rgba(196, 154, 58, 0.13), rgba(196, 154, 58, 0.05)),
      repeating-linear-gradient(0deg, rgba(90, 58, 34, 0.08) 0, rgba(90, 58, 34, 0.08) 1px, transparent 1px, transparent 44px),
      repeating-linear-gradient(90deg, rgba(90, 58, 34, 0.08) 0, rgba(90, 58, 34, 0.08) 1px, transparent 1px, transparent 44px),
      linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
    box-shadow:
      0 18px 40px -14px rgba(10, 6, 2, 0.7),
      inset 0 0 28px rgba(90, 58, 34, 0.14);
  }

  .mat-half--flipped {
    transform: none;
    border-color: rgba(62, 95, 112, 0.55);
    background-color: var(--parchment-300);
    background-image:
      linear-gradient(180deg, rgba(62, 95, 112, 0.1), rgba(62, 95, 112, 0.04)),
      repeating-linear-gradient(0deg, rgba(62, 95, 112, 0.07) 0, rgba(62, 95, 112, 0.07) 1px, transparent 1px, transparent 44px),
      repeating-linear-gradient(90deg, rgba(62, 95, 112, 0.07) 0, rgba(62, 95, 112, 0.07) 1px, transparent 1px, transparent 44px),
      linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  }

  .mat-inner {
    grid-template-columns: 82px 12px minmax(0, 1fr) 12px 82px;
    grid-template-rows: 238px 59px;
    grid-template-areas: none;
    column-gap: 0;
    row-gap: 24px;
    align-content: center;
    padding: 10px 12px;
  }

  .mat-half--flipped .mat-inner {
    transform: none;
    grid-template-columns: 82px 12px minmax(0, 1fr) 12px 82px;
    grid-template-rows: 238px 59px;
    grid-template-areas: none;
  }

  .zone {
    border: 0;
    border-radius: 8px;
    background: transparent;
  }

  .zone-label,
  .slot-label {
    padding: 0;
    color: #4a3826;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-shadow: none;
  }

  .mat-half--flipped .zone-label,
  .mat-half--flipped .slot-label {
    color: #4a3826;
  }

  .zone-life {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    align-items: center;
    gap: 6px;
  }

  .zone-life .zone-content {
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
  }

  .life-stack-pile {
    --life-step: 15.5px;
    margin-top: 38px;
  }

  .life-stack-pile > .stack-count--life {
    top: -38px;
    right: 50%;
    bottom: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, var(--lacquer), color-mix(in srgb, var(--lacquer) 60%, var(--ink-950) 40%));
    color: var(--parchment-100);
    font-size: 0.8125rem;
    line-height: 28px;
    text-align: center;
    transform: translateX(50%);
    box-shadow:
      inset 0 1px 0 rgba(242, 231, 204, 0.25),
      0 3px 8px rgba(0, 0, 0, 0.5);
  }

  .zone-life .zone-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 58, 46, 0.32);
    color: var(--parchment-100);
  }

  .zone-characters {
    grid-column: 3;
    grid-row: 1;
    height: 100%;
  }

  .zone-characters .zone-content {
    padding: 0 6px;
  }

  .char-area {
    gap: 8px;
  }

  .zone-deck,
  .zone-trash {
    grid-column: 5;
    grid-row: 1;
    height: auto;
    align-items: center;
    gap: 5px;
    overflow: visible;
  }

  .zone-deck {
    align-self: start;
  }

  .zone-trash {
    align-self: start;
    transform: translateY(105px);
  }

  .zone-trash .zone-empty {
    position: relative;
    display: block;
    width: 44px;
    height: 61px;
    border-radius: 5px;
    background: #d9c69a;
    color: transparent;
    box-shadow:
      inset 0 2px 6px rgba(90, 58, 34, 0.42),
      inset 0 -1px 0 rgba(242, 231, 204, 0.7);
  }

  .zone-trash .zone-empty::after {
    content: "0";
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
    transform: translateX(-50%);
  }

  .zone-deck .zone-content,
  .zone-trash .zone-content {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 0 20px;
    overflow: visible;
  }

  .zone-deck .card-slot--life,
  .zone-trash .card-slot--mini,
  .zone-trash-trigger {
    overflow: visible;
  }

  .zone-deck .stack-count,
  .zone-trash .zone-count {
    top: calc(100% + 5px);
    right: 50%;
    bottom: auto;
    padding: 0;
    background: transparent;
    color: rgba(74, 56, 38, 0.85);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    transform: translateX(50%);
  }

  .zone-don-deck {
    grid-column: 1 / 3;
    grid-row: 2;
    height: 59px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 0 6px 10px;
    background: rgba(90, 58, 34, 0.15);
    border-radius: 8px 0 0 8px;
    box-shadow: inset 0 2px 6px rgba(90, 58, 34, 0.38);
  }

  .zone-don-deck .zone-content {
    width: 34px;
    height: 47px;
    min-height: 0;
    flex: 0 0 34px;
    padding: 0;
    overflow: visible;
  }

  .zone-don-deck .card-slot--mini,
  .zone-don-deck .card-image {
    width: 34px;
    height: 47px;
  }

  .zone-don-deck .stack-count {
    right: -5px;
    bottom: -3px;
    padding: 0 2px;
    font-size: 0.4375rem;
    line-height: 1.15;
  }

  .zone-cost {
    grid-column: 3 / 6;
    grid-row: 2;
    height: 59px;
    flex-direction: row;
    align-items: center;
    background: rgba(90, 58, 34, 0.15);
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 2px 6px rgba(90, 58, 34, 0.38);
  }

  .zone-cost > .zone-label {
    display: none;
  }

  .zone-cost .zone-content {
    height: 59px;
    min-height: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 6px 10px;
    overflow: hidden;
  }

  .zone-cost::after {
    content: attr(data-don-summary);
    flex: 0 0 auto;
    padding-right: 10px;
    color: rgba(74, 56, 38, 0.7);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .mat-half:not(.mat-half--flipped) .zone-cost::after {
    color: #4a3826;
  }

  .cost-row {
    gap: 6px;
    padding: 0;
    flex-wrap: nowrap;
  }

  .zone-cost .don-token--rested {
    margin-inline: 6.5px;
  }

  .char-area {
    justify-content: center;
    gap: 20px;
  }

  .char-row--units {
    gap: 10px;
  }

  .char-row--leader {
    gap: 12px;
  }

  .char-row--units .card-slot--field.rested {
    width: 110px;
    height: 110px;
  }

  .char-row--units .card-slot--field.rested .card-inner {
    width: var(--card-w-field);
    height: var(--card-h-field);
  }

  .card-slot--leader {
    width: var(--card-w-leader);
    height: var(--card-h-leader);
    border-radius: 9px;
    outline: 0;
    box-shadow:
      inset 0 0 0 1.5px rgba(224, 194, 102, 0.55),
      0 6px 16px -6px rgba(0, 0, 0, 0.7);
  }

  .mat-half--flipped .card-slot--leader {
    box-shadow:
      inset 0 0 0 1.5px rgba(62, 95, 112, 0.65),
      0 6px 16px -6px rgba(0, 0, 0, 0.7);
  }

  .card-slot--empty {
    border: 0;
    border-radius: 9px;
    background: #d9c69a;
    box-shadow:
      inset 0 2px 8px rgba(90, 58, 34, 0.42),
      inset 0 -1px 0 rgba(242, 231, 204, 0.7);
  }

  .leader-line-slot--stage {
    position: relative;
    width: var(--card-w-field);
    height: var(--card-h-field);
    align-self: center;
  }

  .leader-line-slot--stage .slot-label {
    position: absolute;
    left: 50%;
    bottom: 6px;
    z-index: 2;
    color: rgba(90, 58, 34, 0.5);
    transform: translateX(-50%);
  }

  .leader-line-slot--stage .card-slot {
    width: var(--card-w-field);
    height: var(--card-h-field);
  }

  .tcg-table.attack-pick-mode .card-attack-target.is-attack-viable:not(.is-selected),
  .tcg-table.effect-pick-mode .card-effect-target.is-effect-viable:not(.is-selected),
  .tcg-table.effect-pick-mode .battle-unit.is-effect-viable:not(.is-selected) {
    outline: 0;
    animation: none;
  }

  .card-action-target.is-selected::before {
    border-color: var(--gold-300);
    box-shadow:
      0 0 0 1px rgba(242, 231, 204, 0.75),
      0 0 18px rgba(224, 194, 102, 0.75);
  }

  .card-preview {
    flex: 1 1 auto;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    overflow: hidden;
  }

  .card-preview-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  .card-preview-title {
    margin: 0;
    color: var(--text-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .card-preview-title-rule {
    flex: 1;
    border-top: 1px solid rgba(196, 154, 58, 0.18);
  }

  .card-preview-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 12px 0;
    color: rgba(232, 217, 181, 0.55);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.6;
  }

  .card-preview-placeholder-text {
    max-width: 200px;
    margin: 0;
  }

  .card-preview-empty-icon {
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
  }

  .card-preview-image {
    align-self: center;
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
    border-radius: 9px;
    box-shadow:
      inset 0 0 0 1.5px rgba(224, 194, 102, 0.4),
      0 12px 26px -10px rgba(0, 0, 0, 0.75);
  }

  .action-dock {
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    overflow: visible;
    padding: 14px 16px 16px;
    background:
      linear-gradient(180deg, rgba(196, 154, 58, 0.1), rgba(196, 154, 58, 0.02)),
      var(--surface-brass);
    border-color: rgba(224, 194, 102, 0.48);
  }

  .context-panel {
    gap: 10px;
    margin-bottom: 0;
  }

  .dock-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--text-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-align: left;
  }

  .dock-title::after {
    content: "";
    flex: 1;
    border-top: 1px solid rgba(224, 194, 102, 0.3);
  }

.opening-choice-title {
    margin: 0 0 10px;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
  }

  .opening-choice-actions {
    flex: 0 0 auto;
    gap: 8px;
    overflow: visible;
  }

  .dock-muted,
  .counter-step-line,
  .replacement-summary-text {
    color: rgba(232, 217, 181, 0.58);
  }

  .wizard-panel h4,
  .context-panel-title,
  .replacement-summary-title,
  .end-phase-source-prompt,
  .end-phase-group-title {
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
  }

  .action-dock .confirm-panel p:not(.opening-choice-title) {
    color: var(--text-secondary);
  }

  .end-phase-groups {
    gap: 10px;
    overflow: visible;
  }

  .end-phase-group {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .end-phase-group-title {
    margin: 0 0 10px;
    line-height: 1.2;
    text-align: left;
  }

  .end-phase-group-actions {
    gap: 8px;
  }

  .context-panel-meta {
    margin: -4px 0 2px;
    color: rgba(232, 217, 181, 0.6);
    font-size: 0.71875rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }

  .action-dock .btn-action,
  .action-dock .btn-action.btn-danger {
    min-height: 42px;
    padding: 11px 16px;
    background: var(--btn-gold-background);
    border: 0;
    border-radius: var(--btn-gold-radius);
    color: var(--btn-gold-color);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--btn-gold-shadow);
  }

  /* 1b · deck look overlay. Other look-derived workflows keep their legacy
     layout because only this overlay has the modifier classes. */
  .look-overlay[data-look-overlay="deck"] {
    padding: 24px;
    background: rgba(21, 14, 8, 0.89);
    backdrop-filter: none;
  }

  .look-panel--deck {
    width: min(900px, calc(100vw - 48px));
    max-width: 900px;
    max-height: calc(100vh - 48px);
    padding: 28px 32px 26px;
    background: linear-gradient(180deg, #2a2016, var(--surface-panel));
    border: 1px solid rgba(196, 154, 58, 0.4);
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgba(242, 231, 204, 0.12),
      0 28px 60px -12px rgba(0, 0, 0, 0.85);
    text-align: left;
  }

  .look-panel--deck .look-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .look-panel--deck .look-title {
    margin: 0;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  .look-panel--deck .look-hint {
    max-width: 54%;
    margin: 0;
    padding: 4px 10px;
    background: var(--parchment-300);
    border-radius: 4px;
    color: var(--ink-900);
    font-size: 0.59375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.35;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .look-panel--deck .look-cards {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 2px;
    overflow-x: auto;
  }

  .look-panel--deck .look-card {
    flex: 0 0 136px;
    width: 136px;
    gap: 10px;
  }

  .look-panel--deck .look-card-img {
    width: 136px;
    border-radius: 9px;
  }

  .look-panel--deck.look-panel--selecting .look-card:not(.look-card--disabled) .look-card-img {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 2px var(--gold-300),
      0 0 18px rgba(224, 194, 102, 0.65),
      0 10px 24px -8px rgba(0, 0, 0, 0.75);
    animation: match-board-gold-glow 2.4s ease-in-out infinite;
  }

  .look-panel--deck .look-card--disabled .look-card-img {
    opacity: 0.42;
    filter: saturate(0.4);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  }

  .look-panel--deck .btn-look {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    padding: 9px 8px;
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
    border: 0;
    border-radius: 7px;
    color: var(--ink-950);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(242, 231, 204, 0.4),
      0 5px 18px -4px rgba(224, 194, 102, 0.5);
  }

  .look-card-ineligible {
    margin: 0;
    padding: 9px 0;
    color: rgba(232, 217, 181, 0.35);
    font-size: 0.65625rem;
    text-align: center;
  }

  .look-panel--deck .look-finish {
    margin-top: 22px;
  }

  .look-panel--deck .look-finish .btn-action {
    min-height: 42px;
    justify-content: center;
    padding: 11px 16px;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
  }

  .look-panel--deck .look-return-same-order .btn-action {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
    border: 0;
    color: var(--ink-950);
    box-shadow:
      inset 0 1px 0 rgba(242, 231, 204, 0.4),
      0 6px 22px -7px rgba(224, 194, 102, 0.55);
  }
}

.opening-deadline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.opening-deadline time {
  min-width: 3.25rem;
  color: var(--gold-strong, #8a5f08);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
}

.opening-deadline.is-expired time {
  color: var(--danger, #9d2f27);
}

/* The reference canvas is 900px tall, while a 1440-wide browser with its
   chrome visible commonly leaves about 780px of CSS height. Compact every
   field card together so the same composition keeps its rhythm without the
   legacy overlaps between characters and the DON!! strip. */
@media (min-width: 1101px) and (max-height: 820px) {
  .mat-half {
    --card-w-field: 72px;
    --card-h-field: 101px;
    --card-w-leader: 72px;
    --card-h-leader: 101px;
    --don-token-w: 29px;
    --don-token-h: 40px;
  }

  .mat-inner,
  .mat-half--flipped .mat-inner {
    grid-template-rows: 222px 52px;
    row-gap: 18px;
  }

  .zone-trash {
    transform: translateY(105px);
  }

  .zone-don-deck,
  .zone-cost,
  .zone-cost .zone-content {
    height: 52px;
  }
}

/* Wide desktops (1680×1050, 1920×1080 and up) give the spare width to the
   hand, not to the mat: wider field cards would not grow, and 816px already
   fits five rested characters (5 × 110px + 4 × 10px plus the side zones).
   533px holds four 111px hand cards, their gaps and paddings, plus a 15px
   gutter that stays reserved so drawing a ninth card never shrinks the hand.
   The 440px floor keeps part of a third row in view on ~820px-tall screens. */
@media (min-width: 1680px) {
  .tcg-table {
    max-width: calc(533px + 816px + 300px + 56px);
  }

  .table-body {
    grid-template-columns: minmax(0, 1fr) 816px 300px;
  }

  .hand-panel--you {
    max-height: max(50vh, 440px);
  }

  .hand-panel--you .hand-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    scrollbar-gutter: stable;
  }
}

/* With room for both (most maximized 1920×1080 windows and up), the field
   and leader cards grow from 78px to 88px and the mat only to the 886px that
   five rested characters need at that size (5 × 124px + 4 × 10px plus the
   side zones). Each half then needs ~371px of height, so 860px of viewport
   leaves both halves whole; life, deck, trash and DON!! keep their size. */
@media (min-width: 1800px) and (min-height: 860px) {
  .tcg-table {
    max-width: calc(533px + 886px + 300px + 56px);
  }

  .table-body {
    grid-template-columns: minmax(0, 1fr) 886px 300px;
  }

  .mat-half {
    --card-w-field: 88px;
    --card-h-field: 123px;
    --card-w-leader: 88px;
    --card-h-leader: 123px;
  }

  .mat-inner,
  .mat-half--flipped .mat-inner {
    grid-template-rows: 266px 59px;
  }

  .char-row--units .card-slot--field.rested {
    width: 124px;
    height: 124px;
  }

  .zone-trash {
    transform: translateY(119px);
  }
}

/* 1e · mobile instrument-box menu. */
@media (max-width: 1100px) {
  .mobile-menu-dialog {
    position: fixed;
    inset: auto 14px;
    top: var(--mobile-menu-viewport-top, 14px);
    width: auto;
    max-width: none;
    height: var(--mobile-menu-viewport-height, calc(100dvh - 28px));
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .mobile-menu-dialog::backdrop {
    /* The reference dims the board to 45% before applying its 72% scrim.
       This equivalent alpha keeps the live board equally quiet without
       changing the opacity inherited by the top-layer dialog. */
    background: rgba(21, 14, 8, 0.874);
    backdrop-filter: none;
  }

  .mobile-menu-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    gap: 0;
    padding: 18px 18px 16px;
    overflow: hidden;
    /* La ficha de latón es translúcida: sobre la tinta, como en el resto de
       la web, para que no se transparente el tablero detrás del diálogo. */
    background: var(--surface-brass), var(--ink-950);
    border: 1px solid rgba(196, 154, 58, 0.4);
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgba(242, 231, 204, 0.12),
      0 28px 60px -12px rgba(0, 0, 0, 0.85);
  }

  .mobile-menu-dialog--keyboard .mobile-menu-panel {
    padding: 10px 12px 8px;
  }

  .mobile-menu-dialog--keyboard .mobile-menu-header {
    margin-bottom: 8px;
  }

  .mobile-menu-dialog--keyboard .mobile-menu-actions,
  .mobile-menu-dialog--keyboard .mobile-menu-status {
    display: none;
  }

  .mobile-menu-dialog--keyboard .mobile-menu-section .game-log-heading {
    margin-bottom: 4px;
  }

  .mobile-menu-dialog--keyboard .mobile-menu-section .game-log-header {
    padding-bottom: 4px;
  }

  .mobile-menu-header {
    margin-bottom: 16px;
  }

  .mobile-menu-title {
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  .mobile-menu-close {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: normal;
  }

  .mobile-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .mobile-menu-actions form {
    display: contents;
  }

  .mobile-menu-actions .btn-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 11px;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.06);
  }

  .mobile-menu-actions .bug-report-icon {
    display: none;
  }

  .mobile-menu-status {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(36, 26, 16, 0.6);
    border: 1px solid var(--border-hairline);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.07);
  }

  .mobile-menu-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .mobile-menu-status-spacer {
    flex: 1;
  }

  .mobile-menu-status .toolbar-divider {
    width: 1px;
    height: 12px;
    flex: 0 0 auto;
    background: var(--border-hairline);
  }

  .mobile-menu-status .turn-pill,
  .mobile-menu-status .phase-pill,
  .mobile-menu-status .seed-pill,
  .mobile-menu-status .ai-model-pill {
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }

  .mobile-menu-status .ai-model-tooltip {
    position: fixed;
    top: auto;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }

  .mobile-menu-status .ai-model-tooltip::after {
    display: none;
  }

  .mobile-menu-status .turn-pill {
    color: var(--parchment-100);
    font-weight: 600;
  }

  .mobile-menu-status .seed-pill {
    font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
  }

  .mobile-menu-status .turn-order-pill {
    flex: 0 0 auto;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid rgba(196, 154, 58, 0.3);
    border-radius: 4px;
    color: var(--gold-300);
    font-size: 0.53125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .mobile-menu-section {
    flex: 1;
    min-height: 0;
  }

  .mobile-menu-section .game-log {
    min-height: 0;
    max-height: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.71875rem;
    line-height: 1.65;
  }

  .mobile-menu-section .game-chat-input {
    /* iOS zooms the page when a focused form control is smaller than 16px. */
    font-size: 16px;
  }

  .mobile-menu-section .game-log-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
  }

  .mobile-menu-section .game-log-title {
    margin: 0;
    color: var(--text-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .mobile-menu-section .game-log-title-rule {
    flex: 1;
    border-top: 1px solid rgba(196, 154, 58, 0.18);
  }

  .mobile-menu-section .game-log-header {
    display: block;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .mobile-menu-section .game-log-matchup {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    color: rgba(232, 217, 181, 0.55);
    font-size: 0.71875rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  .mobile-menu-section .game-log-matchup .log-player {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-menu-section .game-log-matchup .log-player--you {
    flex: 1 1 auto;
  }

  .mobile-menu-section .game-log-matchup .log-player--opponent,
  .mobile-menu-section .game-log-matchup-separator {
    flex: 0 1 auto;
  }

  .mobile-menu-section .game-log-matchup .log-player--you strong {
    color: var(--log-you-color);
  }

  .mobile-menu-section .game-log-matchup .log-player--opponent strong {
    color: var(--log-opponent-color);
  }

  .mobile-menu-section .game-log-scroll {
    padding: 0 4px 0 0;
    scrollbar-color: rgba(196, 154, 58, 0.42) transparent;
  }

  .mobile-menu-section .history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mobile-menu-section .history-list li {
    display: block;
    margin: 0;
    color: rgba(232, 217, 181, 0.62);
    line-height: 1.65;
  }

  .mobile-menu-section .history-list .history-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 11px 0 5px;
    color: var(--log-you-color);
    font-size: 0.59375rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-menu-section .history-list .history-group-heading:first-child {
    margin-top: 0;
  }

  .mobile-menu-section .history-list .history-group-heading--opponent {
    color: var(--log-opponent-color);
  }

  .mobile-menu-section .history-group-label {
    flex: 0 0 auto;
  }

  .mobile-menu-section .history-group-rule {
    flex: 1;
    border-top: 1px solid rgba(196, 154, 58, 0.14);
  }

  .mobile-menu-section .history-index {
    display: block;
    width: 18px;
    flex: 0 0 18px;
    padding-top: 1px;
    font-size: 0.625rem;
    line-height: 1.45;
    text-align: right;
  }
}

/* 1c / 1d · complete mobile board. This final block deliberately wins over
   the compact legacy layout above while preserving the existing controls and
   every real card / card-back / DON!! image. */
@media (max-width: 1100px) {
  body.page-play {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .main-play,
  .board-shell,
  #board {
    height: 100%;
    min-height: 0;
  }

  .tcg-table {
    width: 100%;
    height: 100dvh;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  .table-toolbar {
    min-height: 46px;
    flex: 0 0 46px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .mobile-only.mobile-menu-trigger,
  .mobile-only.mobile-card-zoom-toggle,
  .mobile-only.mobile-fullscreen-toggle {
    position: relative;
    width: 32px;
    min-width: 32px;
    height: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-hairline);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 0;
  }

  .mobile-only.mobile-menu-trigger::before {
    content: "";
    width: 12px;
    height: 9px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(232, 217, 181, 0.7) 0 1.5px,
      transparent 1.5px 3.75px
    );
  }

  .mobile-only.mobile-card-zoom-toggle::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    transform: translate(-1px, -1px);
  }

  .mobile-only.mobile-card-zoom-toggle::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 19px;
    width: 6px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    transform-origin: left center;
  }

  .mobile-only.mobile-card-zoom-toggle.is-active,
  .mobile-only.mobile-fullscreen-toggle.is-active {
    background: rgba(196, 154, 58, 0.14);
    border-color: rgba(224, 194, 102, 0.65);
    color: var(--gold-300);
    outline: 0;
  }

  .toolbar-compact,
  .toolbar-site-menu {
    display: none !important;
  }

  .table-toolbar > .toolbar-status.desktop-only {
    min-width: 0;
    min-height: 30px;
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 5px 10px;
    overflow: hidden;
    /* Placa de latón, como en escritorio. */
    background: linear-gradient(180deg, #3b2b18, #241a0f);
    border: 1px solid rgba(201, 162, 74, 0.6);
    border-radius: 8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 236, 190, 0.16),
      0 5px 12px -5px rgba(0, 0, 0, 0.7);
  }

  .table-toolbar .toolbar-status .turn-pill,
  .table-toolbar .toolbar-status .phase-pill {
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    color: var(--parchment-100);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .table-toolbar .toolbar-status .phase-pill {
    color: var(--text-secondary);
    font-weight: 400;
  }

  /* La fase casi siempre es Main y solo restaba sitio: la placa deja el
     turno y de quién es. El menú la sigue mostrando. */
  .table-toolbar .toolbar-status .phase-pill,
  .table-toolbar .toolbar-status .turn-pill + .toolbar-divider {
    display: none;
  }

  .table-toolbar .toolbar-status .toolbar-divider {
    width: 1px;
    height: 12px;
    flex: 0 0 1px;
    background: var(--border-hairline);
  }

  .table-toolbar .toolbar-status .badge {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--gold-300);
    font-size: 0.53125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
  }

  .table-toolbar .toolbar-status .badge.human::before,
  .table-toolbar .toolbar-status .badge.bot::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 7px currentColor;
  }

  .table-toolbar .toolbar-status .badge.bot {
    color: color-mix(in srgb, var(--map-blue) 45%, var(--parchment-300) 55%);
  }

  .table-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 10px 0;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }

  /* Selecting a counter adds its title and full action label below the battle
     summary. That can overflow even a 665px or 844px viewport, so scrolling
     cannot depend on the extra-short layout's 600px breakpoint. Replays also
     carry page-play and keep their existing viewport policy below. */
  body.page-play:not(.page-replay) .table-body {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .table-body::-webkit-scrollbar {
    display: none;
  }

  .side-left,
  .side-right {
    display: contents;
  }

  .side-left > .game-log,
  .hand-panel--opp,
  #card-preview {
    display: none;
  }

  .mat-column {
    order: 2;
    flex: 0 0 auto;
    min-height: 0;
    gap: 0;
  }

  .mat-column::after {
    display: none;
  }

  .mat-column::before {
    display: none;
  }

  .mat-mobile-divider.mobile-only {
    position: relative;
    top: auto;
    width: 100%;
    height: 10px;
    flex: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: rgba(196, 154, 58, 0.45);
    font-size: 0.625rem;
    line-height: 1;
  }

  .mat-mobile-divider::before,
  .mat-mobile-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid rgba(196, 154, 58, 0.22);
  }

  .mat-mobile-divider > span {
    display: block;
    flex: 0 0 auto;
  }

  .mat-half {
    --card-w-field: 44px;
    --card-h-field: 61px;
    --card-w-mini: 30px;
    --card-h-mini: 42px;
    --card-w-life: 30px;
    --card-h-life: 42px;
    --don-token-w: 32px;
    --don-token-h: 43px;
    --card-w-leader: 48px;
    --card-h-leader: 67px;
    min-height: 0;
    flex: 0 0 auto;
    padding: 8px;
    overflow: hidden;
    background-color: var(--parchment-300);
    background-image:
      linear-gradient(180deg, rgba(196, 154, 58, 0.13), rgba(196, 154, 58, 0.05)),
      repeating-linear-gradient(0deg, rgba(90, 58, 34, 0.08) 0, rgba(90, 58, 34, 0.08) 1px, transparent 1px, transparent 36px),
      repeating-linear-gradient(90deg, rgba(90, 58, 34, 0.08) 0, rgba(90, 58, 34, 0.08) 1px, transparent 1px, transparent 36px),
      linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
    border: 1px solid rgba(90, 58, 34, 0.55);
    border-radius: 10px;
    box-shadow:
      0 12px 28px -12px rgba(10, 6, 2, 0.7),
      inset 0 0 20px rgba(90, 58, 34, 0.12);
  }

  .mat-half--flipped {
    position: relative;
    display: flex;
    flex-direction: column;
    transform: none;
    border-color: rgba(62, 95, 112, 0.55);
    background-image:
      linear-gradient(180deg, rgba(62, 95, 112, 0.1), rgba(62, 95, 112, 0.04)),
      repeating-linear-gradient(0deg, rgba(62, 95, 112, 0.07) 0, rgba(62, 95, 112, 0.07) 1px, transparent 1px, transparent 36px),
      repeating-linear-gradient(90deg, rgba(62, 95, 112, 0.07) 0, rgba(62, 95, 112, 0.07) 1px, transparent 1px, transparent 36px),
      linear-gradient(158deg, var(--parchment-100) 0%, var(--parchment-300) 100%);
  }

  .mat-mobile-rival-hand.mobile-only {
    position: static;
    z-index: 6;
    width: 100%;
    min-height: 28px;
    flex: 0 0 28px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    padding: 0 4px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(62, 95, 112, 0.18);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .mat-mobile-rival-hand:focus-visible {
    outline: 1px solid rgba(62, 95, 112, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .mat-mobile-rival-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mat-mobile-hand-label .player-seat-identity {
    max-width: 7.6rem;
    gap: 0.2rem;
  }

  .mat-mobile-hand-label .player-seat-avatar {
    width: 1rem;
    height: 1rem;
    flex-basis: 1rem;
  }

  .mat-mobile-hand-label .player-seat-avatar .account-menu-silhouette {
    width: 0.75rem;
    height: 0.75rem;
  }

  .mat-mobile-rival-cards {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    justify-self: center;
    overflow: hidden;
  }

  .mat-mobile-rival-card {
    width: 15px;
    height: 21px;
    display: block;
    object-fit: fill;
    border-radius: 2.5px;
    box-shadow: inset 0 0 0 1px rgba(62, 95, 112, 0.55);
  }

  .mat-mobile-rival-card + .mat-mobile-rival-card {
    margin-left: 0;
  }

  .mat-mobile-own-hand.mobile-only {
    position: static;
    z-index: 6;
    width: 100%;
    min-height: 28px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 4px 4px 0;
    border-top: 1px solid rgba(90, 58, 34, 0.18);
  }

  .mat-mobile-hand-label {
    /* Darker player tones keep names legible on the light playmat. */
    color: color-mix(in srgb, var(--player-you-color) 42%, var(--ink-950) 58%);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mat-mobile-hand-label.mat-mobile-rival-label {
    color: color-mix(in srgb, var(--player-opponent-color) 42%, var(--ink-950) 58%);
  }

  .mat-mobile-hand-spacer {
    min-width: 0;
  }

  .mat-inner,
  .mat-half--flipped .mat-inner {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 38px;
    grid-template-rows: 66px 66px 57px;
    grid-template-areas: none;
    gap: 8px;
    align-items: start;
    align-content: stretch;
    padding: 0;
    transform: none;
  }

  .zone {
    min-width: 0;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .zone-label,
  .slot-label {
    display: block;
    padding: 0;
    color: #4a3826;
    font-size: 0.46875rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-shadow: none;
  }

  .mat-half--flipped .zone-label,
  .mat-half--flipped .slot-label {
    color: #4a3826;
  }

  .zone-life {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 140px;
    align-items: center;
    gap: 4px;
  }

  .mat-half--flipped .zone-life {
    padding-top: 0;
  }

  .zone-life .zone-content {
    width: 100%;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow: visible;
  }

  .life-stack-pile {
    --life-step: 12px;
    width: 30px;
    margin-top: 24px;
    max-height: none;
    overflow: visible;
  }

  .life-stack-pile > .stack-count--life {
    top: -24px;
    right: 50%;
    bottom: auto;
    width: 20px;
    height: 20px;
    padding: 0;
    background: radial-gradient(circle at 38% 32%, var(--lacquer), color-mix(in srgb, var(--lacquer) 60%, var(--ink-950) 40%));
    border-radius: 50%;
    color: var(--parchment-100);
    font-size: 0.625rem;
    line-height: 20px;
    text-align: center;
    transform: translateX(50%);
    box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.25);
  }

  .zone-life .zone-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(166, 58, 46, 0.32);
    border-radius: 50%;
    color: var(--parchment-100);
  }

  .zone-characters {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 140px;
    overflow: visible;
  }

  .zone-characters .zone-content {
    height: 100%;
    padding: 0;
    overflow: visible;
  }

  .char-area,
  .mat-half--flipped .char-area {
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mat-half--flipped .char-row--leader {
    order: -1;
  }

  .char-row--units,
  .char-row--leader {
    width: 100%;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    overflow: visible;
  }

  /* A rested character reserves its rotated width so the power badge on its
     right edge stays clear of the next card. Only when the row runs out of
     room does it give width back, down to the old compact 50px. Empty slots
     always fill the row to five, so a child count cannot tell a crowded row. */
  .char-row--units .card-slot--field.rested {
    width: var(--card-h-field);
    min-width: 50px;
    height: 60px;
    flex-shrink: 1;
  }

  .char-row--units .card-slot--field.rested .card-inner {
    width: var(--card-w-field);
    height: var(--card-h-field);
  }

  /* When a crowded row does overlap, each card stays above the next one: the
     overlap then hides a few pixels of the next card's left edge (its upright
     bottom) instead of the power and cost badges on the right edge. :where()
     lets selection, battle and pick states keep their own z-index. */
  .char-row--units > :nth-child(1) { --row-stack: 5; }
  .char-row--units > :nth-child(2) { --row-stack: 4; }
  .char-row--units > :nth-child(3) { --row-stack: 3; }
  .char-row--units > :nth-child(4) { --row-stack: 2; }
  .char-row--units > :nth-child(5) { --row-stack: 1; }

  :where(.char-row--units > .card-slot--field) {
    z-index: var(--row-stack);
  }

  .card-slot--leader {
    width: var(--card-w-leader);
    height: var(--card-h-leader);
    border-radius: 5px;
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(224, 194, 102, 0.55);
  }

  .mat-half--flipped .card-slot--leader {
    box-shadow: inset 0 0 0 1px rgba(62, 95, 112, 0.65);
  }

  .leader-line-slot--stage {
    position: relative;
    width: var(--card-w-field);
    height: var(--card-h-field);
    align-self: center;
  }

  .leader-line-slot--stage .card-slot {
    width: var(--card-w-field);
    height: var(--card-h-field);
  }

  .leader-line-slot--stage .slot-label {
    position: absolute;
    left: 50%;
    bottom: 3px;
    z-index: 3;
    color: rgba(90, 58, 34, 0.5);
    font-size: 0.34375rem;
    letter-spacing: 0.12em;
    transform: translateX(-50%);
  }

  .card-slot--empty,
  .zone-trash .zone-empty {
    background: #d9c69a;
    border: 0;
    border-radius: 6px;
    box-shadow:
      inset 0 2px 6px rgba(90, 58, 34, 0.42),
      inset 0 -1px 0 rgba(242, 231, 204, 0.7);
  }

  .zone-deck,
  .zone-trash {
    grid-column: 3;
    height: auto;
    align-items: center;
    gap: 3px;
    overflow: visible;
  }

  .zone-deck {
    grid-row: 1;
    align-self: start;
  }

  .zone-trash {
    grid-row: 2;
    align-self: start;
  }

  .zone-deck .zone-content,
  .zone-trash .zone-content {
    width: 30px;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0;
    overflow: visible;
  }

  .zone-deck .card-slot--life,
  .zone-trash .card-slot--mini,
  .zone-trash-trigger {
    overflow: visible;
  }

  .zone-trash .zone-empty {
    position: relative;
    width: 30px;
    height: 42px;
    display: block;
    color: transparent;
  }

  .zone-trash .zone-empty::after {
    content: "0";
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    color: rgba(74, 56, 38, 0.8);
    font-size: 0.5625rem;
    line-height: 1;
    transform: translateX(-50%);
  }

  .zone-deck .stack-count,
  .zone-trash .zone-count {
    top: calc(100% + 3px);
    right: 50%;
    bottom: auto;
    padding: 0;
    background: transparent;
    color: rgba(74, 56, 38, 0.8);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 1;
    transform: translateX(50%);
  }

  .zone-don-deck {
    grid-column: 1;
    grid-row: 3;
    width: auto;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 1px;
    background: rgba(90, 58, 34, 0.15);
    border-radius: 6px;
    box-shadow: inset 0 2px 5px rgba(90, 58, 34, 0.36);
    overflow: visible;
  }

  .zone-don-deck > .zone-label {
    display: none;
  }

  .zone-don-deck .zone-content {
    width: var(--don-token-w);
    height: var(--don-token-h);
    min-height: 0;
    flex: 0 0 var(--don-token-w);
    padding: 0;
    overflow: visible;
  }

  .zone-don-deck .card-slot--mini,
  .zone-don-deck .card-image {
    width: var(--don-token-w);
    height: var(--don-token-h);
  }

  .zone-don-deck .stack-count {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    min-width: 1.25rem;
    min-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.28rem;
    background: rgba(10, 8, 6, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    font-size: 0.6875rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.48);
  }

  .zone-cost {
    grid-column: 2 / -1;
    grid-row: 3;
    height: 57px;
    min-height: 57px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    padding: 4px 8px;
    background: rgba(90, 58, 34, 0.15);
    border-radius: 6px;
    box-shadow: inset 0 2px 5px rgba(90, 58, 34, 0.36);
  }

  .zone-cost > .zone-label {
    display: none;
  }

  .zone-cost::before {
    content: none;
    display: none;
  }

  .zone-cost .zone-content {
    height: 49px;
    min-height: 49px;
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 3px 1px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .zone-cost .zone-content::-webkit-scrollbar {
    display: none;
  }

  .zone-cost[data-action-target="don"] {
    cursor: pointer;
  }

  .zone-cost::after {
    content: attr(data-don-summary);
    flex: 0 0 auto;
    padding: 0;
    color: rgba(74, 56, 38, 0.7);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .cost-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    padding: 3px 1px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cost-row .don-token {
    width: var(--don-token-w);
    min-width: var(--don-token-w);
    height: var(--don-token-h);
    flex: 0 0 var(--don-token-w);
    object-fit: contain;
    padding: 3px;
    border-radius: 2.5px;
    outline-offset: 1px;
  }

  .zone-cost .don-token--rested {
    margin-inline: 5px;
  }

  /* A partir de nueve DON!!, cada carta conserva su tamaño y su área táctil.
     La rejilla acerca progresivamente sus puntos de inicio y reserva el ancho
     completo del último token, de modo que los diez siempre quedan dentro de
     la banda sin depender de scroll. El padding absorbe el vuelo lateral de
     los DON!! girados, que visualmente son más anchos al rotar. */
  body.page-play .zone-cost .cost-row:has(> :nth-child(9)) {
    display: grid;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding-inline: 7px;
  }

  body.page-play .zone-cost .cost-row:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
    grid-template-columns: repeat(8, minmax(0, 1fr)) var(--don-token-w);
  }

  body.page-play .zone-cost .cost-row:has(> :nth-child(10)) {
    grid-template-columns: repeat(9, minmax(0, 1fr)) var(--don-token-w);
  }

  body.page-play .zone-cost .cost-row:has(> :nth-child(9)) .don-token,
  body.page-play .zone-cost .cost-row:has(> :nth-child(9)) .don-token--rested {
    justify-self: start;
    margin-inline: 0;
  }

  .hand-panel--you {
    order: 3;
    min-height: 114px;
    max-height: none;
    flex: 0 0 auto;
    justify-content: flex-start;
    margin: 6px 0 0;
    padding: 0;
    /* Visible: la fila de la mano sube 16 px (ver abajo) para que la carta
       seleccionada, que se eleva, no quede recortada. */
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .hand-panel--you .hand-label {
    display: none;
  }

  .hand-panel--you .hand-row {
    --card-w-hand: 76px;
    --card-h-hand: 106px;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    /* 16 px de reserva arriba, compensados con el margen: las cartas no se
       mueven y la seleccionada tiene sitio para elevarse. */
    margin-top: -16px;
    padding: 20px 10px 4px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .hand-panel--you .hand-row .card-slot--hand,
  .hand-panel--you .hand-row .card-slot--hand:last-child {
    width: auto;
    min-width: 0;
    height: var(--card-h-hand);
    flex: 0 1 calc(var(--card-w-hand) + 0.3rem);
    aspect-ratio: 63 / 88;
    border-radius: 7px;
    overflow: visible;
  }

  .hand-panel--you .hand-row .card-slot--hand:last-child {
    min-width: var(--card-w-hand);
    flex-shrink: 0;
  }

  .hand-panel--you .hand-row .card-slot--hand .card-inner {
    width: var(--card-w-hand);
    height: var(--card-h-hand);
  }

  .hand-panel--you .hand-row .card-slot--hand:focus-within,
  .hand-panel--you .hand-row .card-slot--hand:hover,
  .hand-panel--you .hand-row .card-slot--hand.is-selected {
    z-index: 8;
  }

  .hand-panel--you .hand-row .card-slot--hand.card-action-target.is-selected {
    transform: translateY(-12px) scale(1.05);
  }

  /* Abanico (hand_fan.js), como en el reparto inicial: cada slot ocupa la carta
     entera y se solapa con el siguiente, así los aros y las marcas giran con
     ella. El script fija el paso (--fan-step) y, por carta, el desplazamiento,
     la altura del arco, el giro y la escala. El orden del DOM decide qué carta
     queda encima; solo la elevada (catalejo o elegida) pasa por delante. */
  .hand-panel--you .hand-row.is-fanned {
    justify-content: center;
    overflow: visible;
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand,
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand:last-child {
    width: var(--card-w-hand);
    min-width: var(--card-w-hand);
    flex: 0 0 var(--card-w-hand);
    margin-right: calc(var(--fan-step, 0px) - var(--card-w-hand));
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand:last-child {
    margin-right: 0;
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand,
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand:hover,
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand:focus-within,
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand.card-action-target.is-selected {
    z-index: auto;
    transform:
      translate(var(--fan-x, 0px), var(--fan-y, 0px))
      rotate(var(--fan-rot, 0deg))
      scale(var(--fan-scale, 1));
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand {
    transition: transform 170ms ease-out;
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand.is-fan-lifted,
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand.card-action-target.is-selected.is-fan-lifted {
    z-index: 30;
  }

  /* El toque que eleva la carta la aparta del dedo: una franja invisible bajo
     ella hace que el segundo toque del doble toque, donde estaba, siga cayendo
     en la carta. Va dentro de .card-preview-source, que es lo que reconoce el
     doble toque, y por eso esa carta deja de recortar; la imagen ya trae sus
     esquinas redondeadas. */
  .hand-panel--you .hand-row.is-fanned > .card-slot--hand.is-fan-lifted > .card-inner {
    overflow: visible;
  }

  .hand-panel--you .hand-row.is-fanned > .card-slot--hand.is-fan-lifted > .card-inner::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: var(--fan-reach, 0px);
  }

  .hand-panel--you .hand-row.is-fanned.is-fan-settling > .card-slot--hand {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .hand-panel--you .hand-row.is-fanned > .card-slot--hand {
      transition: none;
    }
  }

  .action-dock {
    order: 4;
    position: static;
    bottom: auto;
    z-index: auto;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    margin: auto 0 0;
    min-height: 0;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    scroll-padding-bottom: 0;
    background:
      linear-gradient(180deg, rgba(196, 154, 58, 0.12), rgba(196, 154, 58, 0.02)),
      var(--surface-brass);
    border: 1px solid rgba(224, 194, 102, 0.5);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.14);
  }

  .action-dock::before {
    content: none;
    display: none;
  }

  .action-dock > * {
    flex: 0 0 auto;
  }

  .action-dock .dock-title {
    display: none;
  }

  .action-dock .dock-title::after {
    display: none;
  }

  .action-dock .wizard-panel > .wizard-panel-title {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .action-dock .end-phase-groups {
    gap: 10px;
    overflow: visible;
  }

  .action-dock .end-phase-source-prompt {
    margin: 0 0 10px;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
  }

  .action-dock .end-phase-source-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .action-dock .end-phase-source-choices:has(> .end-phase-source-choice:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-dock .end-phase-group {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .action-dock .end-phase-group-title {
    margin: 0 0 10px;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .action-dock .end-phase-group-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .action-dock .end-phase-group-actions:has(> form:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-dock .end-phase-group-actions form {
    display: contents;
  }

  .action-dock .end-phase-source-back {
    margin-top: 8px;
    color: var(--parchment-100);
  }

  .tcg-table.has-action-selection .action-dock .dock-title {
    display: none;
  }

  .action-dock--end-turn-only {
    background: var(--surface-panel);
    border-color: rgba(196, 154, 58, 0.3);
    box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.08);
  }

  .action-dock--end-turn-only .dock-title {
    display: none;
  }

  .action-dock-default,
  .action-list,
  .context-panel-actions,
  .replacement-actions,
  .wizard-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    max-height: none;
  }

  .action-dock .deck-top-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-dock .deck-top-action > .dock-muted {
    grid-column: 1 / -1;
    margin: 0 0 10px;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .action-dock-default:has(> form:only-child),
  .action-list:has(> form:only-child),
  .context-panel-actions:has(> form:only-child),
  .replacement-actions:has(> form:only-child),
  .wizard-options:has(> form:only-child),
  .context-panel-actions:has(> .btn-action:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-dock-default form,
  .action-list form,
  .context-panel-actions form,
  .replacement-actions form,
  .wizard-options form {
    display: contents;
  }

  .wizard-options--chips,
  .action-list--chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7px;
  }

  .action-dock .wizard-options--chips .btn-action,
  .action-dock .action-list--chips .btn-action {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .action-dock--end-turn-only .action-dock-default {
    grid-template-columns: 1fr;
  }

  .action-dock .btn-action,
  .action-dock .btn-action.btn-danger {
    width: 100%;
    min-height: 42px;
    padding: 12px 8px;
    background: var(--btn-gold-background);
    border: 0;
    border-radius: var(--btn-gold-radius);
    color: var(--btn-gold-color);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: var(--btn-gold-shadow);
  }

  .action-dock--end-turn-only .btn-action,
  .action-dock--end-turn-only .btn-action.btn-danger {
    min-height: 43px;
    padding: 13px;
    font-size: 0.8125rem;
  }

  .context-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    margin: 0;
  }

  .context-panel-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--parchment-100);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .context-panel-meta {
    margin: 0;
    color: rgba(232, 217, 181, 0.6);
    font-size: 0.625rem;
    line-height: 1.35;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .context-panel-meta-full {
    display: none;
  }

  .context-panel-meta-compact {
    display: inline;
  }

  .context-panel-actions {
    grid-column: 1 / -1;
  }

  .context-panel-actions .btn-action {
    height: auto;
    min-height: 42px;
    overflow: visible;
  }

  .context-panel-actions .action-label {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

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

  .action-dock .dock-muted,
  .action-dock .wizard-target-hint,
  .action-dock .confirm-panel p:not(.opening-choice-title) {
    margin: 0 0 10px;
    color: rgba(232, 217, 181, 0.6);
    font-size: 0.71875rem;
    line-height: 1.4;
  }

  .action-dock .counter-step-summary {
    margin: 0 0 10px;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .action-dock .counter-step-line {
    color: var(--text-secondary);
    font-size: 0.71875rem;
    line-height: 1.4;
  }

  .action-dock .counter-step-bonus {
    color: var(--gold-300);
  }

  .mobile-menu-section .history-list li:not(.history-group-heading):not(.history-load-older) {
    display: flex;
    gap: 6px;
    line-height: 1.45;
  }
}

/* Short mobile viewports (notably Safari with both browser bars visible) need
   a denser board. Actions remain in normal flow; only the board's visual scale
   changes so the hand is never covered by a floating layer. */
@media (max-width: 1100px) and (max-height: 800px) {
  body.page-play .table-toolbar {
    min-height: 42px;
    flex-basis: 42px;
    padding: 6px 8px;
  }

  body.page-play .table-body {
    padding: 2px 8px 0;
  }

  body.page-play .mat-mobile-divider.mobile-only {
    height: 8px;
    flex-basis: 8px;
    padding: 0 10px;
  }

  body.page-play .mat-half {
    --card-w-field: 44px;
    --card-h-field: 61px;
    --card-w-mini: 28px;
    --card-h-mini: 39px;
    --card-w-life: 28px;
    --card-h-life: 39px;
    --don-token-w: 31px;
    --don-token-h: 41px;
    --card-w-leader: 44px;
    --card-h-leader: 61px;
    padding: 5px;
  }

  body.page-play .mat-inner,
  body.page-play .mat-half--flipped .mat-inner {
    grid-template-rows: 62px 62px 49px;
    gap: 4px;
  }

  body.page-play .zone-life,
  body.page-play .zone-characters,
  body.page-play .char-area,
  body.page-play .mat-half--flipped .char-area {
    height: 128px;
  }

  body.page-play .mat-half--flipped .zone-life {
    padding-top: 0;
  }

  body.page-play .char-area,
  body.page-play .mat-half--flipped .char-area,
  body.page-play .char-row--units,
  body.page-play .char-row--leader {
    gap: 4px;
  }

  body.page-play .card-slot--leader {
    width: 44px;
    height: 61px;
  }

  body.page-play .life-stack-pile {
    width: 28px;
    margin-top: 21px;
  }

  body.page-play .zone-deck .zone-content,
  body.page-play .zone-trash .zone-content {
    width: 28px;
    min-height: 39px;
  }

  body.page-play .zone-trash .zone-empty {
    width: 28px;
    height: 39px;
  }

  body.page-play .zone-cost {
    height: 49px;
    min-height: 49px;
    padding: 2px 6px;
  }

  body.page-play .zone-cost .zone-content {
    height: 45px;
    min-height: 45px;
    padding: 2px 1px;
  }

  body.page-play .cost-row {
    padding: 2px 1px;
  }

  body.page-play .hand-panel--you {
    min-height: 96px;
    margin-top: 5px;
  }

  body.page-play .hand-panel--you .hand-row {
    --card-w-hand: 66px;
    --card-h-hand: 92px;
    gap: 0;
    padding: 18px 8px 2px;
  }

  body.page-play .mat-mobile-rival-hand.mobile-only {
    min-height: 26px;
    flex-basis: 26px;
    margin-bottom: 3px;
    padding-bottom: 3px;
  }
}

@media (max-width: 1100px) and (max-height: 700px) {
  /* Only 15px remain between DON!! and the opposing field in this layout. */
  .ai-wait-notice,
  .presentation-battle-chip {
    padding: 0 0.625rem;
    font-size: 0.6875rem;
    line-height: 13px;
    transform: translate(-50%, calc(-50% - 1px));
  }

  body.page-play .table-toolbar {
    min-height: 40px;
    flex-basis: 40px;
    padding: 5px 6px;
  }

  body.page-play .table-body {
    padding: 2px 6px 0;
  }

  body.page-play .mat-mobile-divider.mobile-only {
    height: 6px;
    flex-basis: 6px;
    padding: 0 8px;
  }

  body.page-play .mat-half {
    --card-w-mini: 26px;
    --card-h-mini: 36px;
    --card-w-life: 26px;
    --card-h-life: 36px;
    --don-token-w: 30px;
    --don-token-h: 40px;
    padding: 3px;
  }

  body.page-play .mat-inner,
  body.page-play .mat-half--flipped .mat-inner {
    grid-template-rows: 61px 61px 44px;
    gap: 3px;
  }

  body.page-play .zone-life,
  body.page-play .zone-characters,
  body.page-play .char-area,
  body.page-play .mat-half--flipped .char-area {
    height: 125px;
  }

  body.page-play .life-stack-pile {
    --life-step: 10px;
    width: 26px;
    margin-top: 20px;
  }

  body.page-play .zone-deck .zone-content,
  body.page-play .zone-trash .zone-content {
    width: 26px;
    min-height: 36px;
  }

  body.page-play .zone-trash .zone-empty {
    width: 26px;
    height: 36px;
  }

  body.page-play .zone-cost {
    height: 44px;
    min-height: 44px;
    gap: 4px;
    padding: 1px 5px;
  }

  body.page-play .zone-cost .zone-content {
    height: 42px;
    min-height: 42px;
    padding: 1px;
  }

  body.page-play .cost-row {
    padding: 1px;
  }

  body.page-play .hand-panel--you {
    min-height: 84px;
    margin-top: 4px;
  }

  body.page-play .hand-panel--you .hand-row {
    --card-w-hand: 58px;
    --card-h-hand: 80px;
    gap: 0;
    padding: 18px 6px 2px;
  }

  body.page-play .mat-mobile-rival-hand.mobile-only {
    min-height: 24px;
    flex-basis: 24px;
    margin-bottom: 2px;
    padding-bottom: 2px;
  }

  body.page-play .action-dock {
    padding: 6px 6px max(8px, env(safe-area-inset-bottom, 0px));
  }

  body.page-play .action-dock .wizard-panel > .wizard-panel-title,
  body.page-play .action-dock .deck-top-action > .dock-muted,
  body.page-play .action-dock .end-phase-source-prompt,
  body.page-play .action-dock .end-phase-group-title,
  body.page-play .context-panel-title {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    line-height: 1.15;
  }

  body.page-play .action-dock-default,
  body.page-play .action-list,
  body.page-play .context-panel-actions,
  body.page-play .replacement-actions,
  body.page-play .wizard-options,
  body.page-play .action-dock .end-phase-group-actions {
    gap: 5px;
  }

  body.page-play .action-dock .btn-action,
  body.page-play .action-dock .btn-action.btn-danger,
  body.page-play .context-panel-actions .btn-action,
  body.page-play .action-dock--end-turn-only .btn-action,
  body.page-play .action-dock--end-turn-only .btn-action.btn-danger {
    min-height: 38px;
    padding: 9px 6px;
    font-size: 0.6875rem;
  }

  body.page-play .action-dock .dock-muted,
  body.page-play .action-dock .wizard-target-hint,
  body.page-play .action-dock .confirm-panel p:not(.opening-choice-title),
  body.page-play .action-dock .counter-step-summary {
    margin-bottom: 6px;
  }

  body.page-play .action-dock .dock-muted,
  body.page-play .action-dock .wizard-target-hint,
  body.page-play .action-dock .confirm-panel p:not(.opening-choice-title),
  body.page-play .action-dock .counter-step-line {
    font-size: 0.6875rem;
    line-height: 1.25;
  }
}

/* En la elección 0–9 conservamos objetivos táctiles de 44px, pero recuperamos
   el espacio justo del separador y del resumen para que las dos filas entren
   completas en un viewport móvil de 844px sin scroll. */
@media (max-width: 1100px) {
  body.page-play .action-list.action-list--numbers {
    gap: 4px;
  }

  /* Dos opciones comparten siempre la fila al 50%, también cuando son
     cantidades compactas o valores de la cuadrícula numérica. */
  .action-dock :is(.action-list, .wizard-options):has(> form:first-child + form:last-child) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-dock :is(.action-list, .wizard-options):has(> form:first-child + form:last-child) .btn-action {
    width: 100%;
    min-width: 0;
  }

  body.page-play .action-dock:has(.action-list--numbers) .counter-step-summary {
    margin-bottom: 2px;
  }
}

/* Extra-short mobile viewports, such as an iPhone with both Safari bars
   visible, have barely 530px of usable height. Keep the action dock in normal
   flow, but compact the play area enough for the primary controls to remain
   visible. Taller wizard docks can still be reached by scrolling the table. */
@media (max-width: 1100px) and (max-height: 600px) {
  .ai-wait-notice,
  .presentation-battle-chip {
    border: 0;
    line-height: 12px;
    transform: translate(-50%, calc(-50% - 0.5px));
  }

  body.page-play .table-toolbar {
    min-height: 36px;
    flex-basis: 36px;
    gap: 5px;
    padding: 3px 5px;
  }

  body.page-play .mobile-only.mobile-menu-trigger,
  body.page-play .mobile-only.mobile-card-zoom-toggle,
  body.page-play .mobile-only.mobile-fullscreen-toggle {
    width: 30px;
    min-width: 30px;
    height: 28px;
    min-height: 28px;
  }

  body.page-play .table-toolbar > .toolbar-status.desktop-only {
    min-height: 28px;
    gap: 7px;
    padding: 4px 7px;
  }

  body.page-play .table-body {
    padding: 2px 4px 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  body.page-play .mat-mobile-divider.mobile-only {
    height: 4px;
    flex-basis: 4px;
    padding: 0 6px;
  }

  body.page-play .mat-half {
    --card-w-field: 36px;
    --card-h-field: 50px;
    --card-w-mini: 22px;
    --card-h-mini: 31px;
    --card-w-life: 22px;
    --card-h-life: 31px;
    --don-token-w: 24px;
    --don-token-h: 33px;
    --card-w-leader: 38px;
    --card-h-leader: 53px;
    padding: 2px;
    border-radius: 8px;
  }

  body.page-play .mat-inner,
  body.page-play .mat-half--flipped .mat-inner {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    grid-template-rows: 52px 52px 36px;
    gap: 2px;
  }

  body.page-play .zone-life,
  body.page-play .zone-characters,
  body.page-play .char-area,
  body.page-play .mat-half--flipped .char-area {
    height: 106px;
  }

  body.page-play .char-area,
  body.page-play .mat-half--flipped .char-area,
  body.page-play .char-row--units,
  body.page-play .char-row--leader {
    gap: 2px;
  }

  body.page-play .char-row--units .card-slot--field.rested,
  body.page-play .char-row--units:has(> :nth-child(5)) .card-slot--field.rested {
    width: 50px;
    height: 50px;
  }

  body.page-play .card-slot--leader {
    width: 38px;
    height: 53px;
  }

  body.page-play .life-stack-pile {
    --life-step: 8px;
    width: 22px;
    margin-top: 18px;
  }

  body.page-play .life-stack-pile > .stack-count--life {
    top: -18px;
    width: 18px;
    height: 18px;
    font-size: 0.5625rem;
    line-height: 18px;
  }

  body.page-play .zone-deck .zone-content,
  body.page-play .zone-trash .zone-content {
    width: 22px;
    min-height: 31px;
  }

  body.page-play .zone-trash .zone-empty {
    width: 22px;
    height: 31px;
  }

  body.page-play .zone-cost {
    height: 36px;
    min-height: 36px;
    gap: 3px;
    padding: 1px 4px;
  }

  body.page-play .zone-cost .zone-content {
    height: 34px;
    min-height: 34px;
    padding: 0 1px;
  }

  body.page-play .cost-row {
    padding: 0 1px;
  }

  body.page-play .mat-mobile-rival-hand.mobile-only {
    min-height: 20px;
    flex-basis: 20px;
    margin-bottom: 1px;
    padding-bottom: 1px;
  }

  body.page-play .mat-mobile-rival-card {
    width: 12px;
    height: 17px;
  }

  body.page-play .hand-panel--you {
    min-height: 70px;
    margin-top: 2px;
  }

  body.page-play .hand-panel--you .hand-row {
    --card-w-hand: 48px;
    --card-h-hand: 66px;
    padding: 17px 4px 1px;
  }
}

@media (max-width: 1100px) {
  .tcg-table--replay .action-dock {
    overflow: visible;
  }

  .tcg-table--replay .replay-dock {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
  }

  .tcg-table--replay .replay-progress,
  .tcg-table--replay .replay-current-action {
    color: var(--parchment-100);
    text-align: left;
  }

  /* Keep the two lines the base rule reserves. Here the dock sits at the bottom
     of the screen, so a label that wraps would lift the seek between steps. */
  .tcg-table--replay .replay-current-action {
    margin-block: 0;
  }

  .tcg-table--replay .replay-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 560px) {
  body.page-replay .action-dock {
    padding-top: 0;
  }

  .tcg-table--replay .replay-dock {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    text-align: center;
  }

  .tcg-table--replay .replay-progress,
  .tcg-table--replay .replay-current-action {
    text-align: center;
  }

  .tcg-table--replay .replay-controls {
    grid-column: 1;
    grid-row: auto;
  }

  .tcg-table--replay .replay-current-action {
    margin-block: calc(-1 * var(--replay-action-offset)) var(--replay-action-offset);
  }
}

/* Seven 44px buttons do not fit one row at these widths. A second row for the
   view pair would cost 49px that the board cannot spare above 600px of height,
   so the pair takes the end of the seek row instead. Its buttons fill that row,
   so the text no longer borrows the range's lower touch padding. */
@media (max-width: 380px) {
  body.page-replay .action-dock {
    padding-block: 4px max(4px, env(safe-area-inset-bottom, 0px));
  }

  .tcg-table--replay .replay-dock {
    position: relative;
  }

  .tcg-table--replay .replay-progress {
    margin-inline-end: calc(2 * 44px + 0.3rem + 0.65rem);
  }

  .tcg-table--replay .replay-view-controls {
    position: absolute;
    top: 0;
    right: 0;
  }

  .tcg-table--replay .replay-current-action {
    margin-block: 2px;
  }
}

/* The replay has a seek bar plus transport controls. At these heights it needs
   the same card geometry used by the shorter mobile layout above, while its
   touch controls retain their 44/48px targets. */
@media (max-width: 1100px) and (min-height: 601px) and (max-height: 700px) {
  body.page-replay .mat-half {
    --card-w-field: 36px;
    --card-h-field: 50px;
    --card-w-mini: 22px;
    --card-h-mini: 31px;
    --card-w-life: 22px;
    --card-h-life: 31px;
    --card-w-leader: 38px;
    --card-h-leader: 53px;
    --don-token-w: 24px;
    --don-token-h: 33px;
    padding: 2px;
  }

  body.page-replay .mat-inner,
  body.page-replay .mat-half--flipped .mat-inner {
    grid-template-rows: 52px 52px 36px;
    gap: 2px;
  }

  body.page-replay .zone-life,
  body.page-replay .zone-characters,
  body.page-replay .char-area,
  body.page-replay .mat-half--flipped .char-area {
    height: 106px;
  }

  body.page-replay .char-area,
  body.page-replay .mat-half--flipped .char-area,
  body.page-replay .char-row--units,
  body.page-replay .char-row--leader {
    gap: 2px;
  }

  body.page-replay .char-row--units .card-slot--field.rested,
  body.page-replay .char-row--units:has(> :nth-child(5)) .card-slot--field.rested {
    width: 50px;
    height: 50px;
  }

  body.page-replay .card-slot--leader {
    width: 38px;
    height: 53px;
  }

  body.page-replay .zone-deck .zone-content,
  body.page-replay .zone-trash .zone-content {
    width: 22px;
    min-height: 31px;
  }

  body.page-replay .zone-trash .zone-empty {
    width: 22px;
    height: 31px;
  }

  body.page-replay .zone-cost {
    height: 36px;
    min-height: 36px;
    padding-block: 1px;
  }

  body.page-replay .zone-cost .zone-content {
    height: 34px;
    min-height: 34px;
    padding-block: 0;
  }

  body.page-replay .hand-panel--you {
    min-height: 70px;
    margin-top: 2px;
  }

  /* 16px of the top padding offset the row's -16px margin, as in the layouts
     above: without them the hand slides under the player's mat. */
  body.page-replay .hand-panel--you .hand-row {
    --card-w-hand: 48px;
    --card-h-hand: 66px;
    padding-block: 17px 1px;
  }
}

/* The replay dock (128px, or 132px at <=380px) is taller than the live one:
   the 701-800px layout only leaves room for it from 732px and the default one
   from 820px. Up to 735px the replay keeps the 601-700px card geometry, and up
   to 823px the 701-800px toolbar, divider and hand. */
@media (max-width: 1100px) and (min-height: 701px) and (max-height: 735px) {
  body.page-replay .mat-half {
    --card-w-mini: 26px;
    --card-h-mini: 36px;
    --card-w-life: 26px;
    --card-h-life: 36px;
    --don-token-w: 30px;
    --don-token-h: 40px;
    padding: 3px;
  }

  body.page-replay .mat-inner,
  body.page-replay .mat-half--flipped .mat-inner {
    grid-template-rows: 61px 61px 44px;
    gap: 3px;
  }

  body.page-replay .zone-life,
  body.page-replay .zone-characters,
  body.page-replay .char-area,
  body.page-replay .mat-half--flipped .char-area {
    height: 125px;
  }

  body.page-replay .life-stack-pile {
    --life-step: 10px;
    width: 26px;
    margin-top: 20px;
  }

  body.page-replay .zone-deck .zone-content,
  body.page-replay .zone-trash .zone-content {
    width: 26px;
    min-height: 36px;
  }

  body.page-replay .zone-trash .zone-empty {
    width: 26px;
    height: 36px;
  }

  body.page-replay .zone-cost {
    height: 44px;
    min-height: 44px;
    gap: 4px;
    padding: 1px 5px;
  }

  body.page-replay .zone-cost .zone-content {
    height: 42px;
    min-height: 42px;
    padding: 1px;
  }

  body.page-replay .cost-row {
    padding: 1px;
  }

  body.page-replay .hand-panel--you {
    min-height: 84px;
    margin-top: 4px;
  }

  body.page-replay .hand-panel--you .hand-row {
    --card-w-hand: 58px;
    --card-h-hand: 80px;
    padding: 18px 6px 2px;
  }

  body.page-replay .mat-mobile-rival-hand.mobile-only {
    min-height: 24px;
    flex-basis: 24px;
    margin-bottom: 2px;
    padding-bottom: 2px;
  }
}

@media (max-width: 1100px) and (min-height: 801px) and (max-height: 823px) {
  body.page-replay .table-toolbar {
    min-height: 42px;
    flex-basis: 42px;
    padding: 6px 8px;
  }

  body.page-replay .mat-mobile-divider.mobile-only {
    height: 8px;
    flex-basis: 8px;
    padding: 0 10px;
  }

  body.page-replay .hand-panel--you {
    min-height: 96px;
    margin-top: 5px;
  }

  body.page-replay .hand-panel--you .hand-row {
    --card-w-hand: 66px;
    --card-h-hand: 92px;
    padding: 18px 8px 2px;
  }
}

@media (max-width: 1100px), (pointer: coarse) {
  .action-dock .replay-control-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}

/* Keep the remaining DON!! count readable without the high contrast of the
   previous black badge. The muted green echoes the DON!! card back. */
.zone-don-deck .stack-count {
  background: rgba(58, 89, 74, 0.9);
  border-color: rgba(196, 218, 204, 0.72);
  color: var(--parchment-100);
  box-shadow: 0 2px 6px rgba(21, 14, 8, 0.3);
}

@media (min-width: 1101px) {
  .zone-don-deck .stack-count {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    min-width: 1.125rem;
    min-height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.08rem 0.24rem;
    border: 1px solid rgba(196, 218, 204, 0.72);
    border-radius: 999px;
    font-size: 0.625rem;
    line-height: 1;
    transform: translate(-50%, -50%);
  }
}

/* --- Card choice dialogs · Play From Trash reference (2026-07) ---
   One visual language for deck searches, play-from-zone choices and their
   follow-up steps. The forms and action hooks remain unchanged. */
.look-overlay,
.look-overlay[data-look-overlay="deck"] {
  padding: 24px;
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(90, 58, 34, 0.24), transparent 70%),
    radial-gradient(42% 46% at 78% 74%, rgba(74, 56, 38, 0.2), transparent 72%),
    rgba(21, 14, 8, 0.86);
  backdrop-filter: blur(2px);
}

.look-panel,
.look-panel--deck {
  width: fit-content;
  min-width: min(100%, 320px);
  max-width: min(1141px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(58, 42, 26, 0.6) 0%, #241a10 55%, #1d150d 100%);
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  color: var(--parchment-100);
  text-align: left;
  box-shadow:
    0 18px 40px -12px rgba(21, 14, 8, 0.88),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
  scrollbar-color: rgba(196, 154, 58, 0.42) transparent;
}

.look-panel .look-header,
.look-panel--deck .look-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
}

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

.look-panel .look-title,
.look-panel--deck .look-title {
  flex: 0 0 auto;
  margin: 0;
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.look-kicker-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(196, 154, 58, 0.16);
}

.look-popup-minimize {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(21, 14, 8, 0.34);
  border: 1px solid rgba(196, 154, 58, 0.42);
  border-radius: 5px;
  color: var(--gold-300);
  cursor: pointer;
  box-shadow: none;
}

.look-popup-minimize:hover,
.look-popup-minimize:focus-visible {
  background: rgba(196, 154, 58, 0.14);
  border-color: var(--gold-300);
  color: var(--parchment-100);
}

.look-popup-minimize:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

.look-popup-minimize-mark {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-1px);
}

.popup-reopen-action {
  display: none;
}

.tcg-table.popup-minimized .action-dock > :not(.dock-title):not(.popup-reopen-action) {
  display: none !important;
}

.tcg-table.popup-minimized .popup-reopen-action {
  display: flex;
  flex-direction: column;
}

.tcg-table.popup-minimized .popup-reopen-action .btn-action {
  width: 100%;
}

.look-panel .look-hint,
.look-panel--deck .look-hint {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
  white-space: normal;
  box-shadow: none;
}

.look-panel .look-empty-message {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  background: rgba(196, 154, 58, 0.08);
  border: 1px solid rgba(196, 154, 58, 0.22);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
}

.look-panel .look-cards,
.look-panel--deck .look-cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 2px 0 0;
  overflow: visible;
}

.look-panel .look-card,
.look-panel--deck .look-card {
  position: relative;
  width: 125px;
  flex: 0 0 125px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.look-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: #1a130c;
  border: 1px solid rgba(196, 154, 58, 0.16);
  border-radius: 4px;
  box-shadow: 0 2px 8px -2px rgba(21, 14, 8, 0.6);
}

.look-panel .look-card-img,
.look-panel--deck .look-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  border-radius: 3px;
  box-shadow: none;
}

.look-panel.look-panel--selecting .look-card:not(.look-card--disabled) .look-card-img,
.look-panel--deck.look-panel--selecting .look-card:not(.look-card--disabled) .look-card-img {
  transform: none;
  animation: none;
  box-shadow: none;
}

.look-panel .look-card--disabled .look-card-img,
.look-panel--deck .look-card--disabled .look-card-img {
  opacity: 0.46;
  filter: grayscale(0.78) brightness(0.58);
}

.look-panel .look-card-zoom {
  top: 15px;
  right: 6px;
  bottom: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(21, 14, 8, 0.82);
  border: 1px solid rgba(196, 154, 58, 0.3);
  border-radius: 4px;
  color: var(--gold-300);
  cursor: zoom-in;
  box-shadow: none;
}

.look-panel .look-card-zoom::before {
  left: 6px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-width: 1.75px;
}

.look-panel .look-card-zoom::after {
  left: 13px;
  top: 14px;
  width: 6px;
  height: 1.75px;
}

.look-panel .look-card-zoom:hover,
.look-panel .look-card-zoom:focus-visible {
  background: rgba(21, 14, 8, 0.96);
  border-color: var(--gold-500);
  color: var(--gold-300);
}

.look-panel .look-card form {
  width: 100%;
}

.look-panel .btn-look,
.look-panel--deck .btn-look {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--btn-gold-background);
  border: 0;
  border-radius: 8px;
  color: var(--ink-950);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.35);
}

.look-panel .btn-look:hover,
.look-panel .btn-look:focus-visible {
  background: linear-gradient(180deg, #edd57f, var(--gold-300));
  color: var(--ink-950);
}

.look-panel .look-card-ineligible {
  min-height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 5px;
  color: rgba(232, 217, 181, 0.42);
  font-size: 0.6875rem;
  line-height: 1.25;
  text-align: center;
}

.look-panel .look-destinations {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
}

.look-panel .look-destinations form {
  flex: 1 1 180px;
}

.look-panel .look-footer {
  width: 100%;
}

.look-panel .look-finish,
.look-panel--deck .look-finish {
  width: 100%;
  margin: 4px 0 0;
}

.look-panel .look-finish .btn-action,
.look-panel--deck .look-finish .btn-action {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: rgba(196, 154, 58, 0.1);
  border: 1px solid rgba(196, 154, 58, 0.35);
  border-radius: 8px;
  color: var(--gold-300);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  box-shadow: none;
}

.look-panel .look-finish .btn-action:hover,
.look-panel .look-finish .btn-action:focus-visible {
  background: rgba(196, 154, 58, 0.18);
  border-color: var(--gold-500);
  color: var(--parchment-100);
}

.look-panel .look-return-same-order .btn-action,
.look-panel--deck .look-return-same-order .btn-action {
  background: var(--btn-gold-background);
  border: 0;
  color: var(--ink-950);
  box-shadow: inset 0 1px 0 rgba(242, 231, 204, 0.35);
}

.look-panel .look-tray {
  width: 100%;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 8px;
  background: rgba(21, 14, 8, 0.28);
  border: 1px solid rgba(196, 154, 58, 0.14);
  border-radius: 8px;
}

.look-panel .look-tray-label {
  color: rgba(224, 194, 102, 0.78);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.look-panel .look-tray-img {
  width: 56px;
  border-radius: 4px;
}

/* --- Board card library dialogs · current card-choice visual language ---
   Trash for either player and the mobile opponent-hand viewer share the same
   panel, card geometry and responsive column rules as card-choice dialogs. */
.board-card-dialog {
  width: fit-content;
  min-width: min(100%, 320px);
  max-width: min(1141px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  color: var(--parchment-100);
}

.board-card-dialog::backdrop {
  background:
    radial-gradient(38% 42% at 22% 28%, rgba(90, 58, 34, 0.24), transparent 70%),
    radial-gradient(42% 46% at 78% 74%, rgba(74, 56, 38, 0.2), transparent 72%),
    rgba(21, 14, 8, 0.86);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.board-card-dialog-panel {
  width: 100%;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(58, 42, 26, 0.6) 0%, #241a10 55%, #1d150d 100%);
  border: 1px solid rgba(196, 154, 58, 0.25);
  border-radius: 12px;
  color: var(--parchment-100);
  box-shadow:
    0 18px 40px -12px rgba(21, 14, 8, 0.88),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
}

.board-card-dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-card-dialog-title {
  flex: 0 0 auto;
  margin: 0;
  color: var(--gold-300);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.board-card-dialog-title-rule {
  height: 1px;
  flex: 1 1 auto;
  background: rgba(196, 154, 58, 0.16);
}

.board-card-dialog-close {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(21, 14, 8, 0.34);
  border: 1px solid rgba(196, 154, 58, 0.42);
  border-radius: 5px;
  color: var(--gold-300);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.board-card-dialog-close:hover,
.board-card-dialog-close:focus-visible {
  background: rgba(196, 154, 58, 0.14);
  border-color: var(--gold-300);
  color: var(--parchment-100);
}

.board-card-dialog-close:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

.board-card-dialog-grid {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 2px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.board-card-dialog-grid .card-slot--hand,
.board-card-dialog-grid .card-slot--hand:last-child {
  width: 125px;
  min-width: 125px;
  height: auto;
  aspect-ratio: 5 / 7;
  flex: 0 0 125px;
  margin: 0;
  overflow: hidden;
  background: #1a130c;
  border: 1px solid rgba(196, 154, 58, 0.16);
  border-radius: 4px;
  box-shadow: 0 2px 8px -2px rgba(21, 14, 8, 0.6);
}

.board-card-dialog-grid .card-slot--hand .card-inner {
  width: 100%;
  height: 100%;
}

.board-card-dialog-grid .trash-card-zoom {
  top: 15px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: rgba(21, 14, 8, 0.82);
  border: 1px solid rgba(196, 154, 58, 0.3);
  border-radius: 4px;
  color: var(--gold-300);
  box-shadow: none;
}

.board-card-dialog-grid .trash-card-zoom::before {
  left: 6px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-width: 1.75px;
}

.board-card-dialog-grid .trash-card-zoom::after {
  left: 13px;
  top: 14px;
  width: 6px;
  height: 1.75px;
}

.board-card-dialog-grid .trash-card-zoom:hover,
.board-card-dialog-grid .trash-card-zoom:focus-visible {
  background: rgba(21, 14, 8, 0.96);
  border-color: var(--gold-500);
  color: var(--gold-300);
}

/* A reveal is presentation history, not the current deck top. Keep it in a
   focused card dialog so effects that continue with a draw cannot make the
   already-drawn card look as if it were still sitting on the deck. */
.deck-top-reveal-panel {
  width: min(360px, calc(100vw - 48px));
  min-width: 0;
  align-items: center;
  gap: 14px;
  overflow: visible;
  text-align: center;
}

.deck-top-reveal-panel .deck-top-reveal-header {
  width: 100%;
}

.deck-top-reveal-card-name {
  margin: 0;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
  text-wrap: balance;
}

.deck-top-reveal-card {
  position: relative;
  width: 178px;
  flex: 0 0 auto;
}

.deck-top-reveal-card .look-card-media {
  border-color: rgba(224, 194, 102, 0.48);
  box-shadow:
    0 18px 34px -14px rgba(8, 5, 3, 0.92),
    0 0 0 1px rgba(242, 231, 204, 0.08);
}

.deck-top-reveal-actions {
  width: 100%;
  max-width: 240px;
}

.deck-top-reveal-actions form {
  width: 100%;
}

.look-panel .deck-top-reveal-continue {
  min-height: 42px;
}

.deck-top-reveal-waiting {
  margin: 0;
  padding: 10px 12px;
  background: rgba(196, 154, 58, 0.08);
  border: 1px solid rgba(196, 154, 58, 0.22);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .look-overlay,
  .look-overlay[data-look-overlay="deck"] {
    align-items: center;
    padding: 12px;
    background:
      radial-gradient(40% 30% at 24% 26%, rgba(90, 58, 34, 0.22), transparent 70%),
      radial-gradient(44% 32% at 76% 62%, rgba(74, 56, 38, 0.2), transparent 72%),
      rgba(21, 14, 8, 0.88);
  }

  .look-panel,
  .look-panel--deck {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - 24px);
    gap: 8px;
    padding: 12px;
  }

  .deck-top-reveal-panel {
    width: min(100%, 340px);
    gap: 10px;
  }

  .deck-top-reveal-card {
    width: min(160px, 44vw);
  }

  .look-panel .look-header,
  .look-panel--deck .look-header {
    gap: 8px;
  }

  .look-popup-minimize {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .look-panel .look-hint,
  .look-panel--deck .look-hint {
    font-size: 1.25rem;
  }

  .look-panel .look-cards,
  .look-panel--deck .look-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 2px;
  }

  .look-panel .look-card,
  .look-panel--deck .look-card {
    width: auto;
    min-width: 0;
    gap: 6px;
  }

  .look-panel .look-card-zoom {
    top: 15px;
    right: 4px;
    bottom: auto;
    width: 28px;
    height: 28px;
  }

  .look-panel .look-card-zoom::before {
    left: 7px;
    top: 6px;
    width: 9px;
    height: 9px;
  }

  .look-panel .look-card-zoom::after {
    left: 15px;
    top: 16px;
    width: 7px;
  }

  .look-panel .btn-look,
  .look-panel--deck .btn-look {
    min-height: 40px;
    padding: 8px;
    font-size: 0.875rem;
  }

  .look-panel .look-finish .btn-action,
  .look-panel--deck .look-finish .btn-action {
    min-height: 44px;
  }

  .board-card-dialog {
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: none;
    max-height: calc(100dvh - 24px);
  }

  .board-card-dialog-panel {
    max-height: calc(100dvh - 24px);
    gap: 8px;
    padding: 12px;
  }

  .board-card-dialog-close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .board-card-dialog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Preserve card height when the flex panel limits this scroll area's height. */
    grid-auto-rows: max-content;
    gap: 8px;
    padding-top: 2px;
  }

  .board-card-dialog-grid .card-slot--hand,
  .board-card-dialog-grid .card-slot--hand:last-child {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 5 / 7;
    flex: none;
  }

  .board-card-dialog-grid .trash-card-zoom {
    top: 15px;
    right: 4px;
    width: 28px;
    height: 28px;
  }

  .board-card-dialog-grid .trash-card-zoom::before {
    left: 7px;
    top: 6px;
    width: 9px;
    height: 9px;
  }

  .board-card-dialog-grid .trash-card-zoom::after {
    left: 15px;
    top: 16px;
    width: 7px;
  }
}

@media (min-width: 480px) and (max-width: 700px) {
  .look-panel .look-cards,
  .look-panel--deck .look-cards,
  .board-card-dialog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .look-panel .look-title,
  .look-panel--deck .look-title {
    font-size: 0.6875rem;
  }

  .look-panel .look-hint,
  .look-panel--deck .look-hint {
    font-size: 1.125rem;
  }

  .look-panel .look-cards,
  .look-panel--deck .look-cards,
  .board-card-dialog-grid {
    gap: 6px;
  }
}

/* --- Cuentas de usuario --- */
.site-header-actions {
  --site-header-control-size: 2.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.site-header-actions > .account-menu,
.site-header-actions > .site-menu {
  display: inline-grid;
  width: var(--site-header-control-size);
  height: var(--site-header-control-size);
  place-items: center;
  line-height: 0;
}

.site-header-actions .account-menu-button,
.site-header-actions .site-menu-button {
  width: 100%;
  height: 100%;
  margin: 0;
  vertical-align: middle;
}

.site-header-actions .account-menu-avatar {
  display: block;
}

/* Escritorio: los destinos del menú, a la vista junto a la marca. */
.site-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  margin-left: 1.25rem;
}

/* Mismo trazo que los elementos del menú desplegable. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 750;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(201, 162, 39, 0.16);
  color: #fff6cf;
  outline: none;
}

/* Página actual: igual que el idioma activo en su lista. */
.site-nav a[aria-current="page"] {
  color: var(--gold-300);
  background: rgba(201, 162, 39, 0.12);
}

/* Configuración: la caja del botón de menú con el icono de la portada. */
.site-header-settings {
  display: inline-grid;
  width: var(--site-header-control-size);
  height: var(--site-header-control-size);
  place-items: center;
  background: rgba(10, 7, 4, 0.58);
  border: 1px solid rgba(201, 162, 39, 0.54);
  border-radius: 8px;
  color: var(--text);
}

.site-header-settings:hover,
.site-header-settings[aria-current="page"] {
  background: rgba(34, 23, 12, 0.9);
  border-color: rgba(201, 162, 39, 0.88);
}

.site-header-settings .home-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.site-header-discord {
  display: inline-grid;
  width: var(--site-header-control-size);
  height: var(--site-header-control-size);
  place-items: center;
  opacity: 0.82;
}

.site-header-discord:hover {
  opacity: 1;
}

.site-header-settings:focus-visible,
.site-header-discord:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-header-divider {
  width: 1px;
  height: 1.5rem;
  margin: 0 0.25rem;
  background: var(--border-hairline);
}

@media (min-width: 1101px) {
  .site-header-actions > .site-menu {
    display: none;
  }
}

/* Móvil y tableta: todo vuelve al menú desplegable. */
@media (max-width: 1100px) {
  .site-nav,
  .site-header-icon,
  .site-header-divider {
    display: none;
  }
}

.language-selector {
  position: relative;
  flex: none;
  line-height: normal;
}

.language-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--site-header-control-size, 2.35rem);
  min-width: 3.1rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(201, 162, 39, 0.54);
  border-radius: 8px;
  background: rgba(10, 7, 4, 0.58);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.language-selector-button:hover,
.language-selector-button[aria-expanded="true"] {
  background: rgba(34, 23, 12, 0.9);
  border-color: rgba(201, 162, 39, 0.88);
}

.language-selector-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.language-selector--play .language-selector-button {
  height: 2.15rem;
  border-color: #5c4a12;
}

.language-selector-popup {
  width: max-content;
  min-width: 13rem;
  max-width: calc(100vw - 2rem);
  max-height: min(26rem, 65dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.language-selector-popup a {
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  font-family: var(--font-body);
  font-weight: 500;
}

.language-selector-popup a[aria-current="page"] {
  color: var(--gold-300);
  background: rgba(201, 162, 39, 0.12);
}

.language-selector-popup .settings-sync-error {
  max-width: 16rem;
  color: #ffb9b9;
}

@media (max-width: 1100px) {
  .language-selector-globe {
    display: none;
  }

  .site-header-actions .language-selector-button {
    min-height: 2.75rem;
  }

  .mobile-menu-preferences {
    display: grid;
    grid-column: 1 / -1;
    /* Match the upper row's single 8px gap before splitting its right column. */
    grid-template-columns: calc(50% - 4px);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
  }

  .language-selector--mobile-game .language-selector-button {
    height: 100%;
  }

  /* El idioma no puede invadir el hueco de sus vecinos. */
  .mobile-menu-preferences .btn-toolbar {
    padding-inline: 6px;
  }

  .mobile-menu-preferences .language-selector-button {
    min-width: 0;
  }

  /* La lista de idiomas cuelga de la fila: anclada al botón estrecho, se
     saldría por la izquierda a 320 px. */
  .mobile-menu-preferences {
    position: relative;
  }

  .language-selector--mobile-game {
    position: static;
  }
}

.account-menu {
  position: relative;
  flex: none;
}

.account-menu-button {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: rgba(10, 7, 4, 0.58);
  border: 1px solid rgba(201, 162, 39, 0.54);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.account-menu-button:hover,
.account-menu-button[aria-expanded="true"] {
  background: rgba(34, 23, 12, 0.9);
  border-color: rgba(201, 162, 39, 0.88);
}

.account-menu-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.account-menu-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.account-menu--play .account-menu-button {
  width: 2.15rem;
  height: 2.15rem;
  border-color: #5c4a12;
}

.account-menu-popup {
  left: auto;
  right: 0;
}

.account-menu-nick {
  margin: 0.1rem 0.35rem 0.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
  color: var(--accent-glow);
  font-family: var(--font-display);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

/* `display:flex` gana al atributo `hidden` si no se dice lo contrario. */
.account-form[hidden] {
  display: none;
}

.account-separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--ink-600);
  font-size: 0.8rem;
  text-transform: lowercase;
}

.account-separator::before,
.account-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(90, 58, 34, 0.28);
}

.account-google {
  display: flex;
  height: 40px;
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
}

/*
 * GIS inserta el botón en dos fases. En una caché fría puede pintar durante
 * un instante el SVG y el texto internos antes de fijar el iframe a 40 px.
 * La ranura estable evita que ese estado transitorio agrande todo el panel.
 * `opacity` mantiene el nodo medible: GIS crea un iframe de 0x0 cuando alguno
 * de sus ancestros usa `visibility: hidden` durante la inicialización.
 */
.account-google .g_id_signin {
  height: 40px;
  max-width: 100%;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.account-google .g_id_signin.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.account-hint {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.8rem;
}

.account-hint.is-error {
  color: #8d2f2f;
}

.account-error {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: rgba(141, 47, 47, 0.12);
  border: 1px solid rgba(141, 47, 47, 0.45);
  border-radius: 6px;
  color: #6f2020;
  font-size: 0.85rem;
}

/* Miniaturas del perfil: una fila de círculos (account.css maqueta la página). */
.account-avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.account-avatar-option {
  position: relative;
  display: flex;
  flex: none;
  width: 3.9rem;
  height: 3.9rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: rgba(90, 58, 34, 0.12);
  border: 2px solid transparent;
  border-radius: 999px;
  color: var(--ink-600);
  cursor: pointer;
}

.account-avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.account-avatar-option.is-selected {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.35);
}

.account-avatar-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Avatar de logro: aro degradado de «estado nuevo», separado del retrato por
   un hueco del color del fondo. Va tras las reglas de cada contenedor para
   ganarles con la misma especificidad, también en hover. */
.avatar-ring:is(
    .account-menu-button,
    .player-seat-avatar,
    .rating-avatar,
    .account-portrait,
    .account-avatar-option
  ) {
  padding: var(--avatar-ring-gap, 2px);
  border: var(--avatar-ring-width, 2px) solid transparent;
  background:
    linear-gradient(var(--avatar-ring-gap-color, #f6ecd8), var(--avatar-ring-gap-color, #f6ecd8))
      padding-box,
    conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75) border-box;
}

.avatar-ring:is(
    .account-menu-button,
    .player-seat-avatar,
    .rating-avatar,
    .account-portrait,
    .account-avatar-option
  )
  img {
  border-radius: 50%;
}

.account-menu-button.avatar-ring {
  --avatar-ring-gap-color: #140d07;
}

.player-seat-avatar.avatar-ring {
  --avatar-ring-width: 1.5px;
  --avatar-ring-gap: 1px;
}

.account-avatar-option.avatar-ring {
  --avatar-ring-gap-color: #efe4cc;
}

/* Tarjeta del logro (static/js/avatar_achievement.js): se abre al pasar el
   ratón o al pulsar el avatar, también en móvil. */
[data-avatar-achievement]:not([data-avatar-achievement-click="pass"]) {
  cursor: pointer;
}

.avatar-achievement-tip {
  position: fixed;
  z-index: 10000;
  display: block;
  max-width: min(17rem, calc(100vw - 16px));
  padding: 0.55rem 0.8rem;
  background: rgba(20, 14, 8, 0.97);
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  color: #f3e6c8;
  line-height: 1.3;
  text-align: left;
}

.avatar-achievement-tip[hidden],
.avatar-achievement-tip [hidden] {
  display: none;
}

.avatar-achievement-tip::after {
  content: "";
  position: absolute;
  left: var(--avatar-achievement-arrow, 50%);
  width: 10px;
  height: 10px;
  background: rgba(20, 14, 8, 0.97);
  border: 1px solid rgba(201, 162, 39, 0.6);
  transform: translateX(-50%) rotate(45deg);
}

.avatar-achievement-tip[data-placement="top"]::after {
  bottom: -6px;
  border-top: 0;
  border-left: 0;
}

.avatar-achievement-tip[data-placement="bottom"]::after {
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}

.avatar-achievement-tip-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.avatar-achievement-tip-title {
  color: var(--accent-glow, #f5d77a);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
}

.avatar-achievement-tip-goal {
  color: rgba(243, 230, 200, 0.82);
  font-size: 0.8rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 520px) {
  .account-actions .btn {
    flex: 1 1 100%;
  }
}

.account-games-container {
  max-width: 900px;
  margin: clamp(1.5rem, 7vh, 4.5rem) auto;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}

.account-games-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
  text-align: left;
}

.account-games-table th {
  padding: 0 0.6rem 0.2rem;
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-games-table td {
  padding: 0.5rem 0.6rem;
  background: rgba(255, 252, 242, 0.55);
  border-top: 1px solid rgba(90, 58, 34, 0.22);
  border-bottom: 1px solid rgba(90, 58, 34, 0.22);
  font-size: 0.9rem;
  vertical-align: middle;
  white-space: nowrap;
}

.account-games-table td:first-child {
  border-left: 1px solid rgba(90, 58, 34, 0.22);
  border-radius: 8px 0 0 8px;
}

.account-games-table td:last-child {
  border-right: 1px solid rgba(90, 58, 34, 0.22);
  border-radius: 0 8px 8px 0;
}

.account-games-leader-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.account-games-leader {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.35rem;
}

.account-games-leader img {
  width: 1.9rem;
  height: auto;
  border-radius: 4px;
}

.account-games-leader small {
  color: var(--ink-600);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.account-games-leader-separator {
  color: rgba(90, 58, 34, 0.45);
  font-size: 0.8rem;
}

.account-games-type,
.account-games-opponent {
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.account-games-type {
  padding: 0.12rem 0.42rem;
  background: rgba(90, 58, 34, 0.1);
  border: 1px solid rgba(90, 58, 34, 0.28);
  border-radius: 999px;
  color: var(--ink-600);
  font-size: 0.75rem;
}

.account-games-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(90, 58, 34, 0.35);
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.account-games-status.is-won {
  background: rgba(58, 109, 62, 0.16);
  border-color: rgba(58, 109, 62, 0.5);
  color: #2f5c33;
}

.account-games-status.is-lost {
  background: rgba(141, 47, 47, 0.14);
  border-color: rgba(141, 47, 47, 0.45);
  color: #6f2020;
}

.account-games-status.is-in_progress {
  background: rgba(201, 162, 39, 0.18);
  border-color: rgba(201, 162, 39, 0.5);
  color: #7a5c10;
}

.account-games-status.is-abandoned,
.account-games-status.is-interrupted {
  background: rgba(90, 58, 34, 0.12);
  color: var(--ink-600);
}

.account-games-pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 720px) {
  .account-games-table,
  .account-games-table tbody {
    display: block;
  }

  .account-games-table thead {
    display: none;
  }

  .account-games-table tr {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: rgba(255, 252, 242, 0.55);
    border: 1px solid rgba(90, 58, 34, 0.22);
    border-radius: 8px;
  }

  .account-games-table td {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 0.3rem;
    justify-items: start;
    padding: 0.65rem 0.7rem;
    background: none;
    border: 0;
    white-space: normal;
  }

  .account-games-table td:first-child,
  .account-games-table td:last-child {
    border-radius: 0;
  }

  .account-games-table td:nth-child(odd) {
    border-right: 1px solid rgba(90, 58, 34, 0.16);
  }

  .account-games-table td:nth-child(-n + 6) {
    border-bottom: 1px solid rgba(90, 58, 34, 0.16);
  }

  .account-games-table td::before {
    content: attr(data-label);
    color: var(--ink-600);
    font-size: 0.72rem;
    text-transform: uppercase;
  }

  .account-games-table td.account-games-leaders {
    align-content: start;
  }

  .account-games-leader-pair {
    gap: 0.25rem;
  }

  .account-games-leader {
    gap: 0.2rem;
  }

  .account-games-leader img {
    width: 1.55rem;
  }

  .account-games-leader small {
    font-size: 0.58rem;
  }
}

.account-cta {
  display: flex;
  margin-bottom: 1rem;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.account-cta[hidden] {
  display: none;
}

.account-cta-copy {
  margin: 0;
  flex: 1 1 18rem;
  min-width: 0;
}

.account-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* --- H2H match clocks -------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.match-clock-dock {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 28;
  display: grid;
  grid-template-columns: minmax(126px, auto);
  gap: 5px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.match-clock {
  position: relative;
  min-width: 126px;
  min-height: 47px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 7px 10px 6px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(36, 26, 16, 0.98), rgba(21, 14, 8, 0.96)),
    var(--ink-950);
  border: 1px solid rgba(196, 154, 58, 0.38);
  border-radius: 10px;
  color: var(--parchment-100);
  box-shadow:
    0 10px 26px -12px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 rgba(242, 231, 204, 0.08);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.match-clock--opponent {
  border-color: color-mix(in srgb, var(--map-blue) 72%, var(--parchment-300) 28%);
}

.match-clock--own {
  border-color: rgba(196, 154, 58, 0.48);
}

.match-clock.is-running {
  border-color: var(--gold-300);
  box-shadow:
    0 0 0 1px rgba(224, 194, 102, 0.18),
    0 0 24px -5px rgba(224, 194, 102, 0.58),
    0 12px 28px -14px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(242, 231, 204, 0.12);
  transform: scale(1.025);
}

.match-clock-meta {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.match-clock-label {
  overflow: hidden;
  color: var(--parchment-300);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-clock-label-short {
  display: none;
}

.match-clock-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 0.5625rem;
  line-height: 1;
  white-space: nowrap;
}

.match-clock-state-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: rgba(232, 217, 181, 0.35);
  border-radius: 50%;
}

.match-clock.is-running .match-clock-state {
  color: var(--gold-300);
}

.match-clock.is-running .match-clock-state-dot {
  background: var(--gold-300);
  box-shadow: 0 0 8px rgba(224, 194, 102, 0.95);
}

.match-clock-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--parchment-100);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 1.1875rem;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.match-clock-warning {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  color: #f4a261;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
}

.match-clock-warning[hidden] {
  display: none;
}

.match-clock.is-low {
  border-color: #f4a261;
  box-shadow:
    0 0 0 1px rgba(244, 162, 97, 0.18),
    0 0 22px -5px rgba(244, 162, 97, 0.56),
    0 12px 28px -14px rgba(0, 0, 0, 0.95);
}

.match-clock.is-low .match-clock-value,
.match-clock.is-expired .match-clock-value {
  color: #ffc08a;
}

.match-clock.is-expired {
  border-color: rgba(212, 85, 72, 0.74);
  opacity: 0.88;
}

@keyframes match-clock-rail-tick {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.32;
  }
}

@media (min-width: 1101px) {
  .match-clock-dock--mobile {
    display: none;
  }

  .hand-label {
    align-items: center;
  }

  .match-clock.match-clock--rail {
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    overflow: visible;
    background: #1b130c;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(232, 217, 181, 0.55);
    opacity: 0.72;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
    transform: none;
    transition:
      color 180ms ease,
      opacity 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .match-clock--rail .match-clock-state-dot {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
    background: rgba(62, 95, 112, 0.9);
    box-shadow: none;
  }

  .match-clock--rail .match-clock-value {
    grid-column: auto;
    grid-row: auto;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: none;
  }

  .match-clock.match-clock--rail.is-running {
    color: var(--gold-300);
    opacity: 1;
    border-color: rgba(224, 194, 102, 0.35);
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(224, 194, 102, 0.08),
      0 0 12px -4px rgba(224, 194, 102, 0.72);
    transform: none;
  }

  .match-clock.match-clock--rail.is-running .match-clock-state-dot {
    background: var(--gold-300);
    box-shadow: 0 0 7px rgba(224, 194, 102, 0.9);
    animation: match-clock-rail-tick 1.6s steps(1, end) infinite;
  }

  .match-clock.match-clock--rail.is-low {
    border-color: rgba(244, 162, 97, 0.58);
    color: #ffc08a;
    opacity: 1;
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.55),
      0 0 10px -4px rgba(244, 162, 97, 0.68);
  }

  .match-clock--rail .match-clock-warning {
    grid-column: auto;
    order: -1;
    margin: 0;
    color: #ffc08a;
    font-size: 0.625rem;
  }
}

@media (max-width: 1100px) {
  body.page-play .match-clock-dock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.page-play .match-clock {
    min-width: 112px;
    min-height: 38px;
    column-gap: 7px;
    padding: 5px 8px;
    border-radius: 8px;
  }

  body.page-play .match-clock-label {
    max-width: 70px;
    font-size: 0.53125rem;
  }

  body.page-play .match-clock-label-long {
    display: none;
  }

  body.page-play .match-clock-label-short {
    display: inline;
  }

  body.page-play .match-clock-state {
    font-size: 0.5rem;
  }

  body.page-play .match-clock-value {
    font-size: 0.9375rem;
  }

  body.page-play .match-clock-warning {
    font-size: 0.5rem;
  }

  body.page-play .match-clock.match-clock--mobile-rail {
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 6px;
    padding: 3px 7px;
    overflow: visible;
    background: #1b130c;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(232, 217, 181, 0.52);
    opacity: 0.68;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
    transform: none;
    transition:
      color 180ms ease,
      opacity 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  body.page-play .match-clock--mobile-rail .match-clock-state-dot {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
    background: rgba(62, 95, 112, 0.9);
    box-shadow: none;
  }

  body.page-play .match-clock--mobile-rail .match-clock-value {
    grid-column: auto;
    grid-row: auto;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-shadow: none;
  }

  body.page-play .match-clock.match-clock--mobile-rail.is-running {
    color: var(--gold-300);
    opacity: 1;
    border-color: rgba(224, 194, 102, 0.38);
    box-shadow:
      inset 0 2px 5px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(224, 194, 102, 0.08),
      0 0 11px -3px rgba(224, 194, 102, 0.78);
    transform: none;
  }

  body.page-play .match-clock.match-clock--mobile-rail.is-running .match-clock-state-dot {
    background: var(--gold-300);
    box-shadow: 0 0 7px rgba(224, 194, 102, 0.92);
    animation: match-clock-rail-tick 1.6s steps(1, end) infinite;
  }

  body.page-play .match-clock.match-clock--mobile-rail.is-low {
    color: #ffc08a;
    opacity: 1;
    border-color: rgba(244, 162, 97, 0.58);
    box-shadow:
      inset 0 2px 5px rgba(0, 0, 0, 0.55),
      0 0 10px -4px rgba(244, 162, 97, 0.68);
  }

  body.page-play .match-clock--mobile-rail .match-clock-warning {
    grid-column: auto;
    order: -1;
    margin: 0;
    color: #ffc08a;
    font-size: 0.5625rem;
  }
}

@media (max-width: 420px) {
  body.page-play .match-clock-dock {
    width: min(244px, calc(100vw - 40px));
  }

  body.page-play .match-clock {
    min-width: 0;
    column-gap: 5px;
    padding-inline: 7px;
  }

  body.page-play .match-clock-label {
    max-width: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-clock {
    transition: none;
  }

  .match-clock.match-clock--rail.is-running .match-clock-state-dot {
    animation: none;
  }

  .match-clock.match-clock--mobile-rail.is-running .match-clock-state-dot {
    animation: none;
  }
}

[data-deck-legality-notice] {
  margin: 0.5rem 0 0;
  color: var(--danger);
  font-size: 0.8rem;
  line-height: 1.4;
}
[data-deck-legality-notice] a {
  color: inherit;
  text-decoration: underline;
}
[data-deck-legality-notice][hidden] { display: none; }

/* Formato y puntuación: visibles también con la bandera de Elo apagada. */
.rating-match-kind {
  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 0.55rem;
  padding: 0.22rem 0.7rem;
  border: 1px solid rgba(196, 154, 58, 0.5);
  border-radius: 999px;
  background: rgba(196, 154, 58, 0.12);
  color: var(--gold-300);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.turn-order-dialog-panel .rating-match-kind {
  margin: 0;
}

.rating-match-kind.is-friendly {
  border-color: rgba(232, 217, 181, 0.24);
  background: transparent;
  color: var(--text-secondary);
}

.rating-match-quota {
  max-width: 34rem;
  margin: 0 auto 0.55rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}