/* ==========================================================================
   Ainmos 0.22 Polish Pass. Loaded last, so these rules settle the older
   layered overrides in ainmos.css and ainmos-layout.css.
   1. Psyche cards are poker cards: 5:7, a tight corner, an opaque printed
      face, a corner index, and a clean numeral (no traced outline).
   2. The First Night guide.
   3. Desktop table: info when you need it, a clear board when you don't.
   4. Tablet and phone: the hand drawer, small notices.
   ========================================================================== */

/* ---- 1. Psyche cards: poker cards ------------------------------------------------------------- */

html body.ainmos .game-card.psyche-card {
  --pc-face: linear-gradient(160deg, #6a6f8c 0%, #3c4060 55%, #1d2036 100%);
  --pc-ink: #fff;
  container-type: inline-size;
  aspect-ratio: 5 / 7;
  border: none !important;
  border-radius: 7px !important;
  background: var(--pc-face) !important;
  color: var(--pc-ink);
  opacity: 1;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 14px rgba(4, 2, 14, 0.5) !important;
}
html body.ainmos .game-card.psyche-card.lucidity { --pc-face: linear-gradient(160deg, #5f9dff 0%, #2f5fcc 52%, #182f70 100%); }
html body.ainmos .game-card.psyche-card.elasticity { --pc-face: linear-gradient(160deg, #ffd666 0%, #d89c1e 52%, #6d4a09 100%); }
html body.ainmos .game-card.psyche-card.willpower { --pc-face: linear-gradient(160deg, #ff7f72 0%, #d4383c 52%, #69151a 100%); }
html body.ainmos .game-card.psyche-card.wild {
  --pc-face:
    radial-gradient(circle at 50% 46%, rgba(20, 12, 40, 0.5), rgba(20, 12, 40, 0.12) 62%),
    conic-gradient(from 210deg, #ff6b9d, #f5d77a, #5bd6a8, #5b9bff, #c9a0ff, #ff6b9d);
}
html body.ainmos .game-card.psyche-card.psyche-power { --pc-face: linear-gradient(160deg, #ffe39a 0%, #d9a63a 52%, #6e4c0e 100%); --pc-ink: #fffaf0; }

/* The printed inner frame of a real card. */
html body.ainmos .game-card.psyche-card::before {
  content: "";
  position: absolute;
  inset: 5cqw;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  pointer-events: none;
}

/* Corner index: the value over a small suit mark, readable on a fanned card. */
html body.ainmos .game-card.psyche-card .psyche-corner {
  position: absolute;
  top: 7cqw;
  left: 8cqw;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  min-width: 18cqw;
  line-height: 1;
  pointer-events: none;
}
html body.ainmos .game-card.psyche-card .psyche-corner-value {
  font: 700 25cqw/0.86 var(--font-display, serif);
  color: var(--pc-ink);
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 0 rgba(10, 6, 24, 0.55), 0 2px 6px rgba(10, 6, 24, 0.45);
}
html body.ainmos .game-card.psyche-card .psyche-corner-suit {
  display: flex;
  font: 700 11cqw/1 var(--font-display, serif);
  color: var(--pc-ink);
  filter: drop-shadow(0 1px 1px rgba(10, 6, 24, 0.6));
}
html body.ainmos .game-card.psyche-card .psyche-corner-suit svg { width: 13cqw; height: 13cqw; }
html body.ainmos .game-card.psyche-card .psyche-corner .suit-icon { color: var(--pc-ink) !important; }

/* Centre: one big clean numeral over its suit sigil. */
html body.ainmos .game-card.psyche-card .psyche-pip {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3;
  display: grid !important;
  place-content: center;
  justify-items: center;
  gap: 3cqw;
  padding: 6cqw 0 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body.ainmos .game-card.psyche-card .psyche-value {
  font: 700 46cqw/0.88 var(--font-display, serif) !important;
  color: var(--pc-ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 0 rgba(10, 6, 24, 0.4), 0 0 16px rgba(255, 255, 255, 0.25) !important;
}
html body.ainmos .game-card.psyche-card .psyche-suit,
html body.ainmos .game-card.psyche-card .psyche-suit .suit-icon {
  display: flex;
  color: var(--pc-ink) !important;
  filter: drop-shadow(0 1px 2px rgba(10, 6, 24, 0.55));
}
html body.ainmos .game-card.psyche-card .psyche-suit svg { width: 22cqw !important; height: 22cqw !important; }
html body.ainmos .game-card.psyche-card.wild .psyche-suit { font-size: 20cqw; line-height: 1; background: none; -webkit-text-fill-color: #fff; }
html body.ainmos .game-card.psyche-card.psyche-power .psyche-suit { font: 700 14cqw/1 var(--font-display, serif); }

/* The suit name, small along the foot, inside the frame. */
html body.ainmos .game-card.psyche-card .psyche-label {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 8cqw !important;
  z-index: 3;
  margin: 0;
  text-align: center;
  font: 700 8cqw/1 var(--font-display, serif) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(10, 6, 24, 0.6);
}
html body.ainmos .game-card.psyche-card.has-upgrade .psyche-label { opacity: 0 !important; }
html body.ainmos .game-card.psyche-card .psyche-holo { mix-blend-mode: soft-light; }

/* States: chosen cards glow white; cards that can't be used step back but stay readable. */
html body.ainmos .game-card.psyche-card.selected {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 2px #fff,
    0 0 22px rgba(255, 255, 255, 0.55),
    0 10px 20px rgba(4, 2, 14, 0.55) !important;
}
html body.ainmos .game-card.psyche-card.phase-suggested:not(.selected) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 1.5px rgba(245, 215, 122, 0.85),
    0 0 16px rgba(245, 215, 122, 0.4),
    0 6px 14px rgba(4, 2, 14, 0.5) !important;
}
html body.ainmos .phase-opener-solo-hand .game-card.psyche-card.opener-usable:not(.selected) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 0 18px rgba(255, 255, 255, 0.22),
    0 6px 14px rgba(4, 2, 14, 0.5) !important;
}
html body.ainmos .phase-opener-solo-hand .game-card.psyche-card.opener-unusable { opacity: 0.55 !important; filter: saturate(0.4) brightness(0.8) !important; }
html body.ainmos .game-card.psyche-card:disabled { opacity: 0.6; }

/* The desktop hand: slightly larger poker cards, a tighter fan. */
html:root body.ainmos.play-window {
  --ain-card-h: clamp(118px, 17.5vh, 196px);
  --ain-fan-h: calc(var(--ain-card-h) + 0.9rem);
}
html[data-form="tablet"]:root body.ainmos.play-window {
  --ain-card-h: clamp(104px, 16.5vh, 164px);
  --ain-fan-h: calc(var(--ain-card-h) + 0.9rem);
}
html[data-form="phone"]:root body.ainmos.play-window { --ain-fan-h: 0px; }

/* ---- 2. The First Night guide ----------------------------------------------------------------- */

:root { --guide-w: clamp(280px, 18.5vw, 360px); }
.coach-hint {
  position: fixed;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 12100;
  width: var(--guide-w);
  max-width: calc(100vw - 1rem);
  pointer-events: none;
}
.coach-hint[hidden] { display: none; }
.coach-hint.is-docked { left: 16px; top: 50%; transform: translateY(-50%); }
.coach-hint.is-corner { bottom: calc(var(--ain-bar-h, 100px) + 14px); }
.coach-hint.is-rail { width: auto; }
.coach-hint.is-min { width: auto; }
.coach-hint.is-min.is-docked { top: auto; bottom: 16px; transform: none; }
.coach-hint.is-min.is-rail, .coach-hint.is-min.is-corner { top: auto; bottom: calc(var(--ain-bar-h, 100px) + 14px); }

html body.ainmos .coach-card {
  display: block;
  padding: 0.65rem 0.8rem 0.6rem;
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(44, 34, 84, 0.96), rgba(20, 15, 40, 0.97));
  box-shadow: 0 14px 34px rgba(4, 2, 14, 0.6), 0 0 26px rgba(200, 184, 236, 0.16);
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body.ainmos .coach-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(200, 184, 236, 0.18);
}
html body.ainmos .coach-head .coach-spark { font-size: 0.95rem; line-height: 1; }
html body.ainmos .coach-goal {
  flex: 1 1 auto;
  font: 600 clamp(0.68rem, 0.6rem + 0.15vw, 0.8rem)/1.2 var(--font-display, serif);
  letter-spacing: 0.06em;
  color: #f5d77a;
}
html body.ainmos .coach-min {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgba(200, 184, 236, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--dc-ink, #f2ecff);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
html body.ainmos .coach-min:hover { background: rgba(200, 184, 236, 0.15); }
html body.ainmos .coach-title {
  margin: 0;
  font: 700 clamp(0.95rem, 0.8rem + 0.25vw, 1.15rem)/1.2 var(--font-display, serif);
  letter-spacing: 0.04em;
  text-transform: none;
  color: #fff;
}
html body.ainmos .coach-text {
  margin: 0.25rem 0 0;
  font: 400 clamp(0.88rem, 0.76rem + 0.22vw, 1.05rem)/1.42 var(--font-body, "Source Sans 3", system-ui, sans-serif);
  color: #ece6fb;
}
html body.ainmos .coach-why {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.55rem;
  border-left: 2px solid rgba(182, 230, 214, 0.7);
  border-radius: 0 8px 8px 0;
  background: rgba(182, 230, 214, 0.08);
  font: italic 400 clamp(0.8rem, 0.7rem + 0.2vw, 0.96rem)/1.4 var(--font-body, "Source Sans 3", system-ui, sans-serif);
  color: #d6efe7;
}
html body.ainmos .coach-actions { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.5rem; }
html body.ainmos .coach-btn { font-size: 0.66rem; padding: 0.28rem 0.8rem; }
html body.ainmos .coach-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 18rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(245, 215, 122, 0.55);
  border-radius: 999px;
  background: rgba(30, 22, 58, 0.94);
  box-shadow: 0 8px 20px rgba(4, 2, 14, 0.5), 0 0 16px rgba(245, 215, 122, 0.22);
  color: #fff;
  font: 600 0.78rem/1.1 var(--font-display, serif);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: pointer;
  animation: guide-pill-in 0.35s ease both;
}
html body.ainmos .coach-pill span:last-child { overflow: hidden; text-overflow: ellipsis; }
@keyframes guide-pill-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Menus slide over to make room for the docked guide on wide screens. */
body.guide-docked .lost-found { padding-left: calc(var(--guide-w) + 2rem); }
body.guide-docked .utility-content.phase-opener-modal-wrap #utility-modal-body { padding-left: calc(var(--guide-w) + 2rem) !important; }

/* The control the guide is talking about breathes gold. */
.guide-target {
  outline: 2px solid rgba(245, 215, 122, 0.95) !important;
  outline-offset: 3px;
  animation: guide-target-pulse 1.6s ease-in-out infinite;
}
@keyframes guide-target-pulse {
  0%, 100% { outline-color: rgba(245, 215, 122, 0.95); outline-offset: 3px; }
  50% { outline-color: rgba(245, 215, 122, 0.35); outline-offset: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-target, html body.ainmos .coach-pill { animation: none; }
}

/* Phones and small tablets: a pill above the hand strip; tap it to read. */
.coach-hint.is-compact {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--ain-bar-h, 90px) + var(--ain-fan-h, 0px) + 0.5rem);
  width: min(24rem, calc(100vw - 1rem));
  display: flex;
  justify-content: center;
}
.coach-hint.is-compact.is-min { width: auto; }
html body.ainmos .coach-hint.is-compact .coach-card { max-height: 42vh; padding: 0.5rem 0.65rem; }
html body.ainmos .coach-hint.is-compact .coach-text { font-size: 0.82rem; }
html body.ainmos .coach-hint.is-compact .coach-why { font-size: 0.76rem; }
.coach-hint.is-compact.is-top { top: max(0.4rem, env(safe-area-inset-top)); bottom: auto; }
body.guide-docked.ainmos .lost-found .lf-window { width: calc((98vw - var(--guide-w) - 2.5rem) / var(--menu-zoom, 1)); }

/* ---- 3. Desktop polish -------------------------------------------------------------------------- */

/* The opener's preview: no stray dash before a card is picked. */
body.ainmos .phase-opener-preview-num.is-empty { display: none; }
.coach-hint.is-docked.is-low { top: auto; bottom: 16px; transform: none; }

/* Notices: small, sentence-case whispers with a gold edge, not shouting banners. */
html body.ainmos .moment-toast {
  max-width: min(100%, 30rem);
  padding: 0.38rem 0.75rem 0.4rem 0.85rem;
  text-align: left;
  font: 500 0.84rem/1.35 "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #f3ecd8;
  background: linear-gradient(90deg, rgba(36, 26, 66, 0.94), rgba(16, 12, 32, 0.92));
  border: none;
  border-left: 3px solid rgba(245, 215, 122, 0.85);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
html body.ainmos .moment-toast.moment-toast-boss { border-left-color: #ff8a7a; }
html body.ainmos .moment-toast.moment-toast-victory { border-left-color: #b6e6d6; }
html body.ainmos .moment-overlay-stack { align-items: flex-end; gap: 0.3rem; }
html body.ainmos #table-action-cue.table-action-cue {
  max-width: 30rem;
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border-radius: 8px;
  font-size: 0.74rem;
  line-height: 1.3;
  text-align: right;
  color: #d8d2ee;
  background: rgba(10, 8, 22, 0.6);
  border: none;
}

/* The bottom bar: slimmer, and Power Tokens laid out in two tidy rows. */
html:not([data-form="phone"]):root body.ainmos.play-window { --ain-bar-h: clamp(70px, 8.6vh, 94px); }
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game.active .hand-bar.hand-bar.hand-bar {
  grid-template-columns: clamp(180px, 14vw, 250px) minmax(0, 1.6fr) minmax(0, 1fr);
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head head" "chips acts";
  column-gap: 0.45rem;
  row-gap: 0.2rem;
  align-items: center;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .hand-header {
  grid-area: head;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-token-stats {
  display: flex;
  gap: 0.35rem;
  font-size: 0.62rem;
  opacity: 0.8;
  white-space: nowrap;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section #power-tokens {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-content: center;
  max-width: 7.5rem;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-token-chip {
  width: 1.65rem;
  height: 1.65rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-size: 0.8rem;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section #power-token-actions {
  grid-area: acts;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-bonus-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-bonus-btn {
  min-height: 1.45rem;
  padding: 0.1rem 0.5rem;
  font-size: 0.66rem;
  white-space: nowrap;
}
/* Empty keep slots read as a quiet hint, not a heading. */
html:root body.ainmos.play-window #screen-game .hand-bar :is(#objects-hand, .objects-row, .persistent-row).empty,
html:root body.ainmos.play-window #screen-game .hand-bar .empty {
  font-size: 0.74rem;
  font-style: italic;
  opacity: 0.6;
}
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-token-pool { display: none; }

/* ---- 4. Phones: a slim strip, the hand in a drawer, small notices ------------------------------- */

html[data-form="phone"]:root body.ainmos.play-window { --ain-bar-h: clamp(46px, 13vh, 56px); --ain-fan-h: 0px; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game.active .hand-bar.hand-bar.hand-bar {
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "power handbtn objects persistent";
  column-gap: 0.35rem;
  align-items: stretch;
}
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section {
  flex-direction: row;
  gap: 0.25rem;
  padding: 0.15rem 0.3rem;
}
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-token-chip { width: 1.5rem; height: 1.5rem; min-height: 0; font-size: 0.7rem; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-bonus-row { display: flex; flex-direction: row; gap: 0.2rem; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .power-section .power-bonus-btn { min-height: 1.7rem; font-size: 0.6rem; padding: 0 0.35rem; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar > :is(.objects-hand-section, .persistent-section) .keep-header { display: none; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar .empty { font-size: 0.6rem; }

/* The Hand button. */
.hand-drawer-btn { display: none; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .hand-drawer-btn {
  grid-area: handbtn;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: center;
  height: calc(var(--ain-bar-h) - 0.5rem);
  padding: 0 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(91, 76, 160, 0.95), rgba(40, 30, 80, 0.95));
  color: #fff;
  font: 700 0.72rem/1 var(--font-display, serif);
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(4, 2, 14, 0.45);
  cursor: pointer;
  touch-action: manipulation;
}
.hand-drawer-btn .hd-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  color: #1a1530;
  font-size: 0.7rem;
}
.hand-drawer-btn .hd-suits { display: inline-flex; gap: 0.25rem; }
.hand-drawer-btn .hd-suit { display: inline-flex; align-items: center; gap: 0.12rem; font: 600 0.66rem/1 "Source Sans 3", system-ui, sans-serif; }
.hand-drawer-btn .hd-suit::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dot); }
.hand-drawer-btn .hd-picked { font: 600 0.62rem/1 "Source Sans 3", system-ui, sans-serif; color: #f5d77a; }
.hand-drawer-btn.is-wanted { animation: hd-wanted 1.4s ease-in-out infinite; }
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar > .hand-drawer-btn { background: linear-gradient(160deg, #f5d77a, #d9a63a); color: #1a1530; }
@keyframes hd-wanted { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 215, 122, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(245, 215, 122, 0); } }

/* The drawer. */
.hand-drawer-close { display: none; }
html[data-form="phone"]:root body.ainmos.play-window:not(.hand-drawer-open) #screen-game .hand-bar.hand-bar.hand-bar > .psyche-hand-section { display: none !important; }
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar > .psyche-hand-section {
  position: fixed !important;
  left: max(0.4rem, env(safe-area-inset-left));
  right: max(0.4rem, env(safe-area-inset-right));
  bottom: calc(var(--ain-bar-h) + 0.2rem);
  top: auto;
  transform: none;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  padding: 0.35rem 0.5rem 0.4rem;
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(40, 30, 80, 0.97), rgba(16, 12, 34, 0.97)) !important;
  box-shadow: 0 -8px 26px rgba(4, 2, 14, 0.6), inset 0 0 0 1px rgba(200, 184, 236, 0.25) !important;
  pointer-events: auto;
  z-index: 80;
  animation: hd-up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes hd-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar #hand,
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar #hand-primary {
  height: clamp(110px, 40vh, 190px) !important;
  max-height: none !important;
  pointer-events: auto;
}
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar #hand-primary {
  display: flex;
  justify-content: center;
  align-items: center !important;
  gap: 0.3rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.5rem 0.3rem 0.2rem !important;
}
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar #hand-primary .game-card {
  height: calc(clamp(110px, 40vh, 190px) - 1.4rem) !important;
  width: auto !important;
  aspect-ratio: 5 / 7;
  margin-left: 0 !important;
  flex: 0 0 auto;
  transform: none !important;
}
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar #hand-primary .game-card.selected {
  transform: translateY(-8px) !important;
}
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open #screen-game .hand-bar.hand-bar.hand-bar > .psyche-hand-section .hand-header { display: none; }
html[data-form="phone"]:root body.ainmos.play-window.hand-drawer-open .hand-drawer-close {
  display: block;
  position: absolute;
  top: -0.9rem;
  right: 0.6rem;
  padding: 0.25rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: #2a2050;
  color: #fff;
  font: 700 0.66rem/1 var(--font-display, serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
}

/* Phone notices: one small line at a time. */
html[data-form="phone"] body.ainmos .moment-toast {
  max-width: min(70vw, 22rem);
  padding: 0.22rem 0.5rem 0.24rem 0.55rem;
  font-size: 0.68rem;
  line-height: 1.25;
  border-left-width: 2px;
  border-radius: 6px;
}
html[data-form="phone"] body.ainmos .moment-overlay-stack .moment-toast:nth-child(n+2) { display: none; }
html[data-form="phone"] body.ainmos #table-action-cue.table-action-cue { display: none !important; }
html[data-form="tablet"] body.ainmos .moment-toast { font-size: 0.76rem; max-width: 24rem; }
html[data-form="tablet"] body.ainmos .moment-overlay-stack .moment-toast:nth-child(n+3) { display: none; }
/* Compact guide: title and one instruction; the rule waits behind "Why?". */
html body.ainmos .coach-hint.is-compact .coach-head { margin-bottom: 0.2rem; padding-bottom: 0.2rem; }
html body.ainmos .coach-hint.is-compact .coach-title { font-size: 0.82rem; }
html body.ainmos .coach-hint.is-compact .coach-actions { margin-top: 0.25rem; }
html body.ainmos .coach-hint.is-compact .coach-actions .coach-btn { padding: 0.18rem 0.6rem; font-size: 0.58rem; }
html body.ainmos .coach-why-fold { margin-top: 0.25rem; }
html body.ainmos .coach-why-fold summary { cursor: pointer; font: 600 0.7rem/1.2 var(--font-display, serif); color: #b6e6d6; letter-spacing: 0.05em; }
html body.ainmos .coach-why-fold .coach-why { margin-top: 0.25rem; }
html body.ainmos .coach-hint.is-compact .coach-goal { font-size: 0.6rem; }
.coach-hint.is-compact { width: min(30rem, calc(100vw - 1rem)); }
/* Phones: the phase pill over the board is a small tag, not a banner. */
html[data-form="phone"] body.ainmos #turn-plaque.turn-plaque { scale: 0.68; transform-origin: 50% 0; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .hand-drawer-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: calc(var(--ain-bar-h) - 0.5rem) !important;
  aspect-ratio: auto !important;
  border-radius: 999px !important;
  position: relative;
  inset: auto;
  transform: none;
  margin: 0;
}
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section { overflow: hidden; align-items: center; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section #power-tokens { display: flex; gap: 2px; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  min-height: 0;
  padding: 0 0.35rem !important;
}
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section #power-tokens { order: 1; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section #power-token-actions { order: 2; }
html[data-form="phone"]:root body.ainmos.play-window #screen-game .hand-bar.hand-bar.hand-bar > .power-section .power-token-chip { flex: 0 0 1.55rem; width: 1.55rem !important; height: 1.55rem !important; border-radius: 50% !important; padding: 0 !important; }

/* Docked guide on mid-size screens: menus step down one zoom notch so nothing clips. */
@media (min-height: 560px) and (min-width: 900px) { html:root body.ainmos.guide-docked { --menu-zoom: 1; } }
@media (min-height: 720px) and (min-width: 1200px) { html:root body.ainmos.guide-docked { --menu-zoom: 1.3; } }
@media (min-height: 900px) and (min-width: 1500px) { html:root body.ainmos.guide-docked { --menu-zoom: 1.6; } }
@media (min-height: 1200px) and (min-width: 2000px) { html:root body.ainmos.guide-docked { --menu-zoom: 2.1; } }

/* ---- Title screen ---------------------------------------------------------------------------- */

/* Dreamer cards: art across the top, the name and stats beneath it, never on top of the face. */
body.ainmos #screen-setup .dreamer-live-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 10px !important;
}
body.ainmos #screen-setup .dreamer-live-card > .art {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 0 !important;
}
body.ainmos #screen-setup .dreamer-live-card > .art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 22%;
}
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-face {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem 0.4rem 0.4rem !important;
  background: linear-gradient(180deg, rgba(24, 18, 46, 0.96), rgba(12, 9, 26, 0.98)) !important;
  text-align: left;
}
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-name {
  font-size: clamp(0.6rem, 0.72vw, 0.86rem) !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-stats { font-size: clamp(0.55rem, 0.62vw, 0.74rem) !important; gap: 0.3rem; }
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-power span {
  display: block;
  font-size: clamp(0.48rem, 0.52vw, 0.62rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The difficulty select shows its whole label. */
body.ainmos #screen-setup select { font-size: clamp(0.78rem, 0.9vw, 1rem) !important; text-overflow: ellipsis; }
/* Begin Dreaming stays on one line. */
body.ainmos #screen-setup #btn-start { white-space: nowrap; font-size: clamp(1rem, 1.5vw, 1.6rem); }
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-name { font-size: clamp(0.56rem, 0.64vw, 0.8rem) !important; letter-spacing: 0.02em; }
body.ainmos #screen-setup .dreamer-live-card .dreamer-live-power span { letter-spacing: 0.02em !important; font-size: clamp(0.46rem, 0.48vw, 0.58rem) !important; }

/* The floating Vault panel: its name fits. */
html:root body.ainmos.play-window #dreamscape-vault .vault-titlebar .vault-dots { display: none; }
html:root body.ainmos.play-window #dreamscape-vault .vault-title { white-space: nowrap; overflow: visible; text-overflow: clip; }
/* Desktop hand: the cards speak for themselves; the label steps out of their way, and the fan never dips into the bar. */
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar > .psyche-hand-section .hand-header { display: none; }
html:not([data-form="phone"]):root body.ainmos.play-window #screen-game .hand-bar.hand-bar #hand-primary { padding-bottom: 0.5rem !important; }
html:root body.ainmos.play-window #dreamscape-vault .vault-titlebar { gap: 0.3rem; }
html:root body.ainmos.play-window #dreamscape-vault .vault-title { flex: 1 1 auto; min-width: 0; font-size: 0.82em; }
html:root body.ainmos.play-window #dreamscape-vault .vault-deck { flex: 0 0 auto; }
html:root body.ainmos.play-window #dreamscape-vault .vault-title { overflow: hidden; text-overflow: clip; letter-spacing: 0.06em; }
html:is([data-form="tablet"], [data-form="phone"]):root body.ainmos.play-window #dreamscape-vault .vault-title { font-size: 0.68em; }

/* 0.24: the Vault card names the Landscape's second action quietly. */
body.ainmos .vs-item .vs-call { display: block; margin-top: 0.2rem; font-size: 0.85em; opacity: 0.72; font-style: italic; }
/* The turn plaque carries its Glimmer line. */
body.ainmos .turn-plaque .turn-plaque-phase { font-size: 0.68rem; font-weight: 700; opacity: 0.85; white-space: nowrap; }
body.ainmos .turn-plaque { max-width: min(46vw, 20rem); }

/* ======================================================================
   0.25 Endless Dreams
   ====================================================================== */

/* ---- Win / loss screen: one wide sheet, no scroll on desktop or tablet ---- */
html:root body.ainmos.play-window #screen-end.active {
  align-items: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(0.4rem, 1.6vh, 1.1rem) clamp(0.5rem, 2vw, 1.5rem);
}
html:root body.ainmos #screen-end .end-panel {
  width: min(84rem, 100%);
  max-width: none;
  margin: auto;
  padding: clamp(0.7rem, 1.8vh, 1.3rem) clamp(0.9rem, 2vw, 1.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr);
  grid-template-areas:
    "title   title"
    "message message"
    "gameid  gameid"
    "summary board"
    "summary actions";
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: 0.35rem;
  text-align: left;
}
html:root body.ainmos #screen-end #end-title { grid-area: title; margin: 0; text-align: center; font-size: clamp(1.4rem, 3.4vh, 2.1rem); }
html:root body.ainmos #screen-end #end-message { grid-area: message; margin: 0; text-align: center; font-size: clamp(0.82rem, 1.7vh, 0.98rem); }
html:root body.ainmos #screen-end #end-game-id-row { grid-area: gameid; justify-content: center; margin: 0; }
html:root body.ainmos #screen-end #end-game-id-row .end-game-id-hint { margin: 0; }
html:root body.ainmos #screen-end #end-score-breakdown { grid-area: summary; margin: 0.25rem 0 0; min-width: 0; }
html:root body.ainmos #screen-end #end-leaderboard { grid-area: board; margin: 0.25rem 0 0; min-width: 0; }
html:root body.ainmos #screen-end #end-leaderboard h3 { margin: 0 0 0.2rem; }
html:root body.ainmos #screen-end .end-leaderboard-hint { margin: 0; font-size: 0.8rem; }
html:root body.ainmos #screen-end .end-name-row { margin: 0.4rem 0; }
html:root body.ainmos #screen-end .end-score-list { max-height: clamp(5rem, 22vh, 12rem); margin-top: 0.3rem; }
html:root body.ainmos #screen-end .end-actions { grid-area: actions; margin: 0.4rem 0 0; align-self: end; justify-content: flex-end; }
/* No leaderboard (tutorial): the summary and the buttons share the width. */
html:root body.ainmos #screen-end .end-panel:has(#end-leaderboard.hidden) {
  grid-template-areas:
    "title   title"
    "message message"
    "gameid  gameid"
    "summary actions";
}
html:root body.ainmos #screen-end .run-summary { gap: 0.5rem; }
html:root body.ainmos #screen-end .rs-ladder { padding: 0.35rem; gap: 0.4rem; }
html:root body.ainmos #screen-end .rs-boss { width: clamp(2.1rem, 4.6vh, 3rem); height: clamp(2.7rem, 5.8vh, 3.8rem); }
html:root body.ainmos #screen-end .rs-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
html:root body.ainmos #screen-end .rs-col h4 { margin: 0.3rem 0 0.15rem; }
html:root body.ainmos #screen-end .rs-grid { gap: 0.3rem; }
html:root body.ainmos #screen-end .rs-stat { padding: 0.25rem 0.5rem; }
html:root body.ainmos #screen-end .rs-total { margin: 0; font-size: clamp(1rem, 2.4vh, 1.3rem); }
html:root body.ainmos #screen-end .rs-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.1rem 1rem;
  padding-left: 1rem;
  font-size: 0.82rem;
}
/* Short screens (landscape tablets, small laptops): tighten further. */
@media (max-height: 760px) and (min-width: 701px) {
  html:root body.ainmos #screen-end .rs-best-cards .rs-card { width: 2.1rem; height: 2.7rem; }
  html:root body.ainmos #screen-end .end-game-id-hint { display: none; }
  html:root body.ainmos #screen-end .rs-headline { font-size: 0.92rem; }
}
html:root body.ainmos #screen-end #end-game-id-row { justify-self: center; }
/* Landscape phones: the buttons sit up top beside the title; the rest scrolls if it must. */
@media (max-height: 520px) and (min-width: 701px) {
  html:root body.ainmos #screen-end .end-panel {
    grid-template-areas:
      "title   actions"
      "message actions"
      "summary board"
      "gameid  board";
    grid-template-rows: auto auto auto auto;
    row-gap: 0.25rem;
  }
  html:root body.ainmos #screen-end .end-panel:has(#end-leaderboard.hidden) {
    grid-template-areas: "title actions" "message actions" "summary summary" "gameid gameid";
  }
  html:root body.ainmos #screen-end #end-title { text-align: left; font-size: 1.25rem; }
  html:root body.ainmos #screen-end #end-message { text-align: left; font-size: 0.78rem; }
  html:root body.ainmos #screen-end .end-actions { align-self: start; margin: 0; gap: 0.3rem; }
  html:root body.ainmos #screen-end .end-actions .btn { padding: 0.3rem 0.7rem; min-height: 0; font-size: 0.78rem; }
  html:root body.ainmos #screen-end .end-game-id-hint { display: none; }
  html:root body.ainmos #screen-end .rs-ladder { display: none; }
}
/* Phones and narrow tablets: one column; the screen scrolls if it must. */
@media (max-width: 700px) {
  html:root body.ainmos #screen-end .end-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "message" "gameid" "actions" "summary" "board";
    grid-template-rows: none;
  }
  html:root body.ainmos #screen-end .end-panel:has(#end-leaderboard.hidden) {
    grid-template-areas: "title" "message" "gameid" "actions" "summary";
  }
  html:root body.ainmos #screen-end .end-actions { justify-content: center; }
  html:root body.ainmos #screen-end .rs-columns { grid-template-columns: minmax(0, 1fr); }
}
html:root body.ainmos #screen-end .endless-btn {
  background: linear-gradient(120deg, #3a1450, #7a1d3a 55%, #1b2d6b);
  border-color: rgba(255, 120, 170, 0.7);
  color: #ffe9f3;
  box-shadow: 0 0 18px rgba(255, 70, 140, 0.35);
}
html:root body.ainmos #screen-end .endless-btn:hover { box-shadow: 0 0 26px rgba(255, 90, 160, 0.55); }

/* ---- The last Cycle: the dream brightens toward morning ---- */
.deck-pressure-banner.tier-final {
  color: #fff7e0;
  background: linear-gradient(90deg, rgba(120, 86, 40, 0.88), rgba(214, 170, 96, 0.82), rgba(120, 86, 40, 0.88));
  border-bottom: 1px solid rgba(255, 236, 180, 0.7);
  text-shadow: 0 0 12px rgba(255, 240, 200, 0.8);
  box-shadow: 0 0 28px rgba(255, 226, 160, 0.35);
  animation: final-cycle-banner 5.5s ease-in-out infinite;
}
@keyframes final-cycle-banner {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
body.final-cycle #screen-game .table-surface {
  animation:
    dream-breathe 10s ease-in-out infinite,
    final-cycle-sway 7s ease-in-out infinite;
}
body.final-cycle #screen-game .table-surface::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 25;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 244, 214, 0.2), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 214, 150, 0.14), transparent 60%);
  mix-blend-mode: screen;
  animation: final-cycle-dawn 6s ease-in-out infinite;
}
body.final-cycle #hex-board {
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 14px rgba(255, 236, 190, 0.32));
}
body.final-cycle #screen-game .card,
body.final-cycle #hud {
  filter: brightness(1.06) drop-shadow(0 0 6px rgba(255, 238, 200, 0.28));
}
@keyframes final-cycle-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(3px, -2px, 0) rotate(0.08deg); }
  55% { transform: translate3d(-3px, 2px, 0) rotate(-0.07deg); }
  80% { transform: translate3d(2px, 3px, 0) rotate(0.05deg); }
}
@keyframes final-cycle-dawn {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.final-cycle #screen-game .table-surface,
  body.final-cycle #screen-game .table-surface::after,
  .deck-pressure-banner.tier-final { animation: none; }
}

/* ---- Archetype Dream: who can be called ---- */
body.ainmos .ac-card.is-blocked { opacity: 0.62; filter: saturate(0.55); }
body.ainmos .ac-card.is-blocked .lf-continue { cursor: not-allowed; font-size: 0.78rem; white-space: normal; }
body.ainmos .ac-search {
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 200, 120, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 140, 0.4);
  text-align: center;
}
body.ainmos .ac-search p { margin: 0 0 0.45rem; font-size: 0.86rem; }

/* ---- Wards and grown Power on Dreambeasts ---- */
body.ainmos .beast-ward {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffe2e8;
  background: rgba(150, 30, 60, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 170, 0.45);
  white-space: nowrap;
}
body.ainmos .spread-form-chip.is-warded { background: rgba(150, 30, 60, 0.6); color: #ffe2e8; }

/* ---- Endless Mode ---- */
body.endless-mode .night-left.night-endless b { color: #ff8db5; text-shadow: 0 0 10px rgba(255, 90, 150, 0.7); }
.night-card.is-mega .night-face { filter: saturate(1.3) contrast(1.15); }
.night-card.is-mega .night-boss-rung { background: #2a0414; color: #ffb3cc; }
.night-card.mega-4 .night-face,
.night-card.mega-5 .night-face { animation: mega-flicker 2.2s steps(2, end) infinite; }
@keyframes mega-flicker {
  0%, 92%, 100% { transform: none; filter: saturate(1.3) contrast(1.15); }
  94% { transform: translateX(2px); filter: hue-rotate(80deg) saturate(2); }
  96% { transform: translateX(-2px); filter: invert(1); }
}
@media (prefers-reduced-motion: reduce) {
  .night-card.mega-4 .night-face,
  .night-card.mega-5 .night-face { animation: none; }
}

/* ---- The crash: glitch, then a blue screen of death ---- */
body.bsod-glitching #app { animation: bsod-shake 0.12s steps(2, end) infinite; filter: contrast(1.4) saturate(1.8); }
@keyframes bsod-shake {
  0% { transform: translate(0, 0) skewX(0deg); filter: hue-rotate(0deg) contrast(1.4); }
  25% { transform: translate(-6px, 2px) skewX(2deg); filter: hue-rotate(90deg) invert(0.15); }
  50% { transform: translate(5px, -3px) skewX(-3deg); filter: hue-rotate(200deg) contrast(2); }
  75% { transform: translate(-2px, 4px) skewX(1deg); filter: invert(0.85); }
  100% { transform: translate(3px, 0) skewX(0deg); filter: hue-rotate(320deg); }
}
.bsod {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: auto;
  font-family: "Lucida Console", Consolas, "Courier New", monospace;
}
.bsod-glitch { position: absolute; inset: 0; pointer-events: none; }
.bsod-glitch i {
  position: absolute;
  left: 0;
  right: 0;
  height: 9vh;
  background: linear-gradient(90deg, rgba(255, 0, 80, 0.55), rgba(0, 255, 230, 0.45), rgba(20, 40, 255, 0.6));
  mix-blend-mode: difference;
  animation: bsod-band 0.36s steps(3, end) infinite;
}
.bsod-glitch i:nth-child(1) { top: 8%; animation-delay: -0.05s; }
.bsod-glitch i:nth-child(2) { top: 27%; height: 4vh; animation-delay: -0.12s; }
.bsod-glitch i:nth-child(3) { top: 48%; height: 14vh; animation-delay: -0.2s; }
.bsod-glitch i:nth-child(4) { top: 70%; height: 3vh; animation-delay: -0.08s; }
.bsod-glitch i:nth-child(5) { top: 86%; height: 7vh; animation-delay: -0.27s; }
@keyframes bsod-band {
  0% { transform: translateX(-30%) scaleY(1); opacity: 0.9; }
  33% { transform: translateX(22%) scaleY(0.4); opacity: 0.4; }
  66% { transform: translateX(-8%) scaleY(1.6); opacity: 1; }
  100% { transform: translateX(35%) scaleY(0.7); opacity: 0.6; }
}
.bsod-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.2rem, 6vh, 4rem) clamp(1rem, 7vw, 6rem);
  background: #0a28a8;
  color: #fff;
  opacity: 0;
}
.bsod.is-blue .bsod-glitch { display: none; }
.bsod.is-blue .bsod-screen { opacity: 1; animation: bsod-on 0.18s steps(2, end); }
.bsod.is-leaving { opacity: 0; transition: opacity 0.4s ease; }
@keyframes bsod-on {
  0% { opacity: 0; filter: brightness(3); }
  60% { opacity: 1; filter: brightness(1.6); }
  100% { opacity: 1; filter: none; }
}
.bsod-face { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: clamp(3.5rem, 12vh, 8rem); line-height: 1; }
.bsod-head { margin: 0; max-width: 60rem; font-family: "Segoe UI", system-ui, sans-serif; font-size: clamp(1rem, 2.6vh, 1.5rem); line-height: 1.35; }
.bsod-code { margin: 0; font-size: clamp(0.72rem, 1.6vh, 0.9rem); opacity: 0.85; line-height: 1.5; }
.bsod-term {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: clamp(0.66rem, 1.5vh, 0.86rem);
  line-height: 1.4;
  color: #e8f0ff;
  text-shadow: 0 0 6px rgba(160, 200, 255, 0.55);
}
.bsod-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: "Segoe UI", system-ui, sans-serif; }
.bsod-progress { font-size: clamp(0.9rem, 2vh, 1.15rem); }
.bsod-wake {
  padding: 0.6rem 1.6rem;
  border: 2px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}
.bsod-wake:hover,
.bsod-wake:focus-visible { background: #fff; color: #0a28a8; outline: none; }
@media (prefers-reduced-motion: reduce) {
  body.bsod-glitching #app { animation: none; }
  .bsod-glitch i { animation: none; }
}

/* 0.26: the Vault's "spend 1 Lucidity for more" row, after opening on free Reveals. */
.vs-topup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 10px;
  font-style: italic;
  opacity: 0.92;
}
.vs-topup .vs-topup-btn {
  min-width: 52px;
  padding: 6px 14px;
  font-style: normal;
}

/* 0.26: links to the one-page How to Play. */
.menu-how-to-play { display: block; text-align: center; text-decoration: none; margin-top: 6px; }
.info-hub-onepager { margin: 0 0 8px; text-align: right; }
.info-hub-onepager a, .player-primer-more a { color: #f3d9a4; }

/* 0.26.2: your hand inside the Lost & Found, on one compact line. */
.lf-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; padding: 5px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(214, 200, 255, 0.18); }
.lf-hand-head { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.85rem; }
.lf-hand-sum { font-size: 0.78rem; opacity: 0.9; }
.lf-hand-sum.suit-lucidity, .lf-hand-card.suit-lucidity { color: var(--lucidity); }
.lf-hand-sum.suit-elasticity, .lf-hand-card.suit-elasticity { color: var(--elasticity); }
.lf-hand-sum.suit-willpower, .lf-hand-card.suit-willpower { color: var(--willpower); }
.lf-hand-sum.suit-wild, .lf-hand-card.suit-wild { color: #f3d9ff; }
.lf-hand-next { font-style: italic; font-size: 0.78rem; opacity: 0.75; }
.lf-hand-row { display: flex; flex-wrap: wrap; gap: 5px; }
.lf-hand-card { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 7px; border: 1.5px solid currentColor; background: rgba(0, 0, 0, 0.28); line-height: 1.2; }
.lf-hand-card b { font-size: 1rem; color: #fff; }
.lf-hand-card i { font-style: normal; font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; }
.lf-hand-empty { font-style: italic; opacity: 0.7; }

/* 0.27.1: the Destroyer of Dreams finale — an impossible fight, then the dice break out. */
.lf2 { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.lf2-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(40, 10, 60, 0.75), rgba(0, 0, 0, 0.92)); animation: lf2-fade 600ms ease-out both; }
.lf2-window { position: absolute; left: 50%; top: 50%; width: min(1100px, 92vw); transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: start; padding: 22px 26px; border-radius: 18px; background: linear-gradient(180deg, rgba(48, 30, 20, 0.92), rgba(24, 14, 10, 0.94)); border: 1.5px solid rgba(243, 217, 164, 0.45); box-shadow: 0 0 60px rgba(255, 60, 60, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.5); color: #f6efe3; font-family: var(--font-display, Georgia, serif); }
.lf2-name { margin: 0 0 4px; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.05rem; }
.lf2-right .lf2-name { color: #ff7b7b; text-shadow: 2px 0 rgba(0, 255, 255, 0.6), -2px 0 rgba(255, 0, 80, 0.6); }
.lf2-count { margin: 0 0 10px; text-align: center; font-size: 0.85rem; opacity: 0.85; }
.lf2-count b { font-size: 1.4rem; color: #f3d9a4; }
.lf2-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 140px; }
.lf2-mid { align-self: center; text-align: center; }
.lf2-vs { margin: 0; font-style: italic; opacity: 0.7; }
.lf2-score { margin: 6px 0 0; font-size: 1.5rem; color: #fff; min-width: 7ch; }
.lf2-die { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; font-size: 26px; line-height: 1; background: #f5f0ff; color: #1a1426; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: lf2-jitter 160ms steps(2) infinite; }
.lf2-die.lf2-right { background: #1d1726; color: #fff; border: 1px solid rgba(255, 120, 120, 0.6); }
.lf2-die.is-free { position: fixed; z-index: 9100; animation: none; }
.lf2-window.is-shaking { animation: lf2-shake 90ms linear infinite; }
.lf2-window.is-bursting { animation: lf2-burst 900ms ease-out forwards; }
.lf2-window.is-gone { opacity: 0; transition: opacity 400ms; }
.lf2-spill { position: fixed; inset: 0; z-index: 9100; overflow: visible; }
.lf2-tears { position: fixed; inset: 0; z-index: 9200; display: none; }
body.lf2-tearing .lf2-tears { display: block; }
.lf2-tears i { position: absolute; left: -5%; width: 110%; height: 7vh; background: rgba(20, 120, 255, 0.18); mix-blend-mode: screen; animation: lf2-tear 260ms steps(3) infinite; }
.lf2-tears i:nth-child(1) { top: 8%; } .lf2-tears i:nth-child(2) { top: 23%; animation-duration: 190ms; } .lf2-tears i:nth-child(3) { top: 41%; background: rgba(255, 0, 90, 0.2); }
.lf2-tears i:nth-child(4) { top: 57%; animation-duration: 310ms; } .lf2-tears i:nth-child(5) { top: 72%; background: rgba(0, 255, 200, 0.16); } .lf2-tears i:nth-child(6) { top: 88%; }
body.lf2-glitch #app, body.lf2-glitch .table-wrap, body.lf2-glitch main { animation: lf2-rgb 180ms steps(2) infinite; }
body.lf2-tearing #app, body.lf2-tearing main { animation: lf2-rgb 90ms steps(2) infinite, lf2-skew 140ms steps(3) infinite; filter: saturate(2.2) hue-rotate(40deg) contrast(1.4); }
@keyframes lf2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf2-jitter { 0% { transform: translate(0, 0) rotate(-6deg); } 100% { transform: translate(1px, -2px) rotate(7deg); } }
@keyframes lf2-shake { 0% { transform: translate(-50%, -50%); } 25% { transform: translate(calc(-50% + 6px), calc(-50% - 4px)) rotate(0.6deg); } 50% { transform: translate(calc(-50% - 7px), calc(-50% + 3px)); } 75% { transform: translate(calc(-50% + 3px), calc(-50% + 6px)) rotate(-0.8deg); } 100% { transform: translate(-50%, -50%); } }
@keyframes lf2-burst { 0% { transform: translate(-50%, -50%) scale(1); filter: none; } 30% { transform: translate(-50%, -50%) scale(1.08) skewX(-6deg); filter: hue-rotate(90deg) contrast(2); } 100% { transform: translate(-50%, -48%) scale(0.96) skewX(4deg); filter: hue-rotate(200deg) contrast(1.6) blur(1px); opacity: 0.55; } }
@keyframes lf2-rgb { 0% { filter: drop-shadow(3px 0 rgba(255, 0, 60, 0.8)) drop-shadow(-3px 0 rgba(0, 255, 255, 0.8)); } 100% { filter: drop-shadow(-4px 1px rgba(255, 0, 60, 0.8)) drop-shadow(4px -1px rgba(0, 255, 255, 0.8)); } }
@keyframes lf2-skew { 0% { transform: translateX(0) skewX(0); } 50% { transform: translateX(-12px) skewX(3deg); } 100% { transform: translateX(9px) skewX(-2deg); } }
@keyframes lf2-tear { 0% { transform: translateX(-30px); } 50% { transform: translateX(40px); } 100% { transform: translateX(-10px); } }

/* 0.27.1: the crash report's NaN high score. */
.bsod-score { margin: 14px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: Consolas, "Lucida Console", monospace; }
.bsod-score[hidden] { display: none; }
.bsod-score-head { width: 100%; margin: 0; letter-spacing: 0.06em; }
.bsod-score label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.bsod-score input { width: 12ch; padding: 4px 6px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); font: inherit; text-transform: uppercase; }
.bsod-score input[name="last"] { width: 3ch; }
.bsod-save { padding: 5px 14px; background: #fff; color: #0a5bd6; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.bsod-save:disabled { opacity: 0.55; cursor: default; }
.bsod-score-status { width: 100%; margin: 0; min-height: 1.2em; }
#bsod .bsod-score input { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; border-radius: 0 !important; color: #fff !important; box-shadow: none !important; height: auto; min-height: 0; }