:root {
  --bg0: #120a0c;
  --bg1: #1a0f12;
  --bg2: #2a151c;
  --ink: #f3e8e4;
  /* Deep plate + lifted art — mysterious, still readable (SVG fill #3d1522). */
  --silhouette-plate: #1a0f12;
  --silhouette-art: brightness(0) invert(0.78) sepia(0.28) saturate(0.55)
    hue-rotate(325deg);
  --muted: #b9a39c;
  --amber: #c9a46a;
  --amber-soft: rgba(201, 164, 106, 0.35);
  --burgundy: #6b2438;
  --burgundy-deep: #3d1522;
  --checkin: #7a9e8e;
  --wildcard: #c97b4a;
  --danger: #c45c5c;
  /* A rose vs B blue — not amber (brand / Otra swipe). */
  --turn-a: #d0899a;
  --turn-a-soft: rgba(208, 137, 154, 0.32);
  --turn-a-wash: rgba(208, 137, 154, 0.3);
  --turn-b: #6e9eb8;
  --turn-b-soft: rgba(110, 158, 184, 0.32);
  --turn-b-wash: rgba(110, 158, 184, 0.3);
  --radius: 1.25rem;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font-display: "Roboto Serif", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Shell wash — also on html so iOS PWA gaps never flash bare black. */
  --app-wash:
    radial-gradient(
      ellipse 120% 80% at 50% -10%,
      var(--burgundy-deep),
      transparent 55%
    ),
    radial-gradient(
      ellipse 80% 50% at 100% 100%,
      rgba(107, 36, 56, 0.35),
      transparent 50%
    ),
    linear-gradient(165deg, var(--bg1), var(--bg0));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100lvh;
  margin: 0;
  color-scheme: dark;
  overscroll-behavior: none;
  /* Match wash end-color so any unpainted gap is never pure #000. */
  background-color: var(--bg0);
  /* Cut double-tap zoom; pinch is gated by viewport maximum-scale. */
  touch-action: manipulation;
}

body {
  position: relative;
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100lvh;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background-color: transparent;
  background-image: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Long-press / swipe on the mesa often left ghost text selection. */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Names / filters still need a caret and selectable text. */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/*
  Edge-to-edge shell wash. iOS standalone often letterboxes a strip below
  100dvh (home indicator). A real fixed layer sized to screen.height via JS
  covers that; CSS fallbacks use lvh + safe-area.
*/
.shell-wash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: 100lvh;
  height: calc(100lvh + env(safe-area-inset-bottom, 0px));
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg0);
  background-image: var(--app-wash);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* Downward-only cushion for the home-indicator strip. Avoid a full-spread
     halo — it painted black seams into Dados meta chips while rolling. */
  box-shadow: 0 6rem 0 0 var(--bg0);
}

/* Landscape on phones breaks the mesa. Manifest + Screen Orientation help in
   installed PWA; this overlay is the fallback when the OS still rotates. */
.rotate-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.5rem;
  padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--app-wash), var(--bg0);
  color: var(--ink);
  text-align: center;
}

.rotate-lock-icon {
  margin: 0 0 0.15rem;
  color: var(--amber);
  line-height: 0;
}

.rotate-lock-svg {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
}

.rotate-lock-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
}

.rotate-lock-copy {
  margin: 0;
  max-width: 22rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.4;
}

/* Portrait lock for phone/tablet landscape only — not desktop DevTools /
   short browser windows (those are landscape + low height with hover). */
@media (orientation: landscape) and (max-height: 560px) and (hover: none) {
  .rotate-lock {
    display: flex;
  }

  body > .app,
  body > .boot-loader,
  body > .update-banner {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Play mesa: lock document to one viewport (cartas + dados only).
   Edge-to-edge: no .app max-width / side padding (those left black gutters).
   Height: 100dvh wins last. -webkit-fill-available is only a min-height
   fallback — as a final `height` it shrank the shell on iOS PWA and left
   a black band under the action buttons. */
html:has(body.is-play-mesa) {
  height: 100%;
  min-height: -webkit-fill-available;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg0);
}

body.is-play-mesa {
  min-height: 100%;
  min-height: -webkit-fill-available;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: transparent;
}

body.is-play-mesa .app {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 0;
  min-height: -webkit-fill-available;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--bg0);
  /* Top: safe-area + breathing room under Dynamic Island / status bar.
     Bottom safe-area lives on mesa footers (no black band). */
  padding: calc(0.65rem + var(--safe-t)) env(safe-area-inset-right, 0px) 0
    env(safe-area-inset-left, 0px);
}

/* Standalone PWA: a bit more air — translucent status bar draws over content. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body.is-play-mesa .app {
    padding-top: calc(0.85rem + var(--safe-t));
  }
}

body.is-play-mesa .app > .screen:not([hidden]) {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  overflow: hidden;
  gap: 0.55rem;
}

/* Cartas kept the old .app 1rem side inset — restore on the table screen. */
body.is-play-mesa #screen-table {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Cartas: only the home-indicator inset (no extra dead band). */
body.is-play-mesa .table-footer-slot {
  padding-bottom: max(0.25rem, var(--safe-b));
}

/* Mesa swipe follow + tint (Cartas #play-card, Dados #solo-dice-face) */
body.is-play-mesa #play-card,
body.is-play-mesa #solo-dice-face {
  touch-action: pan-y;
}

#play-card.is-swiping,
#solo-dice-face.is-swiping {
  transition: none;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}

#play-card.is-swipe-right,
#solo-dice-face.is-swipe-right {
  box-shadow: inset 0 0 0 999px rgba(46, 160, 67, calc(0.12 * var(--swipe-t, 0)));
}

#play-card.is-swipe-left,
#solo-dice-face.is-swipe-left {
  box-shadow: inset 0 0 0 999px rgba(210, 153, 34, calc(0.14 * var(--swipe-t, 0)));
}

/* Direction locked (timer running → no Hecho): muted wash, not green/amber. */
#play-card.is-swipe-blocked,
#solo-dice-face.is-swipe-blocked {
  box-shadow: inset 0 0 0 999px rgba(160, 140, 145, calc(0.16 * var(--swipe-t, 0)));
}

/* After .is-swiping so fly/return transitions win if both classes overlap. */
#play-card.is-swipe-return,
#solo-dice-face.is-swipe-return {
  transition: transform 180ms ease-out;
}

#play-card.is-swipe-fly,
#solo-dice-face.is-swipe-fly {
  transition: transform 180ms ease-in, opacity 180ms ease-in;
}

#play-card.is-swipe-demo {
  animation: play-card-swipe-demo 1.8s ease-in-out forwards;
  pointer-events: none;
  transition: none;
  will-change: transform;
}

@keyframes play-card-swipe-demo {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0);
  }
  18% {
    transform: translateX(-31%) rotate(-2.5deg);
    box-shadow: inset 0 0 0 999px rgba(210, 153, 34, 0.14);
  }
  36% {
    transform: translateX(0) rotate(0deg);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0);
  }
  54% {
    transform: translateX(31%) rotate(2.5deg);
    box-shadow: inset 0 0 0 999px rgba(46, 160, 67, 0.12);
  }
  72% {
    transform: translateX(0) rotate(0deg);
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #play-card.is-swipe-demo {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep transition:none only while dragging (pointer follow). Fly/return
     stay animated — they are gesture confirmation, not decorative motion. */
  #play-card.is-swiping,
  #solo-dice-face.is-swiping {
    transition: none;
  }
}

body.is-play-mesa #signal-actions .btn-signal,
body.is-play-mesa #dice-signal-actions .btn-signal {
  min-height: 2.6rem;
  padding: 0.35rem 0.3rem;
  gap: 0.2rem;
  font-size: 0.72rem;
}

[hidden] {
  display: none !important;
}

.update-banner {
  /* Fixed so mesa / PWA never bury the prompt under scroll chrome. */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + var(--safe-t));
  background: linear-gradient(135deg, var(--burgundy), #8a2f48);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.update-banner[hidden] {
  display: none !important;
}

/* Keep mesa content below the fixed update strip. */
body:has(#update-banner:not([hidden])) .app {
  padding-top: calc(4.25rem + var(--safe-t));
}

.update-banner p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.update-banner .btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.update-banner-ver {
  opacity: 0.85;
  font-weight: 400;
}

.pwa-install-cta {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.55rem 0 0.25rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(201, 164, 106, 0.42);
  border-radius: calc(var(--radius) - 0.1rem);
  background:
    radial-gradient(
      ellipse 90% 80% at 0% 0%,
      rgba(201, 164, 106, 0.16),
      transparent 55%
    ),
    rgba(42, 21, 28, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.pwa-install-cta[hidden] {
  display: none !important;
}

.pwa-install-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.pwa-install-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.pwa-install-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: 0.01em;
}

.pwa-install-copy {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
}

.pwa-install-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-top: 0.25rem;
}

.pwa-install-actions .btn {
  min-height: 2.3rem;
  padding: 0.4rem 1rem;
  font-size: 0.88rem;
}

.pwa-install-dismiss {
  margin: 0;
  padding: 0.25rem 0.15rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.8;
}

.pwa-install-dismiss:hover,
.pwa-install-dismiss:focus-visible {
  color: var(--amber);
  opacity: 1;
}

.pwa-install-sheet .sheet-body {
  gap: 0.85rem;
  text-align: center;
}

.pwa-install-sheet-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.25rem;
}

.pwa-install-sheet-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.pwa-install-sheet-hero h2 {
  margin: 0.15rem 0 0;
  text-align: center;
}

.pwa-install-sheet-lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.pwa-install-steps {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}

.pwa-install-steps li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(201, 164, 106, 0.28);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}

.pwa-install-step-icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(201, 164, 106, 0.14);
  color: var(--amber);
}

.pwa-install-sheet-ok {
  width: 100%;
  margin-top: 0.25rem;
  min-height: 2.75rem;
}

.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  min-height: 100lvh;
  max-width: 28rem;
  margin: 0 auto;
  padding: calc(1rem + var(--safe-t)) 1rem calc(1rem + var(--safe-b));
}

.screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 2rem - var(--safe-t) - var(--safe-b));
  gap: 1rem;
}

.screen-center {
  justify-content: center;
  justify-content: safe center;
  text-align: center;
  gap: 1.25rem;
}

/* Vertical center only — keep form labels/fields left-aligned. */
.screen-vcenter {
  justify-content: center;
  justify-content: safe center;
}

/* Cartas + Dados «Su partida»: score centered above, actions docked bottom. */
.screen-end,
.screen-dice-end {
  justify-content: flex-start;
  gap: 0.75rem;
}

.screen-end .end-body,
.screen-dice-end .end-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  overflow: auto;
}

.screen-end .end-actions,
.screen-dice-end .end-actions {
  flex: 0 0 auto;
  width: min(100%, 22rem);
  align-self: center;
  margin-top: 0;
  padding-top: 0.35rem;
}

.end-hero {
  margin-bottom: 0.25rem;
}

.end-title {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.6rem);
  letter-spacing: 0.02em;
}

.end-names {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.end-score {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 16vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--amber);
}

.end-score-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.end-duration {
  margin: 0.35rem 0 0.5rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
}

.end-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.85rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.end-stats li {
  margin: 0;
}

.end-categories {
  margin: 0.25rem 0 0;
  max-width: 22rem;
  margin-inline: auto;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.end-favorite {
  margin: 0.35rem 0 0;
  max-width: 22rem;
  margin-inline: auto;
  font-size: 0.85rem;
  line-height: 1.4;
}

.hero {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.hero-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.15rem;
  object-fit: contain;
  /* Transparent mark-hero.png — no black plate / blend hack */
}

.hero-title {
  margin: 0.35rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 10vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.hero-en {
  margin: 0.35rem 0 0.5rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.9;
}

.hero-sub {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.scroll-panel {
  flex: 1;
  overflow: auto;
  padding-right: 0.25rem;
}

.scroll-panel h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 1.25rem 0 0.4rem;
  color: var(--amber);
}

.scroll-panel p,
.lede,
.closing {
  margin: 0 0 0.75rem;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
}

.lede {
  color: var(--ink);
}

.inst-guide {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.inst-block {
  margin: 0;
}

.inst-block h2 {
  margin-top: 0.85rem;
}

.inst-guide .lede {
  margin-bottom: 0.15rem;
}

.prep-list,
.inst-levels {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 300;
}

.inst-how-steps li + li {
  margin-top: 0.55rem;
}

.inst-how-steps li {
  color: var(--ink);
}

.inst-levels {
  color: var(--ink);
  font-size: 0.95rem;
}

.inst-levels li + li {
  margin-top: 0.25rem;
}

.callout {
  margin: 0.85rem 0 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--amber-soft);
  border-radius: var(--radius);
  background: rgba(61, 21, 34, 0.55);
  color: var(--ink);
  line-height: 1.45;
  font-size: 0.92rem;
}

.closing {
  font-style: italic;
  color: var(--ink);
}

.screen-footer,
.table-actions {
  display: flex;
  gap: 0.6rem;
  padding-top: 0.5rem;
}

.table-actions {
  justify-content: stretch;
}

.table-actions .btn,
.table-actions .btn-signal {
  flex: 1;
  min-width: 0;
}

.table-actions .btn:disabled,
.table-actions .btn-signal:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.signal-actions {
  gap: 0.5rem;
}

.table-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.4rem;
  margin: 0.15rem 0 0.1rem;
}

.table-nav-row .btn-undo {
  margin: 0;
}

.table-nav-row .btn-skip-nav {
  margin-left: auto;
}

.btn-signal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3.4rem;
  padding: 0.55rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}

.btn-signal i {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.btn-signal-go {
  position: relative;
  background: rgba(74, 140, 90, 0.28);
  border-color: rgba(122, 180, 130, 0.55);
}

.btn-signal-go i {
  background: #5cb86a;
}

.btn-signal-go.is-primary {
  background: rgba(74, 140, 90, 0.48);
  border-color: rgba(140, 200, 150, 0.85);
  box-shadow: 0 6px 18px rgba(40, 90, 50, 0.35);
}

.btn-signal-slow {
  background: rgba(196, 150, 60, 0.22);
  border-color: rgba(210, 170, 80, 0.5);
}

.btn-signal-slow i {
  background: #e0b34a;
}

.btn-signal-stop {
  background: rgba(160, 55, 60, 0.28);
  border-color: rgba(200, 90, 95, 0.55);
}

.btn-signal-stop i {
  background: #d45a5f;
}

.btn-signal:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.btn-undo {
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.55;
  cursor: pointer;
}

.btn-undo:hover {
  opacity: 1;
  color: var(--amber);
}

.btn-undo[hidden] {
  display: none;
}

.screen-header {
  padding-top: 0.35rem;
}

.screen-header h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0.35rem 0 0;
  font-weight: 600;
}

.btn-text-back {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.btn-text-back:hover,
.btn-text-back:focus-visible {
  color: var(--amber);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
  max-width: 22rem;
  margin-inline: auto;
  width: 100%;
}

.auth-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--amber-soft);
}

.auth-tab {
  flex: 1;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0.7rem;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.auth-tab.is-active {
  color: var(--ink);
  background: rgba(201, 164, 106, 0.22);
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-form input[type="email"],
.auth-form .auth-password-row input,
#auth-password-confirm-wrap input {
  font: inherit;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

/* Keep room for the eye toggle (overrides padding shorthand above) */
.auth-form .auth-password-row input {
  padding-right: 2.75rem;
}

.auth-error {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--danger);
}

.auth-status {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--checkin);
}

.auth-forgot-link {
  display: block;
  margin: 0.35rem auto 0;
  padding: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.auth-forgot-link:hover,
.auth-forgot-link:focus-visible {
  color: var(--ink);
}

#auth-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-password-row {
  position: relative;
  display: block;
}

.auth-password-row input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.auth-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem;
  min-height: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  opacity: 0.65;
  line-height: 0;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  opacity: 1;
  color: var(--ink);
}

.auth-password-toggle[aria-pressed="true"] {
  opacity: 1;
  color: var(--amber);
}

.auth-password-toggle .auth-eye {
  display: block;
  pointer-events: none;
}

.auth-password-toggle .auth-eye-off,
.auth-password-toggle[aria-pressed="true"] .auth-eye-open {
  display: none;
}

.auth-password-toggle[aria-pressed="true"] .auth-eye-off {
  display: block;
}

.auth-or {
  margin: 1.25rem auto 0.35rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-account-wrap {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.auth-account-value {
  margin: 0 auto 0.65rem;
  max-width: 22rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.auth-account-value[hidden],
.auth-account-wrap[hidden] {
  display: none !important;
}

.auth-account {
  margin: 0;
  border: 1px solid var(--amber-soft);
  border-radius: calc(var(--radius) - 0.15rem);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.auth-account-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--amber);
  text-align: center;
  user-select: none;
}

.auth-account-summary::-webkit-details-marker {
  display: none;
}

.auth-account[open] .auth-account-summary {
  border-bottom: 1px solid var(--amber-soft);
  color: var(--ink);
}

.auth-account .auth-form {
  margin-top: 0;
  padding: 0.85rem 0.85rem 1rem;
}

.auth-back-game {
  align-self: flex-start;
  margin: 0 0 0.35rem;
}

.auth-back-game[hidden] {
  display: none !important;
}

#auth-device-play {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 0.5rem auto 0;
  flex: 0 0 auto;
  align-self: center;
}

.auth-device-note {
  margin: 0.45rem auto 0;
  max-width: 22rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.auth-device-note[hidden] {
  display: none;
}

.account-save-cta {
  width: 100%;
  max-width: 22rem;
  margin: 1rem auto 0.25rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid rgba(201, 164, 106, 0.42);
  border-radius: calc(var(--radius) - 0.1rem);
  background:
    radial-gradient(
      ellipse 90% 80% at 0% 0%,
      rgba(201, 164, 106, 0.14),
      transparent 55%
    ),
    rgba(42, 21, 28, 0.72);
  text-align: left;
}

.account-save-cta[hidden] {
  display: none !important;
}

.account-save-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amber);
}

.account-save-copy {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
}

.account-save-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-top: 0.55rem;
}

.account-save-actions .btn {
  min-height: 2.3rem;
  padding: 0.4rem 1rem;
  font-size: 0.88rem;
}

#screen-instructions > .pwa-install-cta,
#screen-dice-setup .pwa-install-cta {
  margin: 0.35rem 0 0.15rem;
  max-width: 22rem;
  width: 100%;
  align-self: center;
}

.auth-account-summary[hidden] {
  display: none !important;
}

.levelup-l0 {
  margin: 0.5rem 0 0.75rem;
  text-align: left;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* Shared people block (Cartas + Dados setup). */
.setup-people {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.setup-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.setup-form input[type="text"] {
  font: inherit;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

.setup-hint {
  margin: -0.25rem 0 0.25rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.path-field .choice span {
  font-weight: 400;
}

.path-field .choice span strong {
  font-weight: 650;
}

.anatomy-field {
  margin-top: 0.15rem;
}

.setup-l0 {
  border-color: rgba(201, 164, 106, 0.45);
}

.setup-l0 .setup-hint {
  margin: 0 0 0.65rem;
  text-transform: none;
  letter-spacing: normal;
}

.setup-form fieldset {
  border: 1px solid var(--amber-soft);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0;
}

.setup-form legend {
  padding: 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* display:flex + native checkbox as flex child + wrapping text → Safari paints
   a ghost second checkbox. Keep input flex:none; text in its own flex item.
   `.setup-form .choice` beats `.setup-form label { flex-direction: column }`. */
.setup-form .choice,
.choice {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.6rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.4rem 0;
}

.choice > input[type="checkbox"],
.choice > input[type="radio"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--burgundy);
}

.choice > span {
  flex: 1 1 auto;
  min-width: 0;
}

.choice > span strong {
  font-weight: 600;
  color: var(--amber);
}

.btn {
  font: inherit;
  font-weight: 500;
  border: none;
  border-radius: 999px;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
  min-height: 3rem;
  flex: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--burgundy), #8a2f48);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(61, 21, 34, 0.45);
}

/* Dados Hecho — same green family as Cartas btn-signal-go. */
.btn-hecho-go {
  background: rgba(74, 140, 90, 0.48);
  border: 1px solid rgba(140, 200, 150, 0.85);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(40, 90, 50, 0.35);
}

.btn-hecho-go:disabled {
  opacity: 0.45;
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--amber-soft);
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--amber-soft);
  color: var(--ink);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}

/* Cartas mesa: corner absolute. Dados mesa reuses .btn-icon in the flex bar.
   Equal side gutters so turn chips sit on the true screen center
   (← Modos is wider than ☰; asymmetric padding used to shift the title). */
.table-header .btn-icon {
  position: absolute;
  right: 0;
  top: 0.1rem;
}

.table-header {
  position: relative;
  padding-right: 4.75rem;
  padding-left: 4.75rem;
  padding-top: 0.15rem;
  text-align: center;
}

.table-header .btn-text-back {
  position: absolute;
  left: 0;
  top: 0.15rem;
}

@media (max-width: 420px) {
  .table-header {
    padding-right: 4.25rem;
    padding-left: 4.25rem;
  }

  .turn-roles {
    margin-top: 0.35rem;
    gap: 0.35rem;
  }

  .role-chip {
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    gap: 0.3rem;
  }

  .role-avatar {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.75rem;
  }

  .role-name {
    font-size: 0.85rem;
  }

  .role-tag {
    font-size: 0.6rem;
  }

  .level-block {
    margin-top: 0.35rem;
  }

  .level-controls {
    gap: 0.5rem;
  }

  .level-cap-stack {
    min-width: 5.5rem;
  }

  .btn-level {
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
  }

  .level-cap-label {
    font-size: 0.7rem;
  }

  .level-progress {
    font-size: 0.58rem;
  }

  .filter-row {
    gap: 0.35rem;
  }

  .btn-level-filter {
    padding: 0.25rem 0.55rem;
    font-size: 0.68rem;
  }

  .signal-bar {
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    font-size: 0.6rem;
  }
}

@media (max-width: 360px) {
  .table-header {
    padding-right: 4rem;
    padding-left: 4rem;
  }

  .btn-icon {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 1rem;
  }

  .turn-roles {
    margin-top: 0.25rem;
    gap: 0.25rem;
  }

  .role-chip {
    padding: 0.15rem 0.3rem 0.15rem 0.15rem;
  }

  .role-avatar {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.68rem;
  }

  .role-name {
    font-size: 0.78rem;
  }

  .role-tag {
    display: none;
  }

  .role-sep {
    font-size: 0.9rem;
  }

  .level-block {
    margin-top: 0.2rem;
  }

  .level-controls {
    gap: 0.4rem;
  }

  .level-cap-stack {
    min-width: 0;
  }

  .btn-level {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.25rem;
  }

  .level-cap-label {
    font-size: 0.66rem;
  }

  .level-progress {
    font-size: 0.55rem;
  }

  .btn-level-filter {
    padding: 0.2rem 0.45rem;
    font-size: 0.62rem;
  }

  .signal-bar {
    font-size: 0.55rem;
    gap: 0.35rem 0.5rem;
    padding-top: 0;
  }
}

.turn-roles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

.role-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.role-chip.is-actor {
  opacity: 1;
}

.role-chip.is-receiver {
  opacity: 0.72;
}

.role-chip[data-player="a"] {
  background: var(--turn-a-soft);
  border-color: var(--turn-a);
}

.role-chip[data-player="b"] {
  background: var(--turn-b-soft);
  border-color: var(--turn-b);
}

.turn-roles.is-together .role-chip.is-actor,
.turn-roles.is-together .role-chip.is-receiver {
  opacity: 1;
  background: rgba(122, 158, 142, 0.16);
  border-color: rgba(122, 158, 142, 0.35);
}

.role-avatar {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bg0);
  background: var(--turn-a);
  flex-shrink: 0;
}

.role-chip[data-player="a"] .role-avatar {
  background: var(--turn-a);
  color: var(--bg0);
}

.role-chip[data-player="b"] .role-avatar {
  background: var(--turn-b);
  color: var(--bg0);
}

.role-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.15;
}

.role-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--muted);
}

.role-sep {
  color: var(--amber);
  font-size: 1.1rem;
  opacity: 0.85;
}

body.dim-mode {
  filter: brightness(0.72) saturate(0.92);
}

.level-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.5rem;
}

.level-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.level-cap-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 6.5rem;
  text-align: center;
}

.btn-level {
  font-family: var(--font-display);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  line-height: 1;
  font-size: 1.55rem;
  font-weight: 500;
  flex: 0 0 auto;
  min-height: 0;
  opacity: 0.7;
  transition: opacity 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn-level:hover:not(:disabled) {
  opacity: 1;
}

.btn-level:active:not(:disabled) {
  transform: scale(0.94);
}

.btn-level:disabled {
  opacity: 0.2;
  cursor: default;
  color: var(--muted);
}

.level-cap-label {
  display: block;
  text-align: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.level-progress {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
  opacity: 0.75;
}

.levelup-rules {
  margin-top: 0.35rem !important;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--amber-soft);
  border-radius: 0.65rem;
  color: var(--ink) !important;
  opacity: 0.95 !important;
  text-align: left;
  line-height: 1.45;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.sheet-choice {
  margin: 0.35rem 0;
  width: 100%;
}

.btn-level-filter {
  font-family: var(--font-body);
  margin: 0;
  padding: 0.15rem 0.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  cursor: pointer;
  flex: 0;
  min-height: 0;
  transition: opacity 160ms ease, color 160ms ease;
}

.btn-level-filter:hover {
  opacity: 0.9;
  color: var(--amber);
}

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

.screen-table .card-stage {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 1.15rem 1.2rem 1rem;
  border-radius: calc(var(--radius) + 0.25rem);
  border: 1px solid var(--amber);
  background:
    linear-gradient(160deg, rgba(42, 21, 28, 0.95), rgba(18, 10, 12, 0.98));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  animation: card-in 280ms ease-out;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.card[data-turn="a"] {
  border-color: var(--turn-a);
  background:
    linear-gradient(
      160deg,
      var(--turn-a-wash) 0%,
      rgba(208, 137, 154, 0.16) 52%,
      transparent 92%
    ),
    linear-gradient(160deg, rgba(42, 21, 28, 0.95), rgba(18, 10, 12, 0.98));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--turn-a-soft),
    inset 0 0 0 1px var(--turn-a-soft);
}

.card[data-turn="b"] {
  border-color: var(--turn-b);
  background:
    linear-gradient(
      160deg,
      var(--turn-b-wash) 0%,
      rgba(110, 158, 184, 0.16) 52%,
      transparent 92%
    ),
    linear-gradient(160deg, rgba(42, 21, 28, 0.95), rgba(18, 10, 12, 0.98));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 0 1px var(--turn-b-soft),
    inset 0 0 0 1px var(--turn-b-soft);
}

#card-scroll,
.card-scroll {
  /* 0% basis: grow fills stage; auto basis left empty gap under timer */
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

/* Prompt grows; «Nuevo desafío» stays pinned under it (no jump while text spins). */
.card-prompt-slot {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-scroll:has(.challenge-rerolls:not([hidden])) {
  justify-content: flex-start;
}

/* Timed cards: prompt centered in the free band; clock glued above meta. */
.card:has(#timer-panel:not([hidden])) #card-scroll {
  flex: 1 1 0%;
  min-height: 0;
  justify-content: center;
  padding-block: 0.35rem 0.15rem;
}

.card:has(#timer-panel:not([hidden]))
  #card-scroll:has(.challenge-rerolls:not([hidden])) {
  justify-content: flex-start;
}

/* Clock foot: same chrome as Dados (bordered row · phase+↻ · clock · ▶⏸). */
.card:has(#timer-panel:not([hidden])) #timer-panel {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}

.card-scroll .challenge-rerolls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0.25rem 0.5rem;
  margin: 0;
  width: 100%;
}

.card-scroll .challenge-rerolls[hidden],
.card-scroll .challenge-rerolls.is-prep-hidden {
  display: none;
}

.card-scroll .btn-challenge-reroll {
  margin: 0;
  padding: 0.15rem 0.4rem;
  min-height: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  cursor: pointer;
}

.card-scroll .btn-challenge-reroll:hover {
  opacity: 1;
  color: var(--amber);
}

.card-scroll .btn-challenge-reroll[hidden] {
  display: none;
}

/* Modifier (Otra tirada) rides with the timer foot — only one auto margin. */
.card:has(#timer-panel:not([hidden])):has(#modifier-panel:not([hidden]))
  #modifier-panel {
  margin-top: auto;
  padding-top: 0.35rem;
}

.card:has(#timer-panel:not([hidden])):has(#modifier-panel:not([hidden]))
  #timer-panel {
  margin-top: 0.25rem;
  padding-top: 0;
}

.card:has(#timer-panel:not([hidden])) .card-meta {
  flex: 0 0 auto;
  margin-top: 0;
}

.card[data-type="checkin"] {
  border-color: var(--checkin);
}

.card[data-type="wildcard"] {
  border-color: var(--wildcard);
}

.card-brand {
  margin: 0;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}

.card-eyebrow {
  margin: -0.75rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.body-dice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.65rem;
  flex: 0 1 auto;
  min-height: 4.5rem;
  width: 100%;
}

.body-dice-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  max-width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}

.body-dice-x {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--amber);
  opacity: 0.85;
}

.body-dice--solo .body-dice-face {
  min-width: min(100%, 14rem);
  padding: 0.85rem 1.1rem;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
}

.body-dice.is-rolling .body-dice-face {
  animation: dice-tick 95ms ease-in-out infinite;
  opacity: 0.65;
  filter: blur(0.4px);
}

.body-dice.is-landed .body-dice-face {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-soft);
  animation: dice-land 420ms cubic-bezier(0.22, 1.2, 0.36, 1);
  filter: none;
  opacity: 1;
}

/* In-place slot feel: opacity only — no scale/translate (avoids mesa jump).
   No filter:blur on Dados meta — WebKit + shell-wash painted a black seam
   across Pasión/Lugar while re-rolling. */
.solo-dice-card.is-rolling .solo-dice-meta-value,
.solo-dice-card.is-rolling #solo-timer-display {
  opacity: 0.62;
}

.solo-dice-card.is-rolling #solo-dice-result,
#play-card.is-rolling #card-text,
#play-card.is-rolling #timer-display,
#play-card.is-mod-spinning #card-text {
  opacity: 0.62;
  filter: blur(0.45px);
}

/* Edge chrome ticks with the face — dim like other rolling slots (no blur). */
.solo-dice-card.is-rolling .solo-dice-face > .card-ref,
.solo-dice-card.is-rolling .solo-dice-face > .solo-dice-card-meta,
#play-card.is-rolling .card-ref,
#play-card.is-rolling .card-meta {
  opacity: 0.55;
}

#play-card.is-rolling #card-text,
#play-card.is-mod-spinning #card-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  min-height: 1.2em;
  animation: dice-tick 95ms ease-in-out infinite;
}

#play-card.is-rolling #card-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.85;
}

#play-card.is-landed #card-text {
  animation: solo-dice-land 220ms ease-out;
}

.solo-dice-card.is-rolling .solo-dice-meta-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desafío: spin in place — band already fills the free space; don’t restyle box. */
.solo-dice-card.is-rolling
  .solo-dice-challenge
  .solo-dice-meta-row--wide
  .solo-dice-meta-value {
  white-space: normal;
  text-overflow: unset;
  overflow: hidden;
}

.solo-dice-card.is-rolling #solo-dice-result:not(:empty) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  min-height: 6.5em;
}

.solo-dice-card.is-rolling #solo-dice-posture-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.solo-dice-card.is-landed .solo-dice-meta-value,
.solo-dice-card.is-landed #solo-dice-result {
  animation: solo-dice-land 220ms ease-out;
}

@keyframes solo-dice-land {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solo-dice-card.is-rolling .solo-dice-meta-value,
  .solo-dice-card.is-rolling #solo-dice-result,
  .solo-dice-card.is-rolling #solo-timer-display,
  .solo-dice-card.is-rolling .solo-dice-face > .card-ref,
  .solo-dice-card.is-rolling .solo-dice-face > .solo-dice-card-meta,
  #play-card.is-rolling #card-text,
  #play-card.is-rolling #timer-display,
  #play-card.is-rolling .card-ref,
  #play-card.is-rolling .card-meta,
  #play-card.is-mod-spinning #card-text {
    opacity: 1;
  }
  #play-card.is-rolling #card-pose-title,
  #play-card.is-mod-spinning #card-pose-title,
  .solo-dice-card.is-rolling #solo-dice-pose-title {
    opacity: 0;
    visibility: hidden;
  }
  .solo-dice-card.is-landed .solo-dice-meta-value,
  .solo-dice-card.is-landed #solo-dice-result,
  #play-card.is-landed #card-text,
  #play-card.is-landed #card-pose-title,
  .solo-dice-card.is-landed #solo-dice-pose-title {
    animation: none;
  }
}

.card-text.is-dice-pending {
  flex: 0;
  min-height: 0;
  opacity: 0;
}

.card-text.dice-settle {
  animation: dice-phrase-in 380ms ease-out;
}

.card-ref {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0.75;
  line-height: 1.1;
  pointer-events: none;
  z-index: 2;
}

.card-ref-kind {
  text-transform: uppercase;
}

/* No box when empty — # ref still positions against .card */
.card-silhouette {
  display: contents;
}

.card-silhouette.has-media {
  display: block;
  position: relative;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.card-silhouette.has-media .card-ref {
  /* Keep top-right on silhouette cards too (same as text prompts). */
  top: 0.4rem;
  right: 0.45rem;
  left: auto;
  transform: none;
  z-index: 1;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: rgba(243, 232, 228, 0.42);
  opacity: 1;
}

.modifier-panel {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.25rem;
  width: 100%;
}

.modifier-panel .btn {
  min-width: max-content;
  flex: none;
}

.modifier-panel.is-dice {
  margin-top: 0.35rem;
}

/* Dice mesa: prompt scrolls in the middle; «Otra tirada» stays at the foot. */
.card:has(#modifier-panel:not([hidden])) #card-scroll,
.card:has(#body-dice:not([hidden])) #card-scroll {
  flex: 1 1 0%;
  min-height: 0;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
}

.card:has(#modifier-panel:not([hidden])) #modifier-panel {
  margin-top: auto;
  padding-top: 0.35rem;
}

.card:has(#modifier-panel:not([hidden])) #modifier-panel .btn {
  width: min(100%, 16rem);
}

.modifier-panel .btn-dice-reroll {
  min-width: auto;
  padding: 0.35rem 0.75rem;
  min-height: 0;
  border: 1px solid var(--amber-soft);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: transparent;
  opacity: 0.85;
}

.modifier-panel .btn-dice-reroll:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(201, 164, 106, 0.08);
  opacity: 1;
}

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

.timer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  width: 100%;
}

/* Cartas: mirror Dados solo-timer-panel chrome. */
.carta-timer-panel.timer-panel,
.carta-timer-panel {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 0;
  width: 100%;
  min-height: 0;
  padding: 0.4rem 0.55rem;
  gap: 0.15rem;
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 30%,
      rgba(107, 36, 56, 0.22),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.04);
  text-align: center;
  box-sizing: border-box;
}

.carta-timer-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.carta-timer-head {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.carta-timer-panel .timer-phase {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--amber);
  opacity: 0.85;
  white-space: nowrap;
}

.carta-timer-panel .timer-phase[hidden] {
  display: none;
}

.carta-timer-reroll.is-prep-hidden {
  visibility: hidden;
  pointer-events: none;
}

.carta-timer-panel .timer-display {
  margin: 0;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.carta-timer-panel .timer-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

/* Shared Cartas + Dados icon chrome (play/pause glyphs + ↻). */
.carta-timer-panel .timer-actions .btn.timer-icon-btn,
.carta-timer-panel .timer-actions .btn.carta-timer-reroll,
.solo-timer-panel .timer-actions .btn.timer-icon-btn {
  width: 2.15rem;
  min-width: 2.15rem;
  max-width: 2.15rem;
  height: 2.15rem;
  min-height: 2.15rem;
  padding: 0;
  flex: 0 0 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: auto;
  color: var(--amber);
}

/* Flat line-art play/pause — avoid iOS emoji ▶/⏸ that break the chrome. */
.timer-play-glyph {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-style: solid;
  border-width: 0.34rem 0 0.34rem 0.55rem;
  border-color: transparent transparent transparent currentColor;
}

.timer-pause-glyph {
  display: block;
  width: 0.7rem;
  height: 0.82rem;
  box-sizing: border-box;
  border-left: 0.22rem solid currentColor;
  border-right: 0.22rem solid currentColor;
  background: transparent;
}

.carta-timer-panel .timer-actions .btn.timer-start-btn {
  width: auto;
  min-width: 0;
  max-width: none;
  height: 2.15rem;
  min-height: 2.15rem;
  padding: 0 0.7rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}

#btn-pause.timer-icon-btn,
#btn-solo-pause.timer-icon-btn {
  font-size: 1rem;
  line-height: 1;
}

#btn-pause.timer-icon-btn.is-play-icon,
#btn-pause.timer-icon-btn.is-pause-icon,
#btn-solo-pause.timer-icon-btn.is-play-icon,
#btn-solo-pause.timer-icon-btn.is-pause-icon,
#btn-timer.timer-icon-btn.is-play-icon,
#btn-solo-timer.timer-icon-btn.is-play-icon {
  font-size: 0;
}

.carta-timer-panel .btn[hidden],
.carta-timer-panel .carta-timer-reroll[hidden] {
  display: none;
}

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

.timer-phase {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: center;
  white-space: nowrap;
}

.timer-phase[hidden] {
  display: none;
}

.timer-panel.is-prep .timer-display {
  color: var(--amber);
}

.timer-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

.timer-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.timer-panel .btn {
  /* none = 0 0 auto. flex:0 is 0 1 0% and, with min-width:0, shrinks the label away. */
  flex: none;
  pointer-events: auto;
}

.timer-panel .btn[hidden] {
  display: none;
}

.timer-panel.is-running .timer-display {
  color: var(--ink);
}

.timer-panel.is-prep.is-running .timer-display {
  color: var(--amber);
}

.timer-panel.is-paused .timer-display {
  color: var(--muted);
  opacity: 0.85;
}

.timer-panel.is-done .timer-display {
  color: var(--checkin);
}

.card-image {
  display: block;
  align-self: center;
  width: auto;
  max-width: 100%;
  max-height: min(36dvh, 16rem);
  margin: 0 auto;
  padding: 0.85rem;
  object-fit: contain;
  background: var(--silhouette-plate);
  border-radius: 0.85rem;
  /* Dark SVG → soft rose ink on the deep plate. */
  filter: var(--silhouette-art);
}

.card-silhouette.has-media .card-image {
  align-self: unset;
  margin: 0;
}

.pose-title {
  margin: 0 0 0.35rem;
  /* Side gutters clear absolute #ref (top-right) on Cartas + Dados. */
  padding: 0.15rem 2.6rem 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-family: var(--font-body, inherit);
  font-size: clamp(0.72rem, 2.2vmin + 0.35rem, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: rgba(243, 232, 228, 0.78);
}

.pose-title[hidden] {
  display: none !important;
}

/* Hide caption while the face is still rolling — title would spoil the land. */
#play-card.is-rolling #card-pose-title,
#play-card.is-mod-spinning #card-pose-title,
.solo-dice-card.is-rolling #solo-dice-pose-title {
  opacity: 0;
  visibility: hidden;
}

#play-card.is-landed #card-pose-title,
.solo-dice-card.is-landed #solo-dice-pose-title {
  animation: solo-dice-land 220ms ease-out;
}

.solo-dice-posture .pose-title {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 2.6rem 0.25rem;
  max-width: 100%;
  z-index: 1;
}

.card.has-image .card-text {
  flex: 0;
  font-size: clamp(0.92rem, 3.2vmin + 0.25rem, 1.25rem);
}

.card-text {
  margin: 0;
  flex: 0 1 auto;
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.6vmin + 0.28rem, 1.45rem);
  line-height: 1.35;
  font-weight: 400;
}

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

.card-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

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

.card-actions .btn {
  min-width: 0;
  flex: 1 1 8rem;
  font-size: 0.8rem;
}

.card-safety {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.65rem;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--muted);
  border: 1px solid rgba(196, 92, 92, 0.35);
  border-radius: 0.55rem;
  background: rgba(196, 92, 92, 0.08);
}

.btn-fav {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  z-index: 2;
  margin: 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(18, 10, 12, 0.35);
  color: var(--muted);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 0;
}

.btn-fav:hover {
  color: var(--amber);
  border-color: var(--amber-soft);
}

.btn-fav[hidden] {
  display: none;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-category {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  opacity: 0.85;
}

.signal-bar {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.15rem 0 0.1rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

.signal-legend {
  opacity: 0.65;
  pointer-events: none;
}

.signal-legend .signal-stop {
  pointer-events: auto;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  opacity: 1;
}

.signal-legend .signal-stop:focus-visible {
  outline: 1px solid var(--amber-soft);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.signal {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.signal i {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

.signal-go i {
  background: #6fbf7a;
}

.signal-slow i {
  background: #d4a84b;
}

.signal-stop i {
  background: #c45c5c;
}

.mode-line,
.streak-line {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.85;
}

.mode-line[hidden],
.streak-line[hidden] {
  display: none;
}

.table-entry-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0.35rem;
}

.btn-table-entry {
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: transparent;
  border: 1px solid var(--amber-soft);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.9;
}

.btn-table-entry:hover,
.btn-table-entry:focus-visible {
  opacity: 1;
  background: rgba(201, 164, 106, 0.12);
  outline: none;
}

.card.is-held {
  opacity: 0.55;
  pointer-events: none;
}

.card.is-rating .card-meta {
  opacity: 0.45;
}

/*
 * Rating on a timed card: drop clock + dice chrome so the prompt stays readable
 * and the rate strip occupies the foot the timer used.
 */
.card.is-rating #timer-panel,
.card.is-rating #modifier-panel,
.card.is-rating #body-dice {
  display: none !important;
}

.card.is-rating #card-scroll {
  flex: 1 1 0%;
  min-height: 0;
  justify-content: center;
}

.card.is-rating .rate-bar:not([hidden]) {
  flex: 0 0 auto;
  margin-top: auto;
}

.streak-line.is-complete {
  color: var(--checkin, #9ec5a0);
  opacity: 1;
}

.dual-body .dual-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.85rem 0.75rem;
  border: 1px solid var(--amber-soft);
  margin-bottom: 0.35rem;
}

.dual-opt-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}

.dual-opt-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  white-space: normal;
  text-align: left;
}

.filter-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.35rem;
  max-height: none;
  overflow: visible;
  margin: 0 0 0.15rem;
}

.secret-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.secret-field select,
.secret-field textarea {
  font: inherit;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  padding: 0.65rem 0.75rem;
  resize: vertical;
}

.level-dots {
  letter-spacing: 0.2em;
  color: var(--amber);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: auto;
  flex: 1;
}

.history-list li {
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid var(--amber-soft);
  background: rgba(255, 255, 255, 0.03);
}

.history-list .who {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.25rem;
}

.history-list .history-dice {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--amber);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.history-list .skipped {
  color: var(--muted);
  font-size: 0.75rem;
}

.favorites-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(50dvh, 22rem);
  overflow: auto;
}

.favorites-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid var(--amber-soft);
  background: rgba(255, 255, 255, 0.03);
}

.favorites-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.favorites-actions {
  display: flex;
  gap: 0.4rem;
}

.favorites-actions .btn {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  padding: 0.45rem 0.5rem;
}

.muted {
  color: var(--muted);
  font-weight: 300;
}

.stack-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sheet {
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0;
  margin: auto 0 0;
  width: min(100%, 28rem);
  max-width: 100%;
  /* Stay below Dynamic Island / notch when the sheet grows tall (PWA). */
  max-height: calc(100dvh - var(--safe-t) - 0.35rem);
  background: var(--bg2);
  color: var(--ink);
}

.sheet.sheet-center {
  margin: auto;
  border-radius: var(--radius);
  width: min(calc(100% - 2rem), 22rem);
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 1.25rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.table-footer-slot {
  display: flex;
  flex-direction: column;
  min-height: 3.4rem;
  justify-content: flex-end;
}

.rate-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.15rem 0 0;
  min-height: 4.6rem;
}

/*
 * Don't reserve height while hidden: a visibility:hidden strip stole ~4.6rem,
 * left short prompts high/off-center, and with padding hacks forced scroll
 * despite empty space. Opening the strip may nudge layout — acceptable.
 */
.rate-bar[hidden] {
  display: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.rate-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.rate-bar-label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-align: center;
}

.rate-countdown {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  color: var(--amber);
  pointer-events: none;
}

.rate-countdown[hidden] {
  display: none;
}

.rate-bar-actions {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.btn-rate {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.btn-rate-emoji {
  font-size: 1.55rem;
  line-height: 1;
}

.btn-rate:hover {
  border-color: var(--amber-soft, var(--amber));
}

.btn-rate-love {
  border-color: rgba(74, 140, 90, 0.55);
  background: rgba(74, 140, 90, 0.18);
}

.btn-rate-meh {
  border-color: rgba(160, 55, 60, 0.45);
  background: rgba(160, 55, 60, 0.14);
}

.signal-actions[hidden] {
  display: none;
}

.signal-actions .btn-signal.is-rate-locked-btn {
  pointer-events: none;
}

.signal-actions .btn-signal.is-rate-locked-btn > i,
.signal-actions .btn-signal.is-rate-locked-btn > .btn-done-label {
  opacity: 0.22;
}

/* Dim is a modal dialog under sheets (top layer) so swaps never flash the mesa. */
.sheet::backdrop {
  background: transparent;
}

dialog.sheet-scrim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

dialog.sheet-scrim::backdrop {
  background: transparent;
}

.sheet-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem calc(1rem + var(--safe-b));
  gap: 0.35rem;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-body h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}

/* Compact checkbox grids inside content-filter subsheets. */
.filter-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.35rem;
  margin: 0.15rem 0 0.35rem;
}

#dialog-content-include .sheet-choice,
#dialog-content-limits .sheet-choice,
#dialog-content-categories .sheet-choice {
  margin: 0;
  padding: 0.35rem 0.15rem;
  font-size: 0.92rem;
  gap: 0.45rem;
}

.sheet-label {
  margin: 0.65rem 0.5rem 0.1rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.75;
}

.sheet-label:first-of-type {
  margin-top: 0.15rem;
}

.sheet-item {
  font: inherit;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 0.7rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.sheet-item:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.sheet-item.is-current {
  outline: 1px solid var(--amber);
  background: rgba(201, 164, 106, 0.14);
  color: var(--ink);
}
.sheet-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sheet-item:focus-visible {
  outline: 1px solid var(--amber-soft);
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.06);
}
.sheet-item.is-current:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 2px;
  background: rgba(201, 164, 106, 0.18);
}

.sheet-cancel {
  color: var(--muted);
  margin-top: 0.35rem;
}

.menu-status {
  margin: -0.15rem 0 0.65rem !important;
  text-align: center;
}

.sheet-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.sheet-field input {
  font: inherit;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

.sheet-note {
  margin: 0.25rem 0.5rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: max(1.5rem, var(--safe-t)) 1.5rem max(2rem, var(--safe-b));
  text-align: center;
  pointer-events: none;
}

.boot-loader[hidden] {
  display: none;
}

.boot-loader-mark {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  object-fit: contain;
}

.boot-loader-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.boot-loader-spinner {
  width: 1.85rem;
  height: 1.85rem;
  margin: 0.35rem 0 0.15rem;
  border: 2px solid var(--amber-soft);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: boot-spin 0.75s linear infinite;
}

.boot-loader-copy {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

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

@media (prefers-reduced-motion: reduce) {
  .boot-loader-spinner {
    animation: none;
    border-top-color: var(--amber-soft);
    opacity: 0.7;
  }
}

/* Corner badge only on lobby screens — hidden on mesa (clashed with Hecho). */
.app-version {
  position: fixed;
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  bottom: max(0.45rem, var(--safe-b));
  z-index: 5;
  margin: 0;
  padding: 0.2rem 0.35rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.4;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.app-version[hidden],
body.is-play-mesa .app-version {
  display: none;
}

.app-version-note {
  margin: 0.85rem 0 0.15rem !important;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  margin: 0;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(28, 18, 22, 0.94);
  border: 1px solid var(--amber-soft, rgba(212, 165, 116, 0.45));
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.app-toast[hidden] {
  display: none;
}

.load-error {
  position: fixed;
  inset: auto 1rem 1rem;
  padding: 1rem;
  background: var(--burgundy-deep);
  border: 1px solid var(--danger);
  border-radius: 0.75rem;
  color: var(--ink);
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dice-tick {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
  }
}

@keyframes dice-land {
  0% {
    transform: scale(1.12) translateY(-8px);
    opacity: 0.75;
  }
  55% {
    transform: scale(0.97) translateY(2px);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes dice-phrase-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Modos / Solo dados —— */
.screen-choose .hero {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Prompt for the mode cards — not a brand subtitle */
.choose-prompt {
  margin: 1.75rem auto 0.85rem;
  max-width: 22rem;
  padding: 0 1.25rem;
  text-align: center;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.choose-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0.25rem auto 1.25rem;
  max-width: 22rem;
  padding: 0 1.25rem;
}

.choose-account .auth-forgot-link {
  margin: 0;
}

.mode-pick {
  display: grid;
  gap: 1rem;
  width: min(100%, 22rem);
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--amber-soft);
  border-radius: var(--radius);
  background: rgba(42, 21, 28, 0.65);
  color: var(--ink);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease,
    background-color 0.15s ease;
}

.mode-card:hover {
  border-color: var(--amber);
  background: rgba(61, 21, 34, 0.85);
}

.mode-card:active {
  transform: scale(0.98);
}

.mode-card-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.15;
}

.mode-card-sub {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.screen-dice {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bg0);
  background-image:
    radial-gradient(
      ellipse 90% 60% at 50% 100%,
      rgba(61, 21, 34, 0.55),
      transparent 60%
    ),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2));
}

body.is-play-mesa .screen-dice {
  min-height: 0;
  /* Full-bleed paint inside .app (no side gutters). */
  width: 100%;
}

.dice-mesa-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: calc(0.75rem + var(--safe-t)) 1rem 0.5rem;
}

body.is-play-mesa .dice-mesa-header {
  padding-top: 0.35rem;
  gap: 0.3rem;
}

.dice-mesa-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Dados reuses Cartas .turn-roles chips (actúa → recibe). */
#dice-turn-roles {
  margin: 0.2rem 0 0;
}

/* Intensidad under turn chips — same ‹ label › pattern as Cartas level. */
.dice-intensity-block {
  margin-top: 0.1rem;
}

.dice-intensity-cap {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}

.dice-intensity-cap:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.dice-intensity-cap:active {
  opacity: 0.85;
}

.dice-level-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.dice-level-btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.dice-level-label {
  margin: 0;
  min-width: 9rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.dice-level-short {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.dice-mesa {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem 0.75rem;
  min-height: 0;
  overflow: hidden;
}

.dice-mesa:has(#solo-dice-card:not([hidden])) {
  justify-content: flex-start;
}

.dice-tap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: min(100%, 18rem);
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(42dvh, 16rem);
  padding: 1.1rem 1.1rem;
  border: 2px dashed var(--amber-soft);
  border-radius: 1.35rem;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 40%,
      rgba(107, 36, 56, 0.35),
      transparent 70%
    ),
    rgba(26, 15, 18, 0.55);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
  /* No :hover — sticky hover on touch (and bogus hover:hover matches) made
     Tirar need 2 taps after Hecho. Active press feedback is enough. */
  touch-action: manipulation;
  transition: transform 0.12s ease, background-color 0.15s ease;
}

.dice-tap:active {
  transform: scale(0.98);
  border-color: var(--amber);
}

.solo-dice-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: min(100%, 18rem);
  margin: 0 auto;
  padding: 1.1rem 1rem;
  text-align: center;
}

.solo-dice-empty[hidden] {
  display: none !important;
}

.solo-dice-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--amber);
}

.solo-dice-empty-copy {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.solo-dice-empty .btn {
  width: 100%;
  max-width: 16rem;
}

.dice-tap-mark {
  color: var(--amber);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
}

.dice-tap-label {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  font-weight: 600;
}

.solo-dice-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  width: min(100%, 22rem);
}

.solo-dice-card[hidden] {
  display: none !important;
}

/*
 * Same two-band layout for silhouette AND text prompts:
 * upper framed face (fixed share) + lower meta/timer scroll.
 */
.solo-dice-face {
  flex: 1 1 52%;
  min-height: 0;
  width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--amber-soft);
  border-radius: calc(var(--radius) + 0.1rem);
  background:
    linear-gradient(160deg, rgba(42, 21, 28, 0.88), rgba(18, 10, 12, 0.94));
  box-shadow: inset 0 0 0 1px rgba(201, 164, 106, 0.08);
  overflow: hidden;
  /* Swipe surface: isolate transform from Pasión/Lugar below. */
  position: relative;
  z-index: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Same A rose / B blue wash as Cartas .card[data-turn]. */
.solo-dice-face[data-turn="a"] {
  border-color: var(--turn-a);
  background:
    linear-gradient(
      160deg,
      var(--turn-a-wash) 0%,
      rgba(208, 137, 154, 0.16) 52%,
      transparent 92%
    ),
    linear-gradient(160deg, rgba(42, 21, 28, 0.88), rgba(18, 10, 12, 0.94));
  box-shadow:
    inset 0 0 0 1px var(--turn-a-soft),
    0 0 0 1px var(--turn-a-soft);
}

.solo-dice-face[data-turn="b"] {
  border-color: var(--turn-b);
  background:
    linear-gradient(
      160deg,
      var(--turn-b-wash) 0%,
      rgba(110, 158, 184, 0.16) 52%,
      transparent 92%
    ),
    linear-gradient(160deg, rgba(42, 21, 28, 0.88), rgba(18, 10, 12, 0.94));
  box-shadow:
    inset 0 0 0 1px var(--turn-b-soft),
    0 0 0 1px var(--turn-b-soft);
}

/*
 * Silhouette: deep plate (keeps the mysterious mesa) + --silhouette-art so
 * burgundy SVGs lift as soft ink. Edge-to-edge; turn wash stays muted.
 */
.solo-dice-face:has(#solo-dice-posture-fig:not([hidden])) {
  padding: 0;
  background:
    linear-gradient(160deg, rgba(42, 21, 28, 0.55), transparent 70%),
    var(--silhouette-plate);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 106, 0.1);
}

.solo-dice-face[data-turn="a"]:has(#solo-dice-posture-fig:not([hidden])) {
  background:
    linear-gradient(
      160deg,
      var(--turn-a-wash) 0%,
      rgba(208, 137, 154, 0.12) 52%,
      transparent 92%
    ),
    var(--silhouette-plate);
  box-shadow:
    inset 0 0 0 1px var(--turn-a-soft),
    0 0 0 1px var(--turn-a-soft);
}

.solo-dice-face[data-turn="b"]:has(#solo-dice-posture-fig:not([hidden])) {
  background:
    linear-gradient(
      160deg,
      var(--turn-b-wash) 0%,
      rgba(110, 158, 184, 0.12) 52%,
      transparent 92%
    ),
    var(--silhouette-plate);
  box-shadow:
    inset 0 0 0 1px var(--turn-b-soft),
    0 0 0 1px var(--turn-b-soft);
}

.solo-dice-face:has(#solo-dice-posture-fig:not([hidden])) .solo-dice-posture {
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
}

.solo-dice-face:has(#solo-dice-posture-fig:not([hidden])) #solo-dice-posture-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: var(--silhouette-art);
}

.dice-tap[hidden] {
  display: none !important;
}

.solo-dice-scroll {
  flex: 1 1 40%;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.45rem;
  /* Same width as the silhouette face above (card is already capped). */
  width: 100%;
  margin-inline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /*
   * Match Tiempo → signal buttons:
   * scroll pb + mesa pb + screen gap + footer pt.
   */
  padding-top: calc(0.55rem + 0.35rem + 0.55rem + 0.45rem);
  padding-bottom: 0.55rem;
}

/*
 * Desafío fills free band under the face when present (flex:1). When absent,
 * collapse the scroll band so the face grows down to Pasión/Lugar/Tiempo.
 */
.solo-dice-challenge {
  --solo-desafio-lines: 3;
  --solo-desafio-line: 1.3em;
  --solo-desafio-value-cap: calc(
    var(--solo-desafio-lines) * var(--solo-desafio-line)
  );
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.solo-dice-scroll:not(:has(.solo-dice-challenge:not([hidden]))) {
  flex: 0 0 auto;
}

.solo-dice-challenge .solo-dice-meta-row {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.solo-dice-fixed {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}

.solo-dice-result {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.4vmin + 0.25rem, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  align-self: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 100%;
}

.solo-dice-result:empty {
  display: none;
}

.solo-dice-result.solo-result-in {
  animation: dice-phrase-in 380ms ease-out;
}

.solo-dice-posture {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.solo-dice-posture[hidden] {
  display: none !important;
}

/* Dados: #214P top-right on every face (silhouette + text). */
.solo-dice-face > .card-ref {
  top: 0.45rem;
  right: 0.55rem;
  left: auto;
  transform: none;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: rgba(243, 232, 228, 0.5);
  opacity: 1;
}

.solo-dice-face > .card-ref[hidden] {
  display: none !important;
}

/*
 * Dados face footer — same chrome as Cartas .card-meta:
 * category bottom-left, level dots bottom-right (over silhouette too).
 */
.solo-dice-face > .solo-dice-card-meta {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.4rem;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(243, 232, 228, 0.55);
}

.solo-dice-face > .solo-dice-card-meta .card-category {
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.solo-dice-face > .solo-dice-card-meta .level-dots {
  flex: 0 0 auto;
  color: var(--amber);
  opacity: 0.9;
}

/* Leave room so prompt copy does not sit under the footer. */
.solo-dice-face:not(:has(#solo-dice-posture-fig:not([hidden]))) {
  padding-bottom: 1.7rem;
}

.solo-dice-posture img,
#solo-dice-posture-img {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  background: transparent;
  filter: var(--silhouette-art);
}

.solo-dice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--ink);
}

.solo-dice-meta[hidden] {
  display: none !important;
}

.solo-dice-meta-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  min-height: 2.9rem;
  /* Room for absolute Pasión/Lugar label so value never overlaps it. */
  padding: 1.45rem 0.5rem 0.4rem;
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 30%,
      rgba(107, 36, 56, 0.22),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.04);
  text-align: center;
}

.solo-dice-meta-row--wide {
  grid-column: 1 / -1;
  justify-content: flex-start;
  min-height: 0;
  padding: 0.5rem 0.75rem 0.65rem;
  gap: 0.3rem;
}

/* Desafío chrome fills the whole flex:1 host (not Pasión/Lugar --wide). */
.solo-dice-challenge .solo-dice-meta-row--wide {
  justify-content: flex-start;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding-inline: 0.4rem;
}

.solo-dice-meta-head {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  right: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  max-width: none;
  z-index: 1;
}

.solo-dice-meta-row--wide .solo-dice-meta-head {
  position: static;
  inset: auto;
}

.solo-dice-meta-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.85;
}

.solo-dice-reroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s ease, opacity 0.12s ease, background-color 0.12s ease;
}

/* Per-mod ↻ spin: opacity only — never nowrap/clamp (that shifts the face up). */
.solo-dice-card.is-mod-spinning .solo-dice-meta-value,
.solo-dice-card.is-mod-spinning #solo-timer-display {
  opacity: 0.72;
}

/* Keep chip ↻ visible while spinning; inert so taps/sticky press don't stick. */
.solo-dice-card.is-rolling .solo-dice-reroll,
.solo-dice-card.is-rolling #btn-solo-reroll-time,
.solo-dice-card.is-mod-spinning .solo-dice-reroll,
.solo-dice-card.is-mod-spinning #btn-solo-reroll-time {
  opacity: 0.4;
  pointer-events: none;
  background: transparent;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .solo-dice-card.is-mod-spinning .solo-dice-meta-value,
  .solo-dice-card.is-mod-spinning #solo-timer-display {
    opacity: 1;
  }
}

.solo-dice-reroll:focus-visible {
  color: var(--amber);
  opacity: 1;
  background: rgba(201, 164, 106, 0.12);
  outline: none;
}

/* Hover only on real pointers — sticky :hover on touch looked “pressed”. */
@media (hover: hover) and (pointer: fine) {
  .solo-dice-reroll:hover {
    color: var(--amber);
    opacity: 1;
    background: rgba(201, 164, 106, 0.12);
  }

  .solo-dice-reroll:active {
    transform: rotate(-40deg);
  }
}

/* Pasión / Lugar / Desafío — same type scale. */
.solo-dice-meta-value {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 2.2vw, 0.82rem);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
}

.solo-dice-meta-row--wide .solo-dice-meta-value {
  padding-top: 0;
  font-size: clamp(0.7rem, 2.2vw, 0.82rem);
  line-height: 1.25;
}

/* Desafío: fill band; same size as Pasión/Lugar. */
.solo-dice-challenge .solo-dice-meta-row--wide .solo-dice-meta-value {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 0;
  font-size: clamp(0.7rem, 2.2vw, 0.82rem);
  line-height: 1.25;
}

.solo-dice-challenge .solo-dice-meta-value-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--solo-desafio-lines, 3);
  line-clamp: var(--solo-desafio-lines, 3);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  text-align: center;
  /* Use full row width — balance left empty gutters on long challenges. */
  text-wrap: pretty;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

.solo-timer-panel.timer-panel,
.solo-timer-panel {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0;
  width: 100%;
  min-height: 0;
  padding: 0.4rem 0.55rem;
  gap: 0;
  border: 1px solid var(--amber-soft);
  border-radius: 0.75rem;
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 30%,
      rgba(107, 36, 56, 0.22),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.04);
  text-align: center;
  box-sizing: border-box;
}

.solo-timer-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) 4.75rem;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.solo-timer-head {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.solo-timer-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--amber);
  opacity: 0.85;
}

.solo-timer-panel .timer-display {
  margin: 0;
  min-width: 0;
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.solo-timer-panel .timer-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

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

.dice-mesa-footer {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  margin-top: auto;
  /* Single safe-b inset (app no longer adds a second bottom pad). */
  padding: 0.65rem 1rem max(0.25rem, var(--safe-b));
  justify-content: stretch;
  gap: 0.5rem;
}

/* Keep footer tight under the mesa so scroll centering reads evenly */
body.is-play-mesa .screen-dice:has(#solo-dice-card:not([hidden])) .dice-mesa {
  padding-bottom: 0.35rem;
}

body.is-play-mesa
  .screen-dice:has(#solo-dice-card:not([hidden]))
  .dice-mesa-footer {
  margin-top: 0;
  padding-top: 0.45rem;
}

.dice-mesa-footer[hidden] {
  display: none !important;
}

/* Match Cartas .table-actions .btn-signal stretch. */
.dice-mesa-footer .btn-signal {
  flex: 1;
  min-width: 0;
}

.dice-mesa-footer .btn-signal:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Inert = visual only. pointer-events:none→auto ate the first tap on Otra
   after a roll landed; click handlers already no-op while locked. */
.dice-mesa-footer .btn-signal.is-inert,
.dice-mesa-footer .btn-signal[aria-disabled="true"] {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .body-dice.is-rolling .body-dice-face,
  .body-dice.is-landed .body-dice-face,
  .card-text.dice-settle,
  .solo-dice-result.solo-result-in {
    animation: none;
  }
}

@media (max-height: 700px) {
  /* Keep level-progress visible (Cartas N/M + Dados N hechas); densify type. */
  body.is-play-mesa .level-progress,
  body.is-play-mesa #level-progress,
  body.is-play-mesa #dice-round-label {
    font-size: 0.62rem;
  }

  body.is-play-mesa .table-header {
    gap: 0.25rem;
  }

  body.is-play-mesa .mode-line,
  body.is-play-mesa .streak-line {
    display: none !important;
  }

  body.is-play-mesa .card {
    gap: 0.55rem;
    padding: 0.9rem 1rem 0.85rem;
  }
}

@media (max-height: 600px) {
  body.is-play-mesa .table-entry-row {
    display: none !important;
  }

  body.is-play-mesa .role-tag {
    display: none;
  }

  body.is-play-mesa .card-text {
    font-size: clamp(0.95rem, 3.3vmin + 0.22rem, 1.28rem);
  }

  body.is-play-mesa #dice-turn-roles .role-avatar {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.85rem;
  }
}

/*
 * Wider mesa column on tablet/desktop: card + mods grow together; Detener /
 * Otra / Hecho share the same max width (centered) so they don’t span edge-to-edge.
 */
@media (min-width: 640px) {
  body.is-play-mesa {
    --mesa-col: min(100% - 2rem, 30rem);
  }

  .solo-dice-card,
  .dice-tap,
  .solo-dice-empty {
    width: var(--mesa-col);
  }

  .dice-mesa-footer {
    width: var(--mesa-col);
    max-width: var(--mesa-col);
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: 0;
  }

  body.is-play-mesa #screen-table .card-stage,
  body.is-play-mesa #screen-table .table-footer-slot,
  body.is-play-mesa #screen-table .table-header,
  body.is-play-mesa #screen-table .table-nav-row,
  body.is-play-mesa #screen-table .table-entry-row {
    width: var(--mesa-col);
    max-width: var(--mesa-col);
    margin-inline: auto;
    box-sizing: border-box;
  }

  .dice-mesa-header {
    width: var(--mesa-col);
    max-width: var(--mesa-col);
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: 0;
  }

  .solo-dice-meta-value,
  .solo-dice-challenge .solo-dice-meta-row--wide .solo-dice-meta-value {
    font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  }
}