/* ==========================================================================
   Bundled web font (IBM Plex Sans Thai, OFL) — a loopless humanist Thai face
   close to macOS "Sukhumvit Set". It sits *after* Sukhumvit Set in the font
   stacks below, so desktop/iOS (which have Sukhumvit Set) are unchanged, while
   devices without it (typically Android) get this consistent bundled face
   instead of a random system fallback. Served locally so it works over LAN.
   ========================================================================== */
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-thai-700-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-thai-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Mobile breakpoints — canonical values, read before adding a new one.

   760px  Phone tier for most modals/panels — side-by-side to single-column
          at this width (.decision-panel, .dream-picker-panel,
          .career-roll-panel, etc). Any component whose visibility or layout
          depends on "is this panel stacked yet" must use the SAME number as
          the panel's actual winning rule — see the warning below, because
          "the panel's number" is not always the first rule you find.
   560px  Small-phone refinement. Tightens spacing/type further once already
          stacked — never introduces new show/hide behavior on its own, just
          turns the same knobs a bit further.
   420px  Smallest/oldest phones. Same idea as 560px, one notch further.

   (max-height: 600px) is paired with the width breakpoint on a few panels to
   also catch landscape phones — wide enough to dodge the width check, but
   short enough that the two-column desktop layout doesn't fit vertically.

   .landing-event-panel is the cautionary exception, not the example to copy:
   it single-columns at max-width:1180px, gets put BACK to two columns by a
   later, higher-source-order "Final responsive contract" block from
   861-1180px, and only single-columns again at max-width:860px — so its real
   threshold is 860px, not 760px. .landing-finance-collapse-toggle was aligned
   to 760px against the panel's older (720px, then 760px) rule and broke
   again at 761-860px once the later 860px rule started winning — same bug,
   wider gap, twice. Lesson: before pairing a new rule with "the breakpoint"
   of an existing selector, grep EVERY rule touching that selector's layout
   property across the whole file (not just the first one you find) and
   determine which one actually wins by source order — a single remembered
   number is not reliable once more than one rule can touch the same
   selector/property, however far apart in the file they are.

   You'll also see 620/640/680/700/720/860/1100/1180px scattered through this
   file from earlier one-off tuning passes, most of them harmless. Don't pair
   a *new* show/hide or layout-structure rule with one of them without first
   checking it's the one that actually wins — reuse 760/560/420 (or their
   max-height companion above) once you've confirmed that's the real number
   for the selector you're depending on.
   ========================================================================== */

:root {
  color-scheme: dark;
  --ink: #f7f0df;
  --muted: #bdb39d;
  --quiet: #7f786d;
  --line: rgba(255, 224, 150, 0.18);
  --deep: #11100f;
  --night: #181717;
  --panel: rgba(32, 29, 26, 0.82);
  --panel-strong: rgba(42, 37, 32, 0.96);
  --tile: #2c2822;
  --charcoal: #242424;
  --gold: #f3bf55;
  --gold-dark: #b9852d;
  --cyan: #4cc9e8;
  --green: #52d37d;
  --income-icon-green: #52d37d;
  --red: #ee6262;
  --magenta: #cf6b9a;
  --violet: #8d7cff;
  --board-tile-deal: #f6c65a;
  --board-tile-income: #52d37d;
  --board-tile-market: #58cfe8;
  --board-tile-growth: #57b8ff;
  --board-tile-goodwill: #5ff0b5;
  --board-tile-risk: #ff746e;
  --board-tile-health: #ff8f78;
  --board-tile-family: #f0a45b;
  --board-tile-dream: #bea3ff;
  --board-tile-exit: #45f7a8;
  --blue: #2b93c3;
  --oat: #d8c3a1;
  --shadow: rgba(0, 0, 0, 0.46);
  --board-art: url("/assets/modern_city_night.png");
  --enter: cubic-bezier(0.22, 1, 0.36, 1);
  --move: cubic-bezier(0.25, 1, 0.5, 1);

  /* Modal chrome scale — shared across all .decision-modal variants so
     title/width/radius stop drifting per-modal. See docs audit 2026-07-12. */
  --modal-title-sm: clamp(1.3rem, 3vw, 1.7rem);
  --modal-title-md: clamp(1.6rem, 3.4vw, 2.2rem);
  --modal-title-lg: clamp(2rem, 4.5vw, 3rem);
  --modal-w-sm: min(480px, calc(100vw - 32px));
  --modal-w-md: min(680px, calc(100vw - 32px));
  --modal-w-lg: min(920px, calc(100vw - 32px));
  --modal-w-xl: min(1180px, calc(100vw - 32px));
  --modal-radius: 12px;
  --modal-body: 0.92rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(76, 201, 232, 0.18), transparent 32rem),
    radial-gradient(circle at 86% 4%, rgba(243, 191, 85, 0.18), transparent 30rem),
    linear-gradient(135deg, #11100f 0%, #1c1a18 42%, #101211 100%);
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.2;
  background-image:
    linear-gradient(90deg, rgba(255, 224, 150, 0.22) 1px, transparent 1px),
    linear-gradient(180deg, rgba(76, 201, 232, 0.18) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
  animation: grid-drift 34s linear infinite;
}

body::after {
  opacity: 0.22;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(243, 191, 85, 0.18) 46% 47%, transparent 47% 100%),
    linear-gradient(24deg, transparent 0 63%, rgba(76, 201, 232, 0.14) 63% 64%, transparent 64% 100%);
  background-size: 240px 240px;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #15130f;
  background: linear-gradient(180deg, #fff2cc, var(--gold));
  box-shadow:
    0 12px 28px rgba(243, 191, 85, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-weight: 900;
  cursor: pointer;
  transition:
    transform 140ms var(--enter),
    box-shadow 180ms ease,
    opacity 180ms ease,
    background-color 180ms ease,
    filter 180ms ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.15;
  filter: grayscale(1) brightness(0.6);
  box-shadow: none;
}

button:hover:not(:disabled) {
  box-shadow:
    0 16px 34px rgba(243, 191, 85, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translate3d(0, -1px, 0);
}

button:active:not(:disabled) {
  transform: translate3d(0, 1px, 0) scale(0.98);
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(12, 12, 11, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms var(--enter);
}

select {
  color: var(--ink);
}

input::placeholder {
  color: rgba(247, 240, 223, 0.38);
}

input:focus,
select:focus {
  outline: none;
  border-color: rgba(76, 201, 232, 0.82);
  box-shadow:
    0 0 0 4px rgba(76, 201, 232, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

label,
.eyebrow {
  display: block;
  margin: 0 0 7px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-family: "Avenir Next Condensed", "DIN Condensed", "Impact", ui-sans-serif, system-ui, sans-serif;
  font-size: 6.1rem;
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 0 22px rgba(243, 191, 85, 0.25),
    0 18px 46px rgba(0, 0, 0, 0.36);
}

h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

h3 {
  margin-bottom: 8px;
}

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
}

.game-client {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 20px 0 36px;
}

body[data-phase="game"] .game-client {
  width: min(1920px, calc(100vw - 10px));
  padding: 8px 0 14px;
}

body[data-phase="waiting"] .game-client {
  height: 100dvh;
  padding: 10px 0;
}

.app-shell {
  display: grid;
  gap: 14px;
}

body[data-phase="game"] .app-shell {
  gap: 8px;
}

body[data-phase="waiting"] .app-shell {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  gap: 8px;
}

.app-topbar {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(115deg, rgba(28, 26, 23, 0.94), rgba(14, 15, 14, 0.9)),
    rgba(10, 10, 9, 0.72);
  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.top-brand h1 {
  margin: 0;
  font-size: clamp(2.3rem, 6vw, 5rem);
}

.top-brand .eyebrow {
  margin-bottom: 6px;
}

.top-score {
  align-self: center;
  max-width: none;
}

body[data-phase="lobby"] .app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 8px 16px;
}

body[data-phase="waiting"] .app-topbar {
  grid-template-columns: 1fr;
  padding: 8px 12px;
  min-height: 60px;
}

body[data-phase="lobby"] .top-score {
  display: none;
}

body[data-phase="lobby"] .top-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

body[data-phase="lobby"] .top-brand h1 {
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 0.95;
}

body[data-phase="lobby"] .top-brand .eyebrow {
  margin: 0;
  white-space: nowrap;
}

.lobby-top-stats {
  display: none;
}

body[data-phase="lobby"] .lobby-top-stats {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}

body[data-phase="waiting"] .top-score {
  display: none;
}

body[data-phase="waiting"] .top-brand {
  display: flex;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  min-width: 0;
}

body[data-phase="waiting"] .top-brand h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.1rem);
  line-height: 0.9;
}

body[data-phase="waiting"] .top-brand .eyebrow {
  margin: 0;
  max-width: 30ch;
  color: rgba(255, 224, 150, 0.8);
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  line-height: 1.05;
  text-align: right;
}

body[data-phase="game"] .app-topbar {
  grid-template-columns: minmax(420px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  min-height: 54px;
}

body[data-phase="game"] .top-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

body[data-phase="game"] .top-brand .eyebrow {
  margin: 0;
  max-width: none;
  color: rgba(255, 224, 150, 0.74);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  line-height: 1.1;
}

body[data-phase="game"] .top-brand h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.35vw, 2.25rem);
  line-height: 0.9;
  order: -1;
  white-space: nowrap;
}

body[data-phase="game"] .top-score {
  display: none;
}

.top-room-card {
  display: none;
}

body[data-phase="game"] .top-room-card {
  display: grid;
  grid-template-columns: auto minmax(150px, auto) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  padding: 5px 6px 5px 10px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.12), rgba(76, 201, 232, 0.06)),
    rgba(0, 0, 0, 0.34);
}

.top-room-card span {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.top-room-card b {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-room-card button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.view-nav {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(255, 224, 150, 0.13);
  border-radius: 8px;
  padding: 8px;
  background: rgba(18, 17, 16, 0.94);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}

body[data-phase="lobby"] .view-nav {
  display: none;
}

body[data-phase="waiting"] .view-nav {
  display: none;
}

/* The right-drawer toggle only exists on touch landscape (see the
   html.touch-device rules); desktop keeps the horizontal top nav, so hide it
   everywhere by default and let the touch rule reveal it. */
.view-nav-toggle {
  display: none;
}

.mobile-fullscreen-toggle {
  display: none;
}

.mobile-fullscreen-toggle[hidden] {
  display: none !important;
}

.sfx-quick-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 82px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  z-index: 128;
  display: none;
  width: 46px;
  height: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(76, 201, 232, 0.42);
  border-radius: 999px;
  padding: 0;
  color: rgba(238, 251, 255, 0.96);
  background:
    radial-gradient(circle at 50% 34%, rgba(76, 201, 232, 0.24), transparent 64%),
    linear-gradient(145deg, rgba(12, 29, 36, 0.92), rgba(9, 10, 13, 0.92));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(76, 201, 232, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

body[data-phase="waiting"] .sfx-quick-toggle {
  display: inline-flex;
}

body[data-phase="waiting"] .sfx-quick-toggle {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.sfx-quick-toggle:hover:not(:disabled),
.sfx-quick-toggle:focus-visible {
  border-color: rgba(255, 224, 150, 0.54);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(255, 224, 150, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.sfx-quick-toggle[aria-pressed="false"] {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 248, 228, 0.52);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.1), transparent 64%),
    rgba(9, 10, 13, 0.84);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-phase="game"] .view-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 5px;
  padding: 5px;
  align-items: center;
}

.nav-room-card {
  display: none;
}

body[data-phase="game"] .nav-room-card {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 4px 6px 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}

.nav-room-card .nav-room-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-room-card .nav-room-info span {
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-room-card .nav-room-info b {
  font-size: 0.84rem;
  color: var(--ink);
}

.nav-room-card small {
  font-size: 0.66rem;
  color: var(--muted);
  padding-left: 8px;
  border-left: 1px solid rgba(255, 224, 150, 0.16);
}

.nav-room-card small b {
  color: var(--ink);
}

.nav-room-card button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.66rem;
}

.view-nav button {
  min-height: 42px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 150, 0.08);
  transition:
    transform 160ms var(--enter),
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

body[data-phase="game"] .view-nav button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.view-nav button.active {
  color: #15130f;
  background: linear-gradient(180deg, #ffd678, var(--gold));
  box-shadow:
    0 12px 26px rgba(243, 191, 85, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.app-workspace {
  display: grid;
  grid-template-columns: 4fr 1fr; /* Proportional 80% / 20% fluid split */
  gap: 16px;
  align-items: start;
}

body[data-phase="waiting"] .app-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  min-height: 0;
  align-items: stretch;
  gap: 9px;
}

body[data-phase="game"] .app-workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.app-views {
  min-width: 0;
}

body[data-phase="waiting"] .app-views,
body[data-phase="waiting"] .waiting-view {
  min-height: 0;
}

.app-view {
  min-width: 0;
  animation: view-enter 260ms var(--enter) both;
}

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

.lobby-view {
  display: flex;
  height: min(760px, calc(100dvh - 132px));
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 18% -10%, rgba(243, 191, 85, 0.1), transparent 55%),
    rgba(12, 13, 13, 0.96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.lobby-brief {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 18px 0 6px 40px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 224, 150, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 224, 150, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 80%);
  pointer-events: none;
}

.lobby-brief > *:not(.hero-grid) {
  position: relative;
  z-index: 1;
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(620px, 1.12fr) minmax(390px, 0.88fr);
  align-items: end;
  justify-content: space-between;
  gap: 26px;
  padding-right: 40px;
}

.lobby-brief h2 {
  position: relative;
  margin: 0;
  font-size: clamp(2.15rem, 3vw, 2.85rem);
  line-height: 0.96;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-title {
  align-self: start;
}

.hero-tagline {
  margin: 12px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: normal;
}

@media (min-width: 721px) and (max-width: 1180px) {
  .hero-copy {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .room-panel.lobby-console {
    max-width: 460px;
    margin-right: 0;
  }
}

body[data-phase="lobby"] .game-client {
  padding: 14px 0;
}

body[data-phase="lobby"] .lobby-view {
  height: min(900px, calc(100dvh - 100px));
}

body[data-phase="lobby"] .career-card {
  flex-basis: clamp(180px, 13vw, 230px);
}

body[data-phase="lobby"] .lobby-console {
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 12px;
}

@media (min-width: 721px) and (max-height: 820px) {
  body[data-phase="lobby"] .lobby-brief {
    gap: 6px;
    padding-top: 12px;
  }

  body[data-phase="lobby"] .hero-copy {
    align-items: center;
  }

  body[data-phase="lobby"] .lobby-brief h2 {
    font-size: clamp(1.95rem, 3vw, 2.45rem);
  }

  body[data-phase="lobby"] .career-desc {
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.36;
  }

  body[data-phase="lobby"] .lobby-console input,
  body[data-phase="lobby"] .lobby-console button {
    min-height: 44px;
  }
}

.waiting-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  height: 100%;
  padding: 10px;
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 201, 232, 0.08), transparent 42%),
    linear-gradient(160deg, rgba(32, 29, 25, 0.94), rgba(14, 15, 15, 0.96));
}

.waiting-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 224, 150, 0.12);
  padding-bottom: 6px;
}

.waiting-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.waiting-head .muted {
  margin: 3px 0 0;
  font-size: 0.78rem;
  line-height: 1.22;
}

.waiting-head button {
  min-height: 34px;
  padding: 0 11px;
}

.rename-panel,
.waiting-bot-panel {
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  padding: 7px 8px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.1), rgba(243, 191, 85, 0.05)),
    rgba(255, 255, 255, 0.045);
}

.waiting-section-head span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.rename-panel {
  display: grid;
  gap: 5px;
}

.rename-panel label {
  margin: 0;
}

.waiting-setup-grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.2fr);
  gap: 8px;
}

.waiting-autosave-panel {
  margin: 0;
}

.waiting-field-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.waiting-field-head label {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.autosave-status {
  min-width: 60px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

.autosave-status[data-state="saving"] {
  color: var(--cyan);
}

.autosave-status[data-state="saved"] {
  color: #85e4a6;
}

.autosave-status[data-state="error"] {
  color: #ff8b8b;
}

.waiting-field-shell,
.waiting-token-shell {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.15);
}

.waiting-field-shell input,
.waiting-token-shell select {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 8px;
  outline: none;
  background: rgba(12, 12, 11, 0.72);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.waiting-field-shell input {
  padding: 0 10px;
}

.waiting-token-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.waiting-token-shell select {
  padding: 0 10px;
  cursor: pointer;
  font-weight: 700;
}

.waiting-field-shell input:focus,
.waiting-token-shell select:focus {
  border-color: rgba(243, 191, 85, 0.7);
  box-shadow: 0 0 0 3px rgba(243, 191, 85, 0.12);
}

.waiting-token-preview {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.waiting-token-preview img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.waiting-bot-panel {
  display: grid;
  grid-template-columns: minmax(132px, 0.8fr) auto;
  gap: 8px;
  align-items: center;
}

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

.waiting-bot-panel h3 {
  margin: 0;
  font-size: 0.88rem;
}

.waiting-bot-panel .eyebrow {
  margin-bottom: 2px;
}

.waiting-bot-panel .muted {
  margin: 2px 0 0;
  overflow: hidden;
  color: rgba(247, 240, 223, 0.62);
  font-size: 0.68rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-control-row {
  display: grid;
  grid-template-columns: auto minmax(108px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.bot-control-row label {
  margin: 0;
  color: rgba(243, 191, 85, 0.88);
  font-size: 0.62rem;
}

.bot-control-row select {
  min-height: 36px;
  font-size: 0.8rem;
}

.bot-control-row button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.waiting-roster {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 0;
  overflow: hidden;
}

.waiting-section {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 0;
}

.waiting-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.waiting-section-head b {
  color: var(--muted);
}

.waiting-seat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.observer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waiting-seat {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.05);
  transition:
    transform 180ms var(--enter),
    border-color 180ms ease,
    background-color 180ms ease;
}

/* Icon-only + absolutely positioned so it never competes with the token
   image and name/role/ready text for grid width — a text-label button in
   its own grid column was forced down to ~5px wide at common desktop
   widths once the token image doubled in size, overlapping the name. */
.waiting-remove-player {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  border: 1px solid rgba(238, 98, 98, 0.4);
  border-radius: 50%;
  padding: 0;
  color: #ffc8c8;
  background: rgba(23, 17, 17, 0.82);
  box-shadow: none;
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
}

/* The copy column stretches (minmax(0,1fr)) all the way to the card's own
   right edge — reserve a gutter there so text never sits under the
   floating remove icon in that corner. */
.waiting-seat.has-remove .seat-copy {
  padding-right: 24px;
}

.waiting-remove-player:hover:not(:disabled) {
  color: #1b0808;
  background: #ff9d9d;
  box-shadow: 0 10px 24px rgba(238, 98, 98, 0.22);
}

.waiting-seat.creator {
  border-color: rgba(243, 191, 85, 0.42);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.15), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.waiting-seat.observer {
  border-color: rgba(76, 201, 232, 0.22);
}

.waiting-seat.empty {
  color: var(--quiet);
  border-style: dashed;
  background: rgba(255, 255, 255, 0.026);
}

.seat-index {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #15130f;
  background: var(--gold);
  font-size: 0.66rem;
  font-weight: 950;
}

.waiting-seat.observer .seat-index {
  background: var(--cyan);
}

.seat-copy {
  min-width: 0;
}

.waiting-seat strong {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
  align-items: center;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.1;
}

.seat-title span:first-child {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-pill {
  color: var(--gold);
  font-size: 0.58rem;
  font-weight: 950;
  white-space: nowrap;
}

.waiting-seat small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waiting-seat small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
}

body[data-phase="waiting"] .waiting-seat .avatar-portrait.mini,
body[data-phase="waiting"] .waiting-seat .avatar-portrait.mini[data-career] {
  width: 34px;
  height: 38px;
}

.promo-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.promo-grid article {
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  padding: 13px;
  background:
    linear-gradient(150deg, rgba(76, 201, 232, 0.1), rgba(243, 191, 85, 0.06)),
    rgba(8, 8, 7, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: promo-card-enter 420ms var(--enter) both;
}

.promo-grid article:nth-child(2) {
  animation-delay: 60ms;
}

.promo-grid article:nth-child(3) {
  animation-delay: 120ms;
}

.promo-grid span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 10px;
  color: #15130f;
  background: var(--gold);
  font-size: 0.7rem;
  font-weight: 950;
}

.promo-grid strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.98rem;
}

.promo-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.career-strip {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.career-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: 40px;
}

.career-title-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.career-heading-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: baseline;
}

.career-strip-head strong {
  font-size: 1rem;
}

.career-strip-head .count {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.career-track-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.career-edge-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1.5px solid rgba(255, 224, 150, 0.55);
  border-radius: 50%;
  padding: 0;
  color: #ffe49e;
  background: rgba(8, 7, 6, 0.88);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  font-size: 1.15rem;
  line-height: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(3px);
}

.career-edge-nav:hover:not(:disabled) {
  border-color: rgba(255, 224, 150, 0.8);
  background: rgba(243, 191, 85, 0.3);
  transform: translateY(-50%);
}

.career-edge-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(0.94);
}

.career-edge-nav-prev {
  left: 4px;
}

.career-edge-nav-next {
  right: 4px;
}

.career-track {
  display: flex;
  flex: 1;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 4px 40px 10px 2px;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(243, 191, 85, 0.44) rgba(255, 255, 255, 0.06);
}

.career-card {
  position: relative;
  display: flex;
  flex: 0 0 clamp(168px, 20vh, 216px);
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 15px;
  background: linear-gradient(175deg, rgba(46, 41, 35, 0.9), rgba(18, 17, 15, 0.94));
  scroll-snap-align: start;
  transition: transform 180ms var(--enter), border-color 180ms ease, box-shadow 180ms ease;
}

.career-card:hover {
  border-color: rgba(255, 224, 150, 0.45);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}

.career-portrait {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: -14px -14px 0;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
}

.career-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.08);
  transform-origin: 50% 18%;
}

.career-portrait::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 55%, rgba(10, 9, 8, 0.9) 96%);
  pointer-events: none;
}

.career-title {
  position: absolute;
  right: 12px;
  bottom: 9px;
  left: 12px;
  z-index: 1;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.career-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.hero-footrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 40px 6px 0;
}

.career-footnote {
  margin: 0;
  max-width: 58ch;
  color: rgba(247, 240, 223, 0.56);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.28;
}

.stat-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body:not([data-phase="lobby"]) .lobby-top-stats {
  display: none;
}

.stat-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  font-weight: 700;
}

.stat-pills b {
  color: var(--gold);
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(82, 211, 125, 0.22);
}

.view-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(160deg, rgba(44, 39, 34, 0.92), rgba(20, 19, 18, 0.94)),
    var(--panel);
  box-shadow:
    0 28px 72px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.action-panel {
  position: sticky;
  top: 78px;
}

body[data-phase="game"] .action-panel {
  top: 132px;
}

body[data-phase="game"] .action-panel .room-header,
body[data-phase="game"] .action-panel #readyButton,
body[data-phase="game"] .action-panel #startGame,
body[data-phase="game"] .action-panel .status-text {
  display: none;
}

.side-panel-toggle {
  position: fixed;
  right: auto;
  left: 0;
  top: 50%;
  z-index: 64;
  display: none;
  min-width: 58px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 224, 150, 0.34);
  border-radius: 0 999px 999px 0;
  padding: 0 10px 0 11px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.24), rgba(76, 201, 232, 0.08)),
    rgba(10, 10, 9, 0.86);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transform: translate3d(0, -50%, 0);
  transition:
    left 260ms var(--move),
    top 260ms var(--move),
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms var(--enter);
}

body[data-phase="game"] .side-panel-toggle {
  display: inline-flex;
}

body[data-phase="game"] .side-panel-toggle[hidden],
body[data-phase="game"] .side-panel[hidden] {
  display: none !important;
}

.side-panel-toggle:hover {
  border-color: rgba(243, 191, 85, 0.62);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.34), rgba(76, 201, 232, 0.12)),
    rgba(10, 10, 9, 0.9);
  transform: translate3d(2px, -50%, 0);
}

.side-panel-toggle-icon {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
}

.side-panel-toggle b {
  font-size: 0.76rem;
  line-height: 1;
}

body.side-panel-open[data-phase="game"] .side-panel-toggle {
  right: auto;
  left: 0;
  border-color: rgba(82, 211, 125, 0.42);
}

.action-summary {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.12), rgba(243, 191, 85, 0.05)),
    rgba(255, 255, 255, 0.045);
}

.action-summary h3,
.action-summary p {
  margin: 0;
}

.action-summary small {
  color: var(--muted);
  line-height: 1.35;
}

.side-finance-panel {
  display: block;
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(243, 191, 85, 0.2);
  border-radius: 8px;
  margin-top: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 88% 6%, rgba(82, 211, 125, 0.11), transparent 9rem),
    linear-gradient(150deg, rgba(243, 191, 85, 0.08), rgba(76, 201, 232, 0.06)),
    rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

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

.side-finance-panel .finance-hud {
  display: grid;
  gap: 10px;
}

.side-finance-panel .dash-head {
  align-items: start;
}

.side-finance-panel .dash-head h3 {
  margin: 0;
  font-size: 1.06rem;
}

.side-finance-panel .track-pill {
  max-width: 11ch;
  text-align: right;
}

.side-finance-panel .hero-stat {
  margin: 4px 0 8px;
}

.side-finance-panel .avatar-portrait.large {
  width: 72px;
  height: 78px;
  border-radius: 16px;
}

.side-finance-panel .avatar-portrait.large[data-career] {
  width: 82px;
  height: 76px;
  border-radius: 16px;
}

.side-finance-panel .freedom-ring {
  width: 74px;
  height: 74px;
}

.side-finance-panel .freedom-ring span {
  font-size: 1.02rem;
}

.side-finance-panel .freedom-ring small {
  margin-top: 28px;
  font-size: 0.52rem;
}

.side-finance-panel .profession {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.side-finance-panel .dream-card,
.side-finance-panel .freedom-target {
  padding: 8px;
}

.side-finance-panel .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.side-finance-panel .metric {
  min-width: 0;
  padding: 8px;
}

.side-finance-panel .metric span {
  min-height: 2.4em;
  line-height: 1.2;
}

.side-finance-panel .mini-list {
  max-height: none;
}

.hud-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 224, 150, 0.12);
  margin-top: 12px;
  padding-top: 8px;
}

.hud-list-header h4 {
  margin: 0;
}

.debug-tools {
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.08), transparent 56%),
    rgba(0, 0, 0, 0.18);
}

.debug-tools-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.debug-tools-head p {
  margin: 0;
}

.debug-tools-head strong {
  color: var(--cyan);
  font-size: 0.78rem;
}

.debug-tools-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.debug-tools-minimize {
  display: inline-grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: 50%;
  padding: 0;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.34);
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1;
}

.debug-tools-minimize:hover {
  border-color: rgba(243, 191, 85, 0.64);
  background: rgba(243, 191, 85, 0.14);
}

.debug-balance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

.debug-balance span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  padding: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.66rem;
  font-weight: 850;
}

.debug-balance b {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-playtest-deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-bottom: 9px;
}

.debug-playtest-deal label {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.debug-playtest-deal select {
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 7px;
  padding: 0 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 850;
}

.debug-playtest-deal button {
  min-height: 36px;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.debug-playtest-deal button[data-playtest-enter-freedom-path] {
  grid-column: 1 / -1;
}

.debug-playtest-deal button[data-playtest-end-game] {
  grid-column: 1 / -1;
  border-color: rgba(239, 68, 68, 0.34);
  color: #ffd7d7;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(122, 29, 45, 0.24)),
    rgba(0, 0, 0, 0.36);
}

.debug-playtest-deal button:disabled {
  opacity: 0.38;
}

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

.debug-tools-grid button {
  min-height: 34px;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 0.73rem;
  font-weight: 900;
}

.debug-tools-grid button:disabled {
  opacity: 0.38;
}

.debug-sim-button {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.96), rgba(76, 201, 232, 0.62)),
    var(--gold);
  color: #15130f;
}

.debug-sim-report {
  margin-top: 10px;
  border: 1px solid rgba(243, 191, 85, 0.18);
  border-radius: 8px;
  padding: 10px;
  background:
    radial-gradient(circle at 12% 0%, rgba(243, 191, 85, 0.16), transparent 40%),
    rgba(5, 8, 9, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.debug-sim-head,
.debug-sim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.debug-sim-head {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.debug-sim-head b,
.debug-sim-row b {
  color: var(--ink);
}

.debug-sim-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.debug-sim-metrics span {
  display: grid;
  gap: 2px;
  border-radius: 7px;
  padding: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.62rem;
  font-weight: 850;
}

.debug-sim-metrics b {
  color: var(--cyan);
  font-size: 0.82rem;
}

.debug-sim-meta,
.debug-sim-paths,
.debug-sim-ok,
.debug-sim-health {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.35;
}

.debug-sim-health {
  border: 1px solid rgba(91, 218, 132, 0.2);
  border-radius: 6px;
  padding: 6px 7px;
  color: #a7e7bc;
  background: rgba(91, 218, 132, 0.08);
}

.debug-sim-health.has-errors {
  border-color: rgba(255, 104, 104, 0.22);
  color: #ffd0c9;
  background: rgba(255, 104, 104, 0.09);
}

.debug-sim-paths {
  color: rgba(247, 231, 186, 0.8);
}

.debug-sim-first-escape {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 7px;
  padding: 7px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.09), rgba(243, 191, 85, 0.045)),
    rgba(255, 255, 255, 0.035);
}

.debug-sim-section-head,
.debug-sim-escape-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: baseline;
}

.debug-sim-section-head {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 950;
}

.debug-sim-section-head small {
  color: rgba(247, 240, 223, 0.54);
  font-size: 0.58rem;
  font-weight: 900;
}

.debug-sim-escape-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 5px;
}

.debug-sim-escape-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-sim-escape-row b {
  color: var(--cyan);
  font-size: 0.68rem;
  white-space: nowrap;
}

.debug-sim-escape-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 850;
}

.debug-sim-rank {
  display: grid;
  gap: 5px;
}

.debug-sim-row {
  border-radius: 7px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.debug-sim-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.debug-sim-row small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 850;
}

.debug-sim-warnings {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.debug-sim-warnings li {
  border: 1px solid rgba(255, 104, 104, 0.18);
  border-radius: 7px;
  padding: 7px;
  color: #ffd0c9;
  background: rgba(255, 104, 104, 0.09);
  font-size: 0.65rem;
  font-weight: 850;
  line-height: 1.35;
}

.debug-sim-ok {
  margin-top: 8px;
  color: #a7e7bc;
}

.cards-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.archive-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.12), rgba(76, 201, 232, 0.07)),
    rgba(10, 10, 9, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.archive-card.pending {
  border-color: rgba(76, 201, 232, 0.48);
  box-shadow:
    0 14px 32px rgba(76, 201, 232, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.archive-card h3 {
  margin-bottom: 8px;
  line-height: 1.18;
}

.archive-card p {
  color: var(--muted);
  line-height: 1.42;
}

.archive-card small {
  display: block;
  margin-top: 12px;
  color: var(--gold);
  font-weight: 900;
}

.players-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.compact-empty {
  min-height: 220px;
  padding: 18px;
}

.intro-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 22px;
  align-items: stretch;
  min-width: 0;
  min-height: 300px;
  padding: 10px 0 22px;
}

.brand-stack {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  background:
    linear-gradient(110deg, rgba(28, 26, 23, 0.88), rgba(40, 34, 28, 0.74)),
    radial-gradient(circle at 72% 30%, rgba(76, 201, 232, 0.16), transparent 22rem);
  box-shadow:
    0 30px 80px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: panel-enter 420ms var(--enter) both;
}

.brand-stack::before {
  position: absolute;
  right: 28px;
  bottom: 22px;
  width: 300px;
  height: 110px;
  content: "";
  opacity: 0.34;
  background:
    linear-gradient(to top, rgba(247, 240, 223, 0.18), transparent 70%) 0 100% / 42px 72px no-repeat,
    linear-gradient(to top, rgba(76, 201, 232, 0.22), transparent 70%) 52px 100% / 52px 96px no-repeat,
    linear-gradient(to top, rgba(243, 191, 85, 0.24), transparent 70%) 116px 100% / 38px 62px no-repeat,
    linear-gradient(to top, rgba(247, 240, 223, 0.16), transparent 70%) 166px 100% / 62px 118px no-repeat,
    linear-gradient(to top, rgba(82, 211, 125, 0.16), transparent 70%) 238px 100% / 44px 84px no-repeat;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45));
}

.subtitle {
  position: relative;
  max-width: 680px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.score-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
}

.score-strip span {
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--quiet);
  background: rgba(10, 10, 10, 0.4);
  font-size: 0.78rem;
  font-weight: 850;
}

.score-strip b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-panel,
.side-panel,
.stage-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(44, 39, 34, 0.92), rgba(20, 19, 18, 0.94)),
    var(--panel);
  box-shadow:
    0 28px 72px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.room-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  animation: panel-enter 520ms var(--enter) 80ms both;
}

.room-panel.lobby-console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name create"
    "join join";
  align-items: end;
  gap: 10px 12px;
  margin-right: -40px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.1), rgba(76, 201, 232, 0.05)),
    rgba(10, 10, 9, 0.55);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: none;
}

.room-panel.lobby-console .panel-head {
  display: none;
}

.room-panel.lobby-console .field-grid {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-panel.lobby-console .field-grid label {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.room-panel.lobby-console .field-grid input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.room-panel.lobby-console .create-room-row {
  grid-area: create;
}

.room-panel.lobby-console .join-room-row {
  grid-area: join;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(255, 224, 150, 0.12);
  padding-top: 10px;
}

.room-panel.lobby-console .join-room-row label {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.room-panel.lobby-console .join-room-controls {
  flex: 1 1 auto;
  min-width: 0;
}

.room-panel.lobby-console #createRoom {
  min-width: 0;
  white-space: nowrap;
}

.lobby-console .panel-head {
  align-items: center;
  gap: 10px;
}

.lobby-console .panel-head > div {
  min-width: max-content;
}

.lobby-console .panel-head h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
  white-space: nowrap;
}

.lobby-console .field-grid {
  flex: 1 1 260px;
}

.lobby-console .actions {
  display: contents;
}

.lobby-console .create-room-row {
  flex: 0 0 auto;
}

.lobby-console .lobby-action-hint {
  display: none;
}

.lobby-console #createRoom {
  min-width: 180px;
}

.lobby-console .join-room-row {
  flex: 1 1 340px;
  border-top: 0;
  padding-top: 0;
}

.lobby-console .join-room-controls {
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
}

.lobby-console .secondary-actions {
  display: none;
}

.panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head.compact {
  padding-top: 4px;
}

.console-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 16px rgba(82, 211, 125, 0.72);
  animation: console-pulse 1500ms ease-in-out infinite;
}

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

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

.create-room-row {
  display: grid;
  gap: 8px;
}

.lobby-action-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.join-room-row {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(255, 224, 150, 0.12);
  padding-top: 12px;
}

.join-room-row label {
  margin: 0;
}

.join-room-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 10px;
}

#createRoom,
#startGame,
#rollButton:not(:disabled) {
  position: relative;
  overflow: hidden;
}

#createRoom::after,
#startGame::after,
#rollButton:not(:disabled)::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  transform: translate3d(-120%, 0, 0);
  background: linear-gradient(100deg, transparent 0 35%, rgba(255, 255, 255, 0.42) 48%, transparent 62% 100%);
  transition:
    opacity 180ms ease,
    transform 560ms var(--enter);
}

#createRoom:hover::after,
#startGame:hover::after,
#rollButton:not(:disabled):hover::after {
  opacity: 1;
  transform: translate3d(120%, 0, 0);
}

#startGame[data-ready="true"] {
  animation: start-ready 900ms ease-in-out infinite;
}

.secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.secondary-actions:has(.npc-button[hidden]) {
  grid-template-columns: 1fr;
}

.npc-button[hidden] {
  display: none;
}

.npc-button.npc-pop {
  animation: npc-pop 540ms var(--enter) both;
}

.ghost {
  min-height: 40px;
  color: var(--ink);
  background: rgba(255, 224, 150, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 150, 0.16);
}

.ghost:hover:not(:disabled) {
  color: #11100f;
  background: var(--cyan);
  box-shadow: 0 12px 28px rgba(76, 201, 232, 0.2);
}

.status-text,
.muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.status-pulse {
  animation: text-pop 320ms var(--enter);
}

.avatar-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  border: 1px solid rgba(76, 201, 232, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    radial-gradient(circle at 26% 30%, rgba(76, 201, 232, 0.16), transparent 9rem),
    rgba(10, 10, 10, 0.38);
  transition:
    transform 220ms var(--enter),
    box-shadow 220ms var(--enter),
    border-color 180ms ease;
}

.avatar-preview strong,
.avatar-preview small {
  display: block;
}

.avatar-preview strong {
  font-size: 1.04rem;
}

.avatar-preview small {
  color: var(--muted);
  font-size: 0.78rem;
}

.avatar-preview:hover {
  border-color: rgba(76, 201, 232, 0.62);
  box-shadow: 0 16px 38px rgba(76, 201, 232, 0.12);
  transform: translate3d(0, -2px, 0);
}

.avatar-portrait {
  position: relative;
  display: grid;
  width: 66px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px 18px 22px 22px;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, #2b93c3, #113a4d);
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.35),
    inset 0 -14px 22px rgba(0, 0, 0, 0.18);
  transform-style: preserve-3d;
  transition:
    transform 240ms var(--enter),
    box-shadow 220ms ease;
}

.avatar-image {
  display: none;
}

.avatar-portrait::before {
  position: absolute;
  inset: 4px 6px auto;
  height: 16px;
  border-radius: 999px;
  content: "";
  opacity: 0.38;
  background: rgba(255, 255, 255, 0.45);
}

.avatar-head,
.avatar-body {
  position: absolute;
  display: block;
  content: "";
}

.avatar-head {
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 44% 44%;
  background: #f0cda8;
  box-shadow:
    -9px -4px 0 -2px rgba(32, 22, 18, 0.95),
    9px -4px 0 -2px rgba(32, 22, 18, 0.95);
}

.avatar-body {
  bottom: 12px;
  width: 36px;
  height: 26px;
  border-radius: 16px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.22);
}

.avatar-portrait[data-career] {
  --avatar-disc-size: 72%;
  width: 86px;
  height: 80px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.avatar-portrait[data-career]::before {
  inset: auto;
  top: 23%;
  left: 50%;
  width: var(--avatar-disc-size);
  height: var(--avatar-disc-size);
  border: 1px solid rgba(106, 255, 162, 0.46);
  border-radius: 50%;
  opacity: 1;
  background:
    radial-gradient(circle at 42% 30%, rgba(106, 255, 162, 0.2), transparent 42%),
    linear-gradient(145deg, #245f35, #10301f);
  box-shadow:
    0 0 0 3px rgba(10, 31, 20, 0.72),
    0 7px 16px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  mix-blend-mode: normal;
  transform: translateX(-50%);
  animation: none;
}

.avatar-portrait[data-career]::after {
  inset: auto 19% 1%;
  z-index: 1;
  height: 8%;
  border-radius: 50%;
  content: "";
  opacity: 0.28;
  background: rgba(0, 0, 0, 0.8);
  filter: blur(3px);
  transform: scaleX(0.82);
  animation: none;
}

.avatar-portrait[data-career] .avatar-image {
  position: absolute;
  inset: -13% -2% -2%;
  z-index: 2;
  display: block;
  background: var(--avatar-image) center bottom / contain no-repeat;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.38));
  transform-origin: center bottom;
  animation: none;
}

.avatar-portrait[data-career] .avatar-head,
.avatar-portrait[data-career] .avatar-body {
  display: none;
}

.avatar-portrait b {
  position: absolute;
  right: 6px;
  bottom: 5px;
  z-index: 2;
  font-size: 0.64rem;
  font-weight: 950;
}

.avatar-portrait[data-career] b {
  display: none;
}

.avatar-portrait[data-avatar="working_woman"]:not([data-career]) {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, #cf6b9a, #4d1e34);
}

.avatar-portrait[data-avatar="working_woman"]:not([data-career]) .avatar-head {
  box-shadow:
    -11px -5px 0 -1px rgba(40, 22, 32, 0.98),
    11px -5px 0 -1px rgba(40, 22, 32, 0.98);
}

.avatar-portrait[data-avatar="indie_creator"]:not([data-career]) {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, #52d37d, #1e4c2d);
}

.avatar-portrait[data-avatar="cozy_minimal"]:not([data-career]) {
  color: #15130f;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, #f0d9aa, #b9852d);
}

.avatar-portrait[data-avatar="street_hustler"]:not([data-career]) {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, #8d7cff, #312968);
}

.avatar-portrait[data-avatar="messy_builder"]:not([data-career]) {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, #e9864a, #5a2e1a);
}

.avatar-portrait[data-avatar^="bot_"]:not([data-career]) {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(145deg, #8f9696, #252b2d);
}

.avatar-portrait[data-avatar^="bot_"]:not([data-career]) .avatar-head {
  border-radius: 8px;
  background: #cbd5d5;
  box-shadow: none;
}

.avatar-portrait.mini {
  width: 42px;
  height: 46px;
  border-radius: 12px 12px 14px 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.avatar-portrait.mini[data-career] {
  width: 54px;
  height: 50px;
}

.avatar-portrait.mini .avatar-head {
  top: 8px;
  width: 16px;
  height: 16px;
}

.avatar-portrait.mini .avatar-body {
  bottom: 8px;
  width: 23px;
  height: 16px;
}

.avatar-portrait.mini b {
  display: none;
}

.avatar-portrait.large {
  width: 78px;
  height: 88px;
  animation: avatar-idle 2800ms ease-in-out infinite;
}

.avatar-portrait.large[data-career] {
  width: 118px;
  height: 110px;
  animation: none;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.stage-panel {
  overflow: hidden;
}

.stage-hud {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.18);
}

.turn-console {
  min-width: 220px;
  border: 1px solid rgba(76, 201, 232, 0.24);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(76, 201, 232, 0.08);
}

.stage-hud-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.board-help-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 224, 150, 0.24);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.2), rgba(76, 201, 232, 0.06)),
    rgba(255, 255, 255, 0.05);
  font: inherit;
  font-weight: 900;
  transition:
    transform 180ms var(--enter),
    border-color 180ms ease,
    background-color 180ms ease;
}

.board-help-button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #15130f;
  background: var(--gold);
  font-weight: 950;
}

.board-help-button b {
  white-space: nowrap;
}

.board-help-button:hover,
.board-help-button:focus-visible {
  border-color: rgba(243, 191, 85, 0.62);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.3), rgba(76, 201, 232, 0.1)),
    rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.turn-console span {
  display: block;
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.turn-console strong {
  display: block;
  overflow-wrap: anywhere;
}

.turn-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  border-bottom: 1px solid rgba(255, 224, 150, 0.12);
  padding: 10px 12px;
  background:
    linear-gradient(90deg, rgba(76, 201, 232, 0.08), rgba(243, 191, 85, 0.06)),
    rgba(0, 0, 0, 0.16);
  overflow-x: auto;
}

.timeline-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.turn-node {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.13);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.045);
  transition:
    transform 220ms var(--move),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms var(--enter);
}

.turn-node.active {
  border-color: rgba(243, 191, 85, 0.52);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.16), rgba(76, 201, 232, 0.06)),
    rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 28px rgba(243, 191, 85, 0.1);
  transform: translate3d(0, -1px, 0);
}

.turn-node.pending {
  border-color: rgba(76, 201, 232, 0.56);
  box-shadow: 0 0 0 1px rgba(76, 201, 232, 0.14), 0 12px 28px rgba(76, 201, 232, 0.1);
}

.turn-node.awaiting {
  border-color: rgba(82, 211, 125, 0.42);
}

.turn-node.you::after {
  position: absolute;
  right: 8px;
  top: 6px;
  border-radius: 999px;
  padding: 2px 6px;
  color: #10100f;
  background: var(--green);
  content: "YOU";
  font-size: 0.52rem;
  font-weight: 950;
}

.turn-order {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #15130f;
  background: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
}

.turn-node strong,
.turn-node small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-node strong {
  padding-right: 24px;
  font-size: 0.82rem;
}

.turn-node small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

body[data-phase="game"][data-view="board"] .stage-panel {
  position: relative;
  min-height: calc(100dvh - 122px);
}

body[data-phase="game"][data-view="board"] .stage-hud {
  display: none;
}

body[data-phase="game"][data-view="board"] .stage-hud .eyebrow {
  display: none;
}

body[data-phase="game"][data-view="board"] .stage-hud h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  line-height: 1;
}

body[data-phase="game"][data-view="board"] .turn-timeline {
  display: none;
}

body[data-phase="game"][data-view="board"] .turn-node {
  min-height: 44px;
  padding: 5px 7px;
}

body[data-phase="game"][data-view="board"] .turn-order {
  width: 22px;
  height: 22px;
}

body[data-phase="game"][data-view="board"] .turn-node .avatar-portrait,
body[data-phase="game"][data-view="board"] .turn-node .avatar-portrait.small {
  width: 42px;
  height: 42px;
}

body[data-phase="game"][data-view="board"] .turn-node strong {
  font-size: 0.72rem;
}

body[data-phase="game"][data-view="board"] .turn-node small {
  font-size: 0.62rem;
}

.board-wrap {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 32px;
  perspective: 1600px;
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 201, 232, 0.16), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.2));
}

body[data-phase="game"][data-view="board"] .board-wrap {
  overflow: hidden;
  min-height: calc(100dvh - 122px);
  padding: 8px;
}

.board-overlay-hud {
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 13;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

body[data-phase="game"][data-view="board"] .board-overlay-hud {
  display: none;
}

.board-focus-button {
  min-height: 40px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 999px;
  padding: 0 13px;
  cursor: pointer;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(76, 201, 232, 0.06)),
    rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
}

.board-focus-button[aria-pressed="true"] {
  border-color: rgba(82, 211, 125, 0.46);
  color: #d8ffe7;
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.18), rgba(76, 201, 232, 0.08)),
    rgba(8, 9, 10, 0.76);
}

body[data-phase="game"][data-view="board"] .board-overlay-hud .board-help-button {
  min-height: 40px;
  border-radius: 999px;
  padding: 7px 11px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.26), rgba(76, 201, 232, 0.08)),
    rgba(8, 9, 10, 0.7);
  backdrop-filter: blur(10px);
}

body[data-phase="game"][data-view="board"] .board-overlay-hud .board-help-button span {
  width: 22px;
  height: 22px;
}

body[data-phase="game"][data-view="board"] .board-overlay-hud .turn-console {
  display: grid;
  min-width: min(360px, 30vw);
  border-radius: 999px;
  padding: 7px 14px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.16), rgba(243, 191, 85, 0.04)),
    rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(10px);
}

body[data-phase="game"][data-view="board"] .board-overlay-hud .turn-console strong {
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.board-focus[data-phase="game"][data-view="board"] .view-nav {
  display: none;
}

body.board-focus[data-phase="game"][data-view="board"] .app-workspace {
  grid-template-columns: 1fr;
}

body.board-focus[data-phase="game"][data-view="board"] .stage-panel,
body.board-focus[data-phase="game"][data-view="board"] .board-wrap {
  min-height: calc(100dvh - 74px);
}

body.board-focus[data-phase="game"][data-view="board"] .play-board {
  max-width: min(1780px, 100%);
  margin-top: 4px;
}

.board-wrap::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.52;
  background:
    linear-gradient(180deg, rgba(10, 10, 9, 0.08), rgba(10, 10, 9, 0.82)),
    var(--board-art) center / cover no-repeat;
  filter: saturate(1.1) contrast(1.08);
}

.board-wrap::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 50% 22%, rgba(243, 191, 85, 0.14), transparent 24rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.board-skyline {
  position: absolute;
  right: 24px;
  top: 12px;
  display: flex;
  gap: 8px;
  align-items: end;
  opacity: 0.22;
  pointer-events: none;
}

.board-skyline span {
  width: 26px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--cyan), rgba(255, 255, 255, 0.08));
}

.board-skyline span:nth-child(1) { height: 48px; }
.board-skyline span:nth-child(2) { height: 82px; }
.board-skyline span:nth-child(3) { height: 62px; }
.board-skyline span:nth-child(4) { height: 104px; }
.board-skyline span:nth-child(5) { height: 72px; }

.board-art-card {
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.26);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.play-board {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 1024 / 768;
  margin: 40px auto;
  overflow: visible;
  border: 2px solid rgba(243, 191, 85, 0.52);
  border-radius: 16px;
  background: rgba(10, 12, 16, 0.88);
  transform: none;
  transform-style: flat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

body[data-phase="game"][data-view="board"] .play-board {
  width: 100%;
  max-width: min(1660px, 100%);
  margin: 4px auto 8px;
}

.play-board-shadow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: transparent;
  transform: translate3d(0, 0, -24px); /* Physically project shadow 24px below the board in 3D space */
  transform-style: preserve-3d;
  box-shadow:
    -24px 24px 55px rgba(0, 0, 0, 0.65),
    0 32px 74px rgba(0, 0, 0, 0.54),
    0 0 0 1px rgba(76, 201, 232, 0.12),
    0 0 120px rgba(243, 191, 85, 0.08);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: -10;
}

.play-board::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 50% 48%, transparent 0 52%, rgba(0, 0, 0, 0.03) 75%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.05));
}

.play-board::after {
  position: absolute;
  left: 44.7%;
  top: 55.2%;
  z-index: 3;
  width: 10.9%;
  height: 12.8%;
  pointer-events: none;
  content: "";
  border-radius: 16px;
  background:
    radial-gradient(125% 92% at 50% 0%, rgba(67, 86, 117, 0.44), rgba(17, 20, 25, 0.94) 64%),
    linear-gradient(180deg, rgba(255, 210, 127, 0.07), rgba(255, 210, 127, 0.01) 28%, rgba(0, 0, 0, 0.45));
  box-shadow:
    inset 0 0 0 1px rgba(243, 191, 85, 0.14),
    inset 0 14px 24px rgba(255, 214, 140, 0.05),
    inset 0 -14px 28px rgba(0, 0, 0, 0.5);
  filter: saturate(0.95);
}

.play-board-art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
  user-select: none;
}

.board-hover-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.board-hover-canvas.is-active {
  opacity: 1;
}

.phaser-board-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.phaser-board-layer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.dice-board-fx {
  position: absolute;
  inset: 0;
  z-index: 16;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 54px); /* Raised base to prevent 3D corners from clipping the board */
  transform-style: preserve-3d;
}

.board-dice-run {
  --dice-size: 54px; /* Robust fallback size */
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dice-size);
  height: var(--dice-size);
  opacity: 1;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
}

.board-dice-run::before {
  position: absolute;
  inset: -34%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 244, 214, 0.58) 0 12%, rgba(243, 191, 85, 0.28) 24%, rgba(122, 223, 228, 0.14) 42%, transparent 68%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8%, -40px) scale(0.42);
  transform-origin: center;
}

.board-dice-run::after {
  position: absolute;
  left: -24%;
  top: 30%;
  z-index: -1;
  width: 148%;
  height: 42%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(243, 191, 85, 0.5), rgba(122, 223, 228, 0.22) 42%, transparent 78%);
  content: "";
  display: none;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(-24%, 0, -46px) rotate(-12deg) scale(0.68);
  transform-origin: center;
}

.board-dice-run:not(.settled)::after {
  animation: none;
}

.board-dice-run.face-impacting::before {
  animation: dice-face-impact-flash 150ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.board-dice-run.face-impacting::after {
  animation: none;
  opacity: 0;
}

.board-dice-run.face-locked::after {
  animation: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.board-dice-run.settled::after {
  animation: none;
  opacity: 0;
}

.board-die {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.board-die-sprite-shell {
  inset: -9%;
  display: block;
  opacity: 1;
  transform-style: flat;
  transition:
    opacity 190ms ease,
    filter 190ms ease;
  will-change: transform, filter, opacity;
  filter:
    drop-shadow(0 0 10px rgba(218, 241, 239, 0.36))
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.46));
}

.board-die-sprite {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  backface-visibility: hidden;
}

.board-die-sprite.is-active {
  opacity: 1;
}

.board-dice-run:not(.settled) .board-die-sprite-shell {
  filter:
    blur(0.35px)
    drop-shadow(0 0 12px rgba(255, 239, 197, 0.35))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5));
}

.board-dice-run.face-locked .board-die-sprite-shell,
.board-dice-run.settled .board-die-sprite-shell {
  opacity: 1;
}

.board-dice-run.face-locked .board-die-sprite-shell {
  filter:
    drop-shadow(0 0 13px rgba(218, 241, 239, 0.42))
    drop-shadow(0 19px 22px rgba(0, 0, 0, 0.5));
}

.board-dice-run.settled .board-die-sprite-shell {
  filter:
    drop-shadow(0 0 14px rgba(218, 241, 239, 0.46))
    drop-shadow(0 20px 24px rgba(0, 0, 0, 0.52));
}

.die-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid rgba(224, 228, 224, 0.86);
  border-radius: 13px;
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 255, 245, 0.5), transparent 0.72rem),
    radial-gradient(circle at 78% 82%, rgba(0, 0, 0, 0.5), transparent 44%),
    linear-gradient(145deg, #6e6458 0%, #252323 18%, #0d0d0d 50%, #4d4037 100%);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, 0.42),
    inset 0 -11px 18px rgba(0, 0, 0, 0.62),
    inset 0 0 0 3px rgba(255, 244, 220, 0.12),
    inset 0 0 0 6px rgba(0, 0, 0, 0.24),
    0 0 10px rgba(207, 232, 231, 0.32),
    0 12px 26px rgba(0, 0, 0, 0.5);
  backface-visibility: hidden;
  transition: filter 300ms ease;
}

.die-face::before {
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(232, 226, 212, 0.42);
  border-radius: 9px;
  content: "";
  background:
    linear-gradient(135deg, rgba(255, 255, 244, 0.2), transparent 34%),
    radial-gradient(circle at 72% 76%, rgba(0, 0, 0, 0.42), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.die-face::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.38), transparent 18% 72%, rgba(255, 206, 148, 0.16)),
    linear-gradient(302deg, transparent 0 56%, rgba(129, 226, 230, 0.18) 74%, transparent 100%);
  content: "";
  mix-blend-mode: screen;
  opacity: 0.48;
  pointer-events: none;
}

/* Dynamic Directional Shading (Light source from top-front-left) */
.die-face.front { 
  transform: rotateY(0deg) translateZ(calc(var(--dice-size) / 2)); 
}
.die-face.top { 
  transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); 
}
.die-face.right { 
  transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); 
}
.die-face.left { 
  transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); 
}
.die-face.bottom { 
  transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); 
}
.die-face.back { 
  transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); 
}

.pip {
  position: absolute;
  left: var(--px);
  top: var(--py);
  z-index: 2;
  width: 15.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(98, 92, 84, 0.38);
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0 34%, #f1ede1 58%, #b8b0a1 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.92),
    inset 0 -1px 2px rgba(0, 0, 0, 0.38),
    0 0 5px rgba(255, 246, 220, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.45);
  transform: translate3d(-50%, -50%, 0);
}

.board-dice-shadow {
  position: absolute;
  left: 10%;
  top: 14%;
  width: 80%;
  height: 42%;
  border-radius: 999px;
  opacity: 0;
  /* Natural blur fade using CSS radial-gradient, eliminating the need for 'filter: blur' which flattens 3D context! */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.66) 10%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0) 70%);
  transform-origin: center;
}

.board-dice-shadow::before {
  position: absolute;
  inset: -48% -36%;
  border-radius: 999px;
  background:
    conic-gradient(from 24deg, transparent 0 22%, rgba(255, 245, 219, 0.5) 34%, transparent 48%, rgba(122, 223, 228, 0.26) 62%, transparent 78% 100%);
  content: "";
  opacity: 0;
  transform: rotate(-16deg) scale(0.74);
}

.board-dice-run.settled .die-face {
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, 0.46),
    inset 0 -11px 18px rgba(0, 0, 0, 0.64),
    inset 0 0 0 3px rgba(255, 244, 220, 0.16),
    inset 0 0 0 6px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(220, 238, 232, 0.44),
    0 20px 38px rgba(0, 0, 0, 0.56);
}

.board-dice-run.settled .board-dice-shadow::before {
  animation: dice-metal-swirl 720ms var(--enter) both;
}

.dice-board-fx[data-viewer="other"] .die-face {
  border-color: rgba(224, 228, 224, 0.5);
  filter: brightness(0.72) saturate(0.78);
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, 0.24),
    inset 0 -10px 18px rgba(0, 0, 0, 0.56),
    inset 0 0 0 3px rgba(255, 244, 220, 0.08),
    0 0 7px rgba(207, 232, 231, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

.dice-board-fx[data-viewer="other"] .board-die-sprite-shell {
  filter:
    brightness(0.74)
    saturate(0.78)
    drop-shadow(0 0 7px rgba(207, 232, 231, 0.2))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.38));
}

.dice-board-fx[data-viewer="other"] .board-dice-run.face-locked .board-die-sprite-shell,
.dice-board-fx[data-viewer="other"] .board-dice-run.settled .board-die-sprite-shell {
  opacity: 0.72;
}

.dice-board-fx[data-viewer="other"] .board-dice-run.settled .board-die-sprite-shell {
  filter:
    brightness(0.76)
    saturate(0.8)
    drop-shadow(0 0 9px rgba(207, 232, 231, 0.26))
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.46));
}

.dice-board-fx[data-viewer="other"] .board-dice-run.settled .die-face {
  box-shadow:
    inset 0 3px 4px rgba(255, 255, 255, 0.26),
    inset 0 -10px 18px rgba(0, 0, 0, 0.58),
    inset 0 0 0 3px rgba(255, 244, 220, 0.08),
    0 0 9px rgba(207, 232, 231, 0.24),
    0 18px 32px rgba(0, 0, 0, 0.48);
}

.dice-board-fx[data-viewer="other"] .pip {
  opacity: 0.7;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.46),
    0 0 4px rgba(255, 246, 220, 0.34);
}

.dice-board-fx[data-viewer="other"] .board-dice-impact {
  border-color: rgba(243, 191, 85, 0.42);
}

.board-dice-impact {
  position: absolute;
  left: var(--impact-x);
  top: var(--impact-y);
  z-index: 15;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(243, 191, 85, 0.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.28);
}

.board-dice-impact::before,
.board-dice-impact::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(243, 191, 85, 0.88), transparent);
  transform: translate3d(-50%, -50%, 0) rotate(28deg);
}

.board-dice-impact::after {
  transform: translate3d(-50%, -50%, 0) rotate(-28deg);
}

.board-dice-impact.active {
  animation: dice-edge-impact 620ms var(--enter) forwards;
}

.board-route-title {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
  background: rgba(10, 10, 9, 0.72);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.fast-route-title {
  left: 50%;
  top: 5.4%;
  transform: translate3d(-50%, 0, 0);
}

.rat-route-title {
  left: 50%;
  top: 20.6%;
  transform: translate3d(-50%, 0, 0);
}

.route-board,
.board-tokens {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.board-tokens {
  z-index: 8;
}

.board-art-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.board-art-card::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, 0.62)),
    radial-gradient(circle at 58% 24%, rgba(243, 191, 85, 0.1), transparent 26rem);
}

.board-art-card figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin: 0;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(10, 10, 9, 0.72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.board-art-card figcaption span {
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.board-art-card figcaption strong {
  font-size: 0.98rem;
}

.track-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.track-header > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(8, 8, 8, 0.32);
}

.board-perspective {
  position: relative;
  z-index: 1;
  min-width: 920px;
  perspective: 1300px;
}

.track-shell {
  position: relative;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 224, 150, 0.08), transparent),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 42px rgba(0, 0, 0, 0.22);
  transform: rotateX(4deg);
  transform-origin: center top;
}

.fast-shell {
  margin-top: 18px;
  border-color: rgba(76, 201, 232, 0.22);
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.1), transparent),
    rgba(0, 0, 0, 0.22);
}

.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(138px, 1fr));
  gap: 10px;
}

.route-board {
  display: block;
  transform-style: preserve-3d;
}

.tile {
  position: relative;
  min-height: 136px;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  padding: 12px 12px 44px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.08)),
    var(--tile);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.18);
  transition:
    transform 240ms var(--move),
    border-color 200ms ease,
    box-shadow 240ms var(--enter),
    background-color 200ms ease;
}

.route-board .tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: calc(var(--tile-w) - 4px);
  height: calc(var(--tile-h) - 4px);
  min-height: 0;
  overflow: visible;
  padding: 8px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px;
  border: 2.6px solid var(--tile-border, rgba(255, 255, 255, 0.25));
  background: var(--tile-bg, rgba(20, 24, 36, 0.92));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.3),
    0 1px 0 var(--tile-border),
    0 2px 0 var(--tile-border),
    0 3px 0 var(--tile-border),
    0 4px 0 var(--tile-border),
    0 2.5px 0.5px rgba(0, 0, 0, 0.15),
    0 5px 7px rgba(0, 0, 0, 0.45),
    0 3px 5px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* ═══ Gold: Opportunity, Deals, Ventures ═══ */
.route-board .tile.opportunity,
.route-board .tile.starterDeal,
.route-board .tile.growthDeal,
.route-board .tile.venture {
  --tile-glow: var(--board-tile-deal);
  --tile-border: color-mix(in srgb, var(--board-tile-deal) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-deal) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-deal) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-deal) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Green: Payday, Passive Income ═══ */
.route-board .tile.payday,
.route-board .tile.incomeDay {
  --tile-glow: var(--board-tile-income);
  --tile-border: color-mix(in srgb, var(--board-tile-income) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-income) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-income) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-income) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Cyan: Market, Macro ═══ */
.route-board .tile.market,
.route-board .tile.macro {
  --tile-glow: var(--board-tile-market);
  --tile-border: color-mix(in srgb, var(--board-tile-market) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-market) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-market) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-market) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Blue: Learning, Labor, Network ═══ */
.route-board .tile.upskill,
.route-board .tile.sideHustle,
.route-board .tile.network {
  --tile-glow: var(--board-tile-growth);
  --tile-border: color-mix(in srgb, var(--board-tile-growth) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-growth) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-growth) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-growth) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Mint: Charity, Impact ═══ */
.route-board .tile.charity,
.route-board .tile.impact {
  --tile-glow: var(--board-tile-goodwill);
  --tile-border: color-mix(in srgb, var(--board-tile-goodwill) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-goodwill) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-goodwill) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-goodwill) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Red: Surprise, Tax, Digital Risk, Lawsuit, Tax Audit ═══ */
.route-board .tile.surprise,
.route-board .tile.socialTax,
.route-board .tile.digitalRisk,
.route-board .tile.lawsuit,
.route-board .tile.taxAudit,
.route-board .tile.divorce,
.route-board .tile.layoff {
  --tile-glow: var(--board-tile-risk);
  --tile-border: color-mix(in srgb, var(--board-tile-risk) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-risk) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-risk) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-risk) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Coral: Health, Burnout ═══ */
.route-board .tile.health,
.route-board .tile.burnout,
.route-board .tile.downsized {
  --tile-glow: var(--board-tile-health);
  --tile-border: color-mix(in srgb, var(--board-tile-health) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-health) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-health) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-health) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Peach: Family ═══ */
.route-board .tile.baby {
  --tile-glow: var(--board-tile-family);
  --tile-border: color-mix(in srgb, var(--board-tile-family) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-family) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-family) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-family) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Violet: Dream ═══ */
.route-board .tile.dream {
  --tile-glow: var(--board-tile-dream);
  --tile-border: color-mix(in srgb, var(--board-tile-dream) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-dream) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-dream) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-dream) 2%, transparent);
  --tile-bg: transparent;
}

/* ═══ Emerald: Exit, Final Freedom ═══ */
.route-board .tile.exit,
.route-board .tile.finalFreedom {
  --tile-glow: var(--board-tile-exit);
  --tile-border: color-mix(in srgb, var(--board-tile-exit) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-exit) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-exit) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-exit) 2%, transparent);
  --tile-bg: transparent;
}
.route-board .tile.portfolio {
  --tile-glow: var(--board-tile-market);
  --tile-border: color-mix(in srgb, var(--board-tile-market) 42%, transparent);
  --tile-border-bright: color-mix(in srgb, var(--board-tile-market) 92%, #ffffff);
  --tile-glow-line: color-mix(in srgb, var(--board-tile-market) 5%, transparent);
  --tile-shadow: color-mix(in srgb, var(--board-tile-market) 2%, transparent);
  --tile-bg: transparent;
}

/* Bright State override for Hover, Active, Preview and Occupied States */
.route-board .tile:hover,
.route-board .tile.is-hovered,
.route-board .tile:focus-visible,
.route-board .tile.just-landed,
.route-board .tile.path-preview,
.route-board .tile.has-player {
  --tile-border: var(--tile-border-bright, rgba(255, 255, 255, 0.98)) !important;
}

.route-hit-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tile-hit {
  --tile-glow: var(--gold);
  fill: transparent;
  shape-rendering: geometricPrecision;
  stroke: transparent;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  cursor: default;
  outline: none;
  pointer-events: all;
  transition:
    fill 160ms ease,
    stroke 160ms ease,
    filter 180ms var(--enter);
}

.tile-hit:hover,
.tile-hit:focus-visible,
.tile-hit.is-hovered,
.tile-hit.just-landed,
.tile-hit.path-preview {
  fill: transparent;
  filter: none;
  stroke: transparent;
}

.route-board.fast-board .tile {
  width: calc(var(--tile-w) - 1.5px);
  height: calc(var(--tile-h) - 1.5px);
  border-width: 3.5px;
}

.route-board .tile::after {
  display: none;
}

.tile::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  content: "";
  background: var(--gold);
  transform: scaleX(0.52);
  transform-origin: left center;
  transition: transform 240ms var(--move);
}

.route-board .tile::before {
  display: none;
  inset: 1px;
  height: auto;
  border-radius: 9px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 48%),
    color-mix(in srgb, var(--tile-glow, var(--gold)) 21%, transparent);
  box-shadow:
    0 0 9px color-mix(in srgb, var(--tile-glow, var(--gold)) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tile-glow, var(--gold)) 19%, transparent);
  transform: none;
}

.tile::after {
  position: absolute;
  right: -16px;
  top: 50%;
  width: 22px;
  height: 2px;
  content: "";
  opacity: 0.36;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: translate3d(0, -50%, 0);
}

.tile:nth-child(6n)::after {
  display: none;
}

.tile:hover::before,
.tile:focus-visible::before,
.tile.just-landed::before,
.tile.path-preview::before {
  transform: scaleX(1);
}

.tile-number {
  color: var(--quiet);
  font-size: 0.72rem;
  font-weight: 950;
}

.route-board .tile-number {
  display: none;
}

.tile-icon {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  min-width: 34px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.58rem;
  font-weight: 950;
}

.route-board .tile-icon {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--tile-border, rgba(255, 255, 255, 0.3));
  border-radius: 50%;
  opacity: 1;
  color: var(--tile-border, #fff);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.18), transparent 70%),
    rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.72rem;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 6px var(--tile-glow-line, transparent);
  transform: translate3d(0, 0, 1.5px) scale(1) !important;
  margin-bottom: 5px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease;
}

.route-board .tile-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.route-board .tile-icon img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 5px color-mix(in srgb, var(--tile-border, #fff) 28%, transparent));
}

.board-tile-icon-mask {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--board-icon) center / contain no-repeat;
  mask: var(--board-icon) center / contain no-repeat;
}

.route-board .tile-icon .board-tile-icon-mask {
  width: 19px;
  height: 19px;
  background: var(--tile-border, currentColor);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 5px color-mix(in srgb, var(--tile-border, #fff) 28%, transparent));
}

.tile-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  color: #15130f;
  background: rgba(247, 240, 223, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 0.6rem;
  font-weight: 950;
  text-transform: uppercase;
}

.route-board .tile-badge {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  max-width: 100%;
  width: 100%;
  text-align: center;
  overflow: hidden;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  color: var(--tile-border, #fff) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 6px color-mix(in srgb, var(--tile-border) 60%, transparent) !important;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.5px;
  opacity: 1;
  text-overflow: ellipsis;
  transform: translate3d(0, 0, 1.5px) !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.tile strong {
  display: block;
  margin: 12px 48px 6px 0;
  font-size: 0.96rem;
  line-height: 1.18;
}

.route-board .tile strong {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  display: block;
  width: max-content;
  max-width: 170px;
  margin: 0;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--ink);
  background: rgba(8, 8, 7, 0.88);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  font-size: 0.62rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate3d(-50%, 6px, 0);
  transition:
    opacity 160ms ease,
    transform 180ms var(--enter);
}

.tile-tooltip {
  display: none;
}

.route-board .tile .tile-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 40;
  display: grid;
  width: max-content;
  max-width: 240px;
  gap: 3px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.1), rgba(76, 201, 232, 0.07)),
    rgba(8, 8, 7, 0.92);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate3d(-50%, 6px, 0) scale(0.96);
  transition:
    opacity 160ms ease,
    transform 180ms var(--enter);
}

.route-board .tile .tile-tooltip::after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 224, 150, 0.22);
  border-bottom: 1px solid rgba(255, 224, 150, 0.22);
  content: "";
  background: rgba(12, 12, 10, 0.94);
  transform: translateX(-50%) rotate(45deg);
}

.route-board .tile.tooltip-below .tile-tooltip {
  top: calc(100% + 9px);
  bottom: auto;
  transform: translate3d(-50%, -6px, 0) scale(0.96);
}

.route-board .tile.tooltip-below .tile-tooltip::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-top: 1px solid rgba(255, 224, 150, 0.22);
  border-left: 1px solid rgba(255, 224, 150, 0.22);
}

.route-board .tile .tile-tooltip strong {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #fff7dd;
  background: none;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1.22;
  opacity: 1;
  text-align: left;
  transform: none;
  white-space: normal;
}

.route-board .tile .tile-tooltip small {
  display: block;
  color: rgba(247, 240, 223, 0.74);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.36;
}

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

.route-board .tile p {
  display: none;
}

.route-board .tile:hover,
.route-board .tile.is-hovered,
.route-board .tile:focus-visible,
.route-board .tile.just-landed,
.route-board .tile.path-preview {
  z-index: 25;
  border-color: var(--tile-border, rgba(255, 255, 255, 0.5));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 1px 0 var(--tile-border),
    0 2px 0 var(--tile-border),
    0 3px 0 var(--tile-border),
    0 4px 0 var(--tile-border),
    0 5px 0 var(--tile-border),
    0 3px 0.75px rgba(0, 0, 0, 0.15),
    0 14px 28px rgba(0, 0, 0, 0.75),
    0 10px 20px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(0, 0, 0, 0.25);
  transform: translate3d(-50%, -50%, 28px) scale(1.08);
}

.route-board .tile:hover::before,
.route-board .tile.is-hovered::before,
.route-board .tile:focus-visible::before,
.route-board .tile.just-landed::before,
.route-board .tile.path-preview::before {
  opacity: 1;
}

.route-board .tile:hover .tile-icon,
.route-board .tile.is-hovered .tile-icon,
.route-board .tile:focus-visible .tile-icon,
.route-board .tile.just-landed .tile-icon,
.route-board .tile.path-preview .tile-icon {
  opacity: 1 !important;
  transform: translate3d(0, 0, 1.5px) scale(1.06) !important;
}

.route-board .tile:hover .tile-badge,
.route-board .tile.is-hovered .tile-badge,
.route-board .tile:focus-visible .tile-badge,
.route-board .tile.just-landed .tile-badge,
.route-board .tile.path-preview .tile-badge {
  opacity: 1 !important;
  transform: translate3d(0, 0, 1.5px) !important;
}

.route-board .tile.just-landed .tile-tooltip {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.tile.just-landed {
  z-index: 2;
  animation: tile-land 720ms var(--enter);
}

.route-board .tile.just-landed {
  animation: route-tile-land 720ms var(--enter);
}

.tile.path-preview {
  border-color: rgba(255, 255, 255, 0.28);
  animation: path-flash 760ms var(--enter);
}

.route-board .tile[data-type="payday"],
.route-board .tile[data-type="incomeDay"],
.route-board .tile[data-type="sideHustle"] {
  border-color: rgba(106, 255, 162, 0.45);
  background:
    linear-gradient(180deg, rgba(106, 255, 162, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(31, 51, 39, 0.2);
}

.tile[data-type="payday"]::before,
.tile[data-type="incomeDay"]::before,
.tile[data-type="sideHustle"]::before {
  background: var(--green);
}

.route-board .tile[data-type="opportunity"],
.route-board .tile[data-type="starterDeal"],
.route-board .tile[data-type="growthDeal"],
.route-board .tile[data-type="venture"] {
  border-color: rgba(255, 248, 110, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 248, 110, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(54, 43, 26, 0.2);
}

.route-board .tile[data-type="surprise"],
.route-board .tile[data-type="socialTax"],
.route-board .tile[data-type="digitalRisk"],
.route-board .tile[data-type="lawsuit"],
.route-board .tile[data-type="taxAudit"],
.route-board .tile[data-type="layoff"] {
  border-color: rgba(255, 147, 147, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 147, 147, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(54, 31, 32, 0.2);
}

.route-board .tile[data-type="market"],
.route-board .tile[data-type="macro"],
.route-board .tile[data-type="upskill"],
.route-board .tile[data-type="charity"] {
  border-color: rgba(125, 214, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(125, 214, 255, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(29, 48, 55, 0.2);
}

.route-board .tile[data-type="baby"],
.route-board .tile[data-type="burnout"],
.route-board .tile[data-type="downsized"] {
  border-color: rgba(217, 180, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(217, 180, 255, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(41, 31, 55, 0.2);
}

.route-board .tile[data-type="dream"],
.route-board .tile[data-type="exit"] {
  border-color: rgba(255, 93, 199, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 93, 199, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(54, 26, 45, 0.2);
}

.route-board .tile[data-type="health"],
.route-board .tile[data-type="network"] {
  border-color: rgba(99, 255, 255, 0.46);
  background:
    linear-gradient(180deg, rgba(99, 255, 255, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(29, 55, 55, 0.2);
}

.route-board .tile[data-type="portfolio"],
.route-board .tile[data-type="impact"],
.route-board .tile[data-type="finalFreedom"] {
  border-color: rgba(183, 161, 255, 0.46);
  background:
    linear-gradient(180deg, rgba(183, 161, 255, 0.03), rgba(0, 0, 0, 0.01)),
    rgba(41, 36, 66, 0.2);
}

.tile-hit[data-type="payday"],
.tile-hit[data-type="incomeDay"],
.tile-hit[data-type="sideHustle"] {
  --tile-glow: var(--green);
}
.tile-hit[data-type="opportunity"],
.tile-hit[data-type="starterDeal"],
.tile-hit[data-type="growthDeal"],
.tile-hit[data-type="venture"] {
  --tile-glow: var(--gold);
}
.tile-hit[data-type="surprise"],
.tile-hit[data-type="socialTax"],
.tile-hit[data-type="digitalRisk"],
.tile-hit[data-type="lawsuit"],
.tile-hit[data-type="taxAudit"],
.tile-hit[data-type="layoff"] {
  --tile-glow: var(--red);
}
.tile-hit[data-type="market"],
.tile-hit[data-type="macro"],
.tile-hit[data-type="upskill"],
.tile-hit[data-type="charity"] {
  --tile-glow: var(--cyan);
}
.tile-hit[data-type="baby"],
.tile-hit[data-type="burnout"],
.tile-hit[data-type="downsized"] {
  --tile-glow: var(--violet);
}
.tile-hit[data-type="dream"],
.tile-hit[data-type="exit"] {
  --tile-glow: var(--magenta);
}
.tile-hit[data-type="health"],
.tile-hit[data-type="network"] {
  --tile-glow: var(--cyan);
}
.tile-hit[data-type="portfolio"],
.tile-hit[data-type="impact"],
.tile-hit[data-type="finalFreedom"] {
  --tile-glow: var(--violet);
}

.tokens {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  max-width: 96px;
  flex-wrap: wrap;
  justify-content: end;
  gap: 5px;
}

.token {
  position: relative;
  display: grid;
  width: 22px;
  height: 28px;
  place-items: center;
  border-radius: 999px 999px 9px 9px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.46), transparent 22%),
    var(--token-color, var(--gold));
  box-shadow:
    0 8px 12px rgba(0, 0, 0, 0.32),
    inset 0 -8px 10px rgba(0, 0, 0, 0.22);
  transform-origin: center bottom;
  transition:
    transform 240ms var(--move),
    box-shadow 200ms ease,
    opacity 160ms ease;
}

.token i {
  position: absolute;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
}

.token b {
  position: absolute;
  bottom: 4px;
  font-size: 0.52rem;
  font-weight: 950;
}

.token.just-moved {
  animation: token-hop 760ms var(--enter);
}

.token.active-token {
  box-shadow:
    0 0 0 4px rgba(243, 191, 85, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.36);
  animation: active-token 1200ms ease-in-out infinite;
}

.board-token {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  display: grid;
  width: 34px;
  height: 44px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px 999px 12px 12px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.72), transparent 18%),
    linear-gradient(145deg, color-mix(in srgb, var(--token-color, var(--gold)) 84%, #fff 10%), color-mix(in srgb, var(--token-color, var(--gold)) 70%, #000 30%));
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.42),
    inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
  transform-origin: center bottom;
  transition:
    transform 680ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 180ms ease,
    opacity 160ms ease;
}

.board-token::after {
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 34px;
  height: 9px;
  border-radius: 50%;
  content: "";
  background: rgba(0, 0, 0, 0.36);
  transform: translate3d(-50%, 0, 0);
  filter: blur(2px);
}

.board-token i {
  position: absolute;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
}

.board-token b {
  position: absolute;
  bottom: 8px;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48);
}

.board-token small {
  position: absolute;
  left: 50%;
  bottom: -28px;
  max-width: 84px;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--ink);
  background: rgba(10, 10, 9, 0.78);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  font-size: 0.58rem;
  font-weight: 850;
  opacity: 0;
  text-overflow: ellipsis;
  transform: translate3d(-50%, 4px, 0);
  transition:
    opacity 140ms ease,
    transform 140ms var(--enter);
  white-space: nowrap;
}

.board-token:hover small,
.board-token.active-token small {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.board-token.active-token {
  box-shadow:
    0 0 0 5px rgba(243, 191, 85, 0.26),
    0 16px 30px rgba(0, 0, 0, 0.46),
    inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  animation: board-token-glow 1300ms ease-in-out infinite;
}

.board-token.just-moved {
  animation: board-token-land-glow 760ms var(--enter);
}

.side-panel {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

body[data-phase="waiting"] .side-panel {
  position: static;
  align-self: stretch;
  grid-template-rows: auto auto auto minmax(0, auto);
  gap: 8px;
  max-height: 100%;
  overflow: hidden;
  padding: 10px;
}

body[data-phase="game"] .side-panel {
  gap: 10px;
  padding: 12px;
}

body[data-phase="game"] .side-panel {
  position: fixed;
  right: 12px;
  bottom: 14px;
  z-index: 62;
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100dvh - 148px);
  overflow: auto;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(43, 147, 195, 0.08), rgba(243, 191, 85, 0.07)),
    rgba(18, 17, 16, 0.94);
  box-shadow:
    0 28px 84px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  transform: translate3d(calc(100% + 26px), 0, 0);
  transition:
    transform 280ms var(--move),
    opacity 220ms var(--enter);
  opacity: 0;
  pointer-events: none;
}

body.side-panel-open[data-phase="game"] .side-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}

.side-panel button {
  padding: 0 8px; /* Compact padding for narrow fluid columns */
  font-size: clamp(0.74rem, 1.2vw, 0.85rem); /* Proportional fluid font sizing */
}

.room-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.room-header h2 {
  max-width: 100%;
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
  overflow-wrap: anywhere;
}

body[data-phase="waiting"] .room-header {
  align-items: center;
  border-bottom: 1px solid rgba(255, 224, 150, 0.1);
  padding-bottom: 7px;
}

body[data-phase="waiting"] .room-header .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
}

body[data-phase="waiting"] .room-header h2 {
  font-size: 0.86rem;
  line-height: 1.12;
}

body[data-phase="waiting"] .room-header button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 0.66rem;
}

.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-phase="waiting"] .control-grid {
  gap: 6px;
}

body[data-phase="waiting"] .control-grid button {
  min-height: 36px;
  padding: 0 8px;
  font-size: 0.78rem;
}

body[data-phase="waiting"] .action-summary {
  gap: 3px;
  padding: 8px;
}

body[data-phase="waiting"] .action-summary h3 {
  font-size: 0.92rem;
}

body[data-phase="waiting"] .action-summary .muted,
body[data-phase="waiting"] .action-summary small,
body[data-phase="waiting"] .status-text {
  font-size: 0.72rem;
  line-height: 1.28;
}

body[data-phase="waiting"] .status-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-phase="game"] .control-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

body[data-phase="game"] .control-grid button {
  min-height: 42px;
}

.control-grid #rollButton {
  grid-column: 1 / -1;
  min-height: 52px;
  color: #f7f0df;
  background: linear-gradient(135deg, #2b93c3, #183f56);
  box-shadow: 0 16px 34px rgba(43, 147, 195, 0.22);
}

.control-grid #endTurnButton {
  grid-column: 1 / -1;
  min-height: 48px;
  border: 1px solid rgba(82, 211, 125, 0.28);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.16), rgba(76, 201, 232, 0.08)),
    rgba(255, 255, 255, 0.06);
}

.control-grid .sfx-toggle {
  grid-column: 1 / -1;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 224, 150, 0.2);
  color: rgba(255, 248, 228, 0.86);
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.12), rgba(82, 211, 125, 0.08)),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.control-grid .sfx-toggle:hover:not(:disabled),
.control-grid .sfx-toggle:focus-visible {
  border-color: rgba(76, 201, 232, 0.46);
  box-shadow:
    0 12px 26px rgba(76, 201, 232, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sfx-toggle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sfx-toggle-label {
  font-size: 0.76rem;
  line-height: 1;
}

[data-sfx-toggle] .sfx-toggle-icon-off,
[data-sfx-toggle][aria-pressed="false"] .sfx-toggle-icon-on {
  display: none;
}

[data-sfx-toggle][aria-pressed="false"] .sfx-toggle-icon-off {
  display: block;
}

.control-grid .sfx-toggle[aria-pressed="false"] {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 248, 228, 0.54);
  background: rgba(255, 255, 255, 0.04);
}

.control-grid #endTurnButton:not(:disabled) {
  box-shadow: 0 14px 30px rgba(82, 211, 125, 0.14);
  animation: end-turn-ready 1200ms ease-in-out infinite;
}

body[data-phase="lobby"] #rollButton,
body[data-phase="lobby"] #endTurnButton,
body[data-phase="waiting"] #rollButton,
body[data-phase="waiting"] #endTurnButton {
  display: none;
}

body[data-phase="game"] #endTurnButton {
  display: none;
}

.dashboard {
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 8%, rgba(243, 191, 85, 0.14), transparent 10rem),
    rgba(0, 0, 0, 0.24);
}

.ledger-panel {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 224, 150, 0.14);
  padding-top: 12px;
}

.ledger-empty {
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.ledger-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ledger-head h3 {
  margin: 0;
}

.ledger-head > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.ledger-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ledger-head-actions > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.ledger-head-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(255, 238, 196, 0.9);
  background: rgba(243, 191, 85, 0.07);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 850;
}

.ledger-list {
  display: grid;
  gap: 8px;
  max-height: 380px;
  overflow: auto;
  padding-right: 4px;
}

.ledger-item {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.ledger-item.new-ledger {
  border-color: rgba(76, 201, 232, 0.28);
  animation: log-enter 420ms var(--enter);
}

.ledger-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ledger-main > span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ledger-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ledger-effects {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: end;
  gap: 6px;
}

.ledger-effects span {
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 999px;
  padding: 4px 7px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.68rem;
  font-weight: 820;
}

.ledger-effects span.good {
  border-color: rgba(111, 255, 172, 0.22);
  color: #d8ffe7;
}

.ledger-effects span.warn {
  border-color: rgba(255, 224, 150, 0.25);
  color: #ffe3a9;
}

.ledger-effects span.bad {
  border-color: rgba(255, 147, 147, 0.25);
  color: #ffd0d0;
}

.ledger-effects b {
  color: var(--ink);
}

.finance-view .view-panel {
  gap: 10px;
}

.finance-view .dashboard {
  padding: 10px;
}

.finance-view .finance-hud {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.38fr);
  align-items: start;
  gap: 9px 12px;
}

.finance-view .dash-head {
  grid-column: 1 / -1;
  align-items: center;
  border-bottom: 1px solid rgba(255, 224, 150, 0.13);
  padding-bottom: 8px;
}

.finance-view .dash-head h3 {
  margin: 0;
  font-size: 1.18rem;
}

.finance-view .track-pill {
  border: 1px solid rgba(243, 191, 85, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
  text-align: right;
  background: rgba(243, 191, 85, 0.08);
}

.finance-view .bankruptcy-banner {
  grid-column: 1 / -1;
}

.finance-view .hero-stat {
  display: grid;
  grid-row: span 6;
  grid-template-columns: minmax(86px, 0.9fr) minmax(82px, 0.7fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  margin: 0;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.1), rgba(76, 201, 232, 0.06)),
    rgba(255, 255, 255, 0.035);
}

.finance-view .avatar-portrait.large,
.finance-view .avatar-portrait.large[data-career] {
  width: 92px;
  height: 92px;
}

.finance-view .freedom-ring {
  justify-self: end;
  width: 84px;
  height: 84px;
}

.finance-view .freedom-ring span {
  font-size: 1.12rem;
}

.finance-view .freedom-ring small {
  margin-top: 30px;
  font-size: 0.52rem;
}

.finance-view .profession {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.32;
}

.finance-view .dream-card,
.finance-view .freedom-target {
  margin: 0;
  padding: 8px 10px;
}

.finance-view .dream-card {
  gap: 2px;
}

.finance-view .progress {
  display: none;
}

.finance-view .finance-hud > .muted {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.3;
}

.finance-view .freedom-target strong {
  font-size: 0.86rem;
}

.finance-view .metrics {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.finance-view .metric {
  min-height: 58px;
  padding: 8px 9px;
}

.finance-view .metric span {
  font-size: 0.68rem;
  line-height: 1.18;
}

.finance-view .metric b {
  margin-top: 3px;
  font-size: 0.94rem;
}

.finance-view .life-time-card {
  grid-column: 1 / -1;
  gap: 7px;
  margin: 0;
  padding: 9px;
}

.finance-view .life-time-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-view .mini-list {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
  margin-top: 0;
  padding-top: 9px;
}

.finance-view .mini-list > h4 {
  margin: 0;
}

.finance-view .mini-list > h4:first-child,
.finance-view .hud-assets-list {
  grid-column: 1;
}

.finance-view .hud-list-header,
.finance-view .hud-liabilities-list {
  grid-column: 2;
}

.finance-view .hud-list-header {
  grid-row: 1;
  min-height: 22px;
  border-top: 0;
  margin: 0;
  padding: 0;
}

.finance-view .hud-assets-list,
.finance-view .hud-liabilities-list {
  align-self: start;
  margin-top: 0;
}

.finance-view .hud-item-row {
  min-height: 44px;
  align-items: start;
  gap: 8px;
  padding: 7px 9px;
}

.finance-view .hud-item-info {
  min-width: 0;
}

.finance-view .hud-item-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-view .hud-item-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.finance-view .last-card {
  grid-column: 1 / -1;
}

.log-view .ledger-panel {
  margin-top: 0;
  border-top-color: rgba(255, 224, 150, 0.1);
  padding-top: 0;
}

.log-view .ledger-empty {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.log-view .ledger-empty h3,
.log-view .ledger-empty p {
  margin: 0;
}

.log-view .ledger-empty h3 {
  font-size: 1.02rem;
}

.log-view .ledger-empty .muted {
  font-size: 0.78rem;
  line-height: 1.3;
}

.log-view .ledger-head {
  align-items: center;
  margin-bottom: 6px;
}

.log-view .ledger-head h3 {
  font-size: 1.06rem;
}

.log-view .ledger-head-actions > span {
  border: 1px solid rgba(255, 224, 150, 0.15);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.68rem;
}

.log-view .ledger-list {
  gap: 6px;
  max-height: 460px;
  padding-right: 2px;
}

.log-view .ledger-item {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.7fr);
  gap: 8px;
  padding: 8px 9px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.045), rgba(76, 201, 232, 0.035)),
    rgba(0, 0, 0, 0.2);
}

.log-view .ledger-main {
  gap: 2px;
}

.log-view .ledger-main > span {
  font-size: 0.62rem;
}

.log-view .ledger-main strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.log-view .ledger-main p {
  font-size: 0.74rem;
  line-height: 1.26;
}

.log-view .ledger-effects {
  gap: 4px;
}

.log-view .ledger-effects span {
  padding: 3px 6px;
  font-size: 0.64rem;
}

@media (max-width: 920px) {
  .finance-view .finance-hud {
    grid-template-columns: 1fr;
  }

  .finance-view .dash-head,
  .finance-view .bankruptcy-banner,
  .finance-view .hero-stat,
  .finance-view .profession,
  .finance-view .dream-card,
  .finance-view .progress,
  .finance-view .finance-hud > .muted,
  .finance-view .freedom-target,
  .finance-view .metrics,
  .finance-view .life-time-card,
  .finance-view .mini-list,
  .finance-view .last-card {
    grid-column: 1;
  }

  .finance-view .hero-stat {
    grid-row: auto;
  }

  .finance-view .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-view .mini-list {
    grid-template-columns: 1fr;
  }

  .finance-view .mini-list > h4:first-child,
  .finance-view .hud-assets-list,
  .finance-view .hud-list-header,
  .finance-view .hud-liabilities-list {
    grid-column: 1;
  }

  .finance-view .hud-list-header {
    grid-row: auto;
  }

  .log-view .ledger-item {
    grid-template-columns: 1fr;
  }

  .log-view .ledger-effects {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  .finance-view .metrics,
  .finance-view .life-time-grid {
    grid-template-columns: 1fr;
  }

  .finance-view .hero-stat {
    grid-template-columns: 1fr;
  }

  .finance-view .freedom-ring {
    justify-self: start;
  }
}

.empty-hud {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  display: grid;
  align-content: center;
  border-radius: 8px;
}

.hud-orbit {
  position: absolute;
  right: 14px;
  top: 20px;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(76, 201, 232, 0.4);
  border-radius: 50%;
  opacity: 0.64;
  animation: spin 5000ms linear infinite;
}

.hud-orbit::before {
  position: absolute;
  left: 10px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  content: "";
}

.dash-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.dash-head h3 {
  margin-bottom: 4px;
}

.track-pill,
.turn-badge {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 950;
}

.track-pill.bankrupt {
  border: 1px solid rgba(238, 98, 98, 0.42);
  border-radius: 999px;
  padding: 4px 9px;
  color: #ffb6b6;
  background: rgba(238, 98, 98, 0.12);
}

.bankruptcy-banner {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(238, 98, 98, 0.34);
  border-radius: 8px;
  padding: 9px 10px;
  color: #ffcdcd;
  background:
    linear-gradient(145deg, rgba(238, 98, 98, 0.14), rgba(0, 0, 0, 0.16)),
    rgba(0, 0, 0, 0.2);
}

.bankruptcy-banner b {
  color: #ffd2d2;
  font-size: 0.86rem;
}

.bankruptcy-banner span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.35;
}

.hero-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
}

.freedom-ring {
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1b1917 0 56%, transparent 58%),
    conic-gradient(var(--green) var(--progress), rgba(255, 255, 255, 0.12) 0);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.freedom-ring span,
.freedom-ring small {
  grid-area: 1 / 1;
}

.freedom-ring span {
  font-size: 1.28rem;
  font-weight: 950;
}

.freedom-ring small {
  margin-top: 34px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profession {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.38;
}

.small {
  margin-bottom: 8px;
}

.dream-card {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(141, 124, 255, 0.26);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(141, 124, 255, 0.16), rgba(0, 0, 0, 0.08)),
    rgba(0, 0, 0, 0.22);
}

.dream-card span {
  color: var(--violet);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.dream-card strong {
  line-height: 1.28;
}

.dream-card small {
  color: var(--muted);
  font-weight: 850;
}

.progress {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--green));
  transform-origin: left center;
  transition: transform 620ms var(--move);
}

.freedom-target {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(76, 201, 232, 0.18);
  border-radius: 8px;
  margin-top: 10px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.14), rgba(0, 0, 0, 0.08)),
    rgba(255, 255, 255, 0.045);
}

.freedom-target span {
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.freedom-target strong {
  font-size: 0.94rem;
}

.freedom-target.complete {
  border-color: rgba(82, 211, 125, 0.34);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.18), rgba(243, 191, 85, 0.08)),
    rgba(255, 255, 255, 0.05);
}

.freedom-target.complete span {
  color: var(--green);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.metric,
.stat {
  border: 1px solid rgba(255, 224, 150, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.74rem;
  transition:
    transform 180ms var(--enter),
    background-color 180ms ease,
    border-color 180ms ease;
}

.metric span {
  display: block;
  color: var(--muted);
}

.metric b,
.stat b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}

.metric.good b {
  color: var(--green);
}

.metric.warn b {
  color: var(--gold);
}

.metric.bad b {
  color: var(--red);
}

.life-time-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(76, 201, 232, 0.2);
  border-radius: 8px;
  margin: 0 0 10px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.12), rgba(82, 211, 125, 0.06)),
    rgba(255, 255, 255, 0.045);
}

.life-time-card.over {
  border-color: rgba(255, 93, 108, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 93, 108, 0.13), rgba(243, 191, 85, 0.07)),
    rgba(255, 255, 255, 0.045);
}

.life-time-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.life-time-head span,
.life-time-card small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.life-time-head b {
  color: var(--cyan);
  font-size: 1rem;
}

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

.life-time-grid span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.14);
  font-size: 0.72rem;
  font-weight: 850;
}

.life-time-grid b {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.9rem;
}

.mini-list {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255, 224, 150, 0.12);
  padding-top: 8px;
}

.mini-list h4 {
  margin: 6px 0 0;
  font-size: 0.84rem;
}

.mini-list p,
.last-card {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.mini-list p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.players {
  display: grid;
  gap: 9px;
}

.player-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.13);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.055);
  transition:
    transform 240ms var(--move),
    box-shadow 220ms var(--enter),
    border-color 180ms ease,
    background-color 180ms ease;
}

.player-card.active-player {
  border-color: rgba(243, 191, 85, 1);
  background: rgba(243, 191, 85, 0.15);
  box-shadow: 0 12px 28px rgba(243, 191, 85, 0.4);
  transform: translate3d(0, -2px, 0);
  animation: active-player-pulse 2s ease-in-out infinite;
}

@keyframes active-player-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(243, 191, 85, 0.3), inset 0 0 8px rgba(243, 191, 85, 0.15); border-color: rgba(243, 191, 85, 0.8); }
  50% { box-shadow: 0 0 28px rgba(243, 191, 85, 0.6), inset 0 0 16px rgba(243, 191, 85, 0.3); border-color: rgba(243, 191, 85, 1); }
}

.player-card.active-player .name-dot span:last-child {
  color: #fff;
  text-shadow: 0 0 10px rgba(243, 191, 85, 0.8), 0 0 20px rgba(243, 191, 85, 0.4);
}

.player-card.bot-thinking {
  animation: bot-thinking 1100ms ease-in-out infinite;
}

.player-card.profession-reveal {
  animation: card-reveal 720ms var(--enter) both;
}

.player-card.seat-empty {
  min-height: 72px;
  border-style: dashed;
  color: var(--quiet);
  background: rgba(255, 255, 255, 0.025);
}

.player-card.bankrupt {
  border-color: rgba(238, 98, 98, 0.35);
  background:
    linear-gradient(145deg, rgba(238, 98, 98, 0.1), rgba(0, 0, 0, 0.14)),
    rgba(255, 255, 255, 0.035);
  opacity: 0.78;
}

.player-card.bankrupt .turn-badge {
  color: #ffb6b6;
}

.player-card.surrendered .player-top {
  padding-right: 34px;
}

.surrender-stop-marker {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 22px;
  height: 22px;
  border: 2px solid #ff8d8d;
  border-radius: 50%;
  color: #ff8d8d;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(38, 9, 9, 0.86);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.24),
    0 8px 18px rgba(238, 98, 98, 0.24);
  pointer-events: none;
}

.surrender-stop-marker::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.endgame-summary-panel {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  border: 1px solid rgba(243, 191, 85, 0.34);
  border-radius: var(--modal-radius);
  padding: clamp(16px, 2vw, 24px);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.13), transparent 38%),
    linear-gradient(225deg, rgba(76, 201, 232, 0.12), transparent 42%),
    rgba(16, 19, 22, 0.98);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

.endgame-summary-panel.is-modal {
  width: var(--modal-w-xl);
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.endgame-summary-panel.is-inline {
  margin-bottom: 4px;
}

.endgame-summary-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 950;
}

.endgame-summary-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.endgame-summary-head h2 {
  margin: 0;
  font-size: var(--modal-title-md);
  line-height: 1.05;
}

.endgame-summary-head p:not(.eyebrow) {
  margin: 6px 0 0;
  color: rgba(247, 240, 223, 0.72);
  font-weight: 800;
}

.endgame-summary-open {
  flex: 0 0 auto;
  min-height: 42px;
}

.endgame-kpis,
.endgame-leader-grid,
.endgame-table-grid {
  display: grid;
  gap: 10px;
}

.endgame-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.endgame-kpis article,
.endgame-leader-card,
.endgame-table-card,
.endgame-section {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.endgame-kpis article {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.endgame-kpis span,
.endgame-leader-card span,
.endgame-section-head span {
  color: rgba(247, 240, 223, 0.62);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.endgame-kpis strong {
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1;
}

.endgame-section {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.endgame-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.endgame-section-head b {
  color: var(--gold);
  font-size: 0.82rem;
}

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

.endgame-freedom-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(82, 211, 125, 0.09);
}

.endgame-freedom-list strong {
  color: #d8ffe7;
}

.endgame-freedom-list span,
.endgame-freedom-list p {
  margin: 0;
  color: rgba(247, 240, 223, 0.72);
  font-size: 0.86rem;
}

.endgame-leader-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.endgame-leader-card {
  display: grid;
  min-height: 108px;
  align-content: start;
  gap: 7px;
  padding: 12px;
}

.endgame-leader-card strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.18;
}

.endgame-leader-card small {
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 900;
}

.endgame-leader-card.empty {
  opacity: 0.68;
}

.endgame-table-grid {
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.28fr);
}

.endgame-table-card {
  overflow-x: auto;
  padding: 12px;
}

.endgame-table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  margin-top: 8px;
}

.endgame-player-table {
  min-width: 840px;
}

.endgame-table th,
.endgame-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 7px;
  text-align: left;
  vertical-align: top;
  font-size: 0.86rem;
}

.endgame-table th {
  color: rgba(247, 240, 223, 0.56);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.endgame-table td:last-child,
.endgame-table th:last-child {
  text-align: right;
}

.endgame-table b,
.endgame-table small {
  display: block;
}

.endgame-table small {
  margin-top: 2px;
  color: rgba(247, 240, 223, 0.5);
  font-size: 0.72rem;
}

.endgame-chip {
  display: inline-grid;
  place-items: center;
  min-height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 2px 8px;
  color: rgba(247, 240, 223, 0.78);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.endgame-chip.good {
  border-color: rgba(82, 211, 125, 0.4);
  color: #d8ffe7;
  background: rgba(82, 211, 125, 0.12);
}

.endgame-chip.bad {
  border-color: rgba(255, 129, 129, 0.42);
  color: #ffb6b6;
  background: rgba(255, 129, 129, 0.11);
}

@media (max-width: 760px) {
  .endgame-summary-modal {
    padding: 10px;
  }
  .endgame-summary-panel.is-modal {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }
  .endgame-summary-head,
  .endgame-freedom-list div {
    display: grid;
  }
  .endgame-summary-open {
    width: 100%;
  }
  .endgame-kpis,
  .endgame-table-grid {
    grid-template-columns: 1fr;
  }
}

.seat-number {
  display: block;
  color: rgba(247, 240, 223, 0.42);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.seat-empty p {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.player-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.name-dot {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  font-weight: 900;
}

.name-dot > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.decision-modal {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  background: rgba(5, 5, 4, 0.48);
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 260ms var(--enter),
    transform 260ms var(--enter);
}

.decision-modal[data-open="true"] {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.decision-modal[data-kind="unit-market"] {
  z-index: 31;
}

.decision-modal[data-kind="negotiation"] {
  z-index: 130;
}

.financial-status-modal {
  z-index: 140;
}

.stress-info-modal {
  z-index: 160;
}

.stress-warning-modal {
  z-index: 161;
}

.endgame-summary-modal {
  z-index: 150;
  align-items: start;
  overflow: auto;
}

.negotiation-check-finance {
  width: 100%;
  margin: 8px 0 12px;
}

.financial-status-change-hint {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(82, 211, 125, 0.08);
  border: 1px solid rgba(111, 255, 172, 0.22);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(236, 244, 238, 0.86);
}

.financial-status-up {
  color: #75f0a4;
  font-weight: 700;
}

.financial-status-down {
  color: #ff7474;
  font-weight: 700;
}

.financial-status-surrender {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 120, 120, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(109, 31, 31, 0.32), rgba(18, 19, 26, 0.72)),
    rgba(0, 0, 0, 0.28);
}

.financial-status-surrender b {
  display: block;
  color: #ffd4d4;
  font-size: 0.88rem;
}

.financial-status-surrender span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 232, 232, 0.72);
  font-size: 0.76rem;
  line-height: 1.35;
}

.financial-status-surrender.locked {
  justify-content: start;
}

.financial-status-surrender-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 160, 160, 0.38);
  border-radius: 8px;
  padding: 9px 14px;
  color: #fff2f2;
  background: linear-gradient(135deg, #9e2e2e, #5c1818);
  font-weight: 850;
  cursor: pointer;
}

.financial-status-surrender-btn:hover:not(:disabled) {
  border-color: rgba(255, 210, 210, 0.62);
  transform: translateY(-1px);
}

.financial-status-surrender-btn:disabled {
  cursor: wait;
  opacity: 0.64;
}

.surrender-banner {
  border-color: rgba(255, 176, 93, 0.34);
  color: #ffe2bd;
  background:
    linear-gradient(145deg, rgba(255, 152, 71, 0.13), rgba(0, 0, 0, 0.16)),
    rgba(0, 0, 0, 0.2);
}

.decision-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 16px;
  width: var(--modal-w-lg);
  max-width: 100%;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: var(--modal-radius);
  padding: 14px;
  background:
    linear-gradient(118deg, rgba(243, 191, 85, 0.16), transparent 36%),
    linear-gradient(242deg, rgba(76, 201, 232, 0.12), transparent 42%),
    rgba(24, 22, 20, 0.97);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: modal-rise 300ms var(--enter) both;
}

.decision-panel * {
  min-width: 0;
}

.career-roll-panel,
.dream-picker-panel {
  width: var(--modal-w-lg);
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.32);
  border-radius: var(--modal-radius);
  padding: 16px;
  background:
    linear-gradient(118deg, rgba(243, 191, 85, 0.16), transparent 38%),
    linear-gradient(242deg, rgba(76, 201, 232, 0.1), transparent 44%),
    rgba(18, 17, 16, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: modal-rise 300ms var(--enter) both;
}

.career-start-card {
  display: grid;
  width: var(--modal-w-sm);
  justify-items: center;
  gap: 18px;
  padding: 28px 24px;
  text-align: center;
}

.career-start-copy {
  display: grid;
  gap: 6px;
}

.career-start-copy .eyebrow,
.career-result-identity .eyebrow,
.dream-picker-copy .eyebrow {
  margin: 0;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.career-start-copy h2,
.career-result-identity h2,
.dream-picker-copy h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}

.career-start-copy h2 {
  font-size: var(--modal-title-md);
}

.career-start-icon {
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 240, 193, 0.18), transparent 42%),
    rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 34px rgba(243, 191, 85, 0.18);
  font-size: 4.25rem;
  line-height: 1;
}

.career-start-icon.is-compact {
  font-size: 2.5rem;
}

.career-randomizing-card .eyebrow {
  animation: pulse 0.5s infinite alternate;
}

.career-randomizing-card h2 {
  filter: blur(1px);
}

.career-randomizing-card .career-start-icon {
  transform: translateY(var(--career-random-y, 0));
  filter: blur(2px);
}

.career-start-card > .muted {
  max-width: 26rem;
  margin: 0;
  line-height: 1.45;
}

.career-primary-action,
.dream-confirm-button {
  width: 100%;
  border-radius: 8px;
  padding: 0.95rem 1rem;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 8px 25px rgba(243, 191, 85, 0.28);
}

.career-roll-panel.career-result-card {
  display: grid;
  width: var(--modal-w-xl);
  max-height: calc(100dvh - 34px);
  grid-template-columns: minmax(210px, 0.5fr) minmax(470px, 1.05fr) minmax(410px, 1fr);
  grid-template-areas:
    "banner banner banner"
    "stats power identity"
    "details details identity";
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border-radius: var(--modal-radius);
}

.career-result-card *,
.career-profession-banner,
.career-power-card,
.career-result-identity,
.career-result-finance,
.dream-picker-copy,
.dream-feature-card {
  min-width: 0;
}

.career-profession-banner,
.career-power-card,
.career-result-identity,
.career-result-finance {
  min-height: 0;
  font-family: inherit;
}

.career-profession-banner {
  grid-area: banner;
  display: grid;
  min-height: 76px;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.36);
  border-radius: 12px;
  padding: 12px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(243, 191, 85, 0.035)),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(243, 191, 85, 0.12);
}

.career-profession-banner h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-md);
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(243, 191, 85, 0.18);
}

.career-result-identity {
  --career-side-width: 100%;
  grid-area: identity;
  display: grid;
  grid-template-rows: auto auto auto;
  width: var(--career-side-width);
  gap: 8px;
  align-content: start;
  align-self: stretch;
  justify-items: center;
  justify-self: stretch;
  border: 1px solid rgba(255, 224, 150, 0.26);
  border-radius: 12px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(243, 191, 85, 0.12), transparent 48%),
    rgba(0, 0, 0, 0.24);
}

.career-result-icon {
  position: relative;
  display: grid;
  width: var(--career-side-width);
  height: auto;
  aspect-ratio: 4 / 4.9;
  justify-self: center;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.35);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 20%, rgba(243, 191, 85, 0.18), transparent 48%),
    rgba(0, 0, 0, 0.3);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font-size: 3.8rem;
  line-height: 1;
}

.career-result-icon::after {
  display: none;
  position: absolute;
  right: 24%;
  bottom: 30px;
  left: 24%;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  filter: blur(4px);
  content: "";
}

.career-mobile-power-card {
  display: none;
}

.career-mobile-power-chart {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.career-mobile-vitals,
.career-mobile-footer-action {
  display: none;
}

.career-mobile-vital {
  --stat-accent: rgba(243, 191, 85, 0.58);
  --stat-glow: rgba(243, 191, 85, 0.13);
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(90deg, var(--stat-glow), transparent 58%),
    linear-gradient(180deg, rgba(18, 18, 14, 0.94), rgba(4, 5, 5, 0.88)),
    rgba(0, 0, 0, 0.68);
  box-shadow:
    inset 3px 0 0 var(--stat-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.career-mobile-vital.income {
  --stat-accent: rgba(75, 220, 122, 0.76);
  --stat-glow: rgba(75, 220, 122, 0.18);
}

.career-mobile-vital.expense {
  --stat-accent: rgba(255, 94, 101, 0.78);
  --stat-glow: rgba(255, 94, 101, 0.17);
}

.career-mobile-vital.cashflow.positive {
  --stat-accent: rgba(243, 191, 85, 0.82);
  --stat-glow: rgba(243, 191, 85, 0.2);
}

.career-mobile-vital.cashflow.negative {
  --stat-accent: rgba(255, 94, 101, 0.78);
  --stat-glow: rgba(255, 94, 101, 0.17);
}

.career-mobile-vital.time {
  --stat-accent: rgba(247, 240, 223, 0.58);
  --stat-glow: rgba(247, 240, 223, 0.12);
}

.career-mobile-vital.stress.good {
  --stat-accent: rgba(141, 124, 255, 0.76);
  --stat-glow: rgba(141, 124, 255, 0.2);
}

.career-mobile-vital.stress.warn {
  --stat-accent: rgba(141, 124, 255, 0.84);
  --stat-glow: rgba(141, 124, 255, 0.24);
}

.career-mobile-vital.stress.bad {
  --stat-accent: rgba(141, 124, 255, 0.92);
  --stat-glow: rgba(141, 124, 255, 0.28);
}

.career-result-pawn {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.career-result-fallback {
  color: #15130f;
  font-size: 4rem;
  font-weight: 950;
}

.career-result-copy {
  display: grid;
  width: var(--career-side-width);
  gap: 0;
  align-content: start;
  min-height: 0;
  text-align: center;
}

.career-result-identity h2:not(.career-result-nameplate) {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-lg);
  line-height: 0.98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.career-result-note {
  display: block;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.career-result-start-row {
  display: grid;
  width: var(--career-side-width);
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 8px;
}

.career-result-start-row .career-primary-action {
  min-height: 48px;
  border-radius: 10px;
  padding: 0.6rem 0.72rem;
  font-size: 0.88rem;
  font-weight: 950;
}

.career-cashflow-tile,
.dream-cost-tile {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 48px;
  border: 1px solid rgba(243, 191, 85, 0.48);
  border-radius: 10px;
  padding: 8px 10px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.18), rgba(243, 191, 85, 0.05)),
    rgba(0, 0, 0, 0.24);
}

.career-cashflow-tile.negative {
  border-color: rgba(238, 98, 98, 0.42);
  background:
    linear-gradient(135deg, rgba(238, 98, 98, 0.14), transparent),
    rgba(0, 0, 0, 0.24);
}

.career-cashflow-tile span,
.dream-cost-tile span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.7rem;
  font-weight: 950;
}

.career-cashflow-tile strong,
.dream-cost-tile strong {
  color: var(--gold);
  font-size: clamp(1.12rem, 1.55vw, 1.48rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.career-cashflow-tile.negative strong {
  color: var(--red);
}

.career-result-finance {
  grid-area: finance;
  display: grid;
  gap: 10px;
  align-content: start;
}

.career-result-head {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 4px 0;
}

.career-result-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.career-result-head p {
  max-width: 620px;
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.24;
}

.career-power-card {
  grid-area: power;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  width: 100%;
  min-height: 486px;
  align-self: stretch;
  justify-self: stretch;
  justify-items: center;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.3);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 32%, rgba(76, 201, 232, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(243, 191, 85, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 16px 34px rgba(0, 0, 0, 0.2);
}

.career-power-card::before {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 10px;
  pointer-events: none;
  content: "";
}

.career-power-card > span {
  position: relative;
  z-index: 1;
  justify-self: start;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.career-power-chart {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 440px);
  max-height: 440px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.32));
}

.career-stat-grid {
  grid-area: stats;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 8px;
  align-self: stretch;
}

.career-stat {
  --stat-accent: rgba(243, 191, 85, 0.58);
  --stat-glow: rgba(243, 191, 85, 0.13);
  position: relative;
  display: grid;
  min-height: 0;
  align-content: center;
  gap: 4px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 9px 11px;
  background:
    linear-gradient(90deg, var(--stat-glow), transparent 54%),
    linear-gradient(180deg, rgba(18, 18, 14, 0.92), rgba(4, 5, 5, 0.88)),
    rgba(0, 0, 0, 0.68);
  box-shadow:
    inset 4px 0 0 var(--stat-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 20px rgba(0, 0, 0, 0.16);
}

.career-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 100% 0%, var(--stat-glow), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%);
  pointer-events: none;
}

.career-stat span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.12;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
}

.career-stat b {
  color: var(--ink);
  font-size: clamp(1.42rem, 2.05vw, 1.86rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.42),
    0 0 16px var(--stat-glow);
}

.career-stat.income {
  --stat-accent: rgba(75, 220, 122, 0.76);
  --stat-glow: rgba(75, 220, 122, 0.18);
}

.career-stat.income b {
  color: var(--green);
}

.career-stat.savings {
  --stat-accent: rgba(76, 201, 232, 0.76);
  --stat-glow: rgba(76, 201, 232, 0.18);
}

.career-stat.savings b {
  color: var(--cyan);
}

.career-stat.expense {
  --stat-accent: rgba(255, 94, 101, 0.78);
  --stat-glow: rgba(255, 94, 101, 0.17);
}

.career-stat.expense b {
  color: var(--red);
}

.career-stat.cashflow.positive {
  --stat-accent: rgba(243, 191, 85, 0.82);
  --stat-glow: rgba(243, 191, 85, 0.2);
}

.career-stat.cashflow.negative {
  --stat-accent: rgba(255, 94, 101, 0.78);
  --stat-glow: rgba(255, 94, 101, 0.17);
}

.career-stat.time {
  --stat-accent: rgba(247, 240, 223, 0.58);
  --stat-glow: rgba(247, 240, 223, 0.12);
}

.career-stat.stress.good {
  --stat-accent: rgba(141, 124, 255, 0.76);
  --stat-glow: rgba(141, 124, 255, 0.2);
}

.career-stat.stress.warn {
  --stat-accent: rgba(141, 124, 255, 0.84);
  --stat-glow: rgba(141, 124, 255, 0.24);
}

.career-stat.stress.bad {
  --stat-accent: rgba(141, 124, 255, 0.92);
  --stat-glow: rgba(141, 124, 255, 0.28);
}

.career-stat.cashflow.positive b { color: var(--gold); }
.career-stat.cashflow.negative b { color: var(--red); }
.career-stat.stress.good b,
.career-stat.stress.warn b,
.career-stat.stress.bad b { color: var(--violet); }

.career-detail-grid {
  grid-area: details;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 10px;
  min-height: 0;
}

.career-detail-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
}

.career-detail-card:not([open]) {
  grid-template-rows: auto;
}

.career-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  list-style: none;
}

.career-detail-head::-webkit-details-marker {
  display: none;
}

.career-detail-head::after {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.24);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.22);
  content: "-";
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.career-detail-card:not([open]) .career-detail-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.career-detail-card:not([open]) .career-detail-head::after {
  content: "+";
}

.career-detail-head span {
  color: var(--gold);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.12;
}

.career-detail-head b {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.career-line-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 6px;
}

.career-line-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.18;
}

.career-line-item:last-child {
  border-bottom: 0;
}

.career-line-item span {
  min-width: 0;
}

.career-line-item b {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.career-line-item b.danger {
  color: #ff8d8d;
}

.career-liability-card .career-detail-head b,
.career-liability-card .career-line-item,
.career-liability-card .career-line-item b {
  color: #fff;
}

.career-empty {
  margin: 0;
  color: var(--quiet);
  font-size: 0.9rem;
}

.dream-picker-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.86fr) minmax(360px, 1.14fr);
  gap: 14px;
  border-color: rgba(141, 124, 255, 0.38);
  background:
    linear-gradient(118deg, rgba(141, 124, 255, 0.18), transparent 38%),
    linear-gradient(242deg, rgba(76, 201, 232, 0.1), transparent 44%),
    rgba(15, 15, 15, 0.98);
}

.dream-picker-copy {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  border: 1px solid rgba(141, 124, 255, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
}

.dream-picker-copy .eyebrow {
  color: var(--violet);
}

.dream-picker-copy h2 {
  font-size: var(--modal-title-sm);
}

.dream-picker-copy .muted {
  margin: 0;
  line-height: 1.42;
}

.dream-cost-tile {
  align-self: end;
  border-color: rgba(141, 124, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(141, 124, 255, 0.18), rgba(76, 201, 232, 0.06)),
    rgba(0, 0, 0, 0.24);
}

.dream-cost-tile strong {
  color: #b8a7ff;
}

.dream-confirm-button {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  box-shadow: 0 8px 25px rgba(141, 124, 255, 0.3);
}

.dream-feature-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(141, 124, 255, 0.22), transparent 13rem),
    radial-gradient(circle at 90% 80%, rgba(76, 201, 232, 0.13), transparent 11rem),
    rgba(0, 0, 0, 0.28);
}

.dream-index {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 9px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.26);
  font-size: 0.74rem;
  font-weight: 950;
}

.dream-feature-icon {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid rgba(141, 124, 255, 0.28);
  border-radius: 8px;
  background: rgba(141, 124, 255, 0.1);
  box-shadow: 0 0 34px rgba(141, 124, 255, 0.18);
  font-size: 3rem;
  line-height: 1;
}

.dream-feature-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.55rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.dream-feature-card p {
  display: -webkit-box;
  max-width: 36rem;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--modal-body);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.dream-nav-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.dream-nav-button {
  min-height: 44px;
  border-radius: 8px;
  font-weight: 900;
}

.repay-notice-modal {
  z-index: 32;
  background:
    radial-gradient(circle at 50% 42%, rgba(85, 209, 137, 0.22), transparent 34%),
    rgba(5, 5, 4, 0.58);
}

.repay-notice-panel {
  width: var(--modal-w-sm);
  border: 1px solid rgba(118, 235, 162, 0.42);
  border-radius: var(--modal-radius);
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(142deg, rgba(72, 192, 116, 0.24), transparent 42%),
    linear-gradient(236deg, rgba(243, 191, 85, 0.14), transparent 46%),
    rgba(18, 22, 18, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 40px rgba(87, 215, 139, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modal-rise 300ms var(--enter) both, repay-confirm-pulse 820ms ease-out both;
}

.repay-notice-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin: 0 auto 14px;
  border: 1px solid rgba(118, 235, 162, 0.48);
  border-radius: 999px;
  color: #c9ffd9;
  background: rgba(66, 180, 106, 0.18);
  box-shadow: 0 0 28px rgba(91, 220, 139, 0.26);
}

.repay-notice-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repay-notice-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-lg);
  letter-spacing: 0;
}

.repay-notice-copy {
  margin: 10px auto 0;
  color: var(--muted);
  font-size: var(--modal-body);
  line-height: 1.55;
}

.repay-notice-copy strong {
  display: block;
  margin-top: 8px;
  color: #d6ffdf;
  font-size: clamp(2.3rem, 5vw, 3.25rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(111, 240, 154, 0.28);
}

.forced-asset-sale-modal {
  z-index: 40;
  background:
    radial-gradient(circle at 50% 38%, rgba(225, 104, 104, 0.22), transparent 34%),
    rgba(5, 5, 4, 0.68);
}

.forced-asset-sale-panel {
  width: var(--modal-w-sm);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid rgba(225, 104, 104, 0.42);
  border-radius: var(--modal-radius);
  padding: 22px;
  text-align: center;
  background:
    linear-gradient(142deg, rgba(225, 104, 104, 0.2), transparent 42%),
    linear-gradient(236deg, rgba(243, 191, 85, 0.14), transparent 46%),
    rgba(18, 16, 16, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 40px rgba(225, 104, 104, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modal-rise 300ms var(--enter) both;
}

.forced-asset-sale-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-md);
  letter-spacing: 0;
}

.forced-asset-sale-copy {
  margin: 10px auto 16px;
  color: var(--muted);
  font-size: var(--modal-body);
  line-height: 1.55;
}

.forced-asset-sale-list {
  text-align: left;
}

.forced-asset-sale-list [data-forced-asset-sell] {
  border: 1px solid rgba(225, 104, 104, 0.5);
  border-radius: 7px;
  padding: 5px 11px;
  background: rgba(225, 104, 104, 0.14);
  color: #f3b5b5;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.forced-asset-sale-list [data-forced-asset-sell]:hover {
  background: rgba(225, 104, 104, 0.26);
  border-color: rgba(225, 104, 104, 0.75);
}

.forced-asset-sale-list [data-forced-asset-sell]:disabled {
  opacity: 0.5;
  cursor: default;
}

.repay-notice-details {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.repay-notice-details div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  color: var(--muted);
  text-align: left;
}

.repay-notice-details strong {
  color: var(--ink);
  text-align: right;
}

.repay-notice-ok {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 9px;
  color: #12100d;
  background: var(--gold);
  box-shadow: 0 16px 28px rgba(243, 191, 85, 0.2);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
}

.repay-notice-ok:focus-visible {
  outline: 3px solid rgba(121, 227, 255, 0.8);
  outline-offset: 3px;
}

.repay-confirm-panel {
  border-color: rgba(243, 191, 85, 0.46);
  background:
    linear-gradient(142deg, rgba(243, 191, 85, 0.2), transparent 44%),
    linear-gradient(236deg, rgba(255, 138, 138, 0.12), transparent 48%),
    rgba(20, 19, 15, 0.98);
}

.repay-confirm-icon {
  border-color: rgba(243, 191, 85, 0.5);
  color: #ffe6ad;
  background: rgba(243, 191, 85, 0.16);
  box-shadow: 0 0 28px rgba(243, 191, 85, 0.28);
}

.repay-confirm-panel .repay-notice-copy strong {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  color: #ffe6ad;
  text-shadow: none;
}

.repay-confirm-details strong.cost {
  color: #ff9b9b;
}

.repay-confirm-details strong.good {
  color: #8ef0ad;
}

.repay-confirm-details strong.bad {
  color: #ff8181;
}

.repay-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}

.repay-confirm-cancel,
.repay-confirm-ok {
  min-height: 54px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 900;
  cursor: pointer;
}

.repay-confirm-cancel {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

.repay-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

.repay-confirm-ok {
  border: 0;
  color: #12100d;
  background: var(--gold);
  box-shadow: 0 16px 28px rgba(243, 191, 85, 0.2);
}

.repay-confirm-ok:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.repay-confirm-cancel:focus-visible,
.repay-confirm-ok:focus-visible {
  outline: 3px solid rgba(121, 227, 255, 0.8);
  outline-offset: 3px;
}

.sell-rights-notice-modal {
  z-index: 33;
  background:
    radial-gradient(circle at 50% 44%, rgba(243, 191, 85, 0.18), transparent 34%),
    rgba(5, 5, 4, 0.62);
}

.table-impact-notice-modal {
  z-index: 34;
  background:
    radial-gradient(circle at 50% 44%, rgba(76, 201, 232, 0.16), transparent 34%),
    rgba(5, 5, 4, 0.58);
}

.table-impact-panel {
  display: grid;
  gap: 16px;
  width: var(--modal-w-sm);
  border: 1px solid rgba(255, 224, 150, 0.34);
  border-radius: var(--modal-radius);
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.16), transparent 42%),
    rgba(17, 18, 16, 0.98);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.66),
    0 0 40px rgba(243, 191, 85, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modal-rise 260ms var(--enter) both;
}

.table-impact-panel.good {
  border-color: rgba(111, 255, 172, 0.5);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.66),
    0 0 46px rgba(111, 255, 172, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.table-impact-panel.bad {
  border-color: rgba(255, 147, 147, 0.52);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.66),
    0 0 46px rgba(255, 116, 116, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.table-impact-head {
  display: grid;
  gap: 4px;
}

.table-impact-head span {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.table-impact-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-lg);
  line-height: 1.05;
}

.table-impact-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--modal-body);
  font-weight: 780;
  line-height: 1.45;
}

.table-impact-grid {
  display: grid;
  gap: 10px;
}

.table-impact-grid b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.045);
}

.table-impact-grid b.good {
  border-color: rgba(111, 255, 172, 0.28);
  background: rgba(66, 180, 106, 0.12);
}

.table-impact-grid b.bad {
  border-color: rgba(255, 147, 147, 0.3);
  background: rgba(255, 116, 116, 0.12);
}

.table-impact-grid span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  font-weight: 900;
}

.table-impact-grid em {
  color: var(--ink);
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 950;
}

.table-impact-ack {
  min-height: 52px;
  border: 0;
  border-radius: 9px;
  color: #14100a;
  background: var(--gold);
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 950;
  cursor: pointer;
}

.buyout-result-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buyout-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid rgba(111, 255, 172, 0.24);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(66, 180, 106, 0.1);
}

.buyout-result-name {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.buyout-result-figs {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

.buyout-result-figs > span {
  display: grid;
  gap: 2px;
  text-align: right;
}

.buyout-result-figs small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.buyout-result-figs b {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
}

.buyout-result-figs .net b {
  color: var(--gold);
}

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

.buyout-result-totals b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.045);
}

.buyout-result-totals b.good {
  border-color: rgba(111, 255, 172, 0.28);
  background: rgba(66, 180, 106, 0.12);
}

.buyout-result-totals b.warn {
  border-color: rgba(255, 224, 150, 0.28);
  background: rgba(243, 191, 85, 0.1);
}

.buyout-result-totals span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
  font-weight: 900;
}

.buyout-result-totals em {
  color: var(--ink);
  font-style: normal;
  font-size: 1.02rem;
  font-weight: 950;
}

@media (max-width: 560px) {
  .buyout-result-totals {
    grid-template-columns: 1fr;
  }
  .buyout-result-figs {
    gap: 12px;
  }
}

.stress-warning-ack {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  color: #14100a;
  background: var(--gold);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 950;
  cursor: pointer;
}

.sell-rights-notice-panel {
  width: var(--modal-w-md);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  border: 1px solid rgba(255, 224, 150, 0.32);
  border-radius: var(--modal-radius);
  padding: 18px;
  background:
    linear-gradient(130deg, rgba(243, 191, 85, 0.2), transparent 38%),
    linear-gradient(236deg, rgba(76, 201, 232, 0.13), transparent 44%),
    rgba(18, 18, 16, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.64),
    0 0 42px rgba(243, 191, 85, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modal-rise 260ms var(--enter) both;
}

.sell-rights-notice-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.sell-rights-notice-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-lg);
  letter-spacing: 0;
}

.sell-rights-notice-head p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--modal-body);
  line-height: 1.55;
}

.sell-rights-notice-close {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.5rem;
  font-weight: 900;
  cursor: pointer;
}

.sell-rights-deal-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.sell-rights-deal-summary span,
.sell-rights-deal-summary b,
.sell-rights-deal-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sell-rights-deal-summary span {
  color: var(--ink);
  font-weight: 900;
}

.sell-rights-deal-summary b {
  color: var(--gold);
}

.sell-rights-deal-summary small {
  color: var(--muted);
  font-weight: 800;
}

.sell-rights-deal-detail {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.sell-rights-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.13), rgba(76, 201, 232, 0.05)),
    rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
}

.sell-rights-detail-toggle b {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #16120a;
  background: var(--gold);
  line-height: 1;
}

.sell-rights-deal-detail-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 10px;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(0, 0, 0, 0.22);
}

.sell-rights-deal-detail-panel[hidden] {
  display: none;
}

.sell-rights-deal-detail-panel > strong {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

.sell-rights-deal-detail-panel > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.sell-rights-deal-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sell-rights-deal-detail-grid span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.04);
}

.sell-rights-deal-detail-grid small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
}

.sell-rights-deal-detail-grid b {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sell-rights-response-list {
  display: grid;
  gap: 10px;
}

.sell-rights-response-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.sell-rights-response-card strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.sell-rights-response-card small,
.sell-rights-response-card em {
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
}

.sell-rights-response-card > span {
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
}

.sell-rights-response-card > em {
  grid-column: 1 / -1;
}

.sell-rights-response-card.accepted {
  border-color: rgba(91, 220, 139, 0.42);
  background: rgba(66, 180, 106, 0.13);
}

.sell-rights-response-card.accepted > span {
  color: #d6ffdf;
  background: rgba(66, 180, 106, 0.18);
}

.sell-rights-response-card.countered {
  border-color: rgba(243, 191, 85, 0.46);
  background: rgba(243, 191, 85, 0.12);
}

.sell-rights-response-card.countered > span {
  color: var(--gold);
  background: rgba(243, 191, 85, 0.16);
}

.sell-rights-response-card.declined {
  border-color: rgba(238, 98, 98, 0.38);
  background: rgba(238, 98, 98, 0.1);
}

.sell-rights-response-card.declined > span {
  color: #ffd4d4;
  background: rgba(238, 98, 98, 0.14);
}

.sell-rights-response-card.pending {
  border-color: rgba(121, 227, 255, 0.26);
  background: rgba(76, 201, 232, 0.08);
}

.sell-rights-reprice-panel {
  margin-top: 14px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.sell-rights-reprice-panel label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-weight: 900;
}

.sell-rights-notice-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.sell-rights-notice-actions button {
  min-height: 52px;
}

.landing-event-modal {
  z-index: 28;
  place-items: start center;
  overflow: auto;
}

.landing-event-modal[data-minimized="true"] {
  inset: 50% auto auto 18px;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  pointer-events: none;
  transform: translate3d(0, -50%, 0);
}

.landing-event-modal[data-minimized="true"][data-open="true"] {
  pointer-events: none;
  opacity: 1;
}

.landing-event-dock {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  width: min(230px, calc(100vw - 32px));
  min-height: 62px;
  border: 1px solid rgba(255, 224, 150, 0.38);
  border-radius: 0 12px 12px 0;
  padding: 10px 12px 10px 10px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.2), rgba(76, 201, 232, 0.1)),
    rgba(13, 15, 15, 0.94);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  text-align: left;
  transform: translate3d(-8px, 0, 0);
}

.landing-event-dock span {
  grid-row: 1 / 3;
  display: grid;
  width: 24px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.32);
  font-size: 1.25rem;
  font-weight: 950;
}

.landing-event-dock b,
.landing-event-dock small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-event-dock b {
  font-size: 0.9rem;
  line-height: 1.12;
}

.landing-event-dock small {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
}

.win-guide-modal {
  z-index: 29;
}

.turn-action-modal {
  z-index: 27;
  background: rgba(5, 5, 4, 0.18) !important;
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.turn-action-modal[data-open="true"] {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(80px, 10vh);
}

.turn-action-modal .turn-action-panel {
  pointer-events: auto;
  border-color: rgba(243, 191, 85, 0.45);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 45px rgba(243, 191, 85, 0.28);
}

.turn-action-modal[data-minimized="true"] {
  inset: auto 18px 24px auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: none !important;
  backdrop-filter: none !important;
}

.turn-action-modal[data-minimized="true"][data-open="true"] {
  pointer-events: none !important;
  opacity: 1 !important;
}

.turn-action-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  width: min(230px, calc(100vw - 32px));
  min-height: 62px;
  border: 1px solid rgba(255, 224, 150, 0.38);
  border-radius: 12px 0 0 12px;
  padding: 10px 10px 10px 12px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.2), rgba(76, 201, 232, 0.1)),
    rgba(13, 15, 15, 0.94);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: auto;
  text-align: right;
  transform: translate3d(8px, 0, 0);
  cursor: pointer;
}

.turn-action-dock span {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  width: 24px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.32);
  font-size: 1.25rem;
  font-weight: 950;
}

.turn-action-dock b,
.turn-action-dock small {
  grid-column: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-action-dock b {
  font-size: 0.9rem;
  line-height: 1.12;
}

.turn-action-dock small {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
}

.turn-action-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.turn-action-minimize-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: 999px;
  padding: 0 10px 0 7px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 241, 199, 0.18), rgba(243, 191, 85, 0.08)),
    rgba(7, 8, 8, 0.82);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  cursor: pointer;
  pointer-events: auto;
}

.turn-action-minimize-btn span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.32);
  font-size: 0.9rem;
  line-height: 1;
}

.turn-action-minimize-btn b {
  font-size: 0.7rem;
}


.turn-action-panel {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgba(255, 224, 150, 0.34);
  border-radius: 12px;
  padding: 18px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.18), transparent 34%),
    linear-gradient(225deg, rgba(76, 201, 232, 0.12), transparent 44%),
    rgba(20, 19, 17, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 54px rgba(243, 191, 85, 0.16);
  animation: modal-rise 300ms var(--enter) both;
}

.turn-action-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.turn-action-head h2 {
  margin: 3px 0 0;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  line-height: 1.08;
}

.turn-action-head > span {
  border: 1px solid rgba(76, 201, 232, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--cyan);
  background: rgba(76, 201, 232, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.turn-action-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.turn-action-summary div {
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.055);
}

.turn-action-summary span,
.turn-subpanel-head span,
.turn-debt-row span,
.turn-loan-grid small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.turn-action-summary strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.1;
}

.turn-time-label,
.turn-metric-label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

.turn-info-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  align-self: center;
  border: none;
  border-radius: 50%;
  padding: 0;
  color: var(--gold);
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
  transition: color 160ms ease;
}
.turn-info-button:hover,
.turn-info-button:hover:not(:disabled),
.turn-info-button:active:not(:disabled) {
  color: #fff;
  box-shadow: none;
  transform: none;
}

.turn-info-button.stress-info-trigger {
  cursor: pointer;
  color: #ff9393;
}

.turn-info-button.stress-info-trigger:hover,
.turn-info-button.stress-info-trigger:active:not(:disabled) {
  color: #ffb3b3;
  transform: scale(1.25);
  filter: drop-shadow(0 0 4px rgba(255, 147, 147, 0.55));
}
.turn-action-summary .turn-summary-card.time {
  overflow: visible;
}
.turn-action-modal[data-mode="end"] .turn-review-title {
  color: var(--gold);
  letter-spacing: 0.06em;
}
.turn-info-button svg {
  display: block;
  width: 13px;
  height: 13px;
}

.loan-capacity-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0 !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  max-width: max-content !important;
}

.landing-event-copy .loan-capacity-label .turn-info-button {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  justify-self: auto !important;
  margin-left: 4px;
  padding: 0 !important;
}

.route-board {
  pointer-events: none;
}

.turn-info-button::after {
  display: none;
}

.turn-info-tip {
  position: fixed;
  z-index: 9999;
  max-width: min(300px, 78vw);
  border: 1px solid rgba(255, 224, 150, 0.34);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(10, 11, 11, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.turn-info-tip.show {
  opacity: 1;
}

/* Floating board-tile tooltip, portaled to <body> so it always renders
   above player tokens (z-index up to 70) instead of being clipped by the
   hovered tile's own stacking context (max z-index 25). */
.board-tile-tip {
  position: fixed;
  z-index: 9999;
  display: grid;
  width: max-content;
  max-width: 240px;
  gap: 3px;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.1), rgba(76, 201, 232, 0.07)),
    rgba(8, 8, 7, 0.92);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate3d(-50%, 4px, 0) scale(0.96);
  transition:
    opacity 160ms ease,
    transform 180ms ease;
}

.board-tile-tip.show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.board-tile-tip strong {
  display: block;
  color: #fff7dd;
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1.22;
}

.board-tile-tip small {
  display: block;
  color: rgba(247, 240, 223, 0.74);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.36;
}

.sell-rights-result-panel {
  gap: 12px;
}

.sell-rights-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sell-rights-result-effects {
  margin-top: 0;
}

.turn-roll-primary,
.turn-end-primary {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 122px;
  place-items: center;
  border: 1px solid rgba(255, 240, 193, 0.56);
  border-radius: 10px;
  color: #14100a;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.74), transparent 26%),
    linear-gradient(135deg, #ffeeb8, #f3bf55 62%, #b98222);
  box-shadow:
    0 24px 52px rgba(243, 191, 85, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 180ms var(--enter),
    box-shadow 180ms var(--enter),
    filter 180ms var(--enter);
}

.turn-roll-primary {
  gap: 2px;
  min-height: 86px;
  padding: 10px 16px;
}

.turn-roll-primary::before,
.turn-end-primary::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  opacity: 0.52;
  background: conic-gradient(from 90deg, transparent, rgba(255, 255, 255, 0.62), transparent 26%);
  animation: turn-roll-shine 2.6s linear infinite;
}

.turn-roll-primary:hover:not(:disabled),
.turn-end-primary:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 30px 66px rgba(243, 191, 85, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.turn-roll-primary:disabled,
.turn-end-primary:disabled {
  cursor: progress;
  filter: grayscale(0.25) brightness(0.85);
}

.turn-roll-primary span,
.turn-end-primary span {
  font-size: 0.88rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.turn-roll-primary span {
  font-size: 0.76rem;
}

.turn-roll-primary b,
.turn-end-primary b {
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  line-height: 1;
}

.turn-roll-primary b {
  font-size: clamp(1.35rem, 3.1vw, 1.82rem);
}

.turn-roll-primary small,
.turn-end-primary small {
  color: rgba(20, 16, 10, 0.72);
  font-size: 0.84rem;
  font-weight: 900;
}

.turn-roll-primary small {
  font-size: 0.74rem;
}

.turn-roll-primary[data-loading="true"] b::after {
  content: " กำลังทอย...";
}

.turn-end-primary {
  border-color: rgba(216, 255, 231, 0.54);
  color: #0f1b12;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.74), transparent 26%),
    linear-gradient(135deg, #d8ffe7, #52d37d 58%, #21975a);
  box-shadow:
    0 24px 52px rgba(82, 211, 125, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.turn-end-primary::before {
  background: conic-gradient(from 90deg, transparent, rgba(255, 255, 255, 0.68), transparent 26%);
}

.turn-end-primary:hover:not(:disabled) {
  box-shadow:
    0 30px 66px rgba(82, 211, 125, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.turn-end-primary[data-loading="true"] b::after {
  content: " กำลังส่งตา...";
}

.turn-action-modal[data-mode="end"] .turn-action-panel {
  border-color: rgba(82, 211, 125, 0.32);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.16), transparent 34%),
    linear-gradient(225deg, rgba(243, 191, 85, 0.11), transparent 44%),
    rgba(20, 19, 17, 0.98);
}

.turn-pre-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.turn-pre-actions button,
.turn-loan-grid button,
.turn-loan-arrow,
.turn-loan-fine-actions button,
.turn-loan-confirm,
.turn-debt-actions button {
  min-height: 46px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-weight: 950;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms var(--enter);
}

.turn-pre-actions button:hover:not(:disabled),
.turn-loan-grid button:hover:not(:disabled),
.turn-loan-arrow:hover:not(:disabled),
.turn-loan-fine-actions button:hover:not(:disabled),
.turn-loan-confirm:hover:not(:disabled),
.turn-debt-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(243, 191, 85, 0.42);
  background: rgba(243, 191, 85, 0.12);
}

.turn-pre-actions button.active {
  border-color: rgba(76, 201, 232, 0.48);
  color: #dff7ff;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.16), rgba(243, 191, 85, 0.08));
  box-shadow: inset 0 0 24px rgba(76, 201, 232, 0.08);
}

.turn-action-subpanel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
  animation: action-panel-pop 220ms var(--enter) both;
}

.turn-subpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.turn-subpanel-head b {
  color: var(--gold);
}

.turn-debt-list {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow: auto;
}

.turn-debt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.turn-debt-row strong {
  display: block;
  overflow-wrap: anywhere;
}

.turn-debt-row small,
.turn-work-result p {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
}

.turn-work-row.business {
  border-color: rgba(238, 98, 98, 0.2);
  background:
    linear-gradient(135deg, rgba(238, 98, 98, 0.08), transparent),
    rgba(255, 255, 255, 0.045);
}

.turn-work-result {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(82, 211, 125, 0.2);
  border-radius: 10px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.1), transparent),
    rgba(255, 255, 255, 0.045);
}

.turn-work-result > b {
  color: var(--green);
  font-size: 0.95rem;
}

.turn-debt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 7px;
}

.turn-debt-actions button {
  min-height: 38px;
  padding-inline: 12px;
}

.turn-debt-part-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.turn-debt-part-input input[type="number"] {
  width: 88px;
  min-height: 38px;
  padding-inline: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  text-align: right;
}

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

.turn-loan-grid button {
  display: grid;
  gap: 2px;
  min-height: 66px;
  place-items: center;
  padding: 8px;
}

.turn-loan-stepper {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 68px;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.turn-loan-arrow {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 116px;
  padding: 10px 6px;
  place-items: center;
  color: #15130f;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.76), transparent 30%),
    linear-gradient(135deg, #ffeeb8, #f3bf55 65%, #b98222);
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 26px rgba(185, 130, 34, 0.16);
}

.turn-loan-arrow span {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
}

.turn-loan-arrow small {
  color: rgba(21, 19, 15, 0.7);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.turn-loan-amount {
  display: grid;
  gap: 5px;
  min-width: 0;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.14), transparent 70%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 42px rgba(0, 0, 0, 0.16);
}

.turn-loan-amount span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
}

.turn-loan-amount strong {
  color: var(--ink);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1;
}

.turn-loan-amount small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
}

.turn-loan-fine-actions {
  display: grid;
  grid-template-columns: auto repeat(2, minmax(88px, 1fr));
  gap: 5px;
  align-items: center;
  width: min(390px, 100%);
  margin-top: 10px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 999px;
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.16)),
    rgba(0, 0, 0, 0.24);
}

.turn-loan-fine-actions button {
  min-height: 36px;
  border-radius: 999px;
  padding: 6px 10px;
  color: #ffe9a6;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.14), rgba(0, 0, 0, 0.28)),
    rgba(255, 255, 255, 0.04);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.turn-loan-fine-actions span {
  padding-inline: 8px 4px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.turn-loan-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.turn-loan-preview span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 224, 150, 0.13);
  border-radius: 8px;
  padding: 7px 9px;
  color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.72rem;
  font-weight: 850;
}

.turn-loan-preview b {
  color: var(--ink);
  font-size: 0.9rem;
}

.turn-loan-confirm {
  min-height: 48px;
  color: #14100a;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, #ffeeb8, #f3bf55 62%, #b98222);
  box-shadow: 0 18px 42px rgba(243, 191, 85, 0.18);
}

.turn-action-panel[data-subpanel="borrow"] {
  gap: 10px;
  padding: 14px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-action-head {
  gap: 10px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-action-head h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.72rem);
}

.turn-action-panel[data-subpanel="borrow"] .turn-roll-primary {
  min-height: 72px;
  padding: 8px 14px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-roll-primary b {
  font-size: clamp(1.2rem, 2.8vw, 1.56rem);
}

.turn-action-panel[data-subpanel="borrow"] .turn-pre-actions {
  gap: 7px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-pre-actions button {
  min-height: 42px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-action-subpanel {
  gap: 8px;
  padding: 10px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-stepper {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-arrow {
  min-height: 72px;
  border-radius: 12px;
  padding: 8px 3px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-arrow small {
  display: none;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-amount {
  gap: 3px;
  border-radius: 12px;
  padding: 9px 12px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-amount strong {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-fine-actions {
  width: min(340px, 100%);
  margin-top: 7px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-preview span {
  gap: 2px;
  min-height: 52px;
  border-radius: 10px;
  padding: 8px 9px;
  font-size: 0.64rem;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-preview b {
  font-size: 0.84rem;
}

.turn-action-panel[data-subpanel="borrow"] .turn-loan-confirm {
  min-height: 46px;
}

.turn-loan-grid button:disabled,
.turn-loan-arrow:disabled,
.turn-loan-fine-actions button:disabled,
.turn-loan-confirm:disabled,
.turn-debt-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.win-guide-panel {
  position: relative;
  display: grid;
  gap: 18px;
  width: var(--modal-w-md);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid rgba(255, 224, 150, 0.3);
  border-radius: var(--modal-radius);
  padding: 22px;
  background:
    radial-gradient(circle at top left, rgba(243, 191, 85, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(76, 201, 232, 0.08), transparent 46%),
    rgba(18, 17, 15, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: modal-rise 300ms var(--enter) both;
}

.win-guide-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 900;
}

.win-guide-head {
  display: grid;
  gap: 8px;
  padding-right: 54px;
}

.win-guide-head h2 {
  margin: 0;
  font-size: var(--modal-title-lg);
  line-height: 0.95;
}

.win-guide-head p,
.win-guide-step p,
.win-guide-note p {
  margin: 0;
  color: var(--muted);
  font-size: var(--modal-body);
  line-height: 1.55;
}

.win-guide-steps {
  display: grid;
  gap: 12px;
}

.win-guide-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(255, 224, 150, 0.15);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.win-guide-step > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #15130f;
  background: var(--gold);
  font-weight: 950;
}

.win-guide-step h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.win-guide-note {
  border: 1px solid rgba(76, 201, 232, 0.28);
  border-radius: 10px;
  padding: 14px;
  background: rgba(76, 201, 232, 0.08);
}

.win-guide-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
}

.win-guide-accept {
  justify-self: end;
  min-width: 180px;
}

.stress-info-panel {
  position: relative;
  display: grid;
  gap: 10px;
  width: var(--modal-w-md);
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid rgba(255, 147, 147, 0.32);
  border-radius: var(--modal-radius);
  padding: 16px 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 116, 116, 0.16), transparent 38%),
    rgba(18, 17, 15, 0.98);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  animation: modal-rise 260ms var(--enter) both;
}

.stress-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 900;
}

.stress-info-head {
  display: grid;
  gap: 3px;
  padding-right: 44px;
}

.stress-info-head h2 {
  margin: 0;
  font-size: var(--modal-title-sm);
  line-height: 1.05;
}

.stress-info-delta {
  margin-left: 8px;
  font-size: inherit;
  font-weight: 800;
  color: #ff9393;
  font-style: normal;
}

.stress-info-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: var(--modal-body);
}

.stress-info-tiers {
  display: grid;
  gap: 6px;
}

.stress-info-tier {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(255, 224, 150, 0.15);
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
}

.stress-info-tier.active {
  border-color: rgba(255, 147, 147, 0.55);
  background: rgba(255, 116, 116, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 147, 147, 0.28);
}

.stress-info-tier.tier-safe.active {
  border-color: rgba(126, 217, 149, 0.55);
  background: rgba(126, 217, 149, 0.12);
  box-shadow: 0 0 0 1px rgba(126, 217, 149, 0.28);
}

.stress-info-tier-range {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 8px;
  color: #15130f;
  background: var(--gold);
  font-weight: 950;
  font-size: 0.78rem;
}

.stress-info-tier.active .stress-info-tier-range {
  background: #ff9393;
}

.stress-info-tier.tier-safe.active .stress-info-tier-range {
  background: #7ed995;
}

.stress-info-tier h3 {
  margin: 0 0 2px;
  font-size: 0.94rem;
}

.stress-info-tier p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.8rem;
}

.landing-event-modal[data-viewer="spectator"] {
  background: rgba(5, 5, 4, 0.26);
}

.landing-event-modal[data-viewer="spectator"] .landing-event-panel {
  opacity: 0.78;
  filter: saturate(0.74) brightness(0.78);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.landing-event-panel {
  --event-accent: var(--gold);
  --event-accent-strong: #ffe096;
  --event-accent-soft: rgba(243, 191, 85, 0.14);
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.1fr);
  align-items: stretch;
  gap: 16px;
  width: var(--modal-w-xl);
  max-height: calc(100vh - 36px);
  border: 1px solid rgba(255, 224, 150, 0.34);
  border-radius: var(--modal-radius);
  padding: 16px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.18), transparent 34%),
    linear-gradient(235deg, rgba(76, 201, 232, 0.13), transparent 44%),
    rgba(20, 18, 16, 0.98);
  box-shadow:
    0 36px 94px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: modal-rise 280ms var(--enter) both;
}

.landing-event-panel[data-event-theme="market"] {
  --event-accent: #4cc9e8;
  --event-accent-strong: #9beaff;
  --event-accent-soft: rgba(76, 201, 232, 0.14);
}

.landing-event-panel[data-event-theme="opportunity"] {
  --event-accent: #f3bf55;
  --event-accent-strong: #ffe29a;
  --event-accent-soft: rgba(243, 191, 85, 0.15);
}

.landing-event-panel[data-event-theme="shopping"],
.landing-event-panel[data-event-theme="danger"] {
  --event-accent: #ff6f70;
  --event-accent-strong: #ffb0ad;
  --event-accent-soft: rgba(255, 111, 112, 0.14);
}

.landing-event-panel[data-event-theme="cashflow"],
.landing-event-panel[data-event-theme="portfolio"],
.landing-event-panel[data-event-theme="side-hustle"] {
  --event-accent: #52d37d;
  --event-accent-strong: #a8f7bf;
  --event-accent-soft: rgba(82, 211, 125, 0.14);
}

.landing-event-panel[data-event-theme="family"] {
  --event-accent: #ff7d8b;
  --event-accent-strong: #ffc0c7;
  --event-accent-soft: rgba(255, 125, 139, 0.14);
}

.landing-event-panel[data-event-theme="charity"],
.landing-event-panel[data-event-theme="dream"] {
  --event-accent: #c988f0;
  --event-accent-strong: #e7bdff;
  --event-accent-soft: rgba(201, 136, 240, 0.14);
}

.landing-event-panel[data-event-theme="development"],
.landing-event-panel[data-event-theme="health"] {
  --event-accent: #59c9f2;
  --event-accent-strong: #a9e9ff;
  --event-accent-soft: rgba(89, 201, 242, 0.14);
}

.landing-event-minimize-button {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 5;
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  align-items: center;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: 10px;
  padding: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 241, 199, 0.18), rgba(243, 191, 85, 0.08)),
    rgba(7, 8, 8, 0.82);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.landing-event-minimize-button span {
  color: var(--gold);
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
}

.landing-finance-sheet,
.landing-event-sheet {
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), transparent 42%),
    rgba(8, 10, 10, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px rgba(0, 0, 0, 0.3);
}

.landing-finance-sheet {
  display: grid;
  align-content: start;
  gap: 14px;
  max-height: calc(100vh - 76px);
  overflow: auto;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 238, 190, 0.08), transparent 36%),
    linear-gradient(135deg, rgba(243, 191, 85, 0.11), rgba(76, 201, 232, 0.035)),
    rgba(15, 14, 12, 0.78);
}

.landing-finance-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.landing-finance-head .landing-finance-avatar {
  grid-column: 1;
  grid-row: 1;
}

.landing-finance-player {
  grid-column: 2;
  grid-row: 1;
}

.landing-finance-vitals {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: minmax(118px, 1fr) minmax(84px, 0.72fr) minmax(132px, 1.08fr);
  gap: 8px;
  min-width: 0;
}

.landing-finance-player {
  min-width: 0;
}

.landing-finance-head h3 {
  margin: 0;
  overflow: hidden;
  font-size: var(--modal-title-md);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-head small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
}

.landing-finance-stress {
  display: grid;
  justify-self: end;
  gap: 4px;
  min-width: 84px;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 10px;
  padding: 9px 10px;
  background:
    radial-gradient(circle at 86% 10%, rgba(243, 191, 85, 0.16), transparent 5rem),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.16);
}

.landing-finance-time {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(76, 201, 232, 0.26);
  border-radius: 10px;
  padding: 9px 10px;
  background:
    radial-gradient(circle at 88% 12%, rgba(76, 201, 232, 0.18), transparent 6rem),
    linear-gradient(145deg, rgba(76, 201, 232, 0.11), transparent),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.16);
}

.landing-finance-time span {
  color: #8de7fb;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-finance-time strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  color: var(--cyan);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.landing-finance-time.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-finance-time.warn {
  border-color: rgba(243, 191, 85, 0.34);
}

.landing-finance-time.warn span,
.landing-finance-time.warn strong {
  color: var(--gold);
}

.landing-finance-time.bad {
  border-color: rgba(255, 116, 116, 0.4);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 88, 88, 0.16), transparent 6rem),
    linear-gradient(145deg, rgba(255, 88, 88, 0.14), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-time.bad span,
.landing-finance-time.bad strong {
  color: var(--red);
}

.landing-finance-vitals > .landing-finance-time,
.landing-finance-vitals > .landing-finance-stress,
.landing-finance-vitals > .landing-finance-cash {
  justify-self: stretch;
  min-width: 0;
}

.landing-finance-stress span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-finance-stress strong {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.landing-finance-stress.good strong {
  color: var(--green);
}

.landing-finance-stress.warn strong {
  color: var(--gold);
}

.landing-finance-stress.bad strong {
  color: var(--red);
}

.landing-finance-stress.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-finance-cash {
  display: grid;
  justify-self: end;
  gap: 4px;
  min-width: 132px;
  border: 1px solid rgba(111, 255, 172, 0.22);
  border-radius: 10px;
  padding: 9px 10px;
  background:
    radial-gradient(circle at 88% 12%, rgba(82, 211, 125, 0.18), transparent 6rem),
    linear-gradient(145deg, rgba(82, 211, 125, 0.12), transparent),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.landing-finance-cash span {
  color: #9ef5b9;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-finance-cash strong {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.landing-finance-cash.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-finance-cash.affected.bad {
  border-color: rgba(255, 116, 116, 0.42);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 88, 88, 0.16), transparent 6rem),
    linear-gradient(145deg, rgba(255, 88, 88, 0.16), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-loan {
  display: grid;
  justify-self: end;
  gap: 4px;
  min-width: 132px;
  border: 1px solid rgba(76, 201, 232, 0.24);
  border-radius: 10px;
  padding: 9px 10px;
  background:
    radial-gradient(circle at 88% 12%, rgba(76, 201, 232, 0.16), transparent 6rem),
    linear-gradient(145deg, rgba(76, 201, 232, 0.1), transparent),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.landing-finance-loan span {
  color: #9adcf0;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-finance-loan strong {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
}

.landing-finance-loan.warn {
  border-color: rgba(243, 191, 85, 0.36);
}

.landing-finance-loan.warn strong {
  color: var(--gold);
}

.landing-finance-loan.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-finance-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 2px;
}

.landing-finance-name {
  min-width: 0;
  flex: 1 1 auto;
}

.landing-finance-player .landing-finance-loan {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-self: start;
  flex: 0 1 auto;
  gap: 4px 8px;
  min-width: 0;
  padding: 6px 12px;
}

.landing-finance-player .landing-finance-loan span {
  font-size: 0.62rem;
}

.landing-finance-player .landing-finance-loan strong {
  justify-content: flex-start;
  font-size: 0.98rem;
}

.landing-finance-cred {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.landing-finance-dice {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  border: 1px solid rgba(201, 136, 240, 0.42);
  border-radius: 10px;
  padding: 6px 12px;
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 136, 240, 0.2), transparent 6rem),
    linear-gradient(145deg, rgba(201, 136, 240, 0.12), transparent),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.landing-finance-dice span {
  color: #e7bdff;
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-finance-dice strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.05;
}

.landing-purchase-summary {
  display: grid;
  gap: 11px;
  border: 1px solid rgba(243, 191, 85, 0.36);
  border-radius: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 92% 10%, rgba(82, 211, 125, 0.16), transparent 8rem),
    linear-gradient(145deg, rgba(243, 191, 85, 0.16), rgba(76, 201, 232, 0.05)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-purchase-summary > span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-purchase-summary > strong {
  color: var(--ink);
  font-size: clamp(1.7rem, 6vw, 2.05rem);
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.landing-purchase-summary > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.14rem;
  font-weight: 300;
  line-height: 1.42;
}

.landing-rights-purchase-summary {
  border-color: rgba(82, 211, 125, 0.34);
  background:
    radial-gradient(circle at 92% 10%, rgba(82, 211, 125, 0.2), transparent 8rem),
    linear-gradient(145deg, rgba(243, 191, 85, 0.14), rgba(76, 201, 232, 0.08)),
    rgba(0, 0, 0, 0.25);
}

.landing-rights-cancel-summary {
  border-color: rgba(76, 201, 232, 0.34);
  background:
    radial-gradient(circle at 92% 10%, rgba(76, 201, 232, 0.2), transparent 8rem),
    linear-gradient(145deg, rgba(243, 191, 85, 0.1), rgba(76, 201, 232, 0.12)),
    rgba(0, 0, 0, 0.25);
}

.landing-rights-cancel-summary > span {
  color: var(--cyan);
}

.landing-purchase-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.landing-purchase-summary-grid b {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.045);
}

.landing-purchase-summary-grid span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.64rem;
  font-weight: 950;
}

.landing-purchase-summary-grid em {
  color: var(--ink);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 950;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .landing-purchase-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-declined-summary {
  border-color: rgba(255, 147, 147, 0.34);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 116, 116, 0.13), transparent 8rem),
    linear-gradient(145deg, rgba(255, 116, 116, 0.12), rgba(243, 191, 85, 0.06)),
    rgba(0, 0, 0, 0.24);
}

.landing-declined-summary > span {
  color: #ffb8b8;
}

.landing-purchase-change-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.landing-purchase-change {
  display: grid;
  gap: 3px;
  min-height: 56px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 9px;
  padding: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-purchase-change span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1.1;
}

.landing-purchase-change b {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.landing-purchase-change.good {
  border-color: rgba(111, 255, 172, 0.22);
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.13), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-purchase-change.bad {
  border-color: rgba(255, 116, 116, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 88, 88, 0.13), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-goal {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 10px;
  padding: 12px;
  background:
    radial-gradient(circle at 12% 16%, rgba(76, 201, 232, 0.16), transparent 8rem),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-ring {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(12, 13, 13, 0.96) 0 54%, transparent 55%),
    conic-gradient(var(--gold) var(--landing-progress), rgba(255, 255, 255, 0.12) 0);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 224, 150, 0.12);
}

.landing-finance-ring b,
.landing-finance-ring span {
  grid-area: 1 / 1;
}

.landing-finance-ring b {
  font-size: 1.2rem;
  line-height: 1;
}

.landing-finance-ring span {
  align-self: end;
  margin-bottom: 17px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.54rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-finance-goal div:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.landing-finance-goal span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-finance-goal strong {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
  line-height: 1.18;
}

.landing-finance-goal small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

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

.landing-finance-metric {
  display: grid;
  gap: 4px;
  min-height: 62px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 9px;
  padding: 9px 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(0, 0, 0, 0.24);
}

.landing-finance-metric span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-metric b {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: baseline;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.05;
}

.landing-finance-metric.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-finance-metric.affected.good {
  border-color: rgba(111, 255, 172, 0.36);
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.16), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-metric.affected.bad {
  border-color: rgba(255, 116, 116, 0.42);
  background:
    linear-gradient(145deg, rgba(255, 88, 88, 0.18), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-metric.affected.warn {
  border-color: rgba(243, 191, 85, 0.42);
}

.landing-finance-delta {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  animation: finance-delta-pop 900ms var(--enter) 120ms both;
}

.landing-finance-delta.good {
  border-color: rgba(111, 255, 172, 0.34);
  color: #75f0a4;
  background: rgba(82, 211, 125, 0.13);
}

.landing-finance-delta.bad {
  border-color: rgba(255, 116, 116, 0.4);
  color: #ff7474;
  background: rgba(255, 88, 88, 0.13);
}

.landing-finance-delta.warn {
  border-color: rgba(243, 191, 85, 0.42);
  color: var(--gold);
  background: rgba(243, 191, 85, 0.12);
}

.landing-finance-metric.good {
  border-color: rgba(111, 255, 172, 0.18);
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.12), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-finance-metric.warn {
  border-color: rgba(243, 191, 85, 0.22);
}

.landing-finance-metric.bad {
  border-color: rgba(255, 147, 147, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 107, 107, 0.12), transparent),
    rgba(0, 0, 0, 0.22);
}

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

.landing-statement-column {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 10px;
  padding: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 58%),
    rgba(0, 0, 0, 0.23);
}

.landing-statement-column.income {
  border-color: rgba(111, 255, 172, 0.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(82, 211, 125, 0.14), transparent 9rem),
    rgba(0, 0, 0, 0.22);
}

.landing-statement-column.expense {
  border-color: rgba(255, 147, 147, 0.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 107, 107, 0.13), transparent 9rem),
    rgba(0, 0, 0, 0.22);
}

.landing-statement-head {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding-bottom: 8px;
}

.landing-statement-head span {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.landing-statement-head strong {
  color: var(--ink);
  font-size: 1.14rem;
  line-height: 1.1;
}

.landing-statement-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-statement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  padding: 8px 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(0, 0, 0, 0.2);
}

.landing-statement-row.income {
  border-color: rgba(111, 255, 172, 0.12);
}

.landing-statement-row.expense {
  border-color: rgba(255, 147, 147, 0.12);
}

.landing-statement-row.affected {
  animation: finance-impact-bounce 520ms var(--enter) both;
}

.landing-statement-row.affected.good {
  border-color: rgba(111, 255, 172, 0.42);
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.17), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-statement-row.affected.good > em {
  color: #75f0a4;
  text-shadow: 0 0 18px rgba(82, 211, 125, 0.28);
}

.landing-statement-row.affected.bad {
  border-color: rgba(255, 116, 116, 0.44);
  background:
    linear-gradient(145deg, rgba(255, 88, 88, 0.18), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-statement-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.landing-finance-line-main {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-width: 0;
}

.landing-finance-line-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.landing-finance-line-icon {
  display: grid !important;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px color-mix(in srgb, currentColor 12%, transparent);
}

.landing-finance-line-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-finance-line-icon.income {
  color: #63eda0;
}

.landing-finance-line-icon.expense {
  color: #ff7777;
}

.landing-finance-line-icon.asset {
  color: #62d9f5;
}

.landing-finance-line-icon.liability {
  color: #ffad58;
}

.landing-finance-line-icon.neutral {
  color: var(--gold);
}

.landing-statement-row b {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.77rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.landing-statement-row small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.landing-statement-row em {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 5px;
  color: var(--ink);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.landing-statement-row.empty {
  grid-template-columns: 1fr;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 850;
}

.landing-statement-subhead {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.landing-statement-subhead .landing-finance-line-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
}

.landing-statement-subhead .landing-finance-line-icon svg {
  width: 15px;
  height: 15px;
}

.landing-statement-subhead > b {
  margin-left: auto;
}

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

.landing-finance-books section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.landing-finance-book-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.landing-finance-books h4 {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
}

.landing-finance-book-delta {
  max-width: 70%;
  overflow: hidden;
  border: 1px solid rgba(89, 226, 143, 0.24);
  border-radius: 999px;
  padding: 4px 8px;
  color: #8ff0ad;
  background: rgba(89, 226, 143, 0.1);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-book-delta.bad {
  border-color: rgba(255, 111, 111, 0.28);
  color: #ffadad;
  background: rgba(255, 111, 111, 0.1);
}

.landing-finance-book-delta.warn {
  border-color: rgba(243, 191, 85, 0.28);
  color: var(--gold);
  background: rgba(243, 191, 85, 0.1);
}

.landing-finance-books ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-finance-books li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.landing-finance-books li.empty {
  grid-template-columns: 1fr;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.76rem;
  font-weight: 850;
}

.landing-finance-books li span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.landing-finance-books li b {
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-books li small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-books li em {
  color: var(--ink);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.landing-finance-drawers {
  display: grid;
  gap: 9px;
}

.landing-finance-drawer {
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.15);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 58%),
    rgba(0, 0, 0, 0.23);
}

.landing-finance-drawer.affected.good {
  border-color: rgba(111, 255, 172, 0.34);
  box-shadow: 0 0 0 1px rgba(111, 255, 172, 0.08) inset;
}

.landing-finance-drawer.affected.bad {
  border-color: rgba(255, 116, 116, 0.34);
  box-shadow: 0 0 0 1px rgba(255, 116, 116, 0.08) inset;
}

.landing-finance-drawer.affected.warn {
  border-color: rgba(243, 191, 85, 0.36);
}

.landing-finance-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 10px 11px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.landing-finance-drawer-head span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.landing-finance-drawer-icon {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: rgba(255, 255, 255, 0.035);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.24));
}

.landing-finance-drawer-icon.income {
  color: #6aff9f;
  background: rgba(106, 255, 159, 0.08);
}

.landing-finance-drawer-icon.expense {
  color: #ff7474;
  background: rgba(255, 116, 116, 0.08);
}

.landing-finance-drawer-icon.assets {
  color: #7de6ff;
  background: rgba(125, 230, 255, 0.08);
}

.landing-finance-drawer-icon.liabilities {
  color: #f3a85d;
  background: rgba(243, 168, 93, 0.08);
}

.landing-finance-drawer-head b {
  overflow: hidden;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-finance-drawer-head strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  white-space: nowrap;
}

.landing-finance-drawer-head i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.24);
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.landing-finance-drawer-body {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 9px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.landing-finance-drawer-body.is-opening,
.landing-finance-drawer-body.is-closing {
  opacity: 0;
  transform: translate3d(0, -5px, 0);
}

.landing-finance-drawer-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-asset-value-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.landing-asset-value-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(76, 201, 232, 0.14);
  border-radius: 8px;
  padding: 7px 8px;
  color: rgba(255, 255, 255, 0.56);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.62rem;
  font-weight: 850;
}

.landing-asset-value-summary b {
  color: var(--ink);
  font-size: 0.76rem;
}

.landing-asset-value-summary .good b { color: var(--green); }
.landing-asset-value-summary .bad b { color: var(--red); }

.landing-finance-drawer-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  padding: 8px 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(0, 0, 0, 0.2);
}

.landing-finance-drawer-list li.empty {
  grid-template-columns: 1fr;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 850;
}

.landing-finance-drawer-list li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.landing-finance-drawer-list li b {
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.77rem;
  line-height: 1.18;
}

.landing-finance-drawer-list .landing-finance-asset-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

.dropship-finance-row .dropship-finance-level-info {
  flex: 0 0 18px;
}

.dropship-finance-row .dropship-level-popover,
.dropship-finance-portal-popover {
  width: min(420px, calc(100vw - 96px));
}

.landing-finance-drawer-list li small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.25;
}

.landing-finance-drawer-list li em {
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.landing-finance-line-end {
  justify-items: end;
  gap: 6px !important;
}

.landing-finance-cancel-business {
  border: 1px solid rgba(225, 104, 104, 0.5);
  border-radius: 7px;
  padding: 4px 9px;
  background: rgba(225, 104, 104, 0.14);
  color: #f3b5b5;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.landing-finance-cancel-business:hover {
  background: rgba(225, 104, 104, 0.26);
  border-color: rgba(225, 104, 104, 0.75);
}

.landing-opportunity-borrow {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 12px;
  padding: 9px 11px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.12), transparent),
    rgba(0, 0, 0, 0.24);
}

/* When the loan panel is open it already has its own frame — drop the
   redundant outer frame so the personal-loan box is not double-bordered. */
.landing-opportunity-borrow:has(.landing-opportunity-loan-panel) {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
}

.landing-opportunity-borrow-head,
.landing-opportunity-borrow-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-opportunity-borrow-head span,
.landing-opportunity-borrow-actions small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
  font-weight: 850;
}

.landing-opportunity-borrow-head b {
  color: var(--gold);
  font-size: 0.92rem;
  white-space: nowrap;
}

.landing-opportunity-loan-panel {
  margin-top: 0;
}

.loan-panel-collapse {
  flex: 0 0 auto;
  min-height: 0;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.landing-event-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px;
  max-height: calc(100vh - 76px);
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.09), transparent 42%),
    linear-gradient(225deg, rgba(243, 191, 85, 0.11), transparent 38%),
    rgba(12, 14, 14, 0.74);
}

.landing-unified-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--event-accent) 34%, transparent);
  padding: 2px 54px 12px 2px;
}

.landing-unified-title-block {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.landing-event-category-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.landing-event-category {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 58%, white 10%);
  border-radius: 999px;
  padding: 3px 9px;
  color: #0d1110;
  background: var(--event-accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--event-accent) 24%, transparent);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.landing-event-category-line h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--modal-title-sm);
  line-height: 1.05;
}

.landing-event-context {
  overflow: hidden;
  margin: 0;
  color: color-mix(in srgb, var(--event-accent-strong) 84%, white 16%);
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-unified-header .landing-event-icon {
  color: var(--event-accent);
  border-color: color-mix(in srgb, var(--event-accent) 52%, transparent);
  background:
    radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--event-accent) 18%, transparent), transparent 34%),
    rgba(8, 10, 14, 0.82);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px color-mix(in srgb, var(--event-accent) 18%, transparent),
    0 0 20px color-mix(in srgb, var(--event-accent) 14%, transparent);
}

.landing-event-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  position: relative;
}

.landing-opportunity-header {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 68px;
}

.landing-opportunity-header h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
}

.landing-opportunity-header h2 span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 224, 150, 0.36);
  border-radius: 999px;
  padding: 4px 11px;
  color: #15130f;
  background: var(--gold);
  box-shadow: 0 10px 26px rgba(243, 191, 85, 0.22);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-opportunity-header h2 b {
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.58rem);
  font-weight: 950;
}

.landing-opportunity-header.purchased h2 b {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.04;
}

.landing-event-title-block {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding-right: 68px; /* เว้นระยะเพื่อไม่ให้ชนกับปุ่มย่อที่อยู่มุมขวาบน */
}

.landing-event-title-block .eyebrow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-event-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.36);
  border-radius: 15px;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.16), transparent 28%),
    rgba(8, 10, 14, 0.72);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.landing-event-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.landing-event-icon img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 10px rgba(255, 224, 150, 0.2));
}

.landing-event-icon .board-tile-icon-mask {
  width: 38px;
  height: 38px;
  background: currentColor;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 10px color-mix(in srgb, currentColor 32%, transparent));
}

.landing-event-copy {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
  scrollbar-color: color-mix(in srgb, var(--event-accent) 40%, transparent) transparent;
}

.landing-event-sheet.has-dream-showcase .landing-event-copy {
  align-content: stretch;
}

.landing-dream-showcase {
  position: relative;
  align-self: stretch;
  min-height: clamp(300px, 46vh, 520px);
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--event-accent) 34%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--event-accent) 20%, transparent), transparent 46%),
    rgba(4, 6, 8, 0.8);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 28px color-mix(in srgb, var(--event-accent) 14%, transparent);
}

.landing-dream-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 5, 7, 0) 28%, rgba(3, 5, 7, 0.44) 66%, rgba(3, 5, 7, 0.84)),
    radial-gradient(circle at 72% 0%, color-mix(in srgb, var(--event-accent) 20%, transparent), transparent 36%);
}

.landing-dream-showcase img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.02);
}

.landing-dream-showcase figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: min(720px, 72%);
}

.landing-dream-showcase figcaption span {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--event-accent) 48%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  color: #0c1110;
  background: var(--event-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--event-accent) 22%, transparent);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.landing-dream-showcase figcaption strong {
  color: #fff7dc;
  font-size: clamp(1.45rem, 2.7vw, 2.28rem);
  font-weight: 950;
  line-height: 1.03;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}

.landing-dream-showcase figcaption p {
  display: -webkit-box;
  max-width: 58ch;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.38;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.landing-dream-showcase-controls {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  pointer-events: none;
}

.landing-dream-showcase-nav {
  position: relative;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 54%, transparent);
  border-radius: 50%;
  padding: 0;
  color: #fff7dc;
  background:
    linear-gradient(180deg, rgba(22, 20, 16, 0.86), rgba(5, 7, 8, 0.74)),
    color-mix(in srgb, var(--event-accent) 12%, transparent);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

.landing-dream-showcase-nav::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.landing-dream-showcase-nav:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--event-accent) 82%, white 8%);
  color: #141007;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--event-accent-strong) 92%, white 8%), var(--event-accent));
}

.landing-dream-showcase-nav:disabled {
  opacity: 0.38;
  cursor: default;
}

.landing-dream-showcase-index {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 1px solid rgba(255, 247, 220, 0.2);
  border-radius: 999px;
  padding: 5px 10px;
  color: rgba(255, 247, 220, 0.86);
  background: rgba(5, 7, 8, 0.58);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.decision-dream-carousel {
  position: relative;
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.decision-dream-carousel .landing-dream-showcase-controls {
  position: static;
  inset: auto;
  padding: 0;
}

.decision-dream-carousel .landing-dream-showcase-index {
  position: static;
  align-self: center;
}

.landing-dream-picker {
  display: none;
  gap: 8px;
  min-width: 0;
}

.landing-dream-tools {
  display: none;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.landing-dream-tools span {
  color: rgba(255, 247, 220, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.landing-dream-tools small {
  justify-self: end;
  color: rgba(255, 247, 220, 0.62);
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.landing-dream-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 247, 220, 0.8);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.landing-dream-list {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-color: color-mix(in srgb, var(--event-accent) 40%, transparent) transparent;
}

.landing-dream-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 5px;
  height: 100%;
  min-height: 72px;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
  cursor: pointer;
}

.landing-dream-option[hidden] {
  display: none;
}

.landing-dream-option:hover:not(:disabled),
.landing-dream-option.selected {
  border-color: color-mix(in srgb, var(--event-accent) 76%, transparent);
  background: color-mix(in srgb, var(--event-accent) 16%, rgba(255, 255, 255, 0.06));
}

.landing-dream-option.selected {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--event-accent) 76%, transparent),
    0 8px 24px color-mix(in srgb, var(--event-accent) 12%, transparent);
}

.landing-dream-option-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.landing-dream-option strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff7dc;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.landing-dream-option small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.landing-dream-option-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--event-accent) 60%, transparent);
  border-radius: 50%;
  color: #11120f;
  background: var(--event-accent);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
}

.landing-dream-option.selected .landing-dream-option-check {
  opacity: 1;
}

.landing-dream-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-radius: 8px;
  padding: 14px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.78rem;
  font-weight: 820;
  text-align: center;
}

.landing-dream-reward-grid .impact-card span,
.landing-dream-reward-grid .impact-card b {
  overflow-wrap: anywhere;
}

.landing-dream-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
}

.landing-dream-summary article {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px 10px;
}

.landing-dream-summary article + article {
  border-left: 1px solid color-mix(in srgb, var(--event-accent) 22%, transparent);
}

.landing-dream-summary span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 850;
}

.landing-dream-summary b {
  color: var(--event-accent-strong);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.landing-dream-summary .requirement b {
  color: #ffd86a;
  font-size: 1rem;
  text-shadow: 0 1px 10px rgba(255, 216, 106, 0.28);
}

.landing-dream-summary .reward b {
  color: #52d37d;
}

.landing-dream-summary small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 820;
}

.landing-dream-action-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.landing-event-status-banner,
.landing-event-intro {
  border: 1px solid color-mix(in srgb, var(--event-accent) 32%, transparent);
  border-radius: 10px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, var(--event-accent-soft), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.035);
}

.landing-event-status-banner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 16px;
  text-align: center;
}

.landing-event-status-banner strong {
  color: var(--event-accent-strong);
  font-size: 1.72rem;
  line-height: 1.15;
}

.landing-event-status-banner.headline-only {
  min-height: 108px;
  align-content: center;
  padding: 18px 14px;
}

.landing-event-status-banner.headline-only strong {
  font-size: clamp(2.2rem, 5vw, 3.45rem);
  font-weight: 950;
  line-height: 1;
}

.landing-event-status-banner p,
.landing-event-intro {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.98rem;
  line-height: 1.45;
}

.landing-event-status-banner p {
  font-size: 0.98rem;
  line-height: 1.45;
}

.landing-dream-skip-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.176rem;
  font-weight: 950;
  line-height: 1.38;
}

.landing-event-copy h2 {
  margin: 0;
  font-size: var(--modal-title-sm);
  line-height: 1.08;
}

.landing-event-lead,
.landing-event-copy > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.42;
}

.landing-event-card {
  position: relative;
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-radius: 12px;
  padding: 16px;
  background: rgba(10, 10, 9, 0.62) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 20px color-mix(in srgb, var(--event-accent) 12%, transparent);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.landing-event-card:hover {
  transform: translateY(-1px);
}

.landing-event-card > span {
  display: inline-block;
  justify-self: start;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--card-glow, var(--cyan)) !important;
  color: #10100f !important;
  font-size: 0.65rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-event-card strong {
  font-size: clamp(1.72rem, 2.35vw, 2.32rem);
  line-height: 1.05;
  font-weight: 950;
  color: var(--ink);
}

.landing-event-card.opportunity-card {
  gap: 10px;
  padding: 18px;
}

.landing-event-card.opportunity-card strong {
  max-width: none;
  font-size: clamp(1.42rem, 2.55vw, 2.18rem);
  line-height: 1.04;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

.landing-event-card.opportunity-card p {
  max-width: 72ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.48;
}

.landing-event-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.landing-event-card .landing-event-description {
  font-size: var(--modal-body);
  line-height: 1.45;
}

.landing-event-modal[data-type="surprise"] .landing-event-card .landing-event-description {
  font-size: calc(var(--modal-body) * 1.25);
  line-height: 1.48;
}

.landing-event-card .landing-event-description .landing-stress-relief-highlight {
  display: inline-block;
  color: #57d66b;
  font-size: 1.25em;
  font-weight: 950;
  line-height: 1;
}

.landing-event-modal[data-type="baby"] .landing-event-card[data-deck="life-event"] > strong {
  justify-self: center;
  width: 100%;
  color: var(--ink);
  font-size: clamp(2.24rem, 3.05vw, 3.02rem);
  line-height: 1;
  text-align: center;
}

.landing-event-modal[data-type="baby"] .landing-event-card[data-deck="life-event"] > strong::after {
  content: "🎉";
  display: inline-block;
  margin-left: 0.18em;
  font-size: 0.82em;
  transform: translateY(-0.04em);
}

.landing-event-modal[data-type="baby"] .landing-event-card[data-deck="life-event"] .landing-event-description {
  color: rgba(255, 247, 220, 0.82);
  font-size: calc(var(--modal-body) * 1.2);
  line-height: 1.5;
}

.landing-event-modal[data-type="baby"] .baby-child-rank {
  color: #ffd166;
  font-size: 1.18em;
  font-weight: 950;
}

.deal-bargain-callout {
  margin: 0 0 10px !important;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(243, 191, 85, 0.5);
  background: linear-gradient(120deg, rgba(243, 191, 85, 0.22), rgba(243, 191, 85, 0.06));
  color: var(--gold) !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.landing-event-card .market-impact-text {
  border-left: 3px solid var(--gold);
  padding-left: 10px;
  color: var(--ink);
  font-weight: 850;
}

.landing-event-card .market-impact-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.market-impact-detail span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.78rem;
  font-weight: 900;
}

.market-impact-detail small {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 950;
}

.landing-event-card .market-affected-summary {
  border: 1px solid rgba(76, 201, 232, 0.18);
  border-radius: 8px;
  padding: 9px;
  color: rgba(235, 250, 255, 0.9);
  background: rgba(76, 201, 232, 0.08);
  font-weight: 800;
}

.landing-event-card.market-split-card {
  gap: 10px;
  text-align: center;
}

.market-split-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.market-split-head .market-split-name {
  font-size: clamp(1.24rem, 2vw, 1.68rem);
  line-height: 1.1;
  font-weight: 950;
  color: var(--ink);
}

.market-split-head .market-split-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid currentColor;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.26);
}

.market-split-card[data-split="up"] .market-split-badge {
  color: #eafff3;
  background: linear-gradient(180deg, #1f9156 0%, #0b5631 100%);
  border-color: rgba(132, 255, 184, 0.74);
}

.market-split-card[data-split="down"] .market-split-badge {
  color: #fff4cf;
  background: linear-gradient(180deg, #9f6b14 0%, #5a3707 100%);
  border-color: rgba(255, 221, 129, 0.78);
}

.market-split-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0;
  padding: 18px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.market-split-card[data-split="up"] .market-split-hero {
  border-color: color-mix(in srgb, var(--green) 42%, transparent);
}

.market-split-card[data-split="down"] .market-split-hero {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
}

.market-split-hero .market-split-figure {
  font-size: clamp(2.05rem, 4.6vw, 2.95rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.01em;
}

.market-split-hero .market-split-arrow {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1;
}

.market-split-card[data-split="up"] .market-split-figure,
.market-split-card[data-split="up"] .market-split-arrow {
  color: var(--green);
}

.market-split-card[data-split="down"] .market-split-figure,
.market-split-card[data-split="down"] .market-split-arrow {
  color: var(--gold);
}

.landing-event-card.market-split-card .market-split-sub {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.landing-event-card.market-split-card .market-split-reason {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  line-height: 1.45;
}

.landing-event-card.market-split-card .market-split-affected {
  color: rgba(190, 205, 225, 0.6);
  font-size: 0.8rem;
  font-weight: 700;
}

.market-split-card[data-split="down"] .market-split-affected {
  color: #ff6b6b;
  text-shadow: 0 0 14px rgba(255, 95, 112, 0.24);
}

.landing-health-stress-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  border: 1px solid rgba(255, 224, 150, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.1), rgba(0, 0, 0, 0.24)),
    rgba(255, 255, 255, 0.045);
}

.landing-health-stress-alert span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 950;
}

.landing-health-stress-alert strong {
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 1000;
  line-height: 1;
}

.landing-health-stress-alert small {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 850;
}

.landing-health-stress-alert.good {
  border-color: rgba(82, 211, 125, 0.28);
}

.landing-health-stress-alert.good strong {
  color: var(--green);
}

.landing-health-stress-alert.bad {
  border-color: rgba(255, 116, 116, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 116, 116, 0.12), rgba(0, 0, 0, 0.24)),
    rgba(255, 255, 255, 0.045);
}

.landing-health-stress-alert.bad strong {
  color: var(--red);
}

.landing-card-tag-icon {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--board-icon) center / contain no-repeat;
  mask: var(--board-icon) center / contain no-repeat;
}

/* Themes for landing-event-card based on data-deck */
.landing-event-card[data-deck="charity"] {
  --card-glow: var(--green);
  border-color: rgba(82, 211, 125, 0.4);
}
.landing-event-card[data-deck="development"] {
  --card-glow: var(--violet);
  border-color: rgba(141, 124, 255, 0.4);
}
.landing-event-card[data-deck="opportunity"],
.landing-event-card[data-deck="starter-deal"],
.landing-event-card[data-deck="growth-deal"],
.landing-event-card[data-deck="freedom-path-deal"] {
  --card-glow: var(--gold);
  border-color: rgba(243, 191, 85, 0.4);
}
.landing-event-card[data-deck="digital-risk"],
.landing-event-card[data-deck="risk"],
.landing-event-card[data-deck="macro"],
.landing-event-card[data-deck="burnout"],
.landing-event-card[data-deck="surprise"],
.landing-event-card[data-deck="layoff"] {
  --card-glow: var(--red);
  border-color: rgba(238, 98, 98, 0.4);
}

.landing-decision-block {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 12px;
  padding: 11px;
  background:
    radial-gradient(circle at 95% 10%, rgba(243, 191, 85, 0.18), transparent 8rem),
    linear-gradient(135deg, rgba(76, 201, 232, 0.1), transparent 44%),
    rgba(0, 0, 0, 0.26);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-charity-decision {
  gap: 13px;
  border-color: color-mix(in srgb, var(--event-accent) 34%, transparent);
  padding: 16px 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-accent) 10%, transparent), transparent 48%),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.landing-charity-decision .landing-decision-head span {
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
}

.landing-charity-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  border-top: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
}

.landing-marriage-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--event-accent) 28%, transparent);
}

.landing-marriage-summary .wedding-tier {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 30%, transparent);
  background: color-mix(in srgb, var(--event-accent) 8%, transparent);
}

.landing-marriage-summary .wedding-tier span {
  font-size: 0.78rem;
  opacity: 0.85;
}

.landing-marriage-summary .wedding-tier b {
  font-variant-numeric: tabular-nums;
}

.landing-marriage-summary .wedding-tier small {
  font-size: 0.72rem;
  opacity: 0.65;
  line-height: 1.35;
}

.landing-marriage-summary .wedding-tier.wedding-tier-luxury {
  border-color: rgba(243, 191, 85, 0.5);
  background: rgba(243, 191, 85, 0.1);
}

.landing-marriage-summary .wedding-tier.insufficient {
  opacity: 0.55;
}

.landing-marriage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.landing-charity-decision .landing-charity-summary {
  grid-template-columns: minmax(136px, 0.78fr) minmax(0, 1.42fr);
}

.landing-charity-decision .landing-charity-summary.has-option-two {
  grid-template-columns: minmax(136px, 0.72fr) minmax(0, 1.42fr) minmax(0, 1.1fr);
}

.landing-charity-summary article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding: 15px 10px;
}

.landing-charity-summary article + article {
  border-left: 1px solid color-mix(in srgb, var(--event-accent) 24%, transparent);
  padding-left: 18px;
}

.landing-charity-summary span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 850;
}

.landing-charity-summary b {
  color: var(--event-accent-strong);
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.24;
}

.landing-charity-summary .cost b {
  color: var(--gold);
  font-size: 1.18rem;
}

.landing-charity-summary .stress-relief b {
  color: #52d37d;
}

.landing-charity-summary .option-one b,
.landing-charity-summary .option-two b {
  text-wrap: balance;
}

.landing-charity-actions {
  align-items: stretch;
}

.landing-charity-actions:not(.has-option-two) {
  grid-template-columns: minmax(136px, 0.72fr) minmax(0, 1fr);
}

.landing-charity-actions.has-option-two {
  grid-template-columns: minmax(136px, 0.72fr) repeat(2, minmax(0, 1fr));
}

.landing-charity-balance {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.35;
}

.landing-charity-balance b {
  color: var(--ink);
  font-size: 0.76rem;
}

.landing-charity-balance.insufficient,
.landing-charity-balance.insufficient b {
  color: #ffb8b8;
}

.landing-decision-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.landing-decision-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-badge.good {
  border: 1px solid rgba(82, 211, 125, 0.35);
  background: rgba(82, 211, 125, 0.08);
  color: var(--green);
}

.status-badge.bad {
  border: 1px solid rgba(238, 98, 98, 0.35);
  background: rgba(238, 98, 98, 0.08);
  color: var(--red);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: led-pulse 1.8s infinite ease-in-out;
}

@keyframes led-pulse {
  0% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}

.landing-decision-head span {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.unit-trade-confirm-panel .landing-decision-head span {
  color: var(--gold);
  font-size: clamp(1.28rem, 2.2vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 0 18px rgba(243, 191, 85, 0.34);
}

.landing-decision-head small {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--modal-body);
  font-weight: 800;
  line-height: 1.4;
}

.landing-choice-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.landing-choice-preview article {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.landing-choice-preview span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 950;
}

.landing-choice-preview b {
  color: var(--ink);
  font-size: 1.12rem;
}

.landing-choice-preview small {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 820;
}

.landing-deal-impact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.dropship-roll-decision .landing-deal-impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dropship-auto-roll-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(88, 207, 232, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  color: rgba(255, 248, 232, 0.84);
  background: rgba(88, 207, 232, 0.08);
  font-size: 0.78rem;
  font-weight: 850;
}

.dropship-auto-roll-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
  flex: 0 0 auto;
}

.dropship-auto-roll-toggle span {
  overflow-wrap: anywhere;
}

.landing-buyout-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-buyout-warning {
  margin: 0;
  border: 1px solid rgba(238, 98, 98, 0.28);
  border-radius: 9px;
  padding: 9px 11px;
  color: #ffb8b8;
  background:
    linear-gradient(135deg, rgba(238, 98, 98, 0.12), rgba(0, 0, 0, 0.24)),
    rgba(0, 0, 0, 0.22);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.4;
}

.landing-buyout-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(520px, 1.28fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid rgba(76, 201, 232, 0.16);
  border-radius: 10px;
  padding: 11px;
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.22);
}

.landing-buyout-row[data-selected="false"] {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  opacity: 0.72;
}

.landing-buyout-select {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
}

.landing-buyout-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.landing-buyout-check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(76, 201, 232, 0.42);
  border-radius: 7px;
  background: rgba(76, 201, 232, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-buyout-check::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 3px solid #0c1b1f;
  border-bottom: 3px solid #0c1b1f;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transform-origin: center;
  transition: transform 140ms ease;
}

.landing-buyout-select input:checked + .landing-buyout-check {
  border-color: rgba(126, 226, 255, 0.78);
  background: linear-gradient(180deg, #8ce8ff, #4cc9e8);
}

.landing-buyout-select input:checked + .landing-buyout-check::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.landing-buyout-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.landing-buyout-name {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.landing-buyout-main small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.landing-buyout-figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  min-width: 0;
}

.landing-buyout-figs span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.landing-buyout-figs small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
}

.landing-buyout-figs b {
  color: var(--ink);
  font-size: clamp(0.76rem, 0.92vw, 0.86rem);
  font-weight: 950;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

.landing-buyout-figs .net b {
  color: var(--green);
}

.landing-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.landing-payment-grid > div {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 10px;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent),
    rgba(0, 0, 0, 0.22);
}

.landing-payment-grid span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
}

.landing-payment-grid b {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 950;
}

.landing-payment-grid b.landing-payment-amount-due {
  color: var(--red);
}

.landing-payment-grid > .landing-payment-stress-card {
  border-color: rgba(255, 147, 147, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 116, 116, 0.14), transparent),
    rgba(0, 0, 0, 0.24);
}

.landing-payment-stress-card b {
  color: #ffdddd;
}

.landing-payment-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-payment-actions button:only-child {
  grid-column: 1 / -1;
}

.landing-payment-loan-panel {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(243, 191, 85, 0.28);
  border-radius: 12px;
  padding: 11px 13px;
  background:
    radial-gradient(circle at 12% 0%, rgba(243, 191, 85, 0.2), transparent 9rem),
    linear-gradient(145deg, rgba(255, 224, 150, 0.1), rgba(76, 201, 232, 0.05)),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-payment-loan-panel .turn-subpanel-head span {
  color: rgba(255, 255, 255, 0.66);
}

.landing-payment-loan-panel-compact {
  gap: 8px;
  padding: 10px 12px;
}

.landing-payment-loan-panel-compact .turn-subpanel-head {
  gap: 3px;
}

.loan-amount-input-group {
  display: grid;
  gap: 6px;
}

.loan-amount-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 233, 166, 0.75);
  letter-spacing: 0.02em;
}

.loan-amount-input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 224, 150, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.055);
  color: #ffe9a6;
  font-size: clamp(1.1rem, 3vw, 1.45rem);
  font-weight: 950;
  text-align: center;
  -moz-appearance: textfield;
  box-sizing: border-box;
}

.loan-amount-input::-webkit-outer-spin-button,
.loan-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.loan-amount-input:focus {
  outline: none;
  border-color: rgba(255, 200, 80, 0.6);
  box-shadow: 0 0 0 3px rgba(243, 191, 85, 0.18);
}

.loan-amount-input--invalid,
.loan-amount-input:invalid {
  border-color: rgba(240, 100, 100, 0.6);
  box-shadow: 0 0 0 3px rgba(240, 100, 100, 0.15);
}

.loan-amount-hint {
  font-size: 0.72rem;
  color: rgba(255, 233, 166, 0.55);
  line-height: 1.4;
}

.loan-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.loan-amount-row .loan-amount-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* unified control: currency + input + stepper share one border */
.loan-amount-control {
  display: flex;
  align-items: stretch;
  height: 48px;
  width: clamp(180px, 46%, 228px);
  margin-left: auto;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 224, 150, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.1), transparent 70%),
    rgba(255, 255, 255, 0.055);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.loan-amount-control:focus-within {
  border-color: rgba(255, 200, 80, 0.6);
  box-shadow: 0 0 0 3px rgba(243, 191, 85, 0.18);
}

.loan-amount-control:has(.loan-amount-input--invalid) {
  border-color: rgba(240, 100, 100, 0.6);
  box-shadow: 0 0 0 3px rgba(240, 100, 100, 0.15);
}

.loan-amount-control.is-disabled {
  opacity: 0.55;
}

.loan-amount-currency {
  display: flex;
  align-items: center;
  padding-left: 12px;
  color: rgba(255, 233, 166, 0.6);
  font-weight: 800;
  font-size: 1rem;
}

/* input borderless inside the control */
.loan-amount-input--compact {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 6px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  text-align: right;
}

.loan-amount-input--compact:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.loan-amount-stepper {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 40px;
  height: 100%;
  border-left: 1.5px solid rgba(255, 224, 150, 0.26);
  background: rgba(0, 0, 0, 0.26);
}

/* Reset inherited base-button styling (gold gradient, drop-shadow, 44px min-height,
   132px min-width from .landing-event-copy button) so the arrows are not clipped. */
.loan-amount-control .loan-amount-step {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 220, 130, 0.82);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.loan-amount-step svg {
  display: block;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.loan-amount-step--up {
  border-bottom: 1px solid rgba(255, 224, 150, 0.16);
}

.loan-amount-control .loan-amount-step:hover:not(:disabled) {
  background: rgba(243, 191, 85, 0.18);
  color: #ffe6a8;
  transform: none;
  box-shadow: none;
}

.loan-amount-control .loan-amount-step:active:not(:disabled) {
  background: rgba(243, 191, 85, 0.32);
  color: #fff4d6;
  transform: none;
}

.loan-amount-control .loan-amount-step:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
  filter: none;
}

.landing-loan-amount {
  min-height: 86px;
  border-radius: 10px;
  padding: 11px 12px;
}

.landing-loan-amount strong {
  font-size: clamp(1.25rem, 3vw, 1.7rem);
}

.landing-loan-amount small {
  max-width: 32ch;
  line-height: 1.25;
}

.landing-borrow-result {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(82, 211, 125, 0.28);
  border-radius: 12px;
  padding: 11px;
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.1), rgba(76, 201, 232, 0.05)),
    rgba(0, 0, 0, 0.28);
}

.landing-borrow-result.bankrupt {
  border-color: rgba(238, 98, 98, 0.4);
  background:
    linear-gradient(145deg, rgba(238, 98, 98, 0.14), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.3);
}

.landing-borrow-result span {
  color: var(--green);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-borrow-result.bankrupt span {
  color: #ffb6b6;
}

.landing-borrow-result strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.95rem;
}

.landing-borrow-result small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 850;
}

.landing-borrow-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.landing-borrow-result-card {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.landing-borrow-result-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.66rem;
}

.landing-borrow-result-card b {
  color: var(--ink);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.landing-borrow-result-card.good b {
  color: var(--green);
}

.landing-borrow-result-card.bad b,
.landing-borrow-result-card.warn b {
  color: #ffb6b6;
}

.landing-payment-loan-preview {
  margin: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

/* Frameless line items inside the personal-loan panel (label left, value right) */
.landing-payment-loan-preview span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 0;
  padding: 4px 2px;
  background: transparent;
}

.landing-event-actions {
  justify-self: stretch;
  width: 100%;
}

.landing-action-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid color-mix(in srgb, var(--event-accent) 34%, transparent);
  padding-top: 11px;
  background:
    linear-gradient(180deg, rgba(10, 12, 12, 0), rgba(10, 12, 12, 0.9) 24%),
    rgba(10, 12, 12, 0.72);
  box-shadow: 0 -12px 26px rgba(0, 0, 0, 0.16);
}

.landing-action-footer .landing-footer-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0 !important;
}

.landing-action-footer[data-action-layout="single"] .landing-footer-actions {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr);
}

.landing-action-footer[data-action-layout="single"] .landing-footer-actions > :only-child {
  grid-column: 2;
}

.landing-action-footer[data-action-layout="standard"] .landing-footer-actions,
.landing-action-footer[data-action-layout="equal"] .landing-footer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-action-footer[data-action-layout="triple"] .landing-footer-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-action-footer[data-action-layout="wait"] {
  padding-top: 9px;
}

.landing-action-footer .landing-event-wait {
  width: 100%;
  margin: 0;
  border-color: color-mix(in srgb, var(--event-accent) 26%, transparent);
  background: var(--event-accent-soft);
}

.landing-action-footer button {
  width: 100%;
  min-height: 48px;
}

.landing-action-footer button:not(.ghost):not(:disabled) {
  border-color: color-mix(in srgb, var(--event-accent) 66%, white 10%);
  color: #11120f;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--event-accent-strong) 90%, white 10%), var(--event-accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--event-accent) 22%, transparent);
}

.landing-action-footer button:disabled,
.decision-actions button:disabled {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(92, 96, 101, 0.42), rgba(42, 44, 48, 0.56));
  box-shadow: none;
  opacity: 0.62;
  filter: grayscale(1) saturate(0.25) brightness(0.72);
}

.landing-choice-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-deal-actions {
  grid-template-columns: 1.12fr 1fr 0.75fr;
}

.manual-borrow-note {
  margin: -2px 0 4px;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 10px;
  padding: 9px 11px;
  color: rgba(255, 255, 255, 0.76);
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.1), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.24);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.45;
}

.landing-event-copy .decision-actions button {
  justify-self: stretch;
  width: 100%;
}

.landing-income-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(82, 211, 125, 0.34);
  border-radius: 12px;
  padding: 11px;
  background:
    radial-gradient(circle at 90% 0%, rgba(82, 211, 125, 0.22), transparent 8rem),
    linear-gradient(135deg, rgba(82, 211, 125, 0.16), rgba(243, 191, 85, 0.08)),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-income-card > span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-income-card > strong {
  color: #d8ffe7;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  animation: finance-delta-pulse 860ms var(--enter) both;
}

.landing-income-step-title {
  color: #d8ffe7;
  font-size: clamp(1.15rem, 2.7vw, 1.55rem);
  line-height: 1.05;
}

.landing-income-card div {
  display: grid;
  gap: 6px;
}

.landing-income-card small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(216, 255, 231, 0.14);
  border-radius: 8px;
  padding: 7px 9px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.22);
  font-weight: 820;
}

.landing-income-card small b {
  color: var(--ink);
}

.landing-event-icon.income {
  color: var(--income-icon-green);
  border-color: color-mix(in srgb, var(--income-icon-green) 42%, transparent);
  background:
    radial-gradient(circle at 42% 18%, color-mix(in srgb, var(--income-icon-green) 28%, transparent), transparent 4.5rem),
    rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 0 1px rgba(216, 255, 231, 0.08),
    0 18px 46px color-mix(in srgb, var(--income-icon-green) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-income-step-sheet {
  border-color: rgba(82, 211, 125, 0.28);
  background:
    radial-gradient(circle at 78% 18%, rgba(82, 211, 125, 0.12), transparent 15rem),
    linear-gradient(145deg, rgba(11, 21, 19, 0.94), rgba(15, 18, 14, 0.95));
}

.landing-income-step #landingIncomeTitle {
  font-size: var(--modal-title-sm);
  line-height: 1.02;
}

.landing-income-card-hero {
  padding: 15px;
  border-color: rgba(82, 211, 125, 0.46);
}

.landing-income-followup-note {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 700;
  margin: 4px 0 0;
}

.income-formula {
  display: grid;
  grid-template-columns:
    minmax(132px, 0.72fr)
    auto
    minmax(116px, 0.58fr)
    auto
    minmax(260px, 1.72fr);
  align-items: stretch;
  gap: 6px;
  margin-top: 2px;
}

.income-formula-term {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  text-align: center;
  border: 1px solid rgba(216, 255, 231, 0.16);
  border-radius: 10px;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.24);
}

.income-formula-term > span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.6rem;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.income-formula-term > b {
  color: #eafff2;
  font-size: clamp(0.82rem, 2.1vw, 1.02rem);
  font-weight: 950;
  line-height: 1.05;
}

.income-formula-op {
  align-self: center;
  color: var(--green);
  font-size: 1.05rem;
  font-weight: 950;
}

.income-formula-total {
  min-height: 96px;
  border-color: rgba(82, 211, 125, 0.5);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.2), rgba(243, 191, 85, 0.08)),
    rgba(0, 0, 0, 0.26);
}

.income-formula-total > b {
  color: #d8ffe7;
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  line-height: 0.95;
  animation: finance-delta-pulse 860ms var(--enter) both;
}

@media (max-width: 540px) {
  .income-formula {
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
  }
  .income-formula-op:nth-of-type(2) {
    display: none;
  }
  .income-formula-total {
    grid-column: 1 / -1;
  }
}

.landing-income-card-hero > strong {
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  letter-spacing: 0;
}

.landing-event-icon.skip {
  color: #ffe7b6;
  border-color: rgba(243, 191, 85, 0.42);
  background:
    radial-gradient(circle at 42% 18%, rgba(243, 191, 85, 0.3), transparent 4.5rem),
    rgba(0, 0, 0, 0.52);
  box-shadow:
    0 0 0 1px rgba(255, 231, 182, 0.08),
    0 18px 46px rgba(243, 191, 85, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-skip-sheet {
  border-color: rgba(243, 191, 85, 0.28);
  background:
    radial-gradient(circle at 78% 18%, rgba(243, 191, 85, 0.14), transparent 15rem),
    linear-gradient(145deg, rgba(24, 18, 11, 0.95), rgba(15, 18, 19, 0.95));
}

.landing-skip-card {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(243, 191, 85, 0.34);
  border-radius: 12px;
  padding: 13px;
  background:
    radial-gradient(circle at 88% 4%, rgba(243, 191, 85, 0.2), transparent 10rem),
    rgba(0, 0, 0, 0.3);
}

.landing-skip-card span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-skip-card strong {
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
}

.landing-skip-card small {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 820;
}

.landing-event-effects {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(243, 191, 85, 0.34);
  border-radius: 12px;
  padding: 12px;
  background:
    radial-gradient(circle at 92% 12%, rgba(243, 191, 85, 0.2), transparent 8rem),
    linear-gradient(145deg, rgba(243, 191, 85, 0.14), rgba(76, 201, 232, 0.055)),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-effects-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.landing-effects-head span {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 950;
}

.landing-effects-head small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: right;
}

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

.landing-event-effects b {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 72px;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 9px;
  padding: 10px 6px;
  color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent),
    rgba(0, 0, 0, 0.28);
  font-weight: 850;
}

.landing-event-effects b.good {
  border-color: rgba(111, 255, 172, 0.22);
  color: #d8ffe7;
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.16), transparent),
    rgba(0, 0, 0, 0.26);
}

.landing-event-effects b.warn {
  border-color: rgba(255, 224, 150, 0.26);
  color: #ffe3a9;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.15), transparent),
    rgba(0, 0, 0, 0.26);
}

.landing-event-effects b.bad {
  border-color: rgba(255, 147, 147, 0.26);
  color: #ffd0d0;
  background:
    linear-gradient(145deg, rgba(255, 107, 107, 0.16), transparent),
    rgba(0, 0, 0, 0.26);
}

.landing-event-effects b span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-event-effects em {
  color: var(--ink);
  font-size: 1.02rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
}

.landing-event-result {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 10px;
  padding: 12px;
  background: rgba(8, 10, 12, 0.42);
}

.landing-event-result span {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-event-result strong {
  font-size: 1rem;
}

.landing-event-result p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.landing-event-copy button {
  justify-self: end;
  min-width: 132px;
}

.landing-event-copy .landing-dream-showcase-nav {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 50%;
}

.landing-event-wait {
  justify-self: end;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 999px;
  padding: 8px 11px;
  color: rgba(255, 255, 255, 0.64);
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.78rem;
  font-weight: 850;
}

.landing-event-modal[data-type="payday"] .landing-event-icon,
.landing-event-modal[data-type="incomeDay"] .landing-event-icon {
  color: var(--income-icon-green);
}

.landing-event-modal[data-type="market"] .landing-event-icon,
.landing-event-modal[data-type="charity"] .landing-event-icon,
.landing-event-modal[data-type="network"] .landing-event-icon {
  color: var(--cyan);
}

.landing-event-modal[data-type="dream"] .landing-event-icon,
.landing-event-modal[data-type="impact"] .landing-event-icon,
.landing-event-modal[data-type="finalFreedom"] .landing-event-icon {
  color: var(--violet);
}

.landing-event-modal[data-type="surprise"] .landing-event-icon,
.landing-event-modal[data-type="burnout"] .landing-event-icon,
.landing-event-modal[data-type="layoff"] .landing-event-icon,
.landing-event-modal[data-type="digitalRisk"] .landing-event-icon,
.landing-event-modal[data-type="macro"] .landing-event-icon {
  color: var(--red);
}

.deal-card-face,
.card-reveal-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.32);
  border-radius: 10px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.2), rgba(76, 201, 232, 0.08)),
    rgba(10, 10, 9, 0.72);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.deal-card-face::before,
.card-reveal-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.55;
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.24) 48%, transparent 60% 100%);
  transform: translate3d(-120%, 0, 0);
  animation: card-sheen 2200ms var(--enter) infinite;
}

.card-deck {
  position: relative;
  z-index: 1;
  display: inline-grid;
  border-radius: 999px;
  margin-bottom: 12px;
  padding: 5px 9px;
  color: #15130f;
  background: var(--gold);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.deal-card-face h3,
.card-reveal-panel h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  font-size: 1.32rem;
  line-height: 1.12;
}

.deal-card-face.opportunity-card-face h3 {
  max-width: 18ch;
  margin-bottom: 10px;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.04;
}

.deal-card-face p,
.card-reveal-panel p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.deal-card-face.opportunity-card-face p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.5;
}

.card-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.card-tags span {
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.7rem;
  font-weight: 850;
}

.decision-copy {
  min-width: 0;
  padding: 6px;
}

.decision-copy h2 {
  margin-bottom: 8px;
  font-size: var(--modal-title-sm);
  line-height: 1.18;
}

.decision-copy p {
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--modal-body);
}

.unit-market-panel {
  border-color: rgba(82, 211, 125, 0.42);
  background:
    linear-gradient(118deg, rgba(82, 211, 125, 0.16), transparent 36%),
    linear-gradient(242deg, rgba(243, 191, 85, 0.14), transparent 42%),
    rgba(24, 22, 20, 0.97);
}

.unit-market-face {
  border-color: rgba(82, 211, 125, 0.34);
  background:
    linear-gradient(145deg, rgba(82, 211, 125, 0.18), rgba(243, 191, 85, 0.1)),
    rgba(10, 10, 9, 0.74);
}

.unit-market-panel .card-deck {
  background: linear-gradient(135deg, #d8ffe7, #52d37d);
}

.rest-side-panel {
  width: min(520px, calc(100vw - 32px));
  border-color: rgba(82, 211, 125, 0.34);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.16), transparent 34%),
    linear-gradient(225deg, rgba(243, 191, 85, 0.12), transparent 44%),
    rgba(20, 19, 17, 0.98);
}

.rest-side-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rest-side-actions {
  margin-top: 4px;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.impact-metric {
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.12);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.055);
}

.impact-metric span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.impact-metric b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}

.impact-metric small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.25;
}

.impact-metric small.metric-value-note {
  margin-top: 6px;
  color: var(--gold);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.12;
}

.impact-grid.dropship-deal-impact-grid {
  grid-template-columns: repeat(3, minmax(150px, 220px)) minmax(0, 1fr);
  align-items: start;
}

.impact-grid.dropship-deal-impact-grid .dropship-compact-metric {
  max-width: 220px;
  min-height: 82px;
}

.impact-grid.dropship-deal-impact-grid .income-schedule-card-row {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.7fr);
  align-items: stretch;
}

.impact-grid.dropship-deal-impact-grid .income-schedule-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.impact-grid.dropship-deal-impact-grid .income-schedule-chips span {
  min-width: 0;
  min-height: 58px;
}

@media (max-width: 760px), (max-height: 600px) {
  .impact-grid.dropship-deal-impact-grid {
    grid-template-columns: 1fr;
  }

  .impact-grid.dropship-deal-impact-grid .dropship-compact-metric {
    max-width: none;
  }

  .impact-grid.dropship-deal-impact-grid .income-schedule-card-row,
  .impact-grid.dropship-deal-impact-grid .income-schedule-chips {
    grid-template-columns: 1fr;
  }
}

.impact-metric.good b {
  color: var(--green);
}

.impact-metric.warn b {
  color: var(--gold);
}

.impact-metric.bad b {
  color: var(--red);
}

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

.unit-trade-control {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
}

/* Quantity input and total-payment summary sit side by side to save vertical space */
.unit-trade-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 10px 0 12px;
}

.unit-trade-row .unit-trade-control {
  flex: 0 0 auto;
  width: 180px;
  max-width: 42%;
  margin: 0;
}

.unit-trade-row .unit-trade-control .unit-quantity-input {
  width: 100%;
}

.unit-trade-row .unit-trade-total-preview {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}

/* Keep the number stepper arrows visible at all times (not only on hover) */
.unit-quantity-input {
  -webkit-appearance: auto;
  appearance: auto;
}

.unit-quantity-input::-webkit-inner-spin-button,
.unit-quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: auto;
}

/* Narrow screens: stack the input above the summary again */
@media (max-width: 560px) {
  .unit-trade-row .unit-trade-control {
    width: 100%;
    max-width: 100%;
  }
  .unit-trade-row .unit-trade-total-preview {
    flex-basis: 100%;
  }
}

.unit-trade-control label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.unit-trade-control small {
  color: var(--muted);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.unit-trade-total-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  margin: -2px 0 12px;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.26);
}

.unit-trade-total-preview span,
.unit-trade-total-preview small,
.unit-trade-total-preview em {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 850;
}

.unit-trade-total-preview strong {
  color: var(--gold);
  font-size: clamp(1.18rem, 3vw, 1.55rem);
  font-weight: 1000;
  white-space: nowrap;
}

.unit-trade-total-preview small {
  grid-column: 1 / -1;
}

.unit-trade-total-preview em {
  grid-column: 1 / -1;
  font-style: normal;
}

.unit-trade-total-preview em.good {
  color: var(--green);
}

.unit-trade-total-preview em.bad {
  color: var(--red);
}

.unit-trade-actions {
  grid-template-columns: 1fr 1fr 0.8fr;
}

.unit-price-change-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(76, 201, 232, 0.24);
  border-radius: 10px;
  padding: 10px 12px;
  background:
    linear-gradient(145deg, rgba(76, 201, 232, 0.1), transparent),
    rgba(0, 0, 0, 0.24);
}

.unit-price-change-note.good { border-color: rgba(82, 211, 125, 0.3); }
.unit-price-change-note.bad { border-color: rgba(238, 98, 98, 0.3); }
.unit-price-change-note b { color: var(--ink); font-size: 0.82rem; }
.unit-price-change-note span { color: var(--cyan); font-size: 0.74rem; font-weight: 900; }
.unit-price-change-note.good span { color: var(--green); }
.unit-price-change-note.bad span { color: var(--red); }
.unit-price-change-note small { color: rgba(255, 255, 255, 0.58); font-size: 0.68rem; font-weight: 780; }

.unit-lot-selector {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.unit-lot-selector-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.unit-lot-selector-head span { color: var(--gold); font-size: 0.78rem; font-weight: 950; }
.unit-lot-selector-head small { color: var(--muted); font-size: 0.68rem; font-weight: 780; text-align: right; }

.unit-lot-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.unit-lot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 9px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, 0.22);
}

.unit-lot-copy { display: grid; gap: 3px; min-width: 0; }
.unit-lot-copy b { color: rgba(255, 255, 255, 0.86); font-size: 0.76rem; overflow-wrap: anywhere; }
.unit-lot-copy small { color: rgba(255, 255, 255, 0.54); font-size: 0.67rem; font-weight: 780; line-height: 1.3; }
.unit-lot-quantity { width: 100%; min-width: 0; }

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

.unit-lot-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.66rem;
  font-weight: 820;
}

.unit-lot-summary b { color: var(--ink); font-size: 0.78rem; }
.unit-lot-summary .good { color: var(--green); }
.unit-lot-summary .bad { color: var(--red); }

@media (max-width: 700px) {
  .landing-asset-value-summary,
  .unit-lot-summary {
    grid-template-columns: 1fr;
  }

  .unit-lot-selector-head {
    align-items: start;
    flex-direction: column;
  }

  .unit-lot-selector-head small { text-align: left; }
  .unit-lot-row { grid-template-columns: 1fr; }
  .unit-lot-list { max-height: none; }
}

.income-schedule-card-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 8px;
}

.income-schedule-card {
  min-width: 0;
  border: 1px solid rgba(85, 199, 126, 0.18);
  border-radius: 8px;
  padding: 9px;
  background: rgba(85, 199, 126, 0.07);
}

.income-schedule-card b,
.income-schedule-card span {
  display: block;
}

.income-schedule-card b {
  margin-bottom: 4px;
  color: var(--green);
}

.income-schedule-note-card {
  display: grid;
  align-content: start;
}

.income-schedule-note-card p {
  margin: 0;
  color: rgba(232, 241, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.42;
}

.income-schedule-card span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.income-schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.income-schedule-chips span {
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 58px;
  padding: 5px 8px;
  border: 1px solid rgba(85, 199, 126, 0.2);
  border-radius: 7px;
  background: rgba(85, 199, 126, 0.1);
}

.income-schedule-chips small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
}

.income-schedule-chips em {
  color: var(--green);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 700px) {
  .income-schedule-card-row {
    grid-template-columns: 1fr;
  }
}

.ghost.danger {
  border-color: rgba(238, 98, 98, 0.22);
  color: #ffd5d5;
  background: rgba(238, 98, 98, 0.08);
}

.card-reveal {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 24;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
  opacity: 0;
  transform: translate3d(16px, 12px, 0) scale(0.94) rotate(1.5deg);
  transition:
    opacity 260ms var(--enter),
    transform 300ms var(--enter);
}

.card-reveal[data-open="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.card-reveal-panel {
  min-height: 210px;
  animation: card-reveal 560ms var(--enter) both;
}

.card-reveal-panel small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.card-flare {
  position: absolute;
  right: -12px;
  top: 18px;
  width: 150px;
  height: 18px;
  opacity: 0.34;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform: rotate(32deg);
}

.dice-toast,
.event-toast {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.96);
  transition:
    opacity 220ms var(--enter),
    transform 220ms var(--enter);
}

.dice-toast {
  --dice-toast-top: 14%;
  left: 50%;
  top: var(--dice-toast-top);
  right: auto;
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 224, 150, 0.5);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 240, 193, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(243, 191, 85, 0.15), rgba(76, 201, 232, 0.08)),
    rgba(18, 17, 16, 0.96);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.58),
    0 0 42px rgba(243, 191, 85, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 1rem;
  font-weight: 900;
  transform: translate3d(-50%, calc(-50% + 18px), 0) scale(0.92);
}

.event-toast[data-open="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.dice-toast[data-open="true"] {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.dice-toast[data-viewer="other"] {
  border-color: rgba(255, 224, 150, 0.24);
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 240, 193, 0.08), transparent 36%),
    linear-gradient(135deg, rgba(243, 191, 85, 0.08), rgba(76, 201, 232, 0.04)),
    rgba(18, 17, 16, 0.9);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.48),
    0 0 20px rgba(243, 191, 85, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dice-toast[data-viewer="other"] .dice-face {
  filter: brightness(0.78) saturate(0.82);
  box-shadow:
    0 10px 22px rgba(243, 191, 85, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.dice-face {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  color: #15130f;
  background:
    linear-gradient(135deg, #fff4d0, var(--gold));
  box-shadow:
    0 12px 26px rgba(243, 191, 85, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  font-size: 1.72rem;
  font-weight: 950;
  animation: dice-pop 650ms var(--enter);
}

.event-toast {
  right: 24px;
  bottom: 24px;
  width: min(430px, calc(100vw - 32px));
  border: 1px solid rgba(255, 224, 150, 0.24);
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(43, 147, 195, 0.2), transparent),
    rgba(18, 17, 16, 0.94);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate3d(16px, 14px, 0) scale(0.96);
  font-size: 0.92rem;
  line-height: 1.35;
}

body:has(.card-reveal[data-open="true"]) .event-toast {
  bottom: 258px;
}

.event-toast[data-type="surprise"],
.event-toast[data-type="baby"],
.event-toast[data-type="burnout"],
.event-toast[data-type="layoff"],
.event-toast[data-type="digitalRisk"],
.event-toast[data-type="macro"] {
  border-color: rgba(238, 98, 98, 0.42);
  background:
    linear-gradient(135deg, rgba(238, 98, 98, 0.24), transparent),
    rgba(18, 17, 16, 0.94);
  animation: danger-pulse 420ms var(--enter);
}

.event-toast[data-type="payday"],
.event-toast[data-type="incomeDay"] {
  border-color: rgba(82, 211, 125, 0.42);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.22), transparent),
    rgba(18, 17, 16, 0.94);
}

.event-toast[data-type="system"],
.event-toast[data-type="info"] {
  border-color: rgba(76, 201, 232, 0.42);
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.24), transparent),
    rgba(18, 17, 16, 0.94);
}

.event-toast span {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.event-toast strong {
  display: block;
  font-size: 1.02rem;
}

.event-toast p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.event-toast[data-open="true"] {
  transform: translate3d(0, 0, 0) scale(1);
}

.win-burst {
  position: fixed;
  inset: 0;
  z-index: 160;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  transition: opacity 160ms ease;
}

.win-burst::before,
.win-burst::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
}

.win-burst[data-open="true"] {
  opacity: 1;
}

.win-burst[data-open="true"][data-kind="freedom-path-benefits"] {
  pointer-events: auto;
}

.win-burst[data-kind="victory"]::before {
  background:
    radial-gradient(circle at 50% 44%, rgba(243, 191, 85, 0.42), transparent 0 18rem),
    radial-gradient(circle at 32% 62%, rgba(82, 211, 125, 0.22), transparent 0 18rem),
    radial-gradient(circle at 70% 36%, rgba(76, 201, 232, 0.24), transparent 0 20rem),
    rgba(5, 7, 8, 0.58);
  animation: freedom-path-aura 4300ms ease both;
}

.win-burst[data-kind="victory"]::after {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(243, 191, 85, 0.92), transparent 18% 30%, rgba(82, 211, 125, 0.72), transparent 48% 62%, rgba(76, 201, 232, 0.78), transparent 82% 100%);
  mask-image: radial-gradient(circle, transparent 0 46%, #000 47% 53%, transparent 54%);
  transform: translate3d(-50%, -50%, 0) scale(0.55);
  animation: freedom-path-orbit 4300ms var(--enter) both;
}

.win-burst[data-kind="freedom-path"]::before,
.win-burst[data-kind="freedom-path-benefits"]::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(243, 191, 85, 0.36), transparent 0 18rem),
    radial-gradient(circle at 38% 56%, rgba(82, 211, 125, 0.26), transparent 0 20rem),
    radial-gradient(circle at 62% 42%, rgba(76, 201, 232, 0.24), transparent 0 23rem),
    rgba(5, 7, 8, 0.48);
  animation: freedom-path-aura 4300ms ease both;
}

.win-burst[data-kind="freedom-path"]::after,
.win-burst[data-kind="freedom-path-benefits"]::after {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background:
    conic-gradient(from 90deg, transparent 0 18%, rgba(243, 191, 85, 0.9), transparent 32% 48%, rgba(82, 211, 125, 0.72), transparent 64% 78%, rgba(76, 201, 232, 0.8), transparent);
  mask-image: radial-gradient(circle, transparent 0 48%, #000 49% 54%, transparent 55%);
  transform: translate3d(-50%, -50%, 0) scale(0.55);
  animation: freedom-path-orbit 4300ms var(--enter) both;
}

.win-burst .win-confetti {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  background: hsl(calc(38 + var(--i) * 13) 78% 58%);
  transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * 24deg));
}

.win-burst[data-open="true"] .win-confetti {
  animation: confetti-pop 1400ms var(--enter) both;
}

.win-firework {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  z-index: 0;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
}

.win-firework::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: hsl(var(--hue) 94% 64%);
  box-shadow:
    0 0 22px hsl(var(--hue) 94% 64% / 0.88),
    0 0 52px hsl(var(--hue) 94% 64% / 0.56);
  content: "";
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.16);
  animation: firework-flash 1450ms cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: var(--delay);
}

.win-firework-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(var(--hue) 96% 64%);
  box-shadow:
    0 0 8px hsl(var(--hue) 96% 64% / 0.92),
    0 0 18px hsl(var(--hue) 96% 64% / 0.52);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) rotate(var(--a)) translate3d(0, 0, 0) scale(0.22);
  animation: firework-spark 1450ms cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--delay) + var(--spark-delay));
}

.win-burst-panel {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 233, 166, 0.46);
  border-radius: 8px;
  padding: 34px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(15, 19, 19, 0.96), rgba(33, 29, 20, 0.94)),
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.22), transparent 60%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.56),
    0 0 72px rgba(243, 191, 85, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.92);
}

.win-burst-panel::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.22) 45%, transparent 52% 100%);
  transform: translate3d(-120%, 0, 0);
}

.win-burst[data-open="true"] .win-burst-panel {
  animation: freedom-path-panel-pop 860ms var(--enter) 140ms both;
}

.win-burst[data-open="true"] .win-burst-panel::before {
  animation: freedom-path-sweep 1200ms ease 420ms both;
}

.win-burst-ring {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(82, 211, 125, 0.42);
  border-radius: 8px;
  box-shadow:
    0 0 28px rgba(82, 211, 125, 0.24),
    inset 0 0 32px rgba(76, 201, 232, 0.12);
}

.win-burst-kicker {
  position: relative;
  margin: 0 auto 12px;
  width: fit-content;
  border: 1px solid rgba(82, 211, 125, 0.36);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--green);
  background: rgba(82, 211, 125, 0.1);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.win-burst-panel strong {
  position: relative;
  display: block;
  color: #fff4cc;
  font-size: 3.15rem;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow:
    0 0 28px rgba(243, 191, 85, 0.62),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.win-burst-panel p {
  position: relative;
  max-width: 520px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.06rem;
  line-height: 1.55;
}

.victory-celebration .win-burst-kicker {
  border-color: rgba(243, 191, 85, 0.48);
  color: var(--gold);
  background: rgba(243, 191, 85, 0.12);
}

.victory-celebration strong {
  color: #fff7dc;
}

.wedding-celebration .win-burst-kicker {
  border-color: rgba(255, 173, 210, 0.5);
  color: #ffd7ea;
  background: rgba(255, 122, 183, 0.14);
}

.wedding-celebration strong {
  color: #fff0f7;
  text-shadow:
    0 0 26px rgba(255, 143, 196, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.wedding-celebration.wedding-luxury .win-burst-kicker {
  border-color: rgba(243, 191, 85, 0.55);
  color: var(--gold);
  background: rgba(243, 191, 85, 0.16);
}

.wedding-celebration.wedding-luxury strong {
  color: #fff7dc;
  text-shadow:
    0 0 34px rgba(243, 191, 85, 0.72),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.wedding-celebration.wedding-budget .win-burst-kicker {
  border-color: rgba(148, 224, 184, 0.5);
  color: #d6f5e4;
  background: rgba(108, 205, 156, 0.14);
}

.win-burst-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  max-width: 420px;
  margin: 20px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
}

.win-burst-stats b {
  color: var(--gold);
  font-size: 1.35rem;
  line-height: 1;
}

.win-burst-stats small {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 800;
}

.freedom-path-benefits {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.freedom-path-benefits-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px auto 0;
}

.freedom-path-benefits-grid article {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
}

.freedom-path-benefits-grid b,
.freedom-path-benefits-grid small {
  display: block;
}

.freedom-path-benefits-grid b {
  color: var(--gold);
}

.freedom-path-benefits-grid small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
}

.freedom-path-benefits-accept {
  position: relative;
  margin-top: 20px;
}

.win-burst-track {
  position: relative;
  max-width: 430px;
  height: 14px;
  margin: 22px auto 0;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.win-burst-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--gold));
  box-shadow: 0 0 18px rgba(82, 211, 125, 0.56);
  transform: scaleX(0);
  transform-origin: left;
}

.win-burst-track b {
  position: absolute;
  inset: 50% 10px auto auto;
  color: #15130f;
  font-size: 0.72rem;
  line-height: 1;
  transform: translateY(-50%);
}

.win-burst[data-open="true"] .win-burst-track i {
  animation: freedom-path-progress 1100ms var(--enter) 520ms both;
}

@media (max-width: 640px) {
  .win-burst {
    padding: 14px;
  }

  .win-burst-panel {
    padding: 26px 18px;
  }

  .win-burst-panel strong {
    font-size: 2rem;
  }

  .win-burst-panel p {
    font-size: 0.95rem;
  }

  .win-burst-stats {
    grid-template-columns: 1fr;
  }

  .freedom-path-benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .win-burst[data-open="true"] .win-confetti,
  .win-burst[data-open="true"] .win-firework::before,
  .win-burst[data-open="true"] .win-firework-spark,
  .win-burst[data-kind="victory"]::before,
  .win-burst[data-kind="victory"]::after,
  .win-burst[data-kind="freedom-path"]::before,
  .win-burst[data-kind="freedom-path"]::after,
  .win-burst[data-kind="freedom-path-benefits"]::before,
  .win-burst[data-kind="freedom-path-benefits"]::after,
  .win-burst[data-open="true"] .win-burst-panel,
  .win-burst[data-open="true"] .win-burst-panel::before,
  .win-burst[data-open="true"] .win-burst-track i {
    animation: none;
  }

  .win-burst[data-kind="victory"]::before,
  .win-burst[data-kind="freedom-path"]::before,
  .win-burst[data-open="true"] .win-burst-panel {
    opacity: 1;
  }

  .win-burst[data-open="true"] .win-confetti,
  .win-burst[data-open="true"] .win-firework {
    display: none;
  }

  .win-burst[data-open="true"] .win-burst-track i {
    transform: scaleX(1);
  }
}

@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-56px, -56px, 0); }
}

@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes view-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes promo-card-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes npc-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.86);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.04);
    box-shadow:
      0 0 0 5px rgba(76, 201, 232, 0.16),
      0 18px 34px rgba(76, 201, 232, 0.18);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes console-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes text-pop {
  from {
    opacity: 0.45;
    transform: translate3d(0, 4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes start-ready {
  0%, 100% {
    box-shadow: 0 12px 28px rgba(243, 191, 85, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(82, 211, 125, 0.2),
      0 20px 42px rgba(82, 211, 125, 0.22);
  }
}

@keyframes end-turn-ready {
  0%, 100% {
    border-color: rgba(82, 211, 125, 0.28);
  }
  50% {
    border-color: rgba(82, 211, 125, 0.72);
  }
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes repay-confirm-pulse {
  0% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.62),
      0 0 0 rgba(87, 215, 139, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  45% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.62),
      0 0 56px rgba(87, 215, 139, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  100% {
    box-shadow:
      0 34px 90px rgba(0, 0, 0, 0.62),
      0 0 40px rgba(87, 215, 139, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

@keyframes turn-roll-shine {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes action-panel-pop {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes finance-impact-bounce {
  0% {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scale(1);
  }
  42% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.035);
  }
  70% {
    transform: translate3d(0, 1px, 0) scale(0.992);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes finance-delta-pop {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 0, 0) scale(0.78);
  }
  38% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.16);
  }
  64% {
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes card-sheen {
  0%, 52% {
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    transform: translate3d(120%, 0, 0);
  }
}

@keyframes avatar-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-5deg); }
  50% { transform: translate3d(0, -3px, 0) rotateY(5deg); }
}

@keyframes avatar-career-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-3deg) scale(1); }
  50% { transform: translate3d(0, -4px, 0) rotateY(4deg) scale(1.015); }
}

@keyframes avatar-image-idle {
  0%, 100% { transform: translate3d(0, 1px, 0) scale(1.02); }
  45% { transform: translate3d(0, -2px, 0) scale(1.045); }
  58% { transform: translate3d(1px, -2px, 0) scale(1.04); }
}

@keyframes avatar-shimmer {
  0%, 54% { opacity: 0; transform: translate3d(-120%, 0, 0); }
  62% { opacity: 0.72; }
  76%, 100% { opacity: 0; transform: translate3d(120%, 0, 0); }
}

@keyframes avatar-shadow-pulse {
  0%, 100% { opacity: 0.32; transform: translate3d(0, 0, 0) scaleX(0.78); }
  50% { opacity: 0.2; transform: translate3d(0, 3px, 0) scaleX(0.64); }
}

@keyframes active-token {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -2px, 0) scale(1.08); }
}

@keyframes token-hop {
  0% {
    transform: translate3d(0, 8px, 0) scale(0.82);
    opacity: 0.3;
  }
  45% {
    transform: translate3d(0, -10px, 0) scale(1.16);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes path-flash {
  0% { box-shadow: 0 0 0 rgba(76, 201, 232, 0); }
  42% { box-shadow: 0 0 0 4px rgba(76, 201, 232, 0.16); }
  100% { box-shadow: 0 0 0 rgba(76, 201, 232, 0); }
}

@keyframes tile-land {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(243, 191, 85, 0);
  }
  38% {
    transform: scale(1.035);
    box-shadow: 0 18px 42px rgba(243, 191, 85, 0.26);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
  }
}

@keyframes route-tile-land {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    box-shadow: 0 0 0 rgba(243, 191, 85, 0);
  }
  38% {
    transform: translate3d(-50%, -50%, 0) scale(1.08);
    box-shadow: 0 18px 42px rgba(243, 191, 85, 0.32);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
  }
}

@keyframes board-token-glow {
  0%, 100% {
    box-shadow:
      0 0 0 5px rgba(243, 191, 85, 0.2),
      0 16px 30px rgba(0, 0, 0, 0.46),
      inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(243, 191, 85, 0.3),
      0 20px 36px rgba(0, 0, 0, 0.52),
      inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  }
}

@keyframes board-token-land-glow {
  0% {
    box-shadow:
      0 0 0 0 rgba(76, 201, 232, 0),
      0 12px 24px rgba(0, 0, 0, 0.42),
      inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  }
  45% {
    box-shadow:
      0 0 0 10px rgba(76, 201, 232, 0.22),
      0 20px 38px rgba(0, 0, 0, 0.52),
      inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(76, 201, 232, 0),
      0 12px 24px rgba(0, 0, 0, 0.42),
      inset 0 -10px 14px rgba(0, 0, 0, 0.24);
  }
}

@keyframes bot-thinking {
  0%, 100% { transform: translate3d(0, -2px, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes card-reveal {
  from {
    opacity: 0;
    transform: translate3d(10px, 0, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes log-enter {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes dice-pop {
  0% { transform: rotate(-18deg) scale(0.72); }
  42% { transform: rotate(12deg) scale(1.14); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes dice-edge-impact {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.24) rotate(0deg);
  }
  24% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(0.86) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(2.2) rotate(16deg);
  }
}

@keyframes dice-roll-trail {
  0% {
    opacity: 0;
    transform: translate3d(-30%, 0, -46px) rotate(-14deg) scale(0.58);
  }
  36% {
    opacity: 0.5;
    transform: translate3d(-12%, 2px, -46px) rotate(-9deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(20%, 1px, -46px) rotate(-4deg) scale(0.72);
  }
}

@keyframes dice-face-impact-flash {
  0% {
    opacity: 0;
    transform: translate3d(0, 8%, -40px) scale(0.34);
  }
  36% {
    opacity: 0.48;
    transform: translate3d(0, 8%, -40px) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 8%, -40px) scale(1.28);
  }
}

@keyframes dice-face-impact-streak {
  0% {
    opacity: 0;
    transform: translate3d(-18%, 0, -46px) rotate(-8deg) scale(0.5);
  }
  42% {
    opacity: 0.68;
    transform: translate3d(0, 1px, -46px) rotate(-4deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(12%, 1px, -46px) rotate(-2deg) scale(0.76);
  }
}

@keyframes dice-metal-swirl {
  0% {
    opacity: 0;
    transform: rotate(-28deg) scale(0.58);
  }
  34% {
    opacity: 0.58;
    transform: rotate(18deg) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: rotate(54deg) scale(1.46);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-dice-run::before,
  .board-dice-run::after {
    animation: none;
    opacity: 0;
  }

  .board-dice-run.settled .board-dice-shadow::before {
    animation: none;
    opacity: 0;
  }
}

@keyframes danger-pulse {
  0%, 100% {
    box-shadow:
      0 24px 58px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(238, 98, 98, 0.14),
      0 24px 58px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

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

@keyframes confetti-pop {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--i) * 24deg)) scale(0.5);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), 0) rotate(var(--r)) scale(1);
  }
}

@keyframes firework-flash {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.12);
  }
  10% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  34% {
    opacity: 0.76;
    transform: translate3d(-50%, -50%, 0) scale(0.58);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.18);
  }
}

@keyframes firework-spark {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(var(--a)) translate3d(0, 0, 0) scale(0.18);
  }
  9% {
    opacity: 1;
  }
  58% {
    opacity: 0.92;
    transform: translate3d(-50%, -50%, 0) rotate(var(--a)) translate3d(var(--d), 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(var(--a)) translate3d(calc(var(--d) * 1.22), 0, 0) scale(0.26);
  }
}

@keyframes freedom-path-aura {
  0% { opacity: 0; filter: saturate(0.8); }
  12% { opacity: 1; }
  76% { opacity: 1; filter: saturate(1.18); }
  100% { opacity: 0; filter: saturate(0.9); }
}

@keyframes freedom-path-orbit {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.5);
  }
  16% {
    opacity: 0.9;
    transform: translate3d(-50%, -50%, 0) rotate(65deg) scale(1);
  }
  84% {
    opacity: 0.6;
    transform: translate3d(-50%, -50%, 0) rotate(250deg) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(320deg) scale(1.16);
  }
}

@keyframes freedom-path-panel-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.9);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes freedom-path-sweep {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(120%, 0, 0); }
}

@keyframes freedom-path-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translate3d(0, -4px, 14px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
      0 16px 32px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .route-board .tile:hover {
    transform: translate3d(-50%, -50%, 28px) scale(1.08);
  }

  .metric:hover,
  .stat:hover,
  .player-card:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgba(255, 224, 150, 0.22);
    background: rgba(255, 255, 255, 0.08);
  }
}

@media (max-height: 720px) {
  .career-roll-panel,
  .dream-picker-panel {
    padding: 12px;
  }

  .career-roll-panel.career-result-card {
    width: min(1140px, calc(100vw - 24px));
    grid-template-columns: minmax(184px, 0.48fr) minmax(372px, 1.02fr) minmax(338px, 0.98fr);
    gap: 7px;
  }

  .career-start-card {
    gap: 12px;
    padding: 20px;
  }

  .career-start-icon {
    width: 78px;
    height: 78px;
    font-size: 3.4rem;
  }

  .career-result-card,
  .dream-picker-panel {
    gap: 10px;
  }

  .career-result-identity,
  .dream-picker-copy,
  .dream-feature-card {
    padding: 12px;
  }

  .career-profession-banner {
    min-height: 56px;
    padding: 9px 14px;
  }

  .career-profession-banner h2 {
    font-size: clamp(1.36rem, 2.1vw, 1.78rem);
  }

  .career-result-identity {
    gap: 7px;
  }

  .career-result-icon,
  .career-result-copy,
  .career-result-start-row {
    width: 100%;
  }

  .career-result-icon {
    height: auto;
    aspect-ratio: 4 / 3.82;
    font-size: 3rem;
  }

  .dream-picker-copy h2 {
    font-size: 1.42rem;
  }

  .career-result-note {
    display: -webkit-box;
    font-size: 0.78rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .career-cashflow-tile,
  .dream-cost-tile,
  .career-power-card,
  .career-stat,
  .career-detail-card {
    padding: 9px;
  }

  .career-power-card {
    min-height: 332px;
  }

  .career-power-chart {
    width: min(100%, 298px);
    max-height: 298px;
  }

  .career-stat-grid {
    gap: 6px;
  }

  .career-cashflow-tile,
  .career-primary-action {
    min-height: 64px;
  }

  .career-cashflow-tile,
  .career-result-start-row .career-primary-action {
    min-height: 54px;
  }

  .career-cashflow-tile strong,
  .dream-cost-tile strong {
    font-size: 1.32rem;
  }

  .career-stat {
    min-height: 52px;
  }

  .career-stat b {
    font-size: 1.36rem;
  }

  .career-stat span {
    font-size: 0.8rem;
  }

  .career-detail-head span {
    font-size: 0.92rem;
  }

  .career-detail-head b {
    font-size: 1rem;
  }

  .career-line-list {
    gap: 0;
    padding-top: 5px;
  }

  .career-line-item {
    min-height: 27px;
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .career-line-item b {
    font-size: 0.78rem;
  }

  .dream-feature-icon {
    width: 62px;
    height: 62px;
    font-size: 2.45rem;
  }

  .dream-feature-card h3 {
    font-size: 1.34rem;
  }

  .dream-feature-card p {
    font-size: 0.84rem;
    line-height: 1.34;
    -webkit-line-clamp: 3;
  }

  .career-primary-action,
  .dream-confirm-button {
    padding: 0.78rem 0.9rem;
    font-size: 0.96rem;
  }
}

@media (max-height: 600px) {
  .career-result-note,
  .dream-picker-copy .muted {
    display: none;
  }

  .career-roll-panel.career-result-card {
    width: min(1040px, calc(100vw - 18px));
    grid-template-columns: minmax(154px, 0.46fr) minmax(292px, 0.98fr) minmax(270px, 0.92fr);
    gap: 7px;
  }

  .career-profession-banner {
    min-height: 48px;
    padding: 10px 12px;
  }

  .career-profession-banner h2 {
    font-size: clamp(1.16rem, 1.82vw, 1.42rem);
  }

  .career-result-icon,
  .career-result-copy,
  .career-result-start-row {
    width: 100%;
  }

  .career-result-icon {
    aspect-ratio: 4 / 3.7;
    height: auto;
  }

  .career-power-card > span {
    display: none;
  }

  .career-power-card {
    width: 100%;
    min-height: 242px;
    padding: 7px 9px;
  }

  .career-power-chart {
    width: min(100%, 218px);
    max-height: 218px;
  }

  .career-detail-head {
    padding-bottom: 5px;
  }

  .career-detail-head span,
  .career-detail-head b,
  .career-result-note,
  .career-line-item,
  .career-line-item b {
    font-size: 0.68rem;
  }

  .career-stat span {
    font-size: 0.72rem;
  }
}

@media (max-width: 1100px) {
  .career-roll-panel.career-result-card {
    width: min(920px, calc(100vw - 18px));
    grid-template-columns: minmax(184px, 0.42fr) minmax(0, 1fr) minmax(318px, 0.9fr);
    grid-template-areas:
      "banner banner banner"
      "stats power identity"
      "details details identity";
  }

  .career-profession-banner {
    min-height: 58px;
  }

  .career-power-card {
    min-height: 330px;
  }

  .career-power-chart {
    width: min(100%, 294px);
    max-height: 294px;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .career-roll-panel.career-result-card {
    height: calc(100dvh - 34px);
    grid-template-rows: auto minmax(0, 1fr) minmax(132px, 0.46fr);
  }

  .career-result-identity {
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-content: stretch;
    overflow: hidden;
  }

  .career-result-icon {
    height: 100%;
    align-self: stretch;
    aspect-ratio: auto;
  }

  .career-detail-card {
    padding: 8px 10px;
  }

  .career-detail-head {
    padding-bottom: 5px;
  }

  .career-line-item {
    min-height: 23px;
    font-size: 0.7rem;
  }

  .career-line-item b {
    font-size: 0.72rem;
  }
}

@media (max-width: 760px) {
  .career-roll-panel,
  .dream-picker-panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 10px;
  }

  .career-roll-panel.career-result-card,
  .dream-picker-panel {
    grid-template-columns: 1fr;
  }

  .career-roll-panel.career-result-card {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 12px;
    grid-template-areas:
      "banner"
      "identity"
      "stats"
      "details";
  }

  .career-result-identity {
    --career-side-width: 100%;
    grid-template-columns: minmax(0, 1.18fr) minmax(112px, 0.72fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "avatar power"
      "copy copy"
      "action action";
    align-items: stretch;
    width: 100%;
    justify-self: stretch;
    gap: 8px;
    padding: 10px;
  }

  .career-profession-banner {
    align-self: stretch;
    min-height: 56px;
    padding: 11px 14px;
  }

  .career-profession-banner h2 {
    font-size: clamp(1.35rem, 6vw, 2rem);
  }

  .career-result-head {
    flex-direction: column;
    align-items: stretch;
  }

  .career-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .career-stat.cashflow,
  .career-stat.savings {
    display: none;
  }

  .career-stat {
    min-height: 58px;
    padding: 8px 10px;
  }

  .career-stat span {
    font-size: 0.72rem;
  }

  .career-stat b {
    font-size: 1.2rem;
  }

  .career-power-chart {
    width: min(100%, 188px);
    max-height: 188px;
  }

  .career-power-card {
    display: none;
  }

  .career-mobile-power-card {
    grid-area: power;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    align-items: center;
    justify-items: center;
    overflow: hidden;
    border: 1px solid rgba(243, 191, 85, 0.28);
    border-radius: 12px;
    padding: 8px;
    background:
      radial-gradient(circle at 50% 24%, rgba(76, 201, 232, 0.15), transparent 58%),
      linear-gradient(180deg, rgba(243, 191, 85, 0.12), rgba(255, 255, 255, 0.025)),
      rgba(0, 0, 0, 0.24);
  }

  .career-mobile-power-card span {
    justify-self: start;
    color: var(--gold);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
  }

  .career-mobile-power-chart {
    width: min(100%, 136px);
    max-height: 136px;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.32));
  }

  .career-detail-grid {
    grid-template-columns: 1fr;
  }

  .career-result-icon {
    grid-area: avatar;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5.15;
    font-size: 2.2rem;
  }

  .career-result-copy,
  .career-result-start-row {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  .career-result-copy {
    grid-area: copy;
    align-self: start;
    text-align: left;
  }

  .career-result-start-row {
    grid-area: action;
    grid-template-columns: 1fr;
    align-self: start;
    position: sticky;
    bottom: 8px;
    z-index: 3;
    border: 1px solid rgba(255, 224, 150, 0.22);
    border-radius: 12px;
    padding: 6px;
    background:
      linear-gradient(180deg, rgba(18, 17, 16, 0.94), rgba(7, 7, 6, 0.98)),
      rgba(0, 0, 0, 0.9);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.34);
  }

  .career-result-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.72rem;
    line-height: 1.24;
  }

  .career-cashflow-tile,
  .career-result-start-row .career-primary-action {
    min-height: 44px;
  }

  .dream-picker-copy {
    grid-template-rows: auto auto auto;
  }

  .dream-cost-tile,
  .dream-confirm-button {
    align-self: stretch;
  }
}

@media (max-width: 560px) {
  .dream-nav-row {
    grid-template-columns: 1fr;
  }

  .career-stat-grid,
  .career-detail-grid {
    gap: 7px;
  }

  .career-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .career-stat b {
    font-size: 1.12rem;
  }

  .career-result-icon {
    width: 100%;
    height: auto;
  }

  .career-profession-banner {
    padding: 12px;
  }

  .career-profession-banner h2 {
    font-size: clamp(1.2rem, 6.5vw, 1.72rem);
  }

  .dream-feature-card {
    gap: 8px;
  }
}

/* Landscape mobile (short viewport height, width above the portrait 760px
   breakpoint): the desktop 3-column career-result-card grid has no room to
   fit six stat cards + two detail lists at this height, which was forcing
   cards to overlap. Stack it into one scrollable column instead, mirroring
   the portrait layout but tuned for the wider landscape width. */
@media (min-width: 761px) and (max-height: 600px) {
  .career-roll-panel.career-result-card {
    display: block;
    width: min(640px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  /* Plain block stacking (not grid) on purpose: a grid/flex container
     squeezed by max-height compresses "auto" rows below their content size
     once total content exceeds the available height, which re-creates the
     overlap this block exists to fix. Block children never shrink below
     their natural size — the panel just grows and scrolls instead. DOM
     order already matches the desired banner/identity/stats/details/power
     sequence, so no grid-area mapping is needed. */
  .career-roll-panel.career-result-card > * + * {
    margin-top: 10px;
  }

  .career-profession-banner {
    min-height: 0;
    padding: 10px 14px;
  }

  .career-profession-banner h2 {
    font-size: clamp(1.15rem, 3vw, 1.5rem);
  }

  .career-power-card {
    display: none;
  }

  .career-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 8px;
  }

  .career-stat.cashflow,
  .career-stat.savings {
    display: none;
  }

  .career-stat {
    min-height: 44px;
    padding: 7px 10px;
  }

  .career-stat span {
    font-size: 0.7rem;
  }

  .career-stat b {
    font-size: 1.1rem;
  }

  .career-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .career-detail-card {
    padding: 8px 10px;
    overflow: visible;
  }

  .career-line-list {
    overflow: visible;
  }

  .career-line-item {
    min-height: 24px;
    font-size: 0.72rem;
  }

  .career-line-item b {
    font-size: 0.74rem;
  }

  .career-result-identity {
    --career-side-width: 100%;
    grid-template-columns: minmax(170px, 210px) minmax(112px, 132px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "avatar power copy"
      "avatar power action";
    align-items: stretch;
    align-content: start;
    width: 100%;
    gap: 8px;
    overflow: visible;
  }

  .career-result-icon {
    grid-area: avatar;
    width: 100%;
    height: auto;
    min-height: min-content;
    aspect-ratio: 4 / 4.6;
    justify-self: center;
    overflow: hidden;
  }

  .career-mobile-power-card {
    grid-area: power;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    overflow: hidden;
    border: 1px solid rgba(243, 191, 85, 0.28);
    border-radius: 12px;
    padding: 7px;
    background:
      radial-gradient(circle at 50% 24%, rgba(76, 201, 232, 0.15), transparent 58%),
      linear-gradient(180deg, rgba(243, 191, 85, 0.12), rgba(255, 255, 255, 0.025)),
      rgba(0, 0, 0, 0.24);
  }

  .career-mobile-power-card span {
    justify-self: start;
    color: var(--gold);
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
  }

  .career-mobile-power-chart {
    width: min(100%, 118px);
    max-height: 118px;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.32));
  }

  .career-result-copy {
    grid-area: copy;
    width: 100%;
    text-align: left;
  }

  .career-result-start-row {
    grid-area: action;
    width: 100%;
    align-self: center;
    grid-template-columns: 1fr;
  }

  .career-result-start-row .career-primary-action,
  .career-cashflow-tile {
    min-height: 54px;
  }

  /* place-items:center on .career-result-icon (base rule) keeps the
     fallback-initials span centered at its natural size, but that same rule
     stops height:100% below from resolving against the icon's aspect-ratio
     height, so the photo fell back to its own intrinsic ratio and spilled
     out of the frame. Absolute positioning sizes it from the icon box
     directly instead, sidestepping place-items entirely. */
  .career-result-pawn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 761px) and (max-height: 600px) {
  html.touch-device .career-roll-panel.career-result-card {
    --career-mobile-avatar-w: 238px;
    --career-mobile-power-w: 270px;
    --career-mobile-vitals-w: 196px;
    --career-mobile-gap: 0px;
    --career-mobile-pad: 0px;
    --career-mobile-identity-w: calc(var(--career-mobile-avatar-w) + var(--career-mobile-power-w) + var(--career-mobile-vitals-w) + (var(--career-mobile-gap) * 2) + (var(--career-mobile-pad) * 2) + 2px);
    width: min(calc(var(--career-mobile-identity-w) + 14px), calc(100vw - 92px));
    padding: 6px;
  }

  html.touch-device .career-roll-panel.career-result-card > * + * {
    margin-top: 4px;
  }

  html.touch-device .career-result-identity {
    width: var(--career-mobile-identity-w);
    grid-template-columns: var(--career-mobile-avatar-w) var(--career-mobile-power-w) var(--career-mobile-vitals-w);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "avatar power vitals";
    gap: var(--career-mobile-gap);
    justify-items: stretch;
    justify-self: center;
    padding: var(--career-mobile-pad);
  }

  html.touch-device .career-result-icon,
  html.touch-device .career-mobile-power-card,
  html.touch-device .career-mobile-vitals {
    width: 100%;
    justify-self: stretch;
  }

  html.touch-device .career-mobile-power-card {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr);
    min-height: 100%;
    padding: 6px;
  }

  html.touch-device .career-mobile-power-card span {
    display: none;
  }

  html.touch-device .career-mobile-power-chart {
    width: min(100%, 250px);
    max-height: 250px;
  }

  html.touch-device .career-mobile-vitals {
    grid-area: vitals;
    display: grid;
    grid-template-rows: repeat(5, minmax(38px, 1fr));
    align-self: stretch;
    gap: 0;
    min-height: 0;
  }

  html.touch-device .career-mobile-vital {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 8px;
  }

  html.touch-device .career-mobile-vital span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.6rem;
    font-weight: 950;
    line-height: 1.08;
  }

  html.touch-device .career-mobile-vital b {
    color: var(--ink);
    font-size: clamp(0.84rem, 1.62vw, 1.08rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
  }

  html.touch-device .career-mobile-vital.income b {
    color: var(--green);
  }

  html.touch-device .career-mobile-vital.expense b,
  html.touch-device .career-mobile-vital.cashflow.negative b {
    color: var(--red);
  }

  html.touch-device .career-mobile-vital.cashflow.positive b {
    color: var(--gold);
  }

  html.touch-device .career-mobile-vital.stress b {
    color: var(--violet);
  }

  html.touch-device .career-result-copy {
    display: none;
  }

  html.touch-device .career-result-start-row {
    display: none;
  }

  html.touch-device .career-stat-grid {
    display: none;
  }

  html.touch-device .career-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  html.touch-device .career-detail-card {
    min-height: 44px;
    padding: 8px 10px;
  }

  html.touch-device .career-detail-head {
    padding-bottom: 0;
    border-bottom: 0;
  }

  html.touch-device .career-detail-head span,
  html.touch-device .career-detail-head b {
    font-size: 0.68rem;
    line-height: 1.1;
  }

  html.touch-device .career-mobile-footer-action {
    display: grid;
    width: min(var(--career-mobile-identity-w), 100%);
    justify-self: center;
  }

  html.touch-device .career-mobile-footer-action .career-primary-action {
    min-height: 44px;
    padding: 0.44rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.08;
    touch-action: manipulation;
  }
}

@media (min-width: 761px) and (max-height: 520px) {
  html.touch-device .career-roll-panel.career-result-card {
    --career-mobile-avatar-w: 220px;
    --career-mobile-power-w: 248px;
    --career-mobile-vitals-w: 186px;
    --career-mobile-identity-w: calc(var(--career-mobile-avatar-w) + var(--career-mobile-power-w) + var(--career-mobile-vitals-w) + (var(--career-mobile-gap) * 2) + (var(--career-mobile-pad) * 2) + 2px);
    width: min(calc(var(--career-mobile-identity-w) + 14px), calc(100vw - 96px));
  }

  html.touch-device .career-result-identity {
    grid-template-rows: 226px;
  }

  html.touch-device .career-result-icon {
    height: 100%;
    aspect-ratio: auto;
  }

  html.touch-device .career-mobile-power-chart {
    width: min(100%, 210px);
    max-height: 210px;
  }

  html.touch-device .career-mobile-vitals {
    grid-template-rows: repeat(5, minmax(36px, 1fr));
  }

  html.touch-device .career-mobile-vital {
    min-height: 36px;
    padding: 5px 8px;
  }

  html.touch-device .career-detail-grid {
    display: none;
  }
}

@media (max-width: 1180px) {
  .app-topbar,
  .app-workspace,
  .lobby-view,
  .intro-stage,
  .game-layout {
    grid-template-columns: 1fr;
  }

  .side-panel {
    position: static;
    order: -1;
  }

  .action-panel {
    top: auto;
  }

  body[data-phase="game"] .app-topbar {
    grid-template-columns: 1fr;
  }

  body[data-phase="game"] .top-room-card {
    justify-self: stretch;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body[data-phase="game"] .app-workspace {
    grid-template-columns: 1fr;
  }

  body[data-phase="game"] .side-panel {
    order: 2;
  }

  .landing-event-panel {
    grid-template-columns: 1fr;
    width: min(720px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: auto;
  }

  .landing-finance-sheet,
  .landing-event-sheet {
    max-height: none;
    overflow: visible;
  }

  .landing-event-sheet {
    grid-template-columns: 1fr;
  }

  .landing-buyout-row {
    grid-template-columns: 1fr;
  }

  .landing-buyout-figs {
    grid-template-columns: repeat(4, minmax(104px, 1fr));
  }
}

@media (max-width: 720px) {
  .game-client {
    width: calc(100vw - 18px);
    max-width: 100%;
    padding-top: 10px;
  }

  .intro-stage,
  .game-layout,
  .app-topbar,
  .app-workspace,
  .lobby-view,
  .brand-stack,
  .room-panel,
  .side-panel,
  .stage-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  h1 {
    font-size: 2.85rem;
    line-height: 0.96;
  }

  .top-brand h1 {
    font-size: 2.55rem;
  }

  .waiting-head h2 {
    max-width: 12ch;
    font-size: 2.05rem;
    overflow-wrap: break-word;
  }

  .subtitle {
    max-width: 34ch;
    font-size: 0.98rem;
    word-break: break-word;
  }

  .brand-stack,
  .room-panel,
  .side-panel,
  .view-panel {
    padding: 14px;
  }

  .ledger-item {
    grid-template-columns: 1fr;
  }

  .ledger-effects {
    justify-content: start;
  }

  .debug-tools-grid {
    grid-template-columns: 1fr;
  }

  .debug-balance {
    grid-template-columns: 1fr;
  }

  .debug-sim-metrics {
    grid-template-columns: 1fr;
  }

  .debug-sim-row {
    align-items: start;
    flex-direction: column;
  }

  .debug-sim-row small {
    flex: 0 0 auto;
  }

  body[data-phase="waiting"] .side-panel {
    order: 2;
  }

  .room-header,
  .action-summary,
  .status-text {
    min-width: 0;
    word-break: break-word;
  }

  .view-nav {
    position: sticky;
    top: auto;
    bottom: 8px;
    z-index: 28;
    overflow-x: auto;
  }

  body[data-phase="game"] .view-nav {
    grid-template-columns: repeat(5, minmax(92px, 1fr)) auto;
  }

  .view-nav button {
    min-height: 40px;
    padding: 0 10px;
    font-size: 0.82rem;
  }

  body[data-phase="game"] .top-brand {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  body[data-phase="game"] .top-brand h1 {
    font-size: 1.55rem;
  }

  body[data-phase="game"] .top-brand .eyebrow {
    font-size: 0.64rem;
  }

  body[data-phase="game"][data-view="board"] .board-overlay-hud {
    left: 12px;
    right: 12px;
    top: 44px;
    flex-wrap: wrap;
  }

  body[data-phase="game"][data-view="board"] .board-overlay-hud .turn-console {
    flex: 1 1 100%;
    min-width: 0;
  }

  body[data-phase="game"][data-view="board"] .turn-timeline {
    top: 136px;
  }

  body[data-phase="game"][data-view="board"] .play-board {
    margin-top: 188px;
  }

  .score-strip,
  .actions,
  .secondary-actions,
  .track-header,
  .control-grid,
  .metrics,
  .turn-action-summary,
  .turn-pre-actions,
  .life-time-grid,
  .promo-grid {
    grid-template-columns: 1fr;
  }

  .stage-hud,
  .hero-stat,
  .waiting-head,
  .waiting-bot-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .stage-hud-actions {
    flex-direction: column;
  }

  .board-help-button,
  .turn-console {
    width: 100%;
  }

  .turn-timeline {
    grid-template-columns: repeat(6, minmax(160px, 1fr));
    padding: 9px;
  }

  .decision-modal {
    align-items: end;
    padding: 10px;
  }

  .landing-event-modal {
    align-items: start;
    padding: 9px;
  }

  .landing-event-modal[data-minimized="true"] {
    left: 8px;
    top: 54%;
    padding: 0;
  }

  .landing-event-dock {
    width: min(188px, calc(100vw - 18px));
    min-height: 56px;
    padding: 8px 10px 8px 8px;
  }

  .turn-action-modal[data-minimized="true"] {
    right: 8px;
    top: 38%;
    padding: 0;
  }

  .turn-action-dock {
    width: min(188px, calc(100vw - 18px));
    min-height: 56px;
    padding: 8px 8px 8px 10px;
  }

  .turn-action-meta {
    justify-content: space-between;
    margin-top: 8px;
  }

  .turn-action-modal {
    align-items: center;
    padding: 12px;
  }

  .turn-action-panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 14px;
  }

  .turn-roll-primary {
    min-height: 78px;
    padding: 9px 12px;
  }

  .turn-action-head,
  .turn-subpanel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .turn-action-summary,
  .turn-loan-grid {
    grid-template-columns: 1fr;
  }

  .turn-loan-stepper {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .turn-loan-arrow {
    min-height: 76px;
    padding: 8px 4px;
  }

  .turn-loan-arrow small {
    display: none;
  }

  .turn-loan-fine-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 16px;
  }

  .turn-loan-fine-actions span {
    grid-column: 1 / -1;
    justify-self: center;
    padding-inline: 0;
  }

  .landing-payment-loan-panel .turn-loan-stepper {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    width: 100%;
  }

  .landing-loan-compact-stepper,
  .landing-borrow-result-grid {
    grid-template-columns: 1fr;
  }

  .landing-loan-adjust-cluster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .turn-loan-preview {
    grid-template-columns: 1fr;
  }

  .turn-action-panel[data-subpanel="borrow"] .turn-loan-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-income-card small {
    align-items: flex-start;
    flex-direction: column;
  }

  .turn-debt-row {
    grid-template-columns: 1fr;
  }

  .turn-debt-actions {
    justify-content: stretch;
  }

  .turn-debt-actions button {
    flex: 1 1 120px;
  }

  .landing-event-panel {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: calc(100vh - 28px);
    overflow: auto;
  }

  .landing-finance-sheet,
  .landing-event-sheet {
    max-height: none;
    overflow: visible;
  }

  .landing-event-sheet {
    grid-template-columns: 1fr;
  }

  .landing-finance-head {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .landing-finance-stress {
    grid-column: 1 / 2;
    justify-self: stretch;
  }

  .landing-finance-cash {
    grid-column: 2 / -1;
    justify-self: stretch;
  }

  .landing-finance-stress strong,
  .landing-finance-cash strong {
    justify-content: flex-start;
    text-align: left;
  }

  .landing-event-header {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
  }

  .landing-opportunity-header {
    min-height: 40px;
    padding-right: 58px;
  }

  .landing-opportunity-header h2 {
    gap: 8px;
  }

  .landing-opportunity-header h2 span {
    min-height: 28px;
    padding-inline: 9px;
    font-size: 0.66rem;
  }

  .landing-opportunity-header h2 b {
    font-size: 1.16rem;
  }

  .landing-finance-books {
    grid-template-columns: 1fr;
  }

  .landing-statement-grid {
    grid-template-columns: 1fr;
  }

  .landing-event-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }

  .landing-event-icon svg {
    width: 26px;
    height: 26px;
  }

  .landing-event-icon img {
    width: 34px;
    height: 34px;
  }

  .landing-event-icon .board-tile-icon-mask {
    width: 34px;
    height: 34px;
  }

  .landing-event-copy button,
  .landing-event-wait {
    justify-self: stretch;
  }

  .landing-dream-showcase {
    min-height: clamp(240px, 42vh, 380px);
  }

  .landing-dream-showcase figcaption {
    left: 13px;
    right: 13px;
    bottom: 12px;
    max-width: none;
  }

  .landing-dream-showcase figcaption strong {
    font-size: clamp(1.18rem, 6vw, 1.66rem);
  }

  .landing-dream-showcase figcaption p {
    display: none;
  }

  .landing-effects-head {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .landing-decision-head {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .landing-decision-head small {
    max-width: none;
    text-align: left;
  }

  .landing-choice-preview {
    grid-template-columns: 1fr;
  }

  .landing-payment-grid {
    grid-template-columns: 1fr;
  }

  .landing-purchase-change-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-effects-head small {
    text-align: left;
  }

  .landing-effects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-event-card .market-impact-detail {
    grid-template-columns: 1fr;
  }

  .landing-event-card.opportunity-card strong {
    white-space: normal;
  }

  .decision-panel {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: calc(100vh - 22px);
    overflow: auto;
  }

  .impact-grid,
  .decision-actions {
    grid-template-columns: 1fr;
  }

  .landing-deal-impact-grid,
  .landing-choice-actions,
  .landing-deal-actions,
  .landing-payment-actions {
    grid-template-columns: 1fr;
  }

  .landing-buyout-row {
    grid-template-columns: 1fr;
  }

  .landing-buyout-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-reveal {
    right: 10px;
    bottom: 10px;
  }

  .event-toast {
    right: 10px;
    bottom: 10px;
  }

  body:has(.card-reveal[data-open="true"]) .event-toast {
    bottom: 218px;
  }

  .cards-archive,
  .players-grid,
  .waiting-seat-grid {
    grid-template-columns: 1fr;
  }

  .waiting-setup-grid {
    grid-template-columns: 1fr;
  }

  .bot-control-row {
    grid-template-columns: 1fr;
  }

  .join-room-controls {
    grid-template-columns: 1fr;
  }

  .board-perspective {
    min-width: 820px;
  }

  .board-art-card figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dynamic Board Styles */
.dynamic-board-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    /* Ambient color orbs */
    radial-gradient(ellipse 60% 40% at 50% 45%, rgba(243, 191, 85, 0.07), transparent 70%),
    radial-gradient(ellipse 40% 35% at 20% 25%, rgba(76, 201, 232, 0.06), transparent 70%),
    radial-gradient(ellipse 40% 35% at 80% 75%, rgba(141, 124, 255, 0.06), transparent 70%),
    radial-gradient(ellipse 35% 30% at 75% 20%, rgba(82, 211, 125, 0.04), transparent 70%),
    radial-gradient(ellipse 35% 30% at 25% 80%, rgba(236, 72, 153, 0.04), transparent 70%),
    /* Base surface */
    linear-gradient(160deg, #0f1218 0%, #0b0e14 40%, #0d1019 100%);
  overflow: visible;
  transform-style: preserve-3d;
  z-index: 5;
}

/* Subtle grid pattern overlay */
.dynamic-board-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 224, 150, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 224, 150, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Center logo glow */
.dynamic-board-container::after {
  content: "FREEDOM LIFE";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(243, 191, 85, 0.06);
  font-family: "Avenir Next", "Sukhumvit Set", system-ui, sans-serif;
  font-size: 4rem;
  font-weight: 950;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  text-shadow: 0 0 80px rgba(243, 191, 85, 0.08);
}

.dynamic-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dynamic-tile {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.dynamic-tile:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 15;
}

.tile-inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid var(--color);
  background: rgba(15, 15, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.fast-tile .tile-inner {
  border-radius: 16px;
  border-width: 3.5px;
}

/* Old circular corner styles removed to prevent conflicts. New robust styles are placed at the end of the file. */

.tile-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.fast-tile .tile-title {
  font-size: 12px;
}

.dynamic-tokens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  transform-style: preserve-3d;
}

.board-token {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: auto;
  cursor: pointer;
}

.board-token:hover .token-base {
  transform: scale(1.2);
}

.token-base {
  min-width: 48px;
  max-width: 84px;
  width: max-content;
  height: 22px;
  border-radius: 999px; /* Capsule pill shape */
  border: 1.8px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.64),
    inset 0 1.5px 5px rgba(255,255,255,0.45),
    0 0 20px var(--token-color, #fff);
  background: rgba(10, 12, 16, 0.75);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 2;
}

.token-initial {
  color: #fff;
  font-weight: 950;
  font-size: 9px; /* compact size for names */
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.token-glow {
  position: absolute;
  inset: -5px; /* dynamically matches capsule size */
  border-radius: 999px;
  border: 2px solid;
  opacity: 0.3;
  animation: pulse-glow 2s infinite ease-in-out;
}

.active-token .token-glow {
  opacity: 0.8;
  border-width: 3px;
  animation-duration: 1s;
}

.token-label {
  display: none !important; /* hidden in favor of clean internal name styling */
}

@keyframes pulse-glow {
  0% { transform: scale(0.9); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(0.9); opacity: 0.2; }
}

/* ==========================================================================
   🎲 PREMIUM RECTANGULAR NEON BOARD SYSTEM (MOCKUP-ALIGNED)
   ========================================================================== */

/* Glowing Space Nebula Background */
.dynamic-board-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    /* Space Gas Nebulae */
    radial-gradient(circle at 12% 16%, rgba(141, 124, 255, 0.18), transparent 48%),
    radial-gradient(circle at 88% 84%, rgba(76, 201, 232, 0.18), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(243, 191, 85, 0.08), transparent 62%),
    radial-gradient(circle at 78% 18%, rgba(236, 72, 153, 0.14), transparent 42%),
    radial-gradient(circle at 22% 82%, rgba(82, 211, 125, 0.08), transparent 42%),
    /* Base Surface */
    radial-gradient(ellipse at center, rgba(10, 13, 20, 0.88) 0%, rgba(5, 7, 10, 0.94) 100%) !important;
  overflow: visible;
  transform-style: preserve-3d;
  z-index: 5;
}

/* Remove default dynamic-board logo text overlay */
.dynamic-board-container::after {
  display: none !important;
}

/* Base Neon Glowing Frames */
.board-neon-frame {
  position: absolute;
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 25px var(--neon-glow), inset 0 0 20px var(--neon-glow-inset);
  border: 2px solid var(--neon-border);
}

/* 1. Outer Frame: Neon Cyan/Blue around Freedom Path */
.board-neon-frame.outer-glow {
  left: 2.5%;
  top: 19.0%;
  width: 95.0%;
  height: 66.0%;
  border-radius: 28px;
  --neon-border: rgba(76, 201, 232, 0.38);
  --neon-glow: rgba(76, 201, 232, 0.18);
  --neon-glow-inset: rgba(76, 201, 232, 0.08);
}

/* 2. Middle Frame: Neon Green inside Freedom Path / outside Slave to Money */
.board-neon-frame.mid-glow {
  left: 19.5%;
  top: 30.5%;
  width: 61.0%;
  height: 39.0%;
  border-radius: 24px;
  --neon-border: rgba(82, 211, 125, 0.36);
  --neon-glow: rgba(82, 211, 125, 0.16);
  --neon-glow-inset: rgba(82, 211, 125, 0.08);
}

/* 3. Inner-Outer Frame: Neon Gold outside Slave to Money */
.board-neon-frame.inner-glow-outer {
  left: 28.5%;
  top: 39.5%;
  width: 43.0%;
  height: 21.0%;
  border-radius: 22px;
  --neon-border: rgba(243, 191, 85, 0.32);
  --neon-glow: rgba(243, 191, 85, 0.14);
  --neon-glow-inset: rgba(243, 191, 85, 0.06);
}

/* 4. Inner-Inner Frame: Center Brand Area container */
.board-neon-frame.inner-glow-inner {
  left: 37.0%;
  top: 43.5%;
  width: 26.0%;
  height: 13.0%;
  border-radius: 20px;
  --neon-border: rgba(243, 191, 85, 0.58);
  --neon-glow: rgba(243, 191, 85, 0.22);
  --neon-glow-inset: rgba(243, 191, 85, 0.12);
  background: rgba(8, 10, 15, 0.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Allow hovering logo */
  box-shadow: 
    0 0 35px rgba(243, 191, 85, 0.26),
    inset 0 0 25px rgba(243, 191, 85, 0.14);
  transition: all 0.4s ease;
}

.board-neon-frame.inner-glow-inner:hover {
  background: rgba(10, 13, 20, 0.85);
  --neon-border: rgba(243, 191, 85, 0.85);
  box-shadow: 
    0 0 45px rgba(243, 191, 85, 0.38),
    inset 0 0 30px rgba(243, 191, 85, 0.2);
}

.center-brand-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 12px 14px;
  text-align: center;
  box-sizing: border-box;
}

.brand-subtitle {
  margin: 0;
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", sans-serif;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

.brand-subtitle-top {
  color: var(--gold-bright, #f3bf55);
  text-shadow: 0 0 8px rgba(243, 191, 85, 0.4);
}

.brand-subtitle-bottom {
  color: var(--cyan, #4cc9e8);
  text-shadow: 0 0 8px rgba(76, 201, 232, 0.4);
  opacity: 0.54;
}

.brand-logo-glow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.brand-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3bf55 0%, #d49826 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.15rem;
  font-weight: 950;
  font-family: "Avenir Next", "Outfit", sans-serif;
  box-shadow: 
    0 0 15px rgba(243, 191, 85, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  animation: logo-float 4s ease-in-out infinite;
}

.brand-title {
  margin: 0;
  color: #ffffff;
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", sans-serif;
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

@keyframes logo-float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Corner Tiles Overrides */
.route-board .tile.tile-corner {
  border-radius: 20px !important;
}

/* ==========================================================================
   🧱 TIERED PHYSICAL 3D BOARD TILE EXTRUSION SYSTEM
   ========================================================================== */

/* Flat 2D View resets - Hide side walls completely */
.play-board.view-flat .dynamic-board-container,
.play-board.view-flat .route-board {
  transform-style: flat;
}

.play-board.view-flat .route-board .tile {
  will-change: auto;
  backface-visibility: visible;
}

.play-board.view-flat .tile::before,
.play-board.view-flat .tile::after {
  display: none !important;
}

/* --- 1. Inner Track: Slave to Money (.rat-board) --- */
.route-board.rat-board .tile {
  width: calc(var(--tile-w) - 3.5px) !important;
  height: calc(var(--tile-h) - 3.5px) !important;
  border-radius: 11px !important;
  border: 2px solid var(--tile-border, rgba(255, 255, 255, 0.2)) !important;
  background: var(--tile-bg, rgba(20, 24, 36, 0.95)) !important;
  
  /* Floating altitude */
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Soft shadow cast onto the board surface below */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 12px rgba(255, 255, 255, 0.05),
    0 12px 18px rgba(0, 0, 0, 0.65),
    0 16px 32px rgba(0, 0, 0, 0.8);
}

/* Inner Track Tile Icon Size Tuning */
.route-board.rat-board .tile-icon {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 2px !important;
  box-shadow:
    0 1.5px 6px rgba(0, 0, 0, 0.4),
    0 0 4px var(--tile-glow-line, transparent) !important;
}

.route-board.rat-board .tile-icon svg {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2.5 !important;
}

.route-board.rat-board .tile-icon img {
  width: 15px !important;
  height: 15px !important;
}

.route-board.rat-board .tile-icon .board-tile-icon-mask {
  width: 15px !important;
  height: 15px !important;
}

/* Inner Track Column Tile Horizontal Alignment (Icon Left, Text Right) */
.route-board.rat-board .tile.tile-left-col,
.route-board.rat-board .tile.tile-right-col {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  gap: 4px !important;
}

.route-board.rat-board .tile.tile-left-col .tile-icon,
.route-board.rat-board .tile.tile-right-col .tile-icon {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.route-board.rat-board .tile.tile-left-col .tile-badge,
.route-board.rat-board .tile.tile-right-col .tile-badge {
  text-align: left !important;
  width: auto !important;
  flex-grow: 1 !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Inner Track Bottom Side Wall (Z-Extrusion 14px) */
.route-board.rat-board .tile::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  height: 14px !important;
  transform-origin: bottom center !important;
  transform: rotateX(-90deg) !important;
  background: linear-gradient(to bottom, 
    color-mix(in srgb, var(--tile-border) 70%, rgba(15, 20, 30, 0.95)),
    color-mix(in srgb, var(--tile-border) 35%, rgba(5, 7, 10, 0.98))
  ) !important;
  border-left: 2px solid var(--tile-border) !important; /* Glowing vertical neon line */
  border-right: 2px solid var(--tile-border) !important; /* Glowing vertical neon line */
  border-bottom: 2.5px solid var(--tile-border) !important; /* Glowing bottom neon line */
  border-radius: 0 0 5px 5px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important; /* Cast dark ambient shadow under the wall */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Inner Track Right Side Wall (Z-Extrusion 14px) */
.route-board.rat-board .tile::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -2px !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 14px !important;
  transform-origin: right center !important;
  transform: rotateY(90deg) !important;
  background: linear-gradient(to right, 
    color-mix(in srgb, var(--tile-border) 55%, rgba(10, 14, 22, 0.98)),
    color-mix(in srgb, var(--tile-border) 20%, rgba(3, 4, 6, 0.99))
  ) !important;
  border-top: 2px solid var(--tile-border) !important; /* Glowing horizontal/depth neon line */
  border-bottom: 2px solid var(--tile-border) !important; /* Glowing horizontal/depth neon line */
  border-right: 2.5px solid var(--tile-border) !important; /* Glowing right neon line */
  border-radius: 0 5px 5px 0 !important;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5) !important; /* Cast dark ambient shadow under the wall */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Inner Track Hover (3D Elevate + Shadow Stretch + Physical Extrusion Growth) */
.route-board.rat-board .tile:hover,
.route-board.rat-board .tile.is-hovered {
  z-index: 25 !important;
  border-color: var(--tile-border, rgba(255, 255, 255, 0.45)) !important;
  transform: translate3d(-50%, -50%, 24px) scale(1.08) !important;
  
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 16px rgba(255, 255, 255, 0.1),
    0 18px 28px rgba(0, 0, 0, 0.75),
    0 24px 48px color-mix(in srgb, var(--tile-border) 55%, rgba(0, 0, 0, 0.65)) !important;
}

/* Brightest Neon Glow for occupied Slave to Money tiles */
.route-board.rat-board .tile.has-player {
  z-index: 10 !important;
  border-color: var(--tile-border-bright) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 12px rgba(255, 255, 255, 0.05),
    0 12px 18px rgba(0, 0, 0, 0.65),
    0 0 20px var(--tile-glow) !important;
}

/* Target landing tile pulsing highlight */
@keyframes target-pulse {
  0%, 100% {
    transform: translate3d(-50%, -50%, 28px) scale(1.02);
    border-color: var(--tile-border-bright) !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 0 16px rgba(255, 255, 255, 0.1),
      0 12px 18px rgba(0, 0, 0, 0.65),
      0 0 16px var(--tile-glow) !important;
  }
  50% {
    transform: translate3d(-50%, -50%, 36px) scale(1.12);
    border-color: #fff !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 0 24px rgba(255, 255, 255, 0.2),
      0 20px 32px rgba(0, 0, 0, 0.85),
      0 0 38px var(--tile-glow),
      0 0 15px #fff !important;
  }
}

.route-board .tile.target-landing {
  z-index: 22 !important;
  animation: target-pulse 600ms ease-in-out infinite !important;
}


/* Extrusion stretches to 24px depth on hover */
.route-board.rat-board .tile:hover::before,
.route-board.rat-board .tile.is-hovered::before {
  height: 24px !important;
}

.route-board.rat-board .tile:hover::after,
.route-board.rat-board .tile.is-hovered::after {
  width: 24px !important;
}

/* --- 2. Outer Track: Financial Freedom Lane (.fast-board) --- */
.route-board.fast-board .tile {
  width: calc(var(--tile-w) - 1.5px) !important;
  height: calc(var(--tile-h) - 1.5px) !important;
  border-radius: 14px !important;
  border: 3px solid var(--tile-border, rgba(255, 255, 255, 0.3)) !important;
  background: var(--tile-bg, rgba(24, 28, 42, 0.96)) !important;
  
  /* Floats higher than inner track */
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Soft shadow cast onto the board surface below */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 15px rgba(255, 255, 255, 0.08),
    0 18px 26px rgba(0, 0, 0, 0.7),
    0 24px 44px rgba(0, 0, 0, 0.85);
}

/* Outer Track Bottom Side Wall (Z-Extrusion 26px) */
.route-board.fast-board .tile::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -3px !important;
  right: -3px !important;
  bottom: -3px !important;
  height: 26px !important;
  transform-origin: bottom center !important;
  transform: rotateX(-90deg) !important;
  background: linear-gradient(to bottom, 
    color-mix(in srgb, var(--tile-border) 75%, rgba(20, 24, 38, 0.95)),
    color-mix(in srgb, var(--tile-border) 40%, rgba(8, 10, 15, 0.98))
  ) !important;
  border-left: 3px solid var(--tile-border) !important; /* Glowing vertical neon line */
  border-right: 3px solid var(--tile-border) !important; /* Glowing vertical neon line */
  border-bottom: 3.5px solid var(--tile-border) !important; /* Glowing bottom neon line */
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5) !important; /* Cast dark ambient shadow under the wall */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Outer Track Right Side Wall (Z-Extrusion 26px) */
.route-board.fast-board .tile::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -3px !important;
  bottom: -3px !important;
  right: -3px !important;
  width: 26px !important;
  transform-origin: right center !important;
  transform: rotateY(90deg) !important;
  background: linear-gradient(to right, 
    color-mix(in srgb, var(--tile-border) 60%, rgba(15, 18, 28, 0.98)),
    color-mix(in srgb, var(--tile-border) 25%, rgba(4, 5, 8, 0.99))
  ) !important;
  border-top: 3px solid var(--tile-border) !important; /* Glowing horizontal/depth neon line */
  border-bottom: 3px solid var(--tile-border) !important; /* Glowing horizontal/depth neon line */
  border-right: 3.5px solid var(--tile-border) !important; /* Glowing right neon line */
  border-radius: 0 6px 6px 0 !important;
  box-shadow: 5px 0 12px rgba(0, 0, 0, 0.5) !important; /* Cast dark ambient shadow under the wall */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Outer Track Hover (Extreme 3D Elevate + Shadow Stretch + Physical Extrusion Growth) */
.route-board.fast-board .tile:hover,
.route-board.fast-board .tile.is-hovered {
  z-index: 25 !important;
  border-color: var(--tile-border, rgba(255, 255, 255, 0.6)) !important;
  transform: translate3d(-50%, -50%, 42px) scale(1.1) !important;
  
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 20px rgba(255, 255, 255, 0.14),
    0 26px 36px rgba(0, 0, 0, 0.8),
    0 32px 58px color-mix(in srgb, var(--tile-border) 75%, rgba(0, 0, 0, 0.65)) !important;
}

/* Brightest Neon Glow for occupied Freedom Path tiles */
.route-board.fast-board .tile.has-player {
  z-index: 10 !important;
  border-color: var(--tile-border-bright) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 15px rgba(255, 255, 255, 0.08),
    0 18px 26px rgba(0, 0, 0, 0.7),
    0 0 24px var(--tile-glow) !important;
}


/* Extrusion stretches to 42px depth on hover */
.route-board.fast-board .tile:hover::before,
.route-board.fast-board .tile.is-hovered::before {
  height: 42px !important;
}

.route-board.fast-board .tile:hover::after,
.route-board.fast-board .tile.is-hovered::after {
  width: 42px !important;
}

/* ==========================================================================
   📐 DIRECTIONAL PHYSICAL TILE EXTRUSION STRETCHING (OUTER TRACK REFINEMENT)
   ========================================================================== */

/* 1. Top Row (.tile-top-row) - Stretch vertically upwards by 18px (offset up by 9px) */
.route-board.fast-board .tile.tile-top-row {
  height: calc(var(--tile-h) + 16.5px) !important;
  transform: translate3d(-50%, calc(-50% - 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-top-row:hover,
.route-board.fast-board .tile.tile-top-row.is-hovered {
  transform: translate3d(-50%, calc(-50% - 9px), 42px) scale(1.1) !important;
}

/* 2. Bottom Row (.tile-bottom-row) - Stretch vertically downwards by 18px (offset down by 9px) */
.route-board.fast-board .tile.tile-bottom-row {
  height: calc(var(--tile-h) + 16.5px) !important;
  transform: translate3d(-50%, calc(-50% + 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-bottom-row:hover,
.route-board.fast-board .tile.tile-bottom-row.is-hovered {
  transform: translate3d(-50%, calc(-50% + 9px), 42px) scale(1.1) !important;
}

/* 3. Left Column (.tile-left-col) - Stretch horizontally leftwards by 18px (offset left by 9px) */
.route-board.fast-board .tile.tile-left-col {
  width: calc(var(--tile-w) + 16.5px) !important;
  transform: translate3d(calc(-50% - 9px), -50%, 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-left-col:hover,
.route-board.fast-board .tile.tile-left-col.is-hovered {
  transform: translate3d(calc(-50% - 9px), -50%, 42px) scale(1.1) !important;
}

/* 4. Right Column (.tile-right-col) - Stretch horizontally rightwards by 18px (offset right by 9px) */
.route-board.fast-board .tile.tile-right-col {
  width: calc(var(--tile-w) + 16.5px) !important;
  transform: translate3d(calc(-50% + 9px), -50%, 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-right-col:hover,
.route-board.fast-board .tile.tile-right-col.is-hovered {
  transform: translate3d(calc(-50% + 9px), -50%, 42px) scale(1.1) !important;
}

/* 5. Flat 2D View Stretched - Align with matching width/height stretching but at Z = 0 */
.play-board.view-flat .tile.tile-top-row {
  height: calc(var(--tile-h) + 16.5px) !important;
  transform: translate(-50%, calc(-50% - 9px)) scale(1) !important;
}

.play-board.view-flat .tile.tile-bottom-row {
  height: calc(var(--tile-h) + 16.5px) !important;
  transform: translate(-50%, calc(-50% + 9px)) scale(1) !important;
}

.play-board.view-flat .tile.tile-left-col {
  width: calc(var(--tile-w) + 16.5px) !important;
  transform: translate(calc(-50% - 9px), -50%) scale(1) !important;
}

.play-board.view-flat .tile.tile-right-col {
  width: calc(var(--tile-w) + 16.5px) !important;
  transform: translate(calc(-50% + 9px), -50%) scale(1) !important;
}

/* ==========================================================================
   🏙️ 3D ISOMETRIC HOLOGRAM CITY SKYLINE STYLING
   ========================================================================== */

.center-hologram-city {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Place behind text and brand logo */
  opacity: 0.62;
  pointer-events: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-city-skyline {
  width: 100%;
  height: 100%;
  max-width: 180px;
  max-height: 120px;
  overflow: visible;
  animation: hologram-flicker 6s infinite ease-in-out;
}

.holo-ring {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 4, 4;
  opacity: 0.38;
}

.holo-ring-outer {
  stroke: var(--cyan, #4cc9e8);
  animation: holo-rotate-cw 15s infinite linear;
  transform-origin: 100px 95px;
}

.holo-ring-inner {
  stroke: var(--gold, #f3bf55);
  animation: holo-rotate-ccw 10s infinite linear;
  transform-origin: 100px 95px;
}

.holo-building {
  opacity: 0.85;
}

.holo-face {
  fill: rgba(10, 20, 36, 0.45);
  stroke-width: 1.2;
  transition: all 0.3s ease;
}

.building-center .holo-face {
  stroke: var(--gold, #f3bf55);
  filter: drop-shadow(0 0 4px rgba(243, 191, 85, 0.4));
}

.building-left .holo-face,
.building-right .holo-face {
  stroke: var(--cyan, #4cc9e8);
  filter: drop-shadow(0 0 4px rgba(76, 201, 232, 0.35));
}

.holo-face.face-top {
  fill: rgba(255, 255, 255, 0.08);
}

.holo-face.face-left {
  fill: rgba(10, 20, 36, 0.58);
}

.holo-face.face-right {
  fill: rgba(10, 20, 36, 0.38);
}

.holo-spire {
  stroke: var(--gold-bright, #f3bf55);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--gold-bright));
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: holo-spire-beam 2.5s infinite ease-in-out;
}

@keyframes hologram-flicker {
  0%, 100% { opacity: 0.78; filter: hue-rotate(0deg) brightness(1); }
  50% { opacity: 0.68; filter: hue-rotate(6deg) brightness(1.08); }
}

@keyframes holo-rotate-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes holo-rotate-ccw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes holo-spire-beam {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; stroke-width: 2.2; }
}

/* ==========================================================================
   🎴 3D GLOWING CARD DECKS IN CENTER PANEL
   ========================================================================== */

.brand-decks-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 52px;
  margin: 4px 0 2px;
  box-sizing: border-box;
  overflow: visible;
  z-index: 10;
}

.holo-card-deck {
  position: relative;
  width: 68px;
  height: 46px;
  overflow: visible;
  pointer-events: auto; /* Enable hover triggers! */
  cursor: pointer;
  transition: transform 0.3s ease;
}

.opportunity-deck {
  transform: rotateY(-8deg) rotateX(4deg) translate3d(0, 0, 0);
}

.surprise-deck {
  transform: rotateY(8deg) rotateX(4deg) translate3d(0, 0, 0);
}

.deals-deck {
  transform: rotateY(0deg) rotateX(6deg) translate3d(0, 0, 0);
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 20, 30, 0.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.deck-card-3 {
  transform: translate3d(-3px, -3px, -6px);
  opacity: 0.42;
}

.deck-card-2 {
  transform: translate3d(-1.5px, -1.5px, -3px);
  opacity: 0.72;
}

.deck-card-1 {
  transform: translate3d(0, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Color Themes for Decks */
.opportunity-deck .deck-card {
  border-color: rgba(76, 201, 232, 0.42);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(76, 201, 232, 0.15);
}
.opportunity-deck .deck-card-1 {
  background: linear-gradient(135deg, rgba(76, 201, 232, 0.16) 0%, rgba(10, 20, 30, 0.85) 100%);
  border-color: rgba(76, 201, 232, 0.65);
}

.surprise-deck .deck-card {
  border-color: rgba(238, 98, 98, 0.42);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(238, 98, 98, 0.15);
}
.surprise-deck .deck-card-1 {
  background: linear-gradient(135deg, rgba(238, 98, 98, 0.16) 0%, rgba(10, 20, 30, 0.85) 100%);
  border-color: rgba(238, 98, 98, 0.65);
}

.deals-deck .deck-card {
  border-color: rgba(243, 191, 85, 0.42);
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(243, 191, 85, 0.15);
}
.deals-deck .deck-card-1 {
  background: linear-gradient(135deg, rgba(243, 191, 85, 0.16) 0%, rgba(10, 20, 30, 0.85) 100%);
  border-color: rgba(243, 191, 85, 0.65);
}

.deck-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.opportunity-deck .deck-icon { color: var(--cyan, #4cc9e8); }
.surprise-deck .deck-icon { color: var(--red, #ee6262); }
.deals-deck .deck-icon { color: var(--gold, #f3bf55); }

.deck-name {
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.88;
  letter-spacing: 0.05em;
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", sans-serif;
}

/* Premium interactive card deck hover projections */
.holo-card-deck:hover {
  transform: scale(1.04);
}

.holo-card-deck:hover .deck-card-1 {
  transform: translate3d(0, -6px, 12px) scale(1.05);
  box-shadow: 
    0 12px 24px rgba(0, 0, 0, 0.6),
    0 0 20px var(--tile-glow, var(--gold));
  border-color: #fff !important;
}

.holo-card-deck:hover .deck-card-2 {
  transform: translate3d(-1px, -3px, 4px);
  opacity: 0.85;
}

.holo-card-deck:hover .deck-card-3 {
  transform: translate3d(-2px, -1.5px, 0px);
  opacity: 0.55;
}

.holo-card-deck.opportunity-deck { --tile-glow: rgba(76, 201, 232, 0.65); }
.holo-card-deck.surprise-deck { --tile-glow: rgba(238, 98, 98, 0.65); }
.holo-card-deck.deals-deck { --tile-glow: rgba(243, 191, 85, 0.65); }

/* ==========================================================================
   🎮 INTERACTIVE PERSPECTIVE CONTROL HUD
   ========================================================================== */

.perspective-control-hud {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 100;
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 224, 150, 0.15);
  background: rgba(15, 20, 30, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #bdb39d);
  font-family: "Sukhumvit Set", "IBM Plex Sans Thai", "Noto Sans Thai", "Avenir Next", sans-serif;
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.view-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.view-btn.active {
  color: #11100f;
  background: var(--gold, #f3bf55);
  border-color: var(--gold, #f3bf55);
  box-shadow: 
    0 4px 12px rgba(243, 191, 85, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* --- Board 3D Camera Angles Presets --- */



/* --- Upright 2D Tokens Presets --- */

.board-token {
  transform: translate(-50%, -86%) !important;
  will-change: transform;
}

/* Disable transitions during drag for zero-latency camera orbiting */
.play-board.is-dragging,
.play-board.is-dragging .board-token {
  transition: none !important;
}

/* ==========================================================================
   🗼 SEAMLESS 3D PREMIUM GOLD CORNER TILES (UX/UI REDESIGN)
   ========================================================================== */

/* 1. Custom rounded outer corners that blend/fit adjacent connecting tiles by stretching horizontally and vertically */
.route-board.fast-board .tile.tile-corner-top-left {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 36px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate3d(calc(-50% - 9px), calc(-50% - 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-corner-top-left:hover,
.route-board.fast-board .tile.tile-corner-top-left.is-hovered {
  transform: translate3d(calc(-50% - 9px), calc(-50% - 9px), 42px) scale(1.08) !important;
}

.route-board.fast-board .tile.tile-corner-top-right {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 36px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate3d(calc(-50% + 9px), calc(-50% - 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-corner-top-right:hover,
.route-board.fast-board .tile.tile-corner-top-right.is-hovered {
  transform: translate3d(calc(-50% + 9px), calc(-50% - 9px), 42px) scale(1.08) !important;
}

.route-board.fast-board .tile.tile-corner-bottom-right {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 36px !important;
  transform: translate3d(calc(-50% + 9px), calc(-50% + 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-corner-bottom-right:hover,
.route-board.fast-board .tile.tile-corner-bottom-right.is-hovered {
  transform: translate3d(calc(-50% + 9px), calc(-50% + 9px), 42px) scale(1.08) !important;
}

.route-board.fast-board .tile.tile-corner-bottom-left {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 36px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate3d(calc(-50% - 9px), calc(-50% + 9px), 26px) scale(1) !important;
}
.route-board.fast-board .tile.tile-corner-bottom-left:hover,
.route-board.fast-board .tile.tile-corner-bottom-left.is-hovered {
  transform: translate3d(calc(-50% - 9px), calc(-50% + 9px), 42px) scale(1.08) !important;
}

/* Outer Track Icons border glow at 30% */
.route-board.fast-board .tile-icon {
  border-color: var(--tile-border, rgba(255, 255, 255, 0.3)) !important;
  color: var(--tile-border, #fff) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 8px color-mix(in srgb, var(--tile-border, #fff) 30%, transparent) !important;
}

/* 2. Symmetrical Visual Theme & Type Highlights for Corner Tiles */
.route-board.fast-board .tile.tile-fast-corner {
  z-index: 15 !important;
  border-width: 3px !important;
  border-style: solid !important;
  background: var(--tile-bg, rgba(24, 28, 42, 0.98)) !important;
  
  /* High-end dark shadow instead of emerald glow for outer track consistency */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 20px 30px rgba(0, 0, 0, 0.75),
    0 24px 48px rgba(0, 0, 0, 0.85) !important;
  
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hover Elevation (Pops up with rich shimmery reflex and dark shadow) */
.route-board.fast-board .tile.tile-fast-corner:hover {
  z-index: 30 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 0 25px rgba(255, 255, 255, 0.14),
    0 28px 40px rgba(0, 0, 0, 0.85),
    0 36px 64px rgba(0, 0, 0, 0.9) !important;
}

/* Specialized inner elements styling for prestige corner tiles */
.route-board.fast-board .tile.tile-fast-corner .tile-number {
  font-size: 11px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.route-board.fast-board .tile.tile-fast-corner .tile-icon {
  transform: scale(1.15) translateZ(8px) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.route-board.fast-board .tile.tile-fast-corner:hover .tile-icon {
  transform: scale(1.25) translateZ(12px) !important;
}

.route-board.fast-board .tile.tile-fast-corner .tile-badge {
  color: #d6ffd9 !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-shadow:
    0 0 4px rgba(53, 200, 109, 0.8),
    0 0 10px rgba(92, 230, 138, 0.6) !important;
}

/* 3. Flat 2D View resets for corners with correct stretched proportions and Z = 0 */
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-left {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 36px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate(calc(-50% - 9px), calc(-50% - 9px)) scale(1) !important;
}
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-left:hover {
  transform: translate(calc(-50% - 9px), calc(-50% - 9px)) scale(1.05) !important;
}

.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-right {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 36px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate(calc(-50% + 9px), calc(-50% - 9px)) scale(1) !important;
}
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-right:hover {
  transform: translate(calc(-50% + 9px), calc(-50% - 9px)) scale(1.05) !important;
}

.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-right {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 36px !important;
  transform: translate(calc(-50% + 9px), calc(-50% + 9px)) scale(1) !important;
}
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-right:hover {
  transform: translate(calc(-50% + 9px), calc(-50% + 9px)) scale(1.05) !important;
}

.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-left {
  width: calc(var(--tile-w) + 16.5px) !important;
  height: calc(var(--tile-h) + 16.5px) !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 36px !important;
  border-bottom-right-radius: 4px !important;
  transform: translate(calc(-50% - 9px), calc(-50% + 9px)) scale(1) !important;
}
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-left:hover {
  transform: translate(calc(-50% - 9px), calc(-50% + 9px)) scale(1.05) !important;
}

.play-board.view-flat .route-board.fast-board .tile.tile-fast-corner {
  border: 3px solid var(--tile-border, rgba(255, 255, 255, 0.3)) !important;
  background: var(--tile-bg, rgba(24, 28, 42, 0.88)) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 15px rgba(255, 255, 255, 0.08),
    0 6px 12px rgba(0, 0, 0, 0.45) !important;
}

.play-board.view-flat .route-board.fast-board .tile.tile-fast-corner:hover {
  border-color: var(--tile-border-bright, #fff) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.14),
    0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Interactive HUD Rows & Compact Buttons Styles */
.hud-assets-list, .hud-liabilities-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.hud-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  transition: background 180ms ease, border-color 180ms ease;
}

.hud-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.hud-item-info {
  display: grid;
  gap: 1px;
}

.hud-item-info span {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f5f5f5;
}

.hud-item-info small {
  font-size: 0.64rem;
  color: var(--muted);
}

.hud-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-item-actions b {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

/* Compact HUD Actions Styling */
.btn-hud-sell, .btn-hud-repay, .btn-hud-repay-part, .btn-hud-borrow {
  min-height: auto !important;
  font-weight: 800 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none !important;
  transition: transform 120ms ease, opacity 120ms ease;
}

.btn-hud-sell {
  height: 20px;
  padding: 0 6px !important;
  font-size: 0.65rem !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ff7e7e, #e63946) !important;
  color: #fff !important;
}

.btn-hud-sell:hover {
  transform: scale(1.05);
  background: #ff5252 !important;
}

.btn-hud-repay {
  height: 20px;
  padding: 0 6px !important;
  font-size: 0.65rem !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #8effb1, #2b9348) !important;
  color: #15130f !important;
}

.btn-hud-repay:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.btn-hud-repay:hover:not(:disabled) {
  transform: scale(1.05);
  background: #52b788 !important;
}

.btn-hud-repay-part {
  height: 20px;
  padding: 0 5px !important;
  font-size: 0.6rem !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ddd !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-hud-repay-part:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.btn-hud-borrow {
  height: 22px;
  padding: 0 8px !important;
  font-size: 0.68rem !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #ffe596, var(--gold)) !important;
  color: #15130f !important;
  box-shadow: 0 2px 6px rgba(243, 191, 85, 0.2) !important;
}

.btn-hud-borrow:hover {
  transform: scale(1.05);
  background: var(--gold-bright) !important;
}

/* Pawn Hop Physics Animation */
@keyframes tokenHop {
  0% {
    transform: translate3d(-50%, -84%, 0) scale(var(--token-scale, 1));
  }
  50% {
    transform: translate3d(-50%, calc(-84% - 28px), 0) scale(var(--token-scale, 1));
  }
  100% {
    transform: translate3d(-50%, -84%, 0) scale(var(--token-scale, 1));
  }
}

.board-token.token-hop {
  animation: tokenHop 250ms ease-out !important;
}

/* ==========================================================================
   🌀 PREMIUM UI/UX IMMERSIVE GAME BOARD OVERLAYS
   ========================================================================== */

.board-cyber-grid-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.board-vector-graphics {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* Slowly spinning tech compass dials */
.hud-dial-cw {
  transform-origin: 512px 384px;
  animation: hud-rotate-cw 45s linear infinite;
}

.hud-dial-ccw {
  transform-origin: 512px 384px;
  animation: hud-rotate-ccw 60s linear infinite;
}

.hud-dial-slow {
  transform-origin: 512px 384px;
  animation: hud-rotate-cw 130s linear infinite;
}

@keyframes hud-rotate-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hud-rotate-ccw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Pulsing exponential asset growth curve particle dot */
.growth-pulse-dot {
  stroke-dasharray: 12, 170;
  animation: growth-pulse-move 4.5s linear infinite;
}

@keyframes growth-pulse-move {
  0% { stroke-dashoffset: 182; }
  100% { stroke-dashoffset: 0; }
}

/* Pulse glow asset nodes */
.pulsing-node {
  animation: node-glow-pulse 2.2s ease-in-out infinite;
}

@keyframes node-glow-pulse {
  0%, 100% { r: 5px; opacity: 0.65; fill: var(--cyan, #4cc9e8); filter: drop-shadow(0 0 4px var(--cyan)); }
  50% { r: 8.5px; opacity: 1; fill: #fff; filter: drop-shadow(0 0 12px var(--cyan)); }
}

/* Circuit wire escape flows */
.escape-wire {
  stroke-dasharray: 9, 14;
  animation: wire-flow 3.5s linear infinite;
}

@keyframes wire-flow {
  0% { stroke-dashoffset: 23; }
  100% { stroke-dashoffset: 0; }
}

/* ==========================================================================
   ♟️ 3D BOARD MINIATURE TOKEN SYSTEM
   ========================================================================== */
.miniature-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
}

.miniature-image {
  width: 53px;
  height: 53px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
  z-index: 5;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translate(0, -4px);
  will-change: transform;
}

/* Float bobbing animation for active player */
.active-token .miniature-image {
  animation: miniature-bob 1.8s ease-in-out infinite alternate;
}

@keyframes miniature-bob {
  0%, 100% {
    transform: translate(0, -4px);
  }
  50% {
    transform: translate(0, -12px);
  }
}

.miniature-glow {
  position: absolute;
  bottom: 0px;
  width: 32px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--token-color, #fff) 20%, transparent 70%);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.active-token .miniature-glow {
  opacity: 0.95;
  background: radial-gradient(ellipse at center, var(--token-color, #fff) 30%, transparent 75%);
  box-shadow: 0 0 15px var(--token-color, #fff);
  animation: miniature-glow-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes miniature-glow-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0.95; }
}

.miniature-nametag {
  background: rgba(10, 15, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 1.5px 5.5px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  border-left: 2px solid var(--token-color, #fff);
  transform: translate(0, -2px);
  letter-spacing: 0.1px;
}

.miniature-image.pulsing {
  filter: drop-shadow(0 6px 16px rgba(255, 230, 0, 0.85)) drop-shadow(0 0 8px rgba(255, 230, 0, 0.6));
  transform: translate(0, -2px) scale(1.15);
}

/* Gold mini-marker: shows on a Freedom Path dream tile once a non-owner buys that dream */
.dream-claim-token {
  position: absolute;
  transform: translate(-50%, -70%) scale(0.55);
  z-index: 20;
  transition: left 0.4s ease, top 0.4s ease;
}

.dream-claim-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dream-claim-glow {
  position: absolute;
  bottom: 0;
  width: 28px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffd700 25%, transparent 70%);
  opacity: 0.75;
}

.dream-claim-image {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter:
    sepia(1) saturate(7) hue-rotate(-10deg) brightness(1.05)
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 6px rgba(255, 215, 0, 0.65));
}

/* Override old .board-token styles to remove capsule backgrounds & borders */
.board-token {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  transform-origin: center bottom !important;
  z-index: calc(26 + var(--token-stack-slot, 0));
  transform: translate3d(-50%, -84%, 0) scale(var(--token-scale, 1));
  transition:
    left 620ms cubic-bezier(0.32, 0.72, 0, 1),
    top 620ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 180ms ease;
}

.board-token::after {
  display: none !important;
}

.board-token.active-token {
  box-shadow: none !important;
  animation: none !important;
}

.board-token.token-clustered {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42));
}

.board-token.token-clustered .miniature-nametag {
  opacity: 0;
  transform: translate3d(0, 3px, 0) scale(0.92);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.board-token.token-clustered:hover .miniature-nametag,
.board-token.token-clustered.active-token .miniature-nametag {
  opacity: 1;
  transform: translate3d(0, -2px, 0) scale(1);
}

.board-token.token-stack-4 .miniature-image,
.board-token.token-stack-5 .miniature-image,
.board-token.token-stack-6 .miniature-image {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.58));
}

.board-token.token-stack-5 .miniature-glow,
.board-token.token-stack-6 .miniature-glow {
  width: 26px;
  opacity: 0.48;
}

/* Static board mode: remove continuous decorative light motion. */
body::before,
.console-light,
.token-glow,
.brand-logo-icon,
.center-city-skyline,
.holo-ring-outer,
.holo-ring-inner,
.holo-spire,
.hud-dial-cw,
.hud-dial-ccw,
.hud-dial-slow,
.growth-pulse-dot,
.pulsing-node,
.escape-wire,
.active-token .miniature-image,
.active-token .miniature-glow {
  animation: none !important;
}

.growth-pulse-dot {
  stroke-dashoffset: 0;
}

.pulsing-node {
  opacity: 0.72;
  filter: drop-shadow(0 0 5px var(--cyan));
}

.active-token .miniature-image {
  transform: translate(0, -4px);
}

.active-token .miniature-glow {
  opacity: 0.72;
  transform: scale(1);
}

/* ==========================================================================
   Active turn readability layer
   ========================================================================== */
.turn-focus-chip {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 58;
  display: flex;
  max-width: min(420px, calc(100% - 28px));
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 224, 150, 0.28);
  border-radius: 999px;
  padding: 8px 13px 8px 8px;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.18), rgba(76, 201, 232, 0.08)),
    rgba(8, 9, 10, 0.8);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transform: translate3d(0, -8px, 0) scale(0.96);
  transition:
    opacity 220ms var(--enter),
    transform 240ms var(--enter),
    border-color 180ms ease,
    background 180ms ease;
}

.turn-focus-chip[data-open="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.turn-focus-chip.is-you {
  border-color: rgba(82, 211, 125, 0.52);
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.2), rgba(243, 191, 85, 0.12)),
    rgba(8, 9, 10, 0.84);
  box-shadow:
    0 0 0 4px rgba(82, 211, 125, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.38);
}

.turn-focus-chip img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42));
}

.turn-focus-chip div {
  min-width: 0;
}

.turn-focus-chip span,
.turn-focus-chip small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-focus-chip span {
  color: var(--gold);
  text-transform: uppercase;
}

.turn-focus-chip.is-you span {
  color: var(--green);
}

.turn-focus-chip strong {
  display: block;
  overflow: hidden;
  margin: 2px 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-banner {
  position: absolute;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.94);
  transition:
    opacity 260ms var(--enter),
    transform 280ms var(--enter);
}

.turn-banner[data-open="true"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.turn-banner-card {
  display: flex;
  width: min(470px, calc(100vw - 44px));
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 224, 150, 0.42);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 240, 193, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(243, 191, 85, 0.24), rgba(76, 201, 232, 0.1)),
    rgba(15, 14, 13, 0.94);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.58),
    0 0 54px rgba(243, 191, 85, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  animation: turn-banner-pop 520ms var(--enter) both;
}

.turn-banner-card.is-you {
  border-color: rgba(82, 211, 125, 0.55);
  background:
    radial-gradient(circle at 18% 20%, rgba(216, 255, 231, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(82, 211, 125, 0.24), rgba(243, 191, 85, 0.12)),
    rgba(15, 14, 13, 0.94);
}

.turn-banner-card img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.46));
}

.turn-banner-card span,
.turn-banner-card small {
  display: block;
  color: var(--gold);
  font-weight: 950;
}

.turn-banner-card.is-you span {
  color: var(--green);
}

.turn-banner-card strong {
  display: block;
  margin: 3px 0 4px;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  line-height: 0.98;
}

.turn-banner-card small {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Local turn callout: a full-screen, non-blocking focus layer that clears on
   the player's first pointer movement. */
.local-turn-notice {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  visibility: hidden;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  background: rgba(1, 8, 15, 0.48);
  -webkit-backdrop-filter: blur(9px) brightness(0.56) saturate(0.72);
  backdrop-filter: blur(9px) brightness(0.56) saturate(0.72);
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 220ms;
}

.local-turn-notice[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.local-turn-notice-card {
  position: relative;
  width: min(620px, calc(100vw - 40px));
  overflow: hidden;
  border: 2px solid rgba(92, 220, 255, 0.94);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 38px);
  text-align: center;
  color: #effcff;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 201, 232, 0.24), transparent 52%),
    linear-gradient(145deg, rgba(8, 24, 37, 0.98), rgba(3, 11, 20, 0.98));
  box-shadow:
    0 0 0 1px rgba(214, 249, 255, 0.3),
    0 0 28px rgba(76, 201, 232, 0.78),
    0 0 76px rgba(76, 201, 232, 0.42),
    0 34px 100px rgba(0, 0, 0, 0.72),
    inset 0 0 34px rgba(76, 201, 232, 0.12);
  transform: translate3d(0, 12px, 0) scale(0.92);
  transform-origin: center;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.local-turn-notice-card::before,
.local-turn-notice-card::after {
  position: absolute;
  width: 88px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #a8f1ff, transparent);
  box-shadow: 0 0 16px rgba(92, 220, 255, 0.9);
}

.local-turn-notice-card::before {
  top: 0;
  left: 12%;
}

.local-turn-notice-card::after {
  right: 12%;
  bottom: 0;
}

.local-turn-notice[data-open="true"] .local-turn-notice-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.local-turn-notice[data-dismiss-mode="instant"],
.local-turn-notice[data-dismiss-mode="instant"] .local-turn-notice-card {
  transition: none !important;
}

.local-turn-notice-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  place-items: center;
  border: 1px solid rgba(168, 241, 255, 0.76);
  border-radius: 16px;
  color: #74e4ff;
  background: rgba(76, 201, 232, 0.12);
  box-shadow:
    0 0 22px rgba(76, 201, 232, 0.36),
    inset 0 0 18px rgba(76, 201, 232, 0.12);
}

.local-turn-notice-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.local-turn-notice-icon circle {
  fill: currentColor;
  stroke: none;
}

.local-turn-notice-card > span {
  display: block;
  color: #74e4ff;
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  font-weight: 950;
  letter-spacing: 0.2em;
}

.local-turn-notice-card h2 {
  margin: 7px 0 2px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(116, 228, 255, 0.36);
}

.local-turn-notice-card p {
  margin: 0;
  color: #c9f6ff;
  font-size: clamp(1.15rem, 2.7vw, 1.65rem);
  font-weight: 850;
}

.local-turn-notice-card small {
  display: block;
  margin-top: 16px;
  color: rgba(219, 245, 250, 0.64);
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
}

@media (max-width: 520px) {
  .local-turn-notice {
    padding: 16px;
  }

  .local-turn-notice-card {
    width: min(100%, 420px);
    border-radius: 16px;
    padding: 24px 18px;
  }

  .local-turn-notice-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .local-turn-notice,
  .local-turn-notice-card {
    transition: none !important;
  }
}

.route-board .tile.active-player-tile,
.route-board .tile-hit.active-player-tile {
  --tile-border: var(--tile-border-bright, rgba(255, 224, 150, 1)) !important;
  --tile-glow-line: color-mix(in srgb, var(--tile-glow, var(--gold)) 34%, transparent) !important;
}

.route-board .tile.active-player-tile {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tile-glow, var(--gold)) 48%, transparent));
}

.route-board .tile.active-player-tile::before {
  opacity: 1 !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--tile-glow, var(--gold)) 38%, transparent),
    0 0 24px color-mix(in srgb, var(--tile-glow, var(--gold)) 48%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tile-glow, var(--gold)) 32%, transparent) !important;
  animation: active-tile-pulse 1.35s ease-in-out infinite;
}

.route-board .tile.your-turn-tile::before {
  box-shadow:
    0 0 0 3px rgba(82, 211, 125, 0.32),
    0 0 30px rgba(82, 211, 125, 0.38),
    inset 0 0 0 1px rgba(216, 255, 231, 0.26) !important;
}

.route-board .tile-hit.active-player-tile {
  stroke-width: 5px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tile-glow, var(--gold)) 72%, transparent));
}

.board-token {
  z-index: var(--token-z, calc(26 + var(--token-stack-slot, 0))) !important;
}

.board-token.inactive-token {
  opacity: 0.58;
  filter: saturate(0.78) brightness(0.82) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38));
}

.board-token.active-token {
  opacity: 1 !important;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 16px color-mix(in srgb, var(--token-color, var(--gold)) 86%, transparent)) !important;
  transform: translate3d(-50%, -94%, 0) scale(calc(var(--token-scale, 1) * 1.12)) !important;
}

.board-token.active-token.local-token {
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 18px rgba(82, 211, 125, 0.74)) !important;
}

.board-token.active-token .miniature-container::before {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 58px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--token-color, var(--gold)) 82%, #fff 12%);
  border-radius: 50%;
  content: "";
  opacity: 0.9;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0);
  animation: active-pawn-ring 1.25s ease-in-out infinite;
}

.board-token.active-token.local-token .miniature-container::before {
  border-color: rgba(82, 211, 125, 0.92);
}

.board-token.active-token .miniature-image {
  animation: miniature-bob 1.4s ease-in-out infinite alternate !important;
  transform: translate(0, -8px) scale(1.08) !important;
}

.board-token.active-token .miniature-glow {
  opacity: 1 !important;
  animation: miniature-glow-pulse 1.4s ease-in-out infinite alternate !important;
  transform: scale(1.2) !important;
}

.board-token.active-token .miniature-nametag {
  border-color: rgba(255, 224, 150, 0.36);
  border-left-color: color-mix(in srgb, var(--token-color, var(--gold)) 86%, #fff 8%);
  opacity: 1 !important;
  background:
    linear-gradient(135deg, rgba(243, 191, 85, 0.16), rgba(76, 201, 232, 0.08)),
    rgba(8, 9, 10, 0.92);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.38),
    0 0 16px color-mix(in srgb, var(--token-color, var(--gold)) 32%, transparent);
  color: #fffdf3;
  font-size: 9px;
  transform: translate3d(0, -5px, 0) scale(1) !important;
}

.board-token.active-token.local-token .miniature-nametag {
  border-left-color: rgba(82, 211, 125, 0.9);
  color: #eafff1;
}

@keyframes turn-banner-pop {
  0% {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.9);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes active-tile-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes active-pawn-ring {
  0%, 100% {
    opacity: 0.52;
    transform: translate3d(-50%, 0, 0) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1.16);
  }
}

@media (max-width: 720px) {
  .turn-focus-chip {
    left: 10px;
    top: 10px;
    max-width: calc(100% - 20px);
    padding: 7px 10px 7px 7px;
  }

  .turn-focus-chip img {
    width: 34px;
    height: 34px;
  }

  .turn-focus-chip strong {
    font-size: 0.78rem;
  }

  .turn-banner-card {
    gap: 11px;
    padding: 13px;
  }

  .turn-banner-card img {
    width: 58px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-board .tile.active-player-tile::before,
  .board-token.active-token .miniature-container::before,
  .board-token.active-token .miniature-image,
  .board-token.active-token .miniature-glow {
    animation: none !important;
  }
}

/* Final game drawer override: keep the right information board out of layout by default. */
body[data-phase="game"] .app-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-phase="game"] .game-client {
  z-index: auto;
}

body[data-phase="game"] .app-topbar,
body[data-phase="game"] .view-nav,
body[data-phase="game"] .app-views {
  position: relative;
  z-index: 1;
}

body[data-phase="game"] .view-nav {
  z-index: 12 !important;
}

body[data-phase="game"] .side-panel-toggle {
  right: auto !important;
  left: 0 !important;
  z-index: 121 !important;
  pointer-events: auto !important;
}

body[data-phase="game"] .side-panel {
  position: fixed !important;
  right: 12px;
  top: 132px !important;
  bottom: 14px;
  order: initial !important;
  width: min(540px, calc(100vw - 28px)) !important;
  max-width: min(540px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 148px);
  z-index: 120 !important;
  transform: translate3d(calc(100% + 26px), 0, 0);
  pointer-events: none;
}

body.side-panel-open[data-phase="game"] .side-panel {
  transform: translate3d(0, 0, 0);
  pointer-events: auto !important;
}

body.side-panel-open[data-phase="game"] .side-panel-toggle {
  right: auto !important;
  left: 0 !important;
}

body[data-phase="game"] .side-panel .action-summary {
  padding: 10px 12px;
}

body[data-phase="game"] .side-finance-panel {
  margin-top: 10px;
  padding: 16px;
  border-color: rgba(243, 191, 85, 0.28);
  background:
    radial-gradient(circle at 90% 7%, rgba(82, 211, 125, 0.15), transparent 10rem),
    radial-gradient(circle at 5% 0%, rgba(243, 191, 85, 0.16), transparent 8rem),
    linear-gradient(145deg, rgba(25, 31, 28, 0.9), rgba(18, 17, 16, 0.98));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-phase="game"] .side-finance-panel .finance-hud {
  gap: 11px;
}

body[data-phase="game"] .side-finance-panel .dash-head {
  align-items: center;
  border-bottom: 1px solid rgba(255, 224, 150, 0.12);
  padding-bottom: 10px;
}

body[data-phase="game"] .side-finance-panel .dash-head h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

body[data-phase="game"] .side-finance-panel .hero-stat {
  display: grid;
  grid-template-columns: auto minmax(112px, 0.32fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}

body[data-phase="game"] .side-finance-panel .avatar-portrait.large,
body[data-phase="game"] .side-finance-panel .avatar-portrait.large[data-career] {
  width: 94px;
  height: 92px;
}

body[data-phase="game"] .side-finance-panel .freedom-ring {
  justify-self: end;
  width: 96px;
  height: 96px;
}

body[data-phase="game"] .side-finance-panel .profession {
  margin: -2px 0 0;
  -webkit-line-clamp: 2;
}

body[data-phase="game"] .side-finance-panel .dream-card,
body[data-phase="game"] .side-finance-panel .freedom-target {
  margin: 0;
  padding: 10px 12px;
}

body[data-phase="game"] .side-finance-panel .metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body[data-phase="game"] .side-finance-panel .metric {
  min-height: 70px;
  padding: 10px;
}

body[data-phase="game"] .side-finance-panel .metric span {
  min-height: auto;
  font-size: 0.7rem;
  line-height: 1.18;
}

body[data-phase="game"] .side-finance-panel .metric b {
  margin-top: 4px;
  font-size: 1rem;
}

body[data-phase="game"] .side-finance-panel .mini-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  border-top-color: rgba(255, 224, 150, 0.18);
  margin-top: 2px;
  padding-top: 10px;
}

body[data-phase="game"] .side-finance-panel .mini-list > h4,
body[data-phase="game"] .side-finance-panel .hud-list-header {
  min-height: 34px;
  align-content: center;
  border-top: 0;
  margin: 0;
  padding: 0;
}

body[data-phase="game"] .side-finance-panel .hud-assets-list,
body[data-phase="game"] .side-finance-panel .hud-liabilities-list {
  align-self: start;
  margin-top: 0;
}

body[data-phase="game"] .side-finance-panel .hud-item-row {
  min-height: 54px;
  padding: 8px 10px;
}

body[data-phase="game"] .side-finance-panel .last-card {
  border-top: 1px solid rgba(255, 224, 150, 0.12);
  padding-top: 8px;
}

@media (max-width: 720px) {
  body[data-phase="game"] .side-panel {
    right: 10px;
    top: 110px !important;
    bottom: 10px;
    width: min(360px, calc(100vw - 20px)) !important;
    max-width: min(360px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 120px);
  }

  body[data-phase="game"] .side-panel-toggle {
    right: auto !important;
    left: 0 !important;
    min-width: 52px;
    min-height: 50px;
  }

  body.side-panel-open[data-phase="game"] .side-panel-toggle {
    right: auto !important;
    left: 0 !important;
    top: 76px;
  }

  body[data-phase="game"] .side-finance-panel .hero-stat,
  body[data-phase="game"] .side-finance-panel .metrics,
  body[data-phase="game"] .side-finance-panel .mini-list {
    grid-template-columns: 1fr;
  }

  body[data-phase="game"] .side-finance-panel .freedom-ring {
    justify-self: start;
  }
}

/* Premium Board Game Redesign Styles */
@keyframes active-turn-pulse {
  0% {
    box-shadow: 0 0 12px rgba(243, 191, 85, 0.25), 0 4px 8px rgba(0, 0, 0, 0.36);
    border-color: rgba(243, 191, 85, 0.52);
  }
  50% {
    box-shadow: 0 0 24px rgba(243, 191, 85, 0.75), 0 4px 12px rgba(243, 191, 85, 0.25);
    border-color: rgba(243, 191, 85, 0.95);
  }
  100% {
    box-shadow: 0 0 12px rgba(243, 191, 85, 0.25), 0 4px 8px rgba(0, 0, 0, 0.36);
    border-color: rgba(243, 191, 85, 0.52);
  }
}

.turn-node.active {
  animation: active-turn-pulse 2s infinite ease-in-out !important;
}

.turn-node.active strong {
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(243, 191, 85, 0.5);
}

@keyframes button-glow-pulse {
  0% {
    box-shadow: 0 0 12px rgba(243, 191, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 24px rgba(243, 191, 85, 0.85), 0 0 12px rgba(243, 191, 85, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 12px rgba(243, 191, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

.turn-roll-primary:not(:disabled),
.turn-end-primary:not(:disabled),
#rollButton:not(:disabled),
#endTurnButton:not(:disabled),
#startGame[data-ready="true"] {
  animation: button-glow-pulse 2s infinite ease-in-out !important;
}

/* Card Game Visuals & 3D Card Flip CSS */
@keyframes premium-card-entry {
  0% {
    transform: perspective(1000px) rotateY(-45deg) rotateX(15deg) translateZ(-100px) scale(0.8);
    opacity: 0;
    filter: brightness(0.5);
  }
  60% {
    transform: perspective(1000px) rotateY(10deg) rotateX(-5deg) translateZ(10px) scale(1.03);
    opacity: 1;
    filter: brightness(1.2);
  }
  100% {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateZ(0) scale(1);
    opacity: 1;
    filter: brightness(1);
    box-shadow: 
      0 24px 60px rgba(0, 0, 0, 0.68),
      0 0 35px var(--card-glow, rgba(243, 191, 85, 0.22));
  }
}

.card-reveal[data-open="true"] .card-reveal-panel,
.decision-modal[data-open="true"] .deal-card-face {
  animation: premium-card-entry 820ms cubic-bezier(0.25, 1, 0.5, 1) both;
}

/* Card deck themed designs */
.decision-panel[data-deck="charity"] .deal-card-face,
.card-reveal[data-deck="charity"] .card-reveal-panel {
  --card-glow: rgba(82, 211, 125, 0.35);
  border-color: rgba(82, 211, 125, 0.65) !important;
  background: 
    linear-gradient(145deg, rgba(82, 211, 125, 0.22), rgba(76, 201, 232, 0.08)),
    rgba(10, 10, 9, 0.82) !important;
}

.decision-panel[data-deck="charity"] .card-deck,
.card-reveal[data-deck="charity"] .card-deck {
  background: var(--green) !important;
}

.decision-panel[data-deck="development"] .deal-card-face,
.card-reveal[data-deck="development"] .card-reveal-panel {
  --card-glow: rgba(141, 124, 255, 0.38);
  border-color: rgba(141, 124, 255, 0.68) !important;
  background: 
    linear-gradient(145deg, rgba(141, 124, 255, 0.25), rgba(76, 201, 232, 0.08)),
    rgba(10, 10, 9, 0.82) !important;
}

.decision-panel[data-deck="development"] .card-deck,
.card-reveal[data-deck="development"] .card-deck {
  background: var(--violet) !important;
  color: #ffffff !important;
}

.decision-panel[data-deck="opportunity"] .deal-card-face,
.card-reveal[data-deck="opportunity"] .card-reveal-panel,
.decision-panel[data-deck="starter-deal"] .deal-card-face,
.card-reveal[data-deck="starter-deal"] .card-reveal-panel,
.decision-panel[data-deck="growth-deal"] .deal-card-face,
.card-reveal[data-deck="growth-deal"] .card-reveal-panel,
.decision-panel[data-deck="freedom-path-deal"] .deal-card-face,
.card-reveal[data-deck="freedom-path-deal"] .card-reveal-panel {
  --card-glow: rgba(243, 191, 85, 0.35);
  border-color: rgba(243, 191, 85, 0.65) !important;
  background: 
    linear-gradient(145deg, rgba(243, 191, 85, 0.22), rgba(82, 211, 125, 0.08)),
    rgba(10, 10, 9, 0.82) !important;
}

.decision-panel[data-deck="network"] .deal-card-face,
.card-reveal[data-deck="network"] .card-reveal-panel {
  --card-glow: rgba(243, 191, 85, 0.34);
  border-color: rgba(243, 191, 85, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(243, 191, 85, 0.2), rgba(82, 211, 125, 0.1)),
    rgba(13, 12, 9, 0.86) !important;
}

.decision-panel[data-deck="network"] .card-deck,
.card-reveal[data-deck="network"] .card-deck {
  color: #161109 !important;
  background: linear-gradient(135deg, #ffe39a, #f3bf55) !important;
}

.decision-panel[data-deck="network"] .deal-card-face p {
  color: rgba(247, 240, 223, 0.78);
}

.decision-panel[data-deck="network"] .card-tags span {
  border-color: rgba(243, 191, 85, 0.28);
  color: rgba(255, 232, 165, 0.9);
  background: rgba(243, 191, 85, 0.09);
}

.decision-panel[data-deck="digital-risk"] .deal-card-face,
.card-reveal[data-deck="digital-risk"] .card-reveal-panel,
.decision-panel[data-deck="risk"] .deal-card-face,
.card-reveal[data-deck="risk"] .card-reveal-panel,
.decision-panel[data-deck="macro"] .deal-card-face,
.card-reveal[data-deck="macro"] .card-reveal-panel,
.decision-panel[data-deck="burnout"] .deal-card-face,
.card-reveal[data-deck="burnout"] .card-reveal-panel {
  --card-glow: rgba(238, 98, 98, 0.38);
  border-color: rgba(238, 98, 98, 0.68) !important;
  background: 
    linear-gradient(145deg, rgba(238, 98, 98, 0.25), rgba(207, 107, 154, 0.08)),
    rgba(15, 10, 10, 0.84) !important;
}

.decision-panel[data-deck="digital-risk"] .card-deck,
.card-reveal[data-deck="digital-risk"] .card-deck,
.decision-panel[data-deck="risk"] .card-deck,
.card-reveal[data-deck="risk"] .card-deck,
.decision-panel[data-deck="macro"] .card-deck,
.card-reveal[data-deck="macro"] .card-deck,
.decision-panel[data-deck="burnout"] .card-deck,
.card-reveal[data-deck="burnout"] .card-deck {
  background: var(--red) !important;
  color: #ffffff !important;
}

/* Screen glitch overlay for risk tile landing */
.screen-glitch-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: rgba(238, 98, 98, 0.12);
  mix-blend-mode: color-burn;
  animation: glitch-flash 150ms infinite;
}

@keyframes glitch-flash {
  0% { opacity: 0.8; }
  50% { opacity: 0.3; }
  100% { opacity: 0.9; }
}

/* Tuition Lottery Panel */
.tuition-lottery-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  min-height: 340px;
  background: radial-gradient(circle at 50% 30%, rgba(141, 124, 255, 0.15), transparent 70%);
  border-radius: 12px;
  animation: fadeIn 300ms ease-out;
  grid-column: 1 / -1;
}

.tuition-lottery-title {
  margin-bottom: 24px;
}

.cyber-glow-text {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--violet);
  text-shadow: 0 0 12px rgba(141, 124, 255, 0.6);
  animation: pulse-glow 1.5s infinite alternate;
}

.tuition-sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 6px;
}

.tuition-lottery-slot-wrapper {
  perspective: 1000px;
  margin: 20px 0;
}

.tuition-lottery-slot {
  width: 240px;
  height: 140px;
  background: rgba(15, 14, 13, 0.85);
  border: 2px solid rgba(141, 124, 255, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 20px rgba(141, 124, 255, 0.15),
    inset 0 0 15px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.lottery-digit {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 0 10px rgba(247, 240, 223, 0.3);
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.digit-bump {
  transform: scale(1.08);
  text-shadow: 0 0 15px rgba(141, 124, 255, 0.8);
}

.settled-digit {
  animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.settled-digit.jackpot {
  color: var(--green) !important;
  text-shadow: 0 0 25px rgba(82, 211, 125, 0.8);
}

.settled-digit.good-result {
  color: var(--gold) !important;
  text-shadow: 0 0 20px rgba(243, 191, 85, 0.8);
}

.settled-digit.no-result {
  color: var(--red) !important;
  text-shadow: 0 0 15px rgba(238, 98, 98, 0.6);
}

.lottery-boost-amount {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 4px;
  color: var(--ink);
  opacity: 0.9;
  animation: slide-up-fade 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.tuition-lottery-status {
  margin-top: 20px;
  height: 24px;
}

.status-lbl {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s ease;
}

.dropship-dice-stage,
.dropship-effect-panel {
  gap: 10px;
}

.dropship-effect-panel {
  width: min(560px, calc(100vw - 36px));
  min-height: 0;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at 50% 18%, rgba(243, 191, 85, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(20, 18, 19, 0.96), rgba(9, 9, 11, 0.94));
  border: 1px solid rgba(243, 191, 85, 0.34);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.dropship-effect-panel.no-result {
  border-color: rgba(238, 98, 98, 0.42);
  background:
    radial-gradient(circle at 50% 18%, rgba(238, 98, 98, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(22, 16, 18, 0.97), rgba(9, 9, 11, 0.94));
}

.dropship-effect-panel.good-result {
  border-color: rgba(82, 211, 125, 0.36);
  background:
    radial-gradient(circle at 50% 18%, rgba(82, 211, 125, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(15, 22, 18, 0.97), rgba(9, 9, 11, 0.94));
}

.dropship-dice-arena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 60vw);
  height: 112px;
  margin: 4px 0 0;
  perspective: 980px;
  transform-style: preserve-3d;
}

.dropship-dice-run.board-dice-run {
  position: relative;
  left: auto;
  top: auto;
  width: var(--dice-size);
  height: var(--dice-size);
  transform: translate3d(0, 0, 0);
}

.dropship-effect-panel .dropship-dice-run.board-dice-run {
  --dice-size: 46px !important;
}

.dropship-dice-run.settled {
  animation: dice-pop 520ms var(--enter);
}

.dropship-dice-run.settled .board-dice-shadow {
  opacity: 0.74;
  transform: translate3d(0, 58px, -24px) scale(1.08);
}

.dropship-auto-roll-panel {
  width: min(540px, calc(100vw - 36px));
  min-height: 360px;
  padding: 30px 28px 26px;
  gap: 14px;
  background:
    radial-gradient(circle at 50% 22%, rgba(82, 211, 125, 0.17), transparent 36%),
    radial-gradient(circle at 50% 68%, rgba(243, 191, 85, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(16, 21, 19, 0.98), rgba(8, 9, 10, 0.96));
  border: 1px solid rgba(82, 211, 125, 0.38);
  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.72),
    0 0 36px rgba(82, 211, 125, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dropship-auto-roll-panel .tuition-lottery-title {
  gap: 7px;
}

.dropship-auto-roll-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto 2px;
  padding: 4px 9px;
  border: 1px solid rgba(82, 211, 125, 0.42);
  border-radius: 7px;
  color: rgba(191, 248, 210, 0.92);
  background: rgba(82, 211, 125, 0.11);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.dropship-auto-roll-panel .cyber-glow-text {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.08em;
}

.dropship-auto-roll-panel .tuition-sub {
  max-width: 34ch;
  margin: 0 auto;
  line-height: 1.45;
}

.dropship-auto-roll-panel .dropship-dice-arena {
  width: min(326px, 74vw);
  height: 178px;
  margin-top: 6px;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(247, 240, 223, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -22px 44px rgba(0, 0, 0, 0.24);
}

.dropship-auto-roll-panel[data-dropship-roll-phase="settled"] {
  border-color: rgba(243, 191, 85, 0.42);
}

.dropship-auto-roll-panel[data-dropship-roll-phase="settled"] .dropship-dice-arena {
  border-color: rgba(243, 191, 85, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 32px rgba(243, 191, 85, 0.16);
}

.dropship-auto-roll-panel .dropship-dice-run.board-dice-run {
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.42));
}

.dropship-auto-roll-panel .tuition-lottery-status {
  height: auto;
  min-height: 34px;
  margin-top: 2px;
  padding: 8px 12px;
  border: 1px solid rgba(247, 240, 223, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.dropship-auto-roll-panel .status-lbl {
  color: rgba(247, 240, 223, 0.88);
  font-weight: 800;
}

@media (max-width: 520px) {
  .dropship-auto-roll-panel {
    width: min(500px, calc(100vw - 24px));
    min-height: 330px;
    padding: 24px 18px 22px;
  }

  .dropship-auto-roll-panel .dropship-dice-arena {
    width: min(286px, 76vw);
    height: 158px;
  }
}

.dropship-result-kicker {
  color: rgba(247, 240, 223, 0.62);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dropship-effect-panel .dropship-dice-arena {
  height: 72px;
  margin-top: 0;
}

.dropship-result-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--ink);
}

.dropship-result-dice-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  perspective: 880px;
  transform-style: preserve-3d;
}

.dropship-result-dice-inline .dropship-dice-run.board-dice-run {
  filter: drop-shadow(0 10px 14px rgba(243, 191, 85, 0.25));
}

.dropship-result-hero span {
  color: rgba(247, 240, 223, 0.78);
  font-size: 1rem;
  font-weight: 800;
}

.dropship-result-hero strong {
  color: var(--gold);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: clamp(3.4rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: 0.9;
  text-shadow: 0 0 24px rgba(243, 191, 85, 0.62);
}

.dropship-result-hero.no-result strong,
.dropship-result-summary.no-result b {
  color: var(--red);
  text-shadow: 0 0 22px rgba(238, 98, 98, 0.5);
}

.dropship-result-hero.good-result strong,
.dropship-result-summary.good-result b {
  color: var(--green);
  text-shadow: 0 0 22px rgba(82, 211, 125, 0.48);
}

.dropship-result-summary {
  position: relative;
  display: grid;
  gap: 2px;
  justify-items: center;
  width: min(380px, 100%);
  margin: 0 auto 2px;
  padding: 9px 42px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(247, 240, 223, 0.08);
}

.dropship-result-summary-level-info {
  position: absolute;
  top: 8px;
  right: 8px;
}

.dropship-result-summary .dropship-level-popover {
  left: auto;
  right: 34px;
  top: 0;
  bottom: auto;
  width: min(330px, calc(100vw - 56px));
  transform: none;
}

.dropship-result-summary b {
  color: var(--gold);
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1;
}

.dropship-result-summary span {
  color: rgba(247, 240, 223, 0.8);
  font-size: 0.84rem;
  font-weight: 700;
}

.dropship-level-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(500px, 100%);
  margin: 0 auto 2px;
}

.dropship-level-status-card {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 0;
  min-width: 0;
  padding: 8px 9px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(247, 240, 223, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(247, 240, 223, 0.07), rgba(247, 240, 223, 0.025)),
    rgba(12, 13, 12, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.dropship-level-status-card.current {
  border-color: rgba(82, 211, 125, 0.34);
  background:
    linear-gradient(180deg, rgba(82, 211, 125, 0.11), rgba(82, 211, 125, 0.035)),
    rgba(12, 18, 14, 0.78);
}

.dropship-level-status-card.next {
  border-color: rgba(243, 191, 85, 0.34);
  background:
    linear-gradient(180deg, rgba(243, 191, 85, 0.12), rgba(243, 191, 85, 0.035)),
    rgba(18, 16, 11, 0.78);
}

.dropship-level-status-card.stress.good {
  border-color: rgba(82, 211, 125, 0.34);
  background:
    linear-gradient(180deg, rgba(82, 211, 125, 0.1), rgba(82, 211, 125, 0.03)),
    rgba(12, 18, 14, 0.78);
}

.dropship-level-status-card.stress.bad {
  border-color: rgba(238, 98, 98, 0.38);
  background:
    linear-gradient(180deg, rgba(238, 98, 98, 0.1), rgba(238, 98, 98, 0.03)),
    rgba(22, 13, 13, 0.78);
}

.dropship-level-status-card > span {
  color: rgba(247, 240, 223, 0.6);
  font-size: 0.65rem;
  font-weight: 900;
}

.dropship-level-status-card b {
  color: var(--ink);
  font-size: clamp(0.9rem, 2.1vw, 1.14rem);
  font-weight: 900;
  line-height: 1;
}

.dropship-level-status-card.current b {
  color: var(--green);
}

.dropship-level-status-card.next b {
  color: var(--gold);
}

.dropship-level-status-card.stress.good b {
  color: var(--ink);
}

.dropship-level-status-card.stress.bad b {
  color: var(--red);
}

.dropship-level-status-card em {
  color: rgba(247, 240, 223, 0.86);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.dropship-level-status-card small {
  display: block;
  color: rgba(247, 240, 223, 0.7);
  font-size: 0.64rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dropship-level-status-card small strong {
  color: rgba(247, 240, 223, 0.52);
  font-size: 0.62rem;
  font-weight: 900;
}

.dropship-effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(480px, 100%);
  margin-top: 2px;
}

.dropship-effect-card {
  position: relative;
  border: 1px solid rgba(247, 240, 223, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  background: rgba(15, 14, 13, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dropship-effect-card span,
.dropship-effect-card small {
  display: block;
  color: var(--muted);
}

.dropship-effect-card .dropship-effect-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.dropship-level-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1px solid rgba(247, 240, 223, 0.26);
  border-radius: 50%;
  padding: 0;
  color: rgba(247, 240, 223, 0.86);
  background: rgba(247, 240, 223, 0.08);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.dropship-level-info-button:hover,
.dropship-level-info-button:focus-visible,
.dropship-level-info-button[aria-expanded="true"] {
  color: #101010;
  background: var(--gold);
  border-color: rgba(255, 224, 142, 0.92);
  box-shadow: 0 0 14px rgba(243, 191, 85, 0.38);
  transform: none;
}

.dropship-level-popover {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 10px);
  z-index: 7;
  width: min(370px, calc(100vw - 56px));
  max-height: min(390px, 58vh);
  overflow: auto;
  border: 1px solid rgba(243, 191, 85, 0.42);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background:
    radial-gradient(circle at 16% 0%, rgba(243, 191, 85, 0.18), transparent 38%),
    rgba(10, 11, 11, 0.98);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.58);
}

.dropship-level-popover[hidden] {
  display: none;
}

.dropship-level-popover h4 {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.88rem;
  font-weight: 900;
}

.dropship-level-popover ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dropship-level-popover li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 2px 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(247, 240, 223, 0.055);
}

.dropship-level-popover li b {
  grid-row: span 2;
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.25;
}

.dropship-level-popover li span {
  display: block;
  color: rgba(247, 240, 223, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
}

.dropship-level-popover li small {
  display: block;
  color: rgba(247, 240, 223, 0.66);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.dropship-effect-card b {
  display: block;
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: clamp(1.12rem, 3vw, 1.65rem);
  line-height: 1;
}

.dropship-effect-card.good {
  border-color: rgba(82, 211, 125, 0.34);
  background: rgba(35, 83, 52, 0.22);
}

.dropship-effect-card.warn {
  border-color: rgba(243, 191, 85, 0.34);
  background: rgba(92, 68, 25, 0.2);
}

.dropship-effect-card.bad {
  border-color: rgba(238, 98, 98, 0.36);
  background: rgba(105, 39, 39, 0.2);
}

.dropship-result-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.dropship-result-actions button {
  min-width: 120px;
}

.dropship-next-text {
  color: rgba(247, 240, 223, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 0;
}

@media (max-width: 620px) {
  .dropship-level-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .dropship-effect-grid {
    grid-template-columns: 1fr;
  }

  .dropship-level-status-card {
    min-height: 0;
    padding: 7px;
  }

  .dropship-level-status-card b {
    font-size: 0.86rem;
  }

  .dropship-level-status-card small {
    font-size: 0.58rem;
  }
}

/* Animations */
@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 8px rgba(141, 124, 255, 0.4);
  }
  100% {
    text-shadow: 0 0 18px rgba(141, 124, 255, 0.8);
  }
}

@keyframes pop-in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-up-fade {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropship-dice-run.settled {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

/* Dynamic Layout: Only Slave to Money Mode styles */
.play-board.only-money-loop .board-neon-frame.outer-glow {
  opacity: 0.03 !important;
  transition: opacity 0.5s ease;
}
.play-board.only-money-loop .board-neon-frame.mid-glow {
  opacity: 0.03 !important;
  transition: opacity 0.5s ease;
}
.play-board.only-money-loop .board-neon-frame.inner-glow-outer {
  left: 10.0% !important;
  top: 14.0% !important;
  width: 80.0% !important;
  height: 60.0% !important;
  --neon-border: rgba(243, 191, 85, 0.45);
  --neon-glow: rgba(243, 191, 85, 0.22);
  --neon-glow-inset: rgba(243, 191, 85, 0.12);
  transition: all 0.5s ease;
}
.play-board.only-money-loop .board-neon-frame.inner-glow-inner {
  left: 26.5% !important;
  top: 29.5% !important;
  width: 47.0% !important;
  height: 29.0% !important;
  transition: all 0.5s ease;
}
.play-board.only-money-loop .fast-board {
  opacity: 0.04 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease;
}
.play-board.only-money-loop .tech-grid,
.play-board.only-money-loop .hud-dials,
.play-board.only-money-loop .vector-graphs,
.play-board.only-money-loop .escape-vectors,
.play-board.only-money-loop .hud-text {
  opacity: 0.10 !important;
  transition: opacity 0.5s ease;
}

/* Make moneyLoop tiles larger and more readable in only-money-loop mode */
.play-board.only-money-loop .rat-board .tile {
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.play-board.only-money-loop .rat-board .tile .tile-title {
  font-size: 13px !important;
  font-weight: 800 !important;
}
.play-board.only-money-loop .rat-board .tile .tile-icon {
  font-size: 25px !important;
}
.play-board.only-money-loop .rat-board .tile .tile-badge {
  font-size: 8.5px !important;
}

/* Glassmorphism & Compact overrides for Turn Review Modal in end-turn mode */
.turn-action-modal[data-mode="end"] .turn-action-panel {
  width: min(440px, calc(100vw - 32px)) !important;
  background:
    linear-gradient(135deg, rgba(82, 211, 125, 0.14), transparent 34%),
    linear-gradient(225deg, rgba(243, 191, 85, 0.08), transparent 44%),
    rgba(15, 15, 12, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(82, 211, 125, 0.38) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 45px rgba(82, 211, 125, 0.2) !important;
  padding: 14px 18px !important;
  gap: 12px !important;
}

.turn-action-modal[data-mode="end"] .turn-action-summary {
  gap: 8px !important;
}

.turn-action-modal[data-mode="end"] .turn-action-summary div {
  padding: 6px 8px !important;
}

.turn-action-modal[data-mode="end"] .turn-action-summary strong {
  font-size: 0.9rem !important;
}

/* UI/UX Redesign: Make the End Turn button smaller, elegant, and themed */
.turn-action-modal[data-mode="end"] .turn-end-primary {
  min-height: 72px !important;
  padding: 8px 16px !important;
  gap: 1px !important;
  border-radius: 8px !important;
  background: 
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.45), transparent 45%),
    linear-gradient(135deg, #a7ffd1, #52d37d 58%, #21975a) !important;
  border: 1px solid rgba(82, 211, 125, 0.6) !important;
  box-shadow: 
    0 10px 24px rgba(82, 211, 125, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.turn-action-modal[data-mode="end"] .turn-end-primary:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.005) !important;
  box-shadow: 
    0 14px 32px rgba(82, 211, 125, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  filter: brightness(1.04) !important;
}

.turn-action-modal[data-mode="end"] .turn-end-primary span {
  font-size: 0.72rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 800 !important;
  color: rgba(15, 27, 18, 0.75) !important;
  margin-bottom: -1px !important;
}

.turn-action-modal[data-mode="end"] .turn-end-primary b {
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: #0f1b12 !important;
  letter-spacing: 0.5px !important;
}

.turn-action-modal[data-mode="end"] .turn-end-primary small {
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  color: rgba(15, 27, 18, 0.6) !important;
  opacity: 0.95 !important;
  letter-spacing: -0.1px !important;
}

/* ==========================================================================
   Sell Rights Negotiation & Bidding System Styles
   ========================================================================== */
.negotiation-panel {
  border: 1px solid rgba(226, 135, 67, 0.4) !important;
  background:
    linear-gradient(118deg, rgba(226, 135, 67, 0.18), transparent 36%),
    linear-gradient(242deg, rgba(76, 201, 232, 0.12), transparent 42%),
    rgba(24, 22, 20, 0.97) !important;
}

.decision-panel.negotiation-panel {
  --negotiation-panel-height: min(680px, calc(100dvh - 32px));
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  max-height: var(--negotiation-panel-height);
  overflow: hidden;
}

.decision-panel.negotiation-panel .negotiation-deal-card {
  align-self: start;
}

.decision-panel.negotiation-panel .negotiation-copy {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  max-height: calc(var(--negotiation-panel-height) - 28px);
  overflow: hidden;
}

.negotiation-heading {
  min-width: 0;
}

.negotiation-heading .eyebrow {
  margin-bottom: 4px;
}

.negotiation-heading h2 {
  margin: 0;
}

.negotiation-scroll-region {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.decision-panel.negotiation-panel .negotiation-list {
  max-height: none;
  overflow: visible;
}

.negotiation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.negotiation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.negotiation-row.pending {
  border-left: 3px solid rgba(178, 130, 46, 0.7);
}

.negotiation-row.accepted {
  border-left: 3px solid rgba(79, 123, 69, 0.7);
  background: rgba(79, 123, 69, 0.05);
}

.negotiation-row.countered {
  border-left: 3px solid rgba(49, 130, 206, 0.7);
  background: rgba(49, 130, 206, 0.05);
}

.negotiation-row.declined {
  border-left: 3px solid rgba(161, 76, 93, 0.7);
  opacity: 0.6;
}

.negotiation-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.deal-price-input {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
}

.deal-price-input:focus {
  border-color: #e28743 !important;
  box-shadow: 0 0 8px rgba(226, 135, 67, 0.4);
}

.proposed-price-highlight {
  color: #e28743;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(226, 135, 67, 0.3);
}

.btn-xs {
  font-size: 11px !important;
  padding: 4px 10px !important;
  height: auto !important;
  border-radius: 4px !important;
  text-transform: none !important;
  font-weight: bold !important;
}

/* --- Added clean negotiation & input layout classes --- */

.landing-deal-proposing-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.sell-rights-input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  border: 1px dashed rgba(226, 135, 67, 0.3);
  padding: 12px;
  border-radius: 10px;
  background: rgba(226, 135, 67, 0.05);
  box-shadow: inset 0 0 10px rgba(226, 135, 67, 0.08);
  animation: fadeInDown 0.22s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sell-rights-input-group label {
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2px;
}

.sell-rights-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.sell-rights-input-row button.btn-confirm-proposal {
  background: linear-gradient(135deg, #e28743, #c56a28) !important;
  color: #10100f !important;
  font-weight: 900;
  border: none;
  padding: 0 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.sell-rights-input-row button.btn-confirm-proposal:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 12px rgba(226, 135, 67, 0.4);
}

.sell-rights-input-row button.btn-cancel-proposal {
  font-size: 0.82rem;
  padding: 0 16px;
  border-radius: 6px;
}

.sell-rights-return-notice {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(238, 98, 98, 0.36);
  background:
    linear-gradient(135deg, rgba(238, 98, 98, 0.14), transparent 58%),
    rgba(14, 12, 12, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px rgba(238, 98, 98, 0.12);
  animation: slide-up-fade 0.22s ease-out;
}

.sell-rights-return-notice strong {
  display: block;
  color: #ffe1e1;
  font-size: 1rem;
  font-weight: 900;
}

.sell-rights-return-notice p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  line-height: 1.45;
}

.sell-rights-return-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.sell-rights-return-list span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 147, 147, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.sell-rights-return-list b {
  color: var(--ink);
  font-size: 0.82rem;
}

.sell-rights-return-list small {
  color: #ffb5b5;
  font-size: 0.72rem;
  font-weight: 800;
}

.negotiation-list h4 {
  font-size: 0.88rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 4px 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.negotiation-player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.negotiation-player-info .player-name {
  font-weight: 900;
  font-size: 0.92rem;
  color: var(--ink);
}

.negotiation-player-info .player-cash {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 800;
}

.negotiation-status-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-pending {
  color: #f3bf55;
  font-style: italic;
  font-size: 0.82rem;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(243, 191, 85, 0.2);
}

.status-accepted {
  color: #6affa2;
  font-weight: 900;
  font-size: 0.82rem;
  text-shadow: 0 0 6px rgba(106, 255, 162, 0.2);
}

.status-countered {
  color: #7dd6ff;
  font-weight: 900;
  font-size: 0.82rem;
  text-shadow: 0 0 6px rgba(125, 214, 255, 0.2);
}

.status-declined {
  color: #ff9393;
  font-weight: 800;
  font-size: 0.82rem;
  opacity: 0.85;
}

.btn-finalize-deal {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  text-transform: none !important;
  font-weight: 900 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.negotiation-buyer-waiting {
  text-align: center;
  padding: 20px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  margin-top: 16px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.3);
  animation: pulseGlow 2s infinite ease-in-out;
}

.negotiation-buyer-waiting p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.4;
}

.negotiation-buyer-waiting p.muted {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

@keyframes pulseGlow {
  0% { border-color: rgba(255, 255, 255, 0.12); }
  50% { border-color: rgba(226, 135, 67, 0.35); }
  100% { border-color: rgba(255, 255, 255, 0.12); }
}

.negotiation-buyer-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.negotiation-buyer-actions p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

.negotiation-buyer-actions p b {
  color: #e28743;
  font-size: 1.05rem;
  font-weight: 950;
  text-shadow: 0 0 6px rgba(226, 135, 67, 0.3);
}

.negotiation-offer-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border: 1px solid rgba(226, 135, 67, 0.24);
  border-radius: 8px;
  padding: 9px 12px;
  background:
    linear-gradient(135deg, rgba(226, 135, 67, 0.12), transparent 65%),
    rgba(0, 0, 0, 0.22);
}

.negotiation-offer-price span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
}

.decision-panel.negotiation-panel .negotiation-primary-actions {
  grid-template-columns: 1.2fr 0.95fr 0.72fr;
}

.decision-panel.negotiation-panel .sell-rights-deal-detail {
  margin: 0;
}

.decision-panel.negotiation-panel .sell-rights-detail-toggle {
  min-height: 42px;
  padding-block: 8px;
}

.decision-panel.negotiation-panel .sell-rights-deal-detail-panel {
  padding: 10px;
}

.decision-panel.negotiation-panel .sell-rights-deal-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-panel.negotiation-panel .sell-rights-deal-detail-grid span {
  min-height: 58px;
  padding: 8px 9px;
}

.negotiation-seller-actions {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.counter-bid-group {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(226, 135, 67, 0.2);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  animation: fadeInDown 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.counter-bid-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 760px) {
  .decision-panel.negotiation-panel {
    --negotiation-panel-height: calc(100dvh - 20px);
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-height: var(--negotiation-panel-height);
    overflow-y: auto;
    padding: 10px;
  }

  .decision-panel.negotiation-panel .negotiation-deal-card {
    padding: 14px;
  }

  .decision-panel.negotiation-panel .negotiation-deal-card .card-deck {
    margin-bottom: 8px;
  }

  .decision-panel.negotiation-panel .negotiation-deal-card h3 {
    margin-bottom: 6px;
    font-size: 1.16rem;
  }

  .decision-panel.negotiation-panel .negotiation-deal-card > p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.84rem;
  }

  .decision-panel.negotiation-panel .negotiation-deal-card .card-tags {
    margin-top: 10px;
  }

  .decision-panel.negotiation-panel .negotiation-copy {
    display: block;
    max-height: none;
    overflow: visible;
    padding: 2px;
  }

  .decision-panel.negotiation-panel .negotiation-scroll-region {
    overflow: visible;
    padding-right: 0;
  }

  .decision-panel.negotiation-panel .negotiation-buyer-actions {
    margin-top: 12px;
    gap: 10px;
  }

  .decision-panel.negotiation-panel .negotiation-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-panel.negotiation-panel .negotiation-primary-actions > :first-child {
    grid-column: 1 / -1;
  }

  .decision-panel.negotiation-panel .sell-rights-deal-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-panel.negotiation-panel .counter-bid-group .sell-rights-input-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-panel.negotiation-panel .counter-bid-group .deal-price-input {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .decision-panel.negotiation-panel .counter-bid-group button {
    min-height: 42px;
    padding: 8px 10px;
  }
}

/* Compact turn modal pass: keep decisions readable without covering too much board. */
.turn-action-head {
  align-items: center !important;
  gap: 12px !important;
}

.turn-action-head h2 {
  margin-top: 1px !important;
}

.turn-action-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.turn-action-meta > span {
  border: 1px solid rgba(76, 201, 232, 0.26);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--cyan);
  background: rgba(76, 201, 232, 0.075);
  font-size: 0.7rem;
  font-weight: 950;
  white-space: nowrap;
}

.turn-action-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.turn-action-summary .turn-summary-card {
  min-height: 58px;
  border-radius: 8px;
  padding: 8px 9px !important;
}

.turn-action-summary .turn-summary-card.good strong {
  color: var(--green);
}

.turn-action-summary .turn-summary-card.warn strong {
  color: var(--gold);
}

.turn-action-summary .turn-summary-card.bad strong {
  color: var(--red);
}

.turn-action-summary span {
  font-size: 0.62rem !important;
  line-height: 1.15;
}

.turn-action-summary strong {
  margin-top: 1px !important;
  font-size: 0.86rem !important;
}

.turn-roll-primary,
.turn-end-primary,
.turn-action-modal[data-mode="end"] .turn-end-primary {
  min-height: 68px !important;
  border-radius: 8px !important;
  padding: 8px 13px !important;
  gap: 1px !important;
}

.turn-roll-primary span,
.turn-end-primary span,
.turn-action-modal[data-mode="end"] .turn-end-primary span {
  font-size: 0.66rem !important;
  letter-spacing: 0.04em !important;
}

.turn-roll-primary b,
.turn-end-primary b,
.turn-action-modal[data-mode="end"] .turn-end-primary b {
  font-size: clamp(1.16rem, 2.7vw, 1.52rem) !important;
}

.turn-roll-primary small,
.turn-end-primary small,
.turn-action-modal[data-mode="end"] .turn-end-primary small {
  font-size: 0.64rem !important;
}

.turn-pre-actions {
  gap: 8px !important;
}

.turn-pre-actions button {
  min-height: 38px !important;
  border-radius: 8px !important;
  padding: 7px 8px !important;
  font-size: 0.72rem !important;
}

@media (max-width: 760px) {
  .turn-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .turn-action-summary .turn-summary-card.time {
    grid-column: 1 / -1;
  }

  .turn-action-head {
    align-items: stretch !important;
  }

  .turn-action-meta {
    justify-content: space-between;
  }
}

/* Final turn modal polish: wider, calmer, and less cramped across roll/review states. */
.turn-action-modal[data-open="true"] {
  padding-top: min(64px, 8vh) !important;
}

.turn-action-modal .turn-action-panel,
.turn-action-modal[data-mode="end"] .turn-action-panel {
  width: var(--modal-w-md) !important;
  gap: 12px !important;
  border-radius: var(--modal-radius) !important;
  padding: 16px 18px !important;
}

.turn-action-modal .turn-action-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 14px !important;
}

.turn-action-modal .turn-action-head h2 {
  max-width: 100%;
  font-size: var(--modal-title-sm) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
}

.turn-action-modal .turn-action-meta {
  justify-content: end;
}

.turn-action-modal .turn-action-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.turn-action-modal .turn-action-summary .turn-summary-card {
  display: grid;
  align-content: space-between;
  min-height: 64px;
  border-radius: 10px;
  padding: 9px 10px !important;
}

.turn-action-modal .turn-action-summary span {
  font-size: 0.64rem !important;
}

.turn-action-modal .turn-action-summary strong {
  font-size: 0.9rem !important;
}

.turn-action-modal .turn-roll-primary,
.turn-action-modal .turn-end-primary,
.turn-action-modal[data-mode="end"] .turn-end-primary {
  min-height: 76px !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
}

.turn-action-modal .turn-roll-primary b,
.turn-action-modal .turn-end-primary b,
.turn-action-modal[data-mode="end"] .turn-end-primary b {
  font-size: clamp(1.24rem, 2.5vw, 1.66rem) !important;
}

.turn-action-modal .turn-roll-primary small,
.turn-action-modal .turn-end-primary small,
.turn-action-modal[data-mode="end"] .turn-end-primary small {
  max-width: 46ch;
  font-size: 0.68rem !important;
  line-height: 1.22;
  text-align: center;
}

.turn-action-modal .turn-pre-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.turn-action-modal .turn-pre-actions button {
  min-height: 42px !important;
  padding: 8px 10px !important;
  font-size: 0.76rem !important;
}

.turn-action-modal .turn-action-subpanel {
  border-radius: 12px;
  padding: 12px;
}

@media (max-width: 680px) {
  .turn-action-modal .turn-action-panel,
  .turn-action-modal[data-mode="end"] .turn-action-panel {
    width: min(520px, calc(100vw - 24px)) !important;
    padding: 14px !important;
  }

  .turn-action-modal .turn-action-head {
    grid-template-columns: 1fr;
  }

  .turn-action-modal .turn-action-meta {
    justify-content: space-between;
  }

  .turn-action-modal .turn-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .turn-action-modal .turn-action-summary .turn-summary-card.time {
    grid-column: 1 / -1;
  }

  .turn-action-modal .turn-pre-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Turn Review enhancements: keep metric cards on ONE row at every width,
   plus this-turn deltas, gauges, event summary and the money-loop goal bar.
   Placed last so the single-row rule wins over the narrow-width reflows above.
   ========================================================================== */
.turn-action-modal .turn-action-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.turn-action-modal .turn-action-summary .turn-summary-card.time {
  grid-column: auto !important;
}

.turn-summary-card .turn-card-delta {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.turn-card-delta.good {
  color: var(--green);
}

.turn-card-delta.bad {
  color: var(--red);
}

.turn-event-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid rgba(76, 201, 232, 0.22);
  background: rgba(76, 201, 232, 0.10);
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.4;
}

.turn-event-strip b {
  color: var(--gold);
  font-weight: 800;
}

.turn-event-strip b.turn-event-income {
  color: var(--green);
}

.turn-event-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cc9e8;
}

.turn-freedom-bar {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.turn-freedom-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.turn-freedom-track {
  height: 7px;
  margin: 6px 0 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.turn-freedom-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.turn-freedom-fill.ready {
  background: var(--green);
}

.turn-freedom-bar small {
  display: block;
  color: var(--muted);
  font-size: 0.62rem;
}

.turn-info-button[aria-expanded="true"]::after {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Short landscape viewports (e.g. phones ≥721px wide that the width-based
   rule misses): let the now-taller review panel scroll instead of clipping. */
@media (max-height: 520px) {
  .turn-action-modal:not([data-minimized="true"]) .turn-action-panel {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .turn-action-modal .turn-action-summary {
    gap: 5px !important;
  }

  .turn-action-modal .turn-action-summary .turn-summary-card {
    padding: 6px 6px !important;
    min-height: 50px;
  }

  .turn-action-modal .turn-action-summary span {
    font-size: 0.54rem !important;
  }

  .turn-action-modal .turn-action-summary strong {
    font-size: 0.72rem !important;
  }

  .turn-action-modal .turn-card-delta {
    font-size: 0.5rem !important;
  }
}

/* ==========================================================================
   Turn Review polish: cleaner card grid, tabular figures, calmer hierarchy.
   Gauges and accent rails removed — cards are plain uniform compact tiles;
   status shown via value-text color only. Placed last to win specificity.
   ========================================================================== */
.turn-action-modal .turn-action-summary {
  gap: 10px !important;
}

.turn-action-modal .turn-action-summary .turn-summary-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.turn-action-modal .turn-action-summary span {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.turn-action-modal .turn-action-summary strong {
  margin-top: 0 !important;
  font-size: 0.98rem !important;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.turn-action-modal .turn-card-delta {
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Event strip + freedom bar: shared radius and rhythm with the cards. */
.turn-action-modal .turn-event-strip {
  border-radius: 12px;
  padding: 9px 13px;
}

.turn-action-modal .turn-freedom-bar {
  border-radius: 12px;
  padding: 11px 13px;
}
.turn-action-modal .turn-freedom-head span {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Square Board Tile Layer
   ========================================================================== */

.dynamic-board-container .board-neon-frame {
  z-index: 2;
}

.dynamic-board-container .board-cyber-grid-overlay {
  z-index: 1;
}

.dynamic-board-container .route-board {
  z-index: 8;
}

/* ==========================================================================
   Current Board Art Direction: Opaque City Board Tiles
   ========================================================================== */

.dynamic-board-container {
  background:
    linear-gradient(180deg, rgba(4, 7, 12, 0.18), rgba(4, 7, 12, 0.58) 58%, rgba(2, 4, 8, 0.88)),
    linear-gradient(90deg, rgba(4, 18, 26, 0.74), rgba(25, 15, 24, 0.42) 50%, rgba(6, 20, 28, 0.74)),
    var(--board-art) center / cover no-repeat !important;
}

.dynamic-board-container::before {
  z-index: 0;
  opacity: 0.62;
  background:
    linear-gradient(rgba(102, 205, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 214, 118, 0.06) 1px, transparent 1px),
    repeating-linear-gradient(112deg, transparent 0 74px, rgba(76, 201, 232, 0.08) 75px 77px, transparent 78px 160px);
  background-size: 54px 54px, 54px 54px, 260px 260px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), #000 18%, #000 80%, rgba(0, 0, 0, 0.58));
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), #000 18%, #000 80%, rgba(0, 0, 0, 0.58));
}

.dynamic-board-container::after {
  display: block !important;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 214, 118, 0.1), transparent 18%, transparent 76%, rgba(76, 201, 232, 0.12)),
    repeating-linear-gradient(90deg, rgba(255, 214, 118, 0.12) 0 1px, transparent 1px 86px);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.route-board .tile {
  --tile-accent: #f3bf55;
  --tile-fill: #241d13;
  --tile-fill-low: #101318;
  --tile-border: var(--tile-accent);
  --tile-border-bright: color-mix(in srgb, var(--tile-accent) 78%, #ffffff);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
  background-color: var(--tile-fill) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 20%, var(--tile-fill)) 0%, var(--tile-fill) 45%, var(--tile-fill-low) 100%) !important;
  border-color: var(--tile-accent) !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 22px rgba(0, 0, 0, 0.32),
    0 1px 0 color-mix(in srgb, var(--tile-accent) 82%, #000000),
    0 2px 0 color-mix(in srgb, var(--tile-accent) 70%, #000000),
    0 3px 0 color-mix(in srgb, var(--tile-accent) 56%, #000000),
    0 8px 18px rgba(0, 0, 0, 0.62),
    0 0 18px color-mix(in srgb, var(--tile-accent) 28%, transparent) !important;
}

.route-board .tile.opportunity,
.route-board .tile.starterDeal,
.route-board .tile.growthDeal,
.route-board .tile.venture {
  --tile-accent: var(--board-tile-deal);
  --tile-fill: #352915;
  --tile-fill-low: #15130d;
}

.route-board .tile.payday,
.route-board .tile.incomeDay {
  --tile-accent: var(--board-tile-income);
  --tile-fill: #123323;
  --tile-fill-low: #07180f;
}

.route-board .tile.market,
.route-board .tile.macro {
  --tile-accent: var(--board-tile-market);
  --tile-fill: #123043;
  --tile-fill-low: #071721;
}

.route-board .tile.upskill,
.route-board .tile.sideHustle,
.route-board .tile.network {
  --tile-accent: var(--board-tile-growth);
  --tile-fill: #102a3b;
  --tile-fill-low: #061421;
}

.route-board .tile.charity,
.route-board .tile.impact {
  --tile-accent: var(--board-tile-goodwill);
  --tile-fill: #103328;
  --tile-fill-low: #061813;
}

.route-board .tile.surprise,
.route-board .tile.socialTax,
.route-board .tile.digitalRisk,
.route-board .tile.lawsuit,
.route-board .tile.taxAudit,
.route-board .tile.divorce,
.route-board .tile.layoff {
  --tile-accent: var(--board-tile-risk);
  --tile-fill: #3c171a;
  --tile-fill-low: #1a090b;
}

.route-board .tile.health,
.route-board .tile.burnout,
.route-board .tile.downsized {
  --tile-accent: var(--board-tile-health);
  --tile-fill: #3c1e17;
  --tile-fill-low: #1a0c08;
}

.route-board .tile.baby {
  --tile-accent: var(--board-tile-family);
  --tile-fill: #3a2512;
  --tile-fill-low: #1a0f07;
}

.route-board .tile.dream {
  --tile-accent: var(--board-tile-dream);
  --tile-fill: #2e1e44;
  --tile-fill-low: #120b1d;
}

.route-board .tile.exit,
.route-board .tile.finalFreedom {
  --tile-accent: var(--board-tile-exit);
  --tile-fill: #123528;
  --tile-fill-low: #061811;
}

.route-board .tile.portfolio {
  --tile-accent: var(--board-tile-market);
  --tile-fill: #123043;
  --tile-fill-low: #071721;
}

.route-board .tile-icon {
  border-color: var(--tile-accent) !important;
  color: var(--tile-accent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 16%, #111722), #05070b) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px color-mix(in srgb, var(--tile-accent) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--tile-accent) 42%, transparent) !important;
}

.route-board .tile-icon img {
  filter:
    saturate(1.12)
    contrast(1.08)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 0 6px color-mix(in srgb, var(--tile-accent) 40%, transparent)) !important;
}

.route-board .tile-badge {
  color: var(--tile-accent) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 7px color-mix(in srgb, var(--tile-accent) 58%, transparent) !important;
}

.route-board.rat-board .tile,
.route-board.fast-board .tile,
.play-board.view-flat .route-board.fast-board .tile.tile-fast-corner {
  background-color: var(--tile-fill) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 20%, var(--tile-fill)) 0%, var(--tile-fill) 46%, var(--tile-fill-low) 100%) !important;
  border-color: var(--tile-accent) !important;
}

.route-board .tile.tile-corner,
.route-board .tile.tile-fast-corner,
.route-board.fast-board .tile.tile-corner-top-left,
.route-board.fast-board .tile.tile-corner-top-right,
.route-board.fast-board .tile.tile-corner-bottom-right,
.route-board.fast-board .tile.tile-corner-bottom-left,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-left,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-right,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-right,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-left,
.play-board.view-flat .route-board.fast-board .tile.tile-fast-corner {
  border-radius: 12px !important;
  background-color: var(--tile-fill) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 22%, var(--tile-fill)) 0%, var(--tile-fill) 48%, var(--tile-fill-low) 100%) !important;
  overflow: visible !important;
}

.route-board .tile::before,
.route-board .tile::after,
.route-board.rat-board .tile::before,
.route-board.rat-board .tile::after,
.route-board.fast-board .tile::before,
.route-board.fast-board .tile::after {
  background-color: color-mix(in srgb, var(--tile-fill) 82%, #05070b) !important;
}

.route-board .tile.portfolio .tile-icon img,
.landing-event-modal[data-type="portfolio"] .landing-event-icon img {
  filter:
    hue-rotate(118deg)
    saturate(1.35)
    brightness(1.08)
    contrast(1.1)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 0 7px color-mix(in srgb, var(--tile-accent, #d79aff) 48%, transparent)) !important;
}

.route-board .tile.tile-corner-top-left,
.route-board.fast-board .tile.tile-corner-top-left,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-left {
  border-top-left-radius: 34px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.route-board .tile.tile-corner-top-right,
.route-board.fast-board .tile.tile-corner-top-right,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-top-right {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 34px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.route-board .tile.tile-corner-bottom-right,
.route-board.fast-board .tile.tile-corner-bottom-right,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-right {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 34px !important;
  border-bottom-left-radius: 10px !important;
}

.route-board .tile.tile-corner-bottom-left,
.route-board.fast-board .tile.tile-corner-bottom-left,
.play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-left {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-bottom-left-radius: 34px !important;
}

/* Board Icon Color Lock: icon, icon ring, and tile frame share one accent. */
.route-board .tile.baby,
.route-board .tile[data-type="baby"] {
  --tile-accent: var(--board-tile-family);
  --tile-fill: #3a2512;
  --tile-fill-low: #1a0f07;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.dream,
.route-board .tile[data-type="dream"] {
  --tile-accent: var(--board-tile-dream);
  --tile-fill: #2e1e44;
  --tile-fill-low: #120b1d;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.impact,
.route-board .tile[data-type="impact"],
.route-board .tile.charity,
.route-board .tile[data-type="charity"] {
  --tile-accent: var(--board-tile-goodwill);
  --tile-fill: #103328;
  --tile-fill-low: #061813;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.layoff,
.route-board .tile[data-type="layoff"] {
  --tile-accent: var(--board-tile-risk);
  --tile-fill: #3c171a;
  --tile-fill-low: #1a090b;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.health,
.route-board .tile[data-type="health"] {
  --tile-accent: var(--board-tile-health);
  --tile-fill: #3c1e17;
  --tile-fill-low: #1a0c08;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.sideHustle,
.route-board .tile[data-type="sideHustle"] {
  --tile-accent: var(--board-tile-growth);
  --tile-fill: #102a3b;
  --tile-fill-low: #061421;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.exit,
.route-board .tile[data-type="exit"] {
  --tile-accent: var(--board-tile-exit);
  --tile-fill: #123528;
  --tile-fill-low: #061811;
  --tile-border: var(--tile-accent);
  --tile-glow: var(--tile-accent);
  --tile-glow-line: color-mix(in srgb, var(--tile-accent) 34%, transparent);
}

.route-board .tile.baby,
.route-board .tile[data-type="baby"],
.route-board .tile.charity,
.route-board .tile[data-type="charity"],
.route-board .tile.sideHustle,
.route-board .tile[data-type="sideHustle"],
.route-board .tile.layoff,
.route-board .tile[data-type="layoff"],
.route-board .tile.health,
.route-board .tile[data-type="health"],
.route-board .tile.dream,
.route-board .tile[data-type="dream"],
.route-board .tile.exit,
.route-board .tile[data-type="exit"],
.route-board .tile.impact,
.route-board .tile[data-type="impact"] {
  background-color: var(--tile-fill) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 20%, var(--tile-fill)) 0%, var(--tile-fill) 46%, var(--tile-fill-low) 100%) !important;
  border-color: var(--tile-accent) !important;
}

.route-board .tile.baby .tile-icon,
.route-board .tile[data-type="baby"] .tile-icon,
.route-board .tile.charity .tile-icon,
.route-board .tile[data-type="charity"] .tile-icon,
.route-board .tile.sideHustle .tile-icon,
.route-board .tile[data-type="sideHustle"] .tile-icon,
.route-board .tile.layoff .tile-icon,
.route-board .tile[data-type="layoff"] .tile-icon,
.route-board .tile.health .tile-icon,
.route-board .tile[data-type="health"] .tile-icon,
.route-board .tile.dream .tile-icon,
.route-board .tile[data-type="dream"] .tile-icon,
.route-board .tile.exit .tile-icon,
.route-board .tile[data-type="exit"] .tile-icon,
.route-board .tile.impact .tile-icon,
.route-board .tile[data-type="impact"] .tile-icon {
  border-color: var(--tile-accent) !important;
  color: var(--tile-accent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 16%, #111722), #05070b) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px color-mix(in srgb, var(--tile-accent) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--tile-accent) 42%, transparent) !important;
}

.route-board .tile.baby .board-tile-icon-mask,
.route-board .tile[data-type="baby"] .board-tile-icon-mask,
.route-board .tile.charity .board-tile-icon-mask,
.route-board .tile[data-type="charity"] .board-tile-icon-mask,
.route-board .tile.sideHustle .board-tile-icon-mask,
.route-board .tile[data-type="sideHustle"] .board-tile-icon-mask,
.route-board .tile.layoff .board-tile-icon-mask,
.route-board .tile[data-type="layoff"] .board-tile-icon-mask,
.route-board .tile.health .board-tile-icon-mask,
.route-board .tile[data-type="health"] .board-tile-icon-mask,
.route-board .tile.dream .board-tile-icon-mask,
.route-board .tile[data-type="dream"] .board-tile-icon-mask,
.route-board .tile.exit .board-tile-icon-mask,
.route-board .tile[data-type="exit"] .board-tile-icon-mask,
.route-board .tile.impact .board-tile-icon-mask,
.route-board .tile[data-type="impact"] .board-tile-icon-mask {
  background: var(--tile-accent) !important;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16))
    drop-shadow(0 0 7px color-mix(in srgb, var(--tile-accent) 48%, transparent)) !important;
}

.landing-event-modal[data-type="baby"] .landing-event-icon {
  color: var(--board-tile-family) !important;
  border-color: color-mix(in srgb, var(--board-tile-family) 54%, transparent) !important;
}

.landing-event-modal[data-type="dream"] .landing-event-icon {
  color: var(--board-tile-dream) !important;
  border-color: color-mix(in srgb, var(--board-tile-dream) 54%, transparent) !important;
}

.landing-event-modal[data-type="impact"] .landing-event-icon,
.landing-event-modal[data-type="charity"] .landing-event-icon {
  color: var(--board-tile-goodwill) !important;
  border-color: color-mix(in srgb, var(--board-tile-goodwill) 54%, transparent) !important;
}

.landing-event-modal[data-type="layoff"] .landing-event-icon {
  color: var(--board-tile-risk) !important;
  border-color: color-mix(in srgb, var(--board-tile-risk) 54%, transparent) !important;
}

.landing-event-modal[data-type="health"] .landing-event-icon {
  color: var(--board-tile-health) !important;
  border-color: color-mix(in srgb, var(--board-tile-health) 54%, transparent) !important;
}

.landing-event-modal[data-type="sideHustle"] .landing-event-icon {
  color: var(--board-tile-growth) !important;
  border-color: color-mix(in srgb, var(--board-tile-growth) 54%, transparent) !important;
}

.landing-event-modal[data-type="exit"] .landing-event-icon {
  color: var(--board-tile-exit) !important;
  border-color: color-mix(in srgb, var(--board-tile-exit) 54%, transparent) !important;
}

.landing-event-icon .board-tile-icon-mask {
  background: currentColor !important;
}

.landing-event-modal .landing-income-step .landing-event-icon.income {
  color: var(--income-icon-green) !important;
  border-color: color-mix(in srgb, var(--income-icon-green) 42%, transparent) !important;
  background:
    radial-gradient(circle at 42% 18%, color-mix(in srgb, var(--income-icon-green) 28%, transparent), transparent 4.5rem),
    rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    0 0 0 1px rgba(216, 255, 231, 0.08),
    0 18px 46px color-mix(in srgb, var(--income-icon-green) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.landing-event-modal .landing-income-step .landing-event-icon.income .board-tile-icon-mask {
  background: var(--income-icon-green) !important;
}

/* ==========================================================================
   Board Viewport Fit
   Keep the complete 4:3 board inside the visible screen without scrolling.
   ========================================================================== */

body[data-phase="game"][data-view="board"] {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-phase="game"][data-view="board"] .game-client.app-shell {
  display: grid;
  width: min(1920px, calc(100vw - 8px));
  height: 100dvh;
  min-height: 0;
  grid-template-rows: 44px 36px minmax(0, 1fr);
  gap: 4px;
  padding: 4px 0;
}

body[data-phase="game"][data-view="board"] .app-topbar {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  padding: 3px 6px;
}

body[data-phase="game"][data-view="board"] .top-brand {
  gap: 9px;
}

body[data-phase="game"][data-view="board"] .top-brand h1 {
  font-size: clamp(1.2rem, 1.75vw, 1.62rem);
  line-height: 1;
}

body[data-phase="game"][data-view="board"] .top-brand .eyebrow {
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-phase="game"][data-view="board"] .top-room-card {
  min-height: 0;
  grid-template-columns: auto minmax(112px, auto) auto;
  gap: 6px;
  padding: 2px 3px 2px 8px;
}

body[data-phase="game"][data-view="board"] .top-room-card b {
  font-size: 0.78rem;
}

body[data-phase="game"][data-view="board"] .top-room-card button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.66rem;
}

body[data-phase="game"][data-view="board"] .view-nav {
  position: relative;
  top: auto;
  bottom: auto;
  min-height: 0;
  gap: 3px;
  overflow: hidden;
  padding: 2px;
}

body[data-phase="game"][data-view="board"] .view-nav button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 0.72rem;
}

body[data-phase="game"][data-view="board"] .app-workspace,
body[data-phase="game"][data-view="board"] .app-views,
body[data-phase="game"][data-view="board"] .board-view,
body[data-phase="game"][data-view="board"] .stage-panel,
body[data-phase="game"][data-view="board"] .board-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body[data-phase="game"][data-view="board"] .stage-panel {
  border-radius: 6px;
}

body[data-phase="game"][data-view="board"] .board-wrap {
  display: grid;
  place-items: center;
  padding: 4px;
}

body[data-phase="game"][data-view="board"] .play-board,
body.board-focus[data-phase="game"][data-view="board"] .play-board {
  width: auto;
  height: min(100%, calc(75vw - 12px));
  max-width: calc(100vw - 16px);
  max-height: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

@media (max-width: 700px) {
  body[data-phase="game"][data-view="board"] .game-client.app-shell {
    width: calc(100vw - 6px);
    grid-template-rows: 40px 34px minmax(0, 1fr);
    gap: 3px;
    padding: 3px 0;
  }

  body[data-phase="game"][data-view="board"] .app-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px;
  }

  body[data-phase="game"][data-view="board"] .top-brand {
    align-items: center;
    flex-direction: row;
  }

  body[data-phase="game"][data-view="board"] .top-brand h1 {
    font-size: 1.08rem;
  }

  body[data-phase="game"][data-view="board"] .top-brand .eyebrow,
  body[data-phase="game"][data-view="board"] .top-room-card span {
    display: none;
  }

  body[data-phase="game"][data-view="board"] .top-room-card {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: 3px;
    padding-left: 6px;
  }

  body[data-phase="game"][data-view="board"] .top-room-card b {
    font-size: 0.66rem;
  }

  body[data-phase="game"][data-view="board"] .view-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body[data-phase="game"][data-view="board"] .view-nav button {
    min-width: 0;
    min-height: 28px;
    padding: 0 3px;
    font-size: 0.62rem;
  }

  body[data-phase="game"][data-view="board"] .play-board,
  body.board-focus[data-phase="game"][data-view="board"] .play-board {
    height: min(100%, calc(75vw - 8px));
    max-width: calc(100vw - 10px);
  }
}

/* ==========================================================================
   Icon-only Board Tiles
   Labels move to the existing hover/touch tooltip so every tile can use its
   limited surface area for a clear, memorable symbol.
   ========================================================================== */

.play-board {
  container-type: inline-size;
}

.route-board .tile {
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 2px !important;
  pointer-events: auto !important;
  cursor: help;
}

.route-board .tile-badge {
  display: none !important;
}

.route-board.rat-board .tile.tile-left-col,
.route-board.rat-board .tile.tile-right-col {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 2px !important;
}

.route-board .tile-icon,
.route-board.rat-board .tile-icon,
.route-board.fast-board .tile-icon {
  position: relative !important;
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  margin: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.route-board .tile[data-type] .tile-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.route-board .tile-icon::before {
  display: none !important;
}

.route-board.fast-board .tile-icon {
  width: clamp(18px, 4.5cqw, 46px) !important;
  min-width: clamp(18px, 4.5cqw, 46px) !important;
  height: clamp(18px, 4.5cqw, 46px) !important;
}

.route-board.fast-board .tile-icon .board-tile-icon-mask {
  width: clamp(14px, 3.75cqw, 38px) !important;
  height: clamp(14px, 3.75cqw, 38px) !important;
}

.route-board.fast-board .tile-icon svg {
  width: clamp(14px, 3.75cqw, 38px) !important;
  height: clamp(14px, 3.75cqw, 38px) !important;
}

.route-board.rat-board .tile-icon {
  width: clamp(14px, 3.2cqw, 34px) !important;
  min-width: clamp(14px, 3.2cqw, 34px) !important;
  height: clamp(14px, 3.2cqw, 34px) !important;
}

.route-board.rat-board .tile-icon::before {
  inset: -3px;
}

.route-board.rat-board .tile-icon .board-tile-icon-mask {
  width: clamp(11px, 2.7cqw, 27px) !important;
  height: clamp(11px, 2.7cqw, 27px) !important;
}

.route-board.rat-board .tile.layoff .tile-icon .board-tile-icon-mask,
.route-board.rat-board .tile[data-type="layoff"] .tile-icon .board-tile-icon-mask {
  width: clamp(13.2px, 3.24cqw, 32.4px) !important;
  height: clamp(13.2px, 3.24cqw, 32.4px) !important;
}

.route-board.rat-board .tile-icon svg {
  width: clamp(11px, 2.7cqw, 27px) !important;
  height: clamp(11px, 2.7cqw, 27px) !important;
}

.route-board .tile .tile-icon .board-tile-icon-mask {
  background: var(--tile-accent, var(--tile-border, currentColor)) !important;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 2px color-mix(in srgb, var(--tile-accent, currentColor) 24%, transparent)) !important;
}

.route-board .tile.payday .tile-icon .board-tile-icon-mask,
.route-board .tile[data-type="payday"] .tile-icon .board-tile-icon-mask,
.route-board .tile.incomeDay .tile-icon .board-tile-icon-mask,
.route-board .tile[data-type="incomeDay"] .tile-icon .board-tile-icon-mask {
  background: var(--income-icon-green) !important;
  filter:
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 2px color-mix(in srgb, var(--income-icon-green) 24%, transparent)) !important;
}

.route-board.fast-board .tile.tile-fast-corner .tile-icon {
  transform: translate3d(0, 0, 8px) scale(1.08) !important;
}

.route-board .tile:hover .tile-icon,
.route-board .tile.is-hovered .tile-icon,
.route-board .tile:focus-visible .tile-icon,
.route-board .tile.just-landed .tile-icon,
.route-board .tile.path-preview .tile-icon {
  transform: translate3d(0, 0, 12px) scale(1.16) !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .route-board .tile-icon {
    transition: none !important;
  }
}

/* ==========================================================================
   Inner Board Alignment
   All decorative frames now follow the same geometry as the two live tracks.
   ========================================================================== */

.dynamic-board-container {
  --outer-zone-left: 2.5%;
  --outer-zone-top: 6.2%;
  --outer-zone-width: 95%;
  --outer-zone-height: 75.6%;
  --inner-zone-left: 20.5%;
  --inner-zone-top: 22.5%;
  --inner-zone-width: 59%;
  --inner-zone-height: 43.5%;
}

body[data-phase="game"][data-view="board"] .play-board::after {
  display: none !important;
}

.dynamic-board-container .board-neon-frame.outer-glow {
  left: var(--outer-zone-left) !important;
  top: var(--outer-zone-top) !important;
  width: var(--outer-zone-width) !important;
  height: var(--outer-zone-height) !important;
  border: 1px solid rgba(76, 201, 232, 0.24) !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow:
    0 0 18px rgba(76, 201, 232, 0.08),
    inset 0 0 18px rgba(76, 201, 232, 0.04) !important;
}

.dynamic-board-container .board-neon-frame.mid-glow {
  left: var(--inner-zone-left) !important;
  top: var(--inner-zone-top) !important;
  width: var(--inner-zone-width) !important;
  height: var(--inner-zone-height) !important;
  z-index: 2;
  border: 1.5px solid rgba(82, 211, 125, 0.48) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(82, 211, 125, 0.055), transparent 58%),
    linear-gradient(145deg, rgba(5, 12, 14, 0.22), rgba(5, 8, 12, 0.46)) !important;
  box-shadow:
    0 0 20px rgba(82, 211, 125, 0.1),
    inset 0 0 26px rgba(82, 211, 125, 0.055) !important;
}

.dynamic-board-container .board-neon-frame.inner-glow-outer {
  left: 28.5% !important;
  top: 33.5% !important;
  width: 43% !important;
  height: 22% !important;
  z-index: 3;
  border: 1px solid rgba(243, 191, 85, 0.16) !important;
  border-radius: 26px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dynamic-board-container .board-neon-frame.inner-glow-inner,
.dynamic-board-container .board-neon-frame.inner-glow-inner:hover {
  left: 32% !important;
  top: 36.5% !important;
  width: 36% !important;
  height: 16% !important;
  z-index: 4;
  border: 1.5px solid rgba(243, 191, 85, 0.66) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(243, 191, 85, 0.08), transparent 58%),
    linear-gradient(145deg, rgba(15, 18, 21, 0.94), rgba(6, 9, 13, 0.96)) !important;
  pointer-events: none !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(243, 191, 85, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity 320ms ease, filter 320ms ease !important;
}

/* Dice take the spotlight mid-roll: the center brand rings yield instead of competing */
.dynamic-board-container .board-neon-frame.inner-glow-outer {
  transition: opacity 320ms ease, filter 320ms ease;
}
.dynamic-board-container.dice-rolling .board-neon-frame.inner-glow-inner,
.dynamic-board-container.dice-rolling .board-neon-frame.inner-glow-outer {
  opacity: 0.3;
  filter: blur(1.5px);
}

.dynamic-board-container .center-brand-hud {
  gap: clamp(4px, 0.65cqw, 8px);
  padding: clamp(6px, 0.9cqw, 11px) clamp(9px, 1.3cqw, 16px);
  overflow: hidden;
}

.dynamic-board-container .center-hologram-city,
.dynamic-board-container .inner-telemetry-label,
.dynamic-board-container .hud-dials,
.dynamic-board-container .vector-graphs,
.dynamic-board-container .escape-vectors,
.dynamic-board-container .hud-text,
.dynamic-board-container .brand-subtitle-top {
  display: none !important;
}

.dynamic-board-container .brand-subtitle-top {
  max-width: 100%;
  overflow: hidden;
  color: rgba(243, 191, 85, 0.88);
  font-size: clamp(0.48rem, 1cqw, 0.72rem);
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-board-container .brand-logo-glow {
  width: 100%;
  min-width: 0;
  gap: clamp(6px, 0.85cqw, 10px);
  margin: 0;
}

.dynamic-board-container .brand-logo-icon {
  width: clamp(24px, 3.2cqw, 36px);
  height: clamp(24px, 3.2cqw, 36px);
  flex: 0 0 auto;
  border-radius: 8px;
  font-size: clamp(0.9rem, 1.8cqw, 1.25rem);
  animation: none;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.dynamic-board-container .brand-title {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(1rem, 2.35cqw, 1.6rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .dynamic-board-container .brand-logo-icon {
    display: none;
  }

  .dynamic-board-container .brand-title {
    font-size: clamp(0.72rem, 3.4cqw, 0.95rem);
    letter-spacing: 0.04em;
  }

  .dynamic-board-container .brand-subtitle-top {
    font-size: clamp(0.4rem, 1.8cqw, 0.56rem);
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   Game Command Bar
   A compact, icon-led navigation strip keeps the board visible while making
   the current workspace unmistakable.
   ========================================================================== */

body[data-phase="game"] .app-topbar {
  display: none !important;
}

body[data-phase="game"] .view-nav {
  position: relative;
  top: auto;
  bottom: auto;
  z-index: 15 !important;
  display: flex;
  width: 100%;
  min-height: 45px;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(86, 138, 186, 0.22);
  border-radius: 0;
  padding: 0 22px;
  background:
    linear-gradient(180deg, rgba(5, 10, 17, 0.99), rgba(4, 8, 14, 0.98)),
    #050a11;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(76, 201, 232, 0.04);
}

body[data-phase="game"] .view-nav button {
  position: relative;
  display: inline-flex;
  min-width: 132px;
  min-height: 45px;
  flex: 0 1 172px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  color: rgba(224, 223, 218, 0.74);
  background: transparent;
  box-shadow: none;
  font-size: 0.94rem;
  font-weight: 760;
  letter-spacing: 0;
  transform: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

body[data-phase="game"] .view-nav button[hidden] {
  display: none !important;
}

body[data-phase="game"] .view-nav button:not(:last-child)::after {
  position: absolute;
  top: 17px;
  right: 0;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(151, 164, 180, 0.2), transparent);
  content: "";
}

body[data-phase="game"] .view-nav button:hover:not(:disabled) {
  color: #f4df9d;
  background: rgba(243, 191, 85, 0.035);
  box-shadow: none;
  transform: none;
}

body[data-phase="game"] .view-nav button.active {
  border: 1px solid rgba(243, 191, 85, 0.2);
  border-bottom-color: transparent;
  border-radius: 8px 8px 0 0;
  color: #f5c957;
  background:
    radial-gradient(circle at 50% 110%, rgba(243, 191, 85, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(20, 20, 18, 0.9), rgba(10, 12, 15, 0.72));
  box-shadow:
    inset 0 -3px 0 #f3bf55,
    inset 0 0 24px rgba(243, 191, 85, 0.035),
    0 8px 20px rgba(243, 191, 85, 0.08);
}

body[data-phase="game"] .view-nav button.active::before {
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 5px;
  border-radius: 999px;
  background: rgba(243, 191, 85, 0.42);
  filter: blur(5px);
  content: "";
}

body[data-phase="game"] .view-nav button:focus-visible {
  outline: 2px solid rgba(76, 201, 232, 0.9);
  outline-offset: -4px;
}

.view-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-phase="game"][data-view="board"] .game-client.app-shell {
  grid-template-rows: 60px minmax(0, 1fr);
  gap: 4px;
}

body[data-phase="game"][data-view="board"] .view-nav {
  min-height: 60px;
  gap: 0;
  overflow: hidden;
  padding: 0 22px;
}

body[data-phase="game"][data-view="board"] .view-nav button {
  min-height: 60px;
  padding: 0 22px;
  font-size: 0.94rem;
}

@media (max-width: 700px) {
  body[data-phase="game"][data-view="board"] .game-client.app-shell {
    grid-template-rows: 50px minmax(0, 1fr);
    gap: 3px;
  }

  body[data-phase="game"] .view-nav,
  body[data-phase="game"][data-view="board"] .view-nav {
    min-height: 50px;
    padding: 0 2px;
  }

  body[data-phase="game"] .view-nav button,
  body[data-phase="game"][data-view="board"] .view-nav button {
    min-width: 0;
    min-height: 50px;
    flex: 1 1 20%;
    gap: 5px;
    padding: 0 4px;
    font-size: 0.64rem;
  }

  body[data-phase="game"] .view-nav button:not(:last-child)::after {
    top: 14px;
    height: 22px;
  }

  .view-nav-icon {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
    stroke-width: 1.9;
  }
}

@media (max-width: 420px) {
  body[data-phase="game"] .view-nav button,
  body[data-phase="game"][data-view="board"] .view-nav button {
    gap: 0;
    padding: 0 8px;
  }

  body[data-phase="game"] .view-nav button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .view-nav-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

/* ==========================================================================
   Left Game Control Rail
   Persistent on desktop, collapsible below 1100px so it never covers or
   forces the 4:3 board outside the visible play area.
   ========================================================================== */

:root {
  --game-command-rail-width: clamp(224px, 19vw, 272px);
}

.game-command-rail,
.game-command-rail-toggle {
  display: none;
}

body[data-phase="game"][data-view="board"] .app-workspace {
  display: grid;
  grid-template-columns: var(--game-command-rail-width) minmax(0, 1fr) !important;
  gap: 6px;
  min-height: 0;
}

body[data-phase="game"][data-view="board"] .game-command-rail {
  position: relative;
  z-index: 11;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1.05fr) minmax(0, 0.95fr);
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.26);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(5, 11, 18, 0.985), rgba(4, 9, 15, 0.99)),
    #050a10;
  box-shadow:
    -12px 0 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.command-rail-topline {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(151, 164, 180, 0.12);
  padding: 0 13px;
  color: rgba(243, 191, 85, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.command-rail-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5bed8d;
  box-shadow: 0 0 9px rgba(91, 237, 141, 0.8);
}

.command-rail-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.command-rail-top-actions button {
  display: none;
  width: 26px;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(243, 191, 85, 0.24);
  border-radius: 8px;
  padding: 0;
  color: rgba(255, 238, 196, 0.88);
  background: rgba(243, 191, 85, 0.08);
  box-shadow: none;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.command-rail-dynamic {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Chat lives in the bottom slot of the rail: header + scrolling message log +
   a persistent input row. */
.command-chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border-top: 1px solid rgba(151, 164, 180, 0.16);
  background: rgba(94, 98, 104, 0.36);
}

.command-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px 6px;
  color: rgba(243, 191, 85, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 12px 8px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-msg.mine {
  background: rgba(76, 201, 232, 0.12);
  border-color: rgba(76, 201, 232, 0.22);
}

.chat-msg-name {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(217, 216, 210, 0.72);
}

.chat-msg-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.chat-empty {
  margin: auto 0;
  padding: 10px 4px;
  text-align: center;
  color: rgba(217, 216, 210, 0.4);
  font-size: 0.72rem;
}

.command-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(151, 164, 180, 0.1);
}

.command-chat-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 11, 18, 0.85);
  color: var(--ink);
  font-size: 0.78rem;
}

.command-chat-form input:focus {
  outline: none;
  border-color: rgba(76, 201, 232, 0.55);
  box-shadow: 0 0 0 2px rgba(76, 201, 232, 0.18);
}

.command-chat-form button {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #5bd9e8, #34a8c4);
  color: #062028;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.command-chat-form button:hover {
  filter: brightness(1.06);
}

.command-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 2px 8px;
  align-items: center;
  border-bottom: 1px solid rgba(151, 164, 180, 0.12);
  padding: 10px 12px;
}

.command-room > div {
  min-width: 0;
}

.command-room span,
.command-room small,
.command-section-title,
.command-history-head span {
  color: rgba(217, 216, 210, 0.58);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
}

.command-room strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #f1eee5;
  font-size: 0.86rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-room small {
  grid-column: 1 / -1;
}

.command-room small b {
  margin-left: 4px;
  color: #f3bf55;
}

.command-room > button {
  display: grid;
  width: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(151, 164, 180, 0.16);
  padding: 0;
  color: rgba(235, 233, 225, 0.7);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.command-room > button:hover:not(:disabled) {
  color: #f3bf55;
  background: rgba(243, 191, 85, 0.08);
  box-shadow: none;
}

.command-room svg,
.command-primary svg,
.command-shortcuts svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.command-turn {
  border-bottom: 1px solid rgba(151, 164, 180, 0.12);
  padding: 9px 11px 11px;
}

.command-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: rgba(217, 216, 210, 0.58);
  font-size: 0.67rem;
  font-weight: 780;
}

.command-section-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(151, 164, 180, 0.42);
}

.command-turn.is-you .command-section-label i {
  background: #5bed8d;
  box-shadow: 0 0 8px rgba(91, 237, 141, 0.72);
}

.command-turn-player {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(91, 237, 141, 0.2);
  border-radius: 7px;
  padding: 7px;
  background: rgba(91, 237, 141, 0.035);
}

.command-turn.is-you .command-turn-player {
  border-color: rgba(91, 237, 141, 0.46);
  box-shadow:
    inset 3px 0 0 rgba(91, 237, 141, 0.72),
    0 0 18px rgba(91, 237, 141, 0.045);
}

.command-turn-player .avatar-portrait.mini,
.command-turn-player .avatar-portrait.mini[data-career] {
  width: 42px;
  height: 42px;
}

.command-turn-player > div {
  min-width: 0;
}

.command-turn-player strong,
.command-turn-player small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-turn-player strong {
  color: #f0eee6;
  font-size: 0.77rem;
}

.command-turn.is-you .command-turn-player strong {
  color: #69ee98;
}

.command-turn-player small {
  margin-top: 2px;
  color: rgba(224, 223, 218, 0.58);
  font-size: 0.64rem;
}

.command-turn-player > span {
  border: 1px solid rgba(243, 191, 85, 0.36);
  border-radius: 6px;
  padding: 4px 6px;
  color: #f3bf55;
  background: rgba(243, 191, 85, 0.06);
  font-size: 0.61rem;
  font-weight: 850;
  white-space: nowrap;
}

.command-primary {
  border-bottom: 1px solid rgba(151, 164, 180, 0.12);
  padding: 10px 11px 11px;
}

.command-section-title {
  display: block;
  margin-bottom: 7px;
}

.command-dice-hint {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.3;
}

.command-dice-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.command-dice-choice button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  border: 1px solid rgba(76, 201, 232, 0.82);
  border-radius: 7px;
  padding: 8px 6px;
  color: #7de6ff;
  background:
    linear-gradient(135deg, rgba(31, 116, 154, 0.18), rgba(6, 19, 29, 0.9)),
    #07111a;
  box-shadow:
    0 0 16px rgba(76, 201, 232, 0.15),
    inset 0 0 15px rgba(76, 201, 232, 0.055);
  cursor: pointer;
}

.command-dice-choice button:hover {
  border-color: #7de6ff;
}

.command-dice-choice button svg {
  width: 18px;
  height: 18px;
}

.command-dice-choice button b {
  font-size: 0.74rem;
}

.command-primary > button {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  border: 1px solid rgba(76, 201, 232, 0.82);
  border-radius: 7px;
  padding: 6px 12px;
  color: #7de6ff;
  background:
    linear-gradient(135deg, rgba(31, 116, 154, 0.18), rgba(6, 19, 29, 0.9)),
    #07111a;
  box-shadow:
    0 0 16px rgba(76, 201, 232, 0.15),
    inset 0 0 15px rgba(76, 201, 232, 0.055);
  text-align: left;
}

.command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::before,
.command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::after {
  position: absolute;
  border-radius: 9px;
  content: "";
  pointer-events: none;
}

.command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::before {
  inset: -2px;
  z-index: 2;
  border: 2px solid rgba(125, 230, 255, 0.94);
  box-shadow:
    0 0 7px rgba(76, 201, 232, 0.82),
    0 0 16px rgba(76, 201, 232, 0.48),
    inset 0 0 8px rgba(125, 230, 255, 0.16);
  opacity: 0.34;
  animation: command-roll-frame-flash 3.2s ease-in-out infinite;
}

.command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::after {
  inset: -6px;
  z-index: -1;
  border: 1px solid rgba(125, 230, 255, 0.52);
  box-shadow:
    0 0 14px rgba(76, 201, 232, 0.48),
    0 0 28px rgba(76, 201, 232, 0.24);
  opacity: 0.12;
  animation: command-roll-frame-halo 3.2s ease-in-out 240ms infinite;
}

@keyframes command-roll-frame-flash {
  0%, 100% { opacity: 0.3; }
  48% { opacity: 1; }
  62% { opacity: 0.72; }
}

@keyframes command-roll-frame-halo {
  0%, 100% { opacity: 0.08; }
  48% { opacity: 0.66; }
  66% { opacity: 0.28; }
}

.command-primary > button:hover:not(:disabled) {
  background:
    linear-gradient(135deg, rgba(31, 116, 154, 0.28), rgba(6, 19, 29, 0.94)),
    #07111a;
  box-shadow:
    0 0 22px rgba(76, 201, 232, 0.24),
    inset 0 0 18px rgba(76, 201, 232, 0.08);
}

.command-primary > button:disabled {
  border-color: rgba(151, 164, 180, 0.18);
  color: rgba(217, 216, 210, 0.42);
  background: rgba(255, 255, 255, 0.025);
  opacity: 1;
}

.command-primary > button svg {
  width: 28px;
  height: 28px;
  grid-row: 1 / 3;
}

.command-primary > button b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-primary > button small {
  min-width: 0;
  overflow: hidden;
  color: rgba(225, 234, 235, 0.6);
  font-size: 0.62rem;
  font-weight: 620;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::before,
  .command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::after {
    animation: none;
  }

  .command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::before {
    opacity: 0.58;
  }

  .command-turn.is-you + .command-primary > button[data-command-rail-action="roll"]::after {
    opacity: 0.2;
  }
}

.command-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.command-shortcuts button {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(243, 191, 85, 0.18);
  padding: 0 5px;
  color: rgba(236, 232, 219, 0.74);
  background: rgba(243, 191, 85, 0.03);
  box-shadow: none;
  font-size: 0.61rem;
}

.command-shortcuts button:hover:not(:disabled) {
  color: #f3bf55;
  background: rgba(243, 191, 85, 0.07);
  box-shadow: none;
}

.command-shortcuts svg {
  width: 16px;
  height: 16px;
}

.command-history {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 10px 11px 8px;
}

.command-history-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.command-history-head button {
  min-height: 26px;
  border: 0;
  padding: 0 2px;
  color: rgba(243, 191, 85, 0.72);
  background: transparent;
  box-shadow: none;
  font-size: 0.61rem;
}

.command-history ol {
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
}

.command-history li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 43px;
  border-bottom: 1px solid rgba(151, 164, 180, 0.095);
  padding: 6px 1px;
}

.command-history li > i {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 30%, transparent);
}

.command-history li.good { color: #5bed8d; }
.command-history li.bad { color: #f17777; }
.command-history li.info { color: #62d8f5; }
.command-history li.neutral { color: #d4ae59; }

.command-history li > div {
  min-width: 0;
}

.command-history li strong,
.command-history li small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-history li strong {
  color: rgba(242, 239, 229, 0.82);
  font-size: 0.67rem;
}

.command-history li small {
  margin-top: 1px;
  color: rgba(217, 216, 210, 0.48);
  font-size: 0.58rem;
}

.command-history li > span {
  color: rgba(217, 216, 210, 0.34);
  font-size: 0.54rem;
}

body[data-phase="game"][data-view="board"] .play-board,
body.board-focus[data-phase="game"][data-view="board"] .play-board {
  height: min(100%, calc((100vw - var(--game-command-rail-width) - 24px) * 0.75));
  max-width: calc(100vw - var(--game-command-rail-width) - 24px);
}

@media (min-width: 1101px) {
  body[data-phase="game"][data-view="board"] .turn-focus-chip {
    display: none !important;
  }

  body[data-phase="game"][data-view="board"] .side-panel-toggle {
    left: calc(var(--game-command-rail-width) + 10px) !important;
  }

  body[data-phase="game"][data-view="board"] .turn-action-modal[data-minimized="true"][data-mode="roll"] {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  body[data-phase="game"][data-view="board"] .app-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
  }

  body[data-phase="game"][data-view="board"] .game-command-rail {
    position: fixed;
    top: 64px;
    bottom: 6px;
    left: 5px;
    z-index: 125;
    width: min(306px, calc(100vw - 58px));
    height: auto;
    transform: translate3d(calc(-100% - 12px), 0, 0);
    transition: transform 220ms var(--enter);
  }

  body.command-rail-open[data-phase="game"][data-view="board"] .game-command-rail {
    transform: translate3d(0, 0, 0);
  }

  body[data-phase="game"][data-view="board"] .game-command-rail-toggle:not([hidden]) {
    position: fixed;
    top: 70px;
    left: 4px;
    z-index: 126;
    display: inline-flex;
    width: 48px;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    border: 1px solid rgba(243, 191, 85, 0.42);
    border-radius: 0 8px 8px 0;
    padding: 0;
    color: #f3bf55;
    background: rgba(5, 10, 17, 0.97);
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.36);
  }

  body.command-rail-open[data-phase="game"][data-view="board"] .game-command-rail-toggle {
    left: min(311px, calc(100vw - 53px));
  }

  body.side-panel-open[data-phase="game"][data-view="board"] .game-command-rail-toggle,
  body.command-rail-open[data-phase="game"][data-view="board"] .side-panel-toggle {
    opacity: 0;
    pointer-events: none !important;
  }

  .game-command-rail-toggle span {
    font-size: 1.1rem;
  }

  .game-command-rail-toggle b {
    font-size: 0.64rem;
  }

  body[data-phase="game"][data-view="board"] .play-board,
  body.board-focus[data-phase="game"][data-view="board"] .play-board {
    height: min(100%, calc(75vw - 12px));
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 700px) {
  body[data-phase="game"][data-view="board"] .game-command-rail {
    top: 54px;
    bottom: 4px;
  }

  body[data-phase="game"][data-view="board"] .game-command-rail-toggle:not([hidden]) {
    top: 58px;
  }

  body[data-phase="game"][data-view="board"] .play-board,
  body.board-focus[data-phase="game"][data-view="board"] .play-board {
    height: min(100%, calc(75vw - 8px));
    max-width: calc(100vw - 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-phase="game"][data-view="board"] .game-command-rail {
    transition: none;
  }
}

/* ==========================================================================
   Dream Selection Reading Flow
   Browse the dream on the left; review price, reward, and action on the right.
   ========================================================================== */

.dream-picker-panel {
  width: min(952px, calc(100vw - 80px));
  height: min(646px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 16px;
}

.dream-explorer-pane {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  text-align: left;
}

.dream-explorer-heading {
  min-width: 0;
}

.dream-explorer-heading .eyebrow {
  margin-bottom: 8px;
}

.dream-explorer-heading h2 {
  margin-bottom: 8px;
  font-size: 2.05rem;
  line-height: 1.05;
}

.dream-explorer-heading .muted {
  max-width: 39rem;
  font-size: 1rem;
  line-height: 1.5;
}

.dream-description-block {
  display: flex;
  min-height: 0;
  justify-content: center;
  flex-direction: column;
  border-top: 1px solid rgba(141, 124, 255, 0.16);
  border-bottom: 1px solid rgba(141, 124, 255, 0.16);
  padding: 18px 2px;
}

.dream-description-block > span,
.dream-commit-heading span {
  color: #9f90ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.dream-description-block h3 {
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.14;
  overflow-wrap: anywhere;
}

.dream-description-block p {
  max-height: 9rem;
  margin: 0;
  overflow: auto;
  color: rgba(247, 240, 223, 0.74);
  font-size: 0.94rem;
  line-height: 1.55;
}

.dream-explorer-pane .dream-nav-row {
  align-self: end;
}

.dream-explorer-pane .dream-nav-button {
  min-height: 42px;
  border-color: rgba(255, 224, 150, 0.18);
  background: rgba(255, 224, 150, 0.05);
  box-shadow: none;
  color: rgba(247, 240, 223, 0.86);
}

.dream-commit-pane {
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  justify-items: stretch;
  gap: 14px;
  padding: 14px;
  text-align: left;
}

.dream-commit-pane > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.dream-commit-pane .dream-feature-icon {
  justify-self: center;
}

.dream-hero-frame {
  position: relative;
  width: 100%;
  height: clamp(155px, 27vh, 238px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 224, 150, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 224, 150, 0.18), transparent 55%),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dream-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.28)),
    radial-gradient(circle at 50% 8%, rgba(255, 224, 150, 0.16), transparent 45%);
}

.dream-hero-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.dream-hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dream-hero-frame-large {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

.dream-hero-frame-large img {
  object-fit: cover;
  object-position: center;
}

.dream-commit-description {
  align-self: stretch;
  justify-content: center;
  padding: 30px 78px 12px 2px;
}

.dream-commit-description h3 {
  width: 100%;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 2.3rem;
  line-height: 1.02;
}

.dream-commit-description h3.dream-title-singleline {
  white-space: nowrap;
}

.dream-commit-description p {
  display: block;
  max-height: 6.3rem;
  overflow: auto;
  color: rgba(247, 240, 223, 0.78);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-line-clamp: unset;
}

.dream-commit-heading {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.dream-commit-heading strong {
  color: var(--ink);
  font-size: 1.32rem;
  line-height: 1.15;
}

.dream-commit-pane .dream-cost-tile {
  box-sizing: border-box;
  align-self: stretch;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(141, 124, 255, 0.24);
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(141, 124, 255, 0.18), rgba(76, 201, 232, 0.08)),
    rgba(0, 0, 0, 0.26);
}

.dream-commit-pane .dream-cost-tile span {
  font-size: 0.74rem;
  line-height: 1.2;
}

.dream-commit-pane .dream-cost-tile strong {
  margin-top: 3px;
  max-width: 100%;
  color: #fff7df;
  font-size: 1.62rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.dream-cost-detail {
  display: block;
  color: rgba(247, 240, 223, 0.62);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.28;
  text-align: center;
}

.dream-main-total-card {
  display: grid;
  box-sizing: border-box;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  border: 1px solid rgba(141, 124, 255, 0.22);
  border-radius: 8px;
  background: rgba(141, 124, 255, 0.08);
  text-align: center;
}

.dream-main-total-card > span {
  color: #b8a7ff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.dream-main-total-card > strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.38;
}

.dream-note-card {
  display: grid;
  box-sizing: border-box;
  gap: 10px;
  align-self: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 13px 15px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(247, 240, 223, 0.7);
}

.dream-note-card > span {
  color: #ffe096;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.dream-note-card ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1rem;
}

.dream-note-card li {
  padding-left: 2px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.dream-sticky-action {
  align-self: start;
  padding-top: 2px;
}

.dream-commit-pane .dream-confirm-button {
  align-self: stretch;
}

@media (max-height: 720px) and (min-width: 761px) {
  .dream-explorer-pane,
  .dream-commit-pane {
    gap: 9px;
  }

  .dream-description-block {
    padding: 10px 2px;
  }

  .dream-description-block h3 {
    margin: 5px 0 7px;
    font-size: 1.42rem;
  }

  .dream-description-block p {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .dream-note-card li {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .dream-hero-frame {
    height: clamp(122px, 22vh, 166px);
  }

  .dream-hero-frame-large {
    height: 100%;
  }

  .dream-commit-description {
    padding: 10px 2px;
  }

  .dream-commit-description h3 {
    font-size: 1.56rem;
    line-height: 1.08;
  }

  .dream-commit-description p {
    max-height: 5.7rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 760px) {
  #dreamSelectionModal {
    align-items: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #dreamSelectionModal .dream-picker-panel {
    max-height: none;
    overflow: visible;
  }

  .dream-picker-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .dream-explorer-pane {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .dream-description-block {
    padding: 12px 2px;
  }

  .dream-description-block h3 {
    font-size: 1.42rem;
    line-height: 1.12;
  }

  .dream-description-block p {
    max-height: none;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .dream-commit-pane {
    gap: 12px;
    min-height: 260px;
  }

  .dream-hero-frame {
    height: clamp(150px, 46vw, 230px);
  }

  .dream-hero-frame-large {
    height: clamp(260px, 78vw, 520px);
  }

  .dream-commit-description {
    padding: 30px 54px 12px 2px;
  }

  .dream-commit-description p {
    max-height: none;
    font-size: 0.94rem;
  }

  .dream-commit-description h3 {
    font-size: 1.52rem;
  }

  .dream-commit-description h3.dream-title-singleline {
    white-space: normal;
  }

  .dream-commit-pane .dream-cost-tile strong {
    font-size: 1.42rem;
  }

  .dream-main-total-card > strong {
    font-size: 1rem;
  }

  .dream-note-card li {
    font-size: 0.8rem;
  }
}

@media (max-width: 560px) {
  .dream-explorer-pane .dream-nav-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dream-explorer-pane .dream-nav-button {
    min-width: 0;
    padding: 0 8px;
    font-size: 0.76rem;
  }
}

/* Short viewport (landscape phones): the two-pane dream card is taller than the
   screen, and the single-column stack only fires under max-width:760 — which a
   landscape phone (wide) never hits. Without this the panel's own overflow:hidden
   clips the confirm/navigation buttons off-screen with no way to scroll to them.
   Let the modal itself scroll instead (mirrors .endgame-summary-modal) and shrink
   the hero image so most of the card fits before any scrolling is needed. */
@media (max-height: 600px) {
  #dreamSelectionModal {
    align-items: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #dreamSelectionModal .dream-picker-panel {
    max-height: none;
    overflow: visible;
  }

  /* On short (landscape phone) screens the hero uses the 16:9 landscape artwork
     (swapped in via <picture> in showDreamSelection). Match the frame to 16:9 and
     fill the full column width so the image covers edge-to-edge with no side gaps. */
  #dreamSelectionModal .dream-hero-frame-large {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    min-height: 0;
    align-self: stretch;
    justify-self: stretch;
  }

  #dreamSelectionModal .dream-hero-frame-large img {
    object-fit: cover;
  }
}

/* Freedom HUD */
.freedom-hud {
  position: absolute;
  right: 16px;
  top: 70px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(145deg, rgba(12, 18, 28, 0.75), rgba(4, 8, 14, 0.95));
  border: 1px solid rgba(76, 201, 232, 0.3);
  border-top: 1px solid rgba(76, 201, 232, 0.6);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 10px rgba(76, 201, 232, 0.15),
    0 0 15px rgba(76, 201, 232, 0.2);
  backdrop-filter: blur(16px);
  min-width: 200px;
  max-width: 260px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

body[data-phase="game"][data-view="board"] .freedom-hud {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.freedom-hud-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(243, 191, 85, 0.3);
  padding-bottom: 8px;
}
.freedom-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.freedom-player-card {
  background: rgba(20, 25, 35, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.freedom-player-card:hover {
  border-color: rgba(76, 201, 232, 0.4);
  transform: translateY(-2px);
}
.freedom-player-card.is-me {
  background: rgba(20, 45, 30, 0.6);
  border-color: rgba(106, 255, 162, 0.4);
}

.freedom-player-card.is-surrendered {
  border-color: rgba(238, 98, 98, 0.38);
  opacity: 0.82;
}

.freedom-player-card.is-surrendered .freedom-card-main {
  padding-right: 30px;
}

.freedom-player-card.has-hud-cutout {
  border-color: rgba(76, 201, 232, 0.44);
  background:
    radial-gradient(circle at 32% 38%, rgba(76, 201, 232, 0.18), transparent 25%),
    radial-gradient(circle at 40% 22%, rgba(243, 191, 85, 0.06), transparent 20%),
    linear-gradient(145deg, rgba(9, 18, 26, 0.96), rgba(4, 9, 15, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -28px 54px rgba(0, 0, 0, 0.34);
}

.freedom-player-card.has-hud-cutout.is-me {
  border-color: rgba(76, 201, 232, 0.58);
  background:
    radial-gradient(circle at 32% 38%, rgba(76, 201, 232, 0.2), transparent 25%),
    radial-gradient(circle at 40% 22%, rgba(243, 191, 85, 0.07), transparent 20%),
    linear-gradient(145deg, rgba(9, 18, 26, 0.97), rgba(4, 9, 15, 0.98));
}

.freedom-player-card.is-freedom-path {
  padding-top: 24px;
  border-color: rgba(243, 191, 85, 0.62);
  background:
    radial-gradient(circle at 42% 34%, rgba(243, 191, 85, 0.16), transparent 30%),
    linear-gradient(160deg, rgba(30, 24, 15, 0.84), rgba(13, 18, 27, 0.78));
  box-shadow:
    0 0 0 1px rgba(243, 191, 85, 0.12),
    0 0 22px rgba(243, 191, 85, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.freedom-player-card.is-freedom-path::after {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 241, 168, 0.92), rgba(243, 191, 85, 0.9), transparent);
  box-shadow: 0 0 12px rgba(243, 191, 85, 0.7);
}

.freedom-player-card.is-freedom-path.is-active-turn {
  border-color: rgba(76, 201, 232, 0.82);
  background:
    radial-gradient(circle at 12% 25%, rgba(76, 201, 232, 0.16), transparent 30%),
    radial-gradient(circle at 42% 34%, rgba(243, 191, 85, 0.18), transparent 30%),
    linear-gradient(160deg, rgba(20, 32, 28, 0.9), rgba(13, 18, 27, 0.8));
}

/* Active turn: slow blue pulsing glow (shown for whoever's turn it is), boosted ~200% */
@keyframes freedom-turn-glow {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(76, 201, 232, 0.7),
                0 0 24px rgba(76, 201, 232, 0.6),
                0 0 10px rgba(76, 201, 232, 0.45);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(76, 201, 232, 1),
                0 0 52px rgba(76, 201, 232, 0.95),
                0 0 22px rgba(76, 201, 232, 0.8);
  }
}
.freedom-player-card.is-active-turn {
  border-color: rgba(76, 201, 232, 0.8);
  animation: freedom-turn-glow 2.4s ease-in-out infinite;
}
.freedom-player-card.is-me.is-active-turn {
  border-color: rgba(76, 201, 232, 0.8);
}

@keyframes freedom-freedom-path-turn-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px rgba(243, 191, 85, 0.66),
      0 0 24px rgba(243, 191, 85, 0.5),
      0 0 10px rgba(255, 241, 168, 0.36);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 241, 168, 0.95),
      0 0 48px rgba(243, 191, 85, 0.82),
      0 0 20px rgba(255, 241, 168, 0.58);
  }
}

.freedom-player-card.is-freedom-path.has-hud-cutout,
.freedom-player-card.is-freedom-path.has-hud-cutout.is-me,
.freedom-player-card.is-freedom-path.is-active-turn,
.freedom-player-card.is-freedom-path.is-me.is-active-turn {
  border-color: rgba(243, 191, 85, 0.72);
  background:
    radial-gradient(circle at 42% 34%, rgba(243, 191, 85, 0.18), transparent 30%),
    radial-gradient(circle at 18% 24%, rgba(255, 241, 168, 0.08), transparent 22%),
    linear-gradient(160deg, rgba(30, 24, 15, 0.88), rgba(13, 18, 27, 0.8));
}

.freedom-player-card.is-freedom-path.is-active-turn,
.freedom-player-card.is-freedom-path.is-me.is-active-turn {
  animation: freedom-freedom-path-turn-glow 2.4s ease-in-out infinite;
}

@keyframes freedom-turn-corner-pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(106, 255, 162, 0.82));
  }
  50% {
    opacity: 0.42;
    filter: drop-shadow(0 0 3px rgba(106, 255, 162, 0.42));
  }
}

.freedom-turn-corner {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 4;
  width: 0;
  height: 0;
  border-top: 26px solid var(--green);
  border-right: 26px solid transparent;
  pointer-events: none;
  animation: freedom-turn-corner-pulse 1.08s ease-in-out infinite;
}

.freedom-turn-corner::after {
  position: absolute;
  top: -24px;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  content: "";
  background: #effff4;
  box-shadow: 0 0 7px rgba(239, 255, 244, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .freedom-turn-corner {
    animation: none;
  }
}

.freedom-track-badge {
  position: absolute;
  top: 6px;
  right: 7px;
  z-index: 2;
  border-radius: 999px;
  padding: 3px 7px;
  color: #241402;
  background: linear-gradient(135deg, #fff1a8, var(--gold));
  box-shadow: 0 0 12px rgba(243, 191, 85, 0.62);
  font-size: 0.48rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.freedom-track-badge::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  content: "";
  vertical-align: 1px;
  background: #fff8cc;
  box-shadow: 0 0 7px #fff8cc;
}

.freedom-card-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-right: 8px;
}

.freedom-rank {
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.freedom-rank.rank-1 { background: var(--gold); color: #000; box-shadow: 0 0 10px rgba(243, 191, 85, 0.8); }
.freedom-rank.rank-2 { background: #b0c4de; color: #000; box-shadow: 0 0 10px rgba(176, 196, 222, 0.6); }
.freedom-rank.rank-3 { background: #cd7f32; color: #fff; box-shadow: 0 0 10px rgba(205, 127, 50, 0.6); }

.freedom-player-card.is-freedom-path .freedom-rank {
  border: 1px solid rgba(255, 255, 255, 0.52);
  color: #110b02;
  background:
    radial-gradient(circle at 35% 28%, #fff6c8 0 18%, transparent 19%),
    linear-gradient(145deg, #fff0a8, var(--gold) 50%, #b87821);
  box-shadow:
    0 0 0 3px rgba(243, 191, 85, 0.12),
    0 0 14px rgba(243, 191, 85, 0.82);
}

.freedom-player-card.is-freedom-path .avatar-portrait.mini[data-career]::before {
  border-color: rgba(243, 191, 85, 0.72);
  background:
    radial-gradient(circle at 42% 30%, rgba(243, 191, 85, 0.2), transparent 42%),
    linear-gradient(145deg, #245f35, #10301f);
  box-shadow:
    0 0 0 3px rgba(39, 23, 8, 0.62),
    0 0 16px rgba(243, 191, 85, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.freedom-card-avatar.avatar-portrait.mini[data-career-image="hud"] {
  width: 76px;
  height: 74px;
  flex: 0 0 76px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.freedom-card-avatar.avatar-portrait[data-career-image="hud"]::before {
  display: block;
  inset: auto;
  top: 11%;
  left: 50%;
  z-index: 0;
  width: 76%;
  height: 78%;
  border: 1px solid rgba(76, 201, 232, 0.38);
  border-radius: 50%;
  opacity: 1;
  background:
    radial-gradient(circle at 42% 30%, rgba(255, 255, 255, 0.2), transparent 24%),
    radial-gradient(circle, rgba(76, 201, 232, 0.24), rgba(106, 255, 162, 0.13) 48%, rgba(5, 10, 16, 0.1) 70%, transparent 72%);
  box-shadow:
    0 0 0 3px rgba(7, 24, 29, 0.65),
    0 0 20px rgba(76, 201, 232, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateX(-50%);
}

.freedom-card-avatar.avatar-portrait[data-career-image="hud"]::after {
  display: block;
  inset: auto 14% -1%;
  z-index: 1;
  height: 13%;
  border-radius: 50%;
  content: "";
  opacity: 0.32;
  background: rgba(0, 0, 0, 0.9);
  filter: blur(5px);
  transform: scaleX(0.92);
}

.freedom-card-avatar.avatar-portrait[data-career-image="hud"] .avatar-image {
  inset: -4px -5px -2px;
  z-index: 2;
  border-radius: 0;
  background-position: center bottom;
  background-size: contain;
  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 -1px 5px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 7px rgba(76, 201, 232, 0.24))
    saturate(1.08)
    contrast(1.04);
}

.freedom-player-card.is-freedom-path .freedom-card-avatar.avatar-portrait.mini[data-career-image="hud"] .avatar-image {
  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 12px rgba(243, 191, 85, 0.28))
    saturate(1.08)
    contrast(1.04);
}

.freedom-card-info {
  flex: 1;
  min-width: 0;
}

.freedom-card-name-row {
  display: block;
  min-width: 0;
}

.freedom-card-name {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.freedom-card-name small {
  color: var(--green);
  font-weight: 800;
  font-size: 0.64rem;
}

.freedom-card-profession {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  color: rgba(243, 191, 85, 0.78);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.freedom-card-passive-stack {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-top: 5px;
}

.freedom-card-passive-stack span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freedom-card-passive-stack strong {
  min-width: 0;
  overflow: hidden;
  color: var(--cyan);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freedom-card-passive-stack small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 241, 168, 0.72);
  font-size: 0.52rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.freedom-player-card.is-freedom-path .freedom-card-passive-stack strong {
  color: #fff1a8;
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(243, 191, 85, 0.22);
}

.freedom-life-dimension-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: -2px;
}

.freedom-life-dimension-meter {
  --life-color: var(--gold);
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 36px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 5px;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--life-color) 22%, transparent), transparent 2.8rem),
    rgba(0, 0, 0, 0.26);
  cursor: help;
}

.freedom-life-dimension-icon {
  width: 24px;
  height: 24px;
  overflow: visible;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.42));
}

.freedom-life-icon-base {
  fill: rgba(122, 128, 137, 0.74);
}

.freedom-life-icon-fill {
  fill: var(--life-color);
  clip-path: inset(calc(100% - var(--life-pct, 0%)) 0 0 0);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--life-color) 70%, transparent));
}

.freedom-life-icon-stroke {
  fill: none;
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.freedom-life-dimension-percent {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 9px rgba(0, 0, 0, 0.7);
}

.life-dim-family { --life-color: #ffe79b; }
.life-dim-health { --life-color: #ff5f70; }
.life-dim-happiness { --life-color: #f3bf55; }
.life-dim-selfWorth { --life-color: #9b86ff; }
.life-dim-society { --life-color: #2ed9f3; }
.life-dim-financialFreedom { --life-color: #89a7ff; }

.freedom-progress-row {
  display: grid;
  min-width: 0;
}

.freedom-fast-target-label {
  margin: -4px 0 5px;
  overflow: hidden;
  color: rgba(255, 241, 168, 0.78);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.freedom-progress-track {
  position: relative;
  flex: 1;
  width: 100%;
  height: 14px;
  border: 1px solid rgba(184, 201, 217, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    rgba(0, 0, 0, 0.46);
  border-radius: 999px;
  overflow: visible;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.82),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.freedom-progress-fill {
  height: 100%;
  width: var(--freedom-pct, 0%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%),
    linear-gradient(90deg, #167ea0, var(--cyan));
  border-radius: inherit;
  transition: width 0.4s ease;
  box-shadow: 0 0 10px rgba(76, 201, 232, 0.72);
}
.freedom-progress-fill.high-freedom {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%),
    linear-gradient(90deg, #239d5b, var(--green));
  box-shadow: 0 0 10px rgba(106, 255, 162, 0.68);
}
.freedom-progress-fill.escaped {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 52%),
    linear-gradient(90deg, #b87821, var(--gold));
  box-shadow: 0 0 10px rgba(243, 191, 85, 0.7);
}
.freedom-progress-fill.fast-goal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 48%),
    linear-gradient(90deg, #8b5818 0%, #c98222 28%, var(--gold) 68%, #fff1a8 100%);
  box-shadow:
    0 0 12px rgba(243, 191, 85, 0.72),
    0 0 22px rgba(184, 120, 33, 0.24);
}

.freedom-progress-value {
  position: absolute;
  top: 50%;
  left: clamp(22px, var(--freedom-pct, 0%), calc(100% - 22px));
  z-index: 2;
  min-width: 30px;
  border: 1px solid rgba(76, 201, 232, 0.5);
  border-radius: 999px;
  padding: 2px 5px;
  color: #f8fdff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 45%),
    rgba(2, 9, 14, 0.88);
  box-shadow:
    0 0 0 1px rgba(2, 9, 14, 0.55),
    0 0 10px rgba(76, 201, 232, 0.42);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: left 0.4s ease;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(248, 253, 255, 0.34);
}

.freedom-progress-value.high-freedom {
  border-color: rgba(106, 255, 162, 0.56);
  color: #f6fff8;
  box-shadow:
    0 0 0 1px rgba(2, 9, 14, 0.55),
    0 0 10px rgba(106, 255, 162, 0.42);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(246, 255, 248, 0.36);
}

.freedom-progress-value.escaped {
  border-color: rgba(243, 191, 85, 0.62);
  color: #fff7d4;
  box-shadow:
    0 0 0 1px rgba(2, 9, 14, 0.55),
    0 0 10px rgba(243, 191, 85, 0.46);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(255, 247, 212, 0.38);
}

.freedom-progress-value.fast-goal {
  border-color: rgba(255, 241, 168, 0.68);
  color: #fff7d4;
  box-shadow:
    0 0 0 1px rgba(2, 9, 14, 0.55),
    0 0 11px rgba(243, 191, 85, 0.52);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 5px rgba(255, 247, 212, 0.42);
}

.freedom-progress-fill.fast-goal::after {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 8px;
  height: 12px;
  border-radius: 999px;
  content: "";
  background: rgba(255, 247, 203, 0.92);
  filter: blur(2px);
  box-shadow:
    0 0 10px rgba(255, 241, 168, 0.88),
    0 0 18px rgba(243, 191, 85, 0.64);
}

.freedom-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--cyan);
  width: 36px;
  text-align: right;
}
.freedom-pct.high-freedom { color: var(--green); text-shadow: 0 0 8px rgba(106, 255, 162, 0.4); }
.freedom-pct.escaped { color: var(--gold); text-shadow: 0 0 8px rgba(243, 191, 85, 0.5); }

/* ==========================================================================
   Embedded Freedom Rail
   Keep player progress in the page grid so it never floats over the board.
   ========================================================================== */

:root {
  --freedom-rail-width: clamp(250px, 19vw, 272px);
}

body[data-phase="game"]:not([data-view="board"]) .freedom-hud {
  display: none !important;
}

body[data-phase="game"][data-view="board"] .freedom-hud {
  position: relative;
  inset: auto;
  z-index: 11;
  box-sizing: border-box;
  display: flex !important;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(243, 191, 85, 0.26);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(5, 11, 18, 0.985), rgba(4, 9, 15, 0.99)),
    #050a10;
  box-shadow:
    12px 0 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 1;
  transform: none;
  pointer-events: auto;
  backdrop-filter: none;
}

body[data-phase="game"][data-view="board"] .freedom-cards-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1101px) {
  body[data-phase="game"][data-view="board"] .app-workspace {
    grid-template-columns:
      var(--freedom-rail-width)
      minmax(0, 1fr)
      var(--game-command-rail-width) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 6px;
  }

  body[data-phase="game"][data-view="board"] .freedom-hud {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-phase="game"][data-view="board"] .app-views {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-phase="game"][data-view="board"] .game-command-rail {
    grid-column: 3;
    grid-row: 1;
  }

  body[data-phase="game"][data-view="board"] .play-board,
  body.board-focus[data-phase="game"][data-view="board"] .play-board {
    height: min(
      100%,
      calc((100vw - var(--game-command-rail-width) - var(--freedom-rail-width) - 30px) * 0.75)
    );
    max-width: calc(100vw - var(--game-command-rail-width) - var(--freedom-rail-width) - 30px);
  }
}

@media (max-width: 1100px) {
  body[data-phase="game"][data-view="board"] .app-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 128px;
    gap: 6px;
  }

  body[data-phase="game"][data-view="board"] .app-views {
    height: 100%;
  }

  body[data-phase="game"][data-view="board"] .freedom-hud {
    width: 100%;
    height: 128px;
    max-height: 128px;
    flex-direction: row;
    gap: 10px;
    padding: 8px;
    box-shadow:
      0 -10px 26px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  body[data-phase="game"][data-view="board"] .freedom-hud-title {
    width: 154px;
    flex: 0 0 154px;
    align-content: center;
    margin: 0;
    border-right: 1px solid rgba(243, 191, 85, 0.3);
    border-bottom: 0;
    padding: 8px 10px;
  }

  body[data-phase="game"][data-view="board"] .freedom-cards-list {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card {
    width: 220px;
    flex: 0 0 220px;
    padding: 9px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    align-items: center;
    gap: 9px;
    width: clamp(356px, 58vw, 430px);
    flex-basis: clamp(356px, 58vw, 430px);
    padding: 10px;
  }

  body[data-phase="game"][data-view="board"] .freedom-card-main {
    gap: 8px;
    margin-bottom: 7px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-main {
    gap: 6px;
    margin-bottom: 0;
    padding-right: 0;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-rank {
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-avatar.avatar-portrait.mini[data-career-image="hud"] {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-name {
    font-size: 0.68rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-profession {
    font-size: 0.58rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-passive-stack {
    gap: 1px;
    margin-top: 3px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-passive-stack span {
    font-size: 0.48rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-passive-stack strong {
    font-size: 0.78rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-passive-stack small {
    font-size: 0.45rem;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-self: end;
    gap: 4px;
    margin-top: 12px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-meter {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px;
    min-height: 25px;
    border-radius: 7px;
    padding: 3px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-icon {
    width: 18px;
    height: 18px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-percent {
    font-size: 0.5rem;
  }
}

@media (max-width: 700px) {
  body[data-phase="game"][data-view="board"] .app-workspace {
    grid-template-rows: minmax(0, 1fr) 104px;
    gap: 3px;
  }

  body[data-phase="game"][data-view="board"] .freedom-hud {
    height: 104px;
    max-height: 104px;
    padding: 6px;
  }

  body[data-phase="game"][data-view="board"] .freedom-hud-title {
    display: none;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card {
    width: 214px;
    flex-basis: 214px;
    padding: 7px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path {
    grid-template-columns: minmax(0, 1fr) 138px;
    gap: 7px;
    width: 344px;
    flex-basis: 344px;
    padding: 8px;
  }

  body[data-phase="game"][data-view="board"] .freedom-card-main {
    margin-bottom: 5px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-main {
    margin-bottom: 0;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-card-avatar.avatar-portrait.mini[data-career-image="hud"] {
    width: 48px;
    height: 50px;
    flex-basis: 48px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-grid {
    gap: 3px;
    margin-top: 11px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-meter {
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 24px;
    padding: 3px 2px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-icon {
    width: 16px;
    height: 16px;
  }

  body[data-phase="game"][data-view="board"] .freedom-player-card.is-freedom-path .freedom-life-dimension-percent {
    font-size: 0.46rem;
  }
}

/* Keep the main command bar 20% shorter while preserving its hit targets. */
body[data-phase="game"] .view-nav,
body[data-phase="game"] .view-nav button {
  min-height: 36px;
}

body[data-phase="game"] .view-nav button:not(:last-child)::after {
  top: 8px;
  height: 20px;
}

body[data-phase="game"][data-view="board"] .game-client.app-shell {
  grid-template-rows: 48px minmax(0, 1fr);
}

body[data-phase="game"][data-view="board"] .view-nav,
body[data-phase="game"][data-view="board"] .view-nav button {
  min-height: 48px;
}

@media (max-width: 700px) {
  body[data-phase="game"][data-view="board"] .game-client.app-shell {
    grid-template-rows: 40px minmax(0, 1fr);
  }

  body[data-phase="game"] .view-nav,
  body[data-phase="game"][data-view="board"] .view-nav,
  body[data-phase="game"] .view-nav button,
  body[data-phase="game"][data-view="board"] .view-nav button {
    min-height: 40px;
  }

  body[data-phase="game"] .view-nav button:not(:last-child)::after {
    top: 9px;
    height: 18px;
  }
}

/* Keep edge-tile descriptions inside the board instead of centering them past it. */
.route-board .tile.tooltip-edge-left .tile-tooltip {
  right: auto;
  left: 0;
  transform: translate3d(0, 6px, 0) scale(0.96);
}

.route-board .tile.tooltip-edge-right .tile-tooltip {
  right: 0;
  left: auto;
  transform: translate3d(0, 6px, 0) scale(0.96);
}

.route-board .tile.tooltip-edge-left.tooltip-below .tile-tooltip,
.route-board .tile.tooltip-edge-right.tooltip-below .tile-tooltip {
  transform: translate3d(0, -6px, 0) scale(0.96);
}

.route-board .tile.tooltip-edge-left .tile-tooltip::after {
  right: auto;
  left: 24px;
}

.route-board .tile.tooltip-edge-right .tile-tooltip::after {
  right: 24px;
  left: auto;
}

.route-board .tile.tooltip-edge-left:hover .tile-tooltip,
.route-board .tile.tooltip-edge-left.is-hovered .tile-tooltip,
.route-board .tile.tooltip-edge-left:focus-visible .tile-tooltip,
.route-board .tile.tooltip-edge-left.just-landed .tile-tooltip,
.route-board .tile.tooltip-edge-right:hover .tile-tooltip,
.route-board .tile.tooltip-edge-right.is-hovered .tile-tooltip,
.route-board .tile.tooltip-edge-right:focus-visible .tile-tooltip,
.route-board .tile.tooltip-edge-right.just-landed .tile-tooltip {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ==========================================================================
   Spectator Turn Dim
   Quiet the board while another player acts without dimming the side rails,
   active pawn/tile, dice, tooltips, or global decision surfaces.
   ========================================================================== */

.turn-spectator-shade {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: rgba(2, 7, 12, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

body.spectator-turn[data-phase="game"][data-view="board"] .turn-spectator-shade {
  opacity: 1;
}

body[data-phase="game"][data-view="board"] .route-board .tile {
  transition-property: transform, border-color, box-shadow, background-color, filter, opacity;
  transition-duration: 240ms, 200ms, 240ms, 200ms, 220ms, 220ms;
  transition-timing-function: var(--move), ease, var(--enter), ease, ease, ease;
}

body.spectator-turn[data-phase="game"][data-view="board"] .route-board .tile:not(.active-player-tile):not(:hover):not(.is-hovered):not(:focus-visible) {
  filter: brightness(0.82) saturate(0.78);
}

body.spectator-turn[data-phase="game"][data-view="board"] .route-board .tile:hover,
body.spectator-turn[data-phase="game"][data-view="board"] .route-board .tile.is-hovered,
body.spectator-turn[data-phase="game"][data-view="board"] .route-board .tile:focus-visible {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .turn-spectator-shade,
  body[data-phase="game"][data-view="board"] .route-board .tile {
    transition: none !important;
  }
}

/* Final responsive contract for the standardized board-event popup. */
@media (min-width: 861px) and (max-width: 1180px) {
  .landing-event-panel {
    grid-template-columns: minmax(290px, 0.82fr) minmax(420px, 1.18fr);
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
  }

  .landing-finance-sheet,
  .landing-event-sheet {
    max-height: calc(100vh - 58px);
  }

  .landing-finance-sheet {
    overflow: auto;
  }

  .landing-finance-head {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: stretch;
  }

  .landing-finance-head .landing-finance-avatar {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .landing-finance-player {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .landing-finance-vitals {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(108px, 1fr) minmax(78px, 0.72fr) minmax(126px, 1.08fr);
  }

  .landing-event-sheet {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
}

@media (max-width: 860px) {
  .landing-event-panel {
    grid-template-columns: 1fr;
    width: min(720px, calc(100vw - 18px));
    max-height: calc(100vh - 18px);
    overflow: auto;
  }

  .landing-event-sheet {
    grid-template-rows: auto auto auto;
    max-height: none;
    overflow: visible;
  }

  .landing-event-copy {
    overflow: visible;
    padding-right: 0;
  }

  .landing-action-footer {
    position: sticky;
    bottom: 0;
    margin-inline: -2px;
    padding: 10px 2px 2px;
    background: rgba(10, 12, 12, 0.96);
  }
}

@media (max-width: 720px) {
  .landing-finance-head {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .landing-finance-vitals {
    grid-column: 1 / -1;
    grid-template-columns: minmax(106px, 1fr) minmax(76px, 0.72fr) minmax(120px, 1.08fr);
  }

  .landing-finance-vitals > .landing-finance-time,
  .landing-finance-vitals > .landing-finance-stress,
  .landing-finance-vitals > .landing-finance-cash {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
  }

  .landing-finance-time strong,
  .landing-finance-stress strong,
  .landing-finance-cash strong {
    justify-content: flex-start;
    text-align: left;
  }

  .landing-unified-header {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    padding-right: 58px;
  }

  .landing-event-category-line {
    gap: 7px;
  }

  .landing-event-category {
    min-height: 25px;
    padding-inline: 8px;
    font-size: 0.61rem;
  }

  .landing-event-category-line h2 {
    font-size: 1.12rem;
  }

  .landing-event-context {
    font-size: 0.66rem;
  }

  .landing-charity-summary {
    grid-template-columns: 1fr;
  }

  .landing-charity-decision .landing-charity-summary {
    grid-template-columns: 1fr;
  }

  .landing-charity-decision .landing-charity-summary.has-option-two,
  .landing-charity-actions:not(.has-option-two),
  .landing-charity-actions.has-option-two {
    grid-template-columns: 1fr;
  }

  .landing-charity-summary article + article {
    border-top: 1px solid color-mix(in srgb, var(--event-accent) 24%, transparent);
    border-left: 0;
    padding-left: 8px;
  }

  .landing-action-footer[data-action-layout] .landing-footer-actions {
    grid-template-columns: 1fr;
  }

  .landing-action-footer[data-action-layout="single"] .landing-footer-actions > :only-child {
    grid-column: 1;
  }

  .landing-action-footer .landing-footer-actions > button:not(.ghost) {
    order: -1;
  }
}

@media (max-width: 420px) {
  .landing-dream-tools {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .landing-dream-tools small {
    padding-bottom: 0;
  }

  .landing-dream-list {
    grid-template-columns: 1fr;
  }

  .landing-dream-summary {
    grid-template-columns: 1fr;
  }

  .landing-dream-summary article + article {
    border-top: 1px solid color-mix(in srgb, var(--event-accent) 22%, transparent);
    border-left: 0;
  }

  .landing-finance-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-finance-vitals > .landing-finance-cash {
    grid-column: 1 / -1;
  }

  .landing-finance-line-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

/* === "ข้อมูล" side-panel toggle: dock at the bottom-left so it never overlaps board tiles.
   (Bottom-right is reserved for the minimized turn/roll action chip.) === */
body[data-phase="game"] .side-panel-toggle,
body[data-phase="game"][data-view="board"] .side-panel-toggle,
body.side-panel-open[data-phase="game"] .side-panel-toggle,
body.side-panel-open[data-phase="game"][data-view="board"] .side-panel-toggle {
  top: auto !important;
  bottom: 16px !important;
  left: 14px !important;
  right: auto !important;
  transform: none !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  min-width: 0 !important;
  min-height: 46px !important;
}

body[data-phase="game"] .side-panel-toggle:hover {
  transform: translateY(-2px) !important;
}

@media (min-width: 1101px) {
  body[data-phase="game"][data-view="board"] .side-panel-toggle,
  body.side-panel-open[data-phase="game"][data-view="board"] .side-panel-toggle {
    left: calc(var(--game-command-rail-width) + 14px) !important;
    bottom: 16px !important;
    top: auto !important;
  }
}

@media (max-width: 1100px) {
  body[data-phase="game"][data-view="board"] .side-panel-toggle,
  body.side-panel-open[data-phase="game"][data-view="board"] .side-panel-toggle {
    top: 150px !important;
    bottom: auto !important;
    left: 4px !important;
    min-width: 48px !important;
    min-height: 70px !important;
    flex-direction: column;
    gap: 3px;
    border-radius: 0 8px 8px 0 !important;
    padding: 0 6px !important;
  }

  body[data-phase="game"][data-view="board"] .side-panel-toggle:hover {
    transform: translateX(2px) !important;
  }
}

/* ==========================================================================
   Mobile Orientation Lock — force landscape 16:9 play
   Scoped to html.touch-device (set by the inline script in index.html), so
   desktop / hover-capable devices are never letterboxed or gated.
   ========================================================================== */

.rotate-device-gate {
  display: none;
}

html.touch-device {
  /* Stage always fills the full viewport width — no letterbox. (Used to cap
     at a 16:9 width, but real phones run wider than 16:9 in landscape, which
     pillarboxed the stage while .play-board still sized itself off 100vw,
     causing overflow/scrollbar. --fl-letterbox stays wired through the rest
     of this file so floating controls keep their anchor math; it just always
     resolves to 0 now. */
  --fl-stage-w: 100vw;
  --fl-letterbox: max(0px, calc((100vw - var(--fl-stage-w)) / 2));
}

/* ---- Portrait on a touch device: block play, ask the player to rotate ---- */
@media (orientation: portrait) {
  html.touch-device .rotate-device-gate {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
      radial-gradient(circle at 50% 32%, rgba(76, 201, 232, 0.18), transparent 62%),
      linear-gradient(160deg, #0b0f16 0%, #05060a 100%);
  }

  html.touch-device body {
    overflow: hidden;
  }
}

.rotate-device-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 360px;
  text-align: center;
  color: var(--ink);
}

.rotate-device-card h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.rotate-device-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.rotate-phone-frame {
  position: relative;
  width: 78px;
  height: 140px;
  border: 3px solid rgba(243, 191, 85, 0.9);
  border-radius: 16px;
  background: rgba(243, 191, 85, 0.07);
  box-shadow: 0 0 38px rgba(243, 191, 85, 0.3);
  transform-origin: center;
  animation: fl-rotate-hint 2.6s var(--enter) infinite;
}

.rotate-phone-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: rgba(243, 191, 85, 0.7);
  transform: translateX(-50%);
}

@keyframes fl-rotate-hint {
  0%, 26% { transform: rotate(0deg); }
  58%, 100% { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-phone-frame {
    animation: none;
    transform: rotate(-90deg);
  }
}

/* ---- Landscape on a touch device: centered 16:9 stage with letterbox ---- */
@media (orientation: landscape) {
  html.touch-device,
  html.touch-device body {
    width: 100%;
    /* dvh tracks the *actual* visible height as the mobile browser chrome
       shows/hides. svh (small viewport) left a dead band at the bottom once
       the address bar collapsed — the shell only filled the chrome-visible
       height while the screen was really the larger lvh. svh kept as fallback. */
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.touch-device body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #05060a;
  }

  html.touch-device .game-client.app-shell,
  html.touch-device body[data-phase] .game-client.app-shell {
    /* 100% of the flex parent (body), not 100vw: on some Android devices
       (Samsung display-scaling is the known offender) the vw/vh units
       resolve to a different reference than the actual visual viewport,
       which made this shell render wider than the screen and pushed the
       board off-center. width:100% is measured off body's real layout box
       instead, so it can't drift out of sync with what's actually visible. */
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Anchor the floating board controls inside the 16:9 stage, never the bars. */
  html.touch-device body[data-phase="game"] .side-panel-toggle,
  html.touch-device body.side-panel-open[data-phase="game"] .side-panel-toggle {
    left: var(--fl-letterbox) !important;
  }

  html.touch-device body[data-phase="game"] .side-panel {
    right: calc(var(--fl-letterbox) + 12px) !important;
    /* Closed-state slide distance must clear the extra letterbox offset too,
       or a sliver of this panel bleeds onto the board when not 16:9. */
    transform: translate3d(calc(100% + 26px + var(--fl-letterbox)), 0, 0) !important;
  }

  html.touch-device body.side-panel-open[data-phase="game"] .side-panel {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Minimized event/turn docks: the desktop (230px) and portrait-mobile
     (188px) sizes both assume a tall viewport with generous board margins.
     On a short landscape phone the board's own side margins can shrink to
     roughly this width, so the full-size dock creeps onto the board itself.
     Shrink to a compact chip — still >=44px touch target — anchored to the
     same corner so it never overlaps the play area. */
  html.touch-device .landing-event-modal[data-minimized="true"] {
    left: 0 !important;
    top: 56% !important;
    transform: translate3d(0, -50%, 0) !important;
  }

  html.touch-device .landing-event-dock,
  html.touch-device .turn-action-dock {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 6px;
    width: min(132px, 30vw);
    min-height: 44px;
    padding: 6px 8px;
  }

  html.touch-device .turn-action-dock {
    grid-template-columns: minmax(0, 1fr) 20px;
  }

  html.touch-device .landing-event-dock {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    width: clamp(48px, 7.2vw, 68px);
    min-height: 58px;
    border-radius: 0 10px 10px 0;
    padding: 5px 4px 6px;
    text-align: center;
    transform: none;
  }

  html.touch-device .landing-event-dock span,
  html.touch-device .turn-action-dock span {
    width: 20px;
    height: 28px;
    font-size: 1rem;
  }

  html.touch-device .landing-event-dock span {
    width: 24px;
    height: 22px;
    font-size: 0.95rem;
  }

  html.touch-device .landing-event-dock b,
  html.touch-device .turn-action-dock b {
    font-size: 0.72rem;
    line-height: 1.15;
  }

  html.touch-device .landing-event-dock b {
    max-width: 100%;
    font-size: 0.58rem;
    line-height: 1.05;
  }

  html.touch-device .landing-event-dock small,
  html.touch-device .turn-action-dock small {
    font-size: 0.56rem;
  }

  html.touch-device .landing-event-dock small {
    display: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail {
    position: fixed !important;
    --mobile-command-rail-width: min(248px, calc(var(--fl-stage-w) - 132px));
    top: 12px !important;
    bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
    left: calc(var(--fl-letterbox) + 5px) !important;
    z-index: 125 !important;
    width: var(--mobile-command-rail-width) !important;
    height: auto !important;
    transform: translate3d(calc(-100% - 12px - var(--fl-letterbox)), 0, 0) !important;
    transition: transform 220ms var(--enter);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-rail-topline {
    min-height: 34px;
    padding: 0 9px 0 11px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-rail-top-actions button {
    display: inline-flex;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-history {
    padding: 8px 9px 7px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-history li {
    min-height: 36px;
    padding: 4px 1px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-primary {
    padding: 8px 9px 9px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-primary > button {
    min-height: 44px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 6px 9px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-primary > button svg {
    width: 24px;
    height: 24px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-chat-head {
    padding: 6px 10px 4px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-chat-messages {
    padding: 3px 9px 6px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-chat-form {
    gap: 5px;
    padding: 7px 8px 8px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-chat-form input {
    height: 32px;
    padding: 0 9px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail .command-chat-form button {
    height: 32px;
    padding: 0 11px;
  }

  html.touch-device body.command-rail-open[data-phase="game"][data-view="board"] .game-command-rail {
    transform: translate3d(0, 0, 0) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-command-rail-toggle:not([hidden]) {
    left: calc(var(--fl-letterbox) + 4px) !important;
  }

  html.touch-device body.command-rail-open[data-phase="game"][data-view="board"] .game-command-rail-toggle {
    left: calc(var(--fl-letterbox) + min(253px, var(--fl-stage-w) - 127px)) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .game-client.app-shell {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  /* Landscape phone is height-bound: the board is 4:3 but the viewport is short,
     so the <=1100px workspace grid — which reserves a fixed 128px row for the
     freedom-hud player cards — squeezes the board to ~180px tall (tiny tiles,
     needs zoom). Here the board is driven off the viewport height instead, and
     the player HUD flows below the fold (game-client scrolls). Result: the board
     roughly doubles in size and reads clearly without zooming. */
  html.touch-device body[data-phase="game"][data-view="board"] .app-workspace {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    min-height: 0;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .app-views,
  html.touch-device body[data-phase="game"][data-view="board"] .board-view,
  html.touch-device body[data-phase="game"][data-view="board"] .stage-panel {
    height: auto !important;
    min-height: 0;
  }

  /* Definite height (not auto) so .play-board can fill it with height:100%
     instead of relying on two separate dvh calcs landing on the same
     number. The bottom inset keeps the outer row clear of Android/iOS
     gesture bars while preserving the mobile-only board enlargement. */
  html.touch-device body[data-phase="game"][data-view="board"] .board-wrap {
    height: calc(100svh - 4px) !important;
    height: calc(100dvh - 4px) !important;
    min-height: 0;
    padding: 0 0 max(12px, env(safe-area-inset-bottom));
  }

  html.touch-device body[data-phase="game"][data-view="board"] .freedom-hud {
    margin-top: 6px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .stage-panel {
    overflow: visible;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .play-board,
  html.touch-device body.board-focus[data-phase="game"][data-view="board"] .play-board {
    /* Top nav is now a right drawer (see below), so the board reclaims that
       vertical band — only ~4px of shell padding is subtracted now.
       .board-wrap has a definite dvh-based height (see above), so
       height:100% fills it exactly — no separate dvh calc here to drift
       out of sync. Mobile landscape uses a wider board ratio so horizontal
       rows have enough room for larger touch-friendly tiles. */
    height: 100% !important;
    max-width: calc(100vw - 12px) !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
  }

  /* Mobile board cohesion: the live neon tiles now sit on a single dark glass
     table surface, while the city image recedes into background atmosphere. */
  html.touch-device body[data-phase="game"][data-view="board"] .play-board {
    border-color: rgba(94, 255, 157, 0.24);
    background:
      radial-gradient(ellipse 88% 74% at 50% 48%, rgba(12, 38, 32, 0.78), rgba(4, 7, 11, 0.95) 72%),
      #05070a;
    box-shadow:
      inset 0 0 0 1px rgba(255, 224, 150, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 20px 54px rgba(0, 0, 0, 0.46),
      0 0 42px rgba(76, 201, 232, 0.08);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .play-board-shadow {
    box-shadow:
      0 24px 52px rgba(0, 0, 0, 0.72),
      0 38px 82px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(94, 255, 157, 0.08),
      0 0 110px rgba(94, 255, 157, 0.07);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container {
    isolation: isolate;
    background:
      radial-gradient(ellipse 74% 58% at 50% 49%, rgba(20, 70, 50, 0.42), rgba(5, 10, 14, 0.74) 63%, rgba(2, 4, 8, 0.94) 100%),
      linear-gradient(90deg, rgba(2, 5, 8, 0.72), rgba(2, 8, 12, 0.34) 47%, rgba(2, 5, 8, 0.72)),
      linear-gradient(180deg, rgba(3, 9, 13, 0.62), rgba(2, 4, 7, 0.8)),
      var(--board-art) center / cover no-repeat !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container::before {
    z-index: 0;
    opacity: 1;
    background:
      radial-gradient(ellipse 56% 44% at 50% 50%, rgba(94, 255, 157, 0.09), transparent 72%),
      linear-gradient(rgba(94, 255, 157, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(76, 201, 232, 0.03) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38), #000 14%, #000 86%, rgba(0, 0, 0, 0.46));
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38), #000 14%, #000 86%, rgba(0, 0, 0, 0.46));
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container::after {
    display: block !important;
    position: absolute;
    inset: 3% 1.4% 6.8%;
    z-index: 1;
    border: 1px solid rgba(94, 255, 157, 0.16);
    border-radius: 32px;
    content: "";
    background:
      radial-gradient(ellipse 62% 44% at 50% 50%, rgba(94, 255, 157, 0.11), transparent 68%),
      linear-gradient(145deg, rgba(10, 26, 24, 0.64), rgba(4, 7, 10, 0.34) 48%, rgba(4, 8, 12, 0.7));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 0 48px rgba(94, 255, 157, 0.055),
      0 18px 42px rgba(0, 0, 0, 0.32);
    mix-blend-mode: normal;
    opacity: 0.96;
    pointer-events: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .board-cyber-grid-overlay {
    opacity: 0.44;
    mix-blend-mode: screen;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .board-neon-frame.mid-glow {
    background:
      radial-gradient(ellipse 70% 52% at 50% 50%, rgba(94, 255, 157, 0.08), transparent 72%),
      linear-gradient(145deg, rgba(6, 28, 22, 0.34), rgba(5, 8, 12, 0.52)) !important;
    box-shadow:
      0 0 24px rgba(94, 255, 157, 0.16),
      inset 0 0 34px rgba(94, 255, 157, 0.07) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .board-neon-frame.inner-glow-outer {
    border-color: rgba(243, 191, 85, 0.28) !important;
    background: radial-gradient(ellipse 78% 70% at 50% 50%, rgba(243, 191, 85, 0.06), transparent 74%) !important;
    box-shadow:
      0 0 22px rgba(243, 191, 85, 0.08),
      inset 0 0 20px rgba(243, 191, 85, 0.045) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .board-neon-frame.inner-glow-inner,
  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .board-neon-frame.inner-glow-inner:hover {
    border-color: rgba(243, 191, 85, 0.74) !important;
    background:
      radial-gradient(ellipse 96% 120% at 50% -18%, rgba(243, 191, 85, 0.18), transparent 56%),
      linear-gradient(145deg, rgba(18, 28, 24, 0.96), rgba(5, 8, 11, 0.98)) !important;
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.48),
      0 0 22px rgba(243, 191, 85, 0.18),
      0 0 36px rgba(94, 255, 157, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -18px 32px rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(12px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .brand-logo-glow {
    border: 1px solid rgba(243, 191, 85, 0.18);
    border-radius: 14px;
    padding: clamp(4px, 0.75vw, 7px) clamp(8px, 1.25vw, 14px);
    background:
      linear-gradient(180deg, rgba(255, 224, 150, 0.08), rgba(94, 255, 157, 0.035)),
      rgba(2, 6, 8, 0.44);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 18px rgba(0, 0, 0, 0.34);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .dynamic-board-container .brand-title {
    color: rgba(255, 248, 226, 0.96);
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.8),
      0 0 14px rgba(243, 191, 85, 0.22);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board .tile {
    filter: saturate(1.06) contrast(1.02);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -14px 22px rgba(0, 0, 0, 0.34),
      0 1px 0 color-mix(in srgb, var(--tile-accent) 84%, #000000),
      0 2px 0 color-mix(in srgb, var(--tile-accent) 72%, #000000),
      0 3px 0 color-mix(in srgb, var(--tile-accent) 58%, #000000),
      0 14px 24px rgba(0, 0, 0, 0.72),
      0 0 22px color-mix(in srgb, var(--tile-accent) 34%, transparent) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip {
    display: flex !important;
    top: 16.5%;
    left: 50%;
    z-index: 54;
    max-width: min(26vw, 160px);
    min-height: 24px;
    gap: 4px;
    border-radius: 999px;
    padding: 2px 8px 2px 5px;
    background:
      linear-gradient(135deg, rgba(10, 28, 20, 0.88), rgba(16, 16, 10, 0.84)),
      rgba(4, 7, 10, 0.86);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translate3d(-50%, -8px, 0) scale(0.96);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip[data-open="true"] {
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip img {
    width: 18px;
    height: 18px;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip span {
    display: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip strong {
    max-width: 100%;
    font-size: 0.58rem;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-focus-chip small {
    display: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .turn-banner {
    display: none !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.fast-board .tile.tile-corner-top-left,
  html.touch-device body[data-phase="game"][data-view="board"] .play-board.view-flat .route-board.fast-board .tile.tile-corner-top-left {
    width: calc(var(--tile-w) + 2px) !important;
    height: calc(var(--tile-h) + 8px) !important;
    transform: translate(calc(-50% - 3px), calc(-50% - 5px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.fast-board .tile.tile-corner-top-right,
  html.touch-device body[data-phase="game"][data-view="board"] .play-board.view-flat .route-board.fast-board .tile.tile-corner-top-right {
    width: calc(var(--tile-w) + 2px) !important;
    height: calc(var(--tile-h) + 8px) !important;
    transform: translate(calc(-50% + 3px), calc(-50% - 5px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.fast-board .tile.tile-corner-bottom-right,
  html.touch-device body[data-phase="game"][data-view="board"] .play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-right {
    width: calc(var(--tile-w) + 2px) !important;
    height: calc(var(--tile-h) + 8px) !important;
    transform: translate(calc(-50% + 3px), calc(-50% + 5px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.fast-board .tile.tile-corner-bottom-left,
  html.touch-device body[data-phase="game"][data-view="board"] .play-board.view-flat .route-board.fast-board .tile.tile-corner-bottom-left {
    width: calc(var(--tile-w) + 2px) !important;
    height: calc(var(--tile-h) + 8px) !important;
    transform: translate(calc(-50% - 3px), calc(-50% + 5px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-top-row {
    height: calc(var(--tile-h) + 2px) !important;
    transform: translate(-50%, calc(-50% - 9px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-bottom-row {
    height: calc(var(--tile-h) + 2px) !important;
    transform: translate(-50%, calc(-50% + 9px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-top-left,
  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-top-right,
  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-bottom-right,
  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-bottom-left {
    width: calc(var(--tile-w) + 7px) !important;
    height: calc(var(--tile-h) + 7px) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-top-left {
    transform: translate(calc(-50% - 4px), calc(-50% - 4px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-top-right {
    transform: translate(calc(-50% + 4px), calc(-50% - 4px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-bottom-right {
    transform: translate(calc(-50% + 4px), calc(-50% + 4px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .route-board.rat-board .tile.tile-corner-bottom-left {
    transform: translate(calc(-50% - 4px), calc(-50% + 4px)) scale(1) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .board-token .miniature-nametag {
    max-width: 68px;
    overflow: hidden;
    font-size: 7px;
    line-height: 1.05;
    visibility: hidden;
    opacity: 0 !important;
    text-overflow: ellipsis;
    transform: translate3d(0, 1px, 0) scale(0.9) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .board-token.active-token .miniature-nametag {
    max-width: 68px;
    visibility: hidden;
    opacity: 0 !important;
    transform: translate3d(0, 1px, 0) scale(0.9) !important;
  }

  /* ======================================================================
     Top nav → right-edge drawer (mobile landscape only)
     The horizontal Board/Finance/Cards/Players/Log bar ate a ~52px band off
     the top on every phone. Here it becomes a vertical drawer that slides in
     from the right, freeing that band for the board. A slim tab on the right
     edge toggles it; picking a view auto-closes it (see app.js).
     ====================================================================== */
  html.touch-device body[data-phase="game"] .view-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    /* Above the floating เกม / ข้อมูล toggles (z 121–126) so the open drawer
       is a clean top layer, not bled through by them. */
    z-index: 130 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: min(272px, 76vw);
    margin: 0;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-left: 1px solid rgba(243, 191, 85, 0.22);
    border-radius: 0;
    background:
      linear-gradient(155deg, rgba(16, 20, 28, 0.98), rgba(6, 8, 12, 0.99));
    box-shadow: -18px 0 44px rgba(0, 0, 0, 0.55);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(100%, 0, 0);
    transition: transform 260ms var(--enter);
  }

  html.touch-device body.view-nav-open[data-phase="game"] .view-nav {
    transform: translate3d(0, 0, 0);
  }

  html.touch-device body[data-phase="game"] .view-nav [data-view-button] {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 1rem;
  }

  html.touch-device body[data-phase="game"] .view-nav .nav-room-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 8px 0 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.3);
  }

  /* Right-edge toggle tab for the nav drawer */
  html.touch-device body[data-phase="game"] .view-nav-toggle:not([hidden]) {
    position: fixed;
    top: 12px;
    right: 0;
    z-index: 131 !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 46px;
    padding: 10px 6px;
    border: 1px solid rgba(243, 191, 85, 0.32);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(150deg, rgba(20, 24, 33, 0.96), rgba(8, 10, 15, 0.96));
    color: var(--ink);
    box-shadow: -8px 0 22px rgba(0, 0, 0, 0.4);
    transition: right 260ms var(--enter);
  }

  html.touch-device body[data-phase="game"] .view-nav-toggle b {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  html.touch-device body[data-phase="game"] .view-nav-toggle-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--gold);
  }

  html.touch-device body.view-nav-open[data-phase="game"] .view-nav-toggle:not([hidden]) {
    right: min(272px, 76vw);
  }

  /* 'ข้อมูล' toggle pulled off the outside dead-space and onto the board's
     right frame edge, stacked just under the เมนู tab. Both are right-side
     drawer toggles, so grouping them reads cleanly; the bottom-right corner
     stays free for the minimized turn console. */
  html.touch-device body[data-phase="game"][data-view="board"] .side-panel-toggle {
    top: 84px !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    min-width: 46px;
    border-radius: 14px 0 0 14px !important;
    border-right: 0 !important;
    transform: none !important;
  }

  html.touch-device body.side-panel-open[data-phase="game"][data-view="board"] .side-panel-toggle {
    right: calc(min(360px, calc(100vw - 28px)) + 8px) !important;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle:not([hidden]) {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: auto;
    bottom: auto;
    left: calc(var(--fl-letterbox) + 10px + env(safe-area-inset-left, 0px));
    z-index: 128;
    display: inline-flex;
    width: clamp(46px, 5vw, 54px);
    height: clamp(46px, 5vw, 54px);
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(94, 255, 157, 0.46);
    border-radius: 14px;
    padding: 0;
    color: rgba(228, 255, 238, 0.98);
    background:
      radial-gradient(circle at 50% 36%, rgba(94, 255, 157, 0.25), transparent 64%),
      linear-gradient(145deg, rgba(10, 32, 24, 0.92), rgba(8, 10, 14, 0.92));
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.46),
      0 0 22px rgba(94, 255, 157, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transform: translateZ(0);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms var(--enter);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle:not([hidden]):active {
    transform: translateY(1px) scale(0.96);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle .mobile-fullscreen-exit-icon {
    display: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle.is-fullscreen {
    border-color: rgba(243, 191, 85, 0.62);
    color: rgba(255, 238, 190, 0.98);
    background:
      radial-gradient(circle at 50% 36%, rgba(243, 191, 85, 0.26), transparent 64%),
      linear-gradient(145deg, rgba(34, 24, 10, 0.92), rgba(8, 10, 14, 0.92));
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.46),
      0 0 22px rgba(243, 191, 85, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle.is-fullscreen .mobile-fullscreen-enter-icon {
    display: none;
  }

  html.touch-device body[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle.is-fullscreen .mobile-fullscreen-exit-icon {
    display: block;
  }

  html.touch-device body.view-nav-open[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle,
  html.touch-device body.side-panel-open[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle,
  html.touch-device body.command-rail-open[data-phase="game"][data-view="board"] .mobile-fullscreen-toggle {
    opacity: 0;
    pointer-events: none;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .app-workspace {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 10px calc(66px + env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) 12px;
    overflow: hidden;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .app-views,
  html.touch-device body[data-phase="game"][data-view="log"] .log-view {
    height: 100%;
    min-height: 0;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .log-view-panel {
    width: min(820px, calc(100vw - 96px));
    height: min(100%, calc(100dvh - 30px));
    max-height: calc(100dvh - 30px);
    overflow: hidden;
    border-color: rgba(243, 191, 85, 0.2);
    border-radius: 10px;
    padding: 12px;
    box-shadow:
      0 20px 52px rgba(0, 0, 0, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-panel {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-head {
    margin-bottom: 8px;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-head h3 {
    font-size: 1rem;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-head-actions {
    gap: 6px;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-head-actions > span {
    padding: 2px 6px;
    font-size: 0.62rem;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-head-actions button {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-list {
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
    padding-right: 3px;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 9px;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-main strong {
    font-size: 0.84rem;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-main p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.7rem;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .ledger-effects {
    justify-content: flex-start;
  }

  html.touch-device body[data-phase="game"][data-view="log"] .view-nav-toggle:not([hidden]) {
    top: 18px;
  }
}

/* ==========================================================================
   Mobile Waiting Room / Create Game
   Keep room controls and setup content in one document flow. This overrides
   the desktop sticky side panel so it cannot cover the waiting-room cards.
   ========================================================================== */

@media (max-width: 1180px) {
  body[data-phase="waiting"] .app-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body[data-phase="waiting"] .app-views,
  body[data-phase="waiting"] .waiting-view,
  body[data-phase="waiting"] .waiting-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  body[data-phase="waiting"] #gameSidePanel {
    position: static !important;
    inset: auto !important;
    order: -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(170px, 0.65fr);
    gap: 7px 10px;
    align-items: center;
    width: 100% !important;
    max-width: 100%;
    max-height: none;
    margin: 0;
    overflow: hidden;
    padding: 8px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header {
    min-width: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header .eyebrow {
    display: none;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header h2 {
    max-width: 100%;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid {
    grid-template-columns: repeat(2, 92px);
    gap: 6px;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid button {
    min-height: 34px;
    padding: 0 6px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] #gameSidePanel .action-summary {
    min-width: 0;
    padding: 7px 8px;
  }

  body[data-phase="waiting"] #gameSidePanel .action-summary h3 {
    font-size: 0.82rem;
  }

  body[data-phase="waiting"] #gameSidePanel .action-summary .muted {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body[data-phase="waiting"] #gameSidePanel .status-text {
    display: none;
  }

  body[data-phase="waiting"] #sidePanelToggle {
    display: none !important;
  }

  body[data-phase="waiting"] .waiting-panel {
    /* Was overflow:hidden, which clipped the creator "Add Bot" panel off-screen
       on mobile. The panel grows vertically and page-level horizontal overflow
       is already contained by the body/app-shell, so keep it visible here. */
    overflow: visible;
  }

  /* Collapse the creator "Add Bot" panel to a single column across every
     non-desktop width (not only <=720px). Its base layout uses a second column
     with a 280px minimum that holds the skill selector and Add Bot button; on
     narrow screens that column was pushed out of view. */
  body[data-phase="waiting"] .waiting-bot-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-phase="waiting"] .bot-control-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  body[data-phase="waiting"] .top-brand h1 {
    max-width: 100%;
    font-size: clamp(2rem, 11vw, 2.55rem);
    overflow-wrap: anywhere;
  }

  body[data-phase="waiting"] .waiting-field-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body[data-phase="waiting"] .autosave-status {
    min-width: 0;
    margin-left: auto;
  }

  body[data-phase="waiting"] .waiting-token-shell {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  body[data-phase="waiting"] .waiting-token-preview img {
    width: 54px;
    height: 54px;
  }

  body[data-phase="waiting"] .waiting-seat,
  body[data-phase="waiting"] .waiting-seat-grid,
  body[data-phase="waiting"] .waiting-bot-panel,
  body[data-phase="waiting"] .bot-control-row {
    min-width: 0;
    max-width: 100%;
  }

  body[data-phase="waiting"] .waiting-seat {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body[data-phase="waiting"] .waiting-remove-player {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  body[data-phase="waiting"] .bot-control-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  body[data-phase="waiting"] .game-client {
    height: 100dvh;
    padding: 8px 0;
  }

  body[data-phase="waiting"] .app-shell {
    gap: 6px;
  }

  body[data-phase="waiting"] .app-topbar {
    min-height: 54px;
    padding: 7px 9px;
  }

  body[data-phase="waiting"] .top-brand {
    gap: 8px;
    align-items: center;
  }

  body[data-phase="waiting"] .top-brand h1 {
    font-size: clamp(1.42rem, 9vw, 2rem);
  }

  body[data-phase="waiting"] .top-brand .eyebrow {
    max-width: 17ch;
    font-size: 0.58rem;
    line-height: 1.12;
  }

  body[data-phase="waiting"] .app-workspace {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    overflow: hidden;
  }

  body[data-phase="waiting"] #gameSidePanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: center;
    padding: 7px;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header {
    min-width: 0;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header .eyebrow,
  body[data-phase="waiting"] #gameSidePanel .action-summary,
  body[data-phase="waiting"] #gameSidePanel .status-text {
    display: none;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header h2 {
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[data-phase="waiting"] #gameSidePanel .room-header button {
    min-height: 32px;
    padding: 0 8px;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid {
    grid-template-columns: repeat(2, 78px);
    gap: 6px;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid button {
    min-height: 36px;
    padding: 0 6px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .app-views,
  body[data-phase="waiting"] .waiting-view,
  body[data-phase="waiting"] .waiting-panel {
    min-height: 0;
    height: auto;
  }

  body[data-phase="waiting"] .waiting-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
    align-self: start;
    overflow: hidden;
  }

  body[data-phase="waiting"] .waiting-head {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 5px;
  }

  body[data-phase="waiting"] .waiting-head h2 {
    max-width: none;
    font-size: 1.2rem;
  }

  body[data-phase="waiting"] .waiting-head .eyebrow,
  body[data-phase="waiting"] .waiting-head .muted {
    display: none;
  }

  body[data-phase="waiting"] .waiting-head button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.74rem;
  }

  body[data-phase="waiting"] .waiting-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-phase="waiting"] .rename-panel,
  body[data-phase="waiting"] .waiting-bot-panel {
    padding: 6px;
  }

  body[data-phase="waiting"] .waiting-field-head {
    gap: 6px;
  }

  body[data-phase="waiting"] .waiting-field-head label {
    font-size: 0.62rem;
  }

  body[data-phase="waiting"] .autosave-status {
    display: none;
  }

  body[data-phase="waiting"] .waiting-field-shell,
  body[data-phase="waiting"] .waiting-token-shell {
    padding: 5px;
  }

  body[data-phase="waiting"] .waiting-field-shell input,
  body[data-phase="waiting"] .waiting-token-shell select {
    min-height: 34px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  body[data-phase="waiting"] .waiting-token-shell {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-token-preview img {
    width: 34px;
    height: 34px;
  }

  body[data-phase="waiting"] .waiting-bot-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-bot-panel .eyebrow,
  body[data-phase="waiting"] .waiting-bot-panel .muted {
    display: none;
  }

  body[data-phase="waiting"] .waiting-bot-panel h3 {
    font-size: 0.82rem;
  }

  body[data-phase="waiting"] .bot-control-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 5px;
  }

  body[data-phase="waiting"] .bot-control-row label {
    font-size: 0.58rem;
  }

  body[data-phase="waiting"] .bot-control-row select,
  body[data-phase="waiting"] .bot-control-row button {
    min-height: 34px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .waiting-roster {
    gap: 5px;
    min-height: 0;
  }

  body[data-phase="waiting"] .waiting-section {
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-section-head span,
  body[data-phase="waiting"] .waiting-section-head b {
    font-size: 0.62rem;
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-seat {
    grid-template-columns: 23px minmax(0, 1fr) auto;
    min-height: 48px;
    gap: 5px;
    padding: 5px;
  }

  body[data-phase="waiting"] .waiting-seat .avatar-portrait {
    display: none;
  }

  body[data-phase="waiting"] .seat-index {
    width: 23px;
    height: 23px;
    font-size: 0.62rem;
  }

  body[data-phase="waiting"] .waiting-seat strong {
    font-size: 0.76rem;
  }

  body[data-phase="waiting"] .waiting-seat small {
    font-size: 0.6rem;
  }

  body[data-phase="waiting"] .creator-pill {
    font-size: 0.56rem;
  }

  body[data-phase="waiting"] .waiting-remove-player {
    grid-column: auto;
    justify-self: end;
    height: 20px;
    padding: 0;
    font-size: 0.6rem;
  }
}

/* While a blocking decision modal is open, hide the floating edge toggles so
   they never overlap the modal card. Minimized in-turn panels are excluded so
   their controls stay reachable. */
body:has(.decision-modal[data-open="true"]:not([data-minimized="true"])) .game-command-rail-toggle,
body:has(.decision-modal[data-open="true"]:not([data-minimized="true"])) .side-panel-toggle,
body:has(.decision-modal[data-open="true"]:not([data-minimized="true"])) .mobile-fullscreen-toggle,
body:has(.decision-modal[data-open="true"]:not([data-minimized="true"])) .sfx-quick-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   Mobile Lobby Cleanup
   Keep pre-game screens usable in portrait and remove the in-game drawer from
   the lobby layout. The landscape 16:9 contract starts only after game entry.
   ========================================================================== */

body[data-phase="lobby"] .app-workspace {
  grid-template-columns: minmax(0, 1fr);
}

body[data-phase="lobby"] #gameSidePanel,
body[data-phase="lobby"] #sidePanelToggle {
  display: none !important;
}

@media (max-width: 720px) {
  body[data-phase="lobby"] .app-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 7px 10px;
  }

  body[data-phase="lobby"] .top-brand {
    width: 100%;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
  }

  body[data-phase="lobby"] .top-brand .eyebrow {
    max-width: 14ch;
    font-size: 0.56rem;
    line-height: 1.08;
    text-align: right;
    white-space: normal;
  }

  body[data-phase="lobby"] .lobby-top-stats {
    width: 100%;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  body[data-phase="lobby"] .lobby-top-stats span {
    gap: 5px;
    padding: 4px 8px;
    font-size: 0.6rem;
    white-space: nowrap;
  }

  body[data-phase="lobby"] .top-brand h1 {
    max-width: 100%;
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 0.9;
    white-space: nowrap;
  }

  body[data-phase="lobby"] .lobby-view {
    height: calc(100dvh - 154px);
    min-height: 0;
    overflow: hidden;
  }

  body[data-phase="lobby"] .lobby-console {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-right: 0;
    padding: 8px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: linear-gradient(160deg, rgba(46, 41, 35, 0.92), rgba(20, 18, 16, 0.95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  body[data-phase="lobby"] .lobby-brief {
    min-height: 0;
    gap: 6px;
    padding: 10px 0 4px 12px;
  }

  body[data-phase="lobby"] .hero-copy,
  body[data-phase="lobby"] .career-strip-head,
  body[data-phase="lobby"] .career-track,
  body[data-phase="lobby"] .hero-footrow {
    padding-right: 16px;
  }

  body[data-phase="lobby"] .hero-copy {
    display: contents;
  }

  body[data-phase="lobby"] .hero-title {
    order: 1;
    position: relative;
    z-index: 1;
  }

  body[data-phase="lobby"] .lobby-brief h2 {
    max-width: 100%;
    font-size: clamp(1.45rem, 7.8vw, 1.9rem);
    line-height: 0.96;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body[data-phase="lobby"] .career-strip {
    order: 2;
    flex: 1 1 190px;
    min-height: 178px;
  }

  body[data-phase="lobby"] .career-strip-head {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
  }

  body[data-phase="lobby"] .career-title-block {
    gap: 2px;
  }

  body[data-phase="lobby"] .career-heading-row {
    gap: 0 4px;
  }

  body[data-phase="lobby"] .career-strip-head strong {
    font-size: 0.9rem;
  }

  body[data-phase="lobby"] .career-strip-head .count {
    font-size: 0.62rem;
  }

  body[data-phase="lobby"] .career-track {
    flex: 1 1 136px;
    min-height: 136px;
    gap: 10px;
    padding-bottom: 6px;
  }

  body[data-phase="lobby"] .career-card {
    flex: 0 0 132px;
    gap: 5px;
    height: 100%;
    padding: 8px;
  }

  body[data-phase="lobby"] .career-portrait {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin: -8px -8px 0;
    aspect-ratio: auto;
  }

  body[data-phase="lobby"] .career-portrait img {
    object-position: center top;
    transform: none;
  }

  body[data-phase="lobby"] .promo-grid article,
  body[data-phase="lobby"] .promo-grid p,
  body[data-phase="lobby"] .lobby-console {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body[data-phase="lobby"] .career-edge-nav {
    width: 44px;
    min-height: 44px;
    font-size: 1rem;
  }

  body[data-phase="lobby"] .career-edge-nav-prev {
    left: 2px;
  }

  body[data-phase="lobby"] .career-edge-nav-next {
    right: 2px;
  }

  body[data-phase="lobby"] .career-title {
    right: 8px;
    bottom: 6px;
    left: 8px;
    font-size: 0.66rem;
    line-height: 1.15;
  }

  body[data-phase="lobby"] .career-desc {
    display: none;
  }

  body[data-phase="lobby"] .career-footnote {
    display: -webkit-box;
    max-width: min(34ch, calc(100vw - 150px));
    overflow: hidden;
    font-size: 0.54rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-phase="lobby"] .lobby-console .panel-head {
    display: flex;
    gap: 6px;
  }

  body[data-phase="lobby"] .lobby-console .join-room-row {
    border-top: 0;
    padding-top: 0;
  }

  body[data-phase="lobby"] .lobby-console .panel-head h2 {
    font-size: 1rem;
    line-height: 1.1;
  }

  body[data-phase="lobby"] .lobby-console label {
    font-size: 0.68rem;
  }

  body[data-phase="lobby"] .lobby-console .field-grid,
  body[data-phase="lobby"] .lobby-console .join-room-row {
    gap: 5px;
  }

  body[data-phase="lobby"] .lobby-console .panel-head,
  body[data-phase="lobby"] .lobby-console .field-grid,
  body[data-phase="lobby"] .lobby-console .join-room-row,
  body[data-phase="lobby"] .lobby-console .create-room-row {
    flex: 1 1 100%;
  }

  body[data-phase="lobby"] .lobby-console input,
  body[data-phase="lobby"] .lobby-console button {
    min-height: 44px;
    font-size: 0.9rem;
  }

  body[data-phase="lobby"] .lobby-console #createRoom {
    min-width: 0;
    width: 100%;
  }

  body[data-phase="lobby"] .lobby-console .join-room-controls {
    grid-template-columns: minmax(0, 1fr) 76px;
  }
}

@media (max-width: 1180px) {
  html.touch-device body[data-phase="lobby"] .lobby-console {
    order: 0;
  }
}

@media (orientation: portrait) {
  html.touch-device body:not([data-phase="game"]) .rotate-device-gate {
    display: none;
  }

  html.touch-device body:not([data-phase="game"]) {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (orientation: landscape) {
  html.touch-device body:not([data-phase="game"]) {
    display: block;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
      radial-gradient(circle at 18% 12%, rgba(76, 201, 232, 0.18), transparent 32rem),
      radial-gradient(circle at 86% 4%, rgba(243, 191, 85, 0.18), transparent 30rem),
      linear-gradient(135deg, #11100f 0%, #1c1a18 42%, #101211 100%);
  }

  html.touch-device body:not([data-phase="game"]) .game-client.app-shell {
    width: min(1500px, calc(100vw - 18px)) !important;
    max-width: min(1500px, calc(100vw - 18px)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible;
  }

  /* The shell above already releases its 100dvh clamp and lets the body
     scroll — but .lobby-view has its own independent height cap
     (min(760px, calc(100dvh - 132px)), sized for a roomy desktop card) with
     overflow:hidden, so on a short landscape phone it clips the hero text +
     room-creation form + career strip before the shell ever sees an
     overflow to scroll. .waiting-view already releases the same kind of
     lock for the waiting-room screen (see "waiting v2 mobile" nearby); do
     the same here so the create/join form is always reachable. */
  html.touch-device body:not([data-phase="game"]) .lobby-view {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html.touch-device body:not([data-phase="game"]) .lobby-brief {
    overflow: visible !important;
  }
}

/* Dice Choice UI for Charity Bonus */
.turn-dice-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.turn-dice-choice-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: 0;
}
.turn-dice-choice-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.turn-roll-primary.dice-choice {
  min-height: 72px;
}
.turn-roll-primary.dice-choice span {
  font-size: 1.4rem;
}

/* Integrated top-bar status cells */
body[data-phase="game"] .nav-room-card,
body[data-phase="game"][data-view="board"] .nav-room-card {
  display: flex;
  min-height: inherit;
  height: auto;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 0;
  margin-left: auto;
  overflow: hidden;
  border: 0;
  border-left: 1px solid rgba(151, 164, 180, 0.18);
  border-radius: 0;
  padding: 0;
  background: transparent;
  white-space: nowrap;
}

body[data-phase="game"] .nav-room-card .nav-room-info {
  display: flex;
  min-width: 88px;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 18px;
  border-right: 1px solid rgba(151, 164, 180, 0.16);
  line-height: 1.05;
}

body[data-phase="game"] .nav-room-card .nav-room-info:first-child {
  min-width: 156px;
  max-width: min(24vw, 230px);
}

body[data-phase="game"] .nav-room-card .nav-room-info span {
  overflow: hidden;
  color: rgba(224, 223, 218, 0.54);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

body[data-phase="game"] .nav-room-card .nav-room-info b {
  overflow: hidden;
  color: rgba(247, 240, 223, 0.94);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-phase="game"] .nav-room-card .nav-turn-info b {
  color: #f5c957;
  font-variant-numeric: tabular-nums;
}

body[data-phase="game"] .nav-room-card button,
body[data-phase="game"][data-view="board"] .nav-room-card button {
  min-width: 0;
  min-height: inherit;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  color: rgba(224, 223, 218, 0.78);
  background: transparent;
  box-shadow: none;
  font-size: 0.84rem;
  transform: none;
}

body[data-phase="game"] .nav-room-card button:hover:not(:disabled),
body[data-phase="game"][data-view="board"] .nav-room-card button:hover:not(:disabled) {
  color: #f5c957;
  background: rgba(243, 191, 85, 0.045);
  box-shadow: none;
  transform: none;
}

.nav-sfx-toggle {
  display: none;
}

body[data-phase="game"] .nav-room-card .nav-sfx-toggle,
body[data-phase="game"][data-view="board"] .nav-room-card .nav-sfx-toggle {
  display: inline-flex;
  width: 58px;
  min-width: 58px;
  min-height: inherit;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(151, 164, 180, 0.16);
  border-left: 1px solid rgba(76, 201, 232, 0.2);
  padding: 0;
  color: rgba(238, 251, 255, 0.88);
  background:
    radial-gradient(circle at 50% 30%, rgba(76, 201, 232, 0.16), transparent 60%),
    transparent;
}

body[data-phase="game"] .nav-room-card .nav-sfx-toggle:hover:not(:disabled),
body[data-phase="game"][data-view="board"] .nav-room-card .nav-sfx-toggle:hover:not(:disabled),
body[data-phase="game"] .nav-room-card .nav-sfx-toggle:focus-visible,
body[data-phase="game"][data-view="board"] .nav-room-card .nav-sfx-toggle:focus-visible {
  color: #a9efff;
  background: rgba(76, 201, 232, 0.075);
  box-shadow: none;
}

body[data-phase="game"] .nav-room-card .nav-sfx-toggle[aria-pressed="false"],
body[data-phase="game"][data-view="board"] .nav-room-card .nav-sfx-toggle[aria-pressed="false"] {
  color: rgba(255, 248, 228, 0.48);
  background: transparent;
}

.nav-surrender-action[hidden] {
  display: none !important;
}

.nav-surrender-action {
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nav-surrender-action .view-nav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-surrender-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.nav-surrender-action--mobile {
  display: none;
}

body[data-phase="game"] .view-nav > .nav-surrender-action--mobile {
  display: none;
}

body[data-phase="game"] .nav-room-card .nav-surrender-action--desktop,
body[data-phase="game"][data-view="board"] .nav-room-card .nav-surrender-action--desktop {
  display: inline-flex;
  border-left: 1px solid rgba(255, 112, 112, 0.24);
  color: rgba(255, 180, 180, 0.9);
}

body[data-phase="game"] .nav-room-card .nav-surrender-action--desktop:hover:not(:disabled),
body[data-phase="game"][data-view="board"] .nav-room-card .nav-surrender-action--desktop:hover:not(:disabled) {
  color: #ffb4b4;
  background: rgba(255, 112, 112, 0.09);
}

html.touch-device body[data-phase="game"] .view-nav .nav-surrender-action--desktop {
  display: none !important;
}

html.touch-device body[data-phase="game"] .view-nav .nav-surrender-action--mobile:not([hidden]) {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  border: 1px solid rgba(255, 112, 112, 0.24);
  border-radius: 12px;
  padding: 0 14px;
  color: rgba(255, 190, 190, 0.96);
  background: linear-gradient(135deg, rgba(92, 18, 24, 0.5), rgba(36, 12, 16, 0.74));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 26px rgba(0, 0, 0, 0.18);
  font-size: 1rem;
}

html.touch-device body[data-phase="game"] .view-nav .nav-surrender-action--mobile:not([hidden]):hover:not(:disabled),
html.touch-device body[data-phase="game"] .view-nav .nav-surrender-action--mobile:not([hidden]):focus-visible {
  border-color: rgba(255, 150, 150, 0.46);
  color: #ffe2e2;
  background: linear-gradient(135deg, rgba(120, 24, 30, 0.68), rgba(50, 14, 18, 0.84));
}

@media (max-width: 700px) {
  body[data-phase="game"] .nav-room-card,
  body[data-phase="game"][data-view="board"] .nav-room-card {
    flex: 0 0 min(43vw, 180px);
    margin-left: 0;
  }

  body[data-phase="game"] .nav-room-card .nav-room-info {
    min-width: 0;
    padding: 0 7px;
  }

  body[data-phase="game"] .nav-room-card .nav-room-info:first-child {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  body[data-phase="game"] .nav-room-card .nav-turn-info {
    flex: 0 0 45px;
    align-items: center;
    text-align: center;
  }

  body[data-phase="game"] .nav-room-card .nav-player-info,
  body[data-phase="game"] .nav-room-card button {
    display: none;
  }

  body[data-phase="game"] .nav-room-card .nav-room-info span {
    font-size: 0.54rem;
  }

  body[data-phase="game"] .nav-room-card .nav-room-info b {
    font-size: 0.68rem;
  }
}

@media (max-width: 420px) {
  body[data-phase="game"] .nav-room-card,
  body[data-phase="game"][data-view="board"] .nav-room-card {
    flex-basis: 148px;
  }

  body[data-phase="game"] .nav-room-card .nav-room-info span {
    display: none;
  }

  body[data-phase="game"] .nav-room-card .nav-turn-info {
    flex-basis: 38px;
  }
}

/* Financial status popup (opened from freedom-hud leaderboard cards) */
.freedom-player-card[data-financial-player] {
  cursor: pointer;
}
.freedom-player-card[data-financial-player]:hover,
.freedom-player-card[data-financial-player]:focus-visible {
  outline: none;
  border-color: rgba(255, 224, 150, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 224, 150, 0.25);
}
.financial-status-panel {
  position: relative;
  width: var(--modal-w-md);
  max-height: calc(100vh - 40px);
  overflow: visible;
}
.financial-status-panel .landing-finance-sheet {
  max-height: calc(100vh - 40px);
}

html.touch-device #financialStatusModal[data-open="true"] {
  place-items: start center;
  overflow: hidden;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}

html.touch-device #financialStatusModal .financial-status-panel {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
  min-height: 0;
  overflow: hidden;
}

html.touch-device #financialStatusModal .financial-status-panel .landing-finance-sheet {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

html.touch-device #financialStatusModal .financial-status-surrender,
html.touch-device #financialStatusModal .financial-status-change-hint {
  flex: 0 0 auto;
  min-height: 0;
}

.landing-finance-sheet.has-hud-avatar .landing-finance-head {
  grid-template-columns: clamp(124px, 15vw, 148px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-portrait {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: clamp(124px, 15vw, 148px);
  height: clamp(146px, 17vw, 164px);
  isolation: isolate;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-portrait::before {
  position: absolute;
  inset: 14px 14px 10px;
  z-index: 0;
  border: 1px solid rgba(76, 201, 232, 0.34);
  border-radius: 26px 26px 20px 20px;
  content: "";
  background:
    radial-gradient(circle at 50% 17%, rgba(76, 201, 232, 0.2), transparent 4.8rem),
    linear-gradient(180deg, rgba(12, 34, 38, 0.74), rgba(10, 16, 14, 0.18));
  box-shadow:
    0 0 30px rgba(76, 201, 232, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.landing-finance-sheet.has-hud-avatar .landing-finance-portrait::after {
  position: absolute;
  left: 23px;
  right: 15px;
  bottom: 10px;
  z-index: 1;
  height: 18px;
  border-radius: 50%;
  content: "";
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(8px);
}
.landing-finance-sheet.has-hud-avatar .landing-finance-avatar.avatar-portrait[data-career-image="hud"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 2px 2px 24px 24px;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 10px rgba(76, 201, 232, 0.18));
}
.landing-finance-sheet.has-hud-avatar .landing-finance-avatar.avatar-portrait[data-career-image="hud"]::before,
.landing-finance-sheet.has-hud-avatar .landing-finance-avatar.avatar-portrait[data-career-image="hud"]::after {
  display: none;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-avatar.avatar-portrait[data-career-image="hud"] .avatar-image {
  inset: 0;
  background-position: var(--finance-avatar-crop-x, center) var(--finance-avatar-crop-y, 0%);
  background-size: var(--finance-avatar-crop-size, 218%) auto;
  filter:
    drop-shadow(0 11px 12px rgba(0, 0, 0, 0.46))
    drop-shadow(0 -1px 6px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 9px rgba(76, 201, 232, 0.22))
    saturate(1.08)
    contrast(1.04);
}
.landing-finance-sheet.has-hud-avatar .landing-finance-avatar.avatar-portrait[data-career="model"][data-career-image="hud"] .avatar-image {
  --finance-avatar-crop-x: 44%;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-portrait-tag {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  border: 1px solid rgba(243, 191, 85, 0.38);
  border-radius: 6px;
  padding: 5px 9px;
  color: #ffe39a;
  background: rgba(8, 9, 8, 0.82);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-portrait-tag strong {
  color: var(--ink);
  font-size: 0.66rem;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-identity {
  display: grid;
  align-items: start;
  gap: 9px;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-name {
  width: 100%;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-cred {
  width: 100%;
}
.landing-finance-sheet.has-hud-avatar .landing-finance-player .landing-finance-loan {
  width: min(100%, 300px);
  justify-content: space-between;
}
.financial-status-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(20, 20, 18, 0.85);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 900;
}


/* Room code copy button lives inside the room-number cell. */
body[data-phase="game"] .nav-room-card .nav-room-code,
body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code {
  min-width: 214px;
  max-width: min(28vw, 290px);
  padding-right: 10px;
}

body[data-phase="game"] .nav-room-code-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body[data-phase="game"] .nav-room-code-row b {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-phase="game"] .nav-room-card .nav-room-code-row button,
body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code-row button {
  display: inline-flex;
  min-height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(243, 191, 85, 0.18);
  border-radius: 6px;
  padding: 0 9px;
  color: rgba(247, 240, 223, 0.82);
  background: rgba(243, 191, 85, 0.075);
  box-shadow: none;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  transform: none;
}

body[data-phase="game"] .nav-room-card .nav-room-code-row button:hover:not(:disabled),
body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code-row button:hover:not(:disabled) {
  color: #15130f;
  background: #f3bf55;
  box-shadow: none;
  transform: none;
}

@media (max-width: 700px) {
  body[data-phase="game"] .nav-room-card .nav-room-code,
  body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code {
    min-width: 0;
    max-width: none;
    padding-right: 7px;
  }

  body[data-phase="game"] .nav-room-card .nav-room-code-row button,
  body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code-row button {
    display: inline-flex;
    min-height: 20px;
    padding: 0 6px;
    font-size: 0.52rem;
  }
}

@media (max-width: 420px) {
  body[data-phase="game"] .nav-room-code-row {
    gap: 5px;
  }

  body[data-phase="game"] .nav-room-card .nav-room-code-row button,
  body[data-phase="game"][data-view="board"] .nav-room-card .nav-room-code-row button {
    min-height: 18px;
    padding: 0 5px;
  }
}

/* Restore the dice target preview after the current board skin overrides. */
.route-board .tile.target-landing,
.route-board.rat-board .tile.target-landing,
.route-board.fast-board .tile.target-landing,
.play-board.view-flat .route-board.fast-board .tile.target-landing {
  z-index: 80 !important;
  transform-origin: center center !important;
  translate: 0 0;
  scale: 1;
  will-change: translate, scale;
  animation: target-landing-bounce 560ms cubic-bezier(0.22, 1, 0.36, 1) 0s 2 !important;
}

body.spectator-turn[data-phase="game"][data-view="board"] .route-board .tile.target-landing {
  filter: none !important;
}

@keyframes target-landing-bounce {
  0% {
    translate: 0 0;
    scale: 1.014 0.986;
  }
  18% {
    translate: 0 -11px;
    scale: 0.986 1.084;
  }
  42% {
    translate: 0 -5px;
    scale: 1.028 0.993;
  }
  66% {
    translate: 0 -1px;
    scale: 1.014 1.014;
  }
  100% {
    translate: 0 0;
    scale: 1.014 0.986;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-board .tile.target-landing,
  .route-board.rat-board .tile.target-landing,
  .route-board.fast-board .tile.target-landing,
  .play-board.view-flat .route-board.fast-board .tile.target-landing {
    translate: 0 0 !important;
    scale: 1.06 !important;
    animation: none !important;
  }
}

/* Waiting room dream-centered layout. Scoped to the lobby waiting phase only. */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .app-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 10px;
  }
}

body[data-phase="waiting"] .waiting-view,
body[data-phase="waiting"] .waiting-panel {
  height: 100%;
  min-height: 0;
}

body[data-phase="waiting"] .waiting-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 48% 12%, rgba(141, 124, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 18% 0%, rgba(76, 201, 232, 0.09), transparent 28rem),
    linear-gradient(160deg, rgba(32, 29, 25, 0.94), rgba(14, 15, 15, 0.97));
}

body[data-phase="waiting"] .waiting-head {
  display: grid;
  grid-template-columns: minmax(190px, 0.46fr) minmax(360px, 1fr) auto;
  gap: 14px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 224, 150, 0.12);
  padding: 14px 18px 12px;
}

body[data-phase="waiting"] .waiting-head h2 {
  font-size: clamp(1.8rem, 3.2vw, 3.6rem);
  line-height: 0.86;
}

body[data-phase="waiting"] .waiting-head .muted {
  max-width: 42ch;
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.34;
}

body[data-phase="waiting"] .waiting-head button {
  min-height: 38px;
  align-self: center;
  padding: 0 13px;
}

.waiting-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.waiting-meta-tile {
  display: grid;
  min-height: 50px;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(0, 0, 0, 0.22);
}

.waiting-meta-tile span {
  color: rgba(255, 224, 150, 0.74);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.waiting-meta-tile b {
  color: var(--ink);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.waiting-dream-spotlight {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  min-height: 0;
  overflow: hidden;
  padding: 11px 18px 12px;
}

.waiting-dream-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.waiting-dream-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.24rem);
  line-height: 1.08;
}

.waiting-dream-head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(141, 124, 255, 0.28);
  border-radius: 999px;
  padding: 5px 10px;
  color: rgba(247, 240, 223, 0.72);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 950;
}

.waiting-dream-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(141, 124, 255, 0.44);
  border-radius: 8px;
  background:
    radial-gradient(circle at 26% 0%, rgba(141, 124, 255, 0.25), transparent 25rem),
    radial-gradient(circle at 96% 78%, rgba(76, 201, 232, 0.13), transparent 20rem),
    rgba(10, 10, 11, 0.74);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(141, 124, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.waiting-dream-art {
  position: relative;
  display: grid;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 224, 150, 0.16);
  place-items: center;
  background: rgba(0, 0, 0, 0.3);
}

.waiting-dream-art img {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(1.06) contrast(1.04) saturate(1.04);
  object-fit: cover;
}

.waiting-dream-art::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at 50% 10%, rgba(255, 224, 150, 0.14), transparent 42%);
  content: "";
}

.waiting-dream-fallback {
  color: rgba(247, 240, 223, 0.46);
  font-size: 2rem;
  font-weight: 950;
  text-transform: uppercase;
}

.waiting-dream-copy {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 13px;
  min-width: 0;
  padding: clamp(18px, 2.1vw, 30px);
}

.waiting-dream-copy .eyebrow {
  color: #b8a7ff;
}

.waiting-dream-copy h4 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.25vw, 3.9rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.waiting-dream-copy p:not(.eyebrow) {
  margin: 0;
  color: rgba(247, 240, 223, 0.74);
  font-size: clamp(0.82rem, 1vw, 1rem);
  font-weight: 720;
  line-height: 1.46;
}

.waiting-dream-price {
  display: grid;
  gap: 5px;
  align-self: end;
  border-top: 1px solid rgba(141, 124, 255, 0.22);
  border-bottom: 1px solid rgba(141, 124, 255, 0.22);
  padding: 12px 0;
}

.waiting-dream-price span {
  color: rgba(247, 240, 223, 0.62);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.waiting-dream-price b {
  color: #b8a7ff;
  font-size: clamp(2rem, 3.05vw, 3.65rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.waiting-dream-nav {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.waiting-dream-nav button {
  display: grid;
  width: 38px;
  min-height: 38px;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  color: var(--gold-2);
  font-size: 1.1rem;
}

.waiting-dream-nav span {
  justify-self: end;
  color: rgba(247, 240, 223, 0.54);
  font-size: 0.72rem;
  font-weight: 760;
  text-align: right;
}

.waiting-dream-empty {
  display: grid;
  min-height: 180px;
  place-content: center;
  border: 1px dashed rgba(141, 124, 255, 0.26);
  border-radius: 8px;
  text-align: center;
}

.waiting-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 220px;
  border-top: 1px solid rgba(255, 224, 150, 0.18);
  padding: 10px 18px 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.3)),
    rgba(18, 16, 14, 0.76);
}

.waiting-setup-column {
  display: grid;
  grid-template-columns: minmax(100px, 0.2fr) minmax(360px, 0.5fr) minmax(290px, 0.3fr);
  grid-template-rows: auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.waiting-console-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.waiting-console-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}

body[data-phase="waiting"] .waiting-setup-grid {
  grid-template-columns: minmax(120px, 0.42fr) minmax(200px, 0.58fr);
  gap: 7px;
  min-width: 0;
}

body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) {
  grid-template-columns: minmax(100px, 0.2fr) minmax(0, 0.8fr);
}

body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) .waiting-setup-grid {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-phase="waiting"] .rename-panel,
body[data-phase="waiting"] .waiting-bot-panel {
  padding: 8px;
}

body[data-phase="waiting"] .waiting-field-head label {
  font-size: 0.62rem;
  font-weight: 950;
}

body[data-phase="waiting"] .autosave-status {
  font-size: 0.58rem;
}

body[data-phase="waiting"] .waiting-field-shell,
body[data-phase="waiting"] .waiting-token-shell {
  padding: 4px;
}

body[data-phase="waiting"] .waiting-field-shell input,
body[data-phase="waiting"] .waiting-token-shell select {
  min-height: 34px;
  font-size: 0.78rem;
}

body[data-phase="waiting"] .waiting-token-shell {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px;
}

body[data-phase="waiting"] .waiting-token-preview img {
  width: 32px;
  height: 32px;
}

body[data-phase="waiting"] .waiting-bot-panel {
  grid-template-columns: minmax(96px, 0.44fr) minmax(0, 0.56fr);
  align-content: start;
  gap: 8px;
}

body[data-phase="waiting"] .waiting-bot-panel h3 {
  font-size: 0.9rem;
}

body[data-phase="waiting"] .waiting-bot-panel .muted {
  font-size: 0.66rem;
}

body[data-phase="waiting"] .bot-control-row {
  grid-template-columns: minmax(96px, 1fr) auto;
  gap: 6px;
}

body[data-phase="waiting"] .bot-control-row label {
  grid-column: 1 / -1;
}

body[data-phase="waiting"] .bot-control-row select,
body[data-phase="waiting"] .bot-control-row button {
  min-height: 34px;
  font-size: 0.74rem;
}

body[data-phase="waiting"] .waiting-roster {
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

body[data-phase="waiting"] .waiting-section {
  gap: 6px;
}

body[data-phase="waiting"] .waiting-section-head span,
body[data-phase="waiting"] .waiting-section-head b {
  font-size: 0.68rem;
}

body[data-phase="waiting"] .waiting-seat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body[data-phase="waiting"] .waiting-seat {
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 7px;
}

body[data-phase="waiting"] .seat-index {
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
}

body[data-phase="waiting"] .waiting-seat strong {
  font-size: 0.88rem;
}

body[data-phase="waiting"] .waiting-seat small {
  font-size: 0.68rem;
}

body[data-phase="waiting"] .waiting-seat .avatar-portrait {
  width: 38px;
  height: 38px;
}

body[data-phase="waiting"] .waiting-remove-player {
  height: 20px;
  padding: 0;
  font-size: 0.64rem;
}

@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body[data-phase="waiting"] .waiting-seat {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 44px;
  }

  body[data-phase="waiting"] .waiting-seat .avatar-portrait {
    display: none;
  }

  body[data-phase="waiting"] .observer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-phase="waiting"] .side-panel {
  gap: 10px;
  align-self: start;
  align-content: start;
  padding: 12px;
}

body[data-phase="waiting"] .control-grid {
  gap: 8px;
}

body[data-phase="waiting"] .control-grid button {
  min-height: 58px;
  font-size: 0.82rem;
}

body[data-phase="waiting"] .action-summary {
  padding: 12px;
}

@media (min-width: 1181px) and (max-height: 820px) {
  body[data-phase="waiting"] .waiting-head {
    padding: 10px 16px 9px;
  }

  body[data-phase="waiting"] .waiting-head h2 {
    font-size: clamp(1.55rem, 3vw, 2.8rem);
  }

  body[data-phase="waiting"] .waiting-head .muted {
    font-size: 0.75rem;
    line-height: 1.22;
  }

  .waiting-meta-tile {
    min-height: 44px;
    padding: 6px 8px;
  }

  .waiting-dream-spotlight {
    gap: 7px;
    padding: 8px 16px 9px;
  }

  .waiting-dream-copy {
    gap: 9px;
    padding: 18px 22px;
  }

  .waiting-dream-copy h4 {
    font-size: clamp(1.74rem, 2.9vw, 3.1rem);
  }

  .waiting-dream-price {
    padding: 9px 0;
  }

  .waiting-console-grid {
    min-height: 212px;
    padding: 8px 16px 10px;
  }

  body[data-phase="waiting"] .waiting-seat {
    min-height: 50px;
  }
}

@media (min-width: 1181px) and (max-height: 920px) {
  body[data-phase="waiting"] .waiting-head {
    padding: 9px 16px 8px;
  }

  body[data-phase="waiting"] .waiting-head h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.9rem);
  }

  body[data-phase="waiting"] .waiting-head .muted {
    margin-top: 4px;
    font-size: 0.74rem;
    line-height: 1.22;
  }

  .waiting-meta-tile {
    min-height: 42px;
    padding: 6px 8px;
  }

  .waiting-dream-spotlight {
    gap: 6px;
    padding: 8px 16px;
  }

  .waiting-dream-head h3 {
    font-size: 1rem;
  }

  .waiting-dream-copy {
    gap: 8px;
    padding: 16px 22px;
  }

  .waiting-dream-copy h4 {
    font-size: clamp(1.7rem, 2.75vw, 3rem);
  }

  .waiting-dream-copy p:not(.eyebrow) {
    font-size: 0.82rem;
    line-height: 1.34;
  }

  .waiting-dream-price {
    padding: 8px 0;
  }

  .waiting-dream-price b {
    font-size: clamp(1.7rem, 2.7vw, 3rem);
  }

  .waiting-dream-nav button {
    width: 34px;
    min-height: 34px;
  }

  .waiting-console-grid {
    min-height: 214px;
    padding: 7px 16px 8px;
  }

  body[data-phase="waiting"] .rename-panel,
  body[data-phase="waiting"] .waiting-bot-panel {
    padding: 6px;
  }

  body[data-phase="waiting"] .waiting-field-shell input,
  body[data-phase="waiting"] .waiting-token-shell select,
  body[data-phase="waiting"] .bot-control-row select,
  body[data-phase="waiting"] .bot-control-row button {
    min-height: 30px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .waiting-token-preview img {
    width: 28px;
    height: 28px;
  }

  body[data-phase="waiting"] .waiting-bot-panel .muted {
    display: none;
  }

  body[data-phase="waiting"] .waiting-seat {
    min-height: 44px;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    padding: 5px 6px;
  }

  body[data-phase="waiting"] .seat-index {
    width: 28px;
    height: 28px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .waiting-seat strong {
    font-size: 0.78rem;
  }

  body[data-phase="waiting"] .waiting-seat small {
    font-size: 0.6rem;
  }

  body[data-phase="waiting"] .waiting-seat .avatar-portrait {
    width: 32px;
    height: 32px;
  }

  body[data-phase="waiting"] .control-grid button {
    min-height: 52px;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .game-client {
    padding: 6px 0;
  }

  body[data-phase="waiting"] .app-shell {
    gap: 6px;
  }

  body[data-phase="waiting"] .app-topbar {
    min-height: 48px;
    padding: 5px 10px;
  }

  body[data-phase="waiting"] .top-brand {
    gap: 10px;
  }

  body[data-phase="waiting"] .top-brand h1 {
    font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  }

  body[data-phase="waiting"] .top-brand .eyebrow {
    max-width: 28ch;
    font-size: 0.58rem;
  }

  body[data-phase="waiting"] .app-workspace {
    gap: 8px;
  }

  body[data-phase="waiting"] .waiting-head {
    grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 6px 12px;
  }

  body[data-phase="waiting"] .waiting-head h2 {
    font-size: clamp(1.45rem, 2.7vw, 2.35rem);
  }

  body[data-phase="waiting"] .waiting-head .muted {
    display: none;
  }

  body[data-phase="waiting"] .waiting-head button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .waiting-meta-grid {
    gap: 5px;
  }

  .waiting-meta-tile {
    min-height: 36px;
    gap: 2px;
    padding: 5px 7px;
  }

  .waiting-meta-tile span {
    font-size: 0.55rem;
  }

  .waiting-meta-tile b {
    font-size: 0.8rem;
  }

  .waiting-dream-spotlight {
    gap: 4px;
    padding: 5px 12px 6px;
  }

  .waiting-dream-head {
    align-items: center;
  }

  .waiting-dream-head h3 {
    margin: 0;
    font-size: 0.82rem;
  }

  .waiting-dream-head .eyebrow {
    display: none;
  }

  .waiting-dream-head > span {
    padding: 3px 8px;
    font-size: 0.62rem;
  }

  .waiting-dream-card {
    grid-template-columns: minmax(220px, 0.76fr) minmax(310px, 1.24fr);
  }

  .waiting-dream-copy {
    gap: 5px;
    padding: 10px 16px;
  }

  .waiting-dream-copy .eyebrow {
    font-size: 0.58rem;
  }

  .waiting-dream-copy h4 {
    font-size: clamp(1.45rem, 2.45vw, 2.25rem);
    line-height: 1.03;
  }

  .waiting-dream-copy p:not(.eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.26;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .waiting-dream-price {
    gap: 2px;
    padding: 5px 0;
  }

  .waiting-dream-price span {
    font-size: 0.58rem;
  }

  .waiting-dream-price b {
    font-size: clamp(1.42rem, 2.4vw, 2.25rem);
  }

  .waiting-dream-nav {
    gap: 6px;
  }

  .waiting-dream-nav button {
    width: 28px;
    min-height: 28px;
    font-size: 0.9rem;
  }

  .waiting-dream-nav span {
    font-size: 0.6rem;
  }

  .waiting-console-grid {
    min-height: 148px;
    gap: 5px;
    padding: 5px 12px 6px;
  }

  .waiting-setup-column {
    grid-template-columns: minmax(70px, 0.12fr) minmax(330px, 0.5fr) minmax(245px, 0.38fr);
    gap: 5px;
  }

  .waiting-console-head h3 {
    margin-top: 2px;
    font-size: 0.78rem;
  }

  body[data-phase="waiting"] .waiting-setup-grid {
    gap: 5px;
  }

  body[data-phase="waiting"] .rename-panel,
  body[data-phase="waiting"] .waiting-bot-panel {
    border-radius: 6px;
    padding: 4px;
  }

  body[data-phase="waiting"] .waiting-field-head label,
  body[data-phase="waiting"] .bot-control-row label {
    font-size: 0.54rem;
  }

  body[data-phase="waiting"] .autosave-status {
    font-size: 0.52rem;
  }

  body[data-phase="waiting"] .waiting-field-shell,
  body[data-phase="waiting"] .waiting-token-shell {
    padding: 3px;
  }

  body[data-phase="waiting"] .waiting-field-shell input,
  body[data-phase="waiting"] .waiting-token-shell select,
  body[data-phase="waiting"] .bot-control-row select,
  body[data-phase="waiting"] .bot-control-row button {
    min-height: 27px;
    font-size: 0.66rem;
  }

  body[data-phase="waiting"] .waiting-token-shell {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
  }

  body[data-phase="waiting"] .waiting-token-preview img {
    width: 26px;
    height: 26px;
  }

  body[data-phase="waiting"] .waiting-bot-panel {
    grid-template-columns: minmax(86px, 0.38fr) minmax(0, 0.62fr);
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-bot-panel h3 {
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .bot-control-row {
    gap: 4px;
  }

  body[data-phase="waiting"] .waiting-roster,
  body[data-phase="waiting"] .waiting-section {
    gap: 4px;
  }

  body[data-phase="waiting"] .waiting-section-head span,
  body[data-phase="waiting"] .waiting-section-head b {
    font-size: 0.58rem;
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    gap: 4px;
  }

  body[data-phase="waiting"] .waiting-seat {
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 4px 5px;
  }

  body[data-phase="waiting"] .seat-index {
    width: 24px;
    height: 24px;
    font-size: 0.64rem;
  }

  body[data-phase="waiting"] .waiting-seat strong {
    font-size: 0.68rem;
  }

  body[data-phase="waiting"] .waiting-seat small {
    font-size: 0.54rem;
  }

  body[data-phase="waiting"] .side-panel {
    gap: 7px;
    padding: 10px;
  }

  body[data-phase="waiting"] .control-grid button {
    min-height: 40px;
    font-size: 0.72rem;
  }

  body[data-phase="waiting"] .action-summary {
    padding: 9px;
  }

  body[data-phase="waiting"] .action-summary h3 {
    font-size: 0.9rem;
  }

  body[data-phase="waiting"] .action-summary .muted,
  body[data-phase="waiting"] .status-text {
    font-size: 0.68rem;
    line-height: 1.28;
  }
}

@media (max-width: 1180px) {
  body[data-phase="waiting"] .waiting-panel {
    grid-template-rows: auto auto auto;
    overflow: visible;
  }

  body[data-phase="waiting"] .waiting-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
  }

  body[data-phase="waiting"] .waiting-meta-grid {
    grid-column: 1 / -1;
    order: 3;
  }

  body[data-phase="waiting"] .waiting-dream-spotlight {
    min-height: 420px;
    padding: 9px;
  }

  body[data-phase="waiting"] .waiting-console-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 9px;
  }

  body[data-phase="waiting"] .waiting-setup-column,
  body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) .waiting-setup-grid {
    grid-column: auto;
  }

  body[data-phase="waiting"] .waiting-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-phase="waiting"] .waiting-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-phase="waiting"] .waiting-dream-spotlight {
    min-height: 0;
  }

  body[data-phase="waiting"] .waiting-dream-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-dream-art {
    min-height: 210px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 224, 150, 0.16);
  }

  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: 1.7rem;
  }

  body[data-phase="waiting"] .waiting-dream-nav {
    grid-template-columns: auto auto;
  }

  body[data-phase="waiting"] .waiting-dream-nav span {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }

  body[data-phase="waiting"] .waiting-setup-grid,
  body[data-phase="waiting"] .waiting-bot-panel,
  body[data-phase="waiting"] .bot-control-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Waiting room mockup-aligned layout. Desktop only; game/lobby views keep their own panels. */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .game-client {
    width: min(2000px, calc(100vw - 48px));
  }

  body[data-phase="waiting"] .app-workspace {
    --waiting-rail-width: clamp(340px, 21.5vw, 420px);
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  body[data-phase="waiting"] .app-views,
  body[data-phase="waiting"] .waiting-view,
  body[data-phase="waiting"] .waiting-panel {
    width: 100%;
    min-height: 0;
  }

  body[data-phase="waiting"] .waiting-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid rgba(255, 224, 150, 0.22);
    background:
      linear-gradient(90deg, rgba(76, 201, 232, 0.08), rgba(141, 124, 255, 0.12) 44%, rgba(0, 0, 0, 0.12)),
      linear-gradient(180deg, rgba(35, 33, 29, 0.86), rgba(10, 10, 9, 0.95));
  }

  body[data-phase="waiting"] .waiting-head {
    grid-template-columns: minmax(250px, 0.25fr) minmax(320px, 0.28fr) minmax(460px, 0.44fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 116px;
    padding: 18px 20px 14px;
  }

  body[data-phase="waiting"] .waiting-title-block h2 {
    margin-top: 4px;
    font-size: clamp(3rem, 4.1vw, 4.4rem);
    line-height: 0.84;
  }

  body[data-phase="waiting"] .waiting-head-copy {
    max-width: 42ch;
    margin: 0;
    color: rgba(247, 240, 223, 0.7);
    font-size: clamp(0.76rem, 0.9vw, 0.94rem);
    font-weight: 850;
    line-height: 1.35;
  }

  body[data-phase="waiting"] .waiting-meta-grid {
    align-self: center;
    gap: 8px;
  }

  body[data-phase="waiting"] .waiting-meta-tile {
    min-height: 52px;
    border-color: rgba(255, 224, 150, 0.18);
    background: rgba(0, 0, 0, 0.28);
  }

  body[data-phase="waiting"] .waiting-head button {
    width: auto;
    min-width: 68px;
    min-height: 42px;
    justify-self: end;
  }

  body[data-phase="waiting"] #sidePanelToggle,
  body[data-phase="waiting"] #freedomHud {
    display: none !important;
  }

  body[data-phase="waiting"] .side-panel {
    position: absolute;
    top: 132px;
    right: 20px;
    z-index: 5;
    width: var(--waiting-rail-width);
    max-height: calc(100% - 148px);
    align-self: auto;
    align-content: start;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 224, 150, 0.22);
    border-radius: 8px;
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(37, 32, 26, 0.88), rgba(9, 9, 8, 0.95)),
      rgba(0, 0, 0, 0.42);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  body[data-phase="waiting"] .side-panel .room-header {
    min-height: 54px;
    padding-bottom: 8px;
  }

  body[data-phase="waiting"] .side-panel .room-header h2 {
    font-size: 0.9rem;
  }

  body[data-phase="waiting"] .side-panel .room-header button {
    min-height: 34px;
    padding: 0 11px;
  }

  body[data-phase="waiting"] .side-panel .control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-phase="waiting"] .side-panel .control-grid button {
    min-height: 58px;
  }

  body[data-phase="waiting"] .side-panel .action-summary {
    position: relative;
    min-height: 112px;
    padding: 12px;
    border-color: rgba(76, 201, 232, 0.2);
    background:
      linear-gradient(135deg, rgba(76, 201, 232, 0.1), rgba(106, 255, 162, 0.04)),
      rgba(255, 255, 255, 0.04);
  }

  body[data-phase="waiting"] .side-panel .action-summary::after {
    display: block;
    width: 100%;
    height: 7px;
    margin-top: 12px;
    border-radius: 999px;
    background:
      linear-gradient(90deg, rgba(106, 255, 162, 0.85) 0 34%, rgba(255, 255, 255, 0.12) 34% 100%);
    content: "";
  }

  body[data-phase="waiting"] .side-panel .action-summary h3 {
    font-size: 1.05rem;
  }

  body[data-phase="waiting"] .side-panel .status-text {
    min-height: 96px;
    margin: 0;
    border: 1px solid rgba(255, 224, 150, 0.14);
    border-radius: 8px;
    padding: 12px;
    color: rgba(247, 240, 223, 0.68);
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.74rem;
    line-height: 1.48;
  }

  body[data-phase="waiting"] .waiting-dream-spotlight {
    min-height: 0;
    padding: 10px calc(var(--waiting-rail-width) + 40px) 12px 20px;
  }

  body[data-phase="waiting"] .waiting-dream-card {
    grid-template-columns: minmax(390px, 0.46fr) minmax(430px, 0.54fr);
  }

  body[data-phase="waiting"] .waiting-dream-copy {
    padding: clamp(22px, 2.45vw, 36px);
  }

  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: clamp(2.55rem, 3.8vw, 4.55rem);
  }

  body[data-phase="waiting"] .waiting-dream-price b {
    font-size: clamp(2.35rem, 3.65vw, 4.15rem);
  }

  body[data-phase="waiting"] .waiting-console-grid {
    grid-template-columns: minmax(420px, 0.48fr) minmax(0, 0.52fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 14px;
    min-height: 196px;
    padding: 12px 20px 16px;
  }

  body[data-phase="waiting"] .waiting-setup-column,
  body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  body[data-phase="waiting"] .waiting-console-head {
    grid-column: 1 / -1;
    min-height: 34px;
  }

  body[data-phase="waiting"] .waiting-setup-grid,
  body[data-phase="waiting"] .waiting-setup-column:has(.waiting-bot-panel[hidden]) .waiting-setup-grid {
    display: contents;
  }

  body[data-phase="waiting"] .rename-panel,
  body[data-phase="waiting"] .waiting-bot-panel {
    min-width: 0;
    min-height: 122px;
    padding: 8px;
  }

  body[data-phase="waiting"] .waiting-bot-panel {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  }

  body[data-phase="waiting"] .waiting-bot-panel .muted {
    display: none;
  }

  body[data-phase="waiting"] .waiting-field-shell input,
  body[data-phase="waiting"] .waiting-token-shell select,
  body[data-phase="waiting"] .bot-control-row select,
  body[data-phase="waiting"] .bot-control-row button {
    min-height: 34px;
  }

  body[data-phase="waiting"] .waiting-roster {
    align-self: stretch;
    gap: 6px;
    overflow: hidden;
  }

  body[data-phase="waiting"] .waiting-roster > .waiting-section {
    height: 100%;
    min-height: 0;
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(56px, 1fr));
    gap: 8px;
  }

  body[data-phase="waiting"] .waiting-seat {
    min-height: 56px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding: 7px 8px;
  }

  body[data-phase="waiting"] .waiting-seat .avatar-portrait {
    display: block;
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .app-workspace {
    --waiting-rail-width: clamp(320px, 23vw, 350px);
  }

  body[data-phase="waiting"] .waiting-head {
    grid-template-columns: minmax(170px, 0.2fr) minmax(250px, 0.28fr) minmax(430px, 0.48fr) auto;
    min-height: 70px;
    padding: 7px 12px;
  }

  body[data-phase="waiting"] .waiting-title-block h2 {
    font-size: clamp(1.85rem, 3vw, 2.55rem);
  }

  body[data-phase="waiting"] .waiting-head-copy {
    display: block;
    font-size: 0.66rem;
    line-height: 1.24;
  }

  body[data-phase="waiting"] .waiting-meta-tile {
    min-height: 36px;
    padding: 5px 7px;
  }

  body[data-phase="waiting"] .side-panel {
    top: 82px;
    right: 12px;
    max-height: calc(100% - 94px);
    gap: 7px;
    padding: 9px;
  }

  body[data-phase="waiting"] .side-panel .room-header {
    min-height: 42px;
  }

  body[data-phase="waiting"] .side-panel .control-grid button {
    min-height: 40px;
  }

  body[data-phase="waiting"] .side-panel .action-summary {
    min-height: 78px;
    padding: 9px;
  }

  body[data-phase="waiting"] .side-panel .status-text {
    min-height: 64px;
    padding: 9px;
    font-size: 0.62rem;
    line-height: 1.36;
  }

  body[data-phase="waiting"] .waiting-dream-spotlight {
    padding: 5px calc(var(--waiting-rail-width) + 26px) 6px 12px;
  }

  body[data-phase="waiting"] .waiting-dream-card {
    grid-template-columns: minmax(300px, 0.43fr) minmax(380px, 0.57fr);
  }

  body[data-phase="waiting"] .waiting-dream-copy {
    padding: 10px 16px;
  }

  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: clamp(1.55rem, 2.65vw, 2.45rem);
  }

  body[data-phase="waiting"] .waiting-console-grid {
    min-height: 148px;
    gap: 8px;
    padding: 6px 12px 8px;
  }

  body[data-phase="waiting"] .rename-panel,
  body[data-phase="waiting"] .waiting-bot-panel {
    min-height: 92px;
    padding: 5px;
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-rows: repeat(2, minmax(36px, 1fr));
    gap: 5px;
  }

  body[data-phase="waiting"] .waiting-seat {
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 4px 5px;
  }

  body[data-phase="waiting"] .waiting-seat .avatar-portrait {
    display: none;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body[data-phase="waiting"] .waiting-bot-panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 5px;
    overflow: hidden;
  }

  body[data-phase="waiting"] .bot-control-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body[data-phase="waiting"] .bot-control-row select {
    min-width: 0;
  }

  body[data-phase="waiting"] .bot-control-row button {
    min-width: 54px;
    padding: 0 8px;
  }
}

/* Waiting room v3 polish: dream-first hierarchy and real lobby progress. */
.waiting-dream-mobile-summary {
  display: none;
}

@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-head {
    min-height: 104px;
    grid-template-columns: minmax(220px, 0.22fr) minmax(320px, 0.3fr) minmax(460px, 0.44fr) auto;
  }

  body[data-phase="waiting"] .waiting-title-block h2 {
    font-size: clamp(2.55rem, 3.35vw, 3.75rem);
  }

  body[data-phase="waiting"] .waiting-head-copy {
    color: rgba(247, 240, 223, 0.62);
    font-size: clamp(0.7rem, 0.82vw, 0.86rem);
  }

  body[data-phase="waiting"] .waiting-head button {
    border-color: rgba(255, 224, 150, 0.2);
    color: rgba(247, 240, 223, 0.78);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
  }

  body[data-phase="waiting"] .waiting-head button:hover {
    color: var(--ink);
    background: rgba(243, 191, 85, 0.12);
  }

  body[data-phase="waiting"] .waiting-dream-card {
    grid-template-columns: minmax(410px, 0.48fr) minmax(430px, 0.52fr);
  }

  body[data-phase="waiting"] .waiting-dream-copy {
    padding: clamp(20px, 2.05vw, 32px);
  }

  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: clamp(2.25rem, 3.25vw, 4rem);
    line-height: 1.04;
  }

  body[data-phase="waiting"] .waiting-dream-price b {
    font-size: clamp(2.25rem, 3.25vw, 3.8rem);
  }

  body[data-phase="waiting"] .side-panel .action-summary::after {
    display: none;
  }

  body[data-phase="waiting"] .lobby-ready-meter {
    display: grid;
    gap: 6px;
    margin-top: 12px;
  }

  body[data-phase="waiting"] .lobby-ready-meter::before {
    display: block;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background:
      linear-gradient(90deg, rgba(106, 255, 162, 0.86) 0 var(--ready-progress, 0%), rgba(255, 255, 255, 0.12) var(--ready-progress, 0%) 100%);
    box-shadow: 0 0 18px rgba(106, 255, 162, 0.16);
    content: "";
  }

  body[data-phase="waiting"] .lobby-ready-meter span {
    color: rgba(247, 240, 223, 0.62);
    font-size: 0.66rem;
    font-weight: 900;
  }

  body[data-phase="waiting"] .waiting-seat.empty {
    border-color: rgba(255, 224, 150, 0.08);
    background: rgba(0, 0, 0, 0.2);
    opacity: 0.62;
  }

  body[data-phase="waiting"] .waiting-seat.empty .seat-index {
    opacity: 0.85;
  }

  body[data-phase="waiting"] .waiting-seat.creator {
    border-color: rgba(255, 199, 92, 0.62);
    background:
      linear-gradient(135deg, rgba(243, 191, 85, 0.16), rgba(255, 255, 255, 0.04)),
      rgba(0, 0, 0, 0.3);
    box-shadow: inset 3px 0 0 rgba(243, 191, 85, 0.82);
  }

  body[data-phase="waiting"] .creator-pill {
    color: var(--gold);
    font-size: 0.58rem;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: clamp(1.85rem, 3.05vw, 3.15rem);
  }

  body[data-phase="waiting"] .waiting-dream-price b {
    font-size: clamp(1.95rem, 3.1vw, 3.2rem);
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .waiting-head {
    min-height: 64px;
  }

  body[data-phase="waiting"] .waiting-title-block h2 {
    font-size: clamp(1.62rem, 2.55vw, 2.25rem);
  }

  body[data-phase="waiting"] .waiting-head-copy {
    font-size: 0.62rem;
  }

  body[data-phase="waiting"] .waiting-dream-copy h4 {
    font-size: clamp(1.42rem, 2.38vw, 2.18rem);
  }

  body[data-phase="waiting"] .waiting-dream-price b {
    font-size: clamp(1.42rem, 2.42vw, 2.2rem);
  }

  body[data-phase="waiting"] .lobby-ready-meter {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  body[data-phase="waiting"] .waiting-dream-spotlight {
    grid-template-rows: auto auto auto auto;
    min-height: auto;
    overflow: visible;
  }

  body[data-phase="waiting"] .waiting-dream-mobile-summary {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(141, 124, 255, 0.24);
    border-radius: 8px;
    padding: 9px 10px;
    background: rgba(0, 0, 0, 0.18);
  }

  body[data-phase="waiting"] .waiting-dream-mobile-summary h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.12;
  }

  body[data-phase="waiting"] .waiting-dream-mobile-summary b {
    color: #b8a7ff;
    font-size: 1.28rem;
    line-height: 1;
  }

  body[data-phase="waiting"] .waiting-dream-copy {
    display: none;
  }

  body[data-phase="waiting"] .waiting-dream-art {
    min-height: 180px;
    border-bottom: 0;
  }

  body[data-phase="waiting"] .waiting-dream-card {
    min-height: 180px;
  }

  body[data-phase="waiting"] .waiting-dream-nav {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-dream-nav span {
    grid-column: auto;
    justify-self: end;
    text-align: right;
  }
}

/* ===== Waiting room usability upgrades ===== */

.waiting-seat.filled {
  grid-template-columns: 24px auto minmax(0, 1fr) auto;
}

.seat-token {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 224, 150, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.seat-token img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.seat-ready {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 900;
  white-space: nowrap;
}

.seat-ready.is-ready {
  color: var(--green);
}

.seat-ready.waiting {
  color: var(--red);
}

.waiting-seat.empty {
  grid-template-columns: 24px minmax(0, 1fr);
}

.seat-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.seat-actions button {
  flex: 1;
  min-height: 26px;
  border-radius: 7px;
  padding: 0 6px;
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: none;
}

.seat-actions .seat-add-bot {
  border: 1px solid rgba(255, 224, 150, 0.22);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}

.seat-actions .seat-add-bot:hover:not(:disabled) {
  color: #241a05;
  background: var(--gold);
}

.start-hint {
  margin: 2px 0 0;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.45;
}

.start-hint.all-ready {
  color: var(--green);
}

#readyButton.attention {
  animation: ready-pulse 1.8s ease-in-out infinite;
}

@keyframes ready-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(243, 191, 85, 0.45), 0 0 14px rgba(243, 191, 85, 0.3);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(243, 191, 85, 0), 0 0 26px rgba(243, 191, 85, 0.55);
  }
}

#readyButton.is-ready {
  border-color: rgba(82, 211, 125, 0.6);
  color: #08150c;
  background: linear-gradient(180deg, #8fe7ab, var(--green));
}

.waiting-dream-preview-badge {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  border: 1px solid rgba(243, 191, 85, 0.6);
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--gold);
  background: rgba(17, 16, 15, 0.82);
  font-size: 0.66rem;
  font-weight: 850;
  backdrop-filter: blur(4px);
}

.waiting-dream-nav {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.waiting-dream-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.waiting-dream-nav .waiting-dream-dot {
  width: 9px;
  min-height: 9px;
  height: 9px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  transition: width 200ms var(--move), background-color 200ms ease;
}

.waiting-dream-nav .waiting-dream-dot.on {
  width: 22px;
  background: var(--gold);
}

.waiting-dream-auto-note {
  justify-self: end;
  color: rgba(247, 240, 223, 0.54);
  font-size: 0.72rem;
  font-weight: 760;
  text-align: right;
}

.lobby-invite {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 224, 150, 0.16);
  padding-top: 12px;
}

.lobby-invite-label {
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lobby-invite-row {
  display: flex;
  gap: 7px;
}

.lobby-invite-link {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--cyan);
  background: rgba(17, 16, 15, 0.7);
  font-size: 0.68rem;
  text-overflow: ellipsis;
}

.lobby-invite-row button {
  min-height: 34px;
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 0 12px;
  color: #241a05;
  background: linear-gradient(180deg, #ffd678, var(--gold));
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: none;
}

.lobby-invite-foot {
  display: flex;
  gap: 11px;
  align-items: center;
}

.lobby-invite-qr {
  flex: none;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
}

.lobby-invite-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lobby-invite-foot p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
}

.lobby-invite-foot p b {
  color: var(--ink);
}

.lobby-toast {
  position: fixed;
  z-index: 90;
  top: 18px;
  right: 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms var(--enter);
}

.lobby-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.lobby-toast-card {
  border: 1px solid rgba(82, 211, 125, 0.55);
  border-radius: 11px;
  padding: 10px 16px;
  color: var(--ink);
  background: rgba(20, 30, 22, 0.95);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 14px 30px var(--shadow);
}

.lobby-toast-card b {
  color: var(--green);
}

/* ===== Waiting room layout v2: players-first + overlay dream carousel ===== */

.waiting-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.waiting-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-height: 0;
}

.waiting-players-block,
.waiting-profile-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(255, 224, 150, 0.14);
  border-radius: 10px;
  padding: 7px 10px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.28)),
    rgba(18, 16, 14, 0.72);
}

.waiting-players-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.waiting-players-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.waiting-players-title h3 {
  margin: 0;
  font-size: 0.95rem;
}

.waiting-players-title b {
  color: var(--quiet);
  font-size: 0.74rem;
  font-weight: 800;
}

.waiting-bot-inline:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 7px;
}

.waiting-bot-inline label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.waiting-bot-inline select {
  min-height: 30px;
  border: 1px solid rgba(255, 224, 150, 0.2);
  border-radius: 7px;
  padding: 0 8px;
  color: var(--ink);
  background: rgba(17, 16, 15, 0.72);
  font-size: 0.7rem;
  font-weight: 700;
}

.waiting-add-bot {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.waiting-profile-field {
  display: grid;
  gap: 3px;
}

.waiting-roster {
  min-height: 0;
}

body[data-phase="waiting"] .waiting-seat.filled {
  grid-template-columns: 24px auto minmax(0, 1fr);
  min-height: 62px;
}

body[data-phase="waiting"] .waiting-seat.empty:not(.observer) {
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 62px;
}

@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

/* --- dream hero carousel --- */
.waiting-dream-spotlight {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.waiting-dream-viewport {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid rgba(141, 124, 255, 0.4);
  border-radius: 10px;
  background: rgba(10, 9, 12, 0.7);
}

.waiting-dream-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.waiting-dream-track::-webkit-scrollbar {
  display: none;
}

.waiting-dream-hero {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.waiting-dream-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.waiting-dream-hero .waiting-dream-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.waiting-dream-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 26px;
  align-items: end;
  padding: 64px 20px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 9, 12, 0.55) 40%, rgba(10, 9, 12, 0.93) 100%);
}

.waiting-dream-overlay-copy .eyebrow {
  color: #cdb9ff;
}

.waiting-dream-overlay-copy h4 {
  margin: 3px 0 5px;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.1vw, 2.1rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.waiting-dream-overlay-copy p:not(.eyebrow) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  max-width: 46rem;
  color: rgba(247, 240, 223, 0.84);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.waiting-dream-overlay .waiting-dream-price {
  border: none;
  padding: 0;
  text-align: right;
}

.waiting-dream-overlay .waiting-dream-price span {
  color: rgba(247, 240, 223, 0.6);
}

.waiting-dream-overlay .waiting-dream-price b {
  color: #d9c8ff;
  font-size: clamp(1.5rem, 2.3vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}

.waiting-dream-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  padding: 0;
  color: var(--ink);
  background: rgba(17, 16, 15, 0.62);
  font-size: 1.1rem;
  box-shadow: none;
}

.waiting-dream-arrow.prev { left: 12px; }
.waiting-dream-arrow.next { right: 12px; }

.waiting-dream-arrow:hover:not(:disabled) {
  background: rgba(17, 16, 15, 0.85);
  border-color: var(--gold);
  color: var(--gold);
}

.waiting-dream-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* --- side panel: hide invite block when panel becomes top strip --- */
@media (max-width: 1180px) {
  body[data-phase="waiting"] #gameSidePanel .lobby-invite {
    display: none;
  }

  .waiting-top-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.control-grid #startHint {
  grid-column: 1 / -1;
}

/* --- mobile cleanup --- */
@media (max-width: 720px) {
  body[data-phase="waiting"] #gameSidePanel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  body[data-phase="waiting"] #gameSidePanel .control-grid button {
    min-height: 46px;
    font-size: 0.82rem;
  }

  body[data-phase="waiting"] #gameSidePanel .action-summary {
    padding: 9px 10px;
  }

  body[data-phase="waiting"] #gameSidePanel .action-summary .muted {
    -webkit-line-clamp: 2;
  }

  body[data-phase="waiting"] .waiting-head {
    flex-wrap: wrap;
  }

  body[data-phase="waiting"] .waiting-head-copy {
    display: none;
  }

  .waiting-players-head {
    flex-wrap: wrap;
  }

  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-phase="waiting"] .waiting-seat.filled {
    grid-template-columns: 20px auto minmax(0, 1fr);
    min-height: 56px;
    gap: 5px;
  }

  .seat-token {
    width: 56px;
    height: 56px;
  }

  .seat-token img {
    width: 46px;
    height: 46px;
  }

  .seat-actions {
    flex-direction: column;
    gap: 5px;
  }

  .waiting-dream-viewport {
    height: 220px;
  }

  .waiting-dream-overlay {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 44px 12px 10px;
  }

  .waiting-dream-overlay .waiting-dream-price {
    text-align: left;
  }

  .waiting-dream-overlay-copy p:not(.eyebrow) {
    -webkit-line-clamp: 1;
  }

  .waiting-dream-arrow {
    width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 0.9rem;
  }

  .waiting-dream-nav {
    flex-wrap: wrap;
  }
}

/* waiting v2: compensate absolute side rail on wide screens + row stretch */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-top-grid {
    padding: 10px calc(var(--waiting-rail-width) + 40px) 0 20px;
  }
}

/* waiting v2: stretch view to fill viewport height */
body[data-phase="waiting"] .app-workspace {
  min-height: 0;
}

body[data-phase="waiting"] .app-views {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

body[data-phase="waiting"] .waiting-view {
  height: 100%;
  min-height: 0;
}

/* waiting v2: .app-shell height:100% (later rule) was beating .game-client 100dvh on the same element */
body[data-phase="waiting"] .game-client.app-shell {
  height: 100dvh;
}

/* waiting v2 mobile: release the 100dvh lock when panel stacks; let page scroll */
@media (max-width: 1180px) {
  body[data-phase="waiting"] .game-client.app-shell {
    height: auto;
    min-height: 100dvh;
  }

  body[data-phase="waiting"] .app-views,
  body[data-phase="waiting"] .waiting-view,
  body[data-phase="waiting"] .waiting-panel {
    height: auto;
  }

  body[data-phase="waiting"] .waiting-panel {
    grid-template-rows: auto auto auto;
  }

  .waiting-dream-viewport {
    height: 260px;
  }
}

@media (max-width: 720px) {
  body[data-phase="waiting"] .waiting-seat.filled {
    grid-template-rows: auto auto;
    row-gap: 3px;
    min-height: 0;
    padding: 8px;
  }

  body[data-phase="waiting"] .waiting-seat.filled .seat-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== Waiting room v3: title + Back merged into top brand bar ===== */

.waiting-topbar-title,
.waiting-topbar-back,
.brand-subline {
  display: none;
}

body[data-phase="waiting"] .app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 16px;
  min-height: 60px;
}

body[data-phase="waiting"] #topTagline {
  display: none;
}

body[data-phase="waiting"] .top-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

body[data-phase="waiting"] .top-brand h1 {
  flex: none;
  margin: 0;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.05;
}

body[data-phase="waiting"] .brand-subline {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body[data-phase="waiting"] .waiting-topbar-title {
  display: block;
  min-width: 0;
  border-left: 1px solid rgba(255, 224, 150, 0.22);
  padding-left: 12px;
}

body[data-phase="waiting"] .waiting-topbar-title .eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-phase="waiting"] .waiting-topbar-title h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-phase="waiting"] .waiting-topbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 38px;
  padding: 0 22px;
  text-align: center;
}

@media (max-width: 720px) {
  body[data-phase="waiting"] .app-topbar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 12px;
  }

  body[data-phase="waiting"] .top-brand {
    flex-wrap: wrap;
    row-gap: 2px;
    gap: 12px;
  }

  body[data-phase="waiting"] .top-brand h1 {
    font-size: 1.4rem;
  }

  body[data-phase="waiting"] .waiting-topbar-title {
    border-left: none;
    padding-left: 0;
  }

  body[data-phase="waiting"] .waiting-topbar-title h2 {
    font-size: 1.05rem;
  }

  body[data-phase="waiting"] .waiting-topbar-back {
    min-height: 34px;
    padding: 0 16px;
    font-size: 0.78rem;
  }
}

/* waiting v4: dream spotlight now has a fixed viewport height (see
   .waiting-dream-viewport) instead of stretching to fill all remaining
   space, so the panel rows should size to content, not force a 1fr stretch. */
body[data-phase="waiting"] .waiting-panel {
  grid-template-rows: auto auto;
  align-content: start;
}

/* ===== Waiting room polish: bigger token preview, lighter seat cards ===== */

/* The profile card has plenty of room now — undo the legacy shrink-to-32px
   rules that were tuned for the old cramped 3-column Room Setup row. */
body[data-phase="waiting"] .waiting-token-shell {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
}

body[data-phase="waiting"] .waiting-token-preview img {
  width: 56px;
  height: 56px;
}

.seat-actions {
  margin-top: 4px;
}

.seat-actions .seat-add-bot {
  flex: none;
  width: 100%;
}

/* ===== Waiting room polish v4: room panel to top, players/profile theming ===== */

/* The old 132px top offset was tuned for the header row that has since
   moved into the shared top brand bar — the side rail now starts far below
   the players/profile row it should align with. Pin it to the top instead. */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .side-panel {
    top: 10px;
    max-height: calc(100% - 26px);
  }
}

/* ===== Waiting room polish v4: theme players/profile cards to match app chrome ===== */

.waiting-players-block,
.waiting-profile-card {
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 16% 0%, rgba(76, 201, 232, 0.07), transparent 46%),
    linear-gradient(160deg, rgba(44, 39, 34, 0.92), rgba(20, 19, 18, 0.94));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.waiting-players-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.waiting-players-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* seat cards: rounder, gold accent bar on the host seat, gentle hover lift */
.waiting-seat {
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.waiting-seat.filled:hover {
  border-color: rgba(255, 224, 150, 0.28);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.waiting-seat.creator {
  box-shadow:
    inset 3px 0 0 rgba(243, 191, 85, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.waiting-seat.empty:hover {
  border-color: rgba(255, 224, 150, 0.22);
}

/* profile input/select wrapper: same cyan+gold two-tone treatment used
   elsewhere in the app (rename-panel), so the profile card doesn't feel
   like a bare form dropped into an otherwise richly-styled UI */
.waiting-field-shell,
.waiting-token-shell {
  border: 1px solid rgba(255, 224, 150, 0.14);
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.1), rgba(243, 191, 85, 0.05)),
    rgba(255, 255, 255, 0.045);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.waiting-field-shell:focus-within,
.waiting-token-shell:focus-within {
  border-color: rgba(243, 191, 85, 0.5);
  box-shadow: 0 0 0 3px rgba(243, 191, 85, 0.12);
}

.waiting-token-preview {
  background: radial-gradient(circle, rgba(243, 191, 85, 0.14), transparent 70%);
}

.waiting-bot-inline select {
  background:
    linear-gradient(135deg, rgba(76, 201, 232, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(17, 16, 15, 0.72);
}

/* ===== Waiting room polish v5: plus-icon empty seats + token gallery picker ===== */

body[data-phase="waiting"] .waiting-seat.empty:not(.observer) {
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  justify-content: center;
  min-height: 84px;
  border-style: dashed;
}

.seat-index {
  position: relative;
  z-index: 2;
}

.waiting-seat.empty .seat-index {
  position: absolute;
  top: 8px;
  left: 8px;
  opacity: 0.7;
}

.waiting-seat.empty {
  position: relative;
}

.seat-empty-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 6px 6px;
  color: var(--muted);
  cursor: pointer;
}

.seat-empty-cta--static {
  cursor: default;
}

.seat-plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(255, 224, 150, 0.4);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: all 180ms ease;
}

.seat-empty-cta:hover:not(.seat-empty-cta--static) .seat-plus {
  border-color: var(--gold);
  background: rgba(243, 191, 85, 0.16);
  transform: scale(1.08);
}

.seat-empty-label {
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* --- token gallery: swipeable strip replacing the plain <select> --- */
.waiting-token-gallery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.waiting-token-strip {
  display: flex;
  flex: 1 1 auto;
  max-width: 280px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* extra inline padding so the first/last chip can still be scrolled to
     dead-center — without it, edge chips never get enough scroll range to
     reach the middle and the "nearest chip" settle logic picks a neighbor. */
  padding: 6px 80px;
}

.waiting-token-strip::-webkit-scrollbar {
  display: none;
}

.waiting-token-chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 224, 150, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 0;
  box-shadow: none;
  scroll-snap-align: center;
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.waiting-token-chip img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  transition: width 180ms ease, height 180ms ease;
}

.waiting-token-chip:hover:not(.taken):not(:disabled) {
  border-color: rgba(243, 191, 85, 0.5);
  transform: translateY(-2px);
}

.waiting-token-chip.active {
  width: 120px;
  height: 120px;
  border-color: var(--gold);
  background: radial-gradient(circle, rgba(243, 191, 85, 0.22), transparent 70%);
  box-shadow:
    0 0 0 3px rgba(243, 191, 85, 0.18),
    0 8px 20px rgba(243, 191, 85, 0.22);
}

.waiting-token-chip.active img {
  width: 79px;
  height: 79px;
}

.waiting-token-chip.taken {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: not-allowed;
}

.waiting-token-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 0;
  color: var(--ink);
  background: rgba(17, 16, 15, 0.6);
  box-shadow: none;
  font-size: 0.95rem;
}

.waiting-token-arrow:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(17, 16, 15, 0.85);
}

/* fix: token gallery caused horizontal overflow on narrow cards — the grid
   item wrapping it had no min-width:0, so its flex-row content (arrows +
   chip strip) governed the track width instead of shrinking to fit. */
.waiting-profile-field,
.waiting-token-gallery {
  min-width: 0;
}

/* ===== Waiting room polish v6: roster/profile simplification ===== */

.waiting-profile-field--inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.waiting-field-inline-label {
  flex: none;
  color: var(--gold);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.waiting-profile-field--inline .waiting-field-shell {
  flex: 1;
  min-width: 0;
}

.waiting-profile-field--inline .autosave-status {
  flex: none;
  min-width: 0;
}

/* At laptop-class widths (~1181-1400px) a 3-column seat grid squeezes each
   card too narrow for the 68px token + name/role/ready text + remove icon
   to coexist — drop to 2 columns here so names stay readable. */
@media (min-width: 1181px) and (max-width: 1400px) {
  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Waiting panel overlap hard-guard =====
   At short viewport heights (e.g. a default macOS Chrome window ~668px CSS,
   which matches the min-width:1181px + max-height:760px legacy compact
   media blocks) the panel's grid rows got squeezed below their content
   height (row 293px vs card 317px) and the roster/profile row visually
   bled into the dream spotlight. Rather than fight every legacy
   grid-template-rows declaration across those media blocks, switch the
   panel to a flex column — flex siblings can never overlap, and every
   leftover grid-template-rows rule becomes inert. Higher specificity
   (element+class) so it wins regardless of source order. */
body[data-phase="waiting"] section.waiting-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Short-height desktop windows: release the 100dvh lock (same treatment the
   ≤1180px mobile path already gets) so the page scrolls instead of cramming. */
@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .game-client.app-shell {
    height: auto;
    min-height: 100dvh;
  }

  body[data-phase="waiting"] .app-views,
  body[data-phase="waiting"] .waiting-view,
  body[data-phase="waiting"] section.waiting-panel {
    height: auto;
  }
}

/* ===== Compact mode for short desktop windows (MacBook 14" etc.) =====
   At ~668px CSS viewport height the full-size roster (68px tokens) plus a
   340px dream viewport cannot fit on one screen. Scale the roster down and
   shorten the dream so the whole waiting room fits without scrolling. */
@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .seat-token {
    width: 48px;
    height: 48px;
  }

  body[data-phase="waiting"] .seat-token img {
    width: 40px;
    height: 40px;
  }

  body[data-phase="waiting"] .waiting-seat.filled,
  body[data-phase="waiting"] .waiting-seat.empty:not(.observer) {
    min-height: 48px;
  }

  body[data-phase="waiting"] .seat-empty-cta {
    padding: 4px 6px 4px;
    gap: 3px;
  }

  body[data-phase="waiting"] .seat-plus {
    width: 22px;
    height: 22px;
    font-size: 0.9rem;
  }

  body[data-phase="waiting"] .waiting-token-chip {
    width: 36px;
    height: 36px;
  }

  body[data-phase="waiting"] .waiting-token-chip img {
    width: 22px;
    height: 22px;
  }

  body[data-phase="waiting"] .waiting-token-chip.active {
    width: 64px;
    height: 64px;
  }

  body[data-phase="waiting"] .waiting-token-chip.active img {
    width: 42px;
    height: 42px;
  }

  body[data-phase="waiting"] .waiting-dream-viewport {
    height: clamp(200px, calc(100dvh - 470px), 340px);
  }
}

/* ===== Players grid: back to 3 columns x 2 rows on all desktop widths =====
   The 1181-1400px two-column fallback predates compact short-height mode;
   it made the roster 3 rows tall and stole height from the dream banner.
   With tokens scaled down (below) names still fit in 3 columns. */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-seat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Narrow-but-tall desktop windows keep full-height rosters — shrink the
   token a notch there so 3 columns don't crush the name column. (Short
   windows already get 48px tokens from compact mode.) */
@media (min-width: 1181px) and (max-width: 1400px) and (min-height: 761px) {
  body[data-phase="waiting"] .seat-token {
    width: 52px;
    height: 52px;
  }

  body[data-phase="waiting"] .seat-token img {
    width: 43px;
    height: 43px;
  }
}

/* With the roster now 2 rows instead of 3, hand the reclaimed ~70px to the
   dream banner on short windows. */
@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .waiting-dream-viewport {
    height: clamp(220px, calc(100dvh - 400px), 340px);
  }
}

/* Waiting room dream hero: use the remaining vertical space instead of
   leaving a blank tail below the carousel on desktop-size rooms. */
@media (min-width: 1181px) {
  body[data-phase="waiting"] .waiting-dream-spotlight {
    flex: 1 1 auto;
    min-height: 0;
  }

  body[data-phase="waiting"] .waiting-dream-viewport {
    flex: 1 1 auto;
    height: auto;
    min-height: 340px;
  }

  body[data-phase="waiting"] .waiting-dream-overlay {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, clamp(18rem, 42vw, 44rem));
    gap: 12px 24px;
    padding: clamp(64px, 11vh, 120px) 28px 18px;
  }

  body[data-phase="waiting"] .waiting-dream-overlay-copy {
    min-width: 0;
  }

  body[data-phase="waiting"] .waiting-dream-overlay-copy h4 {
    overflow-wrap: normal;
  }

  body[data-phase="waiting"] .waiting-dream-overlay .waiting-dream-price {
    min-width: 0;
    max-width: 100%;
    justify-self: end;
  }

  body[data-phase="waiting"] .waiting-dream-overlay .waiting-dream-price b {
    font-size: clamp(1.2rem, 1.8vw, 2.05rem);
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 1181px) and (max-width: 1400px) {
  body[data-phase="waiting"] .waiting-dream-overlay {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-phase="waiting"] .waiting-dream-overlay .waiting-dream-price {
    justify-self: start;
    text-align: left;
  }
}

@media (min-width: 1181px) and (max-height: 760px) {
  body[data-phase="waiting"] .waiting-dream-spotlight {
    flex: 0 0 auto;
  }

  body[data-phase="waiting"] .waiting-dream-viewport {
    flex: 0 0 auto;
    height: clamp(220px, calc(100dvh - 400px), 340px);
    min-height: 0;
  }
}

/* ==========================================================================
   Mobile modal fit pass — keep modals compact and readable on phones without
   unnecessary scrolling. Scoped to narrow / short viewports only; every rule
   below sits inside a max-width / max-height query so desktop is untouched.
   ========================================================================== */

/* Career reveal + dream picker use overflow:hidden on the base panel, which
   clips their confirm / navigation buttons off-screen on phones (a prior fix
   only covered short landscape viewports, so tall portrait phones still lost
   the buttons). Let these panels scroll internally on any phone-sized screen. */
@media (max-width: 760px), (max-height: 600px) {
  .career-roll-panel,
  .dream-picker-panel {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Shrink the dream hero art on narrow phones so most of the card fits before
   any scrolling is needed. */
@media (max-width: 560px) {
  .dropship-roll-decision .landing-deal-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dream-hero-frame {
    height: clamp(130px, 38vw, 190px);
  }

  .dream-hero-frame-large {
    height: clamp(190px, 56vw, 300px);
  }
}

/* Turn action metrics: the global grid forces five equal columns, squeezing
   each tile to ~56px on phones so currency values wrap mid-number
   (e.g. "฿14 0,0 00"). Drop to a 3-wide grid and keep the figures on one line. */
@media (max-width: 560px) {
  .turn-action-modal .turn-action-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .turn-action-modal .turn-action-summary .turn-summary-card {
    min-height: 56px;
    padding: 8px 9px !important;
  }

  .turn-action-modal .turn-action-summary strong {
    font-size: 0.9rem !important;
    white-space: nowrap;
  }
}

/* Deal impact stats: the base is a two-column grid, but a mobile rule flattens
   it to a single tall column that forces heavy scrolling through six tiles.
   Restore two columns on phones — each value still fits comfortably. Matches
   the 760px/600px breakpoints that collapse .landing-event-panel to one
   column (below), so this tracks that same condition, and also catches
   landscape phones (wide but short) that a width-only query would miss. */
@media (max-width: 760px), (max-height: 600px) {
  .landing-deal-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Paired landing modal on phones: the financial-status sheet stacks above the
   event you landed on, pushing the actual decision below the fold. Collapse it
   into a thin tap-to-expand cash bar so the event sits near the top. Scoped to
   the dual landing modal — the standalone financial-status modal stays full.
   Breakpoint must match whatever actually collapses .landing-event-panel to
   one column — which is NOT the 760px doc comment at the top of this file
   claims. That comment was written after aligning this toggle to the panel's
   OLDER single-column rule (`max-width: 720px`, further up this file). But a
   later, higher-source-order "Final responsive contract" block (search for
   that phrase) re-stacks the panel back to two columns from 861-1180px and
   only re-collapses it to one column at `max-width: 860px` — so 860px, not
   760px/720px, is the panel's real threshold now. Using 760px here left a
   761-860px gap (common tablet-portrait / phone-landscape widths) where the
   panel was already single-column but this bar stayed `display: none` — the
   exact bug this comment used to say was fixed, just moved wider. If you
   touch the panel's stacking breakpoint again, grep every bare
   `.landing-event-panel { grid-template-columns: ... }` rule and take the
   one that wins by source order, not the first one you find. */
.landing-finance-collapse-toggle {
  display: none;
}

@media (max-width: 860px), (max-height: 600px) {
  .landing-event-panel .landing-finance-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    /* Extra right padding clears the absolutely-positioned modal minimize button. */
    padding: 12px 56px 12px 14px;
    border: 1px solid rgba(255, 224, 150, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .landing-event-panel .landing-finance-collapse-key {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--muted);
  }

  .landing-event-panel .landing-finance-collapse-cash {
    margin-left: auto;
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  .landing-event-panel .landing-finance-collapse-caret {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
    transition: transform 0.2s ease;
  }

  .landing-event-panel .landing-finance-sheet[data-collapsed="false"] .landing-finance-collapse-caret {
    transform: rotate(-135deg);
  }

  /* Collapsed: strip the sheet's own card chrome and hide the detail + drawers so
     only the bar remains. */
  .landing-event-panel .landing-finance-sheet[data-collapsed="true"] {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .landing-event-panel .landing-finance-sheet[data-collapsed="true"] > .landing-finance-head,
  .landing-event-panel .landing-finance-sheet[data-collapsed="true"] > .landing-finance-drawers {
    display: none;
  }
}

/* ==========================================================================
   Mobile-only landing-event pager (horizontal tabs, no vertical scroll).
   Gated on html.touch-device, never on viewport width — a resized desktop
   browser window must keep using the width-based rules above, untouched.
   See the canonical-breakpoints note near the top of this file for why width
   alone isn't safe to key new layout-structure rules off for this panel.
   ========================================================================== */

html.touch-device .landing-event-panel-mobile {
  display: flex !important;
  flex-direction: column !important;
  width: min(720px, calc(100vw - 40px)) !important;
  height: calc(100svh - 40px) !important;
  height: calc(100dvh - 40px) !important;
  max-height: calc(100svh - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
}

html.touch-device .landing-event-sheet-mobile {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html.touch-device .landing-event-sheet-mobile > .landing-unified-header {
  flex: 0 0 auto;
}

html.touch-device .landing-pager-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 6px;
  padding: 2px 0 4px;
}

html.touch-device .landing-pager-tab {
  border: 1px solid color-mix(in srgb, var(--event-accent, var(--gold)) 34%, transparent);
  border-radius: 999px;
  padding: 7px 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

html.touch-device .landing-pager-tab.is-active {
  border-color: color-mix(in srgb, var(--event-accent, var(--gold)) 70%, white 10%);
  background: var(--event-accent-soft, rgba(243, 191, 85, 0.14));
  color: var(--ink);
}

html.touch-device .landing-event-pages {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

html.touch-device .landing-event-pages::-webkit-scrollbar {
  display: none;
}

html.touch-device .landing-event-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
}

/* Re-assert the containment the base (desktop) rules already give
   .landing-finance-sheet / .landing-event-copy, one level deeper now that
   both live inside .landing-event-page — the un-gated mobile-width rules
   elsewhere in this file strip this back to overflow:visible, which this
   layout doesn't use. */
html.touch-device .landing-event-page > .landing-finance-sheet,
html.touch-device .landing-event-page > .landing-event-copy {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* Without this, a vertical drag here can get claimed by the horizontal
     scroll-snap pager (.landing-event-pages) it's nested inside, instead of
     scrolling this box — on real touch devices content below the fold
     becomes unreachable even though it renders fine in DOM/desktop emulation. */
  touch-action: pan-y;
}

/* Finance is always rendered expanded on its own page (see
   renderLandingEventModal's mobile branch), so the tap-to-collapse bar is
   redundant here. */
html.touch-device .landing-finance-collapse-toggle {
  display: none !important;
}

/* A pre-existing max-width:720px rule stacks the footer's action buttons
   into a single column — written for narrow PORTRAIT phones where two
   buttons side by side don't fit. This layout is landscape-only and never
   actually narrow (rotate-gate blocks portrait), so that rule fires wrongly
   here: a stacked 2-3 button footer roughly doubles/triples in height,
   which the mobile pager's fixed-height budget didn't reserve room for,
   collapsing .landing-event-pages to 0 height. Restore the row layout the
   base (desktop) rules already use, regardless of width, under touch-device. */
html.touch-device .landing-action-footer[data-action-layout="single"] .landing-footer-actions {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr) !important;
}

html.touch-device .landing-action-footer[data-action-layout="standard"] .landing-footer-actions,
html.touch-device .landing-action-footer[data-action-layout="equal"] .landing-footer-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.touch-device .landing-action-footer[data-action-layout="triple"] .landing-footer-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Compact mobile Finance tab: small avatar + name + vitals side by side on
   one row (this layout is landscape-only, width is abundant, height is the
   scarce resource — stacking identity above vitals as two separate rows
   measured ~183px tall against a ~50-95px budget on a short phone; the
   identity+vitals row below brings that down to ~95-130px), plus a single
   "view details" button that opens the existing standalone
   #financialStatusModal (see openLandingFinanceDetail in app.js) — full
   income/expense/liability detail lives there, at full viewport height,
   instead of being force-expanded into this tiny tab pane. */
html.touch-device .landing-finance-sheet-compact {
  gap: 10px !important;
  padding: 12px !important;
}

html.touch-device .landing-finance-compact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

html.touch-device .landing-finance-compact-row > .landing-finance-vitals {
  flex: 1 1 auto;
  min-width: 0;
}

html.touch-device .landing-finance-compact-identity {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

html.touch-device .landing-finance-compact-avatar {
  width: 40px !important;
  height: 45px !important;
  flex: 0 0 auto;
}

html.touch-device .landing-finance-compact-name {
  display: grid;
  min-width: 0;
  max-width: 22vw;
  gap: 2px;
}

html.touch-device .landing-finance-compact-name h3 {
  margin: 0;
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.touch-device .landing-finance-compact-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.touch-device .landing-finance-compact-detail-btn {
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--event-accent, var(--gold)) 40%, transparent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

html.touch-device .landing-event-modal {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

html.touch-device .landing-event-panel-mobile {
  gap: 8px !important;
  width: min(760px, calc(100vw - 24px)) !important;
  height: calc(100svh - 20px) !important;
  height: calc(100dvh - 20px) !important;
  max-height: calc(100svh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  border-radius: 12px !important;
  padding: 10px !important;
}

html.touch-device .landing-event-sheet-mobile {
  gap: 8px !important;
  border-radius: 9px;
  padding: 10px !important;
}

html.touch-device .landing-event-sheet-mobile > .landing-unified-header {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  padding: 0 42px 8px 0;
}

html.touch-device .landing-event-panel-mobile .landing-event-minimize-button {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 8px;
}

html.touch-device .landing-event-panel-mobile .landing-event-minimize-button span {
  font-size: 1.2rem;
}

html.touch-device .landing-event-panel-mobile .landing-event-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

html.touch-device .landing-event-panel-mobile .landing-event-icon svg {
  width: 24px;
  height: 24px;
}

html.touch-device .landing-event-panel-mobile .landing-event-icon img,
html.touch-device .landing-event-panel-mobile .landing-event-icon .board-tile-icon-mask {
  width: 28px;
  height: 28px;
}

html.touch-device .landing-event-panel-mobile .landing-event-category-line {
  gap: 6px;
}

html.touch-device .landing-event-panel-mobile .landing-event-category {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 0.58rem;
}

html.touch-device .landing-event-panel-mobile .landing-event-category-line h2 {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(0.96rem, 2.2vw, 1.22rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.touch-device .landing-event-panel-mobile .landing-event-context {
  font-size: 0.6rem;
}

html.touch-device .landing-pager-tabs {
  gap: 5px;
  padding: 0 0 3px;
}

html.touch-device .landing-pager-tab {
  min-height: 34px;
  padding: 4px 6px;
  font-size: 0.72rem;
  line-height: 1.1;
}

html.touch-device .landing-event-panel-mobile .landing-action-footer {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 8px;
  background:
    linear-gradient(180deg, rgba(10, 12, 12, 0), rgba(10, 12, 12, 0.88) 30%),
    rgba(10, 12, 12, 0.82);
}

html.touch-device .landing-action-footer .landing-footer-actions {
  gap: 6px;
}

html.touch-device .landing-action-footer button {
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  font-size: 0.74rem;
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
}

html.touch-device .landing-action-footer[data-action-layout="single"] .landing-footer-actions {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 0.48fr) !important;
}

html.touch-device .landing-action-footer[data-action-layout="single"] .landing-footer-actions > :only-child {
  grid-column: 2 !important;
}

html.touch-device .landing-event-page > .landing-event-copy {
  gap: 7px;
  padding-right: 0;
}

html.touch-device .landing-event-panel-mobile .landing-event-status-banner,
html.touch-device .landing-event-panel-mobile .landing-event-intro {
  border-radius: 9px;
  padding: 10px 12px;
}

html.touch-device .landing-event-panel-mobile .landing-event-status-banner strong {
  font-size: clamp(1.18rem, 3vw, 1.72rem);
  line-height: 1.08;
}

html.touch-device .landing-event-panel-mobile .landing-event-status-banner p,
html.touch-device .landing-event-panel-mobile .landing-event-intro {
  font-size: 0.82rem;
  line-height: 1.36;
}

html.touch-device .landing-event-panel-mobile .landing-event-card,
html.touch-device .landing-event-panel-mobile .landing-decision-block,
html.touch-device .landing-event-panel-mobile .landing-event-effects {
  border-radius: 9px;
  padding: 10px 12px;
}

html.touch-device .landing-event-panel-mobile .landing-event-card strong {
  font-size: clamp(1.12rem, 2.7vw, 1.62rem);
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}

html.touch-device .landing-event-panel-mobile .landing-event-card .landing-event-description,
html.touch-device .landing-event-panel-mobile .landing-decision-head small {
  font-size: 0.78rem;
  line-height: 1.34;
}

html.touch-device .landing-event-panel-mobile .landing-decision-head span {
  font-size: 0.92rem;
  line-height: 1.14;
}

html.touch-device .landing-event-panel-mobile .impact-grid,
html.touch-device .landing-event-panel-mobile .landing-deal-impact-grid {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 6px;
}

html.touch-device .landing-event-panel-mobile .impact-metric {
  min-height: 0;
  border-radius: 8px;
  padding: 8px;
}

html.touch-device .landing-event-panel-mobile .impact-metric b {
  font-size: clamp(0.82rem, 2.1vw, 1rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

html.touch-device .landing-event-panel-mobile .landing-charity-summary,
html.touch-device .landing-event-panel-mobile .landing-charity-decision .landing-charity-summary,
html.touch-device .landing-event-panel-mobile .landing-charity-decision .landing-charity-summary.has-option-two,
html.touch-device .landing-event-panel-mobile .landing-dream-summary {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
}

html.touch-device .landing-event-panel-mobile .landing-charity-summary article,
html.touch-device .landing-event-panel-mobile .landing-dream-summary article {
  padding: 8px;
}

html.touch-device .landing-event-panel-mobile .landing-charity-summary article + article,
html.touch-device .landing-event-panel-mobile .landing-dream-summary article + article {
  border-left: 1px solid color-mix(in srgb, var(--event-accent) 22%, transparent);
  border-top: 0;
  padding-left: 8px;
}

html.touch-device .landing-event-panel-mobile .landing-dream-showcase {
  min-height: clamp(150px, 34dvh, 230px);
  border-radius: 10px;
}

html.touch-device .landing-event-panel-mobile .landing-dream-showcase figcaption {
  left: 14px;
  right: 14px;
  bottom: 12px;
  max-width: 72%;
}

html.touch-device .landing-event-panel-mobile .landing-dream-showcase figcaption strong {
  font-size: clamp(1rem, 2.8vw, 1.46rem);
}

html.touch-device .landing-event-panel-mobile .landing-dream-showcase figcaption p {
  display: none;
}

html.touch-device .landing-event-panel-mobile .landing-income-card {
  gap: 6px;
  border-radius: 10px;
  padding: 10px;
}

html.touch-device .landing-event-panel-mobile .landing-income-step-title {
  font-size: clamp(1rem, 2.4vw, 1.32rem);
}

html.touch-device .landing-event-panel-mobile .income-formula {
  grid-template-columns:
    minmax(112px, 0.8fr)
    auto
    minmax(86px, 0.48fr)
    auto
    minmax(148px, 1fr);
  gap: 4px;
}

html.touch-device .landing-event-panel-mobile .income-formula-term {
  min-height: 0;
  padding: 7px 6px;
}

html.touch-device .landing-event-panel-mobile .income-formula-total > b {
  font-size: clamp(1.28rem, 3.6vw, 2.12rem);
}

html.touch-device .landing-event-panel-mobile .landing-finance-sheet-compact {
  min-height: 0;
}

html.touch-device .landing-event-panel-mobile .landing-finance-compact-detail-btn {
  min-height: 36px;
}

html.touch-device .landing-opportunity-onepage {
  --opportunity-pane-border: color-mix(in srgb, var(--event-accent) 26%, transparent);
}

html.touch-device .landing-opportunity-onepage-sheet {
  gap: 7px !important;
}

html.touch-device .landing-opportunity-stat-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  flex: 0 0 auto;
}

html.touch-device .landing-opportunity-stat-chip {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--event-accent) 24%, transparent);
  border-radius: 8px;
  padding: 6px 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.24);
}

html.touch-device .landing-opportunity-stat-chip span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.05;
}

html.touch-device .landing-opportunity-stat-chip strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  color: var(--ink);
  font-size: clamp(0.82rem, 2.1vw, 1.08rem);
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.touch-device .landing-opportunity-stat-chip.good strong,
html.touch-device .landing-opportunity-stat-chip.cash strong {
  color: #d8ffe7;
}

html.touch-device .landing-opportunity-stat-chip.bad strong {
  color: #ffc4c4;
}

html.touch-device .landing-opportunity-stat-chip .landing-finance-delta {
  font-size: 0.58rem;
}

html.touch-device .landing-opportunity-main {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

html.touch-device .landing-opportunity-main.is-single {
  grid-template-columns: minmax(0, 1fr);
}

html.touch-device .landing-opportunity-pane {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--opportunity-pane-border);
  border-radius: 9px;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--event-accent) 12%, transparent), transparent 9rem),
    rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

html.touch-device .landing-opportunity-pane > .landing-event-copy {
  height: 100%;
  max-height: 100% !important;
  padding: 9px;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

html.touch-device .landing-opportunity-onepage .landing-event-card,
html.touch-device .landing-opportunity-onepage .landing-decision-block,
html.touch-device .landing-opportunity-onepage .landing-event-effects {
  gap: 6px;
  border-radius: 8px;
  padding: 8px 9px;
}

html.touch-device .landing-opportunity-onepage .landing-event-card strong {
  font-size: clamp(0.96rem, 2.05vw, 1.18rem);
  line-height: 1.08;
}

html.touch-device .landing-opportunity-onepage .landing-event-card .landing-event-description,
html.touch-device .landing-opportunity-onepage .landing-decision-head small {
  font-size: 0.72rem;
  line-height: 1.28;
}

html.touch-device .landing-opportunity-onepage .landing-decision-head {
  gap: 2px;
}

html.touch-device .landing-opportunity-onepage .landing-decision-head span {
  font-size: 0.84rem;
  line-height: 1.08;
}

html.touch-device .landing-opportunity-onepage .landing-deal-impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px;
}

html.touch-device .landing-opportunity-onepage .impact-metric {
  min-height: 0;
  border-radius: 7px;
  padding: 6px;
}

html.touch-device .landing-opportunity-onepage .impact-metric span {
  font-size: 0.52rem;
  line-height: 1.08;
}

html.touch-device .landing-opportunity-onepage .impact-metric b {
  font-size: clamp(0.7rem, 1.68vw, 0.9rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

html.touch-device .landing-opportunity-onepage .income-schedule-card {
  grid-column: 1 / -1;
}

html.touch-device .landing-opportunity-onepage .landing-opportunity-borrow {
  gap: 6px;
}

html.touch-device .landing-opportunity-onepage .landing-opportunity-borrow-head,
html.touch-device .landing-opportunity-onepage .landing-opportunity-borrow-actions {
  min-height: 34px;
  border-radius: 8px;
  padding: 6px 8px;
}

html.touch-device .landing-opportunity-onepage .landing-opportunity-borrow-actions button,
html.touch-device .landing-opportunity-onepage .sell-rights-input-row button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 0.68rem;
}

html.touch-device .landing-opportunity-onepage .landing-action-footer {
  padding-top: 7px;
}

html.touch-device .landing-opportunity-onepage .landing-action-footer .landing-footer-actions {
  gap: 7px;
}

html.touch-device .landing-opportunity-onepage .landing-action-footer button {
  min-height: 36px;
  padding: 5px 8px;
  font-size: 0.72rem;
  line-height: 1.08;
}

html.touch-device .landing-opportunity-onepage .landing-action-footer[data-action-layout="triple"] .landing-footer-actions {
  grid-template-columns: 0.8fr 1fr 0.92fr !important;
}

html.touch-device .landing-mobile-onepage .landing-buy-dream-decision {
  gap: 5px;
}

html.touch-device .landing-mobile-onepage .landing-buy-dream-decision .landing-decision-head {
  gap: 1px;
}

html.touch-device .landing-mobile-onepage .landing-buy-dream-decision .landing-decision-head small {
  font-size: 0.64rem;
  line-height: 1.16;
}

html.touch-device .landing-mobile-onepage .landing-dream-summary article {
  gap: 3px;
  padding: 6px;
}

html.touch-device .landing-mobile-onepage .landing-dream-summary span {
  font-size: 0.54rem;
  line-height: 1.08;
}

html.touch-device .landing-mobile-onepage .landing-dream-summary b,
html.touch-device .landing-mobile-onepage .landing-dream-summary .requirement b {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
  line-height: 1.1;
  text-shadow: none;
}

html.touch-device .landing-mobile-onepage .landing-dream-summary small {
  font-size: 0.56rem;
  line-height: 1.08;
}

html.touch-device .landing-mobile-onepage .landing-charity-balance {
  margin: 0;
  padding: 6px 8px;
  font-size: 0.64rem;
  line-height: 1.16;
}

html.touch-device .landing-mobile-onepage .landing-dream-showcase {
  min-height: 0;
  height: 100%;
}

.offline-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(178, 76, 76, 0.18);
  border: 1px solid rgba(178, 76, 76, 0.55);
  color: #e08b8b;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.kick-afk-button {
  margin-top: 8px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(178, 76, 76, 0.6);
  background: rgba(178, 76, 76, 0.14);
  color: #e9a0a0;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.kick-afk-button:hover {
  background: rgba(178, 76, 76, 0.3);
  color: #ffc9c9;
}