:root {
  --bg-deep: #0b0a14;
  --bg-panel: rgba(18, 16, 32, 0.92);
  --bg-card: #1a1730;
  --border: rgba(180, 160, 255, 0.25);
  --text: #e8e4ff;
  --muted: #9b93c4;
  --accent: #c9a0ff;
  --accent-strong: #7b5cff;
  --lucidity: #4a9eff;
  --elasticity: #f0c830;
  --willpower: #e84848;
  --gold: #f0c96a;
  --danger: #ff5d7a;
  --success: #6dffb0;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --radius: 14px;
  --font-display: "Cinzel", serif;
  --font-logo: "Kalnia Glaze", serif;
  --font-body: "Source Sans 3", sans-serif;
  --topbar-h: 6.8rem;
  --sidebar-w: clamp(280px, 28vw, 420px);
  --hand-h: clamp(210px, 33vh, 420px);
  --chrome-h: 0px;
  --footer-h: 108px;
  --ui-scale: 1;
  --action-btn-h: clamp(2.35rem, 6.2vh, 4rem);
  --action-btn-fs: clamp(0.9rem, 1.85vh, 1.5rem);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- iPad / touch: keep native gestures off the table pieces ---------------
   iPadOS opens an image callout or starts a drag preview on a long press,
   which cancels the pointer before the long-press-to-inspect gesture fires. */
html[data-touch="true"] .game-card,
html[data-touch="true"] .game-card *,
html[data-touch="true"] .hex-tile,
html[data-touch="true"] .hex-tile *,
html[data-touch="true"] .deck-column,
html[data-touch="true"] .deck-column *,
html[data-touch="true"] .power-token-chip,
html[data-touch="true"] .player-chip,
html[data-touch="true"] .mini-card-row *,
html[data-touch="true"] .active-card-slot *,
html[data-touch="true"] .hex-occupant-token,
html[data-touch="true"] .menu-dreamer-picker * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

html[data-touch="true"] img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* iOS Safari zooms the page when a focused control is under 16px, and a
   Home Screen install cannot pinch back out. Hold every control at 16px. */
html[data-touch="true"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-touch="true"] select,
html[data-touch="true"] textarea {
  font-size: max(16px, 1em);
}

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(123, 92, 255, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(110, 200, 255, 0.12), transparent 45%),
    var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
}

body.in-game {
  overflow: hidden;
  font-size: calc(1rem * var(--ui-scale));
}

.final-nightmare-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: url("../images/final-nightmare-hellscape.png") center center / cover no-repeat;
  transition: opacity 1.4s ease;
}

.final-recurrence-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%, rgba(8, 4, 18, 0.35), rgba(0, 0, 0, 0.92) 72%),
    linear-gradient(180deg, rgba(12, 6, 24, 0.55), rgba(0, 0, 0, 0.88));
  transition: opacity 1.2s ease;
}

body.final-recurrence-active #app {
  position: relative;
  z-index: 2;
  filter: saturate(0.82) contrast(1.08) brightness(0.94);
  transition: filter 1s ease;
}

body.final-recurrence-active #fullscreen-prompt {
  z-index: 3;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.in-game #app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.menu-window {
  /* Square box art: side gutters = letterbox; panels sit left / center / right. */
  --menu-art-size: min(100vw, 100dvh);
  --menu-ui-scale: 0.57;
  --setup-type-scale: 2.1;
  --ui-scale: 1;
  overflow-x: hidden;
  background-color: #000;
  background-image: url("../images/somnia-box-art.jpg");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.menu-window::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 5px solid #000;
  pointer-events: none;
  z-index: 500;
}

body.menu-window #app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: transparent;
}

body.menu-window main {
  flex: 1;
  position: relative;
  min-height: 100dvh;
}

body.menu-window #screen-setup.active {
  padding: 0;
}

body.menu-window .top-bar {
  position: fixed;
  top: 5px;
  left: 5px;
  right: 5px;
  z-index: 20;
  min-height: auto;
  padding: 0.35rem 0.75rem;
  background: rgba(8, 7, 16, 0.42);
  border-bottom: 1px solid rgba(180, 160, 255, 0.12);
}

body.menu-window .brand h1,
body.menu-window .brand-wordmark {
  margin: 0;
}

body.menu-window .brand-wordmark {
  height: 2.9rem;
  width: 12.75rem;
  max-width: 14rem;
}

.brand-logo-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

:where(html:not([data-hover="false"])) .brand-logo-btn:hover,
.brand-logo-btn:focus-visible {
  background: rgba(123, 92, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(180, 160, 255, 0.25);
  outline: none;
}

.utility-content.somnia-changelog-modal-wrap {
  width: min(96vw, 1440px);
  max-width: 1440px;
  max-height: min(94vh, 1100px);
  display: flex;
  flex-direction: column;
}

.somnia-changelog-modal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}

.somnia-changelog-modal h2 {
  margin: 0;
  font-family: var(--font-display, "Cinzel", serif);
  font-size: 1.75rem;
}

.changelog-lead,
.changelog-credits-lead {
  margin: 0;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Links inside the changelog modal default to the browser's blue/purple,
   which is unreadable on the dark panel — match the credits link color. */
.somnia-changelog-modal a {
  color: #b8a8e8;
}

.somnia-changelog-modal a:hover {
  color: #d4c8f5;
}

.changelog-scroll {
  overflow-y: auto;
  max-height: min(52vh, 560px);
  padding-right: 0.35rem;
  border-top: 1px solid rgba(180, 160, 255, 0.15);
  border-bottom: 1px solid rgba(180, 160, 255, 0.15);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  column-gap: 2rem;
  align-content: start;
}

.changelog-entry {
  margin: 0.85rem 0;
}

.changelog-entry h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.changelog-version {
  color: var(--accent, #b4a0ff);
  font-family: var(--font-display, "Cinzel", serif);
}

.changelog-entry ul {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.92;
}

.changelog-credits-section h3 {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.15rem;
}

.changelog-landscape-credits {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.5;
  max-height: min(30vh, 300px);
  overflow-y: auto;
  columns: 2;
  column-gap: 2rem;
}

.changelog-credits-section .music-credit {
  font-size: 0.95rem;
  margin: 0.25rem 0;
}

@media (max-width: 700px) {
  .changelog-landscape-credits {
    columns: 1;
  }
}

body.menu-window .tagline {
  display: none;
}

body.menu-window .version-label {
  font-size: 0.68rem;
}

body.menu-window .menu-footer {
  position: fixed;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0;
  pointer-events: none;
}

body.menu-window .menu-footer .music-credit {
  font-size: 0.72rem;
  color: #e4d6ff;
  opacity: 1;
  text-shadow:
    0 0 12px rgba(123, 92, 255, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.9);
}

body.menu-window .menu-footer .music-credit a {
  color: #f2eaff;
}

body.menu-window .menu-footer .music-credit a:hover {
  color: #fff;
}

.menu-splash {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(123, 92, 255, 0.2), transparent 55%),
    #0b0a14;
  transition: opacity 1.6s ease, visibility 1.6s ease;
}

.menu-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.menu-splash-art {
  width: min(92vw, 520px);
  max-height: min(82vh, 720px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.65),
    0 0 48px rgba(123, 92, 255, 0.22);
  animation: menu-splash-intro 1.4s ease both;
}

.menu-splash-credit {
  margin: 0;
  font-size: 0.72rem;
  color: rgba(200, 190, 230, 0.88);
  text-align: center;
  max-width: min(92vw, 520px);
  line-height: 1.45;
}

.menu-splash.dissolving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.menu-splash-active .top-bar,
body.menu-splash-active .menu-footer,
body.menu-splash-active #screen-setup .setup-triad {
  opacity: 0;
}

body.menu-splash-ready .top-bar,
body.menu-splash-ready .menu-footer,
body.menu-splash-ready #screen-setup .setup-triad {
  opacity: 1;
  transition: opacity 1s ease 0.15s;
}

@keyframes menu-splash-intro {
  from {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-splash-art {
    animation: none;
  }

  .menu-splash.dissolving {
    transition-duration: 0.01ms;
  }

  body.menu-splash-ready .top-bar,
  body.menu-splash-ready .menu-footer,
  body.menu-splash-ready #screen-setup .setup-triad {
    transition-duration: 0.01ms;
  }

  .menu-glass-panel,
  .menu-glass-panel::before,
  .menu-glass-panel::after,
  .setup-panel-right.menu-glass-panel:has(.begin-dream-ready),
  #btn-start.begin-dream-btn.begin-dream-ready,
  #btn-start.begin-dream-btn.begin-dream-ready::after {
    animation: none !important;
  }

  .menu-glass-panel::after {
    opacity: 0.35;
  }

  #btn-start.begin-dream-btn.begin-dream-ready {
    box-shadow: 0 8px 24px rgba(123, 92, 255, 0.35);
  }
}

body.play-window #app {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.play-window main {
  flex: 1;
  min-height: 0;
}

body.play-window #screen-game.active {
  height: 100%;
}

.fullscreen-prompt {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: rgba(4, 3, 12, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.fullscreen-prompt.hidden {
  display: none;
}

.fullscreen-prompt-card {
  text-align: center;
  padding: 2rem 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--bg-panel);
  box-shadow: var(--shadow), 0 0 40px rgba(123, 92, 255, 0.25);
  max-width: 420px;
  pointer-events: none;
  animation: prompt-pulse 2.5s ease-in-out infinite;
}

.fullscreen-prompt-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
}

.fullscreen-prompt-card p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.fullscreen-prompt-hint {
  font-size: 0.78rem;
  color: var(--accent);
}

.hint-coarse {
  display: none;
}

html[data-touch="true"] .hint-fine {
  display: none;
}

html[data-touch="true"] .hint-coarse {
  display: inline;
}

body.play-window #screen-end.active {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.version-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.quest-list li.ready {
  color: #f0c96a;
}

.quest-progress-list li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.quest-progress-list li.quest-clickable {
  cursor: pointer;
  padding: 0.38rem 0.45rem;
  margin: 0.12rem 0;
  border-radius: 8px;
  border: 1px solid transparent;
}

:where(html:not([data-hover="false"])) .quest-progress-list li.quest-clickable:hover,
.quest-progress-list li.quest-clickable:focus-visible {
  border-color: rgba(240, 201, 106, 0.55);
  background: rgba(240, 201, 106, 0.1);
}

.quest-progress-list li.quest-clickable.ready {
  border-color: rgba(240, 201, 106, 0.45);
  background: rgba(240, 201, 106, 0.08);
}

.quest-progress-list li.quest-clickable:disabled,
.quest-progress-list li.quest-locked {
  cursor: default;
  opacity: 0.72;
}

.quest-progress-list .quest-text {
  flex: 1 1 8rem;
  min-width: 0;
}

.quest-progress {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}

.quest-progress .quest-seg {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.quest-progress .quest-seg.met {
  background: rgba(95, 224, 176, 0.55);
  border-color: rgba(95, 224, 176, 0.7);
}

.quest-progress .quest-seg.done {
  background: rgba(240, 201, 106, 0.7);
  border-color: rgba(240, 201, 106, 0.85);
}

.quest-ready-mark {
  font-size: 0.62rem;
  color: #f0c96a;
}

.archetype-tokens {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.sacrifice-object-quest {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.4rem;
}

.sacrifice-object-label,
.sacrifice-object-empty {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.sacrifice-object-btn {
  text-align: left;
  font: inherit;
  font-size: 0.75rem;
  color: #f0c96a;
  background: rgba(240, 201, 106, 0.08);
  border: 1px solid rgba(240, 201, 106, 0.45);
  border-radius: 8px;
  padding: 0.38rem 0.5rem;
  cursor: pointer;
}

:where(html:not([data-hover="false"])) .sacrifice-object-btn:hover,
.sacrifice-object-btn:focus-visible {
  background: rgba(240, 201, 106, 0.16);
}

.victory-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.victory-confetti {
  position: absolute;
  bottom: -12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0.95;
  animation: dream-mote-rise linear forwards;
}

.victory-sprinkle {
  width: 5px;
  height: 9px;
  border-radius: 40% 40% 50% 50%;
  box-shadow: 0 0 8px currentColor;
}

@keyframes dream-mote-rise {
  to {
    transform: translate3d(var(--sprinkle-x, 0px), -110vh, 0) scale(0.35) rotate(220deg);
    opacity: 0;
  }
}

.loss-spark {
  position: absolute;
  top: -16px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: #0a0a0c;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 2px #1a1218;
  opacity: 0.9;
  animation: loss-spark-fall linear forwards;
}

@keyframes loss-spark-fall {
  to {
    transform: translate3d(var(--spark-x, 0px), 110vh, 0) rotate(160deg);
    opacity: 0.15;
  }
}

body.end-nightmare #screen-end.active {
  background: url("../images/final-nightmare-hellscape.png") center center / cover no-repeat;
}

body.end-nightmare #screen-end .end-panel {
  background: rgba(8, 4, 12, 0.78);
  border-color: rgba(80, 20, 28, 0.85);
}

.victory-star {
  position: absolute;
  color: #f0c96a;
  font-size: 1rem;
  opacity: 0;
  animation: victory-blink 2.4s ease-in-out infinite;
}

body.victory-celebrating .end-panel {
  animation: victory-glow 2.5s ease-in-out infinite alternate;
}

@keyframes confetti-fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.2;
  }
}

@keyframes victory-blink {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes victory-glow {
  from { box-shadow: 0 0 24px rgba(201, 160, 255, 0.25); }
  to { box-shadow: 0 0 48px rgba(240, 201, 106, 0.45); }
}

.end-score-breakdown {
  margin: 1rem 0;
  text-align: left;
}

.score-breakdown-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}

.end-leaderboard {
  margin: 1rem 0;
  text-align: left;
}

.end-name-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

.end-score-last {
  max-width: 4.5rem;
}

.end-score-list {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  max-height: 12rem;
  overflow: auto;
  font-size: 0.85rem;
}

.end-score-status {
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1.2em;
}

#screen-end .end-panel {
  position: relative;
  z-index: 1;
}

.setup-launch-hint {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  text-align: center;
}

.menu-footer {
  padding: 0.75rem 1rem 1.25rem;
}

.music-credit {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

.music-credit a {
  color: #b8a8e8;
}

.music-credit a:hover {
  color: #d4c8f5;
}

.music-credit + .music-credit {
  margin-top: 0.35rem;
}

.overview-page .music-credit {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: rgba(8, 7, 16, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

body.in-game .tagline { display: none; }

body.in-game .brand h1 {
  font-size: 1.25rem;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-family: var(--font-logo);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

.brand-wordmark {
  display: block;
  height: 2.45rem;
  width: 10.75rem;
  max-width: 12rem;
  object-fit: cover;
  object-position: center 46%;
  flex-shrink: 0;
}

.tagline { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.header-dropdown {
  position: relative;
}

.header-dropdown-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(123, 92, 255, 0.18);
}

.header-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 400;
  width: min(360px, calc(100vw - 1.5rem));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 0.65rem 0.75rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.header-dropdown-panel.hidden {
  display: none;
}

.header-dropdown-hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

.deck-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.deck-dropdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.65rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.deck-dropdown-row.suit-lucidity { border-left: 3px solid var(--lucidity); }
.deck-dropdown-row.suit-elasticity { border-left: 3px solid var(--elasticity); }
.deck-dropdown-row.suit-willpower { border-left: 3px solid var(--willpower); }

.deck-dropdown-label {
  font-size: 0.88rem;
  font-weight: 600;
}

.deck-dropdown-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.deck-dropdown-suit {
  font-weight: 500;
  opacity: 0.85;
}

.deck-dropdown-row .btn {
  white-space: nowrap;
}

.deck-dropdown-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  align-items: stretch;
}

.deck-dropdown-row.has-peek {
  box-shadow: inset 0 0 0 1px rgba(201, 160, 255, 0.35);
}

.deck-dropdown-row .btn-peek {
  background: linear-gradient(160deg, rgba(90, 60, 140, 0.55), rgba(40, 24, 70, 0.55));
  border-color: rgba(201, 160, 255, 0.45);
}

.dreamers-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dreamers-dropdown-list .player-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.dreamers-dropdown-list .player-chip img {
  width: 40px;
  height: 40px;
}

.dreamer-dock {
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 0.55rem;
}

.dreamer-dock-header {
  margin-bottom: 0.35rem;
}

.player-list-dock {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.28rem;
  align-items: flex-end;
  max-height: 100%;
  overflow: hidden;
}

.player-list-dock .player-chip {
  flex-direction: column;
  align-items: center;
  width: clamp(46px, 4.8vw, 62px);
  min-width: 46px;
  padding: 0.2rem 0.12rem 0.28rem;
  text-align: center;
}

.player-list-dock .player-chip img {
  width: 100%;
  height: clamp(58px, 11vh, 86px);
  border-radius: 8px;
  object-fit: contain;
  object-position: center bottom;
}

.player-list-dock .player-chip .info {
  width: 100%;
}

.player-list-dock .player-chip .name {
  font-size: 0.68rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-list-dock .player-chip .sub,
.player-list-dock .player-chip .dreamer-stats {
  display: none;
}

#screen-game .hand-bar {
  grid-area: hand;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  min-height: var(--hand-h);
  max-height: min(46vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 18%) minmax(80px, 104px) minmax(280px, 2.4fr) minmax(58px, 9%) minmax(58px, 9%) minmax(58px, 9%);
  gap: 0.5rem;
  align-items: stretch;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
}

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hud-item {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
}

.hud-item .label {
  color: var(--muted);
  margin-right: 0.35rem;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.hud-item.phase span:last-child { color: var(--accent); font-weight: 600; }

main { flex: 1; min-height: 0; display: flex; flex-direction: column; }

body.in-game main {
  overflow: hidden;
}

.screen { display: none; padding: 1rem; }
.screen.active { display: block; }
#screen-setup.active { display: flex; }

#screen-game.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "table sidebar-right"
    "hand hand";
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

#screen-game .sidebar.left {
  display: none;
}

#screen-game .table-surface {
  grid-area: table;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(123, 92, 255, 0.14), transparent 55%),
    radial-gradient(ellipse at 50% 80%, rgba(74, 158, 255, 0.08), transparent 50%),
    rgba(8, 7, 18, 0.65);
  border-right: 1px solid var(--border);
}

#screen-game .board-viewport {
  --map-chrome-left: clamp(156px, 15vw, 212px);
  padding-left: var(--map-chrome-left);
  min-height: clamp(320px, 44vh, 720px);
}

.deck-column {
  --deck-stack-cap: 1rem;
  --deck-stack-base: 1.1rem;
  --deck-face-w: 2.35rem;
  --deck-face-h: 3.15rem;
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.4rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: clamp(0.18rem, 0.55vh, 0.38rem);
  width: clamp(152px, 14.5vw, 210px);
  height: auto;
  overflow: hidden auto;
  scrollbar-width: thin;
  padding: clamp(0.32rem, 0.75vh, 0.5rem) 0.42rem;
  border-radius: 12px;
  border: 1px solid rgba(201, 160, 255, 0.24);
  background: rgba(8, 6, 20, 0.94);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  pointer-events: auto;
}

.deck-rail-row {
  flex: 1 1 0;
  min-height: min-content;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  padding: 0.24rem 0.28rem 0.26rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.deck-rail-row.kind-dream { border-left: 3px solid #c9a0ff; }
.deck-rail-row.kind-psyche { border-left: 3px solid #9b7bff; }
.deck-rail-row.suit-lucidity { border-left: 3px solid var(--lucidity); }
.deck-rail-row.suit-elasticity { border-left: 3px solid var(--elasticity); }
.deck-rail-row.suit-willpower { border-left: 3px solid var(--willpower); }
.deck-rail-row.kind-object { background: rgba(240, 201, 106, 0.06); }

.deck-rail-row.has-peek {
  box-shadow: inset 0 0 0 1px rgba(109, 255, 176, 0.22);
}

.deck-rail-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.deck-rail-label {
  font-size: clamp(0.64rem, 1.35vh, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f4f0ff;
  line-height: 1.15;
}

.deck-rail-sub {
  display: inline;
  margin-left: 0.12rem;
  font-size: clamp(0.58rem, 1.15vh, 0.68rem);
  font-weight: 600;
  opacity: 0.88;
}

.deck-rail-row.suit-lucidity .deck-rail-sub { color: #b8dcff; }
.deck-rail-row.suit-elasticity .deck-rail-sub { color: #ffe98a; }
.deck-rail-row.suit-willpower .deck-rail-sub { color: #ffb0b0; }

.deck-rail-meta {
  font-size: clamp(0.56rem, 1.05vh, 0.66rem);
  font-weight: 600;
  color: rgba(220, 214, 245, 0.78);
  white-space: nowrap;
}

.deck-rail-piles {
  flex: 1 1 auto;
  min-height: min-content;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 0.14rem;
}

.deck-rail-sep {
  font-size: clamp(0.5rem, 0.9vh, 0.58rem);
  color: rgba(201, 160, 255, 0.55);
  align-self: center;
  user-select: none;
}

.deck-rail-draw,
.deck-rail-discard {
  position: relative;
  min-height: calc(var(--deck-face-h) + var(--deck-stack-cap) + 6px);
  max-height: none;
}

.deck-rect-stack {
  --stack-step: min(1.1px, calc(var(--deck-stack-cap) / max(var(--stack-count), 1)));
  position: relative;
  width: 100%;
  min-height: var(--deck-stack-base);
  height: min(
    calc(var(--stack-count, 0) * var(--stack-step) + var(--deck-stack-base)),
    calc(var(--deck-stack-cap) + var(--deck-stack-base))
  );
  max-height: calc(var(--deck-stack-cap) + var(--deck-stack-base));
}

.deck-rect-stack.is-empty {
  height: var(--deck-stack-base);
}

.deck-rect {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2.5px;
  bottom: calc(var(--stack-i) * var(--stack-step));
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.deck-rect-draw {
  background: linear-gradient(90deg, rgba(210, 198, 255, 0.92), rgba(160, 140, 220, 0.82));
}

.deck-rect-discard {
  background: linear-gradient(90deg, rgba(255, 220, 170, 0.9), rgba(220, 170, 120, 0.82));
}

.deck-rail-row.suit-lucidity .deck-rect-draw {
  background: linear-gradient(90deg, rgba(120, 185, 255, 0.95), rgba(70, 130, 220, 0.85));
}

.deck-rail-row.suit-elasticity .deck-rect-draw {
  background: linear-gradient(90deg, rgba(255, 225, 120, 0.95), rgba(210, 170, 50, 0.85));
}

.deck-rail-row.suit-willpower .deck-rect-draw {
  background: linear-gradient(90deg, rgba(255, 130, 130, 0.95), rgba(190, 60, 60, 0.85));
}

.deck-peek-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--stack-count, 0) * var(--stack-step) + 0.15rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.deck-peek-card {
  position: absolute;
  bottom: calc(var(--peek-i) * 3px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--deck-face-w) !important;
  min-height: var(--deck-face-h) !important;
  pointer-events: auto;
  z-index: 4;
  box-shadow:
    0 0 0 1px rgba(109, 255, 176, 0.65),
    0 4px 12px rgba(0, 0, 0, 0.45);
}

.deck-discard-top-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--stack-count, 0) * var(--stack-step));
  transform: translateX(-50%);
  width: var(--deck-face-w) !important;
  min-height: var(--deck-face-h) !important;
  z-index: 3;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}

:where(html:not([data-hover="false"])) .deck-discard-top-card:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.48);
}

.deck-draw-back {
  padding: 0;
  border: 0;
  background: #120f22;
  overflow: hidden;
}

.deck-draw-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.reveal-deck-top-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.reveal-deck-top-choice {
  appearance: none;
  border: 1px solid rgba(201, 160, 255, 0.28);
  background: rgba(12, 10, 22, 0.72);
  color: inherit;
  border-radius: 10px;
  padding: 0.45rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}

.reveal-deck-top-choice img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 6px;
  background: #120f22;
}

:where(html:not([data-hover="false"])) .reveal-deck-top-choice:hover,
.reveal-deck-top-choice:focus-visible {
  border-color: rgba(201, 160, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(201, 160, 255, 0.25);
}

.deck-discard-top-card .body,
.deck-discard-top-card .title {
  display: none;
}

.deck-discard-top-card .art,
.deck-discard-top-card .psyche-dreambeast-thumb {
  display: block;
}

.deck-discard-top-card.deck-last-dream {
  box-shadow:
    0 0 0 1px rgba(201, 160, 255, 0.75),
    0 6px 16px rgba(123, 92, 255, 0.35);
}

.deck-last-dream-badge {
  position: absolute;
  left: 50%;
  bottom: calc(var(--stack-count, 0) * var(--stack-step) + var(--deck-face-h) + 0.12rem);
  transform: translateX(-50%);
  font-size: clamp(0.44rem, 0.8vh, 0.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0e6ff;
  background: rgba(123, 92, 255, 0.72);
  border: 1px solid rgba(201, 160, 255, 0.55);
  border-radius: 999px;
  padding: 0.05rem 0.28rem;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

.deck-discard-empty,
.deck-discard-blocked {
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  transform: translateX(-50%);
  width: var(--deck-face-w);
  height: var(--deck-face-h);
  border-radius: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.58rem, 1vh, 0.68rem);
  color: rgba(220, 214, 245, 0.45);
  background: rgba(0, 0, 0, 0.18);
}

.deck-discard-blocked {
  font-size: clamp(0.48rem, 0.85vh, 0.56rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#screen-game .table-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201, 160, 255, 0.07), transparent 42%),
    radial-gradient(ellipse at 78% 70%, rgba(74, 158, 255, 0.06), transparent 46%);
  animation: dream-haze-drift 18s ease-in-out infinite;
  z-index: 0;
}

#screen-game .sidebar.right {
  grid-area: sidebar-right;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-right: none;
  max-height: none;
  height: 100%;
}

#screen-game .sidebar.left,
#screen-game .sidebar.right {
  position: relative;
}

#screen-setup {
  position: absolute;
  inset: 0;
  display: block;
  background: none;
  pointer-events: none;
}

.menu-spiral {
  --spiral-size: clamp(34px, 3.4vw, 48px);
  position: absolute;
  z-index: 6;
  left: calc(50% - var(--menu-art-size) / 2 + var(--menu-art-size) * 0.383);
  top: calc(50% - var(--menu-art-size) / 2 + var(--menu-art-size) * 0.357);
  transform: translate(-50%, -50%);
  width: var(--spiral-size);
  height: var(--spiral-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18, 8, 32, 0.2), rgba(18, 8, 32, 0.05) 70%);
  color: #e7d4ff;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 6px rgba(176, 120, 255, 0.85));
}

.menu-spiral svg {
  display: block;
  width: 100%;
  height: 100%;
}

.menu-spiral:hover,
.menu-spiral:focus-visible {
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(196, 150, 255, 1));
  outline: none;
}

.menu-intro {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 2, 12, 0.45);
  pointer-events: auto;
}

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

.menu-intro-card {
  position: relative;
  width: min(72rem, 96vw);
  max-height: min(88vh, 46rem);
  overflow: auto;
  padding: 1.1rem 1.25rem 1.2rem;
  color: #f6f1e8;
  text-align: left;
  background: rgba(10, 6, 22, 0.94);
  border: 1px solid rgba(180, 160, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.menu-intro-card h2 {
  margin: 0 2rem 0.55rem;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #e4d4ff;
}

.menu-intro-card .player-primer p,
.menu-intro-card .player-primer-lead {
  font-size: 0.78rem;
  line-height: 1.38;
  text-align: left;
}

.menu-intro-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f6f1e8;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.menu-intro-close:hover,
.menu-intro-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.menu-intro .overview-lucidity { color: #8ecbff; }
.menu-intro .overview-elasticity { color: #f0d56a; }
.menu-intro .overview-willpower { color: #ff8d8d; }

.setup-triad {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  /* Side gutters never drop below 300px, so the 340px launch panel (scaled by
     --menu-panel-scale) always lands inside the screen on 1280-1600px laptops. */
  grid-template-columns: minmax(0, 1fr) min(var(--menu-art-size), 100%) minmax(0, 1fr);
  align-items: start;
  padding-top: clamp(4.5rem, 11vh, 8rem);
  pointer-events: none;
}

.menu-glass-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-self: center;
  /* 30.2: the float keyframes below must repeat this scale — an animated
     `transform` replaces the static one, which is why the desktop menu never
     shrank to its gutters and the launch panel ran off 1440px screens. */
  --menu-panel-scale: var(--menu-ui-scale, 1);
  transform: scale(var(--menu-panel-scale));
  transform-origin: center top;
  pointer-events: auto;
  background: rgba(8, 6, 18, 0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(180, 160, 255, 0.32);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: menu-panel-breathe 5.5s ease-in-out infinite;
}

.setup-panel-left.menu-glass-panel {
  grid-column: 1;
  grid-row: 1;
  width: 260px;
  animation-delay: 0s;
}

.setup-panel-center.menu-glass-panel {
  grid-column: 2;
  grid-row: 1;
  width: 560px;
  align-self: end;
  transform-origin: center bottom;
  margin-bottom: clamp(1.25rem, 7vh, 4.5rem);
  max-height: min(70vh, calc(100dvh - 6.5rem));
  overflow: auto;
  animation-delay: 1.1s;
}

.setup-panel-right.menu-glass-panel {
  grid-column: 3;
  grid-row: 1;
  width: 340px;
  animation-delay: 2.2s;
}

.menu-glass-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    125deg,
    rgba(123, 92, 255, 0.12) 0%,
    rgba(232, 220, 255, 0.72) 22%,
    rgba(90, 200, 255, 0.55) 45%,
    rgba(255, 210, 120, 0.5) 68%,
    rgba(123, 92, 255, 0.18) 100%
  );
  background-size: 260% 260%;
  animation: menu-border-shimmer 9s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

.menu-glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.62;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(2px 2px at 78% 16%, rgba(180, 160, 255, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 62% 68%, rgba(90, 200, 255, 0.9), transparent),
    radial-gradient(2px 2px at 24% 74%, rgba(255, 210, 120, 0.85), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 46% 38%, rgba(201, 160, 255, 0.9), transparent),
    radial-gradient(1px 1px at 8% 58%, rgba(90, 141, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, rgba(255, 255, 255, 0.75), transparent);
  animation: menu-sparkle-twinkle 4.2s ease-in-out infinite;
}

.menu-glass-panel > * {
  position: relative;
  z-index: 1;
}

.setup-panel-left.menu-glass-panel::after {
  animation-delay: 0.4s;
}

.setup-panel-center.menu-glass-panel::after {
  animation-delay: 1.8s;
}

.setup-panel-right.menu-glass-panel::after {
  animation-delay: 0.9s;
}

.setup-panel-right.menu-glass-panel:has(.begin-dream-ready) {
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.32),
    0 0 42px rgba(123, 92, 255, 0.28),
    0 0 72px rgba(90, 141, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: menu-panel-breathe 4s ease-in-out infinite, menu-launch-panel-glow 2.6s ease-in-out infinite;
}

.menu-panel-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: calc(0.82rem * var(--setup-type-scale));
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.setup-panel-left .field {
  margin-bottom: 0.55rem;
}

.setup-panel-center {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.menu-phase-legend {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.setup-launch-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: stretch;
  min-height: auto;
}

.btn-tutorial-menu {
  font-size: calc(0.82rem * var(--setup-type-scale));
  font-weight: 600;
  min-height: 3.25rem;
  white-space: normal;
  line-height: 1.2;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(180, 160, 255, 0.22);
  color: var(--muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-advanced-menu {
  width: 100%;
  margin-top: 0.55rem;
}

.btn-advanced-menu:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.8;
}

:where(html:not([data-hover="false"])) .btn-tutorial-menu:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(180, 160, 255, 0.35);
  color: var(--text);
}

.setup-launch-row--first-visit {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.setup-launch-row--first-visit #btn-tutorial-mode {
  order: -1;
  font-family: var(--font-display);
  font-size: calc(1rem * var(--setup-type-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  border: none;
  background: linear-gradient(135deg, #f3ebff 0%, #b89bff 28%, #6a9dff 58%, #ffd98a 82%, #9b7bff 100%);
  background-size: 240% 240%;
  animation: btn-shimmer 3.2s ease-in-out infinite;
}

.dreamer-pick-recommended {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1b1328;
  background: #f0c830;
}

#screen-game .guide-panel {
  display: none !important;
}

#screen-game .guide-panel[hidden],
#screen-game .guide-panel.hidden {
  display: none !important;
}

body.menu-window #screen-setup h2 {
  font-size: calc(0.95rem * var(--setup-type-scale));
}

body.menu-window #screen-setup h3 {
  font-size: calc(0.88rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .intro,
body.menu-window #screen-setup .setup-lead {
  font-size: calc(1rem * var(--setup-type-scale));
  line-height: 1.55;
}

body.menu-window #screen-setup .setup-tip,
body.menu-window #screen-setup .setup-launch-hint,
body.menu-window #screen-setup .setup-hint {
  font-size: calc(0.9rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .field > span {
  font-size: calc(0.78rem * var(--setup-type-scale));
  font-weight: 600;
}

body.menu-window #screen-setup .field select {
  font-size: calc(0.82rem * var(--setup-type-scale));
  padding: 0.4rem 0.5rem;
}

body.menu-window #screen-setup .round-step {
  font-size: calc(0.68rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .round-step span {
  font-size: calc(0.58rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .btn {
  font-size: calc(0.88rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .music-credit,
body.menu-window .menu-footer .music-credit {
  font-size: calc(0.72rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .game-card.portrait {
  width: 108px;
  min-height: 148px;
}

body.menu-window #screen-setup .game-card.portrait .art {
  height: 82px;
}

body.menu-window #screen-setup .card-grid.picker,
body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 0.5rem;
}

body.menu-window #screen-setup .dreamer-pick-name {
  font-size: calc(0.88rem * var(--setup-type-scale));
  line-height: 1.2;
}

body.menu-window #screen-setup .dreamer-pick-stats,
body.menu-window #screen-setup .dreamer-pick-stats .stat {
  font-size: calc(0.58rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .dreamer-pick-slot {
  font-size: calc(0.55rem * var(--setup-type-scale));
}

body.menu-window #screen-setup .menu-phase-legend {
  margin-top: 0.55rem;
}

body.menu-window #screen-setup .setup-round-flow {
  margin: 0;
  gap: 0.35rem;
}

body.menu-window #screen-setup #btn-start.begin-dream-btn {
  min-height: 100%;
  font-size: calc(1rem * var(--setup-type-scale));
  padding: calc(0.75rem * var(--setup-type-scale)) 0.85rem;
  letter-spacing: 0.05em;
}

html[data-menu-layout="stack"] .setup-triad {
  grid-template-columns: 1fr;
  padding: 3.5rem 0.75rem 1rem;
  gap: 0.75rem;
}

html[data-menu-layout="stack"] .setup-panel-left.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-center.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-right.menu-glass-panel {
  grid-column: 1;
  grid-row: auto;
  width: min(92vw, 420px);
}

html[data-menu-layout="stack"] .setup-launch-row {
  min-height: 4rem;
}

html[data-form="phone"],
html[data-menu-layout="stack"]:not([data-form="tablet"]) {
  font-size: 12px;
}

html[data-menu-layout="stack"] body.menu-window {
  --setup-type-scale: 0.52;
  --menu-ui-scale: 0.7;
}

html[data-form="phone"] body.menu-window {
  --setup-type-scale: 0.52;
  --menu-ui-scale: 0.7;
}

html[data-form="phone"] .menu-panel-title {
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}

html[data-form="phone"] .menu-glass-panel {
  padding: 0.5rem 0.6rem;
}

html[data-form="phone"][data-menu-layout="stack"] .setup-triad {
  padding: 2.6rem 0.5rem 0.55rem;
  gap: 0.4rem;
}

html[data-form="phone"][data-menu-layout="stack"] .setup-panel-left.menu-glass-panel,
html[data-form="phone"][data-menu-layout="stack"] .setup-panel-center.menu-glass-panel,
html[data-form="phone"][data-menu-layout="stack"] .setup-panel-right.menu-glass-panel {
  width: min(94vw, 22rem);
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick {
  gap: 0.2rem;
}

html[data-form="phone"] body.menu-window #screen-setup .game-card.portrait {
  width: min(92px, 100%);
  min-width: 0;
  min-height: 0;
}

html[data-form="phone"] body.menu-window #screen-setup .game-card.portrait .art {
  height: 86px;
  min-height: 0;
  max-height: 86px;
  aspect-ratio: auto;
}

html[data-form="phone"][data-orientation="landscape"] body.menu-window #screen-setup .game-card.portrait {
  width: min(108px, 100%);
}

html[data-form="phone"][data-orientation="landscape"] body.menu-window #screen-setup .game-card.portrait .art {
  height: 118px;
  max-height: 118px;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-stats .stat {
  display: none;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-name {
  font-size: 0.62rem;
  line-height: 1.15;
  margin-bottom: 0;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-recommended {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  background: var(--gold);
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-slot {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  padding: 0.08rem 0.28rem;
  font-size: 0.5rem;
}

html[data-form="phone"] .btn-tutorial-menu,
html[data-form="phone"] .begin-dream-btn,
html[data-form="phone"] .btn-continue-dream,
html[data-form="phone"] .setup-launch-row--first-visit #btn-tutorial-mode {
  font-size: 0.78rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.5rem;
}

html[data-form="phone"] .setup-launch-row,
html[data-form="phone"][data-menu-layout="stack"] .setup-launch-row {
  min-height: 0;
}

html[data-form="phone"] .menu-tutorial-hint,
html[data-form="phone"] .menu-phase-legend,
html[data-form="phone"] .pwa-install-hint,
html[data-form="phone"] .tagline {
  display: none;
}

html[data-form="phone"] body.menu-window #screen-setup .card-grid.picker,
html[data-form="phone"] body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem 0.35rem;
  justify-items: center;
}

html[data-form="phone"][data-orientation="landscape"] body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  min-height: 0;
  height: 100%;
}

@media (max-width: 980px), (max-aspect-ratio: 5/6) {
  html:not([data-menu-layout="split"]) .setup-triad {
    grid-template-columns: 1fr;
    padding: 3.5rem 0.75rem 1rem;
    gap: 0.75rem;
  }

  html:not([data-menu-layout="split"]) .setup-panel-left.menu-glass-panel,
  html:not([data-menu-layout="split"]) .setup-panel-center.menu-glass-panel,
  html:not([data-menu-layout="split"]) .setup-panel-right.menu-glass-panel {
    grid-column: 1;
    grid-row: auto;
    width: min(92vw, 420px);
  }

  html:not([data-menu-layout="split"]) .setup-launch-row {
    min-height: 4rem;
  }
}

.setup-continue-wrap {
  margin-bottom: 0.65rem;
}

.setup-continue-wrap.hidden {
  display: none;
}

.btn-continue-dream {
  width: 100%;
  font-size: calc(0.95rem * var(--setup-type-scale));
  padding: calc(0.55rem * var(--setup-type-scale)) 0.85rem;
  border-color: rgba(109, 255, 176, 0.55);
  background: rgba(109, 255, 176, 0.12);
}

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

.setup-panel, .end-panel {
  max-width: 960px;
  margin: 2rem auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

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

.setup-lead { margin: 0 0 1rem; }
.setup-tip { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }

.setup-round-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin: 1rem 0;
}

.round-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 0.85rem;
}

.round-step span {
  font-size: 0.72rem;
  color: var(--muted);
}

.setup-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 1rem 0 0;
}

.setup-actions .btn {
  flex: 1 1 10rem;
}

.setup-launch {
  margin-top: 1.25rem;
}

#btn-start.begin-dream-btn {
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 1.05rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
  border: 1px solid rgba(180, 160, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  opacity: 0.55;
  transition:
    opacity 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.15s ease,
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

body.menu-window #screen-setup #btn-start.begin-dream-btn {
  font-size: calc(1rem * var(--setup-type-scale));
  padding: calc(0.75rem * var(--setup-type-scale)) 0.85rem;
}

#btn-start.begin-dream-btn.begin-dream-ready {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  color: #fff;
  border: none;
  font-weight: 700;
  background: linear-gradient(135deg, #f3ebff 0%, #b89bff 28%, #6a9dff 58%, #ffd98a 82%, #9b7bff 100%);
  background-size: 240% 240%;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.45), 0 2px 10px rgba(40, 20, 80, 0.35);
  animation:
    btn-shimmer 3.2s ease-in-out infinite,
    menu-begin-beacon 2.1s ease-in-out infinite;
}

#btn-start.begin-dream-btn.begin-dream-ready::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: menu-btn-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
}

:where(html:not([data-hover="false"])) #btn-start.begin-dream-btn.begin-dream-ready:hover {
  transform: translateY(-3px) scale(1.02);
  animation:
    btn-shimmer 2.4s ease-in-out infinite,
    menu-begin-beacon 1.6s ease-in-out infinite;
}

#btn-start.begin-dream-btn.begin-dream-ready:active,
#btn-start.begin-dream-btn.begin-dream-ready.is-pressed {
  transform: translateY(3px) scale(0.985);
}

.deck-toggle {
  width: 100%;
  margin-bottom: 0.5rem;
}

.deck-tray.collapsed {
  display: none;
}

.phase-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.phase-stepper .step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
}

.phase-stepper .step.active {
  color: var(--text);
  background: rgba(123, 92, 255, 0.18);
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(123, 92, 255, 0.25);
  animation: phase-glow 2.4s ease-in-out infinite;
}

.phase-stepper.phase-pulse .step.active {
  animation: phase-bump 0.55s ease;
}

.phase-stepper .step.done {
  color: var(--success);
  opacity: 0.85;
}

.phase-stepper .step-arrow {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.6;
}

.phase-stepper .step-budget {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(240, 201, 106, 0.15);
  border: 1px solid rgba(240, 201, 106, 0.35);
  color: var(--gold);
  white-space: nowrap;
}

.hud-goal-wrap {
  position: relative;
  overflow: hidden;
  min-width: 5.5rem;
}

.hud-goal-bar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 2px;
  transition: width 0.25s ease;
  pointer-events: none;
}

.hud-escape-banner {
  display: block;
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 700;
  color: #ffe8a8;
  background: linear-gradient(90deg, rgba(120, 70, 10, 0.9), rgba(40, 90, 120, 0.86));
  border: 1px solid rgba(255, 210, 120, 0.55);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: pulse-escape-hint 2.2s ease-in-out infinite;
}

.hud-escape-banner.hidden {
  display: none;
}

.hud-forget-banner {
  margin: 0;
  width: 100%;
  max-width: 42rem;
  padding: 0.55rem 0.75rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffd4d4;
  background: rgba(90, 20, 20, 0.72);
  border: 2px solid rgba(255, 120, 100, 0.75);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(255, 80, 60, 0.35);
}

.hud-forget-banner.hidden {
  display: none;
}

@keyframes pulse-escape-hint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

.hud-dreams-wrap.hud-urgent-warn #hud-dreams {
  color: var(--gold);
  font-weight: 700;
}

.hud-dreams-wrap.hud-urgent-critical #hud-dreams {
  color: #ff8a7a;
  font-weight: 700;
}

.hud-mind-wrap #hud-mind {
  color: #b9a8ff;
  font-weight: 700;
}

.hud-mind-dusk {
  margin-left: 0.3rem;
  color: #ff9f6b;
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
}

.hud-mind-wrap.hud-urgent-warn #hud-mind {
  color: var(--gold);
}

.hud-mind-wrap.hud-urgent-critical #hud-mind {
  color: #ff8a7a;
  animation: pulse-escape-hint 1.2s ease-in-out infinite;
}

.timeline-toll-preview {
  margin: 0;
  padding: 0.12rem 0.25rem;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #ffcba8;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-panel {
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.12), rgba(74, 158, 255, 0.08));
  border: 1px solid rgba(180, 160, 255, 0.35);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
}

.narrator-panel {
  background: rgba(8, 6, 18, 0.75);
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0;
}

.narrator-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.narrator-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #b8e0ff;
}

.narrator-detail {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
}

.narrator-consequences {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--accent);
}

.phase-advance-bar,
.action-section-advance {
  display: flex;
  justify-content: center;
  padding: 0.15rem 0 0.35rem;
  margin-bottom: 0.15rem;
}

.action-section-advance .btn-advance {
  width: 100%;
  max-width: 360px;
}

.coop-play-banner {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.75rem;
  text-align: center;
  font-size: 0.82rem;
  color: #f0e8ff;
  font-style: italic;
  border-radius: 8px;
  background: rgba(123, 92, 255, 0.14);
  border: 1px dashed rgba(201, 160, 255, 0.38);
  flex-shrink: 0;
}

.coop-play-banner.hidden {
  display: none;
}

.btn-advance {
  min-width: 220px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 0.65rem 1.5rem;
  box-shadow: 0 4px 20px rgba(123, 92, 255, 0.35);
  animation: advance-glow 2.8s ease-in-out infinite;
}

.guide-phase-tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: auto;
}

.guide-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.guide-steps li { margin-bottom: 0.25rem; color: var(--muted); }
.guide-steps li.current { color: var(--text); font-weight: 600; }

.guide-tip {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--accent);
  font-style: italic;
}

.guide-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.guide-actions h4 {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.guide-actions ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.hex-tile.pick-reveal {
  --hex-border-color: rgba(74, 212, 255, 0.72);
  animation: pulse-reveal 1.5s ease-in-out infinite;
}

.hex-tile.pick-reveal .hex-face {
  box-shadow: inset 0 0 0 2px rgba(74, 212, 255, 0.75);
}

.hex-tile.pick-reveal.wasteland,
.hex-tile.pick-reveal.face-down,
.hex-tile.tutorial-reveal-target {
  --hex-border-color: rgba(90, 235, 255, 1);
  z-index: 40;
}

.hex-tile.pick-reveal.wasteland .hex-face,
.hex-tile.pick-reveal.face-down .hex-face,
.hex-tile.tutorial-reveal-target .hex-face {
  filter: grayscale(0.08) brightness(1.18) saturate(1.15) !important;
  box-shadow:
    inset 0 0 0 3px rgba(120, 240, 255, 0.98),
    inset 0 0 28px rgba(80, 210, 255, 0.55);
}

.hex-tile.pick-reveal.wasteland .hex-overlay,
.hex-tile.pick-reveal.face-down .hex-overlay,
.hex-tile.tutorial-reveal-target .hex-overlay {
  background: linear-gradient(180deg, rgba(80, 220, 255, 0.4) 0%, rgba(20, 50, 70, 0.22) 100%);
  animation: hex-move-glow 1.6s ease-in-out infinite;
}

.hex-tile.pick-reveal.wasteland .hex-mist,
.hex-tile.pick-reveal.face-down .hex-mist,
.hex-tile.tutorial-reveal-target .hex-mist {
  opacity: 0.22;
}

.hex-tile.pick-reveal.wasteland .name,
.hex-tile.pick-reveal.face-down .name,
.hex-tile.tutorial-reveal-target .name {
  font-weight: 800;
}

.hex-reveal-cue {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  font-size: calc(0.58rem * var(--hex-scale, 1.72));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8fbff;
  text-shadow: 0 0 8px #4ad4ff, 0 1px 2px #000;
  animation: hex-reveal-cue-pulse 1.2s ease-in-out infinite;
}

@keyframes hex-reveal-cue-pulse {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hex-reveal-cue {
    animation: none;
  }
}

.hex-tile.pick-forget {
  --hex-border-color: rgba(255, 107, 107, 0.72);
  animation: pulse-forget 1.5s ease-in-out infinite;
}

.hex-tile.pick-forget .hex-face {
  box-shadow: inset 0 0 0 2px rgba(255, 107, 107, 0.75);
}

.hex-tile.pick-choose {
  --hex-border-color: rgba(186, 140, 255, 0.8);
  animation: pulse-choose 1.5s ease-in-out infinite;
}

.hex-tile.pick-choose .hex-face {
  box-shadow: inset 0 0 0 2px rgba(201, 160, 255, 0.78);
}

.hex-tile.just-revealed,
.hex-tile.just-forgotten {
  z-index: 40;
}

.hex-materialize {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hex-tile.just-revealed .hex-mat-from {
  filter: grayscale(0.55) brightness(0.78);
  animation: hex-mist-out 1.24s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-revealed .hex-mat-to {
  animation: hex-art-in 1.36s cubic-bezier(0.33, 0.05, 0.2, 1) both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-forgotten .hex-mat-to {
  animation: hex-waste-in 0.78s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-forgotten .hex-forget-from {
  filter: none;
  animation: hex-art-out 0.72s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-revealed .name {
  animation: hex-name-in 1.36s cubic-bezier(0.33, 0.05, 0.2, 1) both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-revealed .hex-overlay {
  animation: hex-overlay-in 1.36s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-revealed .hex-mist {
  animation: hex-mist-settle 1.36s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-forgotten .name-leaving,
.hex-tile.just-forgotten .name-arriving {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  z-index: 3;
}

.hex-tile.just-forgotten .name-leaving {
  animation: hex-name-out 0.48s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-forgotten .name-arriving {
  opacity: 0;
  animation: hex-name-in 0.5s ease both;
  animation-delay: calc(var(--hex-flip-elapsed, 0ms) + 380ms);
}

.hex-tile.just-revealed::after,
.hex-tile.just-forgotten::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hex-tile.just-revealed::after {
  background: linear-gradient(180deg, rgba(232, 250, 255, 0.72), transparent 46%);
  mix-blend-mode: screen;
  animation: hex-reveal-wash 1.24s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.just-forgotten::after {
  background: linear-gradient(180deg, transparent 20%, rgba(48, 10, 22, 0.55));
  animation: hex-forget-wash 0.72s ease both;
  animation-delay: var(--hex-flip-elapsed, 0ms);
}

.hex-tile.hex-ripple-reveal {
  animation: hex-tile-ripple 0.52s ease-out var(--ripple-delay, 0ms) both;
}

.hex-tile.hex-ripple-forget {
  animation: hex-tile-ripple-dark 0.42s ease-out var(--ripple-delay, 0ms) both;
}

@keyframes hex-art-in {
  0% { opacity: 0; filter: brightness(1.7) saturate(0.25); }
  42% { opacity: 0.22; filter: brightness(1.35) saturate(0.55); }
  100% { opacity: 1; }
}

@keyframes hex-mist-out {
  0%, 18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hex-art-out {
  0% { opacity: 1; filter: none; }
  100% { opacity: 0; filter: grayscale(1) brightness(0.7); }
}

@keyframes hex-waste-in {
  0%, 28% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hex-name-in {
  0%, 34% { opacity: 0; letter-spacing: 0.16em; transform: translateY(4px); }
  100% { opacity: 1; letter-spacing: normal; transform: none; }
}

@keyframes hex-name-out {
  0% { opacity: 1; letter-spacing: normal; transform: none; }
  100% { opacity: 0; letter-spacing: 0.12em; transform: translateY(6px); }
}

@keyframes hex-overlay-in {
  0%, 42% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hex-mist-settle {
  0%, 48% { opacity: 0; }
  100% { opacity: 0.55; }
}

@keyframes hex-reveal-wash {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@keyframes hex-forget-wash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hex-tile-ripple {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.34); }
  100% { filter: brightness(1); }
}

@keyframes hex-tile-ripple-dark {
  0% { filter: brightness(1); }
  42% { filter: brightness(0.68) saturate(0.72); }
  100% { filter: brightness(1); }
}

.hex-occupant-token.is-arriving,
.hex-occupant-token.is-departing {
  opacity: 0;
}

.hex-tile.hex-flash-reveal {
  animation: hex-flash-reveal 0.75s ease;
}

.hex-tile.hex-flash-forget {
  animation: hex-flash-forget 0.85s ease;
}

.hex-tile.hex-mindstream-hit {
  animation: hex-mindstream-hit 0.65s ease;
}

.hex-tile.hex-event-wasted {
  animation: hex-event-wasted 0.75s ease;
}

.hex-tile.hex-encounter-spawn {
  animation: hex-encounter-spawn 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 4;
}

.hex-tile.bed-final {
  --hex-border-color: rgba(255, 215, 0, 0.62);
}

.hex-tile.bed-final .hex-face {
  box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.55);
}

@keyframes pulse-reveal {
  0%, 100% { box-shadow: 0 0 8px rgba(74, 212, 255, 0.4); }
  50% { box-shadow: 0 0 20px rgba(74, 212, 255, 0.8); }
}

@keyframes pulse-forget {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 107, 0.35); }
  50% { box-shadow: 0 0 18px rgba(255, 107, 107, 0.7); }
}

@keyframes pulse-choose {
  0%, 100% { box-shadow: 0 0 8px rgba(186, 140, 255, 0.4); }
  50% { box-shadow: 0 0 22px rgba(201, 160, 255, 0.85); }
}

@keyframes hex-forget {
  0% { transform: translate(-50%, -50%) scale(1); filter: none; opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(0.96); filter: grayscale(0.5) brightness(0.7); }
  100% { transform: translate(-50%, -50%) scale(0.92); filter: grayscale(1) brightness(0.45); opacity: 0.75; }
}

@keyframes hex-flash-reveal {
  0%, 100% { box-shadow: 0 0 0 rgba(74, 212, 255, 0); }
  35% { box-shadow: 0 0 28px rgba(74, 212, 255, 0.85), inset 0 0 20px rgba(74, 212, 255, 0.25); }
}

@keyframes hex-flash-forget {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 107, 107, 0); filter: none; }
  30% { box-shadow: 0 0 24px rgba(255, 107, 107, 0.75); filter: grayscale(0.6) brightness(0.75); }
  70% { transform: translate(-50%, -50%) scale(0.94); }
}

@keyframes hex-mindstream-hit {
  0%, 100% { box-shadow: none; transform: translate(-50%, -50%); }
  40% { box-shadow: 0 0 22px rgba(201, 160, 255, 0.7); transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes hex-event-wasted {
  0%, 100% { box-shadow: none; transform: translate(-50%, -50%); }
  35% { box-shadow: 0 0 22px rgba(232, 120, 120, 0.7); transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes hex-encounter-spawn {
  0% { transform: translate(-50%, -50%) scale(0.9); filter: brightness(1.4); }
  25% { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 30px rgba(232, 72, 72, 0.75); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: none; filter: none; }
}

.hex-tile.hex-meet-accept {
  animation: hex-meet-accept 0.7s ease;
}

.hex-tile.hex-meet-reject {
  animation: hex-meet-reject 0.7s ease;
}

.hex-tile.hex-psyche-gold {
  animation: hex-psyche-gold 0.72s ease;
}

@keyframes hex-meet-accept {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 28px rgba(180, 160, 255, 0.85), 0 0 16px rgba(240, 201, 106, 0.45); }
}

@keyframes hex-meet-reject {
  0%, 100% { box-shadow: none; filter: none; }
  35% { box-shadow: 0 0 28px rgba(255, 90, 40, 0.8); filter: contrast(1.15) brightness(1.08); }
}

@keyframes hex-psyche-gold {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 26px rgba(240, 201, 106, 0.9); }
}

.guide-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.guide-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
}

.guide-step-compact {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.guide-tip-inline {
  color: var(--accent);
  font-style: italic;
}

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

.action-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.action-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 5.5rem;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.action-more {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  background: rgba(0, 0, 0, 0.15);
}

.action-more summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.action-more summary::-webkit-details-marker { display: none; }

.action-more-inner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.hand-hint {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.tutorial-brief {
  position: fixed;
  inset: 0;
  z-index: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.tutorial-brief.hidden {
  display: none;
}

.tutorial-brief-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 10, 0.82);
}

.tutorial-brief-card {
  position: relative;
  z-index: 1;
  width: min(920px, 96vw);
  max-height: min(90vh, 920px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

.tutorial-brief-header {
  padding: 1.35rem 1.75rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.tutorial-brief-header h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: #fff;
}

.tutorial-brief-header p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.tutorial-brief-body {
  overflow-y: auto;
  padding: 1.25rem 1.75rem 1rem;
  flex: 1;
  min-height: 0;
}

.tutorial-brief-page h2 {
  display: none;
}

.tutorial-brief-page .rules-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.tutorial-brief-page .overview-block h3 {
  font-size: 0.95rem;
}

.tutorial-brief-page .overview-block p,
.tutorial-brief-page .overview-block ul {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.tutorial-brief-page .overview-block ul {
  margin-top: 0.45rem;
}

.tutorial-brief-outcomes {
  margin-top: 1rem;
}

.tutorial-brief-outcomes ul {
  margin-bottom: 0;
}

.tutorial-brief-rem li {
  margin-bottom: 0.35rem;
}

.tutorial-brief-note,
.tutorial-brief-footer-note {
  margin-top: 0.65rem !important;
  font-size: 0.92rem !important;
  color: var(--gold) !important;
}

.tutorial-brief-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.75rem 1.35rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.tutorial-brief-footer .btn {
  font-size: 1.1rem;
  padding: 0.7rem 1.5rem;
}

.tutorial-brief-page .overview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 720px) {
  .tutorial-brief-page .overview-cols {
    grid-template-columns: 1fr;
  }
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 740;
  pointer-events: none;
}

.tutorial-overlay:not(.hidden) { pointer-events: none; }

.tutorial-backdrop {
  display: none;
}

.tutorial-card {
  position: fixed;
  z-index: 210;
  left: 1.5rem;
  top: auto;
  bottom: auto;
  width: min(34vw, 420px);
  min-width: 300px;
  max-width: min(440px, calc(100vw - 2rem));
  height: auto;
  min-height: 280px;
  max-height: min(58vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: auto;
}

.tutorial-card.is-dragging,
.tutorial-card.is-resizing {
  user-select: none;
  cursor: grabbing;
}

.tutorial-card.tutorial-card-sized .tutorial-card-body {
  flex: 1;
  min-height: 0;
}

.tutorial-card.tutorial-minimized {
  max-height: none;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
}

.tutorial-card.tutorial-minimized .tutorial-card-body,
.tutorial-card.tutorial-minimized .tutorial-card-resize-handle {
  display: none !important;
}

.tutorial-card.tutorial-minimized .tutorial-card-header {
  border-bottom: none;
  padding: 0.45rem 0.65rem 0.45rem 0.85rem;
  min-height: 2.5rem;
}

.tutorial-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
}

.tutorial-card.is-dragging .tutorial-card-header {
  cursor: grabbing;
}

.tutorial-card-drag-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutorial-card-window-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tutorial-window-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

:where(html:not([data-hover="false"])) .tutorial-window-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

.tutorial-card-body {
  overflow-y: auto;
  padding: 0.9rem 1.25rem 1rem;
  flex: 1 1 auto;
  min-height: 0;
}

.tutorial-card-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.25rem;
  height: 1.25rem;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
}

.tutorial-card-resize-handle::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255, 255, 255, 0.35);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}

.tutorial-progress {
  font-size: 0.95rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.tutorial-progress-wrap {
  margin-bottom: 0.55rem;
}

.tutorial-progress-bar {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.tutorial-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #e8d27a);
  transition: width 0.25s ease;
}

.tutorial-jump-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.tutorial-jump-label {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.tutorial-jump-select {
  flex: 1;
  min-width: 12rem;
  font-size: 1.05rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.tutorial-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.tutorial-card p {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  font-size: 1.15rem;
}

#tutorial-body {
  display: block;
  margin: 0 0 0.65rem;
  color: rgba(226, 214, 255, 0.88);
  font-size: 0.98rem;
  line-height: 1.45;
}

#tutorial-body[hidden] {
  display: none !important;
}

.tutorial-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.tutorial-actions-main {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Play stacking (root):
   deck-pressure banner        table bottom dock
   HUD / board / hand          auto–152
   play top-bar                600  (in-bar dropdowns stay in this context)
   portaled more menu          790  (escapes the bar; under dialogs)
   tutorial sparkles + flyer   680  (must sit above HUD chrome)
   tutorial overlay + card     740
   tutorial brief              750
   utility modal               800
   dreamer overlay             840
   dreamer tooltip             1200
   card detail (zoomed)        8800
   choice dock                 8600
   pause                       11500 (above dice battles)
   dice battle stage           11000
   dev console                 10000 */
.tutorial-highlight {
  position: relative;
  z-index: 150;
}

.tutorial-sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 680;
  pointer-events: none;
  overflow: hidden;
}

.tutorial-spotlight {
  position: fixed;
  border-radius: calc(var(--radius) + 6px);
  pointer-events: none;
  transition: opacity 0.35s ease;
  --sparkle-count: 28;
}

.tutorial-spotlight.hidden {
  display: none;
}

.tutorial-spotlight-glow {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 85% 70% at 28% 38%, rgba(255, 248, 220, 0.1), transparent 72%),
    radial-gradient(ellipse 70% 85% at 72% 62%, rgba(200, 160, 255, 0.07), transparent 74%);
  filter: blur(1px);
  opacity: 0.22;
  animation: tutorial-lavalamp-a 7.5s ease-in-out infinite;
}

.tutorial-spotlight-glow-alt {
  inset: -8px;
  background:
    radial-gradient(ellipse 60% 55% at 55% 45%, rgba(240, 201, 106, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 60% at 35% 70%, rgba(140, 200, 255, 0.05), transparent 68%);
  animation: tutorial-lavalamp-b 9s ease-in-out infinite;
  opacity: 0.16;
}

.tutorial-spotlight-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 248, 230, 0.22);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 8px rgba(255, 248, 220, 0.14);
  animation: tutorial-ring-pulse 3.6s ease-in-out infinite;
}

.tutorial-spotlight-sparkles {
  position: absolute;
  inset: -6px;
  animation: tutorial-ring-rotate 36s linear infinite;
}

.tutorial-sparkle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  --orbit-r: 42px;
  animation: tutorial-sparkle-orbit 5.4s ease-in-out infinite;
  animation-delay: calc(var(--sparkle-i) * -0.14s);
}

.tutorial-sparkle-rays {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent 42%, rgba(255, 248, 230, 0.7) 50%, transparent 58%),
    linear-gradient(90deg, transparent 42%, rgba(255, 248, 230, 0.65) 50%, transparent 58%),
    linear-gradient(45deg, transparent 44%, rgba(240, 201, 106, 0.45) 50%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(200, 170, 255, 0.4) 50%, transparent 56%);
  filter: blur(0.3px);
  opacity: 0.72;
  animation: tutorial-rays-spin 4.8s linear infinite;
  animation-delay: calc(var(--sparkle-i) * -0.2s);
}

.tutorial-sparkle-star {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 252, 240, 0.98);
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.98),
    0 0 12px rgba(255, 248, 220, 0.85),
    0 0 20px rgba(240, 201, 106, 0.65),
    0 0 32px rgba(180, 140, 255, 0.45);
  animation: tutorial-sparkle-twinkle 2.6s ease-in-out infinite;
  animation-delay: calc(var(--sparkle-i) * -0.09s);
}

.tutorial-spotlight-arriving .tutorial-spotlight-ring {
  animation: tutorial-ring-pop 0.52s ease-out;
}

.tutorial-spotlight-traveling {
  opacity: 0.55;
  transform: scale(0.98);
}

.turn-halo-layer {
  z-index: 620;
}

.tutorial-spotlight.turn-halo {
  border-radius: 50%;
  opacity: 0.78;
}

.turn-halo .tutorial-spotlight-glow {
  opacity: 0.34;
  inset: -2px;
}

.turn-halo .tutorial-spotlight-glow-alt {
  opacity: 0.2;
}

.turn-halo .tutorial-spotlight-ring {
  border-radius: 50%;
}

.turn-halo .tutorial-sparkle-star {
  font-size: 8px;
}

.turn-halo .tutorial-sparkle-rays {
  opacity: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  .turn-halo .tutorial-spotlight-sparkles,
  .turn-halo .tutorial-sparkle,
  .turn-halo .tutorial-sparkle-rays,
  .turn-halo .tutorial-sparkle-star {
    animation: none;
  }
}

.tutorial-flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.tutorial-flyer.hidden {
  display: none;
}

.tutorial-flyer-core {
  display: block;
  font-size: 1.65rem;
  color: rgba(255, 252, 240, 0.95);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 248, 220, 0.7),
    0 0 24px rgba(240, 201, 106, 0.55),
    0 0 36px rgba(180, 140, 255, 0.35);
  animation: tutorial-flyer-spin 0.55s linear infinite;
}

.tutorial-flyer-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 248, 220, 0.42), rgba(240, 201, 106, 0.18) 45%, transparent 72%);
  filter: blur(3px);
  animation: tutorial-flyer-trail 0.55s ease-in-out infinite alternate;
}

.tutorial-flyer-active .tutorial-flyer-core {
  animation: tutorial-flyer-spin 0.32s linear infinite, tutorial-flyer-pulse 0.45s ease-in-out infinite alternate;
}

@keyframes tutorial-lavalamp-a {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.62; }
  33% { transform: scale(1.07) translate(2%, -1.5%); opacity: 0.82; }
  66% { transform: scale(0.96) translate(-1.5%, 2%); opacity: 0.7; }
}

@keyframes tutorial-lavalamp-b {
  0%, 100% { transform: scale(1.02) translate(0, 0); opacity: 0.45; }
  40% { transform: scale(1.08) translate(-2%, 1%); opacity: 0.68; }
  75% { transform: scale(0.94) translate(1.5%, -1%); opacity: 0.52; }
}

@keyframes tutorial-ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tutorial-rays-spin {
  from { transform: rotate(0deg) scale(0.9); }
  to { transform: rotate(360deg) scale(1.05); }
}

@keyframes tutorial-glow-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes tutorial-ring-pulse {
  0%, 100% {
    border-color: rgba(255, 248, 230, 0.2);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 6px rgba(255, 248, 220, 0.12);
  }
  50% {
    border-color: rgba(255, 252, 245, 0.34);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 0 10px rgba(255, 248, 230, 0.2);
  }
}

@keyframes tutorial-ring-pop {
  0% { transform: scale(0.9); opacity: 0.35; }
  70% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tutorial-sparkle-orbit {
  0% {
    transform: rotate(calc(var(--sparkle-i) * (360deg / var(--sparkle-count)))) translateY(calc(-1 * var(--orbit-r))) scale(0.88);
    opacity: 0.45;
  }
  25% {
    opacity: 0.78;
    transform: rotate(calc(var(--sparkle-i) * (360deg / var(--sparkle-count)) + 90deg)) translateY(calc(-1 * var(--orbit-r) - 5px)) scale(1.04);
  }
  50% {
    opacity: 0.95;
    transform: rotate(calc(var(--sparkle-i) * (360deg / var(--sparkle-count)) + 180deg)) translateY(calc(-1 * var(--orbit-r) - 2px)) scale(1.12);
  }
  75% {
    opacity: 0.72;
    transform: rotate(calc(var(--sparkle-i) * (360deg / var(--sparkle-count)) + 270deg)) translateY(calc(-1 * var(--orbit-r) + 3px)) scale(0.98);
  }
  100% {
    transform: rotate(calc(var(--sparkle-i) * (360deg / var(--sparkle-count)) + 360deg)) translateY(calc(-1 * var(--orbit-r))) scale(0.88);
    opacity: 0.45;
  }
}

@keyframes tutorial-sparkle-twinkle {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -52%) scale(0.82); }
  50% { opacity: 1; transform: translate(-50%, -52%) scale(1.2); }
}

@keyframes tutorial-flyer-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes tutorial-flyer-pulse {
  from { filter: brightness(1) saturate(1); }
  to { filter: brightness(1.25) saturate(1.15); }
}

@keyframes tutorial-flyer-trail {
  from { transform: scale(0.7); opacity: 0.35; }
  to { transform: scale(1.2); opacity: 0.72; }
}

body.tutorial-mode-active .tutorial-sparkle-layer {
  pointer-events: none;
}

.tutorial-card .tutorial-actions .btn {
  font-size: 1.1rem;
  padding: 0.65rem 1.35rem;
  min-height: 2.75rem;
}

.tutorial-card.tutorial-waiting .tutorial-next-hint {
  display: block;
  font-size: 1.05rem;
  color: #f0c96a;
  margin: 0.35rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  line-height: 1.45;
  background: rgba(240, 201, 106, 0.12);
  border-radius: 10px;
  border-left: 3px solid #f0c96a;
}

.tutorial-card.tutorial-waiting .tutorial-next-hint strong {
  color: #fff8dc;
  font-weight: 600;
}

.tutorial-card:not(.tutorial-waiting) .tutorial-next-hint {
  display: block;
  font-size: 1.05rem;
  color: var(--success);
  margin: 0.5rem 0 1rem;
}

.tutorial-next-hint { display: none; }
.tutorial-next-hint:empty { display: none !important; }

.tutorial-card .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.tutorial-mode-active .tutorial-overlay {
  pointer-events: none;
}

body.tutorial-mode-active .tutorial-backdrop {
  pointer-events: none;
  background: transparent;
}

body.tutorial-mode-active .tutorial-card {
  pointer-events: auto;
}

body.tutorial-mode-active .tutorial-highlight {
  pointer-events: auto;
}

body.tutorial-mode-active #hand-bar:has(.tutorial-highlight) {
  overflow: visible;
  z-index: 151;
}

body.tutorial-mode-active #dreamer-dock.tutorial-highlight {
  z-index: 152;
}

body.tutorial-mode-active #board-viewport.tutorial-highlight {
  z-index: 151;
}

body.tutorial-mode-active .hex-occupant-dreamer.tutorial-highlight,
body.tutorial-mode-active .radial-menu-item.tutorial-highlight {
  animation: advance-glow 2.8s ease-in-out infinite;
}

body.tutorial-mode-active .radial-menu-item.tutorial-highlight:not(:disabled) {
  box-shadow: 0 4px 24px rgba(123, 92, 255, 0.5);
}

.rules-modal h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
}

.rules-modal h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.rules-lead { color: var(--muted); margin-bottom: 1rem; }

.rules-rounds {
  padding-left: 1.25rem;
  line-height: 1.6;
}

.rules-rounds li { margin-bottom: 0.5rem; }

.rules-suit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rules-modal ul {
  padding-left: 1.25rem;
  line-height: 1.55;
  color: var(--muted);
}

.overview-page h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.overview-tagline {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.overview-block {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.overview-block:last-of-type { border-bottom: none; }

.overview-block h3 {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.overview-block p,
.overview-block ul {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.overview-block ul {
  padding-left: 1.15rem;
}

.overview-phases {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.overview-phase {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--border);
}

.overview-phase.suit-lucidity { border-left-color: var(--lucidity); }
.overview-phase.suit-elasticity { border-left-color: var(--elasticity); }
.overview-phase.suit-willpower { border-left-color: var(--willpower); }

.overview-phase-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.overview-phase p { font-size: 0.82rem; }

.overview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.overview-footer {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Full-screen Dream Guide ── */
.utility-content.rules-reference-modal,
.utility-content.info-hub-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}

.utility-content.info-hub-modal #utility-modal-body,
.utility-content.info-hub-modal .rules-modal {
  height: 100%;
}

#utility-modal:has(.info-hub-modal) .utility-close {
  display: none;
}

.rules-reference-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.rules-reference-tab {
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

:where(html:not([data-hover="false"])) .rules-reference-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}

.rules-reference-tab.active {
  border-color: var(--accent);
  background: rgba(122, 162, 255, 0.12);
  color: var(--text);
}

.rules-reference-panels {
  max-height: min(72vh, 680px);
  overflow-y: auto;
  padding-right: 0.25rem;
}

.rules-reference-panel {
  display: none;
}

.rules-reference-panel.active {
  display: block;
}

.rules-page h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.rules-formula {
  margin: 0 0 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--accent);
}

.rules-page-details h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.88rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rules-page-details h3:first-of-type {
  margin-top: 0.5rem;
}

.rules-page-details ul,
.rules-page-rem ul {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

.rules-page-rem .overview-phase ul {
  margin-top: 0.35rem;
}

.end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem 0;
}

.field select {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    var(--bg-card);
  color: var(--text);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  font: inherit;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 4px 0 rgba(16, 10, 32, 0.72),
    0 8px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.08s ease, border-color 0.15s, box-shadow 0.08s ease, background 0.15s, filter 0.12s;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.28), transparent 62%);
  opacity: 0;
  pointer-events: none;
}

.btn.ripple::after {
  opacity: 1;
  transition: opacity 0.35s ease;
}

:where(html:not([data-hover="false"])) .btn:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 5px 0 rgba(16, 10, 32, 0.72),
    0 12px 20px rgba(123, 92, 255, 0.28);
}

.btn:active:not(:disabled),
.btn.is-pressed:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(16, 10, 32, 0.65);
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 236, 186, 0.9);
  outline-offset: 3px;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent-strong), #5a8dff, #7b5cff);
  background-size: 200% 200%;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  animation: btn-shimmer 5s ease-in-out infinite;
}

#screen-game .btn.primary {
  margin-top: 0;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.85rem;
}

.game-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--sidebar-w);
  gap: 0;
  min-height: 0;
  height: 100%;
}

.sidebar {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  overflow: auto;
}

.sidebar h3 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.sidebar-hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: #c8c0e8;
  letter-spacing: 0;
  text-transform: none;
}

.table-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.65rem;
  padding: 0.4rem 0.55rem;
  flex-shrink: 0;
  max-height: var(--chrome-h);
  overflow: auto;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.22);
}

.guide-toggle {
  flex: 0 0 auto;
  font-size: 0.92rem;
  font-weight: 600;
}

.guide-panel-wrap {
  flex: 1 1 100%;
  min-width: 0;
}

.guide-panel-wrap.collapsed {
  display: none;
}

.table-chrome .narrator-panel {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  max-height: calc(var(--chrome-h) - 1rem);
  overflow: auto;
}

.table-chrome .phase-stepper {
  flex: 0 0 auto;
  padding: 0.25rem 0.45rem;
  margin: 0;
  border: none;
  background: transparent;
}

.table-chrome .guide-panel {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.65rem;
}

.table-chrome .phase-banner {
  display: none;
}

.table-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 24%);
  gap: 0.5rem;
  align-items: start;
  padding: 0.35rem 0.55rem;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.28);
  max-height: var(--footer-h);
  overflow: auto;
}

.board-viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: block;
  padding: 0;
  touch-action: none;
}

.board-viewport.board-pan-ready {
  cursor: grab;
}

.board-viewport.board-panning {
  cursor: grabbing;
}

.board-viewport.board-panning .hex-tile {
  pointer-events: none;
}

.board-zoom-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}

.board-viewport::after {
  content: "F fit table · scroll zoom · arrow keys or Space+drag pan";
  position: absolute;
  left: 0.65rem;
  right: auto;
  bottom: 0.45rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(240, 201, 106, 0.45);
  pointer-events: none;
  z-index: 2;
}

html[data-touch="true"] .board-viewport::after {
  content: "Pinch to zoom · drag to pan";
}

html[data-pointer="hybrid"] .board-viewport::after {
  content: "Pinch or scroll to zoom · drag or Space+drag to pan";
}

.board-camera-controls {
  position: absolute;
  right: max(0.5rem, env(safe-area-inset-right));
  bottom: max(0.5rem, env(safe-area-inset-bottom));
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: auto;
}

.btn-next-phase,
.btn-map-back,
.btn-draw-dream {
  position: absolute;
  top: max(0.55rem, env(safe-area-inset-top));
  z-index: 32;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0.35rem;
  border-radius: 50%;
  font: 700 0.72rem/1.15 var(--font-display, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.btn-next-phase {
  right: max(0.55rem, env(safe-area-inset-right));
  border: 2px solid var(--elasticity);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 220, 0.4), transparent 42%),
    linear-gradient(160deg, #7a5a10, #3a2808);
  color: #fff6c4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(240, 200, 48, 0.4);
}

.btn-next-phase.tint-explore {
  border-color: var(--elasticity);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 210, 0.42), transparent 44%),
    linear-gradient(160deg, #b8860a, #5a3c08);
  color: #fff8c8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(240, 200, 48, 0.5);
}

.btn-next-phase.tint-meet {
  border-color: var(--willpower);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 200, 200, 0.35), transparent 44%),
    linear-gradient(160deg, #8a2020, #3a0c0c);
  color: #ffd4d4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(232, 72, 72, 0.45);
}

.btn-next-phase.tint-reveal {
  border-color: var(--lucidity);
  background:
    radial-gradient(circle at 30% 25%, rgba(200, 230, 255, 0.4), transparent 44%),
    linear-gradient(160deg, #1d4f9a, #0b1c40);
  color: #dceeff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 158, 255, 0.45);
}

/* Soft pulse once the phase budget is spent — reminds the table to advance. */
.btn-next-phase.phase-exhausted-glow:not(:disabled) {
  animation: next-phase-exhausted-glow 2.4s ease-in-out infinite;
}

.btn-next-phase.phase-exhausted-glow.tint-explore:not(:disabled) {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(240, 200, 48, 0.55),
    0 0 36px rgba(255, 220, 90, 0.35);
}

.btn-next-phase.phase-exhausted-glow.tint-meet:not(:disabled) {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(232, 72, 72, 0.5),
    0 0 36px rgba(255, 120, 120, 0.32);
}

.btn-next-phase.phase-exhausted-glow.tint-reveal:not(:disabled) {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(74, 158, 255, 0.55),
    0 0 36px rgba(120, 190, 255, 0.35);
}

@keyframes next-phase-exhausted-glow {
  0%, 100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.14);
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-next-phase.phase-exhausted-glow:not(:disabled) {
    animation: none;
    filter: brightness(1.1);
  }
}

.btn-map-back {
  left: calc(var(--map-chrome-left, 0px) + 0.4rem);
  border: 2px solid rgba(230, 210, 255, 0.95);
  background:
    radial-gradient(circle at 30% 25%, rgba(245, 230, 255, 0.45), transparent 42%),
    linear-gradient(160deg, #6a4aa0, #2a1848);
  color: #fff8ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(201, 160, 255, 0.55);
}

.btn-draw-dream {
  right: calc(max(0.55rem, env(safe-area-inset-right)) + 5.4rem);
  border: 2px solid var(--lucidity);
  background:
    radial-gradient(circle at 30% 25%, rgba(210, 235, 255, 0.45), transparent 44%),
    linear-gradient(160deg, #2a62b8, #0c2048);
  color: #e8f4ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 158, 255, 0.5);
}

:where(html:not([data-hover="false"])) .btn-next-phase:hover:not(:disabled),
.btn-next-phase:focus-visible:not(:disabled),
:where(html:not([data-hover="false"])) .btn-map-back:hover:not(:disabled),
.btn-map-back:focus-visible:not(:disabled),
:where(html:not([data-hover="false"])) .btn-draw-dream:hover:not(:disabled),
.btn-draw-dream:focus-visible:not(:disabled) {
  transform: scale(1.06);
  outline: 2px solid rgba(240, 201, 106, 0.9);
  outline-offset: 2px;
}

.btn-next-phase:disabled,
.btn-map-back:disabled,
.btn-draw-dream:disabled {
  opacity: 0.72;
  cursor: default;
  transform: none;
}

.btn-next-phase.hidden,
.btn-next-phase[hidden],
.btn-draw-dream.hidden,
.btn-draw-dream[hidden] {
  display: none !important;
}

.board-camera-controls button {
  min-width: 36px;
  min-height: 36px;
  padding: 0 0.55rem;
  border: 1px solid rgba(201, 160, 255, 0.45);
  border-radius: 10px;
  background: rgba(12, 8, 24, 0.82);
  color: #f4ebff;
  font: 600 0.95rem/1 var(--font-ui, inherit);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: manipulation;
}

.board-camera-controls button:focus-visible {
  outline: 2px solid rgba(240, 201, 106, 0.9);
  outline-offset: 2px;
}

html[data-touch="true"] .board-camera-controls button,
html[data-pointer="coarse"] .board-camera-controls button {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.15rem;
}

.hex-board {
  display: block;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}

.center-stage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  min-width: 0;
}

.phase-banner {
  text-align: center;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.35rem 0.5rem;
  border: 1px dashed rgba(240, 201, 106, 0.35);
  border-radius: 10px;
  background: rgba(240, 201, 106, 0.06);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.moment-overlay-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  width: 100%;
  pointer-events: none;
}

.moment-toast {
  pointer-events: none;
  max-width: min(92%, 34rem);
  padding: 0.55rem 1.05rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: #f5e6b8;
  background: rgba(8, 6, 18, 0.92);
  border: 1px solid rgba(240, 201, 106, 0.5);
  border-radius: 12px;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(201, 160, 255, 0.12);
  opacity: 0;
}

.moment-toast.is-playing {
  animation: moment-toast-in var(--moment-duration, 14s) ease forwards;
}

.moment-toast.is-fading {
  animation: moment-toast-out 0.3s ease forwards;
}

@keyframes moment-toast-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  4% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  92% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}

@keyframes moment-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.guide-panel,
.phase-stepper {
  flex-shrink: 0;
}

#screen-game .phase-actions {
  flex-shrink: 0;
  gap: 0.14rem;
}

#screen-game .game-log {
  min-height: 2.5rem;
  max-height: 5.5rem;
  margin: 0;
  font-size: 0.75rem;
}

.hex-tile {
  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  --hex-border-width: calc(2px * var(--hex-scale, 1));
  position: absolute;
  width: calc(var(--hex-size, 58px) * 1.732050808);
  height: calc(var(--hex-size, 58px) * 2);
  transform: translate3d(-50%, -50%, 0);
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--hex-border-color, rgba(150, 140, 170, 0.32));
  clip-path: var(--hex-clip);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
  overflow: hidden;
  isolation: isolate;
}

.hex-tile .hex-face {
  position: absolute;
  inset: var(--hex-border-width);
  clip-path: var(--hex-clip);
  background-color: #120f22;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hex-tile .hex-overlay {
  position: absolute;
  inset: var(--hex-border-width);
  clip-path: var(--hex-clip);
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.hex-tile .hex-occupants {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hex-tile .hex-occupant-token {
  position: absolute;
  left: var(--snap-x, 50%);
  top: var(--snap-y, 50%);
  width: 32%;
  height: 28%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center 18%;
  background: rgba(8, 6, 16, 0.72);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  border-radius: calc(5px * var(--hex-scale, 1.72));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42);
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.hex-tile .hex-dusk-badge {
  position: absolute;
  left: var(--snap-x, 50%);
  top: var(--snap-y, 50%);
  transform: translate(55%, -150%);
  z-index: 5;
  padding: 0 0.28em;
  border-radius: 999px;
  background: #3a1630;
  border: 1px solid #ff9f6b;
  color: #ffcfae;
  font-size: calc(0.42rem * var(--hex-scale, 1.72));
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.hex-tile .hex-occupant-token.is-overflow {
  box-shadow: 0 0 0 2px rgba(255, 214, 120, 0.9);
}

.hex-tile .hex-occupant-token:focus-visible {
  transform: translate(-50%, -58%) scale(1.12);
  filter: drop-shadow(0 6px 14px rgba(201, 160, 255, 0.55));
  z-index: 6;
}

@media (hover: hover) {
  html:not([data-hover="false"]) .hex-tile .hex-occupant-token:hover {
    transform: translate(-50%, -58%) scale(1.12);
    filter: drop-shadow(0 6px 14px rgba(201, 160, 255, 0.55));
    z-index: 6;
  }
}

.hex-tile .hex-occupant-dreamer:focus-visible {
  outline: 2px solid rgba(240, 201, 106, 0.9);
  outline-offset: 2px;
}

.hex-tile .hex-occupant-token.is-pressed {
  transform: translate(-50%, -50%) translateY(2px) scale(0.96);
  filter: brightness(1.12) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}

.hex-tile .hex-occupants:has(> .hex-occupant-token:only-child) .hex-occupant-token {
  width: 48%;
  height: 44%;
  top: 62%;
}

.hex-tile:has(.hex-occupant-token) .tokens {
  display: none;
}

.hex-tile:has(.hex-occupant-token ~ .hex-occupant-token) .name:not(.name-leaving):not(.name-arriving) {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  font-size: calc(0.58rem * var(--hex-scale, 1.72));
}

.hex-tile.is-pressed {
  filter: brightness(1.08) saturate(1.05);
}

.hex-tile .hex-occupant-beast {
  max-width: none;
}

.hex-tile .hex-occupant-archetype {
  box-shadow: 0 0 0 2px rgba(240, 201, 106, 0.95), 0 0 14px rgba(240, 201, 106, 0.55);
  object-position: center 20%;
}

.hex-tile.hidden-tile .hex-overlay {
  background: linear-gradient(180deg, rgba(20,10,30,0.3) 0%, rgba(0,0,0,0.75) 100%);
}

@media (hover: hover) {
  html:not([data-hover="false"]) .hex-tile:hover .hex-overlay {
    background: linear-gradient(180deg, rgba(123, 92, 255, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%);
  }

  html:not([data-hover="false"]) .hex-tile:hover .hex-face {
    box-shadow: inset 0 0 0 2px rgba(123, 92, 255, 0.42);
  }
}

.hex-tile.center { --hex-border-color: rgba(240, 201, 106, 0.42); background: rgba(240, 201, 106, 0.42); }
.hex-tile.wasteland .hex-face { filter: grayscale(0.6) brightness(0.7); }
.hex-tile.wasteland .hex-overlay { background: linear-gradient(180deg, rgba(60,40,20,0.2) 0%, rgba(0,0,0,0.7) 100%); }
.hex-tile.hidden-tile .hex-face { filter: grayscale(0.9) brightness(0.5); }
.hex-tile.selected .hex-face {
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}
.hex-tile.has-encounter.selected-encounter .hex-face {
  box-shadow: inset 0 0 0 2px #e88a9a;
}
.hex-tile.quest-highlight:not(.selected) {
  --hex-border-color: rgba(240, 201, 106, 0.62);
}
.hex-tile.quest-highlight:not(.selected) .hex-face {
  box-shadow: inset 0 0 0 2px rgba(240, 201, 106, 0.72);
}
.hex-tile.movable {
  --hex-border-color: rgba(109, 255, 176, 0.78);
}
.hex-tile.movable .hex-face {
  box-shadow: inset 0 0 0 2px rgba(109, 255, 176, 0.92), inset 0 0 22px rgba(109, 255, 176, 0.32);
}
.hex-tile.movable .hex-overlay {
  background: linear-gradient(180deg, rgba(109, 255, 176, 0.26) 0%, rgba(28, 72, 48, 0.2) 100%);
  animation: hex-move-glow 2.1s ease-in-out infinite;
}
@media (hover: hover) {
  html:not([data-hover="false"]) .hex-tile.movable:hover .hex-overlay {
    background: linear-gradient(180deg, rgba(109, 255, 176, 0.38) 0%, rgba(28, 72, 48, 0.28) 100%);
  }
}
body.explore-move-lock .hex-tile:not(.movable):not(.explore-walker) {
  filter: saturate(0.55) brightness(0.72);
}
.hex-tile .hex-occupant-dreamer.is-turn-holder {
  z-index: 8;
  box-shadow: 0 0 0 2px rgba(240, 201, 106, 0.95), 0 0 14px rgba(240, 201, 106, 0.45);
}
body.explore-move-lock .hex-tile .hex-occupant-token {
  pointer-events: none;
}
body.explore-move-lock .hex-tile .hex-occupant-dreamer.is-turn-holder {
  pointer-events: auto;
}
body.explore-move-lock .hex-tile.explore-walker {
  --hex-border-color: rgba(240, 201, 106, 0.92);
}
body.explore-move-lock .hex-tile.explore-walker .hex-face {
  box-shadow: inset 0 0 0 2px rgba(240, 201, 106, 0.85);
}
body.explore-move-lock .hex-tile.move-hover .hex-face {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92), inset 0 0 28px rgba(109, 255, 176, 0.55);
}
#move-preview-line {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(109, 255, 176, 0.2), rgba(109, 255, 176, 0.95));
  border-radius: 2px;
  pointer-events: none;
  z-index: 80;
}
#move-cost-badge {
  position: fixed;
  z-index: 81;
  pointer-events: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(12, 28, 20, 0.92);
  color: #d9ffe8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
#tutorial-skip:disabled {
  opacity: 0.45;
  cursor: default;
}
@keyframes hex-move-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.hex-tile .name {
  font-size: calc(0.78rem * var(--hex-scale, 1.72));
  font-weight: 700;
  line-height: 1.2;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.hex-tile.suit-lucidity .name { color: var(--lucidity); }
.hex-tile.suit-elasticity .name { color: var(--elasticity); }
.hex-tile.suit-willpower .name { color: var(--willpower); }
.hex-tile.center .name { color: var(--gold); }
.hex-tile .suit {
  display: none;
}
.hex-tile .tokens {
  position: absolute;
  bottom: calc(4px * var(--hex-scale, 1.72));
  left: 0;
  right: 0;
  font-size: calc(0.6rem * var(--hex-scale, 1.72));
  color: var(--gold);
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.hex-tile.suit-lucidity { --hex-border-color: rgba(74, 158, 255, 0.38); background: rgba(74, 158, 255, 0.38); }
.hex-tile.suit-elasticity { --hex-border-color: rgba(240, 200, 48, 0.38); background: rgba(240, 200, 48, 0.38); }
.hex-tile.suit-willpower { --hex-border-color: rgba(232, 72, 72, 0.38); background: rgba(232, 72, 72, 0.38); }

.game-log {
  min-height: 56px;
  max-height: 88px;
  overflow: auto;
  font-size: 0.82rem;
  color: var(--muted);
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  line-height: 1.4;
}

.hand-bar {
  margin-top: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.65rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: stretch;
}

.hand-choice-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(42, 28, 16, 0.92), rgba(36, 24, 64, 0.9));
  border: 1px solid rgba(255, 210, 120, 0.5);
  color: #ffe8a8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.hand-choice-bar.hidden {
  display: none;
}

.hand-choice-bar p {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
}

#screen-game .hand-bar:has(.hand-choice-bar:not(.hidden)) {
  grid-template-rows: auto minmax(6.5rem, 1fr);
}

/* The prompt used to share row 1 with the hand, so the cards covered Confirm. */
#screen-game .hand-bar:has(.hand-choice-bar:not(.hidden)) > .hand-choice-bar {
  position: relative;
  z-index: 8;
  pointer-events: auto;
}

#screen-game .hand-bar:has(.hand-choice-bar:not(.hidden)) > :not(.hand-choice-bar) {
  grid-row: 2;
}

#screen-game.active:has(.hand-choice-bar:not(.hidden)) .hand-bar,
#screen-game.active:has(.hand-choice-bar:not(.hidden)) .hand-bar * {
  cursor: pointer !important;
}

#screen-game.active:has(.hand-choice-bar:not(.hidden)) .hand-bar .game-card:disabled,
#screen-game.active:has(.hand-choice-bar:not(.hidden)) .hand-bar .hand-inactive {
  cursor: default !important;
}

.hand-section.hand-choice-target {
  box-shadow: inset 0 0 0 1px rgba(240, 201, 106, 0.6);
  border-radius: 10px;
}

.game-card.phase-suggested:not(.psyche-card):not(.selected) {
  box-shadow: 0 0 0 2px rgba(240, 201, 106, 0.8);
}

.power-section {
  min-width: 100px;
  max-width: 155px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 0.55rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.power-token-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.power-bonus-row {
  display: flex;
  gap: 0.3rem;
  align-items: stretch;
}

.power-bonus-btn {
  align-self: stretch;
  flex: 1 1 0;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.power-bonus-undo:not(:disabled) {
  border-color: rgba(240, 201, 106, 0.45);
  color: #f0c96a;
}

.power-bonus-pending {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gold);
}

.power-bonus-btn.hidden {
  display: none;
}

.power-token-stats {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.67rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
}

.power-token-pending {
  color: var(--gold);
  font-size: 0.64rem;
}

.power-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  min-height: 2.1rem;
  flex: 1 1 auto;
  align-content: flex-start;
  overflow-y: auto;
}

.power-token-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, #f0c96a, #c48a1a);
  color: #1a1208;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(240, 201, 106, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

:where(html:not([data-hover="false"])) .power-token-chip:hover,
.power-token-chip:focus-visible {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 0 0 2px rgba(240, 201, 106, 0.7), 0 4px 10px rgba(0, 0, 0, 0.4);
  outline: none;
}

.power-token-radial-layer {
  position: fixed;
  inset: 0;
  z-index: 10120;
  pointer-events: none;
  visibility: hidden;
}

.power-token-radial-layer.open {
  visibility: visible;
}

.power-token-radial-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(6, 4, 14, 0.22);
  pointer-events: none;
}

.power-token-radial-menu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.power-token-radial-item {
  position: fixed;
  left: var(--px);
  top: var(--py);
  z-index: 2;
  min-width: 6.8rem;
  max-width: 9rem;
  padding: 0.48rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 255, 0.35);
  background: rgba(16, 10, 32, 0.94);
  color: rgba(232, 228, 255, 0.55);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  transition: left 0.12s linear, top 0.12s linear, transform 0.18s ease, opacity 0.18s ease, box-shadow 0.15s ease;
}

.power-token-radial-layer.open .power-token-radial-item {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.power-token-radial-item.ready:not(:disabled) {
  color: var(--text);
  border-color: rgba(240, 201, 106, 0.65);
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.55), rgba(74, 158, 255, 0.4));
  box-shadow: 0 0 14px rgba(240, 201, 106, 0.22);
}

:where(html:not([data-hover="false"])) .power-token-radial-item.ready:not(:disabled):hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 18px rgba(240, 201, 106, 0.4);
}

.power-token-radial-item.is-blocked,
.power-token-radial-item:disabled {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0.72;
}

body.tutorial-mode-active .radial-menu-item.tutorial-highlight {
  pointer-events: auto;
  z-index: 10121;
}

.power-tokens-empty {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}

.hand-section { min-width: 0; }

#screen-game .objects-section,
#screen-game .objects-panel {
  max-width: none;
}

.objects-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

.objects-subsection {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.objects-subsection h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.objects-subsection .objects-row {
  flex: 1 1 auto;
  min-height: 4.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.objects-row { min-height: 72px; }

.hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.5rem;
  min-width: 0;
}

.hand-header-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.hand-header-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hand-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.2;
}

.hand-header-stacked h3 {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hand-stats-line {
  font-size: 0.67rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
}

.hand-hint-subtle {
  font-size: 0.62rem;
  line-height: 1.3;
  white-space: normal;
}

.hand {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.hand-dreamer-display {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  min-height: 124px;
  max-height: none;
  overflow: visible;
  padding: 0.55rem 0.15rem 0.2rem;
  border-radius: 10px;
  transition: box-shadow 0.25s ease;
}

.hand-dreamer-display.hand-switch-sparkle {
  animation: hand-focus-pop 0.48s ease-out;
}

.hand-section-focus {
  animation: hand-section-glow 0.48s ease-out;
}

.hand-primary {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  gap: 0;
  min-width: 0;
  overflow: visible;
  padding: 0.35rem 0.55rem 0.2rem 0.35rem;
}

.hand-primary.empty {
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  min-height: 104px;
}

.hand-spillover::before {
  content: "Allies";
  position: absolute;
  top: -0.05rem;
  left: 0.55rem;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.hand-spillover {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  max-width: 42%;
  padding: 0.65rem 0.35rem 0.1rem 0.55rem;
  margin-left: 0.15rem;
  border-left: 1px dashed rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.hand-primary-empty-note {
  font-size: 0.78rem;
  color: var(--muted);
  align-self: center;
  padding: 0 0.35rem;
}

.hand-spillover.hidden {
  display: none;
}

.hand-spillover .game-card.hand-dense {
  width: 54px;
  min-height: 78px;
  margin-left: -24px;
  z-index: 1;
}

.hand-spillover .game-card.hand-dense:first-child {
  margin-left: 0;
}

:where(html:not([data-hover="false"])) .hand-spillover .game-card.hand-dense:hover {
  z-index: 3;
  transform: translateY(-6px) scale(1.04);
}

.hand-spillover .game-card.hand-dense .psyche-pip .psyche-value {
  font-size: 2.4rem;
}

.hand-spillover .game-card.hand-dense .psyche-label {
  font-size: 0.55rem;
}

.hand-primary .game-card.psyche-card {
  flex: 0 0 auto;
}

.hand-link-sparkle {
  position: fixed;
  z-index: 9500;
  pointer-events: none;
  font-size: 1rem;
  color: #fff8dc;
  text-shadow:
    0 0 6px #fff,
    0 0 14px #f0c96a,
    0 0 22px #c9a0ff;
}

@keyframes hand-focus-pop {
  0% { box-shadow: inset 0 0 0 0 rgba(240, 201, 106, 0); }
  45% { box-shadow: inset 0 0 28px rgba(201, 160, 255, 0.28); }
  100% { box-shadow: inset 0 0 0 rgba(240, 201, 106, 0); }
}

@keyframes hand-section-glow {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}

#screen-game .hand-section:has(.hand-dreamer-display) {
  min-height: 0;
  overflow: visible;
}

#screen-game .psyche-hand-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: visible;
  z-index: 6;
}

#screen-game .psyche-hand-section .hand-header-stacked {
  margin-bottom: 0.3rem;
}

#screen-game .psyche-hand-section .hand-hint-subtle {
  display: none;
}

#screen-game .hand-section:has(.hand-dreamer-display) .hand-header {
  margin-bottom: 0.35rem;
}

.game-card.hand-inactive {
  opacity: 0.45;
  filter: grayscale(0.15);
  cursor: default;
}

:where(html:not([data-hover="false"])) .game-card.hand-inactive:hover {
  transform: none;
  box-shadow: none;
}

.coop-hand-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 100%;
}

.coop-hand-row.focused .coop-hand-label {
  color: var(--accent);
}

.coop-hand-row.meet-actor {
  border-color: var(--accent);
}

.coop-hand-row.meet-actor-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.coop-hand-row.meet-actor-disabled .coop-hand-cards {
  pointer-events: none;
}

.coop-hand-row.best-spender {
  background: rgba(240, 201, 106, 0.06);
  border-radius: 8px;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.coop-hand-row.best-spender .coop-hand-label {
  color: var(--gold);
}

.coop-hand-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.coop-hand-cards {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.coop-hand-cards.empty {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

#hand.coop-mode {
  flex-direction: column;
  align-items: stretch;
  max-height: 220px;
  overflow-y: auto;
}

.game-card {
  flex: 0 0 auto;
  width: 120px;
  min-height: 168px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.game-card.card-enter {
  animation: card-deal 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--deal-i, 0) * 45ms);
}

@media (hover: hover) {
  html:not([data-hover="false"]) .game-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow:
      0 22px 28px rgba(6, 4, 16, 0.48),
      0 8px 12px rgba(0, 0, 0, 0.28);
  }
}

.game-card:active,
.game-card.is-pressed {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(12, 8, 24, 0.45);
}

.game-card.selected {
  outline: 2px solid rgba(180, 255, 255, 0.7);
  box-shadow:
    0 0 0 1px rgba(201, 160, 255, 0.45),
    0 0 22px rgba(123, 92, 255, 0.55),
    0 0 36px rgba(120, 220, 255, 0.28);
  animation: card-selected-pulse 1.8s ease-in-out infinite;
}

.game-card.selected::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  opacity: 0.65;
  animation: card-shimmer 2.4s linear infinite;
}
.game-card.portrait {
  width: 140px;
  min-height: auto;
  height: auto;
  overflow: visible;
}

.game-card .art {
  height: 96px;
  background: #120f22 center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.game-card .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  backface-visibility: hidden;
}

.game-card .art.art-fallback::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  text-align: center;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.game-card.portrait .art {
  height: auto;
  min-height: 96px;
  aspect-ratio: 5 / 7;
  max-height: 150px;
}

.game-card.portrait .body {
  padding: 0.45rem 0.5rem 0.55rem;
  overflow: visible;
}

.game-card .body { padding: 0.45rem 0.5rem 0.55rem; }
.game-card .title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  line-height: 1.25;
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}

.game-card .meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--muted);
}

.game-card .value {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(0,0,0,0.55);
}

.game-card.lucidity { border-top: 3px solid var(--lucidity); }
.game-card.elasticity { border-top: 3px solid var(--elasticity); }
.game-card.willpower { border-top: 3px solid var(--willpower); }
.game-card.archetype { border-top: 3px solid var(--gold); }
.game-card.dream { border-top: 3px solid #b88cff; box-shadow: 0 0 18px rgba(184, 140, 255, 0.15); }
.game-card.dreambeast { position: relative; }
.game-card.dreambeast.beast-fantasy,
.game-card.psyche-dreambeast.beast-fantasy {
  box-shadow:
    0 0 0 2px #f472b6,
    0 0 0 4px #c084fc,
    0 0 0 6px #60a5fa,
    0 4px 18px rgba(96, 165, 250, 0.28);
}
.game-card.dreambeast.beast-nightmare,
.game-card.psyche-dreambeast.beast-nightmare {
  box-shadow:
    0 0 0 2px #0a0a0f,
    0 0 0 4px #dc2626,
    0 0 0 6px #312e81,
    0 4px 18px rgba(49, 46, 129, 0.4);
}
.beast-kind-label {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.beast-kind-fantasy { color: #e879f9; }
.beast-kind-nightmare { color: #f87171; }
.dreambeast-costs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.dreamer-detail-affinity {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--gold);
  line-height: 1.4;
}
.game-card.object { border-top: 3px solid #a78bfa; }
.game-card.event { border-top: 3px solid var(--muted); }

.game-card.event-card {
  display: flex;
  flex-direction: column;
}

.event-landscape-icons {
  margin-top: auto;
  padding: 0.35rem 0.4rem 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.event-landscape-icons.event-active {
  box-shadow: inset 0 0 12px rgba(240, 201, 106, 0.2);
}

.event-landscape-hint {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

.event-landscape-icons.event-active .event-landscape-hint {
  color: var(--gold);
}

.event-landscape-icons.event-inactive .event-landscape-hint {
  color: #f0a0a0;
}

.event-landscape-chips,
.ms-choice-landscape-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
}

.event-landscape-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.28rem 0.4rem 0.32rem;
  border-radius: 8px;
  overflow: visible;
  border: 1px solid rgba(240, 160, 160, 0.55);
  background: rgba(40, 12, 16, 0.45);
  opacity: 1;
  filter: none;
}

.event-landscape-icon img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  filter: grayscale(1) brightness(0.62);
}

.event-landscape-icon figcaption {
  max-width: 7.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #f4eefc;
}

.event-landscape-state {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0a0a0;
}

.event-landscape-icon.revealed {
  border-color: var(--gold);
  background: rgba(240, 201, 106, 0.1);
  box-shadow: 0 0 10px rgba(240, 201, 106, 0.35);
}

.event-landscape-icon.revealed img {
  filter: none;
}

.event-landscape-icon.revealed .event-landscape-state {
  color: var(--gold);
}

.event-landscape-icons--modal {
  margin-top: 0.75rem;
  border-radius: 8px;
}

.event-landscape-icons--modal .event-landscape-hint {
  font-size: 1rem;
}

.event-landscape-icons--modal .event-landscape-icon img {
  width: 112px;
  height: 84px;
}

.ms-choice-landscape-row {
  margin-top: 0.55rem;
}

.ms-choice-landscape-row .event-landscape-icon img {
  width: 120px;
  height: 90px;
}

.ms-choice-landscape-row .event-landscape-icon figcaption {
  max-width: 9rem;
  font-size: 0.95rem;
}

.event-resolution-banner {
  margin: 0.65rem 0 0.85rem;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  line-height: 1.4;
}

.event-resolution-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
}

.event-resolution-banner.wasted {
  border-color: rgba(232, 120, 120, 0.55);
  background: rgba(140, 32, 40, 0.28);
  color: #ffd4d4;
}

.event-resolution-banner.resolves {
  border-color: rgba(240, 201, 106, 0.5);
  background: rgba(240, 201, 106, 0.1);
}

.event-effect-top {
  margin: 0.5rem 0;
  line-height: 1.45;
}

.event-effect-top.inactive,
.event-effect-bottom.inactive {
  opacity: 0.5;
  color: var(--muted);
}

.event-effect-bottom {
  margin: 0.5rem 0;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  line-height: 1.45;
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

.event-effect-bottom.inactive {
  opacity: 0.55;
  color: var(--muted);
}

.event-effect-bottom.active {
  border-color: rgba(240, 201, 106, 0.45);
  background: rgba(240, 201, 106, 0.08);
  color: inherit;
}

.mini-card-row .game-card.event-card {
  height: auto;
  overflow: visible;
}

.mini-card-row .game-card.event-card .event-landscape-icons {
  padding: 0.2rem;
}

.mini-card-row .game-card.event-card .event-landscape-hint {
  display: none;
}

.mini-card-row .game-card.event-card .event-landscape-icon img {
  width: 52px;
  height: 36px;
}

.mini-card-row .game-card.event-card .event-landscape-icon figcaption {
  font-size: 0.58rem;
  max-width: 4.4rem;
}

.suit-lucidity { color: var(--lucidity); }
.suit-elasticity { color: var(--elasticity); }
.suit-willpower { color: var(--willpower); }

.player-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: 10px;
  border: 1px solid transparent;
  margin-bottom: 0.4rem;
  cursor: pointer;
  position: relative;
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  font: inherit;
  touch-action: manipulation;
}

.sidebar.left {
  overflow: visible;
}

#player-list {
  position: relative;
  z-index: 2;
}

.player-chip.active {
  border-color: var(--accent);
  background: rgba(123, 92, 255, 0.12);
  box-shadow: 0 0 16px rgba(123, 92, 255, 0.22);
  animation: chip-glow 2.2s ease-in-out infinite;
}

.player-chip.phase-suggested:not(.active):not(.dead) {
  border-color: rgba(240, 201, 106, 0.5);
  background: rgba(240, 201, 106, 0.08);
  box-shadow: 0 0 14px rgba(240, 201, 106, 0.16);
}

.player-chip.on-scene:not(.active):not(.dead) {
  border-color: rgba(136, 200, 255, 0.55);
  box-shadow: 0 0 10px rgba(136, 200, 255, 0.2);
}

.player-chip.phase-suggested.active {
  border-color: rgba(240, 201, 106, 0.65);
  box-shadow:
    0 0 16px rgba(123, 92, 255, 0.22),
    0 0 10px rgba(240, 201, 106, 0.2);
}

.game-card.psyche-card.phase-suggested:not(.selected):not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(201, 160, 255, 0.55),
    0 0 16px rgba(123, 92, 255, 0.22);
}

.game-card.psyche-card.phase-suggested.selected {
  box-shadow:
    0 0 0 2px rgba(240, 201, 106, 0.75),
    0 0 18px rgba(123, 92, 255, 0.35);
}

.player-chip img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.player-chip .info { flex: 1; min-width: 0; }
.player-chip .name { font-size: 0.78rem; font-weight: 600; }
.player-chip .sub { font-size: 0.65rem; color: var(--muted); }

.deck-section-label {
  margin: 0.55rem 0 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d8d0f8;
  line-height: 1.35;
}

.deck-pile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: #f4f0ff;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.deck-pile .deck-label-main {
  display: block;
  color: #f8f5ff;
  line-height: 1.2;
}

.deck-pile .deck-label-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.95;
}

.deck-pile .deck-count {
  color: #ffffff;
  font-size: 1.05rem;
  min-width: 1.75rem;
  text-align: right;
}

.deck-pile.suit-lucidity {
  border-left: 4px solid var(--lucidity);
  background: rgba(74, 158, 255, 0.2);
}
.deck-pile.suit-lucidity .deck-label-sub { color: #b8dcff; }

.deck-pile.suit-elasticity {
  border-left: 4px solid var(--elasticity);
  background: rgba(240, 200, 48, 0.18);
}
.deck-pile.suit-elasticity .deck-label-sub { color: #ffe98a; }

.deck-pile.suit-willpower {
  border-left: 4px solid var(--willpower);
  background: rgba(232, 72, 72, 0.18);
}
.deck-pile.suit-willpower .deck-label-sub { color: #ffb0b0; }

.deck-pile:not(.suit-lucidity):not(.suit-elasticity):not(.suit-willpower) {
  background: rgba(160, 120, 220, 0.16);
  border-left: 4px solid #c9a0ff;
}

:where(html:not([data-hover="false"])) .deck-pile:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.deck-pile,
.turn-plaque-pass {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 3px 0 rgba(12, 8, 24, 0.55),
    0 8px 14px rgba(0, 0, 0, 0.22);
}

.deck-pile:active,
.deck-pile.is-pressed,
.turn-plaque-pass:active,
.turn-plaque-pass.is-pressed {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(12, 8, 24, 0.45);
}

.player-chip:active,
.player-chip.is-pressed {
  filter: brightness(1.14);
  transform: translateY(1px);
}

.modal-art {
  width: 100%;
  max-height: min(52vh, 420px);
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  display: block;
  backface-visibility: hidden;
}

.modal-art-fallback {
  width: 100%;
  min-height: 160px;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  font-family: var(--font-display);
  text-align: center;
  color: rgba(255,255,255,0.9);
}

.active-card-slot { min-height: 0; }

#active-encounter.scene-linked {
  border: 2px solid #e88a9a;
  border-radius: 8px;
  padding: 0.35rem;
  box-shadow: 0 0 14px rgba(232, 138, 154, 0.28);
}

.encounter-scene-label {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  color: #e8a8b4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.encounter-empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

#screen-game .active-card-slot {
  min-height: 0;
  max-height: none;
  overflow: visible;
}

#screen-game .active-card-slot .game-card.portrait {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
  min-height: auto;
}

.mini-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mini-card-row .game-card { width: 72px; min-height: 96px; }
.mini-card-row .game-card .art { height: 48px; }
.mini-card-row .game-card .body { display: none; }

.quest-list { margin: 0.35rem 0 0; padding-left: 1rem; font-size: 0.72rem; }
.quest-list li.done { color: var(--success); text-decoration: line-through; }

.phase-skip-modal {
  max-width: 420px;
}

.phase-skip-confirm h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.phase-skip-confirm p {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.phase-skip-confirm .utility-actions {
  margin-top: 0.75rem;
  gap: 0.5rem;
}

.phase-skip-choices {
  flex-wrap: wrap;
}

.repress-player-section h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
}

#utility-modal:not(.hidden) {
  z-index: 800;
}

/* Dialog band during play: every open dialog paints above the HUD (600) and the
   header dropdowns (700). The tutorial coach card rides above the card modal so its
   prompts stay readable while a Dream or Encounter card is being resolved. */
body.play-window #card-modal:not(.hidden) {
  z-index: 610;
}

/* The play-window rule above is more specific than a bare card-detail
   bump, so a zoom opened from the Subconscious (utility modal at 800)
   was stuck behind the binder. This beats that rule and the choice dock. */
body.play-window.card-detail-open #card-modal:not(.hidden) {
  z-index: 8800;
}

body.play-window .tutorial-card {
  z-index: 620;
}

body.utility-modal-open.tutorial-mode-active .tutorial-overlay {
  pointer-events: none;
}

body.utility-modal-open.tutorial-mode-active .tutorial-card {
  pointer-events: none;
  opacity: 0.4;
}

body.utility-modal-open.tutorial-mode-active .tutorial-backdrop {
  pointer-events: none;
  opacity: 0.35;
}

body.card-detail-open #card-modal {
  z-index: 820;
}

body.card-detail-open .tutorial-card {
  opacity: 0;
  pointer-events: none;
}

.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 10, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  width: min(420px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.modal-content.dreambeast-detail-modal {
  width: min(96vw, 760px);
  max-width: none;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.modal-content.dreambeast-detail-modal .modal-art,
.modal-content.dreambeast-detail-modal .modal-art-fallback {
  width: min(100%, 420px);
  max-height: min(52vh, 420px);
  margin: 0 auto 0.85rem;
  display: block;
  object-fit: contain;
  border-radius: 12px;
}

.modal-content.dreambeast-detail-modal h2,
.modal-content.dream-detail-modal h2 {
  font-size: clamp(1.35rem, 2.5vh, 1.85rem);
  text-align: center;
  text-transform: none;
}

.modal-content.dream-detail-modal {
  width: min(96vw, 720px);
  max-width: none;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.modal-content.dream-detail-modal .modal-art,
.modal-content.dream-detail-modal .modal-art-fallback {
  width: min(100%, 380px);
  max-height: min(48vh, 380px);
  margin: 0 auto 0.85rem;
  display: block;
  object-fit: contain;
  border-radius: 12px;
}

.dream-kind-banner {
  margin: 0.35rem 0 0.65rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dream-meta-note {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
}

.dream-card-teaser {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card.dream .dream-kind-label {
  color: #c9a0ff;
}

.modal-flavor {
  margin: 0.5rem 0 0.85rem;
  padding: 0.65rem 0.8rem;
  border-left: 3px solid rgba(201, 160, 255, 0.55);
  font-style: italic;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.dreambeast-cost-breakdown {
  display: grid;
  gap: 0.65rem;
  margin: 0.85rem 0;
}

.dreambeast-cost-row {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.4;
}

.dreambeast-cost-row.accept {
  border-color: rgba(120, 200, 140, 0.35);
}

.dreambeast-cost-row.reject {
  border-color: rgba(232, 120, 120, 0.35);
}

.dreambeast-cost-row span {
  color: var(--muted);
  font-size: 0.9rem;
}

.modal-effect,
.modal-fail {
  margin: 0.45rem 0;
  line-height: 1.45;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  z-index: 5;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.88);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.modal-detail h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.modal-detail p {
  margin: 0.35rem 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.9rem;
}

.modal-detail .stat-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.stat-pill {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-size: 0.75rem;
}

/* Psyche cards — numbered & suited */
.game-card.psyche-card {
  width: 72px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.1rem;
  padding: 0.28rem 0.28rem 0.32rem;
  border-width: 2px;
}

.game-card.psyche-card.lucidity {
  background: linear-gradient(160deg, rgba(74, 158, 255, 0.35), rgba(16, 48, 96, 0.95));
  border-color: var(--lucidity);
  color: #e8f4ff;
}

.game-card.psyche-card.elasticity {
  background: linear-gradient(160deg, rgba(240, 200, 48, 0.3), rgba(72, 56, 8, 0.95));
  border-color: var(--elasticity);
  color: #fff8e0;
}

.game-card.psyche-card.willpower {
  background: linear-gradient(160deg, rgba(232, 72, 72, 0.32), rgba(80, 16, 16, 0.95));
  border-color: var(--willpower);
  color: #ffe8e8;
}

.game-card.psyche-card.wild {
  background: conic-gradient(from 210deg, #e84848, #f0c830, #4a9eff, #e84848);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.game-card.psyche-card.wild .psyche-suit.wild-gradient {
  font-size: 1.1rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.psyche-pip {
  position: absolute;
  top: 0.08rem;
  left: 0.08rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
  pointer-events: none;
  line-height: 1;
}

.psyche-pip .psyche-value {
  font-size: 2.85rem;
  line-height: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.psyche-pip .psyche-suit {
  font-size: 2.15rem;
}

.psyche-pip .psyche-suit .suit-icon svg {
  width: 2.3rem;
  height: 2.3rem;
}

.psyche-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.psyche-suit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.psyche-suit.large .suit-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}

.suit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.suit-icon svg {
  display: block;
}

.suit-lucidity,
.suit-lucidity .suit-icon { color: var(--lucidity); }

.suit-elasticity,
.suit-elasticity .suit-icon { color: var(--elasticity); }

.suit-willpower,
.suit-willpower .suit-icon { color: var(--willpower); }

.psyche-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

.hand-primary .psyche-label,
.spread-tray .psyche-label {
  position: absolute;
  right: 0.18rem;
  bottom: 0.16rem;
  font-size: 0.48rem;
  max-width: 62%;
  text-align: right;
}

.spread-tray {
  position: absolute;
  left: 50%;
  bottom: 0.45rem;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  transform: translateX(-50%);
  pointer-events: none;
  padding: 0.4rem 1rem 0.55rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 8, 24, 0.08), rgba(8, 6, 18, 0.72));
  border: 1px solid rgba(180, 255, 255, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.spread-tray.hidden,
.spread-tray[hidden] {
  display: none !important;
}

.spread-tray-label {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d9f6ff;
  text-shadow: 0 0 10px rgba(120, 220, 255, 0.45);
}

.spread-tray-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.85rem;
}

.spread-tray-fan {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 12.4rem;
  padding: 0.2rem 0.2rem 0.1rem;
  gap: 0.85rem;
}

.spread-tray .game-card {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 118px;
  min-width: 108px;
  height: 176px;
  min-height: 176px;
  margin-left: var(--fan-overlap, 0px);
  z-index: var(--fan-z, 1);
  transform-origin: 50% 100%;
  transform:
    perspective(520px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(var(--fan-rot, 0deg))
    translateY(var(--fan-y, 0px));
}

.spread-tray .game-card.selected {
  outline-color: rgba(180, 255, 255, 0.85);
}

.btn-spread-opener {
  pointer-events: auto;
  flex: 0 0 auto;
  min-width: 5.6rem;
  min-height: 8.4rem;
  max-width: 6.4rem;
  padding: 0.55rem 0.45rem;
  border-radius: 14px;
  border: 2px solid rgba(180, 255, 255, 0.55);
  background:
    linear-gradient(180deg, rgba(40, 32, 72, 0.95), rgba(12, 8, 28, 0.95));
  color: #f4ebff;
  font: 700 0.78rem/1.2 var(--font-display, inherit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
}

.btn-spread-opener.tint-reveal {
  border-color: var(--lucidity);
  color: #dceeff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(74, 158, 255, 0.4);
}

.btn-spread-opener.tint-explore {
  border-color: var(--elasticity);
  color: #fff8c8;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(240, 200, 48, 0.4);
}

.btn-spread-opener.tint-meet {
  border-color: var(--willpower);
  color: #ffd4d4;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(232, 72, 72, 0.4);
}

:where(html:not([data-hover="false"])) .btn-spread-opener:hover:not(:disabled),
.btn-spread-opener:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  outline: 2px solid rgba(240, 201, 106, 0.85);
  outline-offset: 2px;
}

.btn-spread-opener:disabled {
  opacity: 0.55;
  cursor: default;
}

.psyche-modal-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.psyche-modal-face.lucidity {
  background: linear-gradient(160deg, rgba(74, 158, 255, 0.25), rgba(16, 48, 96, 0.6));
  border: 1px solid var(--lucidity);
}

.psyche-modal-face.elasticity {
  background: linear-gradient(160deg, rgba(240, 200, 48, 0.22), rgba(72, 56, 8, 0.6));
  border: 1px solid var(--elasticity);
}

.psyche-modal-face.willpower {
  background: linear-gradient(160deg, rgba(232, 72, 72, 0.22), rgba(80, 16, 16, 0.6));
  border: 1px solid var(--willpower);
}

.psyche-modal-face.psyche-power {
  background: linear-gradient(155deg, rgba(212, 179, 255, 0.42), rgba(90, 40, 140, 0.72) 48%, rgba(201, 162, 39, 0.45));
  border: 1px solid rgba(232, 208, 120, 0.85);
  color: #fff8e8;
}

.psyche-modal-face .psyche-value.large { font-size: 4rem; }

/* Dreamer stats */
.dreamer-stats {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.2rem 0;
}

.dreamer-stats .stat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-pill.suit-lucidity { color: var(--lucidity); }
.stat-pill.suit-elasticity { color: var(--elasticity); }
.stat-pill.suit-willpower { color: var(--willpower); }

.hand-stats-suits {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.hand-stats-suits .stat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
}

.intro-suits {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.intro-suit {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
}

.intro-suit.suit-lucidity { color: var(--lucidity); }
.intro-suit.suit-elasticity { color: var(--elasticity); }
.intro-suit.suit-willpower { color: var(--willpower); }

.mindstream-pick .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.deck-pile span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.dreamer-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
}

.dreamer-pick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.dreamer-pick-slot {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(240, 201, 106, 0.12);
  border: 1px solid rgba(240, 201, 106, 0.35);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.dreamer-pick.selected .game-card {
  outline: 2px solid var(--accent);
}

.dreamer-pick .game-card {
  pointer-events: none;
}

.dreamer-pick-stats {
  font-size: 0.75rem;
  text-align: center;
}

.dreamer-pick-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.player-chip .dreamer-stats {
  margin-top: 0.15rem;
}

.quest-list.compact { font-size: 0.68rem; margin: 0.35rem 0 0; padding-left: 1rem; }
.quest-list.compact li.done { color: var(--success); }

.player-chip.dead { opacity: 0.55; }
.player-chip.trade-target { outline: 1px dashed var(--accent); }

.utility-content { max-width: 520px; }
.utility-content.landscape-detail-modal {
  width: min(98vw, 1380px);
  max-width: none;
  height: min(94vh, 960px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  padding: clamp(0.85rem, 1.8vh, 1.35rem) clamp(1rem, 2.2vw, 1.5rem);
  overflow: hidden;
}
.utility-content.dreamer-detail-modal { max-width: 720px; }
.utility-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

.tutorial-graduate-panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display, "Cinzel", serif);
}

.tutorial-graduate-list {
  margin: 0 0 1rem 1.1rem;
  color: var(--text-muted, #9b93c4);
  line-height: 1.55;
}

.tutorial-graduate-actions {
  flex-direction: row;
  gap: 0.65rem;
}

.tutorial-graduate-actions .btn {
  flex: 1 1 10rem;
  width: auto;
}
.landscape-action-choices { flex-direction: column; }
.landscape-action-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.25rem;
  width: 100%;
}
.landscape-action-desc {
  font-size: 0.85rem;
  opacity: 0.85;
  font-weight: normal;
}

.utility-content.landscape-detail-modal #utility-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.landscape-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 1.8vh, 1.35rem);
  min-height: 0;
  height: 100%;
}

.landscape-detail-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(0.65rem, 1.4vw, 1.15rem);
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.landscape-detail-dreamers,
.landscape-detail-beasts {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: clamp(148px, 17vw, 220px);
  min-height: 0;
  max-height: min(72vh, 820px);
  overflow-y: auto;
  padding: 0.2rem 0;
}

.landscape-detail-side-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  flex: 0 0 auto;
}

.landscape-detail-side-empty {
  margin: 0;
  padding: 0.75rem 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  opacity: 0.75;
}

.landscape-detail-occupant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.landscape-detail-occupant-card.is-clickable {
  cursor: pointer;
  border-radius: 12px;
  padding: 0.2rem 0.15rem 0.35rem;
  outline: 1px solid transparent;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

:where(html:not([data-hover="false"])) .landscape-detail-occupant-card.is-clickable:hover,
.landscape-detail-occupant-card.is-clickable:focus-visible {
  outline-color: rgba(240, 201, 106, 0.75);
  box-shadow: 0 0 18px rgba(123, 92, 255, 0.32);
  transform: translateY(-2px);
}

.landscape-detail-occupant-hint {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(201, 160, 255, 0.82);
}

.landscape-detail-occupant-card .game-card {
  width: 100%;
  pointer-events: none;
  cursor: default;
}

.landscape-detail-occupant-showcase .game-card.portrait {
  width: 100%;
}

.landscape-detail-occupant-showcase .game-card.portrait .art {
  max-height: min(44vh, 320px);
}

.landscape-detail-occupant-detail {
  width: 100%;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  text-align: center;
}

.landscape-detail-occupant-meta {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.landscape-detail-beast-cost {
  display: grid;
  gap: 0.15rem;
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.landscape-detail-beast-cost.accept {
  border: 1px solid rgba(120, 200, 140, 0.28);
}

.landscape-detail-beast-cost.reject {
  border: 1px solid rgba(232, 120, 120, 0.28);
}

.landscape-detail-beast-cost span {
  color: var(--muted);
  font-size: 0.72rem;
}

.landscape-detail-beast-effect,
.landscape-detail-beast-flavor {
  margin-top: 0.35rem;
  text-align: left;
  font-size: 0.74rem;
}

.landscape-detail-beast-flavor {
  font-style: italic;
  color: var(--muted);
}

.landscape-detail-occupant-caption {
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  max-width: 100%;
  word-break: break-word;
}

.landscape-detail-art-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: min(52vw, 680px);
  min-height: min(48vh, 520px);
  max-height: min(68vh, 760px);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 160, 255, 0.35);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(123, 92, 255, 0.18), transparent 58%),
    rgba(0, 0, 0, 0.42);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.landscape-detail-art {
  width: 100%;
  height: 100%;
  max-height: min(68vh, 760px);
  object-fit: contain;
  object-position: center;
  display: block;
}

.landscape-detail-body {
  flex: 0 0 auto;
  width: min(100%, 920px);
  text-align: center;
}

.landscape-detail-body h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vh, 2rem);
  letter-spacing: 0.03em;
}

.landscape-detail-suit {
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: clamp(0.92rem, 1.6vh, 1.05rem);
}

.landscape-detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  text-align: left;
}

.landscape-detail-action {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landscape-detail-action-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.landscape-detail-action p,
.landscape-detail-muted {
  margin: 0.25rem 0 0;
  font-size: clamp(0.88rem, 1.5vh, 0.98rem);
  line-height: 1.45;
  opacity: 0.9;
}

.dreamer-detail {
  display: grid;
  grid-template-columns: minmax(160px, 38%) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.dreamer-detail-art-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  aspect-ratio: 5 / 7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.dreamer-detail-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dreamer-detail-body h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
}

.dreamer-detail-flavor {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 8px 8px 0;
}

.dreamer-detail-flavor em {
  font-style: italic;
  color: var(--gold);
}

.dreamer-detail-status {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  opacity: 0.85;
}

.dreamer-detail-focus-hint {
  margin-top: -0.35rem;
  color: var(--accent);
}

.dreamer-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.dreamer-detail-stat {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

.dreamer-detail-stat-label {
  flex: 1;
  opacity: 0.85;
}

.dreamer-detail-stat strong {
  font-size: 1rem;
}

.dreamer-detail-archetype {
  grid-column: 1 / -1;
}

.dreamer-detail-power {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dreamer-detail-power-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.dreamer-detail-power-cost {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.dreamer-detail-power-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.dreamer-detail-tooltip {
  position: fixed;
  z-index: 1200;
  width: min(420px, calc(100vw - 24px));
  padding: 0.85rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.dreamer-detail-tooltip.hidden {
  display: none;
}

.dreamer-detail-tooltip .dreamer-detail {
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: 0.85rem;
}

.dreamer-detail-tooltip .dreamer-detail-body h2 {
  font-size: 1.05rem;
}

.dreamer-detail-tooltip .dreamer-detail-flavor {
  font-size: 0.82rem;
  margin-bottom: 0.55rem;
}

.dreamer-detail-tooltip .dreamer-detail-power-text {
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .utility-content.landscape-detail-modal {
    width: 98vw;
    height: 96vh;
    max-height: 96vh;
    padding: 0.75rem;
  }

  .landscape-detail-stage {
    gap: 0.45rem;
  }

  .landscape-detail-dreamers,
  .landscape-detail-beasts {
    width: clamp(84px, 22vw, 108px);
  }

  .landscape-detail-occupant-card .game-card.portrait .art {
    max-height: min(24vh, 160px);
  }

  .landscape-detail-art-wrap {
    min-height: 34vh;
    max-height: 48vh;
    max-width: none;
  }

  .landscape-detail-actions {
    grid-template-columns: 1fr;
  }
}

.subconscious-piles { max-height: 50vh; overflow: auto; }
.subconscious-pile { margin-bottom: 0.75rem; }
.subconscious-pile h4 { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--muted); }

#utility-modal.subconscious-binder-modal .utility-close {
  display: none;
}

#utility-modal.subconscious-binder-modal {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 8px;
  box-sizing: border-box;
}

#utility-modal.subconscious-binder-modal .utility-backdrop {
  background: rgba(4, 2, 14, 0.92);
}

#utility-modal.subconscious-binder-modal .utility-content.subconscious-binder-fullscreen {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(180, 140, 255, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

/* The modal body must be a bounded flex child, otherwise the shell's 1fr row
   resolves against an auto height and the binder grid runs off the bottom of
   short viewports (iPad landscape) instead of scrolling inside its page. */
#utility-modal.subconscious-binder-modal .utility-content.subconscious-binder-fullscreen #utility-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.subconscious-binder-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  gap: 0.35rem;
  position: relative;
}

.binder-browse-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.subconscious-binder-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  min-height: 0;
}

.subconscious-binder-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.subconscious-binder-tally {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0c96a;
  min-width: 2.75rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: rgba(240, 201, 106, 0.08);
  border: 1px solid rgba(240, 201, 106, 0.35);
}

.subconscious-binder-bottom-pad {
  min-height: 0;
  pointer-events: none;
}

.subconscious-binder-header-copy h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
}

.subconscious-binder-close {
  flex-shrink: 0;
  white-space: nowrap;
}

.subconscious-binder-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.subconscious-binder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
}

.subconscious-binder-page-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.binder-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  align-items: center;
  align-content: flex-start;
  align-self: start;
  gap: 0.4rem;
  height: auto;
  min-height: 0;
  padding: 0 0.15rem 0.45rem;
}

.binder-tab {
  flex: 0 0 auto;
  align-self: center;
  height: auto;
  white-space: nowrap;
  border: 1px solid rgba(180, 140, 255, 0.28);
  background: rgba(18, 12, 36, 0.7);
  color: var(--ink, #e8e4ff);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
}

.binder-tab.is-active {
  background: rgba(123, 92, 255, 0.35);
  border-color: rgba(201, 160, 255, 0.7);
}

.subconscious-binder-shell.is-binder-look {
  grid-template-rows: auto minmax(0, 1fr);
}

.binder-browse-shell.is-binder-look {
  grid-template-rows: auto minmax(0, 1fr);
}

.subconscious-binder-shell.is-binder-look .binder-tabs,
.subconscious-binder-shell.is-binder-look .subconscious-binder-header-copy,
.subconscious-binder-shell.is-binder-look .subconscious-binder-bottom-pad,
.subconscious-binder-shell.is-binder-look #binder-open-look {
  display: none;
}

.subconscious-binder-shell.is-binder-look .subconscious-binder-header {
  justify-content: flex-end;
  min-height: 0;
}

.subconscious-binder-shell.is-binder-look .subconscious-binder-root {
  overflow: hidden;
}

.binder-look {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  outline: none;
  position: relative;
}

.binder-look-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 0.1rem 0.25rem 0.45rem;
}

.binder-look-top .btn {
  padding: 0.28rem 0.65rem;
  font-size: 0.8rem;
  min-height: 0;
  height: auto;
}

.binder-look-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  flex: 0 1 auto;
}

.binder-look-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  justify-items: center;
  gap: 0.65rem;
  padding: 0 0.25rem 0.5rem;
}

.binder-look-card-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.binder-look-card.game-card,
.binder-look-card.game-card.portrait {
  width: min(36rem, 70vw, 100%);
  max-width: 100%;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #f6f2ff;
  background: #241e3c;
  transform: none;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 160, 255, 0.28);
  cursor: default;
}

:where(html:not([data-hover="false"])) .binder-look-card.game-card:hover,
html:not([data-hover="false"]) .binder-look-card.game-card:hover,
.binder-look-card.game-card:active,
.binder-look-card.game-card.is-pressed {
  transform: none;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 160, 255, 0.28);
}

.binder-look-card.game-card .art,
.binder-look-card.game-card.portrait .art {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #120f22;
}

.binder-look-card.game-card .art img,
.binder-look-card.game-card.portrait .art img,
.binder-look-card.game-card .art img.card-art-sharp {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  filter: none;
}

.binder-look-card.game-card .title {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  letter-spacing: 0.03em;
}

.binder-look-card.game-card .body {
  flex: 0 0 auto;
  padding: 0.9rem 1.05rem 1.05rem;
  overflow: visible;
  background: #2c2548;
  color: #f6f2ff;
}

.binder-look-card.game-card .meta {
  color: #d2cbf0;
}

.binder-look-card.game-card .body,
.binder-look-card.game-card .dream-card-teaser,
.binder-look-card.game-card .binder-look-rules,
.binder-look-card.game-card .event-effect-top,
.binder-look-card.game-card .event-effect-bottom,
.binder-look-card.game-card .meta {
  font-size: 1.08rem;
  line-height: 1.45;
}

.binder-look-card.game-card .dream-card-teaser,
.binder-look-card.game-card .binder-look-rules {
  display: block;
  margin: 0.45rem 0 0;
  -webkit-line-clamp: unset;
  overflow: visible;
  color: #f3efff;
}

.binder-look-card.game-card .value {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.binder-look-stage .subconscious-binder-zoom-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  font-size: 1.45rem;
}

.subconscious-binder-grid {
  display: grid;
  grid-template-columns: repeat(var(--binder-cols, 12), minmax(64px, 1fr));
  gap: 0.85rem 0.95rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  background: rgba(8, 6, 18, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(180, 140, 255, 0.2);
  align-content: start;
}

.subconscious-binder-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.35rem 0.25rem 0.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  min-width: 0;
}

:where(html:not([data-hover="false"])) .subconscious-binder-cell:hover {
  background: rgba(123, 92, 255, 0.14);
}

.subconscious-binder-cell .binder-thumb.game-card {
  width: 100% !important;
  max-width: 88px;
  min-width: 0 !important;
  min-height: 118px !important;
  height: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  --fan-rot: 0deg;
  --fan-y: 0px;
  --fan-overlap: 0px;
  opacity: 1;
  pointer-events: none;
  flex-shrink: 0;
}

.subconscious-binder-cell .binder-thumb.game-card.selected {
  box-shadow:
    0 0 0 3px rgba(240, 201, 106, 0.95),
    0 0 22px rgba(123, 92, 255, 0.55),
    0 0 36px rgba(240, 201, 106, 0.25);
  transform: scale(1.04);
}

.subconscious-binder-deck-tag {
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#utility-modal.subconscious-binder-modal.subconscious-binder-zoom-active .utility-content.subconscious-binder-fullscreen,
#utility-modal.subconscious-binder-modal.subconscious-binder-zoom-active #utility-modal-body {
  overflow: visible;
}

.subconscious-binder-shell.is-binder-zoom .subconscious-binder-root {
  overflow: visible;
  align-items: stretch;
  justify-content: center;
}

.subconscious-binder-zoom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-height: min(34vh, 380px);
  max-height: 100%;
  overflow: visible;
  gap: 0.65rem;
  outline: none;
}

.subconscious-binder-zoom-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-shrink: 0;
}

.subconscious-binder-zoom-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.subconscious-binder-zoom-band {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.subconscious-binder-zoom-arrow {
  flex-shrink: 0;
  width: clamp(2.75rem, 4vw, 3.5rem);
  height: clamp(3rem, 12vh, 4.5rem);
  align-self: center;
  border-radius: 14px;
  border: 1px solid rgba(180, 140, 255, 0.45);
  background: rgba(18, 12, 36, 0.9);
  color: #e8e4ff;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

:where(html:not([data-hover="false"])) .subconscious-binder-zoom-arrow:hover:not(:disabled) {
  background: rgba(123, 92, 255, 0.35);
  border-color: rgba(201, 160, 255, 0.65);
}

.subconscious-binder-zoom-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.subconscious-binder-zoom-strip-wrap {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 140, 255, 0.45) transparent;
  padding: 0.75rem 0;
}

.subconscious-binder-zoom-strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: max-content;
  min-width: 100%;
  padding: 0.5rem clamp(2rem, 8vw, 6rem);
  box-sizing: border-box;
}

.subconscious-binder-zoom-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  scroll-snap-align: center;
  transition: transform 0.2s ease, opacity 0.2s ease;
  overflow: visible;
}

.subconscious-binder-zoom-item:not(.is-focus) {
  opacity: 0.78;
  transform: scale(0.88);
}

.subconscious-binder-zoom-item.is-focus {
  opacity: 1;
  transform: scale(1);
}

:where(html:not([data-hover="false"])) .subconscious-binder-zoom-item:hover {
  opacity: 1;
}

.subconscious-binder-zoom-item .subconscious-binder-zoom-card,
.subconscious-binder-zoom-item .game-card.portrait {
  width: clamp(130px, 16vw, 220px) !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: none;
}

.subconscious-binder-zoom-item .game-card.portrait .art {
  max-height: none !important;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 5 / 7;
}

.subconscious-binder-zoom-item .game-card.psyche-card {
  width: clamp(130px, 16vw, 220px) !important;
  min-height: clamp(180px, 22vh, 300px) !important;
  height: auto !important;
}

.subconscious-binder-zoom-item .game-card.selected {
  box-shadow:
    0 0 0 3px rgba(240, 201, 106, 0.95),
    0 0 24px rgba(123, 92, 255, 0.55),
    0 0 40px rgba(240, 201, 106, 0.28);
}

.subconscious-binder-zoom-deck {
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
  max-width: clamp(130px, 16vw, 220px);
}

@media (max-width: 1200px) {
  .subconscious-binder-grid {
    grid-template-columns: repeat(8, minmax(64px, 1fr));
  }
}

@media (max-width: 720px) {
  .subconscious-binder-grid {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }

  .subconscious-binder-header {
    flex-direction: column;
    align-items: stretch;
  }
}

.action-moment-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  background: rgba(12, 8, 28, 0.92);
  border: 1px solid rgba(201, 160, 255, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.action-moment-banner.hidden {
  display: none !important;
}

.action-moment-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f0e8ff;
}

.action-moment-detail {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(220, 210, 255, 0.88);
}

.monkey-paw-token-row {
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.12rem;
  z-index: 4;
  pointer-events: none;
}

.monkey-paw-token-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  font-size: 0.62rem;
  line-height: 1;
  color: #2a1800;
  background: linear-gradient(145deg, #ffe566, #f0c030 45%, #c99010);
  box-shadow: 0 0 6px rgba(240, 201, 106, 0.75);
}

.subconscious-graveyard {
  background: rgba(20, 12, 32, 0.85);
  border: 1px solid rgba(180, 120, 220, 0.35);
  border-radius: 8px;
  padding: 0.5rem;
  min-height: 4rem;
}
.graveyard-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.graveyard-icon { font-size: 1.1rem; }
.graveyard-count { flex: 1; font-size: 0.8rem; color: var(--muted); }
.graveyard-empty { font-size: 0.75rem; color: var(--muted); margin: 0.25rem 0; }
.graveyard-preview { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.35rem; }
.graveyard-pile-chip {
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  display: flex;
  gap: 0.25rem;
}
.graveyard-recent { margin-top: 0.25rem; }
.graveyard-pile-tops {
  margin-top: 0.25rem;
  gap: 0.4rem;
}
.btn-header-subconscious.subconscious-pending {
  animation: subconscious-pulse 1.6s ease-in-out infinite;
  border-color: rgba(220, 140, 255, 0.75);
  box-shadow: 0 0 16px rgba(180, 100, 255, 0.35);
}

@keyframes subconscious-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(180, 100, 255, 0.25); }
  50% { box-shadow: 0 0 22px rgba(200, 130, 255, 0.55); }
}
.deck-pile.graveyard-active {
  border-color: rgba(200, 120, 255, 0.6);
  box-shadow: 0 0 8px rgba(160, 80, 220, 0.25);
}
.graveyard-total { font-size: 0.85rem; color: var(--muted); }

.resolution-reason { font-size: 0.9rem; color: var(--accent); margin: 0.5rem 0; }
.resolution-player { font-weight: 600; margin: 0.25rem 0; }
.resolution-instruction { font-size: 0.85rem; color: var(--muted); }
.resolution-empty { font-style: italic; color: var(--muted); }

.game-card.psyche-dreambeast {
  position: relative;
  background: linear-gradient(145deg, #2a1838, #1a1028);
}
.psyche-dreambeast-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.7rem;
  opacity: 0.9;
}
.psyche-dreambeast-thumb {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.psyche-dreambeast-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kept-archetypes { margin-top: 0.5rem; font-size: 0.75rem; }
.kept-arch { display: inline-block; padding: 0.15rem 0.4rem; margin: 0.1rem; background: rgba(240,201,106,0.15); border-radius: 4px; }

.hidden { display: none !important; }

/* Dev console */
.dev-console {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: rgba(8, 6, 16, 0.96);
  border-top: 2px solid #7b5cff;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  max-height: 40vh;
}

.dev-console-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: rgba(123, 92, 255, 0.2);
  border-bottom: 1px solid rgba(123, 92, 255, 0.4);
  font-family: var(--font-display);
  font-size: 0.85rem;
}

.dev-console-hint {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--font-body, sans-serif);
}

.dev-console-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
}

.dev-console-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  min-height: 80px;
  max-height: 28vh;
}

.dev-log-line {
  margin: 0.15rem 0;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-log-line.ok { color: #b8d4ff; }
.dev-log-line.err { color: #ff8a8a; }

.dev-console-input {
  border: none;
  border-top: 1px solid rgba(123, 92, 255, 0.35);
  background: rgba(0, 0, 0, 0.5);
  color: #e8f0ff;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
}

.dev-console-input:focus {
  background: rgba(20, 12, 40, 0.9);
}

.dev-console-toggle {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 9999;
  padding: 0.35rem 0.65rem;
  font-size: 0.7rem;
  font-family: monospace;
  background: rgba(123, 92, 255, 0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
}

.dev-console-toggle:hover {
  opacity: 1;
}

@media (max-width: 980px) {
  html[data-form="desktop"] {
    --sidebar-w: 100%;
    --hand-h: clamp(280px, 42vh, 420px);
  }

  #screen-game.active {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto var(--hand-h);
    grid-template-areas:
      "table"
      "sidebar-right"
      "hand";
  }

  #screen-game .sidebar.right {
    height: auto;
    max-height: 22vh;
  }

  #screen-game .board-viewport {
    --map-chrome-left: clamp(132px, 34vw, 168px);
    padding-left: var(--map-chrome-left);
  }

  .deck-column {
    width: clamp(120px, 30vw, 156px);
  }

  .setup-round-flow { grid-template-columns: 1fr; }
  .table-footer { grid-template-columns: 1fr; max-height: 9rem; }
}

@media (max-width: 640px) {
  .top-bar { flex-direction: column; align-items: flex-start; }
  .hand-hint { display: none; }
  .game-card { width: 104px; min-height: 150px; }
  .hand-bar { grid-template-columns: 1fr; }
  .objects-section { max-width: none; }
  .overview-cols { grid-template-columns: 1fr; }
}

/* Device-mode layouts (set by device-mode.js on <html data-device>)
   Safe area lives inside #app (border-box, height --vvh). Padding the body
   and also sizing #app to the full viewport clipped the hand under the
   iPad home indicator. */
html[data-device="mobile"] body.in-game #app,
html[data-device="tablet"] body.in-game #app,
html[data-display="standalone"] body.in-game #app {
  padding:
    var(--sat)
    var(--sar)
    var(--sab)
    var(--sal);
}

html[data-device="mobile"] .top-bar,
html[data-device="tablet"] .top-bar {
  flex-wrap: wrap;
  gap: 0.5rem;
}

html[data-device="mobile"] .hud {
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding-bottom: 0.15rem;
  -webkit-overflow-scrolling: touch;
}

html[data-device="mobile"] .hud-item {
  flex: 0 0 auto;
  min-width: 4.2rem;
}

html[data-device="mobile"] .phase-actions .btn,
html[data-device="tablet"] .phase-actions .btn,
html[data-touch="true"] .phase-actions .btn,
html[data-touch="true"] .begin-dream-btn,
html[data-touch="true"] .btn-tutorial-menu,
html[data-touch="true"] .board-camera-controls button {
  min-height: 44px;
  min-width: 44px;
}

html[data-device="mobile"] .phase-actions .btn {
  font-size: 1.15rem;
  padding: 0.45rem 0.7rem;
}

html[data-device="mobile"] .phase-actions {
  overflow: auto;
  flex-wrap: wrap;
  flex-direction: row;
  max-height: none;
}

html[data-device="mobile"] .resize-handle,
html[data-device="tablet"] .resize-handle,
html[data-touch="true"] .resize-handle {
  display: none;
}

html[data-device="mobile"] .hand-section.power-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.35rem;
}

html[data-device="mobile"] .sidebar-hint,
html[data-device="tablet"] .sidebar-hint {
  display: none;
}

html[data-device="desktop"] .power-bonus-btn {
  max-width: 16rem;
}

/* Compact menu: iPad split + phone stack — no horizontal scroll */
html[data-menu-layout="stack"] body.menu-window,
html[data-menu-layout="split"] body.menu-window {
  overflow-x: hidden;
}

html[data-menu-layout="split"] .setup-triad {
  grid-template-columns: minmax(220px, 30vw) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  padding: calc(3.6rem + env(safe-area-inset-top)) 0.85rem calc(0.85rem + env(safe-area-inset-bottom));
  gap: 0.75rem;
  overflow: hidden;
}

html[data-form="phone"][data-menu-layout="split"] .setup-triad {
  grid-template-columns: minmax(10.25rem, 28vw) minmax(0, 1fr);
  padding: calc(2.45rem + env(safe-area-inset-top)) 0.45rem calc(0.4rem + env(safe-area-inset-bottom));
  gap: 0.4rem;
}

html[data-form="phone"][data-menu-layout="split"] .setup-panel-center.menu-glass-panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
}

html[data-form="phone"][data-menu-layout="split"] .menu-dreamer-picker {
  flex: 1 1 auto;
}

html[data-form="phone"][data-menu-layout="split"] .setup-launch-row {
  flex-direction: column;
}

html[data-form="phone"][data-menu-layout="split"] .setup-launch-row .btn {
  flex: 1 1 auto;
  width: 100%;
}

html[data-menu-layout="split"] .setup-panel-left.menu-glass-panel,
html[data-menu-layout="split"] .setup-panel-center.menu-glass-panel,
html[data-menu-layout="split"] .setup-panel-right.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-left.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-center.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-right.menu-glass-panel {
  --menu-panel-scale: 1;
  transform: none;
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

html[data-menu-layout="split"] .setup-panel-left.menu-glass-panel {
  grid-column: 1;
  grid-row: 1;
}

html[data-menu-layout="split"] .setup-panel-right.menu-glass-panel {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
}

html[data-menu-layout="split"] .setup-panel-center.menu-glass-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  overflow: auto;
  min-height: 0;
  align-self: stretch;
  transform-origin: center top;
  margin-bottom: 0;
  max-height: none;
}

html[data-menu-layout="triad"] .setup-panel-center.menu-glass-panel {
  width: min(860px, 94%);
  overflow: hidden;
  max-height: none;
}

html[data-menu-layout="triad"] body.menu-window #screen-setup .card-grid.picker,
html[data-menu-layout="triad"] body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html[data-menu-layout="triad"] body.menu-window #screen-setup .game-card.portrait {
  width: 100%;
  min-width: 0;
}

html[data-menu-layout="split"]:not([data-form="phone"]) .setup-panel-center.menu-glass-panel {
  align-self: end;
  max-height: calc(100% - 0.4rem);
  margin-bottom: clamp(0.35rem, 2vh, 1rem);
}

html[data-menu-layout="stack"] .setup-panel-center.menu-glass-panel {
  align-self: center;
  transform-origin: center top;
  margin-bottom: 0;
  max-height: none;
  overflow: visible;
}

html[data-form="tablet"] body.menu-window #screen-setup .menu-panel-title {
  font-size: 1.4rem;
}

html[data-form="tablet"] body.menu-window #screen-setup .field > span,
html[data-form="tablet"] body.menu-window #screen-setup .field select,
html[data-form="tablet"] body.menu-window #screen-setup .btn {
  font-size: 1.12rem;
}

html[data-form="tablet"] body.menu-window #screen-setup .dreamer-pick-name {
  font-size: 1.12rem;
}

html[data-form="tablet"] body.menu-window #screen-setup .dreamer-pick-stats,
html[data-form="tablet"] body.menu-window #screen-setup .dreamer-pick-stats .stat {
  font-size: 0.95rem;
}

html[data-form="tablet"] body.menu-window #screen-setup .menu-tutorial-hint,
html[data-form="tablet"] body.menu-window #screen-setup .setup-continue-meta,
html[data-form="tablet"] body.menu-window #screen-setup .round-step,
html[data-form="tablet"] body.menu-window #screen-setup .round-step span {
  font-size: 1.02rem;
  line-height: 1.35;
}

html[data-menu-layout="split"] .setup-launch-row,
html[data-menu-layout="stack"] .setup-launch-row {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

html[data-menu-layout="split"] .setup-launch-row .btn,
html[data-menu-layout="stack"] .setup-launch-row .btn {
  flex: 1 1 8rem;
}

html[data-menu-layout="stack"] .setup-triad {
  grid-template-columns: 1fr;
  align-content: start;
  padding: calc(3.4rem + env(safe-area-inset-top)) 0.75rem calc(1rem + env(safe-area-inset-bottom));
  gap: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
}

html[data-menu-layout="stack"] .setup-panel-left.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-center.menu-glass-panel,
html[data-menu-layout="stack"] .setup-panel-right.menu-glass-panel {
  grid-column: 1;
  grid-row: auto;
  width: min(100%, 36rem);
  justify-self: center;
}

html[data-menu-layout="stack"]:not([data-form="phone"]) body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-menu-layout="split"]:not([data-form="phone"]) body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Phone + tablet play: board first, chrome out of the way */
html[data-form="phone"] #screen-game.active,
html[data-form="tablet"] #screen-game.active {
  position: relative;
}

html[data-form="phone"] #screen-game.active,
html[data-form="tablet"][data-orientation="portrait"] #screen-game.active {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--hand-h);
  grid-template-areas:
    "table"
    "hand";
}

html[data-form="tablet"][data-orientation="landscape"] #screen-game.active {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  grid-template-rows: minmax(0, 1fr) var(--hand-h);
  grid-template-areas:
    "table sidebar-right"
    "hand hand";
}

html[data-form="tablet"][data-orientation="landscape"] body.sidebar-collapsed #screen-game.active {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "table"
    "hand";
}

html[data-form="tablet"][data-orientation="landscape"] #sidebar-right {
  max-width: var(--sidebar-w);
  min-width: 0;
  overflow: auto;
}

html[data-form="tablet"][data-orientation="landscape"] body.sidebar-collapsed #sidebar-right {
  display: none;
}

html[data-form="phone"] #screen-game .board-viewport,
html[data-form="tablet"] #screen-game .board-viewport {
  --map-chrome-left: 3.6rem;
  padding-left: var(--map-chrome-left);
}

html[data-form="phone"] body.deck-expanded #screen-game .board-viewport,
html[data-form="tablet"] body.deck-expanded #screen-game .board-viewport {
  --map-chrome-left: calc(min(210px, 72vw) + 0.35rem);
  padding-left: var(--map-chrome-left);
}

html[data-form="phone"] .deck-column,
html[data-form="tablet"] .deck-column {
  width: 3.15rem;
  padding: 0.35rem 0.28rem;
}

html[data-form="phone"] .deck-column .deck-rail-sub,
html[data-form="tablet"] .deck-column .deck-rail-sub,
html[data-form="phone"] .deck-column .deck-rail-meta,
html[data-form="tablet"] .deck-column .deck-rail-meta,
html[data-form="phone"] .deck-column .deck-rail-piles,
html[data-form="tablet"] .deck-column .deck-rail-piles {
  display: none;
}

html[data-form="phone"] .deck-column .deck-rail-label,
html[data-form="tablet"] .deck-column .deck-rail-label {
  font-size: 1.15rem;
  white-space: nowrap;
}

html[data-form="phone"] body.deck-expanded .deck-column,
html[data-form="tablet"] body.deck-expanded .deck-column {
  width: min(210px, 72vw);
  z-index: 45;
}

html[data-form="phone"] body.deck-expanded .deck-column .deck-rail-piles,
html[data-form="tablet"] body.deck-expanded .deck-column .deck-rail-piles {
  display: flex;
}

html[data-form="phone"] body.deck-expanded .deck-column .deck-rail-sub,
html[data-form="tablet"] body.deck-expanded .deck-column .deck-rail-sub,
html[data-form="phone"] body.deck-expanded .deck-column .deck-rail-meta,
html[data-form="tablet"] body.deck-expanded .deck-column .deck-rail-meta {
  display: inline;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .brand,
html[data-form="phone"] .version-label {
  display: none;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar {
  flex-wrap: nowrap;
  overflow: visible;
  min-height: var(--topbar-h);
  padding: 0.45rem 0.55rem;
  gap: 0.35rem;
}

html[data-form="tablet"] body.play-window {
  --topbar-h: 6.25rem;
}

html[data-form="tablet"] body.play-window .top-bar.play-top-bar {
  display: grid;
  grid-template-columns: auto minmax(15rem, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "brand stepper actions"
    "suits clock hud";
  align-items: center;
  align-content: center;
  flex-wrap: unset;
  overflow: hidden;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  max-height: var(--topbar-h);
  padding: 0.28rem 0.5rem;
  gap: 0.15rem 0.4rem;
}

html[data-form="tablet"] body.play-window .top-bar.play-top-bar .brand { grid-area: brand; }
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .phase-stepper { grid-area: stepper; }
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .header-actions { grid-area: actions; }
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .hud-suits { grid-area: suits; }
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .death-clock { grid-area: clock; }
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .hud { grid-area: hud; }

html[data-form="tablet"] .play-top-bar .phase-stepper {
  min-width: 15rem;
  max-width: none;
  width: auto;
  margin: 0;
  justify-self: stretch;
  flex-wrap: nowrap;
  gap: 0.2rem;
  padding: 0.1rem 0.35rem;
  overflow: hidden;
}

html[data-form="tablet"] .play-top-bar .phase-stepper .step {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.12rem 0.38rem;
  gap: 0.2rem;
}

html[data-form="tablet"] .play-top-bar .phase-stepper .step-icon svg {
  width: 16px;
  height: 16px;
}

html[data-form="tablet"] .hud-pill-name,
html[data-form="tablet"] .death-clock-label {
  display: none;
}

html[data-form="tablet"] .hud-pill {
  min-height: 1.7rem;
  padding: 0.12rem 0.45rem 0.12rem 0.35rem;
  font-size: 0.78rem;
}

html[data-form="tablet"] body.play-window .top-bar.play-top-bar .hud-suits,
html[data-form="tablet"] body.play-window .top-bar.play-top-bar .death-clock {
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

html[data-form="tablet"] body.play-window .top-bar.play-top-bar .hud {
  justify-self: end;
  min-width: 0;
  width: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}

html[data-form="tablet"] body.play-window .top-bar.play-top-bar .hud::-webkit-scrollbar {
  display: none;
}

html[data-form="phone"] .tutorial-card,
html[data-form="tablet"] .tutorial-card {
  min-width: 0;
  max-width: calc(100vw - 1.25rem);
}

html[data-form="phone"] .tutorial-card {
  width: min(22rem, calc(100vw - 1rem));
  min-height: 240px;
  max-height: min(52vh, 440px);
}

html[data-form="tablet"] .tutorial-card {
  width: min(400px, calc(100vw - 2rem));
  min-width: 300px;
  min-height: 280px;
  max-height: min(56vh, 520px);
}

html[data-form="phone"] .tutorial-card h2,
html[data-form="tablet"] .tutorial-card h2 {
  font-size: 1.05rem;
}

html[data-form="phone"] .tutorial-card p,
html[data-form="tablet"] .tutorial-card p {
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

html[data-form="phone"] .tutorial-backdrop {
  background: rgba(4, 3, 10, 0.22);
}

html[data-form="phone"] .hand-hint,
html[data-form="tablet"] .hand-hint {
  display: none;
}

html[data-form="phone"] #screen-game .hand-bar,
html[data-form="tablet"] #screen-game .hand-bar {
  height: var(--hand-h);
  max-height: var(--hand-h);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  gap: 0.45rem;
  padding-right: 0.4rem;
}

html[data-form="phone"] #screen-game .hand-bar > *,
html[data-form="tablet"] #screen-game .hand-bar > * {
  scroll-snap-align: start;
}

html[data-form="phone"] .player-list-dock .player-chip,
html[data-form="tablet"] .player-list-dock .player-chip {
  min-height: 44px;
  min-width: 44px;
}

html[data-form="phone"] .hand .game-card,
html[data-form="tablet"] .hand .game-card,
html[data-form="phone"] .hand-primary .game-card,
html[data-form="tablet"] .hand-primary .game-card {
  min-width: 72px;
}

.chrome-edge-toggle {
  display: none;
}

html[data-form="phone"] .chrome-edge-toggle,
html[data-form="tablet"] .chrome-edge-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 46;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(201, 160, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 6, 20, 0.88);
  color: #f5e6b8;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chrome-edge-toggle-deck {
  top: 0.55rem;
  left: 0.45rem;
}

.chrome-edge-toggle-side {
  top: 0.55rem;
  right: 0.45rem;
}

html[data-form="tablet"][data-orientation="landscape"] .chrome-edge-toggle-side {
  right: calc(var(--sidebar-w) + 0.45rem);
}

html[data-form="tablet"][data-orientation="landscape"] body.sidebar-collapsed .chrome-edge-toggle-side {
  right: 0.45rem;
}

.chrome-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(4, 3, 10, 0.45);
}

.chrome-drawer-backdrop.hidden {
  display: none;
}

/* 30.2: `#screen-game .sidebar.right { position: relative }` (1,2,0) used to beat
   this (1,1,0) rule, so the "drawer" stayed in normal flow, forced an implicit
   grid column and squeezed the board to 70px on phones. */
html[data-form="phone"] #screen-game #sidebar-right,
html[data-form="tablet"][data-orientation="portrait"] #screen-game #sidebar-right {
  display: flex;
  position: fixed;
  top: calc(var(--topbar-h, 52px) + var(--sat));
  right: 0;
  bottom: var(--hand-h);
  width: min(320px, 86vw);
  z-index: 80;
  transform: translateX(110%);
  transition: transform 0.2s ease;
  max-width: min(320px, 86vw);
}

html[data-form="tablet"][data-orientation="portrait"] {
  --tablet-drawer-w: min(380px, 44vw);
}

html[data-form="tablet"][data-orientation="portrait"] #screen-game #sidebar-right {
  width: var(--tablet-drawer-w);
  max-width: var(--tablet-drawer-w);
}

html[data-form="phone"] body.sidebar-drawer-open #screen-game #sidebar-right,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open #screen-game #sidebar-right {
  transform: none;
}

#header-more-panel .btn,
#header-more-panel .header-dropdown {
  width: 100%;
  margin: 0 0 0.4rem;
}

#header-more-panel .header-dropdown-panel {
  position: static;
  width: 100%;
  max-height: 40vh;
  box-shadow: none;
}

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

.btn-pwa-install {
  width: 100%;
  margin-top: 0.55rem;
}

.pwa-toast {
  position: fixed;
  top: calc(4.6rem + env(safe-area-inset-top));
  right: calc(0.85rem + env(safe-area-inset-right));
  left: auto;
  transform: none;
  z-index: 2400;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(28rem, calc(100vw - 1.5rem));
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(201, 160, 255, 0.4);
  background: rgba(12, 8, 24, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: #f5e6b8;
}

.pwa-toast.hidden {
  display: none;
}

.pwa-toast p {
  margin: 0;
  font-size: 0.9rem;
}

.pwa-sheet {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.pwa-sheet.hidden {
  display: none;
}

.pwa-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 10, 0.62);
}

.pwa-sheet-card {
  position: relative;
  width: min(26rem, 100%);
  padding: 1.25rem 1.3rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(201, 160, 255, 0.35);
  background: #120c22;
  color: #f5e6b8;
}

.pwa-sheet-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
}

.pwa-sheet-card ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.pwa-sheet-card .btn {
  width: 100%;
}

@media (max-width: 980px) {
  html[data-form="tablet"][data-orientation="landscape"] #screen-game.active {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    grid-template-rows: minmax(0, 1fr) var(--hand-h);
    grid-template-areas:
      "table sidebar-right"
      "hand hand";
  }

  html[data-form="phone"] #screen-game.active,
  html[data-form="tablet"][data-orientation="portrait"] #screen-game.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--hand-h);
    grid-template-areas:
      "table"
      "hand";
  }

  html[data-form="tablet"][data-orientation="landscape"] body.sidebar-collapsed #screen-game.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "table"
      "hand";
  }

}

/* === Polish, motion, and sparkle FX === */

@keyframes btn-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes card-deal {
  0% {
    opacity: 0;
    transform: translateY(34px) translateX(-8px) scale(1.14, 0.74) rotate(-6deg);
  }
  58% {
    opacity: 1;
    transform: translateY(-8px) scale(0.94, 1.08) rotate(2deg);
  }
  80% {
    transform: translateY(3px) scale(1.04, 0.96) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes card-selected-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(201, 160, 255, 0.35),
      0 0 18px rgba(123, 92, 255, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(201, 160, 255, 0.55),
      0 0 30px rgba(123, 92, 255, 0.62);
  }
}

@keyframes card-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes hex-reveal {
  0% {
    transform: translate(-50%, -50%) scale(0.82);
    filter: brightness(1.8) saturate(1.4);
  }
  55% {
    transform: translate(-50%, -50%) scale(1.07);
    filter: brightness(1.25);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
}

@keyframes phase-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(123, 92, 255, 0.15); }
  50% { box-shadow: 0 0 22px rgba(123, 92, 255, 0.38); }
}

@keyframes phase-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes advance-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(123, 92, 255, 0.35); }
  50% { box-shadow: 0 6px 28px rgba(123, 92, 255, 0.55), 0 0 24px rgba(90, 141, 255, 0.25); }
}

@keyframes chip-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(123, 92, 255, 0.15); }
  50% { box-shadow: 0 0 20px rgba(123, 92, 255, 0.35); }
}

@keyframes dream-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.04); }
}

@keyframes dream-haze-shift {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  40% { filter: brightness(1.03) hue-rotate(8deg); }
  70% { filter: brightness(1.01) hue-rotate(-6deg); }
}

@keyframes dream-haze-drift {
  0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.9; transform: translate3d(1.4%, -1.2%, 0) scale(1.04); }
}

@keyframes prompt-pulse {
  0%, 100% {
    box-shadow: var(--shadow), 0 0 30px rgba(123, 92, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: var(--shadow), 0 0 50px rgba(123, 92, 255, 0.42);
    transform: scale(1.02);
  }
}

@keyframes sparkle-float {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0);
  }
}

@keyframes menu-panel-breathe {
  0%, 100% {
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.32),
      0 0 18px rgba(123, 92, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.34),
      0 0 32px rgba(123, 92, 255, 0.2),
      0 0 48px rgba(90, 141, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

@keyframes menu-border-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes menu-sparkle-twinkle {
  0%, 100% { opacity: 0.38; filter: brightness(1); }
  35% { opacity: 0.78; filter: brightness(1.25); }
  70% { opacity: 0.52; filter: brightness(1.08); }
}

@keyframes menu-launch-panel-glow {
  0%, 100% {
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.32),
      0 0 36px rgba(123, 92, 255, 0.24),
      0 0 64px rgba(90, 141, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 12px 42px rgba(0, 0, 0, 0.34),
      0 0 52px rgba(155, 123, 255, 0.42),
      0 0 88px rgba(255, 210, 120, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

@keyframes menu-begin-beacon {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.22),
      0 8px 28px rgba(123, 92, 255, 0.45),
      0 0 36px rgba(90, 141, 255, 0.28),
      0 0 56px rgba(255, 210, 120, 0.16);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.35),
      0 12px 36px rgba(155, 123, 255, 0.62),
      0 0 52px rgba(90, 200, 255, 0.38),
      0 0 72px rgba(255, 210, 120, 0.28);
  }
}

@keyframes menu-btn-sweep {
  0%, 18% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  28% { opacity: 1; }
  52% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
}

#fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10050;
  overflow: hidden;
}

.fx-sparkle {
  position: absolute;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  filter: drop-shadow(0 0 4px rgba(255, 248, 220, 0.95));
  animation: sparkle-float 0.85s ease-out forwards;
}

body.menu-window #app {
  position: relative;
}

body.menu-window #app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 80% 12%, rgba(201, 160, 255, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 55% 78%, rgba(123, 92, 255, 0.35), transparent),
    radial-gradient(1px 1px at 30% 65%, rgba(255, 255, 255, 0.25), transparent);
  animation: stars-drift 80s linear infinite;
  opacity: 0.55;
  z-index: 0;
}

@keyframes stars-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-40px); }
}

@media (prefers-reduced-motion: reduce) {
  .game-card.card-enter,
  .game-card.selected,
  .hex-tile.just-revealed,
  .hex-tile.just-forgotten,
  .hex-tile.just-revealed .hex-mat-to,
  .hex-tile.just-revealed .hex-mat-from,
  .hex-tile.just-revealed .name,
  .hex-tile.just-revealed .hex-overlay,
  .hex-tile.just-revealed .hex-mist,
  .hex-tile.just-forgotten .hex-forget-from,
  .hex-tile.just-forgotten .hex-mat-to,
  .hex-tile.just-forgotten .name-leaving,
  .hex-tile.just-forgotten .name-arriving,
  .hex-tile.just-forgotten::after,
  .hex-tile.just-revealed::after,
  .hex-tile.hex-ripple-reveal,
  .hex-tile.hex-ripple-forget,
  .fx-reveal-ripple,
  .fx-forget-ripple,
  .dream-motes,
  #screen-game .hand-primary .game-card.psyche-card::before,
  .fx-dreamer-thread,
  .fx-beast-crack,
  .fx-cursor-mote,
  .battle-die-slot.plucked,
  .hex-tile.hex-flash-reveal,
  .hex-tile.hex-flash-forget,
  .hex-tile.hex-mindstream-hit,
  .hex-tile.hex-encounter-spawn,
  .hex-tile.hex-meet-accept,
  .hex-tile.hex-meet-reject,
  .hex-tile.hex-psyche-gold,
  .hex-tile.movable .hex-overlay,
  .fx-screen-overlay,
  .fx-dream-warble,
  .moment-toast.is-playing,
  .moment-toast.is-fading,
  #screen-game .table-surface::after,
  .fx-board-flyer,
  .fx-point-ripple,
  .fx-summon-ripple,
  .fx-land-ripple,
  .fx-psyche-swirl,
  .phase-stepper .step.active,
  .phase-stepper.phase-pulse .step.active,
  .btn-advance,
  .player-chip.active,
  #screen-game .table-surface,
  body.menu-window #app::before,
  .menu-glass-panel,
  .menu-glass-panel::before,
  .menu-glass-panel::after,
  .setup-panel-right.menu-glass-panel:has(.begin-dream-ready),
  #btn-start.begin-dream-btn.begin-dream-ready,
  #btn-start.begin-dream-btn.begin-dream-ready::after,
  .fullscreen-prompt-card {
    animation: none !important;
  }

  .btn.primary {
    animation: none;
    background: linear-gradient(135deg, var(--accent-strong), #5a8dff);
  }

  .fx-flying-card,
  .fx-float-label,
  .fx-hex-ghost,
  .game-card.card-landed,
  .deck-pile.deck-pulse-gain,
  .deck-pile.deck-pulse-loss,
  .deck-pile.deck-pulse-repress,
  .deck-pile.deck-shuffle,
  .deck-rail-row.deck-shuffle,
  .deck-rail-draw.deck-shuffle,
  body.opening-cinematic .deck-rail-row,
  body.opening-cinematic .hex-tile,
  body.opening-cinematic #hand .game-card,
  body.opening-cinematic #hand-primary .game-card,
  body.opening-cinematic .coop-hand-row .game-card,
  body.opening-cinematic .player-chip,
  .player-chip.life-gain,
  .player-chip.life-loss,
  #hand-stats.life-gain,
  #hand-stats.life-loss,
  #hand.hand-gain,
  #hand.hand-loss,
  #hand-primary.hand-gain,
  #hand-primary.hand-loss,
  .coop-hand-row.hand-gain,
  .coop-hand-row.hand-loss {
    animation: none !important;
  }
}

/* ——— Panel resize handles ——— */
.resize-handle {
  position: absolute;
  z-index: 20;
  background: rgba(201, 160, 255, 0.15);
  transition: background 0.15s ease;
}

.resize-handle:hover,
.resize-handle.dragging {
  background: rgba(201, 160, 255, 0.45);
}

.resize-col {
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  right: -3px;
}

.resize-col.edge-left {
  right: auto;
  left: -3px;
}

.resize-row {
  left: 0;
  right: 0;
  height: 6px;
  cursor: row-resize;
}

#resize-chrome,
#resize-footer {
  position: relative;
  flex-shrink: 0;
  z-index: 12;
  background: rgba(201, 160, 255, 0.12);
}

#resize-chrome:hover,
#resize-footer:hover,
#resize-chrome.dragging,
#resize-footer.dragging {
  background: rgba(201, 160, 255, 0.4);
}

.hand-bar > .resize-handle.resize-row.edge-top {
  top: 0;
  left: 0;
  right: 0;
}

body.panel-resizing {
  user-select: none;
  cursor: inherit;
}

/* ——— Pause menu ——— */
.pause-menu {
  position: fixed;
  inset: 0;
  z-index: 11500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

.pause-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 12, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pause-card {
  position: relative;
  width: min(520px, 96vw);
  max-height: min(88vh, 720px);
  overflow: auto;
  background: rgba(14, 12, 28, 0.96);
  border: 1px solid rgba(180, 160, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem 1.25rem;
}

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

.pause-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.pause-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.pause-tab {
  flex: 1;
  min-width: 5.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.pause-tab.active {
  border-color: var(--accent);
  background: rgba(123, 92, 255, 0.22);
  color: #fff;
}

.pause-body {
  font-size: 0.95rem;
}

.pause-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pause-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.pause-section h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
}

.pause-field {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}

.pause-field span {
  font-size: 0.88rem;
  color: var(--muted);
}

.pause-save-name-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.pause-save-name-row .pause-field {
  flex: 1 1 8rem;
  margin-bottom: 0;
}

.pause-save-last-field {
  flex: 0 1 5rem;
}

.pause-save-last {
  max-width: 4.5rem;
}

.pause-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.95rem;
}

.pause-pan .pan-readout {
  font-size: 0.82rem;
  color: var(--accent);
}

.pause-btn-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pause-btn-col {
  flex-direction: column;
}

.pause-hint,
.setup-hint {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 0.65rem;
}

.pause-save-error {
  color: var(--danger);
}

.pause-save-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.pause-save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.pause-save-info {
  min-width: 0;
}

.pause-save-info strong {
  display: block;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.pause-save-owner {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-left: 0.25rem;
}

.pause-save-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.pause-save-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}

.pause-save-dreamers {
  color: var(--accent);
  opacity: 0.85;
}

.pause-game-id-section {
  border: 1px solid rgba(140, 120, 255, 0.28);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  background: linear-gradient(135deg, rgba(90, 70, 220, 0.14), rgba(30, 20, 80, 0.1));
}

.pause-game-id-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.pause-game-id {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d8ccff;
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  border: 1px dashed rgba(180, 160, 255, 0.45);
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, border-color 0.15s ease;
}

:where(html:not([data-hover="false"])) .pause-game-id:hover {
  background: rgba(120, 90, 255, 0.18);
  border-color: rgba(200, 180, 255, 0.8);
}

.pause-seed-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid rgba(140, 120, 255, 0.35);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* Win / lose screen: the dream's Game ID, tap to copy or share. */
.end-game-id-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  margin: 0.4rem auto 1rem;
  padding: 0.65rem 0.9rem;
  max-width: 34rem;
  border: 1px solid rgba(140, 120, 255, 0.28);
  border-radius: 12px;
  background: rgba(30, 20, 80, 0.22);
}

.end-game-id-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

button.end-game-id {
  font: inherit;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  min-height: 40px;
}

.end-game-id-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.pause-exit-btn {
  border-color: rgba(255, 190, 120, 0.4);
}

.saved-dreams-modal h2 {
  margin-top: 0;
}

.saved-dreams-section {
  margin-bottom: 1.1rem;
}

.saved-dreams-section h3 {
  margin: 0 0 0.4rem;
}

.btn-saved-dreams {
  margin-top: 0.55rem;
  width: 100%;
}

.field-seed input {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field-optional {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.04em;
}

.seed-preview {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  border-left: 3px solid rgba(140, 120, 255, 0.4);
  padding: 0.25rem 0 0.25rem 0.6rem;
  margin: 0.35rem 0 0;
}

.seed-preview-special {
  color: #e8dcff;
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(120, 90, 255, 0.12), transparent);
}

/* Holographic foil — DMZEMO seed, or the Display toggle. Light follows the pointer or device tilt. */
:is(body.holo-foil, body.seed-dmzemo) .game-card {
  position: relative;
  isolation: isolate;
}

:is(body.holo-foil, body.seed-dmzemo) .game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 18%,
    rgba(255, 0, 128, 0.22) 32%,
    rgba(255, 235, 0, 0.2) 44%,
    rgba(0, 255, 200, 0.22) 56%,
    rgba(80, 120, 255, 0.24) 68%,
    transparent 82%
  );
  background-size: 280% 280%;
  mix-blend-mode: screen;
  animation: dmzemo-holo-shift 6.5s linear infinite;
}

body.holo-tilt:is(.holo-foil, .seed-dmzemo) .game-card::after,
:is(body.holo-foil, body.seed-dmzemo) .game-card.is-holo-lit::after {
  animation: none;
  background-position:
    calc(50% + var(--holo-px, var(--holo-gx, 0)) * 72%)
    calc(50% + var(--holo-py, var(--holo-gy, 0)) * 48%);
}

:is(body.holo-foil, body.seed-dmzemo) .game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.045) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

@keyframes dmzemo-holo-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  :is(body.holo-foil, body.seed-dmzemo) .game-card::after {
    animation: none;
    background-position: 42% 48%;
  }
}

.setup-audio-display {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.setup-audio-display h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
}

.sidebar h3 {
  font-size: calc(0.95rem * var(--ui-scale));
}

.narrator-detail,
.narrator-title {
  font-size: calc(1rem * var(--ui-scale));
}

/* ——— Card flow FX ——— */

.fx-flying-card {
  position: fixed;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 8600;
  opacity: 0.95;
  transform: translate(0, 0) scale(1);
  transition: none;
}

.fx-flying-card.fx-flying-active {
  animation: fx-card-fly 0.62s cubic-bezier(0.18, 0.85, 0.32, 1.1) forwards;
}

.fx-flying-card.suit-lucidity { background: linear-gradient(160deg, #2a5a9a, #1a3060); color: #e8f4ff; }
.fx-flying-card.suit-elasticity { background: linear-gradient(160deg, #8a7018, #4a3810); color: #fff6c8; }
.fx-flying-card.suit-willpower { background: linear-gradient(160deg, #8a2020, #4a1010); color: #ffe0e0; }
.fx-flying-card.suit-wild { background: linear-gradient(160deg, #5a3a8a, #2a1848); color: #f0e8ff; }

.fx-flip-card {
  perspective: 480px;
  background: #120f22;
  overflow: hidden;
}

.fx-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: fx-card-flip 0.55s ease forwards;
}

.fx-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #120f22;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fx-flip-front { transform: rotateY(180deg); }

@keyframes fx-card-flip {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

.fx-flying-draw { box-shadow: 0 0 18px rgba(109, 255, 176, 0.55); }
.fx-flying-discard { box-shadow: 0 0 16px rgba(255, 120, 120, 0.45); }
.fx-flying-spend { box-shadow: 0 0 20px rgba(201, 160, 255, 0.65); border-color: var(--accent); }
.fx-flying-trade { box-shadow: 0 0 20px rgba(109, 212, 255, 0.6); border-color: #6dd4ff; }
.fx-flying-repress { box-shadow: 0 0 20px rgba(160, 80, 220, 0.65); border-color: #c878ff; }
.fx-flying-spawn { box-shadow: 0 0 22px rgba(232, 72, 72, 0.7); border-color: #ff8a8a; }
.fx-flying-power { box-shadow: 0 0 18px rgba(240, 201, 106, 0.75); border-color: #f0c96a; background: linear-gradient(160deg, #6a5010, #3a2808); color: #fff3c8; }
.fx-flying-dream {
  background: linear-gradient(160deg, #3a2868, #1a1038);
  color: #f0e8ff;
  box-shadow: 0 0 28px rgba(201, 160, 255, 0.75);
  border-color: #c9a0ff;
}

.fx-card-label { font-size: 1.2rem; line-height: 1; }
.fx-card-name { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; }
.fx-float-label.fx-spawn-label { color: #ff8a9a; font-size: 0.9rem; }

.fx-screen-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10040;
  opacity: 0;
}

.fx-screen-overlay.hidden {
  display: none;
}

.fx-screen-overlay.is-playing {
  display: block;
}

.fx-sub-clear.is-playing {
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), transparent 62%);
}

.dream-replay-search {
  width: min(28rem, 100%);
  margin: 0.4rem auto 0.8rem;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 6, 18, 0.72);
  color: inherit;
  font: inherit;
}

.fx-sub-clear-mote {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: hsl(var(--mote-hue, 200) 95% 68%);
  box-shadow: 0 0 12px hsl(var(--mote-hue, 200) 95% 70%);
  animation: fx-sub-clear-mote 1.45s ease-out forwards;
}

@keyframes fx-sub-clear-mote {
  0% { transform: scale(0.2); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-28px) scale(1.4); opacity: 0; }
}

.fx-dream-ripple.is-playing {
  background: #05030c;
}

.fx-dream-ripple.fx-dream-eye.is-playing {
  animation: fx-dream-eye 0.98s ease-in-out forwards;
}

.fx-dream-ripple.fx-dream-hallway.is-playing {
  background:
    linear-gradient(90deg, #05030c 0%, transparent 22%, transparent 78%, #05030c 100%),
    linear-gradient(#05030c, transparent 28%, transparent 72%, #05030c);
  animation: fx-dream-hallway 0.92s ease-in-out forwards;
}

.fx-dream-ripple.fx-dream-teeth.is-playing {
  animation: fx-dream-teeth 0.92s ease-in-out forwards;
  -webkit-mask-image: repeating-conic-gradient(from 0deg at 50% 54%, #000 0 7deg, transparent 7deg 14deg);
  mask-image: repeating-conic-gradient(from 0deg at 50% 54%, #000 0 7deg, transparent 7deg 14deg);
}

.fx-phase-spend.is-playing {
  animation: fx-phase-spend 0.88s ease-out forwards;
}

.fx-phase-spend.lucidity.is-playing {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(74, 158, 255, 0.46), rgba(20, 48, 110, 0.18) 52%, transparent 76%);
}

.fx-phase-spend.elasticity.is-playing {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(240, 201, 106, 0.44), rgba(110, 80, 12, 0.16) 52%, transparent 76%);
}

.fx-phase-spend.willpower.is-playing {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(232, 72, 72, 0.44), rgba(90, 16, 24, 0.18) 52%, transparent 76%);
}

.fx-dream-warble.is-playing {
  animation: fx-dream-warble 0.64s ease-out forwards;
  background:
    radial-gradient(ellipse at 42% 40%, rgba(180, 140, 255, calc(0.16 * var(--warble-strength, 0.7))), transparent 48%),
    radial-gradient(ellipse at 62% 58%, rgba(90, 190, 255, calc(0.12 * var(--warble-strength, 0.7))), transparent 52%);
  mix-blend-mode: screen;
}

.fx-board-flyer {
  position: fixed;
  width: 56px;
  height: 72px;
  pointer-events: none;
  z-index: 10051;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(201, 160, 255, 0.45));
}

.fx-board-flyer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.fx-board-flyer-trail {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 220, 0.35), rgba(180, 140, 255, 0.12) 55%, transparent 72%);
  filter: blur(4px);
  z-index: -1;
}

.fx-beast-flyer {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(232, 72, 72, 0.5));
}

.fx-board-flyer-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #fff8dc;
}

.fx-meet-accept.is-playing {
  animation: fx-meet-accept 0.62s ease-out forwards;
  background:
    radial-gradient(circle at 30% 28%, rgba(130, 190, 255, 0.28), transparent 36%),
    radial-gradient(circle at 70% 60%, rgba(240, 201, 106, 0.22), transparent 38%),
    radial-gradient(circle at 50% 45%, rgba(140, 90, 210, 0.32), transparent 55%);
}

.fx-meet-reject.is-playing {
  animation: fx-meet-reject 0.68s ease-out forwards;
  background:
    radial-gradient(circle at 48% 40%, rgba(0, 0, 0, 0.55), transparent 38%),
    repeating-linear-gradient(118deg, transparent 0 18px, rgba(255, 80, 30, 0.18) 18px 20px),
    linear-gradient(160deg, rgba(255, 90, 40, 0.28), rgba(255, 200, 60, 0.16), transparent 70%);
}

.fx-click-ripple {
  border-color: rgba(201, 160, 255, 0.75);
  box-shadow:
    0 0 16px rgba(240, 201, 106, 0.45),
    0 0 28px rgba(123, 92, 255, 0.35);
  animation: fx-point-ripple 0.72s ease-out forwards;
}

.fx-click-shimmer {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(201, 160, 255, 0.35) 42%, transparent 72%);
  animation: fx-click-shimmer 0.5s ease-out forwards;
}

@keyframes fx-click-shimmer {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(2.8); opacity: 0; }
}

.meet-pool-guide,
.meet-pool-guide[hidden] {
  display: none !important;
}

.meet-pool-guide.hidden {
  display: none;
}

#psyche-play-cursor {
  position: fixed;
  z-index: 9200;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.4rem;
  max-width: 16rem;
  padding: 0.28rem 0.5rem;
  border-radius: 10px;
  background: rgba(12, 10, 22, 0.92);
  border: 1px solid rgba(180, 160, 255, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  color: #f4f0ff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  transform: translate(0, -50%);
}

#psyche-play-cursor.hidden {
  display: none;
}

.psyche-play-suits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.psyche-play-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.08rem 0.28rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.psyche-play-chip.suit-lucidity { color: #7ec8ff; }
.psyche-play-chip.suit-elasticity { color: #f0d56a; }
.psyche-play-chip.suit-willpower { color: #ff8a8a; }
.psyche-play-chip.wild { color: #d8c4ff; }
.psyche-play-chip.is-zero { opacity: 0.42; }

.psyche-play-extra {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.psyche-play-total {
  color: #fff;
  font-size: 0.8rem;
}

.psyche-play-need {
  width: 100%;
  color: rgba(232, 200, 255, 0.85);
  font-weight: 600;
}

.meet-pool-targets {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.meet-pool-targets .meet-pool-ready {
  color: #8fd4a0;
  font-weight: 700;
}

.power-token-radial-item.radial-primary.ready:not(:disabled) {
  border-color: rgba(240, 201, 106, 0.85);
}

.fx-point-ripple,
.fx-summon-ripple,
.fx-land-ripple {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  border: 2px solid rgba(232, 72, 72, 0.7);
  box-shadow: 0 0 18px rgba(232, 72, 72, 0.45);
  animation: fx-point-ripple 0.88s ease-out forwards;
}

.fx-land-ripple {
  border-color: rgba(201, 160, 255, 0.75);
  box-shadow: 0 0 20px rgba(240, 201, 106, 0.45);
}

.fx-psyche-swirl {
  animation: fx-psyche-swirl 0.52s ease-out forwards;
  box-shadow: 0 0 18px rgba(240, 201, 106, 0.55);
}

@keyframes fx-dream-blink {
  0% { opacity: 0; }
  16% { opacity: 1; }
  42% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fx-dream-eye {
  0% { opacity: 1; clip-path: circle(0% at 50% 46%); }
  32% { opacity: 1; clip-path: circle(150% at 50% 46%); }
  58% { clip-path: circle(150% at 50% 46%); }
  100% { opacity: 1; clip-path: circle(0% at 50% 46%); }
}

@keyframes fx-dream-hallway {
  0% { opacity: 0; transform: scaleX(1.35) scaleY(1.15); }
  42% { opacity: 1; transform: scaleX(0.28) scaleY(0.42); }
  100% { opacity: 0; transform: scaleX(1.7) scaleY(1.45); }
}

@keyframes fx-dream-teeth {
  0% { opacity: 0; transform: scale(1.85) rotate(0deg); }
  34% { opacity: 1; transform: scale(0.28) rotate(14deg); }
  58% { opacity: 1; transform: scale(0.16) rotate(-8deg); }
  100% { opacity: 0; transform: scale(2.15) rotate(18deg); }
}

@keyframes fx-dream-ripple {
  0% { opacity: 0; transform: scale(0.86); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes fx-phase-spend {
  0% { opacity: 0; }
  22% { opacity: 0.92; }
  100% { opacity: 0; }
}

@keyframes fx-dream-warble {
  0% { opacity: 0; filter: hue-rotate(0deg) blur(10px); }
  22% { opacity: 1; filter: hue-rotate(18deg) blur(2px); }
  55% { opacity: 0.7; filter: hue-rotate(-14deg) blur(4px); }
  100% { opacity: 0; filter: hue-rotate(0deg) blur(12px); }
}

@keyframes fx-meet-accept {
  0% { opacity: 0; filter: blur(8px); }
  22% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; }
}

@keyframes fx-meet-reject {
  0% { opacity: 0; clip-path: inset(40% 40% 40% 40%); }
  18% { opacity: 1; clip-path: inset(0 0 0 0); }
  45% { opacity: 0.85; filter: contrast(1.2); }
  100% { opacity: 0; }
}

@keyframes fx-point-ripple {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(8); opacity: 0; }
}

.fx-reveal-ripple,
.fx-forget-ripple {
  position: absolute;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}

.fx-reveal-ripple {
  border: 1.5px solid rgba(214, 246, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(120, 210, 235, 0.28);
  animation: fx-board-ripple 1.36s cubic-bezier(0.22, 0.4, 0.2, 1) forwards;
}

.fx-forget-ripple {
  border: 1.5px solid rgba(196, 106, 128, 0.8);
  box-shadow: 0 0 0 1px rgba(90, 24, 40, 0.35);
  animation: fx-board-ripple-forget 0.9s cubic-bezier(0.22, 0.4, 0.2, 1) forwards;
}

@keyframes fx-board-ripple {
  0% { transform: scale(0.35); opacity: 0; }
  14% { opacity: 0.92; }
  100% { transform: scale(14); opacity: 0; }
}

@keyframes fx-board-ripple-forget {
  0% { transform: scale(0.35); opacity: 0; }
  16% { opacity: 0.8; }
  100% { transform: scale(11); opacity: 0; }
}

@keyframes fx-psyche-swirl {
  0% { transform: rotate(calc(var(--swirl-i, 0) * 28deg)) translateY(0) scale(0.7); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(calc(var(--swirl-i, 0) * 28deg + 140deg)) translateY(-36px) scale(1); opacity: 0.95; }
}

.power-tokens.power-tokens-gain {
  animation: power-tokens-gain 0.6s ease;
}

.power-tokens.power-tokens-spend {
  animation: power-tokens-spend 0.6s ease;
}

@keyframes power-tokens-spend {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 16px rgba(255, 122, 146, 0.4); }
}

#player-objects.objects-gain,
#player-persistent.objects-gain {
  animation: objects-gain 0.55s ease;
}

@keyframes power-tokens-gain {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 16px rgba(240, 201, 106, 0.35); }
}

@keyframes objects-gain {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 0 0 14px rgba(109, 255, 176, 0.25); }
}

.fx-card-value { font-size: 1.15rem; line-height: 1; }
.fx-card-suit { font-size: 0.75rem; opacity: 0.9; }

.fx-float-label {
  position: fixed;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  z-index: 8700;
  animation: fx-label-rise 1.1s ease-out forwards;
  pointer-events: none;
}

.fx-float-label.fx-gain { color: #6dffb0; }
.fx-float-label.fx-loss { color: #ff7a92; }

.deck-pile.deck-pulse-gain,
.deck-dropdown-row.deck-pulse-gain,
.deck-rail-row.deck-pulse-gain,
.deck-rail-draw.deck-pulse-gain {
  animation: deck-pulse-gain 0.55s ease;
}

.deck-pile.deck-pulse-loss,
.deck-dropdown-row.deck-pulse-loss,
.deck-rail-row.deck-pulse-loss,
.deck-rail-draw.deck-pulse-loss {
  animation: deck-pulse-loss 0.55s ease;
}

.deck-pile.deck-pulse-repress,
.deck-dropdown-row.deck-pulse-repress,
.deck-rail-row.deck-pulse-repress,
.deck-rail-draw.deck-pulse-repress {
  animation: deck-pulse-repress 0.55s ease;
}

.player-chip.life-gain,
#hand-stats.life-gain {
  animation: life-gain-flash 0.65s ease;
}

.player-chip.life-loss,
#hand-stats.life-loss {
  animation: life-loss-flash 0.65s ease;
}

#hand.hand-gain,
#hand-primary.hand-gain,
.coop-hand-row.hand-gain {
  animation: hand-gain-flash 0.55s ease;
}

#hand.hand-loss,
#hand-primary.hand-loss,
.coop-hand-row.hand-loss {
  animation: hand-loss-flash 0.55s ease;
}

.game-card.card-landed {
  animation: card-land-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-flying-card.fx-flying-discard.fx-flying-active,
.fx-flying-card.fx-flying-spend.fx-flying-active {
  animation-name: fx-card-lift-away;
  animation-duration: 0.72s;
}

.fx-flying-card.fx-flying-accept.fx-flying-active {
  animation-name: fx-card-accept;
  animation-duration: 0.98s;
  box-shadow: 0 0 28px rgba(240, 201, 106, 0.75);
  border-color: #f0c96a;
}

.fx-flying-card.fx-repress-spiral.fx-flying-active,
.fx-flying-card.fx-flying-tarot.fx-repress-spiral.fx-flying-active {
  animation-name: fx-repress-drain;
  animation-duration: 0.98s;
}

@keyframes fx-card-lift-away {
  0% { opacity: 1; transform: translate(0, 6px) scale(1) rotate(-6deg); }
  24% { opacity: 1; transform: translate(calc(var(--fx-tx, 0) * 0.16), -42px) scale(1.16) rotate(-12deg); }
  100% { opacity: 0; transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(0.62) rotate(10deg); }
}

@keyframes fx-card-accept {
  0% { opacity: 0.2; transform: translate(0, 8px) scale(0.7) rotate(-8deg); }
  18% { opacity: 1; }
  42% { transform: translate(calc(var(--fx-tx, 0) * 0.35), calc(var(--fx-ty, 0) * 0.15 - 48px)) scale(1.18) rotate(6deg); }
  100% { opacity: 0; transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(0.84) rotate(0deg); }
}

@keyframes fx-repress-drain {
  0% {
    opacity: 1;
    filter: blur(0) saturate(1) brightness(1);
    transform: translate(0, 0) scale(1, 1) rotate(0deg);
  }
  30% {
    opacity: 0.92;
    filter: blur(0.6px) saturate(1.35) brightness(0.85);
    transform: translate(calc(var(--fx-tx, 0) * 0.2), calc(var(--fx-ty, 0) * 0.1 - 14px)) scale(1.08, 0.92) rotate(-7deg);
  }
  100% {
    opacity: 0;
    filter: blur(16px) saturate(1.7) brightness(0.4);
    transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(1.22, 0.62) rotate(8deg);
  }
}

.fx-dreamer-thread,
.fx-beast-crack {
  position: fixed;
  height: 3px;
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 8400;
  animation: fx-wake-fade 0.9s ease forwards;
}

.fx-dreamer-thread {
  background: linear-gradient(90deg, rgba(240, 201, 106, 0.85), rgba(201, 160, 255, 0));
  box-shadow: 0 0 8px rgba(240, 201, 106, 0.65);
}

.fx-beast-crack {
  height: 4px;
  background: linear-gradient(90deg, rgba(232, 72, 72, 0.9), rgba(40, 0, 20, 0));
  box-shadow: 0 0 10px rgba(232, 72, 72, 0.55);
}

@keyframes fx-wake-fade {
  0% { opacity: 0.15; }
  25% { opacity: 0.9; }
  100% { opacity: 0; }
}

.fx-cursor-mote {
  position: fixed;
  width: var(--mote-size, 6px);
  height: var(--mote-size, 6px);
  margin-left: calc(var(--mote-size, 6px) / -2);
  margin-top: calc(var(--mote-size, 6px) / -2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8700;
  background: hsl(var(--mote-hue, 280), 92%, 64%);
  box-shadow: 0 0 8px hsl(var(--mote-hue, 280), 95%, 68%);
  animation: fx-cursor-mote 0.72s ease-out forwards;
}
@keyframes fx-cursor-mote {
  0% { opacity: 0.95; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--mote-dx, 0px), var(--mote-dy, 12px)) scale(0.2); }
}

@keyframes fx-card-fly {
  0% {
    opacity: 0.1;
    transform: translate(0, 0) scale(0.68) rotate(-10deg);
  }
  12% { opacity: 1; }
  48% {
    transform: translate(calc(var(--fx-tx, 0) * 0.48), calc(var(--fx-ty, 0) * 0.38 - 28px)) scale(1.08) rotate(6deg);
  }
  78% {
    transform: translate(calc(var(--fx-tx, 0) * 1.05), calc(var(--fx-ty, 0) * 1.03 - 4px)) scale(1.16, 0.88) rotate(-3deg);
  }
  90% {
    opacity: 1;
    transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(0.94, 1.06) rotate(1deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(0.82) rotate(0deg);
  }
}

@keyframes fx-label-rise {
  0% { opacity: 0; transform: translate(-50%, -20%); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -120%); }
}

@keyframes deck-pulse-gain {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px rgba(109, 255, 176, 0.55), 0 0 18px rgba(109, 255, 176, 0.35); }
}

@keyframes deck-pulse-loss {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px rgba(255, 120, 120, 0.5), 0 0 16px rgba(255, 120, 120, 0.3); }
}

@keyframes deck-pulse-repress {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px rgba(200, 120, 255, 0.55), 0 0 18px rgba(160, 80, 220, 0.35); }
}

.deck-pile.deck-shuffle,
.deck-dropdown-row.deck-shuffle,
.deck-rail-row.deck-shuffle,
.deck-rail-draw.deck-shuffle {
  animation: deck-shuffle 0.8s ease;
}

@keyframes deck-shuffle {
  0%, 100% { translate: 0 0; rotate: 0deg; box-shadow: none; }
  15% { translate: -3px 0; rotate: -1.6deg; }
  30% { translate: 3px 0; rotate: 1.6deg; box-shadow: 0 0 0 2px rgba(154, 212, 255, 0.5), 0 0 16px rgba(154, 212, 255, 0.3); }
  45% { translate: -2px 0; rotate: -1.1deg; }
  60% { translate: 2px 0; rotate: 1.1deg; }
  75% { translate: -1px 0; rotate: -0.5deg; box-shadow: 0 0 0 2px rgba(154, 212, 255, 0.3), 0 0 12px rgba(154, 212, 255, 0.2); }
}

.fx-float-label.fx-reshuffle-label { color: #9ad4ff; }

/* ——— Opening deal cinematic ——— */

/* Before the deal: keep the table hidden so the board never flashes pre-placed. */
body.opening-cinematic-pending .deck-rail-row,
body.opening-cinematic-pending .hex-tile,
body.opening-cinematic-pending #hand .game-card,
body.opening-cinematic-pending #hand-primary .game-card,
body.opening-cinematic-pending .coop-hand-row .game-card,
body.opening-cinematic-pending .player-chip,
body.opening-cinematic-pending #power-tokens {
  opacity: 0;
}

body.opening-cinematic #screen-game {
  pointer-events: none;
}

body.opening-cinematic .deck-rail-row {
  animation: opening-deck-row-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  animation-delay: var(--deal-delay, 0ms);
}

body.opening-cinematic .hex-tile {
  animation: opening-tile-place 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: var(--deal-delay, 0ms);
}

body.opening-cinematic #hand .game-card,
body.opening-cinematic #hand-primary .game-card,
body.opening-cinematic .coop-hand-row .game-card {
  animation: opening-card-deal-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.12) both;
  animation-delay: var(--deal-delay, 0ms);
}

body.opening-cinematic .player-chip {
  animation: opening-chip-in 0.5s ease-out both;
  animation-delay: var(--deal-delay, 0ms);
}

@keyframes opening-deck-row-in {
  0% { opacity: 0; translate: -28px 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes opening-tile-place {
  0% { opacity: 0; scale: 1.12 0.62; }
  62% { opacity: 1; scale: 0.94 1.08; }
  82% { scale: 1.04 0.97; }
  100% { opacity: 1; scale: 1; }
}

/* Hex tile ghosts — the stack on The Bed and each tile's flight to its slot. */

.fx-hex-ghost {
  position: fixed;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-color: #120f22;
  background-size: cover;
  background-position: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  z-index: 8550;
  opacity: 0;
  pointer-events: none;
}

.fx-hex-ghost.fx-hex-fly {
  animation: fx-hex-place 0.3s cubic-bezier(0.25, 0.8, 0.35, 1.05) both;
}

@keyframes fx-hex-place {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(-16deg); }
  12% { opacity: 1; }
  55% {
    transform: translate(calc(-50% + var(--fx-tx, 0) * 0.5), calc(-50% + var(--fx-ty, 0) * 0.5 - 34px)) scale(1.08, 0.92) rotate(6deg);
  }
  78% {
    transform: translate(calc(-50% + var(--fx-tx, 0) * 1.04), calc(-50% + var(--fx-ty, 0) * 1.03)) scale(1.1, 0.9) rotate(-2deg);
  }
  90% {
    opacity: 1;
    transform: translate(calc(-50% + var(--fx-tx, 0)), calc(-50% + var(--fx-ty, 0))) scale(0.97, 1.04) rotate(1deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fx-tx, 0)), calc(-50% + var(--fx-ty, 0))) scale(1);
  }
}

.fx-hex-ghost.fx-hex-stack {
  opacity: 0.92;
  z-index: 8540;
}

.fx-hex-ghost.fx-hex-stack.fx-hex-stack-fade {
  transition: opacity 0.3s ease;
  opacity: 0;
}

@keyframes opening-card-deal-in {
  0% { opacity: 0; translate: -14px 48px; scale: 1.14 0.7; rotate: -6deg; }
  60% { opacity: 1; translate: 0 -7px; scale: 0.94 1.08; rotate: 2deg; }
  82% { translate: 0 2px; scale: 1.04 0.96; rotate: -1deg; }
  100% { opacity: 1; translate: 0 0; scale: 1 1; rotate: 0deg; }
}

@keyframes opening-chip-in {
  0% { opacity: 0; translate: 0 14px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes life-gain-flash {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 8px rgba(109, 255, 176, 0.75)); }
}

@keyframes life-loss-flash {
  0%, 100% { filter: none; }
  40% { filter: drop-shadow(0 0 8px rgba(255, 120, 120, 0.75)); }
}

@keyframes hand-gain-flash {
  0%, 100% { background: transparent; }
  40% { background: rgba(109, 255, 176, 0.08); }
}

@keyframes hand-loss-flash {
  0%, 100% { background: transparent; }
  40% { background: rgba(255, 120, 120, 0.08); }
}

@keyframes card-land-pop {
  0% { transform: scale(1.12, 0.8) rotate(-3deg); }
  48% { transform: scale(0.95, 1.08) rotate(1.5deg); }
  74% { transform: scale(1.03, 0.97) rotate(-0.6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Somnia v14 layout ───────────────────────────────────────────── */

.hud-phase-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hud-feed-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.btn-moment-history {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 106, 0.55);
  background: rgba(240, 201, 106, 0.14);
  color: #f5e6b8;
  box-shadow: 0 0 10px rgba(240, 201, 106, 0.25);
}

:where(html:not([data-hover="false"])) .btn-moment-history:hover:not(:disabled) {
  background: rgba(240, 201, 106, 0.28);
  border-color: var(--gold);
}

.btn-moment-history.moment-history-has-items {
  border-color: rgba(240, 201, 106, 0.85);
  box-shadow: 0 0 14px rgba(240, 201, 106, 0.45);
}

.btn-dream-feed {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 255, 0.55);
  background: rgba(123, 92, 255, 0.22);
  color: #f4ebff;
  box-shadow: 0 0 12px rgba(123, 92, 255, 0.35);
}

:where(html:not([data-hover="false"])) .btn-dream-feed:hover:not(:disabled) {
  background: rgba(123, 92, 255, 0.38);
  border-color: var(--accent);
}

.btn-dream-feed.dream-feed-nudge {
  animation: dream-feed-nudge 0.9s ease-in-out 3;
  border-color: #f0c96a;
  box-shadow: 0 0 18px rgba(240, 201, 106, 0.55);
}

@keyframes dream-feed-nudge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.hud-round-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.35rem;
}

.hud-boss-rounds {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 0.55rem;
  line-height: 1;
}

.hud-boss-tick {
  opacity: 0.35;
}

.hud-boss-tick.upcoming {
  opacity: 0.45;
}

.hud-boss-tick.now {
  opacity: 1;
  color: #f0c96a;
  text-shadow: 0 0 6px rgba(240, 201, 106, 0.6);
}

.hud-boss-tick.passed {
  opacity: 0.7;
  color: var(--muted);
}

.action-section-collapsible {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
}

.action-section-collapsible summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.action-section-collapsible summary::before {
  content: "▸";
  font-size: 0.65rem;
  color: var(--muted);
}

.action-section-collapsible[open] summary::before {
  content: "▾";
}

.action-section-collapsible .action-section-row {
  margin-top: 0.35rem;
  padding-left: 0.15rem;
}

.board-pan-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #f4ebff;
  background: rgba(12, 8, 24, 0.88);
  border: 1px solid rgba(201, 160, 255, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.board-pan-hint.fade-out {
  opacity: 0;
}

.menu-tutorial-hint {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 18rem;
}

html[data-device="mobile"] .player-chip {
  min-height: 44px;
}

.narrator-panel-hidden,
.game-log-hidden {
  display: none !important;
}

#screen-game .table-surface {
  border-right: none;
}

#screen-game.active {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
}

#screen-game .sidebar.right.sidebar-v14 {
  border-left: 2px solid rgba(201, 160, 255, 0.35);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow-y: auto;
}

#screen-game .sidebar.right.sidebar-v14 h3 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

#screen-game .sidebar.right .active-card-slot {
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  overflow: visible;
}

#screen-game .sidebar.right .active-card-slot .game-card.portrait {
  max-width: 100%;
}

#screen-game .sidebar.right .active-card-slot .game-card.portrait .art {
  max-height: 260px;
}

#screen-game .sidebar.right .active-card-slot .game-card.portrait .title,
#screen-game .sidebar.right .active-card-slot .game-card.portrait .meta {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

#screen-game .sidebar.right .subconscious-graveyard {
  flex: 1 1 auto;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
}

#screen-game .hand-bar {
  grid-template-columns: minmax(220px, 18%) minmax(80px, 104px) minmax(280px, 2.4fr) minmax(58px, 9%) minmax(58px, 9%) minmax(58px, 9%);
  grid-template-rows: minmax(6.5rem, 1fr);
  gap: 0.4rem 0.5rem;
  padding-top: 0.35rem;
}

#screen-game .phase-banner,
#screen-game .coop-play-banner {
  display: none !important;
}

.table-action-cue {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.78);
  border: 1px solid rgba(201, 160, 255, 0.28);
  color: #e8e4ff;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}

.table-action-cue[hidden] {
  display: none !important;
}

/* Warnings share one dock at the bottom of the board, under the turn plaque. */
.table-bottom {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: min(44rem, calc(100% - 1.6rem));
  pointer-events: none;
}

.table-notices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  pointer-events: none;
}

.table-notices:empty {
  display: none;
}

.table-bottom > .spread-tray {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  transform: none;
  z-index: auto;
  max-width: 100%;
}

.action-dock-wrap,
body.play-window .action-dock-wrap {
  display: none !important;
}

#screen-game .hand-bar > .dreamer-dock { grid-column: 1; grid-row: 1; }
#screen-game .hand-bar > .power-section { grid-column: 2; grid-row: 1; }
#screen-game .hand-bar > .psyche-hand-section { grid-column: 3; grid-row: 1; }
#screen-game .hand-bar > .allies-section { grid-column: 4; grid-row: 1; }
#screen-game .hand-bar > .objects-hand-section { grid-column: 5; grid-row: 1; }
#screen-game .hand-bar > .persistent-section { grid-column: 6; grid-row: 1; }

.action-dock {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.action-dock-strip {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  width: 100%;
}

.action-dock-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem 0.7rem;
  min-width: 0;
  width: 100%;
}

.action-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.action-dock-row-scene .action-group-encounter {
  flex: 2 1 0;
}

.action-dock-row-scene .action-group-actions {
  flex: 5 1 0;
}

.action-dock-row-scene .action-group + .action-group {
  padding-left: 0.65rem;
  border-left: 1px solid rgba(201, 160, 255, 0.22);
}

.action-group-label {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
  padding: 0 0.1rem;
}

.action-group-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

.action-dock-advance {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.action-dock .btn-advance,
.action-dock-advance .btn-advance {
  width: 100%;
  max-width: none;
  min-width: 0;
  font-size: var(--action-btn-fs);
  height: var(--action-btn-h);
  min-height: var(--action-btn-h);
  max-height: var(--action-btn-h);
  padding: 0.35rem 0.7rem;
  box-shadow: 0 2px 10px rgba(123, 92, 255, 0.28);
}

.action-section-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.action-section-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}

.action-dock-btn.action-disabled-hint:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.action-dock-btn {
  font-size: var(--action-btn-fs);
  font-weight: 700;
  line-height: 1.05;
  padding: 0.35rem 0.65rem;
  height: var(--action-btn-h);
  min-height: var(--action-btn-h);
  max-height: var(--action-btn-h);
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 228, 255, 0.55);
  opacity: 0.72;
  border-radius: 18px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.12s;
}

.action-dock-btn.btn-ready:not(:disabled) {
  opacity: 1;
  color: var(--text);
  border-color: rgba(201, 160, 255, 0.45);
  background: rgba(123, 92, 255, 0.18);
  box-shadow: 0 0 14px rgba(123, 92, 255, 0.22);
}

.action-dock-btn.btn-ready.primary:not(:disabled) {
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.85), rgba(74, 158, 255, 0.65));
  border-color: rgba(201, 160, 255, 0.7);
  color: #fff;
}

:where(html:not([data-hover="false"])) .action-dock-btn.btn-ready:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(123, 92, 255, 0.38);
}

html[data-device="mobile"] .action-dock-btn,
html[data-device="tablet"] .action-dock-btn,
html[data-touch="true"] .action-dock-btn,
html[data-device="mobile"] .action-dock .btn-advance,
html[data-device="tablet"] .action-dock .btn-advance,
html[data-touch="true"] .action-dock .btn-advance {
  height: var(--action-btn-h);
  min-height: var(--action-btn-h);
  max-height: var(--action-btn-h);
  min-width: 0;
  font-size: var(--action-btn-fs);
  padding: 0.35rem 0.55rem;
}

.action-dock-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.header-dropdown-panel#dreamers-dropdown-panel {
  width: min(520px, calc(100vw - 1.5rem));
  max-height: min(78vh, 640px);
}

.dreamers-dropdown-list .player-chip {
  padding: 0.65rem 0.75rem;
  min-height: 4.5rem;
}

.dreamers-dropdown-list .player-chip img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.dreamers-dropdown-list .player-chip .name {
  font-size: 1rem;
  font-weight: 700;
}

.dreamers-dropdown-list .player-chip .sub,
.dreamers-dropdown-list .player-chip .dreamer-stats {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
}

.dreamer-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 840;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(4, 3, 12, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.dreamer-detail-overlay:not(.hidden) {
  pointer-events: auto;
}

.dreamer-detail-overlay.hidden {
  display: none;
}

.dreamer-overlay-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  z-index: 2;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.88);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.dreamer-overlay-shell {
  position: relative;
  width: min(960px, 96vw);
  max-height: min(88vh, 760px);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 1.35rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dreamer-overlay-art-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201, 160, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
}

.dreamer-overlay-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: cover;
}

.dreamer-overlay-hand h4 {
  margin: 0.75rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent);
}

.dreamer-overlay-hand-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.dreamer-overlay-hand-cards .game-card {
  width: 88px;
  min-height: 118px;
}

.dreamer-overlay-right .dreamer-detail {
  display: block;
}

.dreamer-overlay-right .dreamer-detail-body h2 {
  font-size: 1.65rem;
}

.dreamer-overlay-right .dreamer-detail-flavor {
  font-size: 1rem;
  line-height: 1.5;
}

.dreamer-overlay-right .dreamer-detail-power-text {
  font-size: 1rem;
  line-height: 1.5;
}

.dreamer-overlay-right .dreamer-detail-stat {
  font-size: 1rem;
}

.utility-content.fullscreen-browser {
  width: min(96vw, 1440px);
  max-width: none;
  height: min(92vh, 920px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.15rem;
}

.fullscreen-browser-header h2 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
}

.fullscreen-browser-lead {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.fullscreen-browser-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0.65rem;
}

/* ── Phase opener: full-screen 2×3 table of every Dreamer hand ── */
#utility-modal:has(.phase-opener-modal-wrap) {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
}

.utility-content.phase-opener-modal-wrap {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 170, 255, 0.18), transparent 55%),
    linear-gradient(165deg, #12101c 0%, #1a1528 45%, #0e0c16 100%);
  border: 1px solid rgba(220, 210, 255, 0.22);
}

.utility-content.phase-opener-modal-wrap #utility-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phase-opener-menu {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.phase-opener-header {
  padding: 0.55rem 3.25rem 0.35rem 1rem;
  flex: 0 0 auto;
}

.phase-opener-header h2 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.phase-opener-header .fullscreen-browser-lead {
  margin: 0;
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.phase-opener-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.1rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9d8ff;
}

/* Two columns × up to three rows — all living Dreamers on one screen. */
.phase-opener-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.45rem;
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.phase-opener-grid[data-count="1"] {
  grid-template-columns: 1fr;
}

.phase-opener-dreamer {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 0.5rem 0.45rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.phase-opener-dreamer.is-focus {
  border-color: rgba(180, 210, 255, 0.55);
  background: rgba(120, 160, 255, 0.08);
}

.phase-opener-dreamer.is-opener {
  border-color: rgba(255, 214, 120, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 214, 120, 0.35), 0 6px 20px rgba(0, 0, 0, 0.35);
}

.phase-opener-dreamer.is-best:not(.is-opener) {
  border-color: rgba(150, 220, 180, 0.4);
}

.phase-opener-dreamer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  margin-bottom: 0.3rem;
  flex: 0 0 auto;
}

.phase-opener-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
  min-width: 0;
}

.phase-opener-avatar {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.phase-opener-dreamer.is-focus .phase-opener-avatar {
  border-color: #9ec0ff;
}

.phase-opener-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-opener-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.phase-opener-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #e8eefc;
  font-weight: 600;
}

.phase-opener-badge {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(120, 200, 150, 0.2);
  color: #b8f0cc;
}

.phase-opener-badge.opener {
  background: rgba(255, 200, 80, 0.25);
  color: #ffe29a;
}

.phase-opener-token {
  margin-left: auto;
  font-size: 0.72rem !important;
  padding: 0.2rem 0.45rem !important;
}

.phase-opener-token.on {
  background: rgba(255, 200, 80, 0.25);
  border-color: rgba(255, 200, 80, 0.55);
  color: #ffe29a;
}

/* One fan row: suited cards then the rest of the hand (max 10). */
.phase-opener-hands {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  overflow: hidden;
}

.phase-opener-hand-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0;
}

.phase-opener-hand-row .game-card.psyche-card,
.phase-opener-hand-row .game-card {
  width: clamp(34px, 3.6vw, 54px);
  min-height: clamp(48px, 5.2vw, 76px);
  margin-left: clamp(-14px, -1.1vw, -8px);
  border-radius: 8px;
  flex: 0 0 auto;
  z-index: 1;
}

.phase-opener-hand-row .game-card:first-child {
  margin-left: 0;
}

.phase-opener-hand-row .game-card.hand-dense {
  opacity: 0.55;
}

.phase-opener-hand-row .game-card.selected,
.phase-opener-hand-row .game-card:hover,
.phase-opener-hand-row .game-card:focus-visible {
  z-index: 4;
  opacity: 1;
}

.phase-opener-hand-row .psyche-pip .psyche-value {
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
}

.phase-opener-hand-row .psyche-pip .psyche-suit {
  font-size: clamp(0.85rem, 1.5vw, 1.25rem);
}

.phase-opener-hand-row .psyche-pip .psyche-suit .suit-icon svg {
  width: clamp(0.95rem, 1.6vw, 1.35rem);
  height: clamp(0.95rem, 1.6vw, 1.35rem);
}

.phase-opener-hand-row .psyche-label {
  font-size: 0.45rem;
}

.phase-opener-empty {
  flex: 0 0 auto;
  margin: 0 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.phase-opener-hand-row .phase-opener-empty + .game-card {
  margin-left: 0;
}

.phase-opener-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0.9rem 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
}

.phase-opener-summary {
  flex: 1 1 12rem;
  font-size: 0.85rem;
  color: #e8e4f8;
}

.phase-opener-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.btn-phase-opener-skip {
  min-width: 7.5rem;
}

.btn-phase-opener-confirm {
  min-width: 10rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.55rem 1rem;
}

.game-card.choice-bright .art img,
.modal-detail.choice-bright .modal-art,
.modal-detail.choice-bright .modal-art-fallback {
  filter: saturate(1.55) brightness(1.22) contrast(1.06);
}

.game-card.choice-dim .art img,
.modal-detail.choice-dim .modal-art,
.modal-detail.choice-dim .modal-art-fallback {
  filter: saturate(0.18) brightness(0.52) contrast(0.92);
}

.game-card.choice-bright {
  box-shadow: 0 0 0 2px rgba(255, 236, 170, 0.9), 0 0 18px rgba(255, 210, 110, 0.45);
}

.game-card.choice-dim {
  box-shadow: inset 0 0 0 2px rgba(18, 16, 28, 0.85), 0 0 0 1px rgba(70, 64, 90, 0.8);
}

.choice-mark {
  position: absolute;
  left: 0.35rem;
  bottom: 0.35rem;
  z-index: 3;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.game-card.choice-bright .choice-mark {
  background: #fff4c8;
  color: #5a3b00;
}

.game-card.choice-dim .choice-mark {
  background: #1a1724;
  color: #b7b0c8;
}

.choice-resolution-banner {
  margin: 0.35rem 0 0.6rem;
  font-size: 1rem;
}

.modal-detail.choice-bright .choice-resolution-banner strong {
  color: #ffe7a0;
}

.modal-detail.choice-dim .choice-resolution-banner strong {
  color: #9a93ad;
}

.btn-phase-opener-confirm.tint-reveal {
  background: linear-gradient(180deg, #5b8cff, #3a63d4);
  border-color: #7aa4ff;
}

.btn-phase-opener-confirm.tint-explore {
  background: linear-gradient(180deg, #4ecf8c, #2e9a62);
  border-color: #6ee0a6;
}

.btn-phase-opener-confirm.tint-meet {
  background: linear-gradient(180deg, #e0a24a, #c07828);
  border-color: #f0bf70;
}

/* Turn plaque floats on the table, under the top bar. */
.turn-plaque {
  position: absolute;
  left: 50%;
  top: 0.55rem;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  max-width: min(42vw, 18rem);
  padding: 0.35rem 1rem 0.45rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 230, 140, 0.95);
  background: linear-gradient(180deg, #ffe9a8 0%, #f0c14a 55%, #d9a028 100%);
  color: #1a1204;
  box-shadow:
    0 0 0 2px rgba(40, 24, 0, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(255, 200, 60, 0.45);
  pointer-events: none;
  text-align: center;
  line-height: 1.15;
}

.turn-plaque.hidden {
  display: none;
}

.turn-plaque-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.turn-plaque-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.turn-plaque-phase {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.8;
}

.turn-plaque-pass {
  pointer-events: auto;
  margin-top: 0.2rem;
  border: 1px solid rgba(40, 24, 0, 0.45);
  border-radius: 999px;
  background: rgba(26, 18, 4, 0.92);
  color: #ffe9a8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.7rem;
  cursor: pointer;
}

.turn-plaque-pass:hover {
  background: #1a1204;
  color: #fff3c4;
}

.turn-plaque-pass.hidden {
  display: none;
}

.ai-thought-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 220, 120, 0.65);
  background: rgba(28, 22, 8, 0.92);
  color: #ffe9a8;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.ai-thought-banner.hidden {
  display: none;
}

@media (max-width: 720px) {
  .turn-plaque {
    top: 0.4rem;
    min-width: 8.5rem;
    max-width: 55vw;
    padding: 0.28rem 0.7rem 0.35rem;
  }
  .turn-plaque-name {
    font-size: 0.95rem;
  }
  .phase-opener-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(7.5rem, auto);
    overflow: auto;
  }
  .phase-opener-dreamer-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .phase-opener-token {
    margin-left: 0;
  }
  .phase-opener-hand-row {
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .phase-opener-hand-row .game-card.psyche-card,
  .phase-opener-hand-row .game-card {
    margin-left: 0;
  }
  .ai-thought-banner {
    max-width: 92vw;
    font-size: 0.75rem;
  }
}


.gallery-pile h4 {
  font-size: 1rem;
  margin: 0.75rem 0 0.45rem;
  color: var(--accent);
}

.gallery-pile-count {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}

.gallery-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.gallery-card-row .game-card {
  width: 108px;
  min-height: 148px;
}

.gallery-card-row .game-card .art {
  height: 72px;
}

.gallery-card-row .game-card .body {
  display: block;
  padding: 0.25rem 0.35rem;
}

.gallery-card-row .game-card .title {
  font-size: 0.68rem;
  line-height: 1.2;
}

.gallery-card-row .game-card .meta {
  font-size: 0.62rem;
}

.utility-content.rules-reference-modal,
.utility-content.info-hub-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}

.info-hub {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(123, 92, 255, 0.18), transparent 42%),
    radial-gradient(ellipse at 82% 8%, rgba(74, 158, 255, 0.12), transparent 38%),
    #0b0a14;
}

.info-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1rem clamp(1.1rem, 3vw, 2.2rem);
  border-bottom: 1px solid rgba(180, 160, 255, 0.22);
  flex: 0 0 auto;
}

.info-hub-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.info-hub-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.info-hub-lead {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.info-hub-play {
  flex: 0 0 auto;
  min-width: 8.5rem;
  padding: 0.85rem 2rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.info-hub-tabs {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.info-hub-tabs button {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(180, 160, 255, 0.28);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.info-hub-tabs button.is-on {
  color: #fff;
  background: rgba(123, 92, 255, 0.45);
  border-color: rgba(200, 180, 255, 0.7);
}

.info-hub-panel {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.info-hub-panel[hidden],
.glossary-view[hidden],
.glossary-item[hidden],
.glossary-letter[hidden],
.glossary-concept[hidden],
.glossary-empty[hidden] {
  display: none !important;
}

.info-hub-panel-primer,
.info-hub-panel-glossary {
  overflow: auto;
  padding: 0.85rem clamp(1.1rem, 3vw, 2.2rem) 1.4rem;
}

.player-primer-lead {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  line-height: 1.35;
}

.player-primer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.player-primer h3 {
  margin: 0.55rem 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #c9b6ff);
}

.player-primer section h3:first-child {
  margin-top: 0;
}

.player-primer p {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  line-height: 1.38;
}

.info-hub-panel-primer .player-primer-lead,
.info-hub-panel-primer .player-primer p {
  color: #f6f1e8;
  font-size: 0.9rem;
  line-height: 1.42;
}

.player-primer-next {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--gold, #f0c830);
}

.glossary-tools {
  display: flex;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 0.55rem;
  background: #0b0a14;
}

.glossary-search-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.glossary-search-label input {
  font-size: 1rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(180, 160, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

.glossary-modes {
  display: flex;
  gap: 0.35rem;
}

.glossary-modes button {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(180, 160, 255, 0.28);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.glossary-modes button.is-on {
  color: #fff;
  background: rgba(123, 92, 255, 0.4);
}

.glossary-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin: 0 0 0.8rem;
}

.glossary-alpha a {
  color: var(--accent, #c9b6ff);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}

.glossary-letter h2,
.glossary-concept h2 {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.glossary-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.glossary-item h3 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
}

.glossary-item p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.glossary-empty {
  margin: 0.5rem 0;
  color: var(--muted);
}

.tutorial-brief-page .player-primer-lead,
.tutorial-brief-page .player-primer p {
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
  .info-hub-header {
    flex-wrap: wrap;
  }

  .player-primer-grid {
    grid-template-columns: 1fr;
  }
}

.info-hub-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 1.25rem;
  min-height: 0;
  flex: 1;
  padding: 1rem clamp(1.1rem, 3vw, 2.2rem) 1.25rem;
  overflow: hidden;
}

.info-hub-feed,
.info-hub-rules {
  min-height: 0;
  overflow: auto;
  padding-right: 0.35rem;
}

.info-hub-feed .dream-feed-log-scroll {
  max-height: min(46vh, 420px);
}

.info-hub-rule {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(180, 160, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.info-hub-rule h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent);
}

.info-hub-rule p,
.info-hub-rule li {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.info-hub-rule p:last-child,
.info-hub-rule li:last-child {
  margin-bottom: 0;
}

.info-hub-rem ul {
  margin: 0;
  padding-left: 1.1rem;
}

.info-hub-footer {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 900px) {
  .info-hub-grid {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .info-hub-feed,
  .info-hub-rules {
    overflow: visible;
  }
}

.dream-feed-page {
  display: grid;
  gap: 1rem;
}

.dream-feed-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dream-feed-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #b8e0ff;
}

.dream-feed-detail {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.dream-feed-consequences {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  color: var(--accent);
}

.dream-feed-log-scroll {
  max-height: 42vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  padding: 0.55rem 0.65rem;
}

.dream-feed-log-line {
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dream-feed-log-line:last-child {
  border-bottom: none;
}

.dream-feed-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

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

  #screen-game .hand-bar > .dreamer-dock,
  #screen-game .hand-bar > .power-section,
  #screen-game .hand-bar > .psyche-hand-section,
  #screen-game .hand-bar > .allies-section,
  #screen-game .hand-bar > .objects-hand-section,
  #screen-game .hand-bar > .persistent-section {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ── Somnia v14.1 play UI — round panels, top phase bar ─────────── */

body.play-window {
  --radius: 22px;
  --btn-pill-radius: 999px;
  --topbar-h: 6.6rem;
}

.death-clock {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(196, 64, 84, 0.75);
  border-radius: 999px;
  background: rgba(48, 4, 12, 0.72);
  color: #f6d5d8;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.death-clock-label {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.death-clock-pips {
  display: flex;
  gap: 3px;
}

.death-clock-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #c45;
  background: transparent;
}

.death-clock-pip.ticked {
  background: #e23b4a;
  box-shadow: 0 0 6px #e23b4a;
}

.death-clock.full {
  border-color: #ff5a6a;
  box-shadow: 0 0 10px rgba(226, 59, 74, 0.65);
}

body.play-window .top-bar.play-top-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem 0.6rem;
  padding: 0.7rem 0.9rem;
  min-height: var(--topbar-h);
  position: relative;
  z-index: 600;
  overflow: visible;
}

body.play-window .header-dropdown-panel {
  z-index: 700;
}

/* Portaled out of the top bar so it is not trapped by the bar's blur.
   Beats the 700 rule above, stays under the utility modal (800). */
body.play-window #header-more-panel.header-more-panel-fixed {
  z-index: 790;
}

body.play-window .top-bar.play-top-bar .brand {
  flex: 0 0 auto;
  min-width: 0;
}

body.play-window .brand h1 {
  font-size: 1.35rem;
  line-height: 1;
}

body.play-window .brand-wordmark {
  height: 2.15rem;
  width: 9.4rem;
  max-width: 9.6rem;
}

body.play-window .version-label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: #d8c8ff;
  margin-bottom: 0;
}

body.play-window .top-bar.play-top-bar .hud {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

body.play-window .top-bar.play-top-bar .header-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.top-bar-stepper {
  flex: 0 1 auto;
  min-width: 22rem;
  max-width: 36rem;
  justify-content: center;
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 160, 255, 0.35);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.top-bar-stepper .step {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.05rem;
}

.top-bar-stepper .step-budget {
  font-size: 0.62rem;
  padding: 0.08rem 0.35rem;
}

.hud-dream-feed-btn,
.hud-moment-history-btn {
  flex-shrink: 0;
  align-self: center;
}

.moment-history-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 12rem;
}

.moment-history-hint {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(245, 230, 184, 0.72);
}

.moment-history-scroll {
  max-height: min(52vh, 28rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.25rem;
}

.moment-history-entry {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(240, 201, 106, 0.22);
  background: rgba(8, 6, 18, 0.55);
}

.moment-history-entry time {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(201, 160, 255, 0.75);
  margin-bottom: 0.2rem;
}

.moment-history-entry p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #f5e6b8;
}

body.play-window .header-actions .btn-music-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  line-height: 1;
  font-size: 1.05rem;
  border-radius: 50%;
}

body.play-window .header-actions .btn-music-toggle::before {
  content: none;
}

body.play-window .btn:not(.btn-icon) {
  border-radius: var(--btn-pill-radius);
}

body.play-window .btn-sm {
  border-radius: var(--btn-pill-radius);
  padding: 0.45rem 1rem;
}

body.play-window .hud-item {
  border-radius: 999px;
  font-size: 0.82rem;
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

body.play-window .action-dock-wrap {
  border-radius: 12px;
  min-height: 0;
  max-height: none;
}

body.play-window .action-dock-btn {
  border-radius: 18px;
  padding: 0.35rem 0.65rem;
  height: var(--action-btn-h);
  min-height: var(--action-btn-h);
  font-size: var(--action-btn-fs);
}

body.play-window .action-dock-advance .btn-advance {
  border-radius: 18px;
  height: var(--action-btn-h);
  min-height: var(--action-btn-h);
  font-size: var(--action-btn-fs);
}

body.play-window #screen-game .hand-bar {
  border-radius: 22px 22px 0 0;
  padding-bottom: 0.65rem;
}

body.play-window #screen-game .sidebar.right.sidebar-v14 {
  border-radius: 22px 0 0 0;
}

body.play-window .game-card.psyche-card {
  border-radius: 18px;
}

body.play-window .player-list-dock .player-chip {
  border-radius: 18px;
}

body.play-window .player-list-dock .player-chip img {
  border-radius: 14px;
}

body.play-window .subconscious-graveyard {
  border-radius: 18px;
}

#screen-game .sidebar.right.sidebar-v14 h3 {
  font-size: 1.05rem;
}

#screen-game .sidebar.right .quest-list {
  font-size: 0.92rem;
  line-height: 1.45;
}

#screen-game .sidebar.right .quest-list li {
  margin-bottom: 0.2rem;
}

#screen-game .sidebar.right .graveyard-count,
#screen-game .sidebar.right .graveyard-total {
  font-size: 0.95rem;
}

#screen-game .sidebar.right .graveyard-pile-chip {
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
}

#screen-game .sidebar.right .graveyard-empty {
  font-size: 0.88rem;
}

#screen-game .sidebar.right .active-card-slot .game-card .body,
#screen-game .sidebar.right .active-card-slot .card-caption {
  font-size: 0.9rem;
}

#screen-game .hand-bar {
  grid-template-rows: minmax(6.5rem, 1fr);
  align-content: stretch;
}

#screen-game .hand-bar > .dreamer-dock,
#screen-game .hand-bar > .power-section,
#screen-game .hand-bar > .allies-section,
#screen-game .hand-bar > .objects-hand-section,
#screen-game .hand-bar > .persistent-section {
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.25rem;
}

#screen-game .hand-bar > .psyche-hand-section {
  align-self: stretch;
  min-height: 0;
  overflow: visible;
  z-index: 6;
  padding-bottom: 0.25rem;
}

.hand-stats-player {
  font-weight: 600;
  color: var(--text);
}

#screen-game .hand-bar > .power-section .power-token-actions {
  flex-shrink: 0;
}

#screen-game .hand-bar > .power-section .power-bonus-btn {
  width: 100%;
  max-width: none;
  font-size: 0.7rem;
  padding: 0.35rem 0.45rem;
  line-height: 1.25;
}

#screen-game .hand-bar > .power-section .power-bonus-pending {
  font-size: 0.65rem;
  line-height: 1.3;
}

#screen-game .hand-bar > .power-section .power-tokens {
  max-height: 4.5rem;
  flex: 1 1 auto;
  min-height: 0;
}

#screen-game .hand-bar > .hand-section:has(.hand-dreamer-display),
#screen-game .psyche-hand-section {
  min-height: 8.5rem;
}

#screen-game .hand-dreamer-display {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

#screen-game .psyche-hand-section .hand-stats-line .hand-stats-suits {
  gap: 0.45rem;
}

@media (max-width: 1100px) {
  body.play-window .top-bar.play-top-bar {
    gap: 0.35rem 0.45rem;
  }

  .top-bar-stepper {
    min-width: 9.5rem;
    max-width: 16rem;
  }

  body.play-window .hud-item {
    font-size: 0.76rem;
    padding: 0.28rem 0.6rem;
  }
}

html[data-viewport-height="short"] #screen-game .hand-bar {
  max-height: min(40vh, 300px);
}

html[data-viewport-height="short"] #screen-game .hand-bar > .hand-section:has(.hand-dreamer-display),
html[data-viewport-height="short"] #screen-game .psyche-hand-section {
  min-height: 5.5rem;
}

html[data-viewport-height="short"] .tutorial-card {
  max-height: min(58vh, 480px);
  width: min(42vw, 440px);
  min-width: 300px;
  min-height: 260px;
}

html[data-viewport-height="short"] .action-group-label {
  font-size: 0.78rem;
}

html[data-viewport-width="narrow"] #screen-game .hand-bar {
  grid-template-columns: minmax(180px, 20%) minmax(68px, 88px) minmax(220px, 2.2fr) minmax(52px, 10%) minmax(52px, 10%) minmax(52px, 10%);
  gap: 0.35rem 0.45rem;
}

html[data-viewport-width="narrow"] .top-bar-stepper {
  min-width: 18rem;
  max-width: 28rem;
}

/* ── Somnia 18.0 polish ── */

#board-zoom-stage.board-focus-snap {
  transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.24, 1);
}

#screen-game .table-surface.table-wash-lucidity {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(74, 158, 255, 0.16), transparent 58%),
    radial-gradient(ellipse at 50% 80%, rgba(123, 92, 255, 0.1), transparent 50%),
    rgba(8, 7, 18, 0.65);
}

#screen-game .table-surface.table-wash-elasticity {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(240, 201, 106, 0.14), transparent 58%),
    radial-gradient(ellipse at 50% 80%, rgba(240, 200, 48, 0.1), transparent 50%),
    rgba(8, 7, 18, 0.65);
}

#screen-game .table-surface.table-wash-willpower {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 72, 72, 0.14), transparent 58%),
    radial-gradient(ellipse at 50% 80%, rgba(180, 40, 60, 0.1), transparent 50%),
    rgba(8, 7, 18, 0.65);
}

.hex-tile .hex-face.hex-face-hd {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: saturate(1.06) contrast(1.04);
}

.hex-tile.face-up .hex-face.hex-face-hd {
  filter: saturate(1.08) contrast(1.05) brightness(1.02);
}

.hex-tile .hex-mist {
  position: absolute;
  inset: var(--hex-border-width);
  clip-path: var(--hex-clip);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.hex-tile .hex-mist-a {
  background: radial-gradient(ellipse at 30% 80%, rgba(201, 160, 255, 0.35), transparent 62%);
  animation: hex-mist-drift-a 9s ease-in-out infinite;
}

.hex-tile .hex-mist-b {
  background: radial-gradient(ellipse at 72% 20%, rgba(74, 158, 255, 0.22), transparent 58%);
  animation: hex-mist-drift-b 12s ease-in-out infinite;
}

.hex-tile .hex-mist-wasteland-a {
  background: radial-gradient(ellipse at 40% 70%, rgba(120, 90, 60, 0.45), transparent 65%);
  animation: hex-mist-drift-a 14s ease-in-out infinite;
  opacity: 0.7;
}

.hex-tile .hex-mist-wasteland-b {
  background: radial-gradient(ellipse at 65% 30%, rgba(80, 60, 40, 0.35), transparent 55%);
  animation: hex-mist-drift-b 18s ease-in-out infinite reverse;
  opacity: 0.65;
}

.hex-tile .hex-mist-wasteland-c {
  background: linear-gradient(180deg, rgba(180, 160, 140, 0.12), transparent 45%, rgba(40, 30, 20, 0.2));
  animation: hex-mist-drift-c 22s linear infinite;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.hex-tile.wasteland .hex-face {
  filter: grayscale(0.55) brightness(0.72) contrast(1.08);
}

@keyframes hex-mist-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.45; }
  50% { transform: translate3d(4%, -3%, 0); opacity: 0.72; }
}

@keyframes hex-mist-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
  50% { transform: translate3d(-5%, 4%, 0); opacity: 0.62; }
}

@keyframes hex-mist-drift-c {
  0% { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(3%, 0, 0); }
}

.hex-tile.hex-boss-stinger .hex-face {
  box-shadow: inset 0 0 0 3px rgba(232, 72, 72, 0.75);
  animation: hex-boss-pulse 0.9s ease-out 2;
}

@keyframes hex-boss-pulse {
  0% { filter: brightness(1) saturate(1); }
  40% { filter: brightness(1.35) saturate(1.4); }
  100% { filter: brightness(1) saturate(1); }
}

.fx-boss-ripple {
  width: 120px;
  height: 120px;
  border: 2px solid rgba(232, 72, 72, 0.65);
  box-shadow: 0 0 24px rgba(232, 72, 72, 0.45);
}

.fx-boss-label {
  color: #ffb4b4;
  text-shadow: 0 0 12px rgba(232, 72, 72, 0.8);
  font-family: var(--font-display);
  font-weight: 700;
}

.fx-screen-overlay.fx-boss-stinger {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(232, 72, 72, 0.22), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
  animation: fx-boss-vignette 0.92s ease-out forwards;
}

@keyframes fx-boss-vignette {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.game-card.psyche-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.game-card.psyche-card .psyche-holo,
.game-card.psyche-card .psyche-quanta,
.game-card.psyche-card .psyche-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.game-card.psyche-card .psyche-holo {
  opacity: 0;
  mix-blend-mode: screen;
  background-size: 180% 180%;
  background-position: calc(50% + var(--holo-px, 0) * 30%) calc(50% + var(--holo-py, 0) * 24%);
  transition: opacity 0.2s ease;
}

:where(html:not([data-hover="false"])) .game-card.psyche-card:hover .psyche-holo,
.game-card.psyche-card:focus-visible .psyche-holo {
  opacity: 0.72;
}

.game-card.psyche-card.selected .psyche-holo {
  opacity: 0.95;
  animation: psyche-holo-shift 3.2s ease-in-out infinite;
}

.game-card.psyche-card.selected .psyche-holo-wild {
  animation: psyche-holo-rainbow 6s linear infinite;
}

.game-card.psyche-card .psyche-holo-lucidity {
  background: linear-gradient(125deg, transparent 30%, rgba(74, 158, 255, 0.55) 45%, rgba(180, 220, 255, 0.35) 55%, transparent 70%);
}

.game-card.psyche-card .psyche-holo-elasticity {
  background: linear-gradient(125deg, transparent 28%, rgba(240, 200, 48, 0.5) 44%, rgba(255, 240, 160, 0.35) 56%, transparent 72%);
}

.game-card.psyche-card .psyche-holo-willpower {
  background: linear-gradient(125deg, transparent 30%, rgba(232, 72, 72, 0.5) 46%, rgba(255, 160, 160, 0.32) 58%, transparent 74%);
}

.game-card.psyche-card .psyche-holo-wild {
  background: conic-gradient(from 0deg, rgba(232, 72, 72, 0.35), rgba(240, 200, 48, 0.35), rgba(74, 158, 255, 0.35), rgba(232, 72, 72, 0.35));
  animation: psyche-holo-rainbow 6s linear infinite;
}

.game-card.psyche-card .psyche-holo-gold {
  background: linear-gradient(130deg, transparent 25%, rgba(240, 201, 106, 0.65) 48%, rgba(255, 255, 220, 0.4) 58%, transparent 75%);
}

.game-card.psyche-card .psyche-quanta {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.25) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px);
  animation: none;
  opacity: 0;
}

.game-card.psyche-card.selected .psyche-quanta {
  opacity: 0.7;
  animation: psyche-quanta-float 5s ease-in-out infinite;
}

.game-card.psyche-card.psyche-power {
  box-shadow: 0 0 18px rgba(186, 130, 255, 0.5), inset 0 0 14px rgba(240, 210, 110, 0.28);
  border-color: rgba(232, 208, 120, 0.85);
  background: linear-gradient(155deg, #d4b3ff 0%, #9b6bdb 42%, #c9a227 100%);
  color: #fff8e8;
}

.game-card.psyche-card.psyche-power .psyche-sparkle {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 240, 180, 0.7), transparent 35%),
    radial-gradient(circle at 65% 55%, rgba(186, 130, 255, 0.5), transparent 40%);
  animation: psyche-sparkle-pulse 2.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

.game-card.psyche-card.lucidity {
  box-shadow: 0 0 14px rgba(74, 158, 255, 0.22);
}

.game-card.psyche-card.elasticity {
  box-shadow: 0 0 14px rgba(240, 200, 48, 0.2);
}

.game-card.psyche-card.willpower {
  box-shadow: 0 0 14px rgba(232, 72, 72, 0.22);
}

.game-card.psyche-card.wild {
  animation: psyche-wild-glow 5s ease-in-out infinite;
}

@keyframes psyche-holo-shift {
  0%, 100% { transform: translateX(-18%) skewX(-8deg); }
  50% { transform: translateX(18%) skewX(8deg); }
}

@keyframes psyche-holo-rainbow {
  to { transform: rotate(360deg); }
}

@keyframes psyche-quanta-float {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-3px); opacity: 0.65; }
}

@keyframes psyche-sparkle-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@keyframes psyche-wild-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.15); }
  50% { box-shadow: 0 0 18px rgba(201, 160, 255, 0.35); }
}

.game-card .art img.card-art-sharp {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  transform: translateZ(0) scale(1.01);
  filter: saturate(1.04) contrast(1.03);
}

.game-card.choice-bright .art img.card-art-sharp {
  filter: saturate(1.55) brightness(1.22) contrast(1.06);
}

.game-card.choice-dim .art img.card-art-sharp {
  filter: saturate(0.18) brightness(0.52) contrast(0.92);
}

body.menu-window .menu-glass-panel {
  animation: menu-panel-float 8s ease-in-out infinite;
}

body.menu-window .setup-panel-left.menu-glass-panel { animation-delay: 0s; }
body.menu-window .setup-panel-center.menu-glass-panel { animation-delay: -2.5s; }
body.menu-window .setup-panel-right.menu-glass-panel { animation-delay: -5s; }

body.menu-window .brand h1,
body.menu-window .brand-wordmark {
  animation: menu-title-glow 6s ease-in-out infinite;
}

@keyframes menu-panel-float {
  0%, 100% { transform: translateY(0) scale(var(--menu-panel-scale, 1)); }
  50% { transform: translateY(-4px) scale(var(--menu-panel-scale, 1)); }
}

@keyframes menu-title-glow {
  0%, 100% {
    text-shadow: 0 0 12px rgba(201, 160, 255, 0.25);
    filter: drop-shadow(0 0 8px rgba(240, 201, 106, 0.28));
  }
  50% {
    text-shadow: 0 0 22px rgba(201, 160, 255, 0.45);
    filter: drop-shadow(0 0 16px rgba(240, 201, 106, 0.5));
  }
}

.moment-toast.moment-toast-boss {
  border-color: rgba(232, 72, 72, 0.55);
  box-shadow: 0 8px 28px rgba(232, 72, 72, 0.25);
}

.moment-toast.moment-toast-victory {
  border-color: rgba(240, 201, 106, 0.55);
  box-shadow: 0 8px 28px rgba(240, 201, 106, 0.22);
}

.victory-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 30%, rgba(201, 160, 255, 0.18) 45%, rgba(109, 255, 176, 0.12) 55%, transparent 70%);
  animation: victory-aurora-sweep 4s ease-in-out infinite;
}

@keyframes victory-aurora-sweep {
  0%, 100% { transform: translateX(-8%) skewX(-6deg); opacity: 0.35; }
  50% { transform: translateX(8%) skewX(6deg); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .hex-tile .hex-mist,
  .game-card.psyche-card .psyche-holo,
  .game-card.psyche-card .psyche-quanta,
  body.menu-window .menu-glass-panel,
  body.menu-window .brand h1,
  body.menu-window .brand-wordmark,
  .victory-aurora {
    animation: none !important;
  }

  #board-zoom-stage.board-focus-snap {
    transition: none;
  }
}

html[data-form="phone"] #screen-game .table-surface,
html[data-form="tablet"] #screen-game .table-surface,
html[data-touch="true"] #screen-game .table-surface {
  animation: none;
}

html[data-form="phone"] .hex-board,
html[data-form="tablet"] .hex-board {
  contain: layout paint;
}

html[data-form="phone"] .hex-tile,
html[data-form="tablet"] .hex-tile,
html[data-touch="true"] .hex-tile {
  contain: layout paint;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html[data-form="phone"] .hex-tile .hex-mist,
html[data-form="tablet"] .hex-tile .hex-mist,
html[data-touch="true"] .hex-tile .hex-mist {
  animation: none !important;
  mix-blend-mode: normal;
  opacity: 0.22;
}

html[data-form="phone"] .hex-tile .hex-face.hex-face-hd,
html[data-form="tablet"] .hex-tile .hex-face.hex-face-hd,
html[data-touch="true"] .hex-tile .hex-face.hex-face-hd {
  filter: none;
  image-rendering: auto;
}

html[data-form="phone"] .hex-occupant-token,
html[data-form="tablet"] .hex-occupant-token,
html[data-touch="true"] .hex-occupant-token {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html[data-form="phone"] .sidebar,
html[data-form="tablet"] .sidebar,
html[data-form="phone"] .hand-bar,
html[data-form="tablet"] .hand-bar,
html[data-form="phone"] .top-bar,
html[data-form="tablet"] .top-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Card choice picker (18.2) ── */
.utility-content.card-choice-modal-wrap {
  width: min(960px, 96vw);
  max-height: 92vh;
  overflow: auto;
}

.card-choice-picker {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.card-choice-picker h2 {
  margin: 0;
}

.card-choice-message,
.card-choice-hint,
.card-choice-status {
  margin: 0;
  line-height: 1.45;
}

.card-choice-hint {
  font-size: 0.82rem;
  color: var(--muted);
}

.card-choice-status {
  font-weight: 600;
  color: var(--gold);
}

.card-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.utility-content.trade-modal-wrap {
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.trade-picker {
  max-height: 84vh;
}

.trade-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  max-height: min(62vh, 640px);
  overflow: auto;
}

.trade-column h3 {
  margin: 0;
  text-align: center;
}

.trade-column-count,
.trade-column-empty {
  margin: 0.2rem 0 0;
  text-align: center;
  color: var(--muted, var(--text-muted));
  font-size: 0.85rem;
}

.trade-column .card-choice-row {
  justify-content: center;
  min-height: 4rem;
}

.trade-partner-list {
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  .trade-board {
    grid-template-columns: 1fr;
  }
}

.card-choice-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: 168px;
}

.card-choice-wrap .game-card.portrait {
  width: 156px;
}

.card-choice-wrap .game-card.portrait .art {
  max-height: 210px;
}

.card-choice-wrap .game-card.selected {
  box-shadow:
    0 0 0 3px rgba(240, 201, 106, 0.95),
    0 0 22px rgba(123, 92, 255, 0.45);
  transform: translateY(-4px) scale(1.03);
}

.card-choice-order {
  position: absolute;
  top: -0.35rem;
  right: -0.2rem;
  z-index: 3;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0c96a, #c9a0ff);
  color: #1a0e28;
  font-size: 0.72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.card-choice-order.hidden {
  display: none;
}

.card-choice-caption {
  font-size: 0.78rem;
  text-align: center;
  color: var(--text);
  line-height: 1.2;
}

.card-choice-actions {
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.card-choice-piles .subconscious-pile h4 {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.modal-content.card-inspect-carousel {
  max-width: min(520px, 94vw);
}

.card-inspect-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(201, 160, 255, 0.22);
}

.card-inspect-prev,
.card-inspect-next {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 160, 255, 0.45);
  background: rgba(16, 10, 32, 0.85);
  color: var(--gold);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.card-inspect-prev:disabled,
.card-inspect-next:disabled {
  opacity: 0.35;
  cursor: default;
}

.card-inspect-counter {
  font-weight: 700;
  min-width: 4rem;
  text-align: center;
}

.card-inspect-hint {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Required choice modal guard */
#utility-modal.utility-modal-required .utility-backdrop {
  cursor: default;
}

#utility-modal.utility-modal-minimized {
  visibility: hidden;
  pointer-events: none;
}

.utility-choice-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 8600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 106, 0.55);
  background: rgba(12, 8, 24, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.utility-choice-dock.hidden {
  display: none;
}

#utility-choice-dock-label {
  font-size: 0.82rem;
  color: var(--gold);
  max-width: min(52vw, 420px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-minimize-choice {
  margin-right: auto;
  font-size: 0.78rem;
}

/* ── Somnia 21.3 table chrome: taller HUD, 6-dreamer bottom row ── */
body.play-window .top-bar.play-top-bar .brand h1 {
  font-size: 1.7rem;
}

body.play-window .top-bar.play-top-bar .brand-wordmark {
  height: 2.25rem;
  width: 9.8rem;
}

body.play-window .phase-stepper.top-bar-stepper {
  min-width: 22rem;
  max-width: 36rem;
}

.modal-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

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

.modal-object-fate {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
}

#screen-game .hand-primary .game-card.psyche-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 3px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  background: rgba(255, 248, 230, 0.55);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.35);
  animation: card-edge-breath 5.2s ease-in-out infinite;
}

@keyframes card-edge-breath {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

#screen-game .hand-primary {
  gap: 0;
}

#screen-game .hand-primary .game-card {
  flex: 0 0 auto;
  width: clamp(64px, 6.6vw, 96px);
  min-width: 64px;
  margin-right: 0;
  margin-left: var(--fan-overlap, 0px);
  z-index: var(--fan-z, 1);
  transform-origin: 18% 100%;
  transform:
    perspective(640px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(var(--fan-rot, 0deg))
    translateY(var(--fan-y, 0px));
  transition: transform 0.2s cubic-bezier(0.22, 1.15, 0.36, 1), box-shadow 0.2s ease, filter 0.16s ease;
  opacity: 0.97;
}

#screen-game .hand-primary .game-card.selected {
  opacity: 1;
}

.spread-tray-fan .game-card {
  opacity: 0.98;
}

.spread-tray-fan .game-card.selected {
  opacity: 1;
}

#screen-game .hand-primary .game-card:last-child {
  margin-right: 0;
}

:where(html:not([data-hover="false"])) #screen-game .hand-primary .game-card:hover,
#screen-game .hand-primary .game-card:focus-visible {
  position: relative;
  z-index: 50;
  transform:
    perspective(640px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(var(--fan-rot, 0deg))
    translateY(calc(var(--fan-y, 0px) - 18px))
    scale(1.08);
  box-shadow:
    0 28px 34px rgba(6, 4, 16, 0.55),
    0 10px 14px rgba(0, 0, 0, 0.32);
}

#screen-game .hand-primary .game-card:active,
#screen-game .hand-primary .game-card.is-pressed {
  z-index: 60;
  transform:
    perspective(640px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(var(--fan-rot, 0deg))
    translateY(calc(var(--fan-y, 0px) - 22px))
    scale(1.09);
  box-shadow:
    0 34px 42px rgba(6, 4, 16, 0.58),
    0 12px 18px rgba(0, 0, 0, 0.34);
}

#screen-game .allies-section,
#screen-game .objects-hand-section,
#screen-game .persistent-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 0.4rem;
}

#screen-game .allies-row.empty,
#screen-game .objects-row.empty {
  color: var(--muted);
  font-size: 0.72rem;
  align-items: center;
}

html[data-form="phone"] body.play-window {
  --topbar-h: 5.4rem;
}

html[data-form="phone"] .top-bar-stepper {
  display: flex;
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
}

html[data-form="phone"] #screen-game .hand-bar,
html[data-form="tablet"] #screen-game .hand-bar {
  grid-template-columns: minmax(180px, 22%) minmax(68px, 88px) minmax(220px, 2fr) minmax(56px, 10%) minmax(56px, 10%) minmax(56px, 10%);
}

html[data-form="phone"] .player-list-dock .player-chip,
html[data-form="tablet"] .player-list-dock .player-chip {
  width: clamp(40px, 7vw, 54px);
  min-width: 40px;
}

html[data-form="phone"] .hand-primary .game-card {
  min-width: 46px;
  width: clamp(46px, 7vw, 64px);
}

html[data-form="tablet"] #screen-game .hand-header {
  margin-bottom: 0.15rem;
}

html[data-form="tablet"] #screen-game .hand-header h3,
html[data-form="tablet"] #screen-game .hand-header-stacked h3 {
  font-size: 0.78rem;
}

html[data-form="tablet"] #screen-game .hand-primary {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  align-items: flex-end;
}

html[data-form="tablet"] #screen-game .hand-primary .game-card {
  min-width: 92px;
  width: 92px;
  min-height: 128px;
}

html[data-form="tablet"][data-orientation="portrait"] #screen-game .hand-primary .game-card {
  min-width: 108px;
  width: 108px;
  min-height: 150px;
}

html[data-form="tablet"][data-orientation="landscape"][data-viewport-height="short"] #screen-game .hand-primary .game-card {
  min-width: 80px;
  width: 80px;
  min-height: 112px;
}

@media (max-width: 640px) {
  body.play-window .top-bar.play-top-bar {
    flex-direction: row;
    align-items: center;
  }

  #screen-game .hand-bar {
    grid-template-columns: minmax(200px, 26%) minmax(68px, 88px) minmax(150px, 1.3fr) minmax(56px, 11%) minmax(56px, 11%) minmax(56px, 11%);
  }
}

body.play-window #screen-game.active .hand-bar {
  grid-template-columns: minmax(260px, 22%) minmax(88px, 118px) minmax(0, 1.45fr) minmax(72px, 12%) minmax(72px, 12%) minmax(72px, 12%);
}

.utility-content.dreamer-inspect-modal {
  max-width: min(1100px, 96vw);
  width: min(1100px, 96vw);
}

.dreamer-inspect {
  display: grid;
  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.dreamer-inspect-portrait .game-card.portrait {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.dreamer-inspect-portrait .game-card.portrait .art {
  min-height: 0;
  max-height: min(58vh, 420px);
  aspect-ratio: 5 / 7;
  height: auto;
}

.game-card.dreamer-live-card {
  position: relative;
}

.dreamer-live-face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0.7rem 0.65rem;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 6, 16, 0.55) 28%, rgba(8, 6, 16, 0.92) 72%);
  color: #f4eefc;
  text-align: left;
  pointer-events: none;
}

.dreamer-live-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dreamer-live-stats {
  display: flex;
  gap: 0.45rem;
  margin: 0.28rem 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.dreamer-live-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.dreamer-live-power span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #e4c36a);
}

.dreamer-live-power p {
  margin: 0.18rem 0 0;
  font-size: 0.68rem;
  line-height: 1.3;
}

#screen-setup .dreamer-live-face,
#dreamer-picker .dreamer-live-face {
  padding: 0.85rem 0.4rem 0.35rem;
}

#screen-setup .dreamer-live-power p,
#dreamer-picker .dreamer-live-power p {
  display: none;
}

.dreamer-inspect-info .dreamer-detail-body h2 {
  font-size: 1.85rem;
}

.dreamer-inspect-tokens {
  margin: 0.35rem 0 0.75rem;
  font-size: 1rem;
}

.dreamer-inspect-tokens strong {
  color: var(--gold);
  font-size: 1.25rem;
}

.dreamer-inspect-resources {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.dreamer-inspect-row h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.dreamer-inspect-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dreamer-inspect-cards .game-card {
  width: 72px;
  min-height: 96px;
}

@media (max-width: 760px) {
  .dreamer-inspect {
    grid-template-columns: 1fr;
  }

  .dreamer-inspect-portrait .game-card.portrait {
    max-width: 220px;
  }
}

/* ── Dreambeast dice battle (Somnia 26) ── */
.dice-battle-stage {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.dice-battle-stage[hidden] { display: none; }
.dice-battle-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(12, 8, 24, 0.42), rgba(6, 4, 14, 0.82));
}
body.dice-rolling #screen-game .table-surface,
body.dice-rolling #screen-game .table-surface::after {
  animation: none;
}
.dice-battle-table {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem;
  align-items: center;
  width: min(96%, 980px);
  padding: 1.2rem 1.4rem 1.4rem;
  overflow: visible;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(48, 32, 18, 0.55), rgba(22, 14, 10, 0.72)),
    repeating-linear-gradient(90deg, rgba(90, 50, 20, 0.18) 0 12px, rgba(40, 22, 10, 0.12) 12px 24px);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 220, 160, 0.18);
  border: 1px solid rgba(240, 201, 106, 0.28);
}
.dice-battle-pool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: min-content;
  overflow: visible;
}
.dice-battle-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dreamer-pool .dice-battle-label { color: #f4f0e6; }
.beast-pool .dice-battle-label { color: #d8d0e8; }
.dice-battle-count {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.dice-battle-count span[data-score] {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--gold);
  margin-right: 0.2rem;
}
.dice-battle-pool-size {
  opacity: 0.7;
  font-size: 0.78rem;
}
.dice-battle-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--die-gap, 0.55rem);
  padding: 0.85rem 0.35rem 1.1rem;
  min-height: calc(var(--die-size, 56px) + 18px);
  overflow: visible;
}
.dice-battle-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 5.5rem;
}
.dice-battle-vs {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
}
.dice-battle-compare {
  margin: 0;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.dice-battle-banner {
  position: relative;
  z-index: 1;
  margin: 0.9rem 0 0;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  background: rgba(12, 8, 20, 0.85);
  border: 1px solid rgba(240, 201, 106, 0.45);
}
.dice-battle-stage.winner-dreamer .dice-battle-banner {
  color: #6dffb0;
  box-shadow: 0 0 28px rgba(109, 255, 176, 0.35);
  animation: dice-fanfare 0.7s ease-out;
}
.dice-battle-stage.winner-beast .dice-battle-banner {
  color: #ff8a9a;
  box-shadow: 0 0 28px rgba(255, 93, 122, 0.35);
}
.dice-battle-stage.winner-dreamer .dreamer-pool .dice-battle-label {
  text-shadow: 0 0 16px rgba(255, 240, 180, 0.7);
}
.dice-battle-stage.winner-beast .beast-pool .dice-battle-label {
  text-shadow: 0 0 16px rgba(180, 80, 255, 0.65);
}

.battle-die-slot {
  flex: 0 0 var(--die-size, 58px);
  width: var(--die-size, 58px);
  height: var(--die-size, 58px);
  min-width: var(--die-size, 58px);
  min-height: var(--die-size, 58px);
  max-width: var(--die-size, 58px);
  max-height: var(--die-size, 58px);
  position: relative;
  overflow: visible;
}
.battle-die-scene {
  width: var(--die-size, 58px);
  height: var(--die-size, 58px);
  perspective: 170px;
  perspective-origin: 50% 40%;
}
.battle-die-slot.landing {
  animation: die-drop 0.34s cubic-bezier(0.18, 1.35, 0.28, 1);
}
.battle-die-slot::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -7px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  filter: blur(2px);
  pointer-events: none;
}
.battle-die-slot.plucked {
  animation: die-pluck 0.48s ease;
}
.battle-die-slot.success::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 22%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 92, 0.55), transparent 68%);
  animation: die-hit-glow 0.42s ease-out, die-hit-idle 1.15s ease-in-out 0.42s infinite;
}
.dice-battle-stage.winner-dreamer .dreamer-pool .battle-die-slot.success::after {
  background: radial-gradient(circle, rgba(255, 236, 150, 0.62), transparent 70%);
}
.dice-battle-stage.winner-beast .beast-pool .battle-die-slot.success::after {
  background: radial-gradient(circle, rgba(196, 120, 255, 0.5), transparent 70%);
}

.battle-die {
  width: var(--die-size, 58px);
  height: var(--die-size, 58px);
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(-24deg) rotateY(32deg);
}
.die-face {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--die-size, 58px);
  height: var(--die-size, 58px);
  box-sizing: border-box;
  border-radius: 14%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #1a1410;
}
.die-face::after {
  --o: calc(var(--die-size) * 0.24);
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--die-size) * 0.15);
  height: calc(var(--die-size) * 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  pointer-events: none;
}
.face-1::after { background: currentColor; }
.face-2::after {
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 currentColor,
    var(--o) var(--o) 0 currentColor;
}
.face-3::after {
  background: currentColor;
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 currentColor,
    var(--o) var(--o) 0 currentColor;
}
.face-4::after {
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 currentColor,
    var(--o) calc(var(--o) * -1) 0 currentColor,
    calc(var(--o) * -1) var(--o) 0 currentColor,
    var(--o) var(--o) 0 currentColor;
}
.face-5::after {
  background: currentColor;
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 currentColor,
    var(--o) calc(var(--o) * -1) 0 currentColor,
    calc(var(--o) * -1) var(--o) 0 currentColor,
    var(--o) var(--o) 0 currentColor;
}
.face-6::after {
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 currentColor,
    calc(var(--o) * -1) 0 0 currentColor,
    calc(var(--o) * -1) var(--o) 0 currentColor,
    var(--o) calc(var(--o) * -1) 0 currentColor,
    var(--o) 0 0 currentColor,
    var(--o) var(--o) 0 currentColor;
}
.dreamer-die .die-face {
  color: #1a1410;
  background: linear-gradient(145deg, #fffaf0, #d4ccba);
  border: 1px solid #d2c8b6;
}
.beast-die .die-face {
  color: #f4f0e6;
  background: linear-gradient(145deg, #2c2638, #0c0a12);
  border: 1px solid #534c62;
}
.battle-die.success .die-face {
  border-color: #e8c45a;
}
.dreamer-die.success .die-face {
  background: linear-gradient(145deg, #fff8dc, #efd27a);
}
.beast-die.success .die-face {
  background: linear-gradient(145deg, #4a3568, #1a1028);
  color: #ffe08a;
}
.die-face.hit {
  color: #9a6a00;
  box-shadow: inset 0 0 10px rgba(255, 210, 80, 0.45);
}
.beast-die .die-face.hit {
  color: #ffe9a0;
  box-shadow: inset 0 0 12px rgba(255, 200, 90, 0.4);
}

.face-1 { transform: rotateY(0deg) translateZ(var(--die-half, 29px)); }
.face-2 { transform: rotateY(90deg) translateZ(var(--die-half, 29px)); }
.face-3 { transform: rotateX(90deg) translateZ(var(--die-half, 29px)); }
.face-4 { transform: rotateX(-90deg) translateZ(var(--die-half, 29px)); }
.face-5 { transform: rotateY(-90deg) translateZ(var(--die-half, 29px)); }
.face-6 { transform: rotateY(180deg) translateZ(var(--die-half, 29px)); }

@keyframes dice-fanfare {
  0% { transform: scale(0.86); opacity: 0; }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes die-drop {
  0% { transform: translateY(-16px); }
  58% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}
@keyframes die-pluck {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-18px) scale(1.14); }
  100% { transform: translateY(0) scale(0.96); filter: grayscale(0.35); }
}
.dice-battle-stage.dice-close .dice-battle-table {
  transform: scale(1.045);
}
.dice-battle-stage.winner-dreamer .dreamer-pool,
.dice-battle-stage.winner-beast .beast-pool {
  animation: dice-tray-lean 1.5s ease-out;
}
@keyframes dice-tray-lean {
  from { transform: scale(0.96); }
  to { transform: scale(1.05); }
}
@keyframes die-hit-glow {
  0% { opacity: 0; transform: scale(0.72); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes die-hit-idle {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  .dice-battle-table {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .dice-battle-center { flex-direction: row; gap: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .battle-die { transition: none; }
  .battle-die-slot.landing,
  .battle-die-slot.success::after { animation: none; }
  .dice-battle-stage.winner-dreamer .dice-battle-banner { animation: none; }
  .deck-pressure-banner.tier-critical,
  .deck-pressure-banner.tier-severe,
  .deck-pressure-banner.tier-soft { animation: none; }
  body.dreamscape-unstable #screen-game .table-surface,
  body.dreamscape-unstable #screen-game .table-surface::before { animation: none; }
}

/* ── Deck remaining warnings sit in the table-bottom dock ── */
.deck-pressure-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 42rem;
  min-height: 0;
  padding: 0.42rem 0.9rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.deck-pressure-banner.hidden {
  display: none;
}
body.deck-pressure-active {
  --deck-pressure-h: 0px;
}

.deck-pressure-banner.tier-soft {
  color: #f4ead0;
  background: linear-gradient(90deg, rgba(42, 32, 18, 0.92), rgba(70, 48, 16, 0.9));
  border-bottom: 1px solid rgba(240, 201, 106, 0.45);
}

.deck-return-tag {
  margin-left: auto;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1a1208;
  background: #f0c96a;
}

.deck-return-tag.tier-critical { background: #ffb199; }
.deck-return-tag.tier-severe {
  background: #ffd0e8;
  animation: deck-pressure-flash 0.7s ease-in-out infinite;
}

.deck-rail-row.deck-pressure-soft { box-shadow: inset 0 0 0 1px rgba(240, 201, 106, 0.45); }
.deck-rail-row.deck-pressure-critical { box-shadow: inset 0 0 0 1px rgba(255, 120, 90, 0.7); }
.deck-rail-row.deck-pressure-severe { box-shadow: inset 0 0 0 1px rgba(255, 170, 220, 0.85); }

.dream-motes {
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  opacity: calc(0.22 + var(--loss-veil, 0) * 0.55);
  background-image:
    radial-gradient(circle, rgba(201, 160, 255, 0.9) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(240, 201, 106, 0.75) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(120, 210, 255, 0.7) 0 1.1px, transparent 1.7px);
  background-size: 140px 180px, 210px 160px, 180px 220px;
  background-position: 0 0, 40px 80px, 90px 20px;
  animation: dream-mote-drift 28s linear infinite;
}

@keyframes dream-mote-drift {
  from { background-position: 0 0, 40px 80px, 90px 20px; }
  to { background-position: 140px -180px, 250px 20px, -90px 240px; }
}

body.loss-nightmare #app {
  position: relative;
  z-index: 2;
}
.deck-pressure-banner.tier-critical {
  color: #ffe0d4;
  background: linear-gradient(90deg, rgba(90, 12, 24, 0.94), rgba(120, 36, 8, 0.92));
  border-bottom: 2px solid rgba(255, 120, 90, 0.88);
  animation: deck-pressure-flash 0.9s ease-in-out infinite;
}
.deck-pressure-banner.tier-severe {
  color: #ffe9a8;
  background: linear-gradient(90deg, rgba(48, 0, 58, 0.96), rgba(120, 0, 28, 0.95), rgba(8, 16, 70, 0.96));
  border-bottom: 2px solid rgba(255, 170, 90, 0.95);
  text-shadow: 0 0 14px rgba(255, 90, 160, 0.7);
  animation: deck-pressure-flash 0.42s ease-in-out infinite;
}

@keyframes deck-pressure-flash {
  0%, 100% { filter: brightness(1); opacity: 1; }
  50% { filter: brightness(1.22); opacity: 0.78; }
}
@keyframes deck-pressure-soft-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

body.dreamscape-unstable #screen-game .table-surface {
  animation:
    dream-breathe 10s ease-in-out infinite,
    dreamscape-unstable-shift 4.6s ease-in-out infinite;
}
body.dreamscape-unstable #screen-game .table-surface::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 26;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 38%, rgba(170, 70, 255, 0.2), transparent 52%),
    radial-gradient(ellipse at 74% 62%, rgba(70, 190, 255, 0.16), transparent 56%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 11px);
  mix-blend-mode: screen;
  animation: dreamscape-unstable-veil 2.5s ease-in-out infinite;
}
body.dreamscape-unstable #hex-board {
  animation: dreamscape-unstable-board 5.4s ease-in-out infinite;
}

@keyframes dreamscape-unstable-shift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  22% { transform: translate3d(7px, -5px, 0) rotate(0.22deg); }
  48% { transform: translate3d(-6px, 4px, 0) rotate(-0.18deg); }
  74% { transform: translate3d(4px, 6px, 0) rotate(0.12deg); }
}
@keyframes dreamscape-unstable-veil {
  0%, 100% { opacity: 0.45; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.9; transform: translate3d(-2.4%, 1.8%, 0) scale(1.05); }
}
@keyframes dreamscape-unstable-board {
  0%, 100% { filter: hue-rotate(0deg) saturate(1); }
  40% { filter: hue-rotate(12deg) saturate(1.18); }
  70% { filter: hue-rotate(-10deg) saturate(1.08); }
}

/* ── Somnia 29.4 — iPad table ─────────────────────────────────── */

html[data-touch="true"] button,
html[data-touch="true"] .btn,
html[data-touch="true"] a,
html[data-touch="true"] select,
html[data-touch="true"] summary,
html[data-touch="true"] [role="button"] {
  touch-action: manipulation;
}

html[data-touch="true"] .btn:active:not(:disabled),
html[data-touch="true"] .btn.is-pressed:not(:disabled),
html[data-touch="true"] button:active:not(:disabled) {
  transform: translateY(3px);
}

body.menu-window #screen-setup .btn,
body.menu-window #screen-setup #btn-start.begin-dream-btn,
body.menu-window #screen-setup .btn-tutorial-menu,
body.menu-window #screen-setup .btn-continue-dream,
body.menu-window #screen-setup .btn-pwa-install {
  line-height: 1.45;
  height: auto;
  min-height: 3rem;
  padding-top: 0.85em;
  padding-bottom: 0.7em;
  overflow: visible;
}

body.menu-window #screen-setup #btn-start.begin-dream-btn.begin-dream-ready {
  overflow: hidden;
  line-height: 1.5;
  padding-top: 0.95em;
  padding-bottom: 0.8em;
}

body.menu-window #screen-setup .setup-launch-row,
body.menu-window #screen-setup .setup-launch-row--first-visit {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  grid-template-columns: 1fr;
  min-height: 0;
  height: auto;
}

body.menu-window #screen-setup .setup-launch-row .btn,
body.menu-window #screen-setup #btn-start.begin-dream-btn,
body.menu-window #screen-setup .btn-tutorial-menu {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 2.85rem;
  white-space: normal;
  letter-spacing: 0.03em;
}

html[data-menu-layout="split"] .setup-panel-right.menu-glass-panel {
  align-self: stretch;
  overflow: auto;
  min-height: 0;
  max-height: 100%;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window {
  --topbar-h: 5.75rem;
}

html[data-form="tablet"][data-orientation="landscape"] .chrome-edge-toggle-side {
  top: 10.6rem;
  right: calc(var(--sidebar-w) + 0.65rem);
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window .top-bar.play-top-bar {
  padding: 0.22rem 0.45rem;
  /* Same band as desktop (600). It used to be 1200, which painted the top bar
     over every dialog (800-band): the Return picker's Confirm button was hidden
     under the HUD on iPad landscape. The "more" panel is its own fixed 1400 layer. */
  z-index: 600;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window .top-bar.play-top-bar .brand {
  min-width: 0;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window .brand-wordmark {
  height: 1.55rem;
  width: 6.4rem;
  max-width: 6.4rem;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window .version-label {
  display: none;
}

html[data-form="tablet"] .play-top-bar .phase-stepper .step-budget {
  font-size: 0.62rem;
  padding: 0.02rem 0.28rem;
}

html[data-form="tablet"] body.play-window .hud-item {
  padding: 0.16rem 0.42rem;
  font-size: 0.82rem;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

html[data-form="tablet"] body.play-window .hud-item .label {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin-right: 0.2rem;
}

html[data-form="tablet"][data-orientation="landscape"] .hud-round-wrap,
html[data-form="tablet"][data-orientation="landscape"] .hud-boss-rounds {
  flex-wrap: nowrap;
  align-items: center;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window .header-actions {
  gap: 0.22rem;
}

html[data-form="tablet"] body.play-window .header-actions .btn,
html[data-form="tablet"] body.play-window .header-actions .btn-sm,
html[data-form="tablet"] body.play-window .hud-feed-cluster .btn {
  min-height: 44px;
  min-width: 44px;
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column {
  width: 4.85rem;
  padding: 0.28rem 0.26rem;
}

html[data-form="tablet"] body:not(.deck-expanded) #screen-game .board-viewport {
  --map-chrome-left: 5.6rem;
  padding-left: var(--map-chrome-left);
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rail-head,
html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rail-discard,
html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rect-stack,
html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rail-sep {
  display: none;
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rail-piles {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-rail-draw {
  width: 100%;
  height: 100%;
  min-height: 0;
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-draw-back {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none;
}

html[data-form="tablet"] body:not(.deck-expanded) .deck-column .deck-draw-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

html[data-form="tablet"] .btn-next-phase,
html[data-form="tablet"] .btn-map-back,
html[data-form="tablet"] .btn-draw-dream {
  width: 4.25rem;
  height: 4.25rem;
  font-size: 0.68rem;
}

html[data-form="tablet"] .btn-draw-dream {
  right: calc(max(0.55rem, var(--sar)) + 4.85rem);
}

html[data-form="tablet"][data-orientation="landscape"] #screen-game .sidebar.right .active-card-slot .game-card.portrait .art {
  max-height: min(24vh, 200px);
}

html[data-form="tablet"] #screen-game .sidebar.right .quest-list,
html[data-form="tablet"] #screen-game .sidebar.right .quest-list.compact {
  font-size: 0.8rem;
  line-height: 1.35;
  overflow: visible;
}

html[data-form="tablet"] #screen-game .sidebar.right .quest-list li {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* ── Somnia 29.5 — more menu above the archetype, reveal taps ── */

html[data-form="tablet"][data-orientation="landscape"] #screen-game.active {
  z-index: 1;
}

html[data-form="tablet"][data-orientation="landscape"] #sidebar-right {
  position: relative;
  z-index: 1;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window #header-more-menu {
  position: relative;
  z-index: 3;
}

html[data-form="tablet"][data-orientation="landscape"] body.play-window #header-more-panel:not(.hidden) {
  position: fixed;
  top: 4.15rem;
  right: 0.5rem;
  z-index: 790;
  width: min(280px, calc(100vw - 1rem));
}

.header-more-panel-fixed {
  position: fixed;
  z-index: 790;
  width: min(280px, calc(100vw - 1rem));
}

html[data-touch="true"] .hex-tile {
  touch-action: manipulation;
}

/* ── Somnia 29.6 — finger on the map ─────────────────────────── */

html[data-touch="true"] .btn-next-phase::after,
html[data-touch="true"] .btn-map-back::after,
html[data-touch="true"] .btn-draw-dream::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
}

html[data-touch="true"] body.play-window .header-actions .btn,
html[data-touch="true"] #btn-header-more,
html[data-touch="true"] .hud-moment-history-btn,
html[data-touch="true"] .hud-dream-feed-btn,
html[data-touch="true"] .btn-music-toggle,
html[data-touch="true"] #power-tokens button,
html[data-touch="true"] .player-list-dock .player-chip {
  min-width: 44px;
  min-height: 44px;
}

html[data-form="phone"] .chrome-edge-toggle-side,
html[data-form="tablet"][data-orientation="portrait"] .chrome-edge-toggle-side {
  top: 8.4rem;
}

html[data-form="phone"] body.sidebar-drawer-open #board-viewport,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open #board-viewport {
  z-index: auto;
}

html[data-form="phone"] body.sidebar-drawer-open .btn-next-phase,
html[data-form="phone"] body.sidebar-drawer-open .btn-draw-dream,
html[data-form="phone"] body.sidebar-drawer-open .btn-map-back,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .btn-next-phase,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .btn-draw-dream,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .btn-map-back {
  position: fixed;
  top: calc(var(--topbar-h, 52px) + 0.55rem);
  z-index: 95;
}

html[data-form="phone"] body.sidebar-drawer-open .chrome-edge-toggle,
html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .chrome-edge-toggle {
  z-index: 96;
}

html[data-form="phone"] body.sidebar-drawer-open .btn-next-phase {
  right: calc(min(320px, 86vw) + 0.65rem);
}

html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .btn-next-phase {
  right: calc(var(--tablet-drawer-w) + 0.65rem);
}

html[data-form="phone"] body.sidebar-drawer-open .btn-draw-dream {
  right: calc(min(320px, 86vw) + 6.05rem);
}

html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .btn-draw-dream {
  right: calc(var(--tablet-drawer-w) + 5.35rem);
}

html[data-form="phone"] body.sidebar-drawer-open .chrome-edge-toggle-side {
  right: calc(min(320px, 86vw) + 0.45rem);
}

html[data-form="tablet"][data-orientation="portrait"] body.sidebar-drawer-open .chrome-edge-toggle-side {
  right: calc(var(--tablet-drawer-w) + 0.45rem);
}

/* Short desktop windows: shrink deck faces so the rail fits without scrolling. */
@media (max-height: 940px) {
  html[data-form="desktop"] .deck-column {
    --deck-face-w: 2rem;
    --deck-face-h: 2.7rem;
  }
}

/* ---- 30.1 iPad ergonomics ---------------------------------------------------
   44pt targets for anything a fingertip has to land on, and a touch of extra
   size on the labels that measured 7–9px on a 10.2" iPad. */
html[data-touch="true"] body.menu-window .header-actions .btn,
html[data-touch="true"] [data-music-toggle],
html[data-touch="true"] .modal-close,
html[data-touch="true"] .utility-close {
  min-width: 44px;
  min-height: 44px;
}

/* The menu's select rule carries an ID, so restate the 16px floor at that weight. */
html[data-touch="true"] body.menu-window #screen-setup .field select,
html[data-touch="true"] body.menu-window #screen-setup .field input[type="text"] {
  font-size: max(16px, 1em);
  min-height: 44px;
}

html[data-touch="true"] .btn-icon {
  min-width: 44px;
  min-height: 44px;
}

html[data-touch="true"] .pause-game-id {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
}

html[data-touch="true"] body.menu-window .setup-panel-right .btn,
html[data-touch="true"] .pause-header .btn,
html[data-touch="true"] .pause-tab,
html[data-touch="true"] .pause-body .btn,
html[data-touch="true"] .end-actions .btn,
html[data-touch="true"] .field select,
html[data-touch="true"] .field input[type="text"],
html[data-touch="true"] .pause-field select,
html[data-touch="true"] .pause-field input[type="text"],
html[data-touch="true"] .end-name-row .input {
  min-height: 44px;
}

html[data-touch="true"] .pause-toggle {
  min-height: 44px;
  cursor: pointer;
}

.pause-audio-hint {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(240, 200, 48, 0.35);
  background: rgba(240, 200, 48, 0.08);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.4;
}

html[data-touch="true"] .pause-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0;
  accent-color: var(--accent);
}

html[data-touch="true"] .pause-field input[type="range"] {
  height: 40px;
  margin: 0;
  cursor: pointer;
}

html[data-form="tablet"] .hex-tile .name {
  font-size: calc(0.88rem * var(--hex-scale, 1.72));
}

html[data-form="tablet"] .hex-tile .tokens {
  font-size: calc(0.7rem * var(--hex-scale, 1.72));
}

html[data-form="tablet"] .hud-item .label {
  font-size: 0.86rem;
}

/* The compact landscape chrome rule (0.58rem) outranks the line above; hold
   a readable floor at the same weight. */
html[data-form="tablet"][data-orientation="landscape"] body.play-window .hud-item .label {
  font-size: 0.74rem;
}

html[data-form="tablet"] .version-label {
  font-size: 0.7rem;
}

/* Sticky :hover on touch is handled by the data-hover guards above; keep
   focus rings visible for external keyboards without a mouse-style outline. */
html[data-touch="true"] .game-card:focus:not(:focus-visible),
html[data-touch="true"] .hex-tile:focus:not(:focus-visible) {
  outline: none;
}

/* ==========================================================================
   30.2 Input quarantine (js/input-quarantine.js)
   The table (#board-viewport, touch-action:none) owns pan / pinch / tap. Every
   other surface is HTML chrome that must scroll and click natively but never
   hand a gesture to the browser's page zoom or to the table underneath.
   ========================================================================== */

/* Two-finger pinch or double-tap that starts on chrome must not zoom the page. */
html[data-touch="true"] body.in-game {
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
}

html[data-touch="true"] body.in-game #app {
  overscroll-behavior: none;
}

/* Scrollable overlays keep momentum scrolling but never chain to the page. */
html[data-touch="true"] body.in-game .modal-content,
html[data-touch="true"] body.in-game .pause-card,
html[data-touch="true"] body.in-game #sidebar-right,
html[data-touch="true"] body.in-game .hand-bar,
html[data-touch="true"] body.in-game .deck-column,
html[data-touch="true"] body.in-game .tutorial-card-body,
html[data-touch="true"] body.in-game .header-dropdown-panel,
html[data-touch="true"] body.in-game .guide-panel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Radial action menu: on touch the scrim is the dismiss surface, so a tap outside
   the ring is consumed here and never reaches a hex tile (ui.js paintRadialMenu).
   Fine pointers keep click-through (scrim stays pointer-events:none). */
html[data-touch="true"] .power-token-radial-layer.open .power-token-radial-scrim {
  pointer-events: auto;
  touch-action: none;
}

/* ==========================================================================
   30.2 Viewport sync (js/viewport-sync.js)
   --vvh / --vvw / --vv-top / --kbd-h track the *visible* viewport: Safari's
   collapsing toolbars and the software keyboard shrink it without changing
   100dvh. Fallbacks keep the layout correct before the first JS frame.
   ========================================================================== */

body.in-game #app {
  height: var(--vvh, 100dvh);
  max-height: var(--vvh, 100dvh);
}

/* Fixed overlays are pinned to the visible region, not the layout viewport, so a
   modal or the pause card stays centred above the keyboard / below the toolbar. */
html[data-touch="true"] .modal,
html[data-touch="true"] .pause-menu,
html[data-touch="true"] .power-token-radial-layer,
html[data-touch="true"] .chrome-drawer-backdrop {
  top: var(--vv-top, 0px);
  bottom: auto;
  height: var(--vvh, 100dvh);
}

/* While the keyboard is up, a focused field's modal should not be taller than what is visible. */
html[data-keyboard="open"] .modal-content,
html[data-keyboard="open"] .pause-card {
  max-height: calc(var(--vvh, 100dvh) - 1.5rem);
}

/* ==========================================================================
   30.2 Touch dialogs — every choice a thumb can reach
   Dreams, Encounters, Object effects, Return / Repress pickers and phase-skip
   prompts all render into #utility-modal / #card-modal. On touch the action row
   docks to the bottom edge of the dialog (sticky inside the scroll area) with
   44px targets, and the dialog never grows past the visible viewport.
   ========================================================================== */

html[data-touch="true"] .modal-content {
  max-height: calc(var(--vvh, 100dvh) - 1rem);
}

html[data-touch="true"] .modal-content .utility-actions,
html[data-touch="true"] .modal-content .modal-card-actions:not([hidden]),
html[data-touch="true"] .modal-content .landscape-detail-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0.75rem -1rem 0;
  padding: 0.6rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg-panel) 78%, rgba(14, 12, 28, 0));
  border-top: 1px solid rgba(180, 160, 255, 0.18);
}

html[data-touch="true"] .modal-content .utility-actions .btn,
html[data-touch="true"] .modal-content .modal-card-actions .btn,
html[data-touch="true"] .modal-content .landscape-detail-actions .btn,
html[data-touch="true"] .modal-close {
  min-height: 44px;
  font-size: max(0.95rem, 15px);
}

html[data-touch="true"] .modal-content .utility-actions .btn.primary {
  flex: 1 1 12rem;
}

/* The Subconscious binder is a full-screen dialog: its header copy stays at the
   top, but the tally + Confirm Return + skip controls move to a docked footer so
   they sit under the thumb instead of the HUD. */
html[data-touch="true"] .subconscious-binder-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

html[data-touch="true"] .subconscious-binder-header {
  display: contents;
}

html[data-touch="true"] .subconscious-binder-header-copy {
  order: 1;
}

html[data-touch="true"] .subconscious-binder-root {
  order: 2;
}

html[data-touch="true"] .subconscious-binder-header-bar {
  order: 3;
  justify-content: flex-end;
  padding: 0.55rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(180, 160, 255, 0.18);
}

html[data-touch="true"] .subconscious-binder-header-bar .btn {
  min-height: 44px;
  font-size: max(0.9rem, 15px);
}

html[data-touch="true"] .subconscious-binder-header-bar #card-choice-confirm {
  flex: 1 1 11rem;
  max-width: 20rem;
}

html[data-touch="true"] .subconscious-binder-bottom-pad {
  display: none;
}

html[data-touch="true"] .subconscious-binder-header-copy h2 {
  font-size: 1.15rem;
}

html[data-touch="true"] .binder-browse-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

html[data-touch="true"] .binder-browse-shell .binder-tabs {
  order: 2;
}

html[data-touch="true"] .binder-browse-shell .subconscious-binder-root {
  order: 3;
}

html[data-touch="true"] .binder-browse-shell .subconscious-binder-header-bar {
  order: 4;
}

html[data-touch="true"] .subconscious-binder-shell.is-binder-look {
  grid-template-rows: minmax(0, 1fr) auto;
}

html[data-touch="true"] .subconscious-binder-shell.is-binder-look .subconscious-binder-root {
  order: 1;
}

html[data-touch="true"] .subconscious-binder-shell.is-binder-look .subconscious-binder-header-bar {
  order: 2;
}

html[data-form="phone"] .binder-look-card.game-card,
html[data-form="phone"] .binder-look-card.game-card.portrait {
  width: min(28rem, 92vw);
}

html[data-form="phone"] .binder-look-stage {
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  gap: 0.35rem;
}

/* ==========================================================================
   30.2 Phone & stacked main menu — readable, thumb-sized, scrolls
   The stacked menu (phones, and any window narrower than ~720px) used a 0.52
   type scale on a 12px root: 5px labels and 6px button text. The column already
   scrolls, so type now sits at real reading sizes and every control is ≥44px.
   ========================================================================== */

/* Fallback before panel-layout.js writes the live values inline
   (computeMenuViewportMetrics: phone portrait 1.42, phone landscape 1.22). */
html[data-menu-layout="stack"] body.menu-window,
html[data-form="phone"] body.menu-window {
  --setup-type-scale: 1.42;
  --menu-ui-scale: 1;
}

html[data-form="phone"][data-menu-layout="split"] body.menu-window {
  --setup-type-scale: 1.22;
}

html[data-menu-layout="stack"] body.menu-window #screen-setup .menu-panel-title,
html[data-form="phone"] body.menu-window #screen-setup .menu-panel-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

html[data-menu-layout="stack"] .menu-glass-panel,
html[data-form="phone"] .menu-glass-panel {
  padding: 0.85rem 0.9rem 0.95rem;
}

html[data-form="phone"][data-menu-layout="stack"] .setup-triad {
  padding: calc(4.2rem + env(safe-area-inset-top, 0px)) 0.65rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  gap: 0.75rem;
}

html[data-form="phone"][data-menu-layout="stack"] .setup-panel-left.menu-glass-panel,
html[data-form="phone"][data-menu-layout="stack"] .setup-panel-center.menu-glass-panel,
html[data-form="phone"][data-menu-layout="stack"] .setup-panel-right.menu-glass-panel {
  width: min(100%, 30rem);
}

html[data-menu-layout="stack"] body.menu-window #screen-setup .field > span,
html[data-form="phone"] body.menu-window #screen-setup .field > span {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

html[data-menu-layout="stack"] body.menu-window #screen-setup .field,
html[data-form="phone"] body.menu-window #screen-setup .field {
  margin-bottom: 0.65rem;
}

html[data-form="phone"] body.menu-window #screen-setup .seed-preview {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Dreamer picker: three across, names readable, stats back on. */
html[data-form="phone"] body.menu-window #screen-setup .game-card.portrait {
  width: min(104px, 100%);
}

html[data-form="phone"] body.menu-window #screen-setup .game-card.portrait .art {
  height: 96px;
  max-height: 96px;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-name {
  font-size: 0.95rem;
  max-width: 7.5rem;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-stats .stat {
  display: inline-flex;
  font-size: 0.78rem;
}

html[data-form="phone"] body.menu-window #screen-setup .setup-continue-meta,
html[data-form="phone"] body.menu-window #screen-setup .menu-tutorial-hint,
html[data-form="phone"] body.menu-window #screen-setup .seed-preview {
  font-size: 0.95rem;
  line-height: 1.4;
}

html[data-form="phone"] body.menu-window #screen-setup .dreamer-pick-slot {
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
}

/* Launch controls: one full-width, 48px button per row. */
html[data-form="phone"] body.menu-window #screen-setup .btn-tutorial-menu,
html[data-form="phone"] body.menu-window #screen-setup .begin-dream-btn,
html[data-form="phone"] body.menu-window #screen-setup .btn-continue-dream,
html[data-form="phone"] body.menu-window #screen-setup .btn-saved-dreams,
html[data-form="phone"] body.menu-window #screen-setup .btn-pwa-install,
html[data-form="phone"] body.menu-window #screen-setup .setup-launch-row--first-visit #btn-tutorial-mode,
html[data-form="phone"] body.menu-window #screen-setup #btn-start.begin-dream-btn {
  font-size: 1.12rem;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  width: 100%;
}

html[data-form="phone"] .setup-launch-row,
html[data-form="phone"][data-menu-layout="stack"] .setup-launch-row {
  flex-direction: column;
  gap: 0.55rem;
}

html[data-form="phone"] .setup-launch-row .btn {
  flex: 1 1 auto;
}

html[data-form="phone"] .setup-continue-meta,
html[data-form="phone"] .menu-tutorial-hint {
  display: block;
  font-size: 0.88rem;
  line-height: 1.4;
}

html[data-menu-layout="stack"] body.menu-window #screen-setup .btn,
html[data-form="phone"] body.menu-window #screen-setup .btn {
  min-height: 44px;
}

html[data-menu-layout="stack"] body.menu-window #screen-setup .field select,
html[data-form="phone"] body.menu-window #screen-setup .field select,
html[data-form="phone"] body.menu-window #screen-setup .field input {
  font-size: max(16px, 1.05rem);
  min-height: 46px;
}

/* Phone top bar on the menu: one row (wordmark left, music right) instead of
   the ≤640px column stack, so the first panel is not hidden under it. */
@media (max-width: 640px) {
  html[data-form="phone"] body.menu-window .top-bar,
  html[data-menu-layout="stack"] body.menu-window .top-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  padding: calc(0.3rem + env(safe-area-inset-top, 0px)) 0.6rem 0.3rem;
  }
}

html[data-form="phone"] body.menu-window .brand-wordmark {
  height: 2.4rem;
  width: 10.5rem;
}

html[data-form="phone"] body.menu-window .header-actions .btn {
  min-width: 44px;
  min-height: 44px;
}

html[data-form="phone"][data-menu-layout="stack"] .setup-triad {
  padding-top: calc(4.9rem + env(safe-area-inset-top, 0px));
}

/* Phone landscape (≈844×390): the old two-column split stacked Settings over
   Launch in a 390px-tall column and pushed Begin Dreaming off-screen. Three
   scrolling columns instead — Settings | Dreamers | Launch — each clipped to
   the viewport height and scrollable on its own. */
html[data-form="phone"][data-menu-layout="split"] .setup-triad {
  grid-template-columns: minmax(13rem, 26%) minmax(0, 1fr) minmax(13rem, 26%);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  align-content: stretch;
  padding:
    calc(4.7rem + env(safe-area-inset-top, 0px))
    calc(0.45rem + env(safe-area-inset-right, 0px))
    calc(0.45rem + env(safe-area-inset-bottom, 0px))
    calc(0.45rem + env(safe-area-inset-left, 0px));
  gap: 0.45rem;
  overflow: hidden;
}

html[data-form="phone"][data-menu-layout="split"] .setup-panel-left.menu-glass-panel,
html[data-form="phone"][data-menu-layout="split"] .setup-panel-center.menu-glass-panel,
html[data-form="phone"][data-menu-layout="split"] .setup-panel-right.menu-glass-panel {
  grid-row: 1;
  align-self: stretch;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0.6rem 0.65rem 0.7rem;
}

html[data-form="phone"][data-menu-layout="split"] .setup-panel-left.menu-glass-panel { grid-column: 1; }
html[data-form="phone"][data-menu-layout="split"] .setup-panel-center.menu-glass-panel { grid-column: 2; display: block; }
html[data-form="phone"][data-menu-layout="split"] .setup-panel-right.menu-glass-panel { grid-column: 3; }

html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .menu-dreamer-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto;
  min-height: 0;
  align-content: start;
}

html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .menu-panel-title {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .btn-tutorial-menu,
html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .begin-dream-btn,
html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .btn-continue-dream,
html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .btn-saved-dreams,
html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup .btn-pwa-install,
html[data-form="phone"][data-menu-layout="split"] body.menu-window #screen-setup #btn-start.begin-dream-btn {
  min-height: 44px;
  font-size: 1rem;
  padding: 0.4rem 0.6rem;
}

html[data-form="phone"][data-orientation="landscape"] body.menu-window .brand-wordmark {
  height: 2rem;
  width: 8.75rem;
}

@media (max-width: 900px) {
  html[data-form="phone"][data-orientation="landscape"] body.menu-window .top-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.25rem + env(safe-area-inset-top, 0px)) calc(0.6rem + env(safe-area-inset-right, 0px)) 0.25rem calc(0.6rem + env(safe-area-inset-left, 0px));
  }
}

/* --------------------------------------------------------------------------
   30.2 Phone play table
   Body text on phones used to be 12px root × 0.62 = 7.4px; panel-layout.js now
   keeps --ui-scale at 1 on phones. The six-column hand grid (sized for a wide
   table) becomes a horizontal snap scroller of full-height panes: Psyche hand
   first, then Dreamers, Power, Allies, Objects, Persistent.
   -------------------------------------------------------------------------- */
html[data-form="phone"] body.play-window #screen-game.active .hand-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  height: var(--hand-h);
  max-height: var(--hand-h);
  min-height: 0;
  padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0.5rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > * {
  flex: 0 0 auto;
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
  min-height: 0;
  scroll-snap-align: start;
  border-left: none;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .resize-handle {
  display: none;
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .psyche-hand-section {
  order: 0;
  width: min(92vw, 28rem);
  overflow-x: auto;
  overflow-y: hidden;
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .dreamer-dock {
  order: 1;
  width: min(84vw, 22rem);
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .power-section {
  order: 2;
  width: 9.5rem;
  max-width: none;
}

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .allies-section { order: 3; }
html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .objects-hand-section { order: 4; }
html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .persistent-section { order: 5; }

html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .allies-section,
html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .objects-hand-section,
html[data-form="phone"] body.play-window #screen-game.active .hand-bar > .persistent-section {
  width: 8.5rem;
}

/* Landscape phone (≈844×390): a bottom hand bar leaves ~200px for the board.
   Table on the left, hand panes stacked in a scrolling column on the right. */
html[data-form="phone"][data-orientation="landscape"] #screen-game.active {
  grid-template-columns: minmax(0, 1fr) min(42vw, 21rem);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "table hand";
}

html[data-form="phone"][data-orientation="landscape"] body.play-window #screen-game.active .hand-bar {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  max-height: none;
  min-height: 0;
  padding: 0.4rem calc(0.4rem + env(safe-area-inset-right, 0px)) calc(0.4rem + env(safe-area-inset-bottom, 0px)) 0.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-padding-left: 0;
  scroll-padding-top: 0.4rem;
  border-left: 1px solid var(--border);
  border-top: none;
}

html[data-form="phone"][data-orientation="landscape"] body.play-window #screen-game.active .hand-bar > * {
  width: auto;
  min-height: 7.5rem;
}

html[data-form="phone"][data-orientation="landscape"] body.play-window #screen-game.active .hand-bar > .psyche-hand-section {
  min-height: 11rem;
  overflow-x: auto;
}

html[data-form="phone"][data-orientation="landscape"] #screen-game #sidebar-right {
  bottom: 0;
  width: min(360px, 60vw);
  max-width: min(360px, 60vw);
}

html[data-form="phone"][data-orientation="landscape"] .chrome-edge-toggle-side {
  right: calc(min(42vw, 21rem) + 0.45rem);
}

/* Cards in the phone hand: thumb-sized, one row, scroll sideways. */
html[data-form="phone"] .hand-primary .game-card,
html[data-form="phone"] #screen-game .hand .game-card {
  min-width: 64px;
  width: 64px;
}

html[data-form="phone"] .player-list-dock .player-chip {
  width: 48px;
  min-width: 48px;
}

/* Top bar: phase stepper + music + pause in one 44px row. */
html[data-form="phone"] body.play-window {
  --topbar-h: calc(4.6rem + env(safe-area-inset-top, 0px));
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar {
  padding: calc(0.3rem + env(safe-area-inset-top, 0px)) 0.45rem 0.3rem;
  gap: 0.3rem;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .btn {
  min-height: 40px;
  min-width: 40px;
}

/* 390px wide: stepper (3 steps + arrows) + music + pause + more overflowed by
   ~55px. Inactive steps collapse to their suit icon; the stepper may shrink. */
html[data-form="phone"] body.play-window .top-bar.play-top-bar .phase-stepper {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  gap: 0.15rem;
}

/* Portrait phone: the HUD (goal · dreams · round · narration · guide) used to be
   squeezed to 0px and simply vanished. It now takes a second, shorter row under
   the stepper; in landscape everything fits on one row again. */
@media (max-width: 640px) {
  html[data-form="phone"] body.play-window {
    --topbar-h: calc(7.4rem + env(safe-area-inset-top, 0px));
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .phase-stepper {
    order: 1;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .header-actions {
    order: 2;
    margin-left: auto;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.3rem;
    padding-bottom: 0;
    scrollbar-width: none;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud::-webkit-scrollbar {
    display: none;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud .hud-item {
    flex: 0 0 auto;
    min-height: 30px;
    font-size: 0.8rem;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud .hud-feed-cluster {
    margin-left: auto;
  }

  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud .btn {
    min-height: 32px;
    height: 32px;
  }
}

@media (min-width: 641px) {
  html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    gap: 0.25rem;
  }
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .hud .btn,
html[data-form="phone"] body.play-window .top-bar.play-top-bar .header-actions .btn-icon {
  min-width: 40px;
  width: 40px;
  padding-left: 0;
  padding-right: 0;
}

/* Pause: icon only on phones (the label is still announced via the title). */
html[data-form="phone"] body.play-window .top-bar.play-top-bar #btn-pause {
  font-size: 0;
  width: 44px;
  min-width: 44px;
  padding: 0;
  line-height: 1;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar #btn-pause::before {
  content: "⏸";
  font-size: 1.15rem;
  line-height: 1;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .phase-stepper .step:not(.active) .step-label {
  display: none;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .phase-stepper .step {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

html[data-form="phone"] body.play-window .top-bar.play-top-bar .header-actions {
  flex: 0 0 auto;
  gap: 0.25rem;
}

/* Subconscious binder / Return picker on a phone: 3 cards across in portrait
   (≈100px, real card proportions) instead of 4 skinny 66px columns. */
html[data-form="phone"] #utility-modal .subconscious-binder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 0.55rem;
  padding: 0.6rem 0.55rem 0.8rem;
}

html[data-form="phone"][data-orientation="landscape"] #utility-modal .subconscious-binder-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Portrait tablet: 8 columns squeezed to 78px thumbs; 6 keeps art legible. */
html[data-form="tablet"][data-orientation="portrait"] #utility-modal .subconscious-binder-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html[data-form="phone"] #utility-modal .subconscious-binder-cell .binder-thumb.game-card {
  max-width: none;
  aspect-ratio: 5 / 7;
  min-height: 0 !important;
  max-height: none;
  overflow: hidden;
}

html[data-form="phone"] #utility-modal .subconscious-binder-cell {
  padding: 0.25rem 0.15rem 0.4rem;
}

/* Right-side drawer (Table panel): full height between top bar and hand bar. */
html[data-form="phone"] #screen-game #sidebar-right,
html[data-form="tablet"][data-orientation="portrait"] #screen-game #sidebar-right {
  height: auto;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
}

/* The three panels are overflow:hidden, so when they outgrow the viewport the
   grid's `auto` rows shared the free space equally (≈250px each) and the panels
   overlapped one another. Size rows by content and let the column scroll. */
html[data-menu-layout="stack"] .setup-triad {
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Embedded (itch.io iframe): no Home Screen install path, no safe-area insets,
   fullscreen depends on the host's allowfullscreen. Hide the install copy. */
html[data-embedded="true"] #pwa-install-hint,
html[data-embedded="true"] .pwa-install-hint {
  display: none !important;
}

/* ── Somnia 36.0 Mindstream / Dream fullscreen choices ─────────────────── */
#utility-modal.ms-choice-modal {
  z-index: 860;
}
#utility-modal.ms-choice-modal .utility-content.ms-choice-modal-wrap {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #05040c;
  overflow: hidden;
}
#utility-modal.ms-choice-modal .utility-backdrop {
  background: rgba(2, 1, 8, 0.55);
}
.ms-choice-fullscreen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ms-choice-bleed {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.12) contrast(1.08) brightness(0.52);
  transform: scale(1.12);
  pointer-events: none;
}
.ms-choice-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 28%, rgba(4, 2, 12, 0.55) 100%);
}
.ms-choice-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 90rem);
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr) minmax(17rem, 22rem);
  align-items: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  box-sizing: border-box;
}
.ms-choice-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(22rem, 100%);
  height: auto;
  min-width: 0;
  padding: 0.5rem;
  box-sizing: border-box;
  z-index: 3;
}
.ms-choice-rail--left { justify-content: flex-end; justify-self: end; }
.ms-choice-rail--right { justify-content: flex-start; justify-self: start; }
.ms-choice-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  height: 100%;
}
.ms-choice-caption {
  flex: 0 0 auto;
  max-width: min(34rem, 86vw);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.ms-choice-card-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: calc(100dvh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-choice-card {
  display: block;
  max-height: 100%;
  max-width: min(46vw, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0.45rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 18px 48px rgba(0, 0, 0, 0.55);
}
.ms-choice-card--placeholder {
  display: grid;
  place-items: center;
  min-width: min(18rem, 50vw);
  min-height: min(26rem, 60vh);
  background: rgba(20, 14, 40, 0.85);
  color: #f4eefc;
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.ms-choice-flee-slot {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 4;
}
.ms-choice-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 224, 255, 0.72);
}
.ms-choice-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  line-height: 1.15;
  color: #f4eefc;
}
.ms-choice-message,
.ms-choice-landscapes {
  margin: 0.15rem 0 0;
  max-width: 34rem;
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  line-height: 1.35;
  color: rgba(236, 230, 255, 0.88);
}
.ms-choice-landscapes {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 700;
  color: #f4eefc;
}

/* Full-card peek: the picture fills the screen, choices sit under it. */
#utility-modal.card-peek-modal .utility-content.card-peek-modal-wrap {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #05040c;
  overflow: hidden;
}
.card-peek-stage {
  position: relative;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0.45rem 0.75rem 0.65rem;
  gap: 0.35rem;
}
.card-peek-kicker,
.card-peek-message {
  margin: 0;
  flex: 0 0 auto;
  text-align: center;
  max-width: 40rem;
}
.card-peek-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 224, 255, 0.72);
}
.card-peek-message {
  font-size: 0.82rem;
  color: rgba(236, 230, 255, 0.88);
}
.card-peek-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-peek-art {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0.7rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 22px 56px rgba(0, 0, 0, 0.58);
}
.card-peek-face {
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 0.7rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 22px 56px rgba(0, 0, 0, 0.58);
}
.card-peek-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(180deg, #2a2148, #120e22);
  color: #f6f1ff;
  text-align: center;
  padding: 1.25rem;
  box-sizing: border-box;
}
.card-peek-face--lucidity { background: linear-gradient(180deg, #1a3358, #0c1428); }
.card-peek-face--elasticity { background: linear-gradient(180deg, #4a3a12, #1c1406); }
.card-peek-face--willpower { background: linear-gradient(180deg, #4a1820, #1a0a0e); }
.card-peek-value {
  font-size: clamp(4.5rem, 16vh, 8rem);
  font-weight: 800;
  line-height: 0.9;
}
.card-peek-suit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 6vh, 3.5rem);
  line-height: 1;
}
.card-peek-name {
  font-size: clamp(1.1rem, 2.4vh, 1.6rem);
  font-weight: 700;
}
.card-peek-text {
  margin: 0.4rem 0 0;
  max-width: 18rem;
  font-size: clamp(0.85rem, 1.8vh, 1.05rem);
  line-height: 1.35;
}
.card-peek-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  width: min(40rem, 96vw);
}
.card-peek-choice {
  min-width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.card-peek-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.6rem;
  height: 4.2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 8, 20, 0.72);
  color: #f4eefc;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.card-peek-nav--prev { left: 0.45rem; }
.card-peek-nav--next { right: 0.45rem; }
.ms-choice-btn {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.28);
  color: #f7f2ff;
  background: rgba(18, 12, 36, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.15rem 1.25rem 1.25rem;
  width: min(22rem, 100%);
  max-width: 22rem;
  min-width: 0;
  height: auto;
  min-height: 8.5rem;
  font-family: var(--font-display);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 5px 0 rgba(8, 4, 18, 0.62),
    0 12px 28px rgba(0, 0, 0, 0.35);
}
.ms-choice-btn__label {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  max-width: 100%;
}
.ms-choice-btn__hint {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(230, 222, 255, 0.9);
  text-align: center;
  max-width: 100%;
}
.ms-choice-btn:hover:not(:disabled),
.ms-choice-btn:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}
.ms-choice-btn:active:not(:disabled),
.ms-choice-btn.is-pressed:not(:disabled) {
  transform: translateY(3px) scale(0.98);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(8, 4, 16, 0.55);
}
.ms-choice-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.ms-choice-btn--good {
  border-color: rgba(140, 220, 180, 0.55);
  background: linear-gradient(160deg, rgba(28, 64, 48, 0.88), rgba(12, 24, 36, 0.84));
}
.ms-choice-btn--bad {
  border-color: rgba(220, 120, 120, 0.5);
  background: linear-gradient(160deg, rgba(64, 24, 36, 0.88), rgba(20, 12, 28, 0.84));
}
.ms-choice-btn--flee {
  border-color: rgba(180, 160, 255, 0.55);
  background: linear-gradient(160deg, rgba(48, 28, 80, 0.92), rgba(16, 10, 36, 0.88));
  width: 6.5rem;
  min-width: 6.5rem;
  height: 6.5rem;
  min-height: 6.5rem;
  padding: 0.55rem;
}
.ms-choice-btn--square { border-radius: 0.55rem; }
.ms-choice-btn--circle { border-radius: 999px; }
.ms-choice-btn--triangle {
  border-radius: 1.15rem 1.15rem 2.6rem 2.6rem;
  clip-path: none;
  padding: 1.35rem 1.3rem 1.5rem;
  min-height: 9.5rem;
  border: 2px solid rgba(255, 214, 120, 0.55);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(90, 70, 20, 0.94), rgba(28, 18, 8, 0.9));
}
.ms-choice-btn--triangle.ms-choice-btn--bad {
  border-color: rgba(255, 140, 140, 0.55);
  background: linear-gradient(180deg, rgba(90, 30, 30, 0.94), rgba(28, 10, 12, 0.9));
}
.ms-choice-btn--triangle .ms-choice-btn__hint { max-width: none; }
.ms-choice-btn--spiral { border-radius: 50%; position: relative; }
.ms-choice-btn--spiral::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid rgba(210, 190, 255, 0.35);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(25deg);
  pointer-events: none;
}
.ms-choice-fullscreen[data-suit="lucidity"] .ms-choice-btn--good { border-color: rgba(120, 180, 255, 0.6); }
.ms-choice-fullscreen[data-suit="elasticity"] .ms-choice-btn--good { border-color: rgba(230, 190, 90, 0.6); }
.ms-choice-fullscreen[data-suit="willpower"] .ms-choice-btn--good { border-color: rgba(230, 120, 120, 0.6); }

@media (max-width: 820px) {
  .ms-choice-stage {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.65rem;
  }
  .ms-choice-center {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }
  .ms-choice-rail {
    order: 2;
    height: auto;
    width: 100%;
    padding: 0.25rem 0;
    justify-content: center;
  }
  .ms-choice-rail--left { order: 2; }
  .ms-choice-flee-slot { order: 3; position: static; transform: none; }
  .ms-choice-rail--right { order: 4; }
  .ms-choice-card-frame {
    height: calc(100dvh - 16rem);
    max-height: calc(100dvh - 16rem);
  }
  .ms-choice-card { max-width: min(92vw, 100%); }
  .ms-choice-btn {
    width: min(22rem, 92vw);
    min-height: 7.5rem;
  }
  .ms-choice-btn--flee {
    width: min(22rem, 92vw);
    min-width: min(22rem, 92vw);
    height: auto;
    min-height: 4.4rem;
    border-radius: 999px;
  }
}

/* ── Mindstream draw cinematic (deck → POV → choice) ───────────────────── */
.ms-draw-cinematic {
  position: fixed;
  inset: 0;
  z-index: 9200;
  pointer-events: none;
  overflow: hidden;
}
.ms-draw-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(4, 2, 12, 0) 55%, rgba(4, 2, 12, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.ms-draw-cinematic--play .ms-draw-veil { opacity: 1; }
.ms-draw-card {
  position: fixed;
  left: var(--from-x);
  top: var(--from-y);
  width: 52px;
  height: 74px;
  margin-left: -26px;
  margin-top: -37px;
  transform: translate3d(0, 0, 0) scale(1) rotate(-8deg);
  transform-origin: center center;
  perspective: 1400px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
  will-change: transform, filter;
}
.ms-draw-cinematic--play .ms-draw-card {
  animation: ms-draw-swoop 1.65s cubic-bezier(0.14, 0.72, 0.18, 1) forwards;
}
.ms-draw-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 0.45rem;
}
.ms-draw-cinematic--play .ms-draw-card-inner {
  animation: ms-draw-flip 1.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.ms-draw-face {
  position: absolute;
  inset: 0;
  border-radius: 0.45rem;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #120f22;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.ms-draw-face--front {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
}
.ms-draw-face-title {
  font-family: var(--font-display);
  color: #f4eefc;
  font-size: 0.7rem;
  text-align: center;
  padding: 0.35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.ms-draw-swallow {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.05) brightness(0.75);
}
.ms-draw-cinematic--swallow .ms-draw-swallow {
  animation: ms-draw-swallow 0.38s ease-out forwards;
}
.ms-draw-cinematic--swallow .ms-draw-card {
  animation: ms-draw-dissolve 0.38s ease-in forwards;
}
@keyframes ms-draw-swoop {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-10deg);
  }
  28% {
    transform: translate3d(
        calc(50vw - var(--from-x) + 40px),
        calc(42vh - var(--from-y) - 30px),
        0
      )
      scale(2.1) rotate(6deg);
  }
  58% {
    transform: translate3d(
        calc(50vw - var(--from-x) - 10px),
        calc(48vh - var(--from-y) + 10px),
        0
      )
      scale(4.4) rotate(-2deg);
  }
  100% {
    transform: translate3d(
        calc(50vw - var(--from-x)),
        calc(50vh - var(--from-y)),
        0
      )
      scale(9.5) rotate(0deg);
  }
}
@keyframes ms-draw-flip {
  0% { transform: rotateY(0deg); }
  35% { transform: rotateY(0deg); }
  55% { transform: rotateY(180deg); }
  100% { transform: rotateY(180deg); }
}
@keyframes ms-draw-swallow {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ms-draw-dissolve {
  from { opacity: 1; filter: brightness(1); }
  to { opacity: 0; filter: brightness(1.35); }
}
#utility-modal.ms-choice-modal.ms-choice-modal--enter {
  opacity: 0;
}
#utility-modal.ms-choice-modal.ms-choice-modal--enter.ms-choice-modal--visible {
  opacity: 1;
  transition: opacity 0.45s ease;
}
body.ms-draw-cinematic-active {
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .ms-draw-cinematic { display: none !important; }
  #utility-modal.ms-choice-modal.ms-choice-modal--enter {
    opacity: 1;
    transition: none;
  }
}

.quest-boss-hint {
  color: #f0c96a;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.quest-boss-hint::before {
  content: "· ";
  opacity: 0.7;
}

.fx-flying-card.fx-flying-tarot.fx-flying-active {
  animation-name: fx-card-fly-tarot;
  animation-duration: 1.05s;
}
.fx-flying-face {
  background-size: cover;
  background-position: center;
  justify-content: flex-end;
  padding-bottom: 0.35rem;
}
.fx-flying-face .fx-card-name {
  background: rgba(0, 0, 0, 0.5);
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
}
@keyframes fx-card-fly-tarot {
  0% { opacity: 0.15; transform: translate(0, 0) scale(0.8) rotate(-8deg); }
  16% { opacity: 1; }
  46% {
    transform: translate(calc(var(--fx-tx, 0) * 0.42), calc(var(--fx-ty, 0) * 0.28 - 72px)) scale(1.55) rotate(5deg);
  }
  100% {
    opacity: 0.2;
    transform: translate(var(--fx-tx, 0), var(--fx-ty, 0)) scale(0.62) rotate(0deg);
  }
}

.fx-shuffle-card {
  position: fixed;
  width: 68px;
  height: 96px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #1a1430;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  z-index: 4;
  animation: fx-riffle 0.98s cubic-bezier(0.18, 0.72, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes fx-riffle {
  0% { opacity: 0.15; transform: translate(0, 0) rotate(-10deg) scale(0.85); }
  38% {
    opacity: 1;
    transform: translate(calc(var(--fx-tx) * 0.4), calc(var(--fx-ty) * 0.12 - 78px + var(--riffle, 0px))) rotate(14deg) scale(1.2);
  }
  100% { opacity: 0; transform: translate(var(--fx-tx), var(--fx-ty)) rotate(-2deg) scale(0.5); }
}

.fx-table-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  margin: 0;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(10, 7, 20, 0.9);
  color: #f6edd8;
  border: 1px solid rgba(240, 201, 106, 0.7);
  font-family: var(--font-display, inherit);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  animation: fx-banner-in 1.65s ease forwards;
  pointer-events: none;
}
@keyframes fx-banner-in {
  0% { opacity: 0; transform: translateY(10px); }
  14% { opacity: 1; transform: translateY(0); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

.beast-mill {
  position: fixed;
  inset: 0;
  z-index: 12050;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(8, 4, 18, 0.18), rgba(8, 4, 18, 0.55));
}
.beast-mill--out { opacity: 0; transition: opacity 0.28s ease; }
.beast-mill-caption {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(40rem, 92vw);
  text-align: center;
  color: #f6edd8;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.beast-mill-pass,
.beast-mill-beast {
  position: fixed;
  width: 78px;
  height: 112px;
  margin: 0;
  transform: translate(-50%, -50%);
  perspective: 900px;
  z-index: 2;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}
.beast-mill-pass { animation: beast-mill-pass 0.64s ease forwards; }
.beast-mill-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.beast-mill-pass .beast-mill-card-inner {
  transform: rotateY(180deg);
}
.beast-mill-face {
  position: absolute;
  inset: 0;
  border-radius: 0.45rem;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-color: #161022;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.beast-mill-face--front {
  transform: rotateY(180deg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.beast-mill-face-title {
  margin: 0 0 0.3rem;
  padding: 0.08rem 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #f4eefc;
  font-size: 0.62rem;
  text-align: center;
}
.beast-mill-beast--fly {
  animation: beast-mill-fly 0.92s cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.beast-mill-beast--fly .beast-mill-card-inner {
  animation: beast-mill-flip 0.92s ease forwards;
}
@keyframes beast-mill-pass {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(-8deg); }
  30% { opacity: 1; transform: translate(-50%, -70%) scale(1.05) rotate(4deg); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--pass-x, 40px)), calc(-50% + var(--pass-y, 20px))) scale(0.4) rotate(0deg);
  }
}
@keyframes beast-mill-fly {
  0% {
    left: var(--from-x);
    top: var(--from-y);
    transform: translate(-50%, -50%) scale(0.85) rotate(-6deg);
  }
  58% {
    left: var(--peak-x, 50%);
    top: var(--peak-y, 44%);
    transform: translate(-50%, -50%) scale(var(--peak-scale, 3.2)) rotate(0deg);
  }
  100% {
    left: var(--to-x);
    top: var(--to-y);
    transform: translate(-50%, -50%) scale(var(--to-scale, 2.4)) rotate(0deg);
  }
}
@keyframes beast-mill-flip {
  0% { transform: rotateY(0deg); }
  38% { transform: rotateY(180deg); }
  100% { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .beast-mill { display: none !important; }
  .fx-shuffle-card,
  .fx-table-banner { display: none !important; }
}

/* ── Somnia 39.5 living table ─────────────────────────────────────────── */

.dream-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.fx-ink-mote {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(210, 160, 255, 0.75), rgba(70, 20, 110, 0.15) 70%, transparent 72%);
  filter: blur(1px);
  animation: fx-ink-mote 0.78s ease-out forwards;
}

@keyframes fx-ink-mote {
  0% { opacity: 0.15; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--ink-x, 12px), var(--ink-y, -18px)) scale(1.8); }
}

.hand-stats-suits .stat.stat-need {
  border-radius: 999px;
  padding: 0.04rem 0.38rem;
  animation: stat-need-pulse 1.15s ease-in-out infinite;
}

.hand-stats-suits .stat.stat-need.suit-lucidity {
  background: rgba(74, 158, 255, 0.18);
  box-shadow: 0 0 12px rgba(90, 170, 255, 0.85);
}

.hand-stats-suits .stat.stat-need.suit-elasticity {
  background: rgba(240, 200, 90, 0.16);
  box-shadow: 0 0 12px rgba(240, 200, 90, 0.8);
}

.hand-stats-suits .stat.stat-need.suit-willpower {
  background: rgba(232, 90, 110, 0.18);
  box-shadow: 0 0 12px rgba(232, 90, 110, 0.8);
}

.hud-pill.stat-need {
  animation: stat-need-pulse 1.15s ease-in-out infinite;
}

.hud-pill-lucidity.stat-need { box-shadow: 0 0 16px rgba(74, 158, 255, 0.9); }
.hud-pill-elasticity.stat-need { box-shadow: 0 0 16px rgba(240, 200, 48, 0.9); }
.hud-pill-willpower.stat-need { box-shadow: 0 0 16px rgba(232, 72, 72, 0.9); }

@keyframes stat-need-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.25); }
}

.ms-draw-cinematic--draw-dream .ms-draw-veil {
  background: #05030c;
  opacity: 1;
  clip-path: circle(0% at 50% 46%);
  transition: none;
}

.ms-draw-cinematic--draw-dream.ms-draw-cinematic--play .ms-draw-veil {
  animation: ms-draw-dream-eye 1.65s ease-in-out forwards;
}

@keyframes ms-draw-dream-eye {
  0% { clip-path: circle(0% at 50% 46%); }
  28% { clip-path: circle(150% at 50% 46%); }
  62% { clip-path: circle(150% at 50% 46%); }
  100% { clip-path: circle(0% at 50% 46%); }
}

@keyframes choice-sheet-in {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

html[data-touch="true"] #utility-modal:not(.hidden) .utility-backdrop {
  background: rgba(4, 2, 14, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html[data-touch="true"] #utility-modal.ms-choice-modal:not(.hidden),
html[data-touch="true"] #utility-modal:has(.card-choice-modal-wrap):not(.hidden) {
  align-items: end;
  justify-items: center;
}

html[data-touch="true"] #utility-modal.ms-choice-modal .utility-content.ms-choice-modal-wrap,
html[data-touch="true"] #utility-modal:has(.card-choice-modal-wrap) .utility-content.card-choice-modal-wrap {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: min(92dvh, 100%);
  margin: 0;
  border-radius: 1.35rem 1.35rem 0 0;
  background: rgba(8, 6, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: auto;
  animation: choice-sheet-in 0.46s cubic-bezier(0.22, 1.12, 0.32, 1) both;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-touch="true"] .ms-choice-fullscreen {
  min-height: 0;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dream-dust { display: none; }
  .hand-stats-suits .stat.stat-need,
  .hud-pill.stat-need { animation: none; }
  .ms-draw-cinematic--draw-dream .ms-draw-veil { animation: none; clip-path: none; opacity: 0.35; }
  html[data-touch="true"] #utility-modal.ms-choice-modal .utility-content.ms-choice-modal-wrap,
  html[data-touch="true"] #utility-modal:has(.card-choice-modal-wrap) .utility-content.card-choice-modal-wrap {
    animation: none;
  }
}

/* 41.0 — Archetype row: three Dreams to chase. */
.archetype-row-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.archetype-row-lead {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted, #b9b2d0);
}

.archetype-row-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 14, 36, 0.8);
  color: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.archetype-row-chip.is-focused {
  border-color: var(--gold, #e7c46a);
  box-shadow: 0 0 0 1px var(--gold, #e7c46a);
}

.archetype-row-chip.is-ready {
  background: rgba(60, 120, 70, 0.45);
  border-color: #8fe0a0;
}

.archetype-row-points {
  opacity: 0.75;
}

.archetype-row-met {
  font-weight: 700;
}