@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Noto+Sans+TC:wght@500;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  color-scheme: dark;
  --bg: #080808;
  --bg-2: #0f0f0f;
  --panel: rgba(12, 12, 12, 0.9);
  --panel-strong: rgba(6, 6, 6, 0.92);
  --line: rgba(255, 26, 26, 0.22);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #e8e8e8;
  --muted: #888888;
  --faint: #555555;
  --gold: #d4a84e;
  --gold-2: #836026;
  --jade: #00ff41;
  --teal: #00cc88;
  --danger: #ff1a1a;
  --ruby: #cc0000;
  --stone: #1a1a1a;
  --terminal-green: #00ff41;
  --crisis-red: #ff1a1a;
  --font-display: 'Space Grotesk', 'Noto Sans TC', ui-sans-serif, system-ui;
  --font-title: 'Space Grotesk', 'Noto Sans TC', ui-sans-serif, system-ui;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius: 8px;
  --focus: 0 0 0 3px rgba(0, 255, 65, 0.35);
  --z-cds-overlay: 230;
  --visual-viewport-offset: 0px;
  --visual-viewport-left: 0px;
  --visual-viewport-width: 100vw;
  --visual-viewport-height: 100vh;
  font-family:
    'Space Grotesk', 'Noto Sans TC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@supports (height: 100dvh) {
  :root {
    --visual-viewport-offset: max(0px, calc(100vh - 100dvh));
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 7, 0.6), rgba(10, 12, 11, 0.92)),
    var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.app {
  min-height: 100vh;
  background-image:
    linear-gradient(90deg, rgba(7, 9, 8, 0.76), rgba(7, 9, 8, 0.16), rgba(7, 9, 8, 0.78)),
    url("./assets/temple-table.png");
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  position: relative;
  word-break: keep-all;
}

.app::before {
  content: "";
  position: fixed;
  inset: 0;
  border: 0 solid transparent;
  box-shadow: none;
  pointer-events: none;
  z-index: 95;
  transition: border-color 220ms ease, border-width 220ms ease, box-shadow 260ms ease;
}

.app--frame-mine::before {
  border-width: 5px;
  border-color: var(--jade);
  box-shadow: inset 0 0 28px rgba(62, 211, 145, 0.42);
  animation: frameMinePulse 2.4s ease-in-out infinite;
}

.app--frame-retreated::before {
  border-width: 5px;
  border-color: var(--gold);
  box-shadow: inset 0 0 28px rgba(232, 184, 77, 0.38);
}

.app--frame-end::before {
  border-width: 5px;
  border-color: var(--danger);
  box-shadow: inset 0 0 32px rgba(232, 94, 61, 0.42);
}

@keyframes frameMinePulse {
  0%, 100% { box-shadow: inset 0 0 22px rgba(62, 211, 145, 0.32); }
  50%      { box-shadow: inset 0 0 36px rgba(62, 211, 145, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .app--frame-mine::before { animation: none; }
}

/* TREASURE BURST — Bloomberg terminal P&L counter */

.treasure-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.treasure-burst.is-active { opacity: 1; }

.treasure-burst.is-leaving {
  opacity: 0;
  transition: opacity 280ms ease-in;
}

/* Terminal-black dim — no fantasy gradient */
.treasure-burst__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
}

/* Glitch flash on entry */
.treasure-burst__glitch {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: glitchFlash 0.22s steps(1) forwards;
  background: rgba(0, 255, 65, 0.07);
}

@keyframes glitchFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  30%  { opacity: 0; }
  45%  { opacity: 0.6; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Horizontal scan line sweeping top-to-bottom */
.treasure-burst__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.treasure-burst__scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--terminal-green) 20%, var(--terminal-green) 80%, transparent);
  opacity: 0;
  animation: scanLine 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scanLine {
  0%   { top: -4px; opacity: 0; }
  5%   { opacity: 0.9; }
  80%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* Ticker tape bar */
.treasure-burst__ticker {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(calc(-50% + 90px));
  height: 28px;
  background: var(--terminal-green);
  display: flex;
  align-items: center;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: tickerWipe 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes tickerWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.treasure-burst__ticker-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 0 16px;
  animation: tickerScroll 6s linear 0.85s infinite;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Main value stack */
.treasure-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 12px;
}

.treasure-burst__label-top {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.5vmin, 16px);
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--terminal-green);
  opacity: 0;
  animation: fadeUp 0.3s ease-out 0.1s forwards;
}

.treasure-burst__big {
  font-family: var(--font-display);
  font-weight: 700;
  max-width: 96vw;
  font-size: clamp(86px, 26vmin, 260px);
  line-height: 0.9;
  color: var(--terminal-green);
  text-shadow:
    0 0 40px rgba(0, 255, 65, 0.6),
    0 0 80px rgba(0, 255, 65, 0.2);
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  animation: valueSlam 0.45s cubic-bezier(0.16, 1.4, 0.3, 1) 0.18s forwards;
}

@keyframes valueSlam {
  0%   { opacity: 0; transform: scaleY(0.3) scaleX(1.1); filter: blur(6px); }
  60%  { opacity: 1; transform: scaleY(1.06) scaleX(0.98); filter: blur(0); }
  80%  { transform: scaleY(0.98) scaleX(1.01); }
  100% { transform: scaleY(1) scaleX(1); opacity: 1; }
}

.treasure-burst__label {
  font-family: var(--font-mono);
  font-size: clamp(13px, 3vmin, 22px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0, 255, 65, 0.75);
  opacity: 0;
  animation: fadeUp 0.35s ease-out 0.42s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-burst__scan::before,
  .treasure-burst__ticker,
  .treasure-burst__glitch { display: none; }
  .treasure-burst__big,
  .treasure-burst__label-top,
  .treasure-burst__label { animation: none; opacity: 1; }
}

/* HAZARD BURST — red warning fullscreen (first occurrence) */

.hazard-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.hazard-burst.is-active { opacity: 1; }

.hazard-burst.is-leaving {
  opacity: 0;
  transition: opacity 380ms ease-in;
}

.hazard-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 94, 61, 0.55) 0%, rgba(120, 30, 18, 0.78) 38%, rgba(20, 5, 5, 0.92) 80%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: hazardDimPulse 1.7s ease-out;
}

@keyframes hazardDimPulse {
  0%   { opacity: 1; }
  8%   { opacity: 0.3; }
  14%  { opacity: 1; }
  22%  { opacity: 0.5; }
  30%  { opacity: 1; }
  38%  { opacity: 0.65; }
  45%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Scan-line CRT layer */
.hazard-burst__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  pointer-events: none;
  animation: hazardScanScroll 0.12s linear infinite;
  opacity: 0.6;
  z-index: 1;
}

@keyframes hazardScanScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

/* Single hard strobe at t=0 — one strong beat instead of 3 alternating */
.hazard-burst__strobe {
  position: absolute;
  inset: 0;
  background: rgba(255, 26, 26, 0.75);
  pointer-events: none;
  z-index: 1;
  animation: hazardStrobe 0.18s steps(1) forwards;
}

@keyframes hazardStrobe {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Ticker tape strip — hazard.en repeated */
.hazard-burst__ticker {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.8vmin, 16px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 26, 26, 0.95);
  text-shadow: 0 0 8px rgba(255, 26, 26, 0.7);
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  animation: hazardTickerSlide 1.6s linear forwards;
}

@keyframes hazardTickerSlide {
  0%   { transform: translateX(60%); opacity: 0; }
  8%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-60%); opacity: 0; }
}

/* Glitch clone divs — circuit-breaker halt */
.hazard-burst__glitch-a,
.hazard-burst__glitch-b,
.hazard-burst__glitch-c {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hazard-burst__glitch-a {
  animation: glitchSlam 0.45s steps(1) forwards;
}

.hazard-burst__glitch-b {
  animation: glitchSlam 0.45s steps(1) 0.06s forwards;
}

.hazard-burst__glitch-c {
  animation: glitchSlamC 0.5s steps(1) 0.14s forwards;
}

@keyframes glitchSlamC {
  0%   { transform: translateY(0);   clip-path: inset(40% 0 40% 0); opacity: 0; }
  20%  { transform: translateY(-4px) translateX(8px); clip-path: inset(20% 0 55% 0); opacity: 0.6; }
  40%  { transform: translateY(4px)  translateX(-8px); clip-path: inset(55% 0 10% 0); opacity: 0.55; }
  65%  { transform: translateY(0);   clip-path: inset(0 0 0 0); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes glitchSlam {
  0%   { transform: translateX(0);    clip-path: inset(0 0 100% 0); opacity: 0; }
  15%  { transform: translateX(-6px); clip-path: inset(0 0 30% 0);  opacity: 0.7; }
  30%  { transform: translateX(6px);  clip-path: inset(60% 0 0 0);  opacity: 0.7; }
  50%  { transform: translateX(0);    clip-path: inset(0 0 0 0);    opacity: 0; }
  100% { opacity: 0; }
}

.hazard-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 12px;
}

/* Icon: hard scale only, no orbital shake */
.hazard-burst__icon {
  font-size: clamp(160px, 42vmin, 380px);
  color: var(--crisis-red);
  filter:
    drop-shadow(0 0 36px rgba(255, 26, 26, 0.9))
    drop-shadow(0 0 12px rgba(255, 100, 80, 0.8));
  animation: hazardIconSlam 2s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.hazard-burst__icon--big {
  font-size: clamp(180px, 50vmin, 460px);
}

.hazard-burst__icon--big .svg-icon svg {
  stroke-width: 1.8;
}

@keyframes hazardIconSlam {
  0%   { opacity: 0; transform: scale(0.2); filter: blur(8px); }
  12%  { opacity: 1; transform: scale(1.08); filter: blur(0); }
  20%  { transform: scale(0.98); }
  30%  { transform: scale(1); }
  86%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

.hazard-burst__icon .svg-icon svg {
  stroke-width: 2.4;
  stroke: rgba(255, 100, 80, 0.9);
  fill: rgba(255, 26, 26, 0.18);
}

.hazard-burst__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 9vmin, 72px);
  letter-spacing: 0.06em;
  color: var(--crisis-red);
  text-shadow:
    0 0 28px rgba(255, 26, 26, 0.7),
    0 0 6px rgba(255, 100, 80, 0.9);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  animation: crisisNameIn 1.7s cubic-bezier(0.22, 1.4, 0.32, 1);
}

@keyframes crisisNameIn {
  0%   { opacity: 0; transform: scaleY(0.2) translateY(30px); }
  25%  { opacity: 1; transform: scaleY(1.04) translateY(0); }
  35%  { transform: scaleY(1); }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

.hazard-burst__label {
  font-family: var(--font-mono);
  font-size: clamp(14px, 3.6vmin, 22px);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 100, 80, 0.9);
  text-shadow: 0 0 10px rgba(255, 26, 26, 0.7);
  animation: hazardLabel 1.7s ease-out;
}

@keyframes hazardLabel {
  0%   { opacity: 0; letter-spacing: 0; }
  22%  { opacity: 1; letter-spacing: 0.28em; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-burst__glitch-a,
  .hazard-burst__glitch-b,
  .hazard-burst__glitch-c,
  .hazard-burst__scanlines,
  .hazard-burst__strobe,
  .hazard-burst__ticker { display: none; }
  .hazard-burst__icon,
  .hazard-burst__name,
  .hazard-burst__label,
  .hazard-burst__dim { animation: none; opacity: 1; }
}

/* PATENT BURST — market patent drop */

.tip-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.tip-burst.is-active { opacity: 1; }

.tip-burst.is-leaving {
  opacity: 0;
  transition: opacity 460ms ease-in;
}

/* Phosphor grid dim */
.tip-burst__dim {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.04) 0px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.04) 0px, transparent 1px, transparent 32px),
    #000;
}

.tip-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 20px;
  max-width: min(640px, 92vw);
}

/* Typewriter "PATENT SECURED" */
.tip-burst__header {
  font-family: var(--font-mono);
  font-size: clamp(13px, 3vmin, 20px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terminal-green);
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  animation: terminalType 0.9s steps(22) 0.2s forwards;
  border-right: 2px solid var(--terminal-green);
}

@keyframes terminalType {
  0%   { max-width: 0; border-right: 2px solid var(--terminal-green); }
  90%  { max-width: 100%; border-right: 2px solid var(--terminal-green); }
  100% { max-width: 100%; border-right: transparent; }
}

.tip-burst__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 14vmin, 120px);
  line-height: 1;
  color: var(--terminal-green);
  text-shadow:
    0 0 32px rgba(0, 255, 65, 0.7),
    0 0 8px rgba(0, 255, 65, 0.5);
  letter-spacing: -0.02em;
  opacity: 0;
  animation: fadeUp 0.4s ease-out 1.1s forwards;
}

.tip-burst__label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(12px, 2.8vmin, 18px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(0, 255, 65, 0.6);
  opacity: 0;
  animation: fadeUp 0.35s ease-out 1.35s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .tip-burst__header { animation: none; max-width: 100%; border-right: transparent; }
  .tip-burst__value,
  .tip-burst__label { animation: none; opacity: 1; }
}

/* ARTIFACT LOST — somber teal-fade fullscreen */

/* INTEL COMPROMISED — data corruption burst */

.tip-lost-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.tip-lost-burst.is-active { opacity: 1; }
.tip-lost-burst.is-leaving { opacity: 0; transition: opacity 460ms ease-in; }

.tip-lost-burst__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
}

.tip-lost-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 20px;
}

/* Icon jitters left-right before dying */
.tip-lost-burst__icon {
  font-size: clamp(110px, 28vmin, 240px);
  color: rgba(255, 26, 26, 0.7);
  filter: drop-shadow(0 0 14px rgba(255, 26, 26, 0.4));
  animation: dataCorrupt 0.2s steps(1) 3 forwards, iconFadeOut 0.4s ease-out 0.65s forwards;
}

.tip-lost-burst__icon .svg-icon svg {
  stroke-width: 1.6;
  stroke: rgba(255, 80, 60, 0.7);
  fill: rgba(255, 26, 26, 0.18);
}

@keyframes dataCorrupt {
  0%, 100% { transform: translateX(0);    filter: none; }
  20%       { transform: translateX(-4px); filter: hue-rotate(90deg) saturate(2); }
  40%       { transform: translateX(4px);  filter: hue-rotate(-90deg); }
  60%       { transform: translateX(-2px); filter: none; }
}

@keyframes iconFadeOut {
  from { opacity: 1; }
  to   { opacity: 0.2; }
}

/* "INTEL COMPROMISED" with line-through reveal */
.tip-lost-burst__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 7vmin, 56px);
  letter-spacing: 0.06em;
  color: rgba(255, 80, 60, 0.85);
  text-shadow:
    0 0 18px rgba(255, 26, 26, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.6);
  position: relative;
  animation: artifactLostText 2s ease-out;
}

.tip-lost-burst__name::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  background: var(--crisis-red);
  animation: strikeThrough 0.35s ease-out 0.3s both;
}

@keyframes strikeThrough {
  from { clip-path: inset(0 100% 0 0); width: 100%; }
  to   { clip-path: inset(0 0% 0 0);   width: 100%; }
}

.tip-lost-burst__label {
  font-family: var(--font-mono);
  font-size: clamp(12px, 3.2vmin, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 80, 60, 0.65);
  animation: artifactLostText 2s ease-out;
}

@keyframes artifactLostText {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .tip-lost-burst__icon,
  .tip-lost-burst__name,
  .tip-lost-burst__label { animation: none; opacity: 1; }
  .tip-lost-burst__name::after { animation: none; clip-path: none; width: 100%; }
}

/* ESCAPE BURST — exchange close settlement */

.escape-burst {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 240ms ease-out;
  overflow: hidden;
  perspective: 900px;
}

.escape-burst.is-active { opacity: 1; }
.escape-burst.is-leaving { opacity: 0; transition: opacity 480ms ease-in; }

.escape-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 255, 65, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(2, 6, 5, 0.96), rgba(0, 0, 0, 0.94));
}

.escape-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.04) 0 1px, transparent 1px 44px);
  opacity: 0.5;
  animation: closeGridLock 3.2s ease-out forwards;
}

.escape-burst__ticker {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  display: flex;
  gap: 28px;
  width: max-content;
  min-width: 200%;
  color: rgba(0, 255, 65, 0.64);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.4vmin, 14px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  animation: closeTicker 9s linear infinite;
}

.escape-burst__ticker span {
  border-block: 1px solid rgba(0, 255, 65, 0.24);
  padding: 7px 0;
}

.escape-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  width: min(720px, 92vw);
  padding: clamp(22px, 5vmin, 42px);
  background:
    linear-gradient(180deg, rgba(9, 14, 12, 0.96), rgba(4, 5, 5, 0.94)),
    rgba(6, 6, 6, 0.94);
  border: 1px solid rgba(0, 255, 65, 0.42);
  box-shadow:
    0 0 0 1px rgba(240, 192, 64, 0.12),
    0 26px 90px rgba(0, 0, 0, 0.72),
    inset 0 0 42px rgba(0, 255, 65, 0.06);
  transform-origin: center;
  animation: closeLedgerDrop 3.1s cubic-bezier(0.18, 1, 0.22, 1) forwards;
}

.escape-burst--near-miss .escape-burst__stack {
  border-color: rgba(255, 26, 26, 0.58);
  box-shadow:
    0 0 0 1px rgba(240, 192, 64, 0.16),
    0 26px 90px rgba(0, 0, 0, 0.72),
    inset 0 0 46px rgba(255, 26, 26, 0.09);
}

.escape-burst__bell,
.gameover-burst__bell {
  position: relative;
  width: clamp(54px, 13vmin, 92px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.escape-burst__bell::before,
.gameover-burst__bell::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px solid rgba(240, 192, 64, 0.72);
  border-bottom-width: 6px;
  border-radius: 45% 45% 18% 18%;
  background:
    linear-gradient(180deg, rgba(240, 192, 64, 0.28), rgba(240, 192, 64, 0.04));
  box-shadow: 0 0 28px rgba(240, 192, 64, 0.28);
  animation: closingBellHit 1.45s cubic-bezier(0.18, 1.4, 0.24, 1) 0.18s both;
}

.escape-burst__bell::after,
.gameover-burst__bell::after {
  content: "";
  position: absolute;
  bottom: 15%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(240, 192, 64, 0.7);
}

.escape-burst__bell span,
.gameover-burst__bell span {
  position: absolute;
  inset: -12%;
  border: 1px solid rgba(240, 192, 64, 0.32);
  border-radius: 50%;
  opacity: 0;
  animation: closingBellRing 1.9s ease-out 0.3s forwards;
}

.escape-burst__phew {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(12px, 2.8vmin, 16px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(240, 192, 64, 0.88);
  animation: closeLineIn 0.5s ease-out 0.34s backwards;
}

@keyframes confirmStamp {
  0%   { opacity: 0; transform: scale(1.4); letter-spacing: 0.6em; }
  30%  { opacity: 1; transform: scale(1);   letter-spacing: 0.4em; }
  88%  { opacity: 1; }
  100% { opacity: 0; }
}

.escape-burst__quarter,
.escape-burst__round {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 10vmin, 84px);
  letter-spacing: 0;
  color: var(--terminal-green);
  line-height: 0.96;
  text-shadow: 0 0 36px rgba(0, 255, 65, 0.45), 0 3px 18px rgba(0, 0, 0, 0.7);
  animation: closeTitleLock 1.25s cubic-bezier(0.18, 1, 0.22, 1) 0.48s backwards;
}

.escape-burst--near-miss .escape-burst__quarter,
.escape-burst--near-miss .escape-burst__round {
  color: #ff5a5a;
  text-shadow: 0 0 34px rgba(255, 26, 26, 0.44);
}

.escape-burst__rule {
  width: min(360px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 192, 64, 0.75), transparent);
  transform-origin: center;
  animation: closeRule 0.7s ease-out 0.72s backwards;
}

.escape-burst__summary {
  font-family: var(--font-mono);
  font-size: clamp(13px, 3vmin, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(232, 232, 232, 0.84);
  max-width: 56ch;
  animation: closeLineIn 0.5s ease-out 0.86s backwards;
}

.escape-burst__stamp {
  margin-top: 4px;
  padding: 6px 12px;
  border: 1px solid rgba(240, 192, 64, 0.52);
  color: rgba(240, 192, 64, 0.86);
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.4vmin, 14px);
  font-weight: 600;
  text-transform: uppercase;
  transform: rotate(-2deg);
  animation: closeStamp 0.62s cubic-bezier(0.2, 1.45, 0.3, 1) 1.15s backwards;
}

@keyframes lineIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes closeGridLock {
  0%   { opacity: 0; transform: scale(1.06); }
  24%  { opacity: 0.54; }
  100% { opacity: 0.34; transform: scale(1); }
}

@keyframes closeTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes closeLedgerDrop {
  0%   { opacity: 0; transform: rotateX(16deg) translateY(24px) scale(0.96); filter: blur(6px); }
  20%  { opacity: 1; filter: blur(0); }
  42%  { transform: rotateX(0deg) translateY(0) scale(1.015); }
  68%  { transform: scale(1); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes closingBellHit {
  0%   { transform: rotate(-12deg) translateY(-6px); }
  28%  { transform: rotate(10deg) translateY(2px); }
  48%  { transform: rotate(-5deg); }
  70%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes closingBellRing {
  0%   { opacity: 0; transform: scale(0.68); }
  20%  { opacity: 0.72; }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes closeTitleLock {
  0%   { opacity: 0; transform: translateY(16px) scale(0.9); }
  48%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes closeRule {
  from { opacity: 0; transform: scaleX(0.16); }
  to   { opacity: 1; transform: scaleX(1); }
}

@keyframes closeLineIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes closeStamp {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.36); }
  60%  { opacity: 1; transform: rotate(-2deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .escape-burst::before,
  .escape-burst__ticker,
  .escape-burst__stack,
  .escape-burst__bell::before,
  .escape-burst__bell span,
  .escape-burst__rule,
  .escape-burst__stamp,
  .escape-burst__phew,
  .escape-burst__quarter,
  .escape-burst__round,
  .escape-burst__summary { animation: none; opacity: 1; }
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, auto) minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
  /* v186 iOS notch fix: pad-top respects safe-area-inset-top so the sticky
     topbar's inner content (brand/h1/stats) sits below the iPhone notch /
     Dynamic Island when viewport-fit=cover lets content extend up to y=0.
     Also pad left/right for landscape rotation safe areas.
     v189 F2: switched from max(N, env()) to calc(env() + N) so there is
     ALWAYS N px breathing room above the notch instead of zero. On iPhone
     15 Pro (notch ~59px) the old rule gave padding-top=59 → text vertically
     touched the notch edge; new rule gives 59+14=73 with 14px breathing. */
  padding: calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 22px) 14px calc(env(safe-area-inset-left) + 22px);
  background: rgba(9, 12, 11, 0.9);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.topbar--menu-open {
  z-index: 140;
}

.bottom-hud {
  position: fixed;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--visual-viewport-offset));
  left: calc(var(--visual-viewport-left) + max(10px, env(safe-area-inset-left)));
  width: calc(var(--visual-viewport-width) - max(10px, env(safe-area-inset-left)) - max(10px, env(safe-area-inset-right)));
  z-index: 58;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(14, 18, 16, 0.9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.bottom-hud__item {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 7px 6px;
  border-radius: 8px;
  background: rgba(255, 244, 216, 0.07);
  border: 1px solid rgba(255, 244, 216, 0.1);
}

.bottom-hud__item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.bottom-hud__item strong {
  color: var(--gold);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bottom-hud__item--risk strong {
  color: var(--danger);
}

.bottom-hud__item--scarce strong {
  color: #ff8a3a;
  animation: scarcePulse 0.7s ease-in-out infinite;
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__right {
  justify-content: flex-end;
}

.topbar-menu {
  position: relative;
  z-index: 25;
  flex: 0 0 auto;
}

.icon-button--menu[aria-expanded="true"] {
  color: var(--gold);
  border-color: rgba(232, 184, 77, 0.66);
  background: rgba(232, 184, 77, 0.16);
}

.topbar-menu__popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(190px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(14, 18, 16, 0.96);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 40;
}

.topbar-menu__popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 16px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: inherit;
}

.topbar-menu__item {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}



.brand {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.brand--wordmark {
  gap: 4px;
}

.topbar-brand-wordmark {
  display: grid;
  place-items: center;
  width: min(220px, 42vw);
  max-width: 100%;
  pointer-events: none;
}

.topbar-brand-wordmark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 5px 10px oklch(3% 0.02 250 / 0.72))
    drop-shadow(0 0 8px oklch(82% 0.14 82 / 0.24));
}

.brand__mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(232, 184, 77, 0.65);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background:
    radial-gradient(circle at 50% 28%, rgba(232, 184, 77, 0.26), transparent 38%),
    #151611;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.38);
}

.brand__mark--rich .svg-icon {
  width: 27px;
  height: 27px;
}

.brand__mark--rich .svg-icon svg {
  stroke-width: 1.7;
}

.brand__mark--app-icon {
  overflow: hidden;
  padding: 0;
  border-color: oklch(93% 0.1 86);
  background: oklch(20% 0.055 230);
}

.brand__mark--app-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  color: #ffe6a3;
  text-shadow: 0 2px 0 #4a2d12, 0 10px 22px rgba(0, 0, 0, 0.42);
}

.brand p {
  margin: 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.stat {
  min-width: 86px;
  border-left: 1px solid var(--line-soft);
  padding-left: 14px;
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat__label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}

.stat__value {
  display: block;
  margin-top: 3px;
  color: var(--gold);
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.18);
}

.stat--risk .stat__value {
  color: var(--danger);
}

.stat--online .stat__value {
  color: var(--teal);
}

.stat--scarce .stat__value {
  color: #ff8a3a;
  animation: scarcePulse 0.7s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(255, 138, 58, 0.85);
}

.stat--scarce .stat__label {
  color: #ffae3a;
}

@keyframes scarcePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .stat--scarce .stat__value { animation: none; }
}

.icon-button,
.ghost-button,
.primary-button,
.danger-button,
.choice-button,
.mini-button {
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.icon-button,
.ghost-button,
.mini-button {
  border: 1px solid var(--line-soft);
  background: rgba(255, 244, 216, 0.06);
  color: var(--text);
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
}

.ghost-button,
.primary-button,
.danger-button,
.mini-button {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.mini-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  position: relative;
}
/* P3-2: lift the compact 32px mini-button to a 44px tap height without changing
   its visual size (width is already >=44). Vertical-only so horizontal neighbors
   are unaffected. */
.mini-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}

.primary-button {
  background: linear-gradient(180deg, #f4ca68, #a46724);
  color: #1b1209;
  border: 1px solid rgba(255, 231, 164, 0.55);
}

.danger-button {
  background: linear-gradient(180deg, #f07c51, #92361f);
  color: #fff5e6;
  border: 1px solid rgba(255, 193, 152, 0.45);
}

.icon-button--mute {
  position: relative;
  color: rgba(255, 244, 216, 0.85);
}

.icon-button--mute.is-muted {
  color: rgba(232, 94, 61, 0.95);
  border-color: rgba(232, 94, 61, 0.5);
  background: rgba(232, 94, 61, 0.14);
}

.icon-button--mute.is-muted::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px rgba(232, 94, 61, 0.8);
}

.ghost-button--rules {
  background: rgba(232, 184, 77, 0.14);
  border-color: rgba(232, 184, 77, 0.5);
  color: var(--gold);
}

.ghost-button--rules:hover,
.ghost-button--rules:focus-visible {
  background: rgba(232, 184, 77, 0.22);
  color: #ffe5a2;
}

.ghost-button--rules .svg-icon {
  color: var(--gold);
}

.rule-codex-icon__cover {
  fill: currentColor;
  fill-opacity: 0.13;
  stroke: currentColor;
  stroke-width: 1.65;
}

.rule-codex-icon__spine,
.rule-codex-icon__line,
.rule-codex-icon__crown,
.rule-codex-icon__page {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rule-codex-icon__spine { stroke-width: 1.2; opacity: 0.58; }
.rule-codex-icon__line { stroke-width: 1.15; opacity: 0.62; }
.rule-codex-icon__crown { stroke-width: 1.35; fill: currentColor; fill-opacity: 0.20; }
.rule-codex-icon__page { stroke-width: 1.55; opacity: 0.82; }
.rule-codex-icon__seal {
  fill: oklch(86% 0.15 84);
  stroke: none;
}

.language-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.icon-button:hover,
.ghost-button:hover,
.mini-button:hover,
.primary-button:hover,
.danger-button:hover,
.choice-button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

body.game-animation-locked .app {
  cursor: progress;
}

body.game-animation-locked .app .action-strip,
body.game-animation-locked .app .class-skill-drawer,
body.game-animation-locked .app .topbar-menu__popover {
  pointer-events: none;
}

body.game-animation-locked .app .action-strip button,
body.game-animation-locked .app .class-skill-drawer button,
body.game-animation-locked .app .gameover-actions button:not(.gameover-actions__skip),
body.game-animation-locked .app .topbar-menu__popover button,
.app--interaction-locked [data-action="choose-stay"],
.app--interaction-locked [data-action="choose-leave"],
.app--interaction-locked [data-action="ready-player"],
.app--interaction-locked [data-action="declare-big-short"] {
  cursor: progress;
  opacity: 0.54;
  filter: saturate(0.7);
  transform: none;
}

body.game-animation-locked .app .gameover-actions__skip {
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  filter: none;
}

.svg-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  line-height: 1;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-strip {
  padding: 16px 20px 0;
}

.action-strip .decision-panel {
  max-width: 880px;
  margin: 0 auto;
}

.main-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) 340px;
  gap: 18px;
  padding: 16px 20px 20px;
}

.board {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  gap: 16px;
}

.temple-strip,
.leaderboard-rail,
.player-table,
.decision-panel,
.log-panel,
.score-panel,
.setup-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.temple-strip {
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.leaderboard-rail {
  align-self: start;
  position: sticky;
  top: 88px;
  display: grid;
  gap: 10px;
  max-height: calc(100dvh - 146px);
  overflow: auto;
  padding: 12px;
}

.leaderboard-rail__head {
  display: grid;
  gap: 3px;
}

.leaderboard-rail__head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.leaderboard-rail__head strong {
  overflow: hidden;
  color: #ffe5a2;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rank avatar name score"
    "rank avatar meta meta";
  gap: 2px 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.leaderboard-row.is-leading {
  border-color: rgba(232, 184, 77, 0.7);
  background:
    radial-gradient(circle at 90% 12%, color-mix(in oklch, var(--player-accent, var(--gold)) 22%, transparent), transparent 42%),
    rgba(232, 184, 77, 0.12);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--player-accent, var(--gold)) 16%, transparent);
}

.leaderboard-row.is-me {
  outline: 1px solid rgba(255, 244, 216, 0.38);
  outline-offset: -2px;
}

.leaderboard-row__rank {
  grid-area: rank;
  min-width: 34px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
}

.leaderboard-row__avatar {
  grid-area: avatar;
  width: 30px;
  height: 30px;
  border-color: color-mix(in oklch, var(--player-accent, var(--gold)) 70%, rgba(255, 244, 216, 0.35));
}

.leaderboard-row__name {
  grid-area: name;
  overflow: hidden;
  color: rgba(255, 244, 216, 0.92);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-row__score {
  grid-area: score;
  color: #ffe5a2;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.leaderboard-row__meta {
  grid-area: meta;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.section-title h2,
.section-title h3 {
  margin: 0;
  color: #ffe5a2;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.1;
}

.section-title span,
.section-title small {
  color: var(--muted);
  font-size: 12px;
}

.path {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 4px 2px 8px;
  max-height: min(64vh, 560px);
}

.path::-webkit-scrollbar {
  width: 8px;
}

.path::-webkit-scrollbar-thumb {
  background: rgba(232, 184, 77, 0.34);
  border-radius: 99px;
}

.empty-path {
  width: 100%;
  min-height: 110px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(232, 184, 77, 0.28);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
  padding: 18px;
  font-size: 13px;
}

.card {
  flex: 0 0 auto;
  width: 100%;
  height: 104px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 2px solid rgba(255, 229, 162, 0.55);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 229, 162, 0.22);
  border-radius: 6px;
  pointer-events: none;
}

.card[data-action="inspect-public-card"] {
  cursor: pointer;
}

.card__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.card__symbol {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card__symbol--cash {
  position: relative;
  overflow: hidden;
  align-content: center;
  justify-items: center;
  isolation: isolate;
}

.card__symbol--cash .svg-icon {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
}

.card__symbol-label {
  position: relative;
  z-index: 2;
  color: currentColor;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.card__cash-pile {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 229, 162, 0.86);
  color: rgba(52, 82, 40, 0.86);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16);
}

.card__cash-pile--one {
  left: 9px;
  bottom: 10px;
  transform: rotate(-13deg);
}

.card__cash-pile--two {
  right: 10px;
  top: 12px;
  transform: rotate(10deg);
}

.card__cash-pile--three {
  right: 18px;
  bottom: 9px;
  transform: rotate(-4deg);
}

.card__footer {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.card__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 229, 162, 0.85);
  font-weight: 800;
}

.card__value {
  display: block;
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffe5a2;
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.25);
}

.card__note {
  display: block;
  margin-top: 4px;
  color: rgba(255, 244, 216, 0.7);
  font-size: 12px;
  line-height: 1.25;
}

.card__footer--cash {
  gap: 3px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(7, 16, 13, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.card__cash-kicker {
  color: rgba(255, 244, 216, 0.86);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.card__cash-title {
  display: block;
  color: #fff0bd;
  font-size: clamp(22px, 5.2vmin, 34px);
  font-weight: 950;
  line-height: 0.98;
  text-shadow: 0 0 16px rgba(62, 211, 145, 0.42);
  white-space: nowrap;
}

.card__cash-subtitle {
  display: block;
  color: rgba(255, 244, 216, 0.88);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}

.card__footer--hazard {
  gap: 3px;
}

.card__hazard-kicker {
  color: rgba(255, 244, 216, 0.86);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.card__hazard-title {
  display: block;
  color: #fff0bd;
  font-size: clamp(20px, 4.8vmin, 30px);
  font-weight: 950;
  line-height: 0.98;
  text-shadow: 0 0 16px rgba(232, 94, 61, 0.45);
}

.card__hazard-subtitle,
.card__hazard-rule {
  display: block;
  color: rgba(255, 244, 216, 0.76);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  /* v177: narrow cards on mobile (especially Bear/Black Swan with longer rule
     text) used to wrap onto multiple lines and overflow the 104px card height.
     Cap to one line + ellipsis as a safety belt. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.card__hazard-rule {
  color: #ffd9cf;
}

.card__tag {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 244, 216, 0.85);
}

.card--danger .card__tag {
  background: rgba(232, 94, 61, 0.22);
  border-color: rgba(232, 94, 61, 0.6);
  color: #ffd9cf;
}

.card--cash {
  background:
    radial-gradient(circle at 50% 42%, rgba(62, 211, 145, 0.28), transparent 42%),
    linear-gradient(160deg, #183625, #102019 55%, #07100d);
  border-color: rgba(62, 211, 145, 0.75);
}

.card--cash-big .card__footer--cash {
  background: rgba(52, 31, 6, 0.34);
  border-color: rgba(255, 229, 162, 0.34);
}

.card--cash-big .card__cash-title {
  color: #ffe5a2;
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.34);
}

.card--crisis {
  background:
    radial-gradient(circle at 50% 42%, rgba(232, 94, 61, 0.25), transparent 42%),
    linear-gradient(160deg, #3b1712, #1c1110 58%, #090807);
  border-color: rgba(232, 94, 61, 0.78);
}

.card--tip {
  background:
    radial-gradient(circle at 50% 42%, rgba(49, 185, 183, 0.32), transparent 42%),
    linear-gradient(160deg, #0f3b3b, #102223 56%, #070d0d);
  border-color: rgba(49, 185, 183, 0.78);
}

.player-table {
  overflow: hidden;
  position: relative;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.player-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.player-row.is-active {
  background: rgba(62, 211, 145, 0.1);
  border-color: rgba(62, 211, 145, 0.32);
}

.player-row.is-out {
  color: rgba(255, 244, 216, 0.55);
}

.player-row.is-me {
  outline: 1px solid rgba(232, 184, 77, 0.55);
  outline-offset: -1px;
}

.player-row.is-ghost {
  background:
    linear-gradient(180deg, oklch(34% 0.07 292 / 0.2), rgba(0, 0, 0, 0.22));
  border-color: oklch(72% 0.11 302 / 0.24);
}

.player-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.player-row__status {
  font-size: 13px;
  color: rgba(255, 244, 216, 0.88);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.player-row__status strong {
  color: var(--jade);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 244, 216, 0.38);
  background: rgba(255, 244, 216, 0.22);
  color: #fff7e6;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-chip--thinking {
  border-color: rgba(62, 211, 145, 0.65);
  background: rgba(62, 211, 145, 0.30);
  color: #e9fff4;
  box-shadow: 0 0 18px rgba(62, 211, 145, 0.22);
}

.status-chip--locked,
.status-chip--ready {
  border-color: rgba(232, 184, 77, 0.65);
  background: rgba(232, 184, 77, 0.30);
  color: #fff3c8;
}

.status-chip--waiting,
.status-chip--active {
  border-color: rgba(255, 244, 216, 0.36);
  background: rgba(255, 244, 216, 0.22);
  color: #fff8e6;
}

.status-chip--host {
  border-color: rgba(124, 168, 255, 0.58);
  background: rgba(124, 168, 255, 0.28);
  color: #eaf0ff;
}

.status-chip--stay {
  border-color: rgba(62, 211, 145, 0.65);
  background: rgba(62, 211, 145, 0.30);
  color: #e9fff4;
}

.status-chip--leave {
  border-color: rgba(232, 184, 77, 0.68);
  background: rgba(232, 184, 77, 0.32);
  color: #fff3c8;
}

.player-row__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.player-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  min-width: 0;
}

.player-stat__label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-stat__value {
  font-size: 20px;
  font-weight: 900;
  color: #fff5d7;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.player-stat__value.gem-stack {
  color: var(--jade);
}

.player-stat__value--banked {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(232, 184, 77, 0.2);
}

.player-stat__value--artifacts {
  font-size: 14px;
  color: rgba(255, 244, 216, 0.85);
  flex-wrap: wrap;
  gap: 4px 6px;
}

.player-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.avatar--trader {
  border-color: rgba(255, 244, 216, 0.32);
  background: rgba(255, 244, 216, 0.08);
  color: inherit;
}

.avatar--trader img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.player-label {
  min-width: 0;
}

.player-label strong {
  display: block;
  overflow: hidden;
  color: #fff3d6;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(255, 244, 216, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.chip--ghost {
  border-color: oklch(75% 0.12 302 / 0.42);
  background: oklch(42% 0.09 300 / 0.18);
  color: oklch(89% 0.05 306);
}

.chip--class {
  gap: 4px;
  border-color: oklch(74% 0.14 78 / 0.42);
  background: oklch(52% 0.12 78 / 0.18);
  color: oklch(90% 0.09 86);
}

.chip--class b {
  color: var(--gold);
  font-weight: 950;
}

.number-cell {
  font-size: 20px;
  font-weight: 900;
  color: #fff5d7;
}

.gem-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--jade);
  font-weight: 900;
}

.status-cell {
  color: var(--muted);
  font-size: 13px;
}

.status-cell strong {
  color: var(--jade);
}

.side {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(220px, 1fr);
  gap: 14px;
}

.decision-panel,
.log-panel,
.score-panel {
  padding: 14px;
}

.decision-panel {
  position: relative;
  overflow: hidden;
}

.decision-panel--confirming {
  overflow: visible;
  z-index: 67;
}

.decision-panel--choosing {
  overflow: visible;
  z-index: 65;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.decision-panel::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 77, 0.65), transparent);
  pointer-events: none;
}

.decision-panel--handoff {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(49, 185, 183, 0.18), transparent 36%),
    var(--panel-strong);
}

.choice-stage {
  display: grid;
  gap: 12px;
}

.voter-card {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 14px;
  background: rgba(255, 244, 216, 0.06);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.privacy-card {
  min-height: 156px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(255, 244, 216, 0.03)),
    rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.privacy-card span,
.leave-preview span,
.intel-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.leave-preview__lose {
  background: linear-gradient(180deg, rgba(232, 60, 40, 0.18), rgba(80, 18, 12, 0.32));
  border-color: rgba(232, 60, 40, 0.55) !important;
  box-shadow: 0 0 14px rgba(232, 60, 40, 0.32);
  animation: lossPreviewPulse 1.6s ease-in-out infinite;
  grid-column: 1 / -1;
}

.leave-preview__lose span {
  color: #ffd9cf !important;
}

.leave-preview__lose strong {
  color: #ff5a3d !important;
  text-shadow: 0 0 12px rgba(255, 90, 61, 0.8);
}

@keyframes lossPreviewPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 60, 40, 0.28); }
  50%      { box-shadow: 0 0 22px rgba(232, 60, 40, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .leave-preview__lose { animation: none; }
}

.privacy-card strong {
  color: #fff5d7;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.privacy-card p,
.leave-preview p {
  margin: 0;
  color: rgba(255, 244, 216, 0.76);
  font-size: 13px;
  line-height: 1.5;
}

.turn-callout {
  --turn-accent-soft: color-mix(in oklch, var(--player-accent, var(--gold)) 22%, transparent);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 16px 14px;
  overflow: hidden;
  border: 2px solid color-mix(in oklch, var(--player-accent, var(--gold)) 72%, rgba(255, 244, 216, 0.16));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 0%, var(--turn-accent-soft), transparent 54%),
    linear-gradient(180deg, rgba(255, 244, 216, 0.12), rgba(255, 244, 216, 0.04)),
    rgba(0, 0, 0, 0.3);
  color: #fff5d7;
  text-align: center;
  box-shadow:
    0 0 0 5px color-mix(in oklch, var(--player-accent, var(--gold)) 16%, transparent),
    inset 0 1px 0 rgba(255, 244, 216, 0.18),
    0 18px 32px rgba(0, 0, 0, 0.2);
  animation: turnCalloutPulse 1.65s ease-in-out infinite;
}

.turn-callout::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed color-mix(in oklch, var(--player-accent, var(--gold)) 44%, transparent);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
  z-index: -1;
}

.turn-callout__avatar {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border-color: color-mix(in oklch, var(--player-accent, var(--gold)) 48%, rgba(255, 244, 216, 0.55));
  box-shadow:
    0 0 0 3px rgba(255, 244, 216, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

.turn-callout--active-turn {
  border-color: color-mix(in oklch, var(--player-accent, var(--gold)) 84%, #fff5d7);
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--player-accent, var(--gold)) 24%, transparent),
    0 0 0 8px color-mix(in oklch, var(--player-accent, var(--gold)) 18%, transparent),
    inset 0 0 0 2px rgba(255, 244, 216, 0.22),
    inset 0 12px 36px color-mix(in oklch, var(--player-accent, var(--gold)) 16%, transparent),
    0 20px 38px rgba(0, 0, 0, 0.24);
}

.turn-callout__kicker {
  color: color-mix(in oklch, var(--player-accent, var(--gold)) 72%, #fff5d7);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
}

.turn-callout strong {
  display: block;
  max-width: 100%;
  color: #fff9e8;
  font-family: var(--font-display);
  font-size: clamp(31px, 8vw, 48px);
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in oklch, var(--player-accent, var(--gold)) 48%, transparent);
}

.turn-callout small {
  display: block;
  max-width: 24ch;
  color: rgba(255, 244, 216, 0.92);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

@keyframes turnCalloutPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(240, 192, 64, 0.2),
      0 0 0 8px color-mix(in oklch, var(--player-accent, var(--gold)) 12%, transparent),
      inset 0 1px 0 rgba(255, 244, 216, 0.18),
      0 18px 32px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(240, 192, 64, 0.3),
      0 0 0 11px color-mix(in oklch, var(--player-accent, var(--gold)) 24%, transparent),
      inset 0 1px 0 rgba(255, 244, 216, 0.24),
      0 22px 40px rgba(0, 0, 0, 0.26);
  }
}

/* Red-zone selectors are prefixed with `.leave-preview ` so they beat the
   later `.leave-preview div` (0,1,1) and `.leave-preview strong` (0,1,1)
   generic rules — without that boost the red-zone container loses its
   background/border/padding and the % readout inherits white/23px. */
.leave-preview .leave-preview__red-zone {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 94, 61, 0.18), rgba(232, 94, 61, 0.06));
  border: 1px solid rgba(232, 94, 61, 0.55);
  animation: red-zone-pulse 1.6s ease-in-out infinite;
}
.leave-preview .leave-preview__red-zone .red-zone__label,
.leave-preview .leave-preview__red-zone .red-zone__bar,
.leave-preview .leave-preview__red-zone .red-zone__fill {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  min-width: 0;
}
.leave-preview .leave-preview__red-zone .red-zone__bar {
  background: rgba(28, 12, 10, 0.65);
  border-radius: 999px;
}
.leave-preview .leave-preview__red-zone .red-zone__fill {
  background: linear-gradient(90deg, #f5b78a, #e85e3d 50%, #b22a18);
  border-radius: 999px;
}
.leave-preview .leave-preview__red-zone .red-zone__label strong {
  display: inline;
  margin-top: 0;
  color: #ff8a6f;
  font-size: 22px;
  font-family: var(--font-display);
  text-shadow: 0 0 12px rgba(255, 120, 80, 0.55);
}
.leave-preview .leave-preview__red-zone.is-high {
  background: linear-gradient(135deg, rgba(232, 94, 61, 0.28), rgba(232, 94, 61, 0.12));
  border-color: rgba(232, 94, 61, 0.78);
  animation-duration: 1.1s;
}
.leave-preview .leave-preview__red-zone.is-extreme {
  background: linear-gradient(135deg, rgba(232, 94, 61, 0.4), rgba(232, 94, 61, 0.18));
  border-color: rgba(255, 120, 90, 0.95);
  animation-duration: 0.8s;
}
.leave-preview .red-zone__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: #ffd2c2;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.leave-preview .red-zone__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(28, 12, 10, 0.65);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.leave-preview .red-zone__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b78a, #e85e3d 50%, #b22a18);
  box-shadow: 0 0 10px rgba(232, 94, 61, 0.6);
  transition: width 280ms ease-out;
}
@keyframes red-zone-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(232, 94, 61, 0); }
  50%      { box-shadow: 0 0 16px rgba(232, 94, 61, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .leave-preview .leave-preview__red-zone { animation: none; }
}

.voter-card span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.voter-card strong {
  font-size: 24px;
  line-height: 1;
  color: #fff5d7;
}

.choice-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}

.intel-grid,
.leave-preview {
  display: grid;
  gap: 8px;
}

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

.intel-grid div,
.leave-preview div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
}

.intel-grid strong,
.leave-preview strong {
  display: block;
  margin-top: 4px;
  color: #fff5d7;
  font-size: 23px;
  line-height: 1;
}

.leave-preview {
  grid-template-columns: 1fr 1fr;
}

.leave-preview p {
  grid-column: 1 / -1;
  padding: 0 2px;
}

.choice-button {
  position: relative;
  min-height: 78px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  color: var(--text);
  border: 1px solid rgba(255, 244, 216, 0.16);
  /* v184 iOS PWA defensive: ensure iOS Safari treats these as instantly
     tappable. cursor: pointer is iOS's "this is interactive" hint;
     -webkit-tap-highlight-color: transparent removes the grey flash;
     touch-action: manipulation kills the 300ms tap delay AND disables
     double-tap zoom on the button area; -webkit-touch-callout: none stops
     long-press context menus interfering with the choice. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* B2: subtle solo-cash-out patent hint, tucked on the button edge. */
.choice-button .choice-button__solo {
  position: absolute;
  top: 5px;
  right: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.04em;
  color: rgba(126, 234, 214, 0.92);
  background: rgba(34, 110, 100, 0.36);
  border: 1px solid rgba(126, 234, 214, 0.3);
}

.choice-button--solo-bonus {
  box-shadow: inset 0 0 0 1px rgba(126, 234, 214, 0.16);
}

.choice-button strong {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1;
}

.choice-button span {
  color: rgba(255, 244, 216, 0.72);
  font-size: 12px;
}

.decision-choice-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(212, 168, 78, 0.32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 168, 78, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(15, 22, 36, 0.92), rgba(5, 9, 16, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 215, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.32);
}

.decision-choice-brief__headline {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 3px 6px 0;
  color: rgba(255, 245, 215, 0.9);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.22;
  text-align: center;
  overflow-wrap: anywhere;
}

.decision-choice-brief__option {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 244, 216, 0.12);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
}

.decision-choice-brief__option span {
  color: rgba(255, 244, 216, 0.7);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
}

.decision-choice-brief__option strong {
  display: block;
  color: #fff5d7;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.decision-choice-brief__option small {
  color: rgba(255, 244, 216, 0.68);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.decision-choice-brief__option--stay {
  border-color: rgba(54, 214, 139, 0.28);
  background:
    linear-gradient(135deg, rgba(39, 193, 119, 0.18), rgba(0, 0, 0, 0.16)),
    rgba(0, 0, 0, 0.22);
}

.decision-choice-brief--risk-mid .decision-choice-brief__option--stay,
.decision-choice-brief--risk-high .decision-choice-brief__option--stay {
  border-color: rgba(230, 80, 70, 0.46);
  background:
    repeating-linear-gradient(-12deg, transparent 0 8px, rgba(230, 80, 70, 0.12) 9px 11px),
    linear-gradient(135deg, rgba(180, 42, 32, 0.24), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.22);
}

.decision-choice-brief--risk-mid .decision-choice-brief__option--stay strong {
  color: #ffd56f;
}

.decision-choice-brief--risk-high .decision-choice-brief__option--stay strong {
  color: #ff7d72;
}

.decision-choice-brief__option--leave {
  border-color: rgba(212, 168, 78, 0.42);
  background:
    radial-gradient(circle at 82% 18%, rgba(245, 200, 120, 0.2), transparent 42%),
    linear-gradient(135deg, rgba(120, 78, 20, 0.24), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.22);
}

.decision-choice-brief__option--leave strong {
  color: #f6d887;
}

.choice-button--stay {
  background:
    radial-gradient(circle at 22% 18%, rgba(62, 211, 145, 0.22), transparent 34%),
    linear-gradient(180deg, #1d754f, #0d3327);
}

.choice-button--leave {
  background:
    radial-gradient(circle at 22% 18%, rgba(232, 184, 77, 0.18), transparent 34%),
    linear-gradient(180deg, #9a3f24, #4b1c15);
}

.decision-meta {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.choice-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choice-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 244, 216, 0.08);
  border-radius: var(--radius);
  font-size: 13px;
}

.choice-list b {
  color: #fff5d7;
}

.player-status-list {
  display: grid;
  gap: 7px;
}

.player-status-list__row {
  --player-accent: var(--jade);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px 6px 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--player-accent) 40%, rgba(255, 244, 216, 0.16));
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--player-accent) 24%, transparent), rgba(0, 0, 0, 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.player-status-list__row--thinking {
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--player-accent) 18%, transparent);
}

.player-status-list__breakdown {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.01em;
  padding-top: 4px;
  padding-left: 2px;
  font-variant-numeric: tabular-nums;
}

.player-status-list__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid color-mix(in oklch, var(--player-accent) 80%, rgba(255, 255, 255, 0.55));
  background: rgba(0, 0, 0, 0.18);
}

.player-status-list__avatar .avatar {
  width: 100%;
  height: 100%;
}

.player-status-list__name {
  min-width: 0;
  overflow: hidden;
  color: #fff8e7;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quarter-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 244, 216, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
}

.quarter-progress__timer {
  color: #fff2bf;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.quarter-progress__meta {
  color: rgba(255, 245, 220, 0.92);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

/* Batch C-2: quarter-end near-miss recap lines (who busted / who escaped most) */
.quarter-recap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.quarter-recap li {
  padding: 6px 11px;
  border: 1px solid rgba(212, 168, 78, 0.16);
  border-radius: 10px;
  background: rgba(255, 244, 216, 0.045);
  color: rgba(255, 245, 220, 0.72);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* near-miss: push-your-luck warning callout — louder than a normal recap row */
.quarter-recap li.quarter-recap__item--near-miss {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 96, 64, 0.55);
  background: linear-gradient(90deg, rgba(255, 72, 44, 0.18), rgba(255, 128, 64, 0.05));
  color: #fff1e8;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 0 0 1px rgba(255, 96, 64, 0.12), 0 6px 18px -10px rgba(255, 64, 40, 0.55);
}
.quarter-recap__tag {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.quarter-recap__line {
  flex: 1;
  min-width: 0;
}
.quarter-recap__danger {
  color: #ff7a4d;
  font-weight: 900;
}

.decision-ready-actions {
  display: grid;
  gap: 8px;
}

.decision-ready-actions .waiting-note {
  margin: 0;
}

.log-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 6px;
}

.log-panel.is-closed {
  grid-template-rows: auto;
}

.log-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffe5a2;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.log-toggle:hover,
.log-toggle:focus-visible {
  background: rgba(232, 184, 77, 0.08);
  outline: none;
}

.log-toggle__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.log-toggle__main .svg-icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

.log-toggle__count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid rgba(255, 244, 216, 0.16);
  border-radius: 99px;
}

.log-toggle__caret {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 180ms ease;
}

.log-toggle__caret.is-open {
  transform: rotate(180deg);
}

.log-list {
  margin: 8px 6px 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  max-height: 220px;
}

.log-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 244, 216, 0.06);
  color: rgba(255, 244, 216, 0.62);
  font-size: 12px;
  line-height: 1.3;
}

.log-list li:first-child {
  color: #fff5d7;
  font-weight: 600;
}

.log-more {
  margin: 6px 6px 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.06em;
}

.rules-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 244, 216, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.score-panel {
  display: grid;
  gap: 10px;
}

.winner {
  padding: 12px;
  border: 1px solid rgba(62, 211, 145, 0.42);
  border-radius: var(--radius);
  background: rgba(62, 211, 145, 0.12);
}

.winner strong {
  color: #a8ffd4;
}

.setup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  /* v186 iOS notch fix: padding respects safe-area on all 4 sides so the
     welcome panel / FTUE picker doesn't sit under the notch or home indicator
     when viewport-fit=cover.
     v189 F2: calc(env() + 18px) instead of max(18, env) so notch/home
     indicator always have 18px breathing room. */
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.setup-panel {
  width: min(760px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 18px;
}

.setup-copy {
  margin: -2px 0 14px;
  color: rgba(255, 244, 216, 0.74);
  font-size: 14px;
  line-height: 1.45;
}

.setup-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(255, 244, 216, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 244, 216, 0.06), rgba(0, 0, 0, 0.12)),
    rgba(0, 0, 0, 0.16);
}

.setup-flow__step {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: 10px;
  color: rgba(255, 244, 216, 0.64);
  background: rgba(0, 0, 0, 0.12);
}

.setup-flow__step span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 244, 216, 0.1);
  color: rgba(255, 244, 216, 0.72);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 950;
}

.setup-flow__step strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-flow__step.is-done {
  border-color: rgba(62, 211, 145, 0.32);
  color: rgba(205, 255, 226, 0.86);
  background: rgba(62, 211, 145, 0.1);
}

.setup-flow__step.is-done span {
  background: rgba(62, 211, 145, 0.18);
  color: #a8ffd4;
}

.setup-flow__step.is-current {
  border-color: rgba(232, 184, 77, 0.76);
  color: #fff2c5;
  background:
    radial-gradient(circle at 88% 18%, rgba(232, 184, 77, 0.22), transparent 42%),
    rgba(232, 184, 77, 0.12);
  box-shadow:
    0 0 0 1px rgba(232, 184, 77, 0.16) inset,
    0 0 22px rgba(232, 184, 77, 0.16);
}

.setup-flow__step.is-current span {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #24170a;
}

.setup-step-title {
  margin: 2px 0 -2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(22px, 4.8vw, 32px);
  line-height: 1.05;
}

.setup-step-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 244, 216, 0.16);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 10%, rgba(232, 184, 77, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 244, 216, 0.08), rgba(0, 0, 0, 0.16));
}

.setup-step-card__eyebrow {
  width: max-content;
  padding: 4px 8px;
  border: 1px solid rgba(232, 184, 77, 0.34);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(232, 184, 77, 0.1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.setup-step-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
}

.setup-step-card p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.setup-mode-note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(83, 203, 194, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(83, 203, 194, 0.12), rgba(232, 184, 77, 0.08)),
    rgba(0, 0, 0, 0.12);
}

.setup-mode-note strong {
  color: #dffdfa;
  font-size: 13px;
  font-weight: 950;
}

.setup-mode-note span {
  color: rgba(255, 244, 216, 0.72);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.setup-actions--wizard {
  align-items: center;
}

.setup-advanced--matchmaking {
  margin-top: 0;
}

.setup-grid {
  display: grid;
  gap: 12px;
}

.setup-grid__full {
  grid-column: 1 / -1;
}

.setup-advanced {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 244, 216, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.setup-advanced[open] {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 244, 216, 0.26);
}

.setup-advanced__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: #ffe5a2;
  position: relative;
  padding-right: 24px;
}

.setup-advanced__summary::-webkit-details-marker {
  display: none;
}

.setup-advanced__summary::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transition: transform 180ms ease;
  font-size: 12px;
  opacity: 0.7;
}

.setup-advanced[open] .setup-advanced__summary::after {
  transform: translateY(-50%) rotate(0);
}

.setup-advanced__summary small {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 245, 215, 0.65);
  letter-spacing: 0.02em;
}

.setup-advanced__body {
  margin-top: 10px;
}

.setup-control {
  display: grid;
  gap: 6px;
}

.setup-control label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.setup-control input,
.setup-control select {
  width: 100%;
  min-height: 44px;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
  padding: 0 12px;
}

.setup-control select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  font-weight: 900;
}

.setup-control--room {
  grid-column: 1 / -1;
}

.room-code-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.room-code-entry input {
  min-width: 0;
}

.room-invite-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.room-invite-actions .ghost-button {
  min-height: 44px;
  white-space: nowrap;
}

.room-code {
  display: grid;
  gap: 6px;
  width: min(100%, 430px);
  justify-self: center;
  padding: 12px;
  border: 1px solid rgba(255, 244, 216, 0.14);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.2);
}

.room-code--with-actions {
  width: min(100%, 560px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.room-code span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.room-code strong {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.setup-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.15);
}

.ruleset-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ruleset-toggle__btn,
.class-picker__btn {
  appearance: none;
  min-width: 0;
  border: 1px solid rgba(255, 244, 216, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.ruleset-toggle__btn {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.ruleset-toggle__btn strong,
.class-picker__btn strong {
  font-size: 13px;
  font-weight: 950;
}

.ruleset-toggle__btn span,
.class-picker__btn small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.ruleset-toggle__btn.is-selected,
.class-picker__btn.is-selected {
  border-color: var(--gold);
  background: rgba(232, 184, 77, 0.16);
  box-shadow: 0 0 0 1px rgba(232, 184, 77, 0.14) inset;
}

.variant-selector {
  display: grid;
  gap: 8px;
}

.variant-selector--buttons {
  gap: 10px;
}

.variant-selector__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.variant-selector__grid {
  display: grid;
  gap: 8px;
}

.variant-selector--buttons .variant-selector__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.variant-selector--compact .variant-selector__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variant-card {
  appearance: none;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 86px;
  padding: 10px;
  border: 2px solid oklch(69% 0.1 84 / 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 14%, oklch(95% 0.12 88 / 0.55), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  color: var(--toy-ink);
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.82),
    0 4px 0 oklch(55% 0.1 84 / 0.12);
}

.variant-card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.88),
    0 5px 0 oklch(55% 0.1 84 / 0.16),
    0 12px 22px oklch(54% 0.1 84 / 0.12);
}

.variant-card:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.variant-card__code,
.variant-lobby-note span {
  display: grid;
  place-items: center;
  width: max-content;
  min-width: 38px;
  height: 28px;
  padding: 0 8px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 56%, var(--toy-coin-deep));
  color: oklch(30% 0.08 66);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 2px 0 oklch(55% 0.12 63 / 0.2);
}

.variant-card__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.variant-card strong,
.variant-lobby-note strong {
  color: var(--toy-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.variant-card small {
  color: var(--toy-muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.variant-card.is-selected {
  border-color: var(--toy-coin-deep);
  background:
    radial-gradient(circle at 86% 14%, oklch(96% 0.14 88 / 0.7), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.04 92), oklch(88% 0.12 84));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 0 0 3px oklch(84% 0.14 84 / 0.18),
    0 7px 0 oklch(55% 0.12 63 / 0.18);
}

.variant-card--random {
  border-color: oklch(69% 0.12 286 / 0.36);
  background:
    radial-gradient(circle at 82% 12%, oklch(80% 0.14 286 / 0.34), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 286));
}

.variant-card--random .variant-card__code {
  background:
    radial-gradient(circle at 50% 35%, oklch(99% 0.03 92 / 0.34), transparent 48%),
    linear-gradient(135deg, oklch(72% 0.14 286), oklch(76% 0.15 76));
  color: oklch(99% 0.02 92);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.42),
    0 0 18px oklch(72% 0.14 286 / 0.28);
}

.variant-card--random.is-selected {
  border-color: oklch(73% 0.16 286 / 0.76);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.82),
    0 0 0 3px oklch(74% 0.14 286 / 0.16),
    0 0 22px oklch(72% 0.14 286 / 0.24);
}

.variant-selector__summary {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid oklch(64% 0.14 190 / 0.36);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 10%, oklch(86% 0.11 190 / 0.32), transparent 36%),
    linear-gradient(180deg, oklch(98% 0.025 92), oklch(89% 0.05 190));
  box-shadow: inset 0 1px 0 oklch(99% 0.02 92 / 0.86);
}

.variant-selector__summary strong {
  color: oklch(28% 0.08 190);
  font-size: 13px;
  font-weight: 950;
}

.variant-selector__summary span {
  color: var(--toy-muted);
  font-size: 12px;
  font-weight: 740;
  line-height: 1.35;
}

.setup-variant-help {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}

.setup-variant-help__button {
  min-height: 44px;
  padding: 7px 11px;
  font-size: 12px;
}

.themed-select,
.variant-dropdown {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  overflow: hidden;
  border: 2px solid oklch(69% 0.11 84 / 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 12%, oklch(88% 0.13 84 / 0.34), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.9),
    0 5px 0 oklch(55% 0.1 84 / 0.18),
    0 14px 24px var(--toy-shadow);
}

.themed-select {
  padding: 7px 12px;
}

.themed-select select,
.variant-dropdown__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.themed-select__badge,
.variant-dropdown__code {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 56%, var(--toy-coin-deep));
  color: oklch(30% 0.08 66);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 3px 0 oklch(55% 0.12 63 / 0.24);
}

.themed-select__value,
.variant-dropdown__body {
  min-width: 0;
  font-weight: 950;
  line-height: 1.1;
}

.themed-select__chevron,
.variant-dropdown__chevron {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--toy-coin-deep);
  pointer-events: none;
}

.themed-select__chevron .svg-icon,
.variant-dropdown__chevron .svg-icon {
  width: 18px;
  height: 18px;
}

.ruleset-toggle.ruleset-toggle--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ruleset-toggle--duo .ruleset-toggle__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  overflow: hidden;
  padding: 11px;
  border-radius: 8px;
  border: 2px solid oklch(69% 0.11 84 / 0.42);
  background:
    radial-gradient(circle at 86% 12%, oklch(85% 0.12 84 / 0.28), transparent 42%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.88),
    0 5px 0 oklch(55% 0.1 84 / 0.16),
    0 14px 22px var(--toy-shadow);
}

.ruleset-toggle--duo .ruleset-toggle__btn--class {
  background:
    radial-gradient(circle at 86% 10%, oklch(78% 0.13 220 / 0.24), transparent 44%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.04 220));
}

.ruleset-toggle__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  border: 1px solid oklch(92% 0.1 88);
  color: oklch(37% 0.1 66);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 3px 0 oklch(55% 0.12 63 / 0.2);
}

.ruleset-toggle__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ruleset-toggle__copy strong,
.ruleset-toggle__copy small {
  overflow-wrap: anywhere;
}

.ruleset-toggle__copy small {
  color: var(--toy-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.ruleset-toggle--duo .ruleset-toggle__btn.is-selected {
  border-color: var(--toy-coin-deep);
  background:
    radial-gradient(circle at 88% 10%, oklch(87% 0.15 84 / 0.4), transparent 42%),
    linear-gradient(180deg, oklch(99% 0.025 92), oklch(91% 0.075 84));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 5px 0 oklch(55% 0.12 63 / 0.22),
    0 16px 26px var(--toy-shadow);
}

.variant-dropdown {
  min-height: 62px;
  padding: 9px 12px;
}

.variant-dropdown__body {
  display: grid;
  gap: 3px;
}

.variant-dropdown__body strong,
.variant-dropdown__body small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-dropdown__body strong {
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.variant-dropdown__body small {
  color: var(--toy-muted);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.25;
}

.variant-selector--compact .variant-dropdown {
  min-height: 50px;
}

.variant-selector--compact .variant-dropdown__body small {
  display: none;
}

.variant-dropdown--random {
  border-color: oklch(69% 0.11 286 / 0.42);
  background:
    radial-gradient(circle at 86% 10%, oklch(74% 0.13 286 / 0.22), transparent 42%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 286));
}

.variant-lobby-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 244, 216, 0.12);
  background: rgba(0, 0, 0, 0.18);
}

.class-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.class-picker__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
}

.class-picker--compact {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.class-picker--compact .class-picker__btn {
  padding: 7px;
}

.class-badge {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(232, 184, 77, 0.3), rgba(62, 211, 145, 0.16));
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.setup-player__identity {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.setup-player__avatar {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.setup-seat-tools {
  margin-top: 10px;
}

.setup-seat-tools__toggle {
  width: 100%;
  justify-content: center;
}

.toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.hidden {
  display: none !important;
}

@media (max-width: 1120px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard-rail {
    position: static;
    max-height: none;
    overflow: hidden;
  }

  .leaderboard-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(172px, 1fr);
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .leaderboard-row {
    scroll-snap-align: start;
  }

  .side {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .log-panel.is-open {
    min-height: 220px;
  }
}

@media (max-width: 820px) {
  .topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .topbar__left,
  .topbar__right {
    justify-content: center;
  }

  .brand {
    order: -1;
  }

  .action-strip {
    padding: 12px 12px 0;
  }

  .main-grid {
    padding: 8px 12px 12px;
  }

  .side {
    grid-template-columns: 1fr;
  }

  .player-stat__value {
    font-size: 18px;
  }

  .player-stat__label {
    font-size: 9px;
  }

  .path {
    max-height: min(56vh, 480px);
  }

  .card {
    height: 92px;
    grid-template-columns: 84px 1fr auto;
    padding: 8px 12px 8px 8px;
  }

  .card__symbol {
    width: 76px;
    height: 76px;
    font-size: 44px;
  }

  .card__value {
    font-size: 32px;
  }

  .choice-stage {
    gap: 8px;
  }

  .voter-card {
    min-height: 56px;
    padding: 10px 14px;
  }

  .privacy-card {
    min-height: 96px;
    padding: 12px 14px;
    gap: 4px;
  }

  .privacy-card strong {
    font-size: 26px;
  }

  .privacy-card p,
  .leave-preview p {
    font-size: 12px;
    line-height: 1.35;
  }

  .choice-button {
    min-height: 64px;
  }

  .choice-button strong {
    font-size: 22px;
  }

  .choice-button span {
    font-size: 11px;
  }

  .intel-grid div,
  .leave-preview div {
    padding: 6px 8px;
  }

  .intel-grid strong,
  .leave-preview strong {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .brand h1 {
    font-size: 24px;
  }

  .topbar__left,
  .topbar__right {
    flex-wrap: wrap;
  }

  .stat {
    min-width: 74px;
  }

  .choice-button strong {
    font-size: 24px;
  }

  .setup-backdrop {
    /* v189 F2: mobile override must keep safe-area or it kills the v186 notch
       padding from the base rule. calc(env() + 10px) for breathing room. */
    padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 10px);
    align-items: start;
  }

  .setup-panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }

  .setup-panel > .section-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    text-align: center;
  }

  .setup-panel > .section-title h2 {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: 12em;
    font-size: 20px;
    line-height: 1.2;
  }

  .setup-panel > .section-title .language-toggle,
  .setup-panel > .section-title .icon-button {
    grid-row: 1;
  }

  .setup-panel > .section-title .language-toggle {
    grid-column: 1;
    justify-self: start;
  }

  .setup-panel > .section-title .icon-button {
    grid-column: 3;
    justify-self: end;
  }

  .rules-list {
    font-size: 13px;
    line-height: 1.42;
  }

  .rules-list li {
    padding: 9px 10px;
  }

  .rules-list strong,
  .rules-list span,
  .setup-copy,
  .onboarding-rules summary {
    text-wrap: balance;
  }

  .setup-actions,
  .setup-actions--split,
  .lobby-actions,
  .gameover-actions,
  .rules-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .setup-actions .ghost-button,
  .setup-actions .primary-button,
  .lobby-actions .ghost-button,
  .lobby-actions .primary-button,
  .gameover-actions .ghost-button,
  .gameover-actions .primary-button,
  .rules-actions .ghost-button,
  .rules-actions .primary-button {
    width: 100%;
  }

  /* F2: setup 開始按鈕黏在 viewport 底部，玩家不需捲到最下方 */
  .setup-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0 0;
    padding: 12px 20px max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, rgba(248, 244, 232, 0.92) 18%, rgba(248, 244, 232, 0.98) 100%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Card reveal — vertical wipe (Bloomberg data-row loading) */
@keyframes cardReveal {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0; }
  50%  { clip-path: inset(0 0 0% 0);   opacity: 1; }
  100% { clip-path: inset(0 0 0% 0);   opacity: 1; }
}

.card--latest {
  animation: cardReveal 0.42s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card--latest { animation: none; opacity: 1; clip-path: none; }
}

.card--lost {
  opacity: 0.4;
  filter: grayscale(1);
}

/* Hazard flash — arterial red */
@keyframes hazardFlash {
  0%, 100% { box-shadow: none; }
  20%      { box-shadow: inset 0 0 0 5px rgba(255, 26, 26, 0.9); }
  50%      { box-shadow: inset 0 0 0 2px rgba(255, 26, 26, 0.5); }
  70%      { box-shadow: inset 0 0 0 5px rgba(255, 26, 26, 0.9); }
}

.app--hazard-flash {
  animation: hazardFlash 0.7s ease-in-out;
}

/* Game-over full-screen overlay */
.card-inspect-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);
}

.card-inspect-overlay__dim {
  /* v192-block fix (Sonnet F01): was div, now button for tap-to-dismiss.
     Override default button visual so it stays a transparent backdrop. */
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.76);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.card-inspect-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid oklch(68% 0.11 84 / 0.28);
  background:
    radial-gradient(circle at 86% 12%, oklch(89% 0.14 84 / 0.18), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.98), oklch(92% 0.05 92 / 0.98));
  color: var(--toy-ink);
  box-shadow:
    0 0 0 4px oklch(99% 0.025 92 / 0.2),
    0 20px 44px oklch(20% 0.06 230 / 0.34);
}

.card-inspect-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.card-inspect-panel__eyebrow {
  display: block;
  color: oklch(38% 0.055 230);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.card-inspect-panel__title {
  margin: 4px 0 0;
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 38px);
  line-height: 0.95;
}

.card-inspect-panel__badge {
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: oklch(92% 0.06 92);
  color: oklch(24% 0.07 46);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.card-inspect-panel__copy {
  display: grid;
  gap: 8px;
}

.card-inspect-panel__copy p {
  margin: 0;
  color: oklch(28% 0.045 230);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.gameover-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  /* v186 iOS notch fix: safe-area padding so the gameover panel doesn't sit
     under the notch / home indicator.
     v189 F2: calc() pattern for 18px breathing room. */
  padding: calc(env(safe-area-inset-top) + 18px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 18px) calc(env(safe-area-inset-left) + 18px);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.gameover-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 28px 24px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
}

.gameover-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 32px;
  color: #ffe5a2;
}

.gameover-winner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(62, 211, 145, 0.42);
  border-radius: var(--radius);
  background: rgba(62, 211, 145, 0.1);
  /* v286: reveal the winner box as a populated unit (no empty-frame flash) —
     box + name + score land in the first ~0.8s instead of name@1700/score@2100. */
  animation: fadeUpCinematic 400ms ease-out 150ms backwards;
}

.gameover-winner__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gameover-winner__name {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1;
  color: #a8ffd4;
}

.gameover-winner__score {
  font-size: 22px;
  font-weight: 900;
  color: #fff5d7;
}

@keyframes pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(168, 255, 212, 0.4); }
  50% { text-shadow: 0 0 24px rgba(168, 255, 212, 0.95), 0 0 40px rgba(62, 211, 145, 0.5); }
}

.gameover-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.gameover-recap {
  margin: 4px 0 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 213, 122, 0.10);
  border: 1px solid rgba(255, 213, 122, 0.32);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* Batch C: per-player personality title chip in the game-over ranking. Solid
   champagne pill + dark ink so it reads on any panel background. */
.gameover-title-chip {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0d589, #d6a945);
  border: 1px solid rgba(140, 100, 30, 0.5);
  color: #2a1c06;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Batch D: role mastery moment — milestone note at game over (dark panel) */
.gameover-moment {
  display: grid;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 213, 122, 0.12);
  border: 1px solid rgba(255, 213, 122, 0.4);
  color: #f3e8d0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.gameover-moment b { color: #f3d57a; }

/* P3: investor report — one-line strategy nudge at game over */
/* P2-4: investor battle-card — prominent, shareable-feel summary for the
   single local human. Replaces the old thin .gameover-report line. */
.gameover-card {
  display: grid;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28,38,62,0.96), rgba(12,18,32,0.98));
  border: 1px solid rgba(212,168,78,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  color: rgba(243,232,208,0.92);
  text-align: left;
}
.gameover-card--win { border-color: rgba(245,200,120,0.7); }
.gameover-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gameover-card__tag {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6c069;
}
.gameover-card__rank {
  font-size: 11px;
  font-weight: 800;
  color: rgba(243,232,208,0.7);
}
.gameover-card__score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gameover-card__score strong {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: #f5c878;
}
.gameover-card__score span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(243,232,208,0.6);
}
.gameover-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: rgba(243,232,208,0.78);
}
.gameover-card__stat b { color: #f3e8d0; font-weight: 800; }
.gameover-card__stat--status { font-weight: 800; color: #6fe0a8; }
.gameover-card__stat--status.is-busted { color: #ff9a8a; }
.gameover-card__nudge {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(243,232,208,0.82);
  line-height: 1.4;
}

/* Batch D: mastery moment badge in the role guide (cream detail panel) */
.role-moment {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid oklch(70% 0.12 84 / 0.32);
  background: oklch(95% 0.05 92 / 0.55);
  opacity: 0.6;
}
.role-moment--earned {
  opacity: 1;
  border-color: oklch(70% 0.15 84 / 0.7);
  background: oklch(90% 0.11 88 / 0.7);
}
.role-moment__icon { color: oklch(55% 0.13 70); font-size: 15px; line-height: 1.2; }
.role-moment--earned .role-moment__icon { color: oklch(58% 0.18 60); }
.role-moment__body { display: grid; gap: 1px; min-width: 0; }
.role-moment__body strong { font-size: 12px; color: var(--toy-ink); }
.role-moment__body small { font-size: 10.5px; color: var(--toy-muted); }

.gameover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
/* P2-1: rematch hook — frames the "再一局" CTA with a real this-game stat. */
.gameover-rematch-hook {
  margin: 6px 0 2px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(245, 200, 120, 0.95);
}

/* Rules list (used in modal and onboarding) */
.rules-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 244, 216, 0.82);
  font-size: 14px;
  line-height: 1.45;
}

.rules-list li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 244, 216, 0.1);
  border-left: none;
  background: oklch(92% 0.04 75 / 0.3);
  border-radius: var(--radius);
}

.rules-list strong {
  color: #ffe5a2;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.15;
}

.rules-list span {
  color: rgba(255, 244, 216, 0.76);
}

.rules-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

/* First-run onboarding */
.onboarding-rules {
  margin-bottom: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.18);
}

.onboarding-rules summary {
  cursor: pointer;
  color: var(--gold);
  font-weight: 900;
  font-size: 14px;
  user-select: none;
}

/* ==================================================
   Cinematic upgrade — ceremony + card spotlight +
   catastrophe overlay. Pure additions.
   ================================================== */

/* GAME-OVER CEREMONY */
.gameover-overlay { perspective: 1200px; }

.gameover-panel {
  position: relative;
  clip-path: none;
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--crisis-red), 0 32px 80px rgba(0, 0, 0, 0.85);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0px, transparent 1px, transparent 24px),
    #0a0a0a;
  animation: tabletRise 1300ms cubic-bezier(0.22, 1.04, 0.36, 1) 100ms backwards;
}
.gameover-panel::before, .gameover-panel::after {
  display: none;
}

@keyframes tabletRise {
  0%   { transform: translateY(120%) rotateX(8deg); opacity: 0; }
  70%  { transform: translateY(-2%)  rotateX(0deg); opacity: 1; }
  85%  { transform: translateY(1.2%); }
  100% { transform: translateY(0); opacity: 1; }
}

.gameover-title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--crisis-red);
  text-align: center;
  margin: 0 0 12px;
  animation: fadeUpCinematic 500ms ease-out 150ms backwards;
}

.gameover-pulse,
.gameover-winner__name {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--terminal-green);
  text-shadow: 0 0 32px rgba(0, 255, 65, 0.5);
  filter: none;
  animation: carveIn 600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms backwards;
}

@keyframes carveIn {
  0%   { opacity: 0; transform: translateY(8px); filter: blur(4px) drop-shadow(0 2px 0 #4a2d12); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0) drop-shadow(0 2px 0 #4a2d12); }
}
@keyframes fadeUpCinematic {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* F21: 勝者分數對比修 — 原 #ffe6a3 在淡綠底上幾乎看不見 */
.gameover-winner__score {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  display: block;
  color: oklch(38% 0.12 70);
  text-shadow:
    0 1px 0 oklch(99% 0.02 92 / 0.8),
    0 0 12px oklch(80% 0.14 80 / 0.45);
  animation: fadeUpCinematic 500ms ease-out 550ms backwards;
}

.gameover-overlay .choice-list li {
  animation: rowSlide 500ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* v286 review: cascade pulled forward to follow the now-fast winner (~1s) so the
   ranking / hook / CTA don't lag ~1.9s behind with a blank gap. CSS stays the
   reliable row driver (re-render-safe); JS pings (i*500) + skip are unaffected. */
.gameover-overlay .choice-list li:nth-child(1) { animation-delay: 700ms; }
.gameover-overlay .choice-list li:nth-child(2) { animation-delay: 780ms; }
.gameover-overlay .choice-list li:nth-child(3) { animation-delay: 860ms; }
.gameover-overlay .choice-list li:nth-child(4) { animation-delay: 940ms; }
.gameover-overlay .choice-list li:nth-child(5) { animation-delay: 1020ms; }
.gameover-overlay .choice-list li:nth-child(6) { animation-delay: 1100ms; }
.gameover-overlay .choice-list li:nth-child(7) { animation-delay: 1180ms; }
.gameover-overlay .choice-list li:nth-child(8) { animation-delay: 1260ms; }

@keyframes rowSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gameover-skip-row {
  display: flex;
  justify-content: flex-end;
  animation: fadeUpCinematic 320ms ease-out 180ms backwards;
}

.gameover-rematch-hook { animation: fadeUpCinematic 500ms ease-out 1400ms backwards; }
.gameover-actions { animation: fadeUpCinematic 500ms ease-out 1550ms backwards; }

.dust-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 61;
}

/* CARD SPOTLIGHT + ENHANCED REVEAL (override existing .card--latest) */
.card-spot {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 229, 162, 0.32) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.card--latest {
  animation: cardRiseEnhanced 1300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card--latest .card-spot {
  animation: spotFade 1800ms ease-out;
}

@keyframes cardRiseEnhanced {
  0%   { transform: translateY(72px) scale(0.68) rotateX(28deg); opacity: 0; filter: blur(5px) saturate(1.35); }
  38%  { transform: translateY(-14px) scale(1.08) rotateX(-8deg); opacity: 1; filter: blur(0) saturate(1.12); }
  68%  { transform: translateY(4px)  scale(0.99) rotateX(3deg); }
  100% { transform: translateY(0)    scale(1); }
}
@keyframes spotFade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}

/* CATASTROPHE OVERLAY — hazard 2x cinematic moment */
.catastrophe-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.catastrophe-overlay .flash-white {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  z-index: 10;
  mix-blend-mode: screen;
}
.catastrophe-overlay.is-active .flash-white {
  animation: catFlash 420ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}
@keyframes catFlash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  18%  { opacity: 0.85; }
  45%  { opacity: 0.18; }
  100% { opacity: 0; }
}

.catastrophe-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: scale(0.94);
  transform-origin: 50% 50%;
}
.catastrophe-overlay.is-active .catastrophe-zoom {
  animation: catZoom 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes catZoom {
  0%   { transform: scale(0.94); filter: blur(2px); }
  15%  { transform: scale(1.02); filter: blur(0.5px); }
  55%  { transform: scale(1.10); filter: blur(0); }
  100% { transform: scale(1.05); filter: blur(0); }
}

.catastrophe-overlay .crack-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.catastrophe-overlay .crack {
  stroke: rgba(255, 244, 216, 0.55);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(232, 94, 61, 0.6));
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}
.catastrophe-overlay.is-active .crack { animation: crackDraw 900ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards; }
.catastrophe-overlay.is-active .crack-2 { animation-delay: 180ms; }
.catastrophe-overlay.is-active .crack-3 { animation-delay: 240ms; }
.catastrophe-overlay.is-active .crack-4 { animation-delay: 320ms; }

@keyframes crackDraw {
  from { stroke-dashoffset: 800; opacity: 0; }
  20%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 0.85; }
}

.catastrophe-overlay .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(232, 94, 61, 0.35) 70%, rgba(108, 28, 14, 0.7) 100%);
  opacity: 0;
}
.catastrophe-overlay.is-active .vignette {
  animation: catVignette 1400ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes catVignette {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  70%  { opacity: 0.55; }
  100% { opacity: 0.18; }
}

.catastrophe-content {
  text-align: center;
  opacity: 0;
  transform: scale(0.7);
  z-index: 4;
}
.catastrophe-overlay.is-active .catastrophe-content {
  animation: catTextIn 500ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
@keyframes catTextIn {
  0%   { opacity: 0; transform: scale(0.7); filter: blur(8px); }
  50%  { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.catastrophe-eyebrow {
  font-family: Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: var(--ruby, #d84b43);
  margin-bottom: 16px;
}
.catastrophe-name {
  font-family: var(--font-display);
  font-size: clamp(56px, 11vw, 120px);
  font-weight: 900;
  line-height: 1;
  margin: 0;
  background: linear-gradient(180deg, #ffd5b3 0%, #e85e3d 50%, #6b1a0e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(232, 94, 61, 0.4);
  letter-spacing: 0.05em;
}
.catastrophe-subtext {
  margin-top: 16px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 244, 216, 0.85);
}

.catastrophe-overlay--market-crash {
  z-index: 118;
  background: oklch(18% 0.06 30 / 0.12);
}

.catastrophe-market-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, oklch(99% 0.02 92 / 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, oklch(99% 0.02 92 / 0.05) 1px, transparent 1px) 0 0 / 44px 44px;
  opacity: 0;
}

.catastrophe-overlay--market-crash.is-active .catastrophe-market-grid {
  animation: marketCrashGrid 1800ms ease-out forwards;
}

.catastrophe-market-tape {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  padding: 8px 0;
  color: oklch(99% 0.03 92);
  background: oklch(36% 0.18 28 / 0.92);
  border-block: 1px solid oklch(99% 0.03 92 / 0.28);
  box-shadow: 0 8px 22px oklch(20% 0.1 30 / 0.3);
  font: 900 clamp(11px, 2.7vmin, 15px)/1 var(--font-mono);
  letter-spacing: 0.2em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}

.catastrophe-overlay--market-crash.is-active .catastrophe-market-tape {
  animation: marketCrashTape 2100ms linear forwards;
}

.catastrophe-overlay--market-crash .vignette {
  background:
    radial-gradient(circle at 50% 45%, oklch(80% 0.17 32 / 0.34), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 30%, oklch(44% 0.18 28 / 0.48) 70%, oklch(16% 0.08 24 / 0.86) 100%);
}

.catastrophe-content--market {
  width: min(90vw, 620px);
  padding: 22px 24px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 10%, oklch(100% 0 0 / 0.86), transparent 24%),
    linear-gradient(180deg, oklch(99% 0.026 92), oklch(88% 0.08 64));
  border: 3px solid oklch(54% 0.21 30);
  box-shadow:
    0 24px 60px oklch(18% 0.08 24 / 0.48),
    0 8px 0 oklch(48% 0.16 30 / 0.3),
    inset 0 2px 0 oklch(99% 0.02 92 / 0.86);
}

.catastrophe-content--market .catastrophe-eyebrow {
  display: inline-flex;
  padding: 6px 11px;
  border: 2px solid oklch(52% 0.2 30);
  border-radius: 5px;
  color: oklch(45% 0.2 30);
  background: oklch(99% 0.02 92 / 0.6);
  font-family: var(--font-display);
  font-size: clamp(14px, 3.5vmin, 22px);
  font-weight: 950;
  letter-spacing: 0.12em;
  transform: rotate(-4deg);
}

.catastrophe-content--market .catastrophe-name {
  margin-top: 14px;
  background: none;
  color: oklch(25% 0.075 66);
  font-size: clamp(42px, 10vw, 90px);
  text-shadow: none;
}

.catastrophe-ledger {
  display: grid;
  gap: 4px;
  width: min(100%, 360px);
  margin: 14px auto 0;
  padding: 8px;
  border-radius: 8px;
  background: oklch(93% 0.045 74 / 0.76);
  border: 1px solid oklch(62% 0.1 54 / 0.25);
}

.catastrophe-ledger span {
  color: oklch(42% 0.08 64 / 0.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.catastrophe-ledger strong {
  color: oklch(44% 0.18 30);
  font: 950 clamp(18px, 4.8vmin, 28px)/1 var(--font-display);
}

.catastrophe-content--market .catastrophe-subtext {
  color: oklch(38% 0.055 66);
  font-family: var(--font-display);
  font-size: clamp(12px, 3.1vmin, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

@keyframes marketCrashGrid {
  0%   { opacity: 0; transform: scale(1.04); }
  30%  { opacity: 0.42; }
  100% { opacity: 0.2; transform: scale(1); }
}

@keyframes marketCrashTape {
  0%   { opacity: 0; transform: translateX(50%); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%); }
}

.app--shaking { animation: appShake 700ms steps(14) 1; }
@keyframes appShake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4px, 2px); }
  20%  { transform: translate(3px, -2px); }
  30%  { transform: translate(-2px, 3px); }
  40%  { transform: translate(2px, 1px); }
  50%  { transform: translate(-1px, -2px); }
  60%  { transform: translate(1px, 2px); }
  70%  { transform: translate(-1px, 0); }
  85%  { transform: translate(0.5px, -0.5px); }
  100% { transform: translate(0, 0); }
}

.app--shaking-violent { animation: appShakeViolent 1.1s steps(28) 1; }
@keyframes appShakeViolent {
  0%   { transform: translate(0, 0) rotate(0deg); }
  6%   { transform: translate(-10px, 6px) rotate(-0.6deg); }
  12%  { transform: translate(9px, -7px) rotate(0.6deg); }
  18%  { transform: translate(-8px, 5px) rotate(-0.5deg); }
  24%  { transform: translate(7px, -6px) rotate(0.5deg); }
  30%  { transform: translate(-6px, 4px) rotate(-0.4deg); }
  36%  { transform: translate(5px, -5px) rotate(0.4deg); }
  44%  { transform: translate(-4px, 3px) rotate(-0.3deg); }
  52%  { transform: translate(4px, -3px) rotate(0.3deg); }
  62%  { transform: translate(-3px, 2px) rotate(-0.2deg); }
  72%  { transform: translate(2px, -2px) rotate(0.2deg); }
  82%  { transform: translate(-1.5px, 1.5px) rotate(-0.1deg); }
  92%  { transform: translate(1px, -1px) rotate(0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .app--shaking,
  .app--shaking-violent { animation: none; }
}

/* CASH PIP FLY — cash bundle flying to player tent on banking */

.gem-fly {
  position: fixed;
  width: 28px;
  height: 28px;
  z-index: 105;
  pointer-events: none;
  color: var(--terminal-green);
  opacity: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.9);
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.7));
  animation: gemFly 1.2s cubic-bezier(0.5, -0.3, 0.4, 1.2) var(--delay, 0ms) forwards;
}

.gem-fly .svg-icon {
  width: 100%;
  height: 100%;
  color: inherit;
}

.gem-fly .svg-icon svg {
  stroke: var(--terminal-green);
  stroke-width: 2;
  fill: rgba(0, 255, 65, 0.25);
}

@keyframes gemFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.4) rotate(12deg); }
  60%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.55), calc(-50% + var(--dy) * 0.55)) scale(1.1) rotate(-6deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5) rotate(0deg); }
}

.player-stat__value--banked.is-receiving {
  animation: bankedPulse 1.2s ease-out;
}

@keyframes bankedPulse {
  0%, 70% { transform: scale(1); color: var(--terminal-green); text-shadow: 0 0 6px rgba(0, 255, 65, 0.2); }
  82%     { transform: scale(1.28); color: #afffcf; text-shadow: 0 0 20px rgba(0, 255, 65, 0.9), 0 0 6px rgba(0, 255, 65, 1); }
  100%    { transform: scale(1); color: var(--terminal-green); text-shadow: 0 0 6px rgba(0, 255, 65, 0.2); }
}

/* B1 (Sprint 6): +N gold label 跟著 gem 飛 — 玩家清楚知道入帳多少 */
.gem-fly__amount {
  position: fixed;
  z-index: 106;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 950;
  color: oklch(85% 0.16 78);
  text-shadow:
    0 2px 0 oklch(35% 0.1 60),
    0 0 16px oklch(80% 0.16 78 / 0.65),
    0 0 4px oklch(55% 0.18 50 / 0.85);
  letter-spacing: 0.02em;
  animation: gemFlyAmount 1.6s cubic-bezier(0.34, 1.2, 0.4, 1) forwards;
  transform-origin: center;
}

@keyframes gemFlyAmount {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  16%  { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  72%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.78), calc(-50% + var(--dy) * 0.78)) scale(1.05); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .gem-fly { display: none; }
  .gem-fly__amount { display: none; }
  .player-stat__value--banked.is-receiving { animation: none; }
}

/* GAME OVER BURST — final closing bell and settlement board */

.gameover-burst {
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 320ms ease-out;
  overflow: hidden;
  perspective: 1000px;
}

.gameover-burst.is-active { opacity: 1; }
.gameover-burst.is-leaving { opacity: 0; transition: opacity 580ms ease-in; }

.gameover-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(240, 192, 64, 0.14), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(0, 255, 65, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(2, 5, 4, 0.98), rgba(0, 0, 0, 0.96));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* CRT scan-line — one-shot phosphor sweep over the winner panel */
.gameover-burst__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.gameover-burst__scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--terminal-green) 55%, var(--gold) 80%, transparent);
  opacity: 0;
  animation: scanLine 4.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.gameover-burst__confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Ticker tape segments — narrow rectangles fall like exchange tape */
.gameover-burst__confetti {
  position: absolute;
  top: -20px;
  left: var(--left, 50%);
  width: var(--size, 40px);
  height: 4px;
  background: var(--color, #00ff41);
  opacity: 0;
  border-radius: 0;
  overflow: hidden;
  animation: confettiFall var(--dur, 2800ms) cubic-bezier(0.38, 0.05, 0.62, 0.95) var(--delay, 0ms) forwards;
}

.gameover-burst__confetti::after {
  content: var(--ticker, "");
  position: absolute;
  left: 3px;
  top: -5px;
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  line-height: 1;
}

@keyframes confettiFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot-start, -15deg)); }
  8%   { opacity: 1; }
  100% { opacity: 0.8; transform: translate(var(--drift, 0px), 110vh) rotate(var(--rot, 20deg)); }
}

.gameover-burst__ticker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 8px 12px;
  color: rgba(240, 192, 64, 0.78);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.2vmin, 13px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.42);
  border-block: 1px solid rgba(240, 192, 64, 0.22);
  animation: finalTapeLock 4.4s ease-out forwards;
}

.gameover-burst__ticker--top {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
}

.gameover-burst__ticker--bottom {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  color: rgba(0, 255, 65, 0.62);
  border-block-color: rgba(0, 255, 65, 0.2);
}

.gameover-burst__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 9px;
  text-align: center;
  width: min(760px, 92vw);
  max-height: min(82vh, 760px);
  padding: clamp(22px, 4.4vmin, 38px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0.96), rgba(4, 5, 5, 0.95)),
    rgba(8, 8, 8, 0.96);
  border: 1px solid rgba(240, 192, 64, 0.5);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(0, 255, 65, 0.14),
    inset 0 0 52px rgba(240, 192, 64, 0.07);
  animation: finalBoardIn 4.65s cubic-bezier(0.18, 1, 0.22, 1) forwards;
}

.gameover-burst__stack::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.gameover-burst__bell {
  margin-bottom: 2px;
}

.gameover-burst__bell::before {
  animation-duration: 1.8s;
}

.gameover-burst__bell span {
  animation-duration: 2.4s;
}

.gameover-burst__title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(11px, 2.6vmin, 16px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(240, 192, 64, 0.86);
  animation: gameoverTitle 4.3s ease-out;
}

.gameover-burst__crown {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(13px, 3.2vmin, 20px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--terminal-green);
  border: 1px solid rgba(0, 255, 65, 0.46);
  background: rgba(0, 255, 65, 0.05);
  padding: 5px 14px;
  margin-top: 4px;
  animation: finalStampIn 4.2s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.gameover-burst__winner {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8vmin, 64px);
  line-height: 1.05;
  color: var(--terminal-green);
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.5), 0 4px 14px rgba(0, 0, 0, 0.55);
  animation: gameoverWinner 4.3s cubic-bezier(0.22, 1.4, 0.32, 1) 0.18s backwards;
}

.gameover-burst__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(66px, 19vmin, 168px);
  line-height: 0.95;
  color: var(--gold);
  text-shadow: 0 0 42px rgba(240, 192, 64, 0.44), 0 0 10px rgba(0, 255, 65, 0.18);
  letter-spacing: 0;
  margin-top: 4px;
  animation: gameoverScore 4.35s cubic-bezier(0.22, 1.6, 0.32, 1) 0.34s backwards;
}

.gameover-burst__label {
  font-family: var(--font-mono);
  font-size: clamp(12px, 3vmin, 18px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.72);
  margin-top: 4px;
  animation: gameoverLabel 4.2s ease-out 0.52s backwards;
}

.gameover-burst__leaderboard {
  width: min(560px, 100%);
  display: grid;
  gap: 6px;
  margin-top: clamp(4px, 1.2vmin, 10px);
}

.gameover-burst__rank {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 9px;
  color: rgba(232, 232, 232, 0.9);
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.35vmin, 14px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--player-color) 15%, transparent), rgba(255, 255, 255, 0.035));
  border-left: none;
  box-shadow: inset 0 0 0 1.5px var(--player-color);
  border-block: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(12px);
  animation: finalRankIn 0.42s ease-out var(--rank-delay, 0.9s) forwards;
}

.gameover-burst__rank-index {
  color: var(--gold);
  font-weight: 700;
}

.gameover-burst__rank-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.gameover-burst__rank-score {
  color: var(--terminal-green);
  font-weight: 700;
}

.gameover-burst__rank-status {
  color: rgba(240, 192, 64, 0.82);
  font-size: 0.86em;
  white-space: nowrap;
}

.gameover-burst__seal {
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 26, 26, 0.52);
  color: rgba(255, 90, 90, 0.9);
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.4vmin, 14px);
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(-2deg);
  animation: finalSeal 0.62s cubic-bezier(0.2, 1.45, 0.3, 1) 1.52s backwards;
}

@keyframes gameoverTitle {
  0%   { opacity: 0; transform: translateY(-12px); }
  10%  { opacity: 1; transform: translateY(0); }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gameoverWinner {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  18%  { opacity: 1; transform: translateY(0) scale(1.06); }
  28%  { transform: translateY(0) scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gameoverScore {
  0%   { opacity: 0; transform: scale(0.4); }
  18%  { opacity: 1; transform: scale(1.18); }
  30%  { transform: scale(0.96); }
  42%  { transform: scale(1.04); }
  54%  { transform: scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes gameoverLabel {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes finalTapeLock {
  0%   { opacity: 0; transform: translateY(-16px); }
  18%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes finalBoardIn {
  0%   { opacity: 0; transform: rotateX(14deg) translateY(28px) scale(0.96); filter: blur(6px); }
  18%  { opacity: 1; filter: blur(0); }
  38%  { transform: rotateX(0deg) translateY(0) scale(1.012); }
  68%  { transform: scale(1); }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes finalStampIn {
  0%   { opacity: 0; transform: scale(1.24); }
  24%  { opacity: 1; transform: scale(0.96); }
  36%  { transform: scale(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes finalRankIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes finalSeal {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.28); }
  62%  { opacity: 1; transform: rotate(-2deg) scale(0.96); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

@media (max-width: 520px) {
  .gameover-burst__ticker {
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
  }

  .gameover-burst__ticker span:nth-child(n+3) {
    display: none;
  }

  .gameover-burst__stack {
    max-height: 78vh;
    gap: 7px;
  }

  .gameover-burst__leaderboard {
    width: 100%;
  }

  .gameover-burst__rank {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px;
    padding-inline: 8px;
  }

  .gameover-burst__rank-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gameover-burst__scan,
  .gameover-burst__confetti,
  .gameover-burst__ticker { display: none; }
  .gameover-burst__stack,
  .gameover-burst__bell::before,
  .gameover-burst__bell span,
  .gameover-burst__rank,
  .gameover-burst__seal,
  .gameover-burst__title,
  .gameover-burst__crown,
  .gameover-burst__winner,
  .gameover-burst__score,
  .gameover-burst__label { animation: none; opacity: 1; }
}

/* MONEY TIME — solo-explorer dramatic loot moment */

.money-time {
  position: fixed;
  inset: 0;
  z-index: 116;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.money-time.is-active { opacity: 1; }
.money-time.is-leaving { opacity: 0; transition: opacity 540ms ease-in; }

/* Glitch entry flash */
.money-time__flash {
  position: absolute;
  inset: 0;
  background: rgba(0, 255, 65, 0.06);
  opacity: 0;
  animation: glitchFlash 0.3s steps(1) forwards;
}

.money-time__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Single phosphor scan-line sweeping down */
.money-time__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.money-time__scan::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--terminal-green) 20%, var(--terminal-green) 80%, transparent);
  opacity: 0;
  animation: scanLine 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

/* Falling stock-ticker rows */
.money-time__rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.money-time__ticker-row {
  position: absolute;
  top: -20px;
  left: var(--left, 50%);
  width: var(--w, 120px);
  height: 14px;
  background: var(--bg-color, var(--terminal-green));
  display: flex;
  align-items: center;
  padding: 0 4px;
  overflow: hidden;
  opacity: 0;
  animation: tickerRowFall var(--dur, 3000ms) cubic-bezier(0.4, 0.05, 0.55, 0.95) var(--delay, 0ms) forwards;
}

.money-time__ticker-row span {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes tickerRowFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot-start, -2deg)); }
  8%   { opacity: 1; }
  100% { opacity: 0.7; transform: translate(var(--drift, 0px), 110vh) rotate(var(--rot, 3deg)); }
}

.money-time__stack {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 16px;
  max-width: min(680px, 92vw);
}

/* "POSITION LIQUIDATED" top label */
.money-time__sub {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(10px, 2.6vmin, 16px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--crisis-red);
  animation: moneySub 2.8s ease-out;
}

/* "SOLO WINNER" big stamp */
.money-time__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 16vmin, 148px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terminal-green);
  text-shadow:
    0 0 40px rgba(0, 255, 65, 0.7),
    0 0 80px rgba(0, 255, 65, 0.25);
  animation: priceStamp 2.8s cubic-bezier(0.16, 1.4, 0.3, 1);
}

.money-time__player {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(20px, 5vmin, 40px);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px currentColor;
  animation: moneyPlayer 2.8s cubic-bezier(0.22, 1.4, 0.32, 1) 0.18s backwards;
}

.money-time__hint {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.6vmin, 16px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(0, 255, 65, 0.65);
  margin-top: 4px;
  animation: moneyHint 2.8s ease-out 0.32s backwards;
}

@keyframes moneySub {
  0%   { opacity: 0; transform: translateY(-12px); letter-spacing: 0; }
  16%  { opacity: 1; transform: translateY(0); letter-spacing: 0.5em; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes priceStamp {
  0%   { opacity: 0; transform: scale(1.4); letter-spacing: 0.2em; filter: blur(8px); }
  18%  { opacity: 1; transform: scale(1.02); letter-spacing: 0.04em; filter: blur(0); }
  28%  { transform: scale(0.97); }
  40%  { transform: scale(1); }
  90%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes moneyPlayer {
  0%   { opacity: 0; transform: translateY(28px) scale(0.7); }
  20%  { opacity: 1; transform: translateY(0) scale(1.06); }
  32%  { transform: translateY(0) scale(1); }
  90%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.02); }
}

@keyframes moneyHint {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .money-time__scan,
  .money-time__flash,
  .money-time__ticker-row { display: none; }
  .money-time__sub,
  .money-time__title,
  .money-time__player,
  .money-time__hint { animation: none; opacity: 1; }
}

/* REJOINING PANEL — auto-reconnect splash */

.app--rejoining {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(7, 9, 8, 0.92), rgba(15, 25, 22, 0.95)),
    url("./assets/temple-table.png");
  background-position: center;
  background-size: cover;
}

.rejoining-panel {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 36px 32px;
  min-width: min(360px, 90vw);
  border-radius: 18px;
  background: rgba(13, 17, 16, 0.92);
  border: 1px solid rgba(232, 184, 77, 0.32);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: center;
}

.rejoining-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 5vmin, 28px);
  color: #ffe5a2;
  letter-spacing: 0.08em;
}

.rejoining-panel p {
  margin: 0;
  font-size: clamp(14px, 3.4vmin, 16px);
  color: rgba(255, 244, 216, 0.78);
}

.rejoining-panel__name {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.rejoining-panel small {
  font-size: clamp(11px, 2.6vmin, 13px);
  color: rgba(255, 244, 216, 0.55);
}

.rejoining-panel__spinner {
  display: flex;
  gap: 8px;
}

.rejoining-panel__spinner span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(232, 184, 77, 0.7);
  animation: rejoinSpinner 1.2s ease-in-out infinite;
}

.rejoining-panel__spinner span:nth-child(2) { animation-delay: 0.18s; }
.rejoining-panel__spinner span:nth-child(3) { animation-delay: 0.36s; }

@keyframes rejoinSpinner {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .rejoining-panel__spinner span { animation: none; opacity: 0.7; }
}

/* EMOJI REACTIONS — quick taunt buttons + flying emoji */

.emoji-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.emoji-bar__btn {
  appearance: none;
  border: 1px solid rgba(255, 244, 216, 0.18);
  background: rgba(0, 0, 0, 0.32);
  border-radius: 99px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.emoji-bar__btn:hover,
.emoji-bar__btn:focus-visible {
  background: rgba(232, 184, 77, 0.18);
  border-color: rgba(232, 184, 77, 0.55);
  outline: none;
  transform: scale(1.08);
}

.emoji-bar__btn:active {
  transform: scale(0.92);
}

.emoji-float {
  position: fixed;
  bottom: 20vh;
  left: var(--left, 50%);
  transform: translate(-50%, 0);
  z-index: 109;
  pointer-events: none;
  font-size: clamp(80px, 22vmin, 180px);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
  animation: emojiFloat 1.8s cubic-bezier(0.22, 1.6, 0.32, 1) forwards;
}

@keyframes emojiFloat {
  0%   { opacity: 0; transform: translate(-50%, 100px) scale(0.4) rotate(0); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.2) rotate(var(--rot, 0)); }
  30%  { transform: translate(-50%, 10px) scale(1) rotate(0); }
  82%  { opacity: 1; transform: translate(calc(-50% + var(--drift, 0px) * 0.5), -50vh) scale(1.05) rotate(var(--rot, 0)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift, 0px)), -90vh) scale(0.8) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-float { animation-duration: 600ms; }
}

/* HIGHLIGHT REEL — round-end best-of replay */

.highlight-reel {
  position: fixed;
  inset: 0;
  z-index: 113;
  pointer-events: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  opacity: 0;
  transition: opacity 320ms ease-out;
  padding: 24px 16px;
}

.highlight-reel.is-active { opacity: 1; }
.highlight-reel.is-leaving { opacity: 0; transition: opacity 460ms ease-in; }

.highlight-reel__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.highlight-reel__title {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(14px, 3.4vmin, 22px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--terminal-green);
  text-align: center;
  animation: highlightReelTitle 600ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

/* Blinking cursor appended via pseudo-element */
.highlight-reel__title::after {
  content: '_';
  animation: cursorBlink 1s step-end infinite 600ms;
}

@keyframes highlightReelTitle {
  0%   { opacity: 0; transform: translateX(-20px); letter-spacing: 0; }
  100% { opacity: 1; transform: translateX(0); letter-spacing: 0.4em; }
}

@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes terminalRowIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0); opacity: 1; }
}

.highlight-reel__cards {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: min(640px, 92vw);
}

/* Terminal log row — replaces the card pop-in UI */
.highlight-reel__card {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  width: min(640px, 92vw);
  background: transparent;
  border: none;
  border-left: 2px solid var(--border-color, rgba(0, 255, 65, 0.4));
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: terminalRowIn 180ms ease-out calc(600ms + var(--i, 0) * 180ms) forwards;
}

.highlight-reel__card--cash    { --border-color: rgba(0, 255, 65, 0.7); }
.highlight-reel__card--crisis  { --border-color: rgba(255, 26, 26, 0.7); }
.highlight-reel__card--crisis.is-danger { --border-color: var(--crisis-red); }
.highlight-reel__card--tip     { --border-color: rgba(0, 204, 136, 0.7); }

/* Timestamp prefix — generated by JS via data-ts attribute, replaces icon */
.highlight-reel__icon {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.4vmin, 12px);
  font-weight: 400;
  color: rgba(136, 136, 136, 0.85);
  white-space: nowrap;
  flex-shrink: 0;
}

.highlight-reel__icon .svg-icon { display: none; }

.highlight-reel__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(13px, 3.2vmin, 18px);
  line-height: 1;
  color: var(--val-color, var(--terminal-green));
}

.highlight-reel__card--cash    .highlight-reel__value { --val-color: var(--terminal-green); }
.highlight-reel__card--crisis  .highlight-reel__value { --val-color: var(--crisis-red); }
.highlight-reel__card--tip     .highlight-reel__value { --val-color: #00cc88; }

.highlight-reel__label {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.4vmin, 12px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(136, 136, 136, 0.85);
  line-height: 1.2;
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .highlight-reel__card { animation: none; opacity: 1; clip-path: none; }
  .highlight-reel__title { animation: none; opacity: 1; }
  .highlight-reel__title::after { animation: none; }
}

/* TIER C — NEAR-MISS CALLOUT in highlight reel */

.near-miss-callout {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(120, 40, 28, 0.78), rgba(40, 16, 10, 0.92));
  border: 2px solid rgba(255, 90, 60, 0.78);
  box-shadow: 0 0 32px rgba(255, 90, 60, 0.55), 0 12px 28px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: nearMissIn 720ms cubic-bezier(0.22, 1.6, 0.32, 1) calc(700ms + var(--items, 0) * 260ms) backwards;
  max-width: min(560px, 92vw);
}

.near-miss-callout__title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(14px, 3.6vmin, 20px);
  letter-spacing: 0.22em;
  color: #ffe5a2;
  text-shadow: 0 0 16px rgba(255, 138, 58, 0.8);
}

.near-miss-callout__icon {
  font-size: clamp(36px, 9vmin, 56px);
  color: #ffd9cf;
  filter: drop-shadow(0 0 14px rgba(232, 94, 61, 0.9));
  animation: nearMissIconShake 0.6s ease-in-out infinite alternate;
}

.near-miss-callout__detail {
  font-family: var(--font-mono);
  font-size: clamp(12px, 3vmin, 15px);
  color: rgba(255, 244, 216, 0.92);
  line-height: 1.4;
  max-width: 480px;
}

@keyframes nearMissIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nearMissIconShake {
  0%   { transform: rotate(-3deg); }
  100% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .near-miss-callout, .near-miss-callout__icon { animation: none; }
}

/* TIER F — ACHIEVEMENT TOAST */

.achievement-toast {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 118;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  min-width: min(340px, 88vw);
  max-width: 92vw;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 32, 22, 0.96), rgba(20, 16, 10, 0.98));
  border: 2px solid var(--gold);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(232, 184, 77, 0.7),
    0 0 56px rgba(232, 184, 77, 0.32);
  animation: achievementIn 540ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.achievement-toast.is-leaving {
  animation: achievementOut 580ms ease-in forwards;
}

.achievement-toast__emoji {
  font-size: clamp(38px, 8.4vmin, 52px);
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(232, 184, 77, 0.85));
}

.achievement-toast__body {
  display: grid;
  gap: 2px;
}

.achievement-toast__pre {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(232, 184, 77, 0.7);
}

.achievement-toast__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 4.4vmin, 24px);
  color: #ffe5a2;
  text-shadow: 0 0 14px rgba(232, 184, 77, 0.6);
}

.achievement-toast__desc {
  font-size: clamp(12px, 2.8vmin, 14px);
  color: rgba(255, 244, 216, 0.78);
  letter-spacing: 0.02em;
}

@keyframes achievementIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(8px) scale(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes achievementOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-toast { animation: none; opacity: 1; }
}

/* TIER A — MEGA / ULTRA jackpot variants */

.treasure-burst--mega .treasure-burst__big {
  animation: treasureMegaPop 2.6s cubic-bezier(0.22, 1.6, 0.32, 1) forwards;
  font-size: clamp(180px, 50vmin, 480px);
  color: var(--terminal-green);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  text-shadow: 0 0 60px rgba(0, 255, 65, 0.7), 0 0 120px rgba(0, 255, 65, 0.3);
}

.treasure-burst--mega__mega-label,
.treasure-burst__mega-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(20px, 5vmin, 32px);
  letter-spacing: 0.32em;
  color: #ffe5a2;
  text-shadow: 0 0 20px rgba(255, 215, 107, 0.85);
  margin-bottom: 6px;
  animation: megaLabelPulse 0.6s ease-in-out infinite alternate;
}

@keyframes treasureMegaPop {
  0%   { transform: scale(0.2) rotate(-16deg); opacity: 0; filter: blur(16px); }
  12%  { transform: scale(1.45) rotate(6deg);  opacity: 1; filter: blur(0); }
  24%  { transform: scale(0.92) rotate(-3deg); }
  36%  { transform: scale(1.12) rotate(2deg); }
  48%  { transform: scale(0.98) rotate(0); }
  60%  { transform: scale(1.06); }
  88%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

@keyframes megaLabelPulse {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.06); opacity: 1; }
}

.treasure-burst--ultra .treasure-burst__dim {
  background: rgba(0, 0, 0, 0.95);
}

@keyframes ultraDimRainbow {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.treasure-burst--ultra .treasure-burst__big {
  font-size: clamp(220px, 56vmin, 540px);
  color: var(--terminal-green);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  animation: ultraBigPop 3.2s cubic-bezier(0.22, 1.6, 0.32, 1) forwards;
  text-shadow:
    0 0 80px rgba(0, 255, 65, 0.9),
    0 0 30px rgba(0, 255, 65, 0.6),
    0 0 8px rgba(0, 255, 65, 1);
}

.treasure-burst__ultra-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(22px, 6vmin, 38px);
  letter-spacing: 0.28em;
  background: linear-gradient(90deg, #ffd76b, #ff64c8, #8a50ff, #28b0ff, #ffd76b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255, 100, 200, 0.7);
  margin-bottom: 8px;
  animation: ultraLabelShimmer 1.8s linear infinite, ultraLabelPulse 0.8s ease-in-out infinite alternate;
}

@keyframes ultraBigPop {
  0%   { transform: scale(0.15) rotate(-20deg); opacity: 0; filter: blur(20px); }
  12%  { transform: scale(1.5) rotate(8deg);    opacity: 1; filter: blur(0); }
  24%  { transform: scale(0.88) rotate(-4deg); }
  36%  { transform: scale(1.18) rotate(3deg); }
  48%  { transform: scale(0.95) rotate(-1deg); }
  60%  { transform: scale(1.08); }
  72%  { transform: scale(0.98); }
  84%  { transform: scale(1.04); }
  92%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes ultraLabelShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes ultraLabelPulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-burst--mega .treasure-burst__big,
  .treasure-burst--ultra .treasure-burst__big { animation: none; opacity: 1; }
  .treasure-burst--ultra .treasure-burst__dim { animation: none; }
  .treasure-burst__mega-label,
  .treasure-burst__ultra-label { animation: none; opacity: 1; }
}

/* TIER B — CARRY-WEIGHT AURA on player rows */

.player-row.is-loaded-carry {
  box-shadow: 0 0 12px rgba(232, 184, 77, 0.3);
}

.player-row.is-heavy-carry {
  box-shadow: 0 0 18px rgba(232, 184, 77, 0.55);
  animation: carryAuraFlicker 1.4s ease-in-out infinite alternate;
}

.player-row.is-mega-carry {
  box-shadow: 0 0 28px rgba(255, 138, 58, 0.7), 0 0 48px rgba(232, 60, 40, 0.42);
  animation: carryAuraMega 0.9s ease-in-out infinite alternate;
  position: relative;
  overflow: visible;
}

.player-row.is-mega-carry::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: linear-gradient(45deg, transparent 0%, rgba(255, 215, 107, 0.32) 30%, transparent 50%, rgba(255, 138, 58, 0.32) 70%, transparent 100%);
  background-size: 200% 200%;
  animation: carryAuraSheen 2.5s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes carryAuraFlicker {
  0%   { box-shadow: 0 0 14px rgba(232, 184, 77, 0.4); }
  100% { box-shadow: 0 0 22px rgba(232, 184, 77, 0.7); }
}

@keyframes carryAuraMega {
  0%   { box-shadow: 0 0 22px rgba(255, 138, 58, 0.55), 0 0 38px rgba(232, 60, 40, 0.32); }
  100% { box-shadow: 0 0 36px rgba(255, 138, 58, 0.85), 0 0 60px rgba(232, 60, 40, 0.55); }
}

@keyframes carryAuraSheen {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .player-row.is-heavy-carry,
  .player-row.is-mega-carry,
  .player-row.is-mega-carry::before { animation: none; }
}

/* TIER D — EXTENDED SUSPENSE for mega/ultra cards */

.suspense-flash--extended {
  animation-duration: 1600ms;
}

/* TIER E — STREAK BADGE TIERS */

.streak-badge--tier2 {
  background: linear-gradient(180deg, #ffae3a 0%, #ff5a1f 60%, #8a3a14 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 28px rgba(255, 90, 31, 0.7);
}

.streak-badge--tier3 {
  background: linear-gradient(180deg, #ff8a3a 0%, #ff3a1f 50%, #6a1d12 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.65), 0 0 36px rgba(255, 60, 31, 0.85);
  font-size: clamp(18px, 4.6vmin, 26px);
  animation: streakBadgeFire 0.6s ease-in-out infinite alternate;
}

.streak-badge--tier4 {
  background: linear-gradient(180deg, #ffff80 0%, #ff6a3a 40%, #ff1a1a 80%, #4a0a0a 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 60px rgba(255, 30, 30, 1), 0 0 100px rgba(255, 215, 107, 0.6);
  font-size: clamp(20px, 5.4vmin, 30px);
  animation: streakBadgeFire 0.4s ease-in-out infinite alternate;
}

@keyframes streakBadgeFire {
  0%   { transform: translateX(-50%) translateY(0) scale(1) rotate(-1deg); }
  100% { transform: translateX(-50%) translateY(-3px) scale(1.04) rotate(1deg); }
}

/* GOLD RAIN — triggered on streak ≥10 */

.gold-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 117;
  overflow: hidden;
}

.gold-rain__coin {
  position: absolute;
  top: -40px;
  left: var(--left, 50%);
  width: var(--size, 14px);
  height: var(--size, 14px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffbe0 0%, #ffe580 30%, #ffd76b 55%, #c98a30 80%, #6b3e0d 100%);
  box-shadow:
    0 0 16px rgba(255, 215, 107, 0.95),
    0 0 28px rgba(255, 174, 58, 0.55);
  opacity: 0;
  animation: goldRainFall var(--dur, 2400ms) cubic-bezier(0.4, 0.05, 0.6, 1) var(--delay, 0ms) forwards;
}

@keyframes goldRainFall {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--drift, 0px), 110vh); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-badge--tier3,
  .streak-badge--tier4 { animation: none; }
  .gold-rain__coin { display: none; }
}

/* FTUE MODAL — first-time user 3-step tutorial */

.ftue-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  /* v186 iOS notch fix: safe-area padding so the FTUE panel doesn't sit under
     the notch / home indicator.
     v189 F2: calc() pattern for 20px breathing room. */
  padding: calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px);
}

.ftue-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ftue-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(440px, 92vw);
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, #18211c 0%, #0d1311 100%);
  border: 2px solid rgba(232, 184, 77, 0.42);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(232, 184, 77, 0.18);
  text-align: center;
  animation: ftueIn 360ms cubic-bezier(0.22, 1.4, 0.32, 1);
}

.ftue-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 244, 216, 0.08);
  color: rgba(255, 244, 216, 0.5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.ftue-modal__close:active {
  background: rgba(232, 184, 77, 0.22);
  color: rgba(255, 244, 216, 0.85);
}

@keyframes ftueIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ftue-modal__progress {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ftue-modal__dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 244, 216, 0.18);
  transition: background 220ms ease;
}

.ftue-modal__dot.is-done { background: rgba(232, 184, 77, 0.5); }
.ftue-modal__dot.is-active { background: var(--gold); box-shadow: 0 0 8px rgba(232, 184, 77, 0.7); }

.ftue-modal__icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 4px auto 0;
  border-radius: 50%;
  font-size: 56px;
  background: rgba(232, 184, 77, 0.12);
  border: 2px solid rgba(232, 184, 77, 0.4);
}

.ftue-modal__icon .svg-icon {
  width: 56px;
  height: 56px;
}

.ftue-modal__icon--treasure,
.ftue-modal__icon--cash {
  background: rgba(62, 211, 145, 0.14);
  border-color: rgba(62, 211, 145, 0.55);
  color: #b9ffd6;
  box-shadow: 0 0 28px rgba(62, 211, 145, 0.35);
}

.ftue-modal__icon--hazard,
.ftue-modal__icon--crisis {
  background: rgba(232, 94, 61, 0.16);
  border-color: rgba(232, 94, 61, 0.6);
  color: #ffd9cf;
  box-shadow: 0 0 28px rgba(232, 94, 61, 0.4);
}

.ftue-modal__icon--choice {
  background: rgba(232, 184, 77, 0.16);
  border-color: rgba(232, 184, 77, 0.6);
  color: #ffe5a2;
  box-shadow: 0 0 28px rgba(232, 184, 77, 0.4);
}

/* Track C (Sprint 7): warning red flash overlay 200ms — 警告卡翻出強化警示感 */
.warning-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, oklch(48% 0.22 28 / 0.32) 60%, oklch(38% 0.2 25 / 0.55) 100%);
  animation: warningFlashIn 200ms ease-out;
  opacity: 1;
}

.warning-flash-overlay--leaving {
  animation: warningFlashOut 240ms ease-in forwards;
}

@keyframes warningFlashIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes warningFlashOut {
  to { opacity: 0; }
}

/* Track C: crisis-boom vignette + sustained 視覺壓迫 */
.crisis-boom-overlay {
  position: fixed;
  inset: 0;
  z-index: 117;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 28%, oklch(20% 0.16 22 / 0.4) 72%, oklch(15% 0.12 18 / 0.85) 100%);
  opacity: 0;
  animation: crisisBoomVignetteIn 220ms ease-out forwards;
}

.crisis-boom-overlay--leaving {
  animation: crisisBoomVignetteOut 360ms ease-in forwards;
}

@keyframes crisisBoomVignetteIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes crisisBoomVignetteOut {
  to { opacity: 0; }
}

/* Track C: crisis-boom camera slow-mo zoom in 0.9s — 整 .app scale 鏡頭拉近 */
.app--crisis-zoom {
  animation: appCrisisZoom 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 45%;
}

@keyframes appCrisisZoom {
  0%   { transform: scale(1); filter: none; }
  35%  { transform: scale(1.06); filter: saturate(1.2) brightness(0.94); }
  100% { transform: scale(1); filter: none; }
}

/* B3 Variant B: round → round 過渡儀式 1.2s 黑底 + 第 N 輪 大字 + subtitle */
.round-transition {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, oklch(22% 0.06 230 / 0.78), oklch(12% 0.04 220 / 0.95) 70%);
  animation: roundTransitionIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.round-transition--leaving {
  animation: roundTransitionOut 360ms ease-in forwards;
}

.round-transition__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 12vw, 88px);
  font-weight: 950;
  color: oklch(94% 0.12 84);
  text-shadow:
    0 0 24px oklch(80% 0.16 78 / 0.75),
    0 4px 0 oklch(38% 0.12 70),
    0 12px 28px oklch(15% 0.08 60 / 0.85);
  letter-spacing: 0.08em;
  text-align: center;
  animation: roundTransitionTitleIn 480ms cubic-bezier(0.16, 1.2, 0.3, 1) 80ms backwards;
}

.round-transition__subtitle {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(16px, 4vw, 22px);
  font-weight: 700;
  color: oklch(82% 0.06 80);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  animation: roundTransitionSubIn 480ms cubic-bezier(0.16, 1.2, 0.3, 1) 280ms backwards;
}

@keyframes roundTransitionIn {
  0% { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  100% { opacity: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

@keyframes roundTransitionOut {
  to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}

@keyframes roundTransitionTitleIn {
  0%   { opacity: 0; transform: translateY(40px) scale(0.85); filter: blur(8px); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes roundTransitionSubIn {
  0%   { opacity: 0; transform: translateY(16px); letter-spacing: 0.32em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.18em; }
}

@media (prefers-reduced-motion: reduce) {
  .warning-flash-overlay,
  .crisis-boom-overlay,
  .app--crisis-zoom,
  .round-transition,
  .round-transition__title,
  .round-transition__subtitle { animation: none; }
}

/* Tutorial upgrade (2026-05-14): rich panel — image frame + live mock cards + arrows */
.ftue-modal__panel--rich {
  width: min(440px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding-top: 20px;
}

.ftue-modal__media {
  margin: 4px 0 4px;
  display: grid;
  place-items: center;
  min-height: 180px;
}

.ftue-image-frame {
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  border: 2px solid rgba(232, 184, 77, 0.45);
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(232, 184, 77, 0.12),
    0 14px 32px rgba(0, 0, 0, 0.45);
  background: #000;
}

.ftue-image-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* 進階教學向量插畫框（取代舊截圖）：對齊深色金邊 modal */
.ftue-illustration {
  width: 100%;
  max-width: 290px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(232, 184, 77, 0.1),
    0 14px 32px rgba(0, 0, 0, 0.45);
}

.ftue-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.ftue-modal__caption {
  margin: -6px 0 0;
  font-size: 12px;
  color: rgba(232, 184, 77, 0.78);
  font-style: italic;
  letter-spacing: 0.02em;
}

.ftue-mock {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
}

.ftue-mock--row {
  grid-template-columns: auto auto 1fr;
  align-items: center;
  justify-content: center;
}

.ftue-mock__card {
  width: 130px;
  /* 高度跟著內容走，不要鎖死 168px 把金額/footer 裁掉（教學卡要完整看到牌面） */
  height: auto;
  min-height: 168px;
  margin: 0;
}

.ftue-mock__arrow {
  font-size: 28px;
  color: rgba(232, 184, 77, 0.85);
  text-shadow: 0 0 8px rgba(232, 184, 77, 0.55);
}

.ftue-mock__split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.ftue-mock__player {
  background: rgba(62, 211, 145, 0.18);
  border: 1px solid rgba(62, 211, 145, 0.5);
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 900;
  color: #b9ffd6;
  font-size: 14px;
  text-align: center;
  min-width: 38px;
}

.ftue-mock__hint {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(232, 184, 77, 0.16);
  border: 1px solid rgba(232, 184, 77, 0.45);
  color: #ffe5a2;
  letter-spacing: 0.02em;
}

.ftue-mock__hint--danger {
  background: rgba(232, 94, 61, 0.22);
  border-color: rgba(232, 94, 61, 0.6);
  color: #ffd9cf;
}

.ftue-mock--decision .ftue-mock__choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(320px, 90%);
}

.ftue-mock--decision .choice-button {
  min-height: 64px;
  padding: 8px 12px;
}

/* Mini-card adjustments inside FTUE — 簡化掉重型 shadows / animations */
.ftue-mock__card.card {
  height: auto;
  min-height: 168px;
  animation: none;
  transform: none;
}

.ftue-mock__card .card__symbol {
  width: 64px;
  height: 64px;
  font-size: 36px;
}

.ftue-mock__card .card__symbol--cash .svg-icon {
  width: 26px;
  height: 26px;
}

.ftue-mock__card .card__symbol-label {
  font-size: 11px;
}

.ftue-mock__card .card__value {
  font-size: 22px;
}

.ftue-mock__card .card__note {
  font-size: 10px;
}

.ftue-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 5vmin, 26px);
  color: #ffe5a2;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.ftue-modal__body {
  margin: 0;
  font-size: clamp(13px, 3.4vmin, 15px);
  line-height: 1.55;
  color: rgba(255, 244, 216, 0.85);
  text-align: left;
}

.ftue-modal__body strong {
  color: oklch(88% 0.14 84);
  font-weight: 900;
}

.ftue-modal__step {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ftue-modal__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 4px;
}

.ftue-modal__actions .ghost-button:first-child {
  grid-column: 1;
}

.ftue-modal__actions .primary-button {
  grid-column: 2;
}

.ftue-modal__actions .primary-button:first-child {
  grid-column: 1 / -1;
}

.ftue-modal__actions .ghost-button + .ghost-button {
  grid-column: 1;
  grid-row: 2;
}

.ftue-modal__actions .ghost-button + .ghost-button + .primary-button {
  grid-column: 2;
  grid-row: 2;
}

/* Roles guide: prev + next share one row, equal width. Its own container avoids
   the shared .ftue-modal__actions grid used by the slides. */
.role-guide-nav {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.role-guide-nav .primary-button,
.role-guide-nav .ghost-button { flex: 1 1 0; }

/* P1-3: per-role mastery codex inside the role guide (display only, local progress) */
.role-mastery {
  margin: 8px auto 2px;
  width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px 10px;
  border-radius: 12px;
  text-align: left;
  background: linear-gradient(180deg, rgba(20,28,46,0.6), rgba(10,15,26,0.7));
  border: 1px solid rgba(243,196,90,0.32);
}
.role-mastery__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--font-display, sans-serif);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  color: #f3c45a;
}
.role-mastery__count {
  font-size: 0.64rem; font-weight: 800;
  color: #ffe9b4;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(243,196,90,0.16); border: 1px solid rgba(243,196,90,0.4);
}
.role-mastery__moment {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem; line-height: 1.25;
  color: rgba(243,232,208,0.6);
}
.role-mastery__moment.is-earned { color: #fff3d6; }
.role-mastery__star { color: rgba(243,196,90,0.4); font-size: 0.8rem; }
.role-mastery__moment.is-earned .role-mastery__star { color: #f3c45a; text-shadow: 0 0 8px rgba(246,197,74,0.6); }
.role-mastery__name { font-weight: 700; min-width: 0; }
.role-mastery__hint {
  font-size: 0.56rem; font-weight: 600;
  color: rgba(243,232,208,0.5);
  white-space: nowrap;
}
.role-mastery__tag {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em;
  color: #0f1a2f;
  padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 60%, #d99a2c);
}
.role-mastery-summary {
  margin: 6px 0 0;
  font-size: 0.66rem; font-weight: 700;
  color: rgba(243,196,90,0.86);
}
/* Skip sits top-right (away from the bottom nav) so it is not mis-tapped. */
.role-guide-skip {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: rgba(243, 232, 208, 0.5);
  font: 700 13px/1 "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.role-guide-skip:active { color: rgba(243, 232, 208, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .ftue-modal__panel { animation: none; }
}

/* COMPACT TREASURE BURST — for routine reveals (value < 8) */

.treasure-burst--compact .treasure-burst__big {
  font-size: clamp(64px, 18vmin, 148px);
  animation: treasureCompactPop 800ms cubic-bezier(0.22, 1.4, 0.32, 1) forwards;
}

.treasure-burst--compact .treasure-burst__label {
  font-size: clamp(14px, 3vmin, 20px);
  animation: treasureCompactLabel 800ms ease-out forwards;
}

.treasure-burst--compact .treasure-burst__dim {
  background: rgba(0, 0, 0, 0.82);
}

@keyframes treasureCompactPop {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.1); }
  60%  { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

@keyframes treasureCompactLabel {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; }
}

/* HIGHLIGHT REEL OUTCOMES — per-player banked/bust/out delta rows */

.highlight-reel__outcomes {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  display: grid;
  gap: 6px;
  width: min(560px, 92vw);
}

.highlight-reel__outcome {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(92px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 244, 216, 0.12);
  opacity: 0;
  transform: translateX(-20px);
  animation: outcomeRowIn 480ms cubic-bezier(0.22, 1.4, 0.32, 1) calc(700ms + var(--j, 0) * 140ms) forwards;
}

.highlight-reel__outcome--banked {
  border-color: rgba(62, 211, 145, 0.5);
  background: linear-gradient(180deg, rgba(28, 70, 48, 0.55), rgba(12, 28, 20, 0.65));
}

.highlight-reel__outcome--bust {
  border-color: rgba(232, 60, 40, 0.55);
  background: linear-gradient(180deg, rgba(80, 18, 12, 0.6), rgba(28, 10, 8, 0.7));
}

.highlight-reel__avatar {
  width: 34px;
  height: 34px;
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
}

.highlight-reel__player-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(14px, 3.4vmin, 18px);
  text-shadow: 0 0 6px currentColor;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highlight-reel__result {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.highlight-reel__delta {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(16px, 4vmin, 22px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.highlight-reel__detail {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.4vmin, 12px);
  font-weight: 600;
  color: rgba(255, 244, 216, 0.55);
  line-height: 1.1;
  white-space: nowrap;
}

.highlight-reel__outcome--banked .highlight-reel__delta {
  color: #b9ffd6;
  text-shadow: 0 0 10px rgba(62, 211, 145, 0.65);
}

.highlight-reel__outcome--bust .highlight-reel__delta {
  color: #ffd9cf;
  text-shadow: 0 0 10px rgba(232, 60, 40, 0.65);
}

.highlight-reel__outcome--out .highlight-reel__delta {
  color: rgba(255, 244, 216, 0.4);
}

@media (max-width: 520px) {
  .highlight-reel__outcome {
    grid-template-columns: 30px minmax(0, 1fr) minmax(82px, auto);
    gap: 8px;
    padding: 8px 10px;
  }

  .highlight-reel__detail {
    font-size: 10px;
  }
}

@keyframes outcomeRowIn {
  0%   { opacity: 0; transform: translateX(-20px); }
  60%  { opacity: 1; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .highlight-reel__outcome { animation: none; opacity: 1; transform: none; }
  .treasure-burst--compact .treasure-burst__big,
  .treasure-burst--compact .treasure-burst__label { animation: none; opacity: 1; }
}

/* HAZARDS-SEEN TRACKER — chip row in intel-grid */

.hazard-tracker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.6), rgba(14, 11, 7, 0.7));
  border: 1px solid rgba(232, 168, 88, 0.22);
}

.hazard-tracker__label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e8a858;
  margin-right: 4px;
}

.hazard-tracker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 99px;
  border: 1px solid rgba(232, 168, 88, 0.32);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 245, 215, 0.85);
  font-size: 13px;
  font-weight: 800;
  transition: all 200ms ease;
}

.hazard-tracker__chip .svg-icon {
  width: 16px;
  height: 16px;
}

.hazard-tracker__chip.is-seen {
  color: #ffd9cf;
  border-color: rgba(232, 94, 61, 0.42);
  background: rgba(232, 94, 61, 0.18);
  box-shadow: 0 0 10px rgba(232, 94, 61, 0.2);
}

.hazard-tracker__chip.is-danger {
  color: #fff5b0;
  border-color: rgba(255, 60, 30, 0.85);
  background: linear-gradient(180deg, rgba(255, 90, 30, 0.32), rgba(120, 30, 18, 0.45));
  box-shadow: 0 0 16px rgba(255, 60, 30, 0.65);
  animation: hazardChipDanger 0.7s ease-in-out infinite alternate;
}

.hazard-tracker__count {
  font-variant-numeric: tabular-nums;
}

.hazard-tracker__warn {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: 800;
  color: #ff8a3a;
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-shadow: 0 0 8px rgba(255, 138, 58, 0.5);
}

@keyframes hazardChipDanger {
  0%   { box-shadow: 0 0 12px rgba(255, 60, 30, 0.45); }
  100% { box-shadow: 0 0 22px rgba(255, 60, 30, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-tracker__chip.is-danger { animation: none; }
}

/* CHOICE CONFIRM — compact pop-out before locking a vote */

.choice-locked {
  display: grid;
  justify-self: center;
  width: min(100%, 380px);
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 244, 216, 0.28);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0px, transparent 1px, transparent 18px),
    rgba(4, 4, 4, 0.96);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.42),
    0 18px 48px rgba(0, 0, 0, 0.62);
  position: relative;
  overflow: hidden;
  z-index: 8;
  animation: choiceConfirmIn 160ms ease-out;
}

.choice-locked--stay {
  border-color: rgba(0, 255, 65, 0.72);
}

.choice-locked--leave {
  border-color: rgba(240, 192, 64, 0.72);
}

@keyframes choiceConfirmIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.choice-locked__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.choice-locked__label,
.choice-locked__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.choice-locked__label {
  color: var(--muted);
}

.choice-locked__tag {
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.choice-locked--stay .choice-locked__tag {
  color: var(--terminal-green);
}

.choice-locked--leave .choice-locked__tag {
  color: var(--gold);
}

.choice-locked__choice {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 8vmin, 44px);
  line-height: 1;
  color: #fff5d7;
  text-align: center;
}

.choice-locked--stay .choice-locked__choice {
  color: #b9ffd6;
  text-shadow: 0 0 16px rgba(0, 255, 65, 0.42);
}

.choice-locked--leave .choice-locked__choice {
  color: #ffe5a2;
  text-shadow: 0 0 16px rgba(240, 192, 64, 0.38);
}

.choice-locked__hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

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

.choice-locked__actions .ghost-button,
.choice-locked__actions .primary-button {
  min-height: 46px;
  font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .choice-locked { animation: none; }
}

.choice-reveal-burst {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice-reveal-burst.is-active {
  opacity: 1;
  transform: scale(1);
}

.choice-reveal-burst.is-leaving {
  opacity: 0;
  transform: scale(1.02);
}

.choice-reveal-burst__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, oklch(86% 0.14 84 / 0.22), transparent 42%),
    linear-gradient(180deg, oklch(12% 0.05 230 / 0.86), oklch(8% 0.035 230 / 0.92));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.choice-reveal-burst__panel {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  padding: 18px;
  border: 2px solid oklch(60% 0.14 84 / 0.52);
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 12%, oklch(48% 0.12 84 / 0.25), transparent 36%),
    linear-gradient(180deg, oklch(22% 0.04 250), oklch(16% 0.035 250));
  color: oklch(92% 0.03 92);
  box-shadow:
    inset 0 2px 0 oklch(32% 0.04 250 / 0.6),
    0 8px 0 oklch(8% 0.04 230 / 0.4),
    0 28px 58px oklch(5% 0.04 230 / 0.6);
}

.choice-reveal-burst__kicker {
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  /* The overlay is appended to document.body, so .app--commercial-mobile-scoped
     --toy-coin tokens don't inherit and the gold pill collapses to transparent.
     Use a hardcoded gold pill + dark ink so the kicker reads regardless. */
  background: linear-gradient(180deg, oklch(93% 0.06 82), oklch(81% 0.135 73));
  color: oklch(24% 0.055 218);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.choice-reveal-burst__panel h2 {
  margin: 0;
  color: oklch(90% 0.12 84);
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 52px);
  line-height: 0.96;
}

.choice-reveal-burst__score {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-reveal-burst__score span {
  padding: 6px 9px;
  border: 1px solid oklch(55% 0.1 84 / 0.4);
  border-radius: 999px;
  background: oklch(30% 0.04 250 / 0.7);
  color: oklch(78% 0.04 92);
  font-size: 12px;
  font-weight: 900;
}

.choice-reveal-burst__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.choice-reveal-burst__row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: oklch(28% 0.03 250 / 0.72);
  opacity: 0;
  transform: translateY(8px);
  animation: choiceRevealRowIn 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay);
}

.choice-reveal-burst__row--stay b {
  color: oklch(92% 0.04 150);
  background: oklch(38% 0.12 150 / 0.7);
}

.choice-reveal-burst__row--leave b {
  color: oklch(95% 0.06 84);
  background: oklch(45% 0.14 72 / 0.7);
}

.choice-reveal-burst__avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.choice-reveal-burst__row strong {
  min-width: 0;
  overflow: hidden;
  color: oklch(92% 0.03 92);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-reveal-burst__row b {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

@keyframes choiceRevealRowIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .choice-reveal-burst__panel {
    padding: 14px;
  }

  .choice-reveal-burst__grid {
    grid-template-columns: 1fr;
  }
}

/* AVATAR PICKER — trader avatar selection in setup */

.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 244, 216, 0.08);
}

.avatar-picker__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.avatar-picker__btn {
  appearance: none;
  width: 48px;
  height: 48px;
  padding: 2px;
  line-height: 1;
  border: 1.5px solid transparent;
  background: rgba(255, 244, 216, 0.05);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.avatar-picker__btn img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}

.avatar-picker__btn:hover {
  transform: scale(1.08);
  background: rgba(232, 184, 77, 0.14);
}

.avatar-picker__btn.is-selected {
  border-color: var(--gold);
  background: rgba(232, 184, 77, 0.22);
  box-shadow: 0 0 10px rgba(232, 184, 77, 0.45);
}

.setup-player .avatar-picker {
  grid-column: 1 / -1;
  margin-top: 0;
}

.avatar-picker--compact {
  gap: 4px;
  padding: 6px;
}

.avatar-picker--compact .avatar-picker__label {
  flex: 0 0 100%;
  margin-right: 0;
  line-height: 1;
}

.avatar-picker--compact .avatar-picker__btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.avatar-picker--compact .avatar-picker__btn img {
  border-radius: 7px;
}

/* RECENT ROOMS — chip row of past rooms */

.recent-rooms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 244, 216, 0.08);
}

.recent-rooms__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

.recent-rooms__chip {
  appearance: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(232, 184, 77, 0.42);
  background: rgba(232, 184, 77, 0.12);
  color: var(--gold);
  border-radius: 99px;
  cursor: pointer;
  transition: all 120ms ease;
}

.recent-rooms__chip:hover {
  background: rgba(232, 184, 77, 0.24);
  transform: translateY(-1px);
}

.online-matchmaking {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 2px solid oklch(69% 0.11 84 / 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, oklch(86% 0.14 84 / 0.24), transparent 36%),
    linear-gradient(180deg, oklch(99% 0.02 92 / 0.86), oklch(92% 0.04 92 / 0.82));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.86),
    0 5px 0 oklch(55% 0.1 84 / 0.12);
}

.online-matchmaking__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.online-matchmaking__header span,
.online-room-list__empty span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.online-matchmaking__header strong {
  display: block;
  margin-top: 2px;
  color: var(--toy-ink);
  font-size: 15px;
  font-weight: 950;
}

.online-matchmaking__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.online-matchmaking p {
  margin: 0;
  color: var(--toy-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.online-room-list {
  display: grid;
  gap: 8px;
}

.online-room-card {
  appearance: none;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid oklch(65% 0.08 84 / 0.3);
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.78);
  color: var(--toy-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 oklch(99% 0.02 92 / 0.8);
}

.online-room-card:hover {
  border-color: var(--toy-coin-deep);
  background: oklch(96% 0.05 92 / 0.9);
}

.online-room-card__code {
  display: grid;
  place-items: center;
  width: 58px;
  min-height: 38px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  color: oklch(37% 0.1 66);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.online-room-card__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.online-room-card__body strong,
.online-room-card__body small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-room-card__body strong {
  font-size: 13px;
  font-weight: 950;
}

.online-room-card__body small {
  color: var(--toy-muted);
  font-size: 10.5px;
  font-weight: 760;
}

.online-room-card__join {
  padding: 6px 9px;
  border-radius: 999px;
  background: oklch(88% 0.08 150 / 0.78);
  color: oklch(38% 0.13 149);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.online-room-list__empty {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px dashed oklch(65% 0.08 84 / 0.34);
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.58);
}

.online-room-list__empty strong {
  color: var(--toy-ink);
  font-size: 13px;
}

@media (max-width: 520px) {
  .online-matchmaking__header {
    grid-template-columns: 1fr;
  }

  .online-matchmaking__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  .online-matchmaking__actions .ghost-button,
  .online-matchmaking__actions .primary-button {
    min-width: 0;
    padding-inline: 8px;
  }

  .online-room-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .online-room-card__join {
    grid-column: 1 / -1;
    justify-self: end;
  }

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

  .ruleset-toggle--duo .ruleset-toggle__btn {
    grid-template-columns: 1fr;
    min-height: 106px;
  }

  .variant-selector--buttons .variant-selector__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .variant-card {
    min-height: 78px;
    padding: 9px;
  }

  .variant-dropdown__body small {
    white-space: normal;
  }
}

/* SUSPENSE FLASH — pre-burst dim + bass swell hint */

.suspense-flash {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 22%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.78) 100%);
  opacity: 0;
  animation: suspenseFlash 700ms cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes suspenseFlash {
  0%   { opacity: 0; transform: scale(0.85); }
  20%  { opacity: 0.95; transform: scale(1); }
  60%  { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .suspense-flash { animation-duration: 200ms; }
}

/* TENSION SCALING — viewport vignette + heartbeat as deck risk grows */

.app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 94;
  pointer-events: none;
  background: transparent;
  transition: background 0.6s ease;
}

.app--tension-low::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(232, 94, 61, 0.18) 100%);
}

.app--tension-mid::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(232, 60, 40, 0.36) 100%);
  animation: tensionPulseSlow 1.5s ease-in-out infinite;
}

.app--tension-high::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(232, 30, 18, 0.55) 100%);
  animation: tensionPulseFast 0.7s ease-in-out infinite;
}

@keyframes tensionPulseSlow {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

@keyframes tensionPulseFast {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .app--tension-mid::after,
  .app--tension-high::after { animation: none; opacity: 0.85; }
}

/* STREAK BADGE — treasure / survivor combo */

.streak-badge {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 108;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 4vmin, 24px);
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 215, 107, 0.6);
  animation: streakBadgeIn 480ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.streak-badge.is-leaving {
  animation: streakBadgeOut 500ms ease-in forwards;
}

.streak-badge__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
}

.streak-badge--treasure {
  background: linear-gradient(180deg, #fff5b0 0%, #ffd76b 45%, #c98a30 100%);
  color: #1b1209;
  border: 2px solid rgba(255, 245, 200, 0.8);
}

.streak-badge--survivor {
  background: linear-gradient(180deg, #ffd9a0 0%, #f08a3a 50%, #8a3a14 100%);
  color: #1b1209;
  border: 2px solid rgba(255, 200, 150, 0.8);
}

@keyframes streakBadgeIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(4px) scale(1.08); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes streakBadgeOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-badge { animation: none; opacity: 1; }
}

/* CASH-OUT BANNER — announces a player retreating to all viewers */

.cashout-banner {
  position: fixed;
  top: max(76px, calc(env(safe-area-inset-top) + 58px));
  left: 50%;
  width: min(92vw, 560px);
  min-height: 86px;
  transform: translateX(-50%);
  z-index: 112;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 14px;
  border-radius: 10px;
  color: #2c1a07;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(180deg, rgba(255, 249, 220, 0.98), rgba(235, 194, 94, 0.98));
  border: 2px solid var(--accent, #ffd76b);
  border-left-width: 9px;
  box-shadow:
    0 22px 48px rgba(34, 19, 4, 0.28),
    0 7px 0 rgba(112, 76, 18, 0.24),
    0 0 0 5px rgba(255, 229, 142, 0.28);
  font-family: var(--font-display);
  overflow: hidden;
  animation: cashOutBannerIn 580ms cubic-bezier(0.22, 1.6, 0.32, 1);
}

.cashout-banner.is-leaving {
  animation: cashOutBannerOut 480ms ease-in forwards;
}

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

.cashout-banner__coins span {
  position: absolute;
  left: var(--x, 50%);
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff6b8, #d99421);
  border: 1px solid rgba(108, 68, 10, 0.28);
  color: rgba(97, 56, 5, 0.82);
  font: 900 11px/1 var(--font-mono);
  box-shadow: 0 3px 0 rgba(91, 55, 8, 0.22);
  opacity: 0;
  animation: cashoutCoinPop 1400ms cubic-bezier(0.16, 1.25, 0.3, 1) var(--d, 0ms) forwards;
}

.cashout-banner__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--accent, #a66f14);
}

.cashout-banner__avatar {
  width: clamp(46px, 12vmin, 60px);
  height: clamp(46px, 12vmin, 60px);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 246, 204, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 3px var(--accent, #d99421), 0 10px 18px rgba(71, 43, 8, 0.2);
  font: 900 20px/1 var(--font-display);
}

.cashout-banner__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cashout-banner__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cashout-banner__label {
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: clamp(10px, 2.4vmin, 12px);
  letter-spacing: 0.12em;
  color: rgba(78, 48, 9, 0.62);
  text-transform: uppercase;
  line-height: 1;
}

.cashout-banner__name {
  font-weight: 900;
  font-size: clamp(20px, 5.3vmin, 31px);
  color: #3a2106;
  line-height: 0.98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cashout-banner__action {
  font-weight: 800;
  font-size: clamp(11px, 2.6vmin, 14px);
  color: rgba(68, 42, 9, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cashout-banner__amount {
  position: relative;
  z-index: 1;
  justify-self: end;
  font-weight: 900;
  font-size: clamp(32px, 8vmin, 52px);
  background: linear-gradient(180deg, #fff5b0 0%, #ffd76b 50%, #c98a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(232, 184, 77, 0.8);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  letter-spacing: -0.02em;
  line-height: 1;
}

@keyframes cashOutBannerIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(6px) scale(1.06); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes cashOutBannerOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.96); }
}

@keyframes cashoutCoinPop {
  0%   { opacity: 0; transform: translateY(18px) rotate(-18deg) scale(0.55); }
  16%  { opacity: 1; }
  58%  { opacity: 1; transform: translateY(-40px) rotate(14deg) scale(1.08); }
  100% { opacity: 0; transform: translateY(-74px) rotate(32deg) scale(0.8); }
}

@media (max-width: 480px) {
  .cashout-banner {
    top: max(68px, calc(env(safe-area-inset-top) + 52px));
    width: min(94vw, 420px);
    min-height: 76px;
    gap: 9px;
    padding: 10px 12px 10px 10px;
    border-left-width: 7px;
  }

  .cashout-banner__amount {
    font-size: clamp(30px, 9.5vmin, 42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cashout-banner,
  .cashout-banner__coins span { animation: none; opacity: 1; }
}

/* CASH-OUT CHOICE BURST — immediate table-wide feedback when someone locks Cash Out */

.cashout-choice-burst {
  position: fixed;
  inset: 0;
  z-index: 114;
  pointer-events: none;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  color: #2c1a07;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.cashout-choice-burst.is-active {
  opacity: 1;
}

.cashout-choice-burst.is-leaving {
  opacity: 0;
  transition: opacity 360ms ease-in;
}

.cashout-choice-burst__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 215, 107, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(9, 13, 10, 0.02), rgba(9, 13, 10, 0.26));
}

.cashout-choice-burst__coins {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cashout-choice-burst__coins span {
  position: absolute;
  left: var(--x, 50%);
  bottom: 14%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6b8, #d99421);
  border: 1px solid rgba(108, 68, 10, 0.28);
  color: rgba(97, 56, 5, 0.82);
  font: 900 13px/1 var(--font-mono);
  box-shadow: 0 4px 0 rgba(91, 55, 8, 0.24), 0 0 18px rgba(255, 215, 107, 0.36);
  opacity: 0;
  animation: cashoutChoiceCoinRise 1500ms cubic-bezier(0.16, 1.25, 0.3, 1) var(--d, 0ms) forwards;
}

.cashout-choice-burst__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(92vw, 620px);
  min-height: 118px;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(180deg, rgba(255, 249, 220, 0.98), rgba(235, 194, 94, 0.98));
  border: 2px solid var(--accent, #ffd76b);
  border-left-width: 10px;
  box-shadow:
    0 26px 58px rgba(34, 19, 4, 0.32),
    0 8px 0 rgba(112, 76, 18, 0.24),
    0 0 0 6px rgba(255, 229, 142, 0.3);
  font-family: var(--font-display);
  overflow: hidden;
  animation: cashoutChoicePanelIn 620ms cubic-bezier(0.16, 1.45, 0.24, 1) forwards;
}

.cashout-choice-burst__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 47%, transparent 56%);
  transform: translateX(-100%);
  animation: cashoutChoiceSheen 1050ms ease-out 180ms forwards;
}

.cashout-choice-burst__avatar {
  position: relative;
  z-index: 1;
  width: clamp(54px, 13vmin, 74px);
  height: clamp(54px, 13vmin, 74px);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 246, 204, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 4px var(--accent, #d99421), 0 12px 22px rgba(71, 43, 8, 0.24);
  font: 900 24px/1 var(--font-display);
}

.cashout-choice-burst__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cashout-choice-burst__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cashout-choice-burst__kicker {
  color: rgba(78, 48, 9, 0.62);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.4vmin, 12px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.cashout-choice-burst__copy strong {
  color: #3a2106;
  font-size: clamp(28px, 7vmin, 46px);
  font-weight: 950;
  line-height: 0.98;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashout-choice-burst__copy em {
  color: rgba(68, 42, 9, 0.72);
  font-size: clamp(12px, 2.8vmin, 16px);
  font-style: normal;
  font-weight: 850;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashout-choice-burst__stamp {
  position: relative;
  z-index: 1;
  justify-self: end;
  transform: rotate(-8deg);
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(63, 132, 80, 0.13);
  border: 2px solid rgba(47, 122, 70, 0.76);
  color: rgba(38, 99, 57, 0.96);
  font: 950 clamp(17px, 4.5vmin, 28px)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 rgba(47, 122, 70, 0.18);
}

@keyframes cashoutChoicePanelIn {
  0%   { opacity: 0; transform: translateY(32px) rotateX(14deg) scale(0.72); filter: saturate(1.3) blur(2px); }
  58%  { opacity: 1; transform: translateY(-8px) rotateX(-4deg) scale(1.05); filter: saturate(1.12) blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: saturate(1); }
}

@keyframes cashoutChoiceSheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes cashoutChoiceCoinRise {
  0%   { opacity: 0; transform: translateY(34px) rotate(-20deg) scale(0.55); }
  16%  { opacity: 1; }
  62%  { opacity: 1; transform: translateY(-82px) rotate(16deg) scale(1.12); }
  100% { opacity: 0; transform: translateY(-150px) rotate(36deg) scale(0.8); }
}

@media (max-width: 480px) {
  .cashout-choice-burst__panel {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 104px;
    gap: 11px;
    padding: 14px 13px;
  }

  .cashout-choice-burst__stamp {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 5px 8px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cashout-choice-burst,
  .cashout-choice-burst__panel,
  .cashout-choice-burst__panel::after,
  .cashout-choice-burst__coins span {
    animation: none;
    opacity: 1;
  }
}

/* RECORD BADGE — personal best floats above player row */

.record-badge {
  position: fixed;
  z-index: 107;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--accent, #ffd76b) 0%, rgba(0, 0, 0, 0.72) 100%);
  border: 1.5px solid rgba(255, 250, 220, 0.85);
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 2px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(255, 215, 107, 0.7);
  animation: recordBadge 2.4s cubic-bezier(0.22, 1.4, 0.32, 1);
}

.record-badge__title {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.6vmin, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #fff5b0;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}

.record-badge__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vmin, 30px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px var(--accent, #ffd76b), 0 2px 4px rgba(0, 0, 0, 0.7);
  line-height: 1;
}

.record-badge__name {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.4vmin, 13px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes recordBadge {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  30%  { transform: translate(-50%, -100%) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .record-badge { animation: none; opacity: 1; }
}

/* HAZARD-SPECIFIC DIM TINTS — override the default red dim per hazard */

.hazard-burst--spiders .hazard-burst__dim,
.catastrophe-overlay--spiders .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(40, 30, 60, 0.55) 0%, rgba(15, 10, 22, 0.85) 45%, rgba(0, 0, 0, 0.95) 90%);
}
.hazard-burst--snakes .hazard-burst__dim,
.catastrophe-overlay--snakes .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(50, 130, 70, 0.45) 0%, rgba(20, 50, 25, 0.85) 45%, rgba(2, 12, 4, 0.95) 90%);
}
.hazard-burst--rocks .hazard-burst__dim,
.catastrophe-overlay--rocks .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(110, 90, 70, 0.5) 0%, rgba(50, 38, 28, 0.85) 45%, rgba(15, 10, 6, 0.95) 90%);
}
.hazard-burst--mummy .hazard-burst__dim,
.catastrophe-overlay--mummy .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(120, 130, 60, 0.42) 0%, rgba(50, 60, 35, 0.85) 38%, rgba(15, 18, 12, 0.95) 80%);
}

/* SPIDERS — descending on threads + corner webs */

.hazard-spiders {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.spiders__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55) 100%);
}

.spiders__web {
  position: absolute;
  width: 26vmin;
  height: 26vmin;
  background:
    repeating-conic-gradient(from 0deg at 0% 0%,
      transparent 0deg, rgba(220, 220, 230, 0.18) 0.4deg, transparent 0.8deg, transparent 22deg),
    radial-gradient(circle at 0% 0%,
      transparent 18%,
      rgba(220, 220, 230, 0.18) 19%,
      transparent 21%,
      transparent 32%,
      rgba(220, 220, 230, 0.16) 33%,
      transparent 35%,
      transparent 48%,
      rgba(220, 220, 230, 0.14) 49%,
      transparent 51%);
  filter: blur(0.5px);
  opacity: 0;
  animation: spidersWebFade 1.6s ease-out forwards;
}
.spiders__web--tl { top: 0; left: 0; }
.spiders__web--tr { top: 0; right: 0; transform: scaleX(-1); }
.spiders__web--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.spiders__web--br { bottom: 0; right: 0; transform: scale(-1, -1); }

@keyframes spidersWebFade {
  0%   { opacity: 0; }
  30%  { opacity: 0.9; }
  100% { opacity: 0.6; }
}

.spiders__pack {
  position: absolute;
  inset: 0;
}

.spiders__spider {
  position: absolute;
  top: 0;
  left: var(--left, 50%);
  width: var(--size, 40px);
  margin-left: calc(var(--size, 40px) / -2);
  display: block;
  animation: spiderSway var(--sway, 1000ms) ease-in-out var(--drop-delay, 0ms) infinite alternate;
}

.spiders__thread {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 0;
  margin-left: -0.75px;
  background: rgba(220, 220, 230, 0.65);
  box-shadow: 0 0 4px rgba(220, 220, 230, 0.4);
  animation: spiderThread var(--drop-dur, 800ms) ease-out var(--drop-delay, 0ms) forwards;
}

.spiders__body {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--size, 40px);
  height: var(--size, 40px);
  margin-left: calc(var(--size, 40px) / -2);
  background:
    radial-gradient(circle at 50% 40%, #2a1a2e 0%, #1a0d1c 60%, #08060c 100%);
  border-radius: 45% 45% 50% 50% / 55% 55% 50% 50%;
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.7),
    inset 2px 2px 4px rgba(40, 30, 50, 0.8);
  transform: translateY(-50%);
  opacity: 0;
  animation: spiderDrop var(--drop-dur, 800ms) ease-out var(--drop-delay, 0ms) forwards;
}

.spiders__body::before,
.spiders__body::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 30%;
  top: 30%;
  background: radial-gradient(circle, #ff5a3d 30%, transparent 60%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 90, 61, 0.85);
}
.spiders__body::before { left: 22%; }
.spiders__body::after  { right: 22%; }

@keyframes spiderThread {
  0%   { height: 0; }
  100% { height: var(--final-y, 50vh); }
}
@keyframes spiderDrop {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(-8deg); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, var(--final-y, 50vh)) scale(1) rotate(0); }
}
@keyframes spiderSway {
  0%   { transform: translateX(-3px) rotate(-1deg); }
  100% { transform: translateX(3px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spiders__spider,
  .spiders__web { animation: none; }
}

/* SNAKES — slithering across screen */

.hazard-snakes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.snakes__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(60, 140, 80, 0.18) 0%, transparent 60%);
}

.snakes__pack {
  position: absolute;
  inset: 0;
}

.snakes__snake {
  position: absolute;
  top: var(--y, 50vh);
  left: -50vw;
  width: 110vw;
  height: 8vh;
  fill: none;
  stroke: url(#snakeGrad);
  stroke-width: 16;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(60, 200, 90, 0.45));
  opacity: 0;
  animation: snakeSlide var(--dur, 1400ms) cubic-bezier(0.4, 0.05, 0.3, 1) var(--delay, 0ms) forwards;
}

.snakes__snake[style*="--reverse:1"] {
  animation: snakeSlideReverse var(--dur, 1400ms) cubic-bezier(0.4, 0.05, 0.3, 1) var(--delay, 0ms) forwards;
}

.snakes__snake path {
  stroke: #5cd47a;
  stroke-width: 14;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(60, 200, 90, 0.55));
}

@keyframes snakeSlide {
  0%   { opacity: 0; transform: translateX(-30vw) scaleY(1); }
  10%  { opacity: 1; }
  50%  { transform: translateX(20vw) scaleY(1.1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(70vw) scaleY(1); }
}

@keyframes snakeSlideReverse {
  0%   { opacity: 0; transform: translateX(120vw) scaleX(-1) scaleY(1); }
  10%  { opacity: 1; }
  50%  { transform: translateX(70vw) scaleX(-1) scaleY(1.1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(0) scaleX(-1) scaleY(1); }
}

.snakes__hiss {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, rgba(60, 200, 90, 0.06) 80px, transparent 160px);
  animation: snakesHiss 0.6s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.45;
}

@keyframes snakesHiss {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-160px); }
}

@media (prefers-reduced-motion: reduce) {
  .snakes__snake,
  .snakes__hiss { animation: none; }
}

/* ROCKS — falling chunks + impact dust */

.hazard-rocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.rocks__dim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 28%, transparent 72%, rgba(60, 40, 26, 0.55) 100%);
}

.rocks__pack {
  position: absolute;
  inset: 0;
}

.rocks__rock {
  position: absolute;
  top: -120px;
  left: var(--left, 50%);
  width: var(--size, 50px);
  height: var(--size, 50px);
  margin-left: calc(var(--size, 50px) / -2);
  background:
    radial-gradient(circle at 30% 25%, #8a7a64 0%, #5e4f3a 35%, #3a2f22 75%, #1f180f 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.6),
    inset 2px 2px 4px rgba(180, 160, 130, 0.25),
    inset -2px -2px 5px rgba(0, 0, 0, 0.7);
  opacity: 0;
  animation: rockFall var(--dur, 1100ms) cubic-bezier(0.55, 0, 0.6, 1) var(--delay, 0ms) forwards;
}

.rocks__rock--s0 { clip-path: polygon(20% 0%, 80% 5%, 100% 50%, 75% 100%, 25% 95%, 0% 55%); }
.rocks__rock--s1 { clip-path: polygon(15% 10%, 65% 0%, 100% 35%, 90% 80%, 45% 100%, 0% 65%); }
.rocks__rock--s2 { clip-path: polygon(30% 0%, 95% 25%, 85% 70%, 60% 100%, 10% 90%, 5% 30%); }

@keyframes rockFall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  6%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(115vh) rotate(var(--rot, 540deg)); }
}

.rocks__dust {
  position: absolute;
  inset: 0;
}

.rocks__puff {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: 80px;
  height: 80px;
  margin-left: -40px;
  background: radial-gradient(circle, rgba(180, 160, 130, 0.7) 0%, rgba(120, 100, 75, 0.4) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0;
  animation: rockPuff 900ms ease-out var(--delay, 0ms) forwards;
}

@keyframes rockPuff {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  20%  { opacity: 0.9; transform: translateY(-10px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(2); }
}

@media (prefers-reduced-motion: reduce) {
  .rocks__rock,
  .rocks__puff { animation: none; }
  .rocks__rock { display: none; }
}

/* MUMMY — bandages crawling across + sigils + sickly mist */

.hazard-mummy {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.mummy__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(120, 130, 60, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(80, 100, 50, 0.18) 0%, transparent 50%);
}

.mummy__mist {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60vh;
  background: radial-gradient(ellipse at 50% 100%, rgba(160, 180, 80, 0.25) 0%, rgba(80, 100, 40, 0.12) 35%, transparent 70%);
  filter: blur(12px);
  animation: mummyMistDrift 3s ease-in-out infinite alternate;
}

@keyframes mummyMistDrift {
  0%   { transform: translateX(-3vw) scaleY(0.94); opacity: 0.85; }
  100% { transform: translateX(3vw) scaleY(1.06); opacity: 1; }
}

.mummy__sigils {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(220, 200, 100, 0.25) 0%, transparent 6%),
    radial-gradient(circle at 82% 28%, rgba(220, 200, 100, 0.22) 0%, transparent 6%),
    radial-gradient(circle at 22% 78%, rgba(220, 200, 100, 0.22) 0%, transparent 6%),
    radial-gradient(circle at 78% 76%, rgba(220, 200, 100, 0.25) 0%, transparent 6%);
  filter: blur(0.5px);
  animation: mummySigilPulse 1.6s ease-in-out infinite alternate;
}

@keyframes mummySigilPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}

.mummy__bandages {
  position: absolute;
  inset: 0;
}

.mummy__bandage {
  position: absolute;
  top: var(--top, 50vh);
  height: 14px;
  width: var(--w, 70vw);
  background:
    repeating-linear-gradient(90deg,
      rgba(220, 210, 180, 0.85) 0px,
      rgba(200, 188, 150, 0.9) 8px,
      rgba(160, 145, 110, 0.85) 16px,
      rgba(220, 210, 180, 0.85) 24px),
    rgba(180, 165, 130, 0.7);
  box-shadow:
    0 0 10px rgba(160, 145, 110, 0.45),
    inset 0 1px 0 rgba(255, 250, 220, 0.4),
    inset 0 -1px 0 rgba(80, 65, 40, 0.5);
  filter: blur(0.4px);
  opacity: 0;
  animation: mummyBandage var(--dur, 1200ms) cubic-bezier(0.32, 0.05, 0.32, 1) var(--delay, 0ms) forwards;
}

.mummy__bandage::before,
.mummy__bandage::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12px;
  height: 100%;
  background: inherit;
  filter: blur(2px);
  opacity: 0.6;
}
.mummy__bandage::before { left: -8px; clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%); }
.mummy__bandage::after  { right: -8px; clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%); }

.mummy__bandage--from-left {
  left: -100vw;
  animation-name: mummyBandageLeft;
}
.mummy__bandage--from-right {
  right: -100vw;
  animation-name: mummyBandageRight;
}

@keyframes mummyBandageLeft {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0.85; transform: translateX(calc(100vw + 30vw)); }
}

@keyframes mummyBandageRight {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  100% { opacity: 0.85; transform: translateX(calc(-100vw - 30vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .mummy__bandage,
  .mummy__mist,
  .mummy__sigils { animation: none; }
}

/* SHARED FIRE LAYER — flames + embers + lava glow + heat shimmer */

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

.fire__lava-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10vh;
  height: 50vh;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 180, 60, 0.55) 0%, rgba(255, 120, 30, 0.35) 28%, rgba(232, 60, 30, 0.18) 55%, transparent 80%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: lavaGlowPulse 1.4s ease-in-out infinite alternate;
}

@keyframes lavaGlowPulse {
  0%   { opacity: 0.7; transform: scaleY(0.94); }
  100% { opacity: 1;   transform: scaleY(1.04); }
}

.fire__flames {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 35vh;
}

.fire__flame {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: var(--w, 60px);
  height: var(--h, 110px);
  margin-left: calc(var(--w, 60px) / -2);
  background:
    radial-gradient(ellipse at 50% 100%,
      #fff5d1 0%,
      #ffe27a 12%,
      #ffae3a 28%,
      #ff6a2d 50%,
      #c92a14 70%,
      transparent 88%);
  clip-path: polygon(50% 0%, 70% 18%, 88% 50%, 78% 78%, 65% 100%, 35% 100%, 22% 78%, 12% 50%, 30% 18%);
  filter: blur(2px);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  animation: flameFlicker var(--dur, 600ms) ease-in-out var(--delay, 0ms) infinite alternate;
}

@keyframes flameFlicker {
  0%   { transform: scale(0.85, 0.92) translateX(-3px) skewX(-2deg); opacity: 0.85; filter: blur(2px) brightness(0.9); }
  30%  { transform: scale(1.08, 1.18) translateX(2px) skewX(3deg); opacity: 1; filter: blur(2.5px) brightness(1.15); }
  65%  { transform: scale(0.95, 1.04) translateX(-1px) skewX(-1deg); opacity: 0.95; filter: blur(2px) brightness(1.05); }
  100% { transform: scale(1.02, 1.1) translateX(3px) skewX(2deg); opacity: 1; filter: blur(2.4px) brightness(1.1); }
}

.fire__embers {
  position: absolute;
  inset: 0;
}

.fire__ember {
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff5b0 0%, #ffae3a 45%, #ff5a1f 75%, transparent 90%);
  box-shadow:
    0 0 8px rgba(255, 174, 58, 0.95),
    0 0 16px rgba(255, 90, 31, 0.55);
  opacity: 0;
  animation: emberRise var(--dur, 1400ms) cubic-bezier(0.25, 0.4, 0.4, 1) var(--delay, 0ms) forwards;
}

@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  10%  { opacity: 1; }
  60%  { opacity: 1; transform: translate(calc(var(--drift, 0px) * 0.6), -55vh) scale(0.85); }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -100vh) scale(0.4); }
}

.fire__heat {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px,
      rgba(255, 200, 120, 0.04) 4px,
      transparent 8px);
  mix-blend-mode: screen;
  animation: heatShimmer 1s linear infinite;
  opacity: 0.5;
}

@keyframes heatShimmer {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .fire__flame,
  .fire__ember,
  .fire__lava-glow,
  .fire__heat { animation: none; }
  .fire__ember { display: none; }
}

@media (max-width: 520px) {
  .rules-actions,
  .gameover-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rules-actions .ghost-button,
  .rules-actions .primary-button,
  .gameover-actions .ghost-button,
  .gameover-actions .primary-button {
    width: 100%;
  }

  .gameover-panel {
    max-height: calc(100dvh - 20px);
    padding: 18px 14px;
  }

  .ftue-modal {
    /* v189 F2: mobile override must keep safe-area or it kills v186 notch
       padding from the base rule. calc(env() + 10px) for breathing room. */
    padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 10px);
    align-items: start;
  }

  .ftue-modal__panel {
    width: 100%;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    padding: 20px 16px 16px;
    gap: 12px;
  }

  .ftue-modal__icon {
    width: 68px;
    height: 68px;
  }

  .ftue-modal__icon .svg-icon {
    width: 42px;
    height: 42px;
  }

  .ftue-modal__body {
    text-align: center;
  }

  .ftue-modal__media {
    min-height: 100px;
  }

  .ftue-image-frame img {
    max-height: 32dvh;
    object-fit: contain;
  }

  .ftue-modal__actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ftue-modal__actions .ghost-button:first-child,
  .ftue-modal__actions .primary-button,
  .ftue-modal__actions .ghost-button + .ghost-button,
  .ftue-modal__actions .ghost-button + .ghost-button + .primary-button {
    grid-column: auto;
    grid-row: auto;
  }

  .ftue-guide-strip {
    gap: 6px;
    margin: 0 auto;
  }

  .ftue-guide-strip__avatar {
    width: 32px;
    height: 32px;
  }

  .ftue-guide-strip__text {
    font-size: 11px;
    line-height: 1.25;
  }
}

/* ============================================================
   v17 — Bankrupt hazard catastrophe particle systems
   Reskin of buildXLayer outputs from Incan motifs to finance.
   ============================================================ */

/* ----- Shared bankrupt-red vignette overrides (corrected hazard.id → finance metaphor mapping) ----- */
.hazard-burst--fire .hazard-burst__dim,
.catastrophe-overlay--fire .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(200, 60, 40, 0.5) 0%, rgba(100, 20, 15, 0.82) 42%, rgba(5, 2, 2, 0.96) 85%);
}
.hazard-burst--mummy .hazard-burst__dim,
.catastrophe-overlay--mummy .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(200, 50, 30, 0.5) 0%, rgba(90, 15, 10, 0.85) 42%, rgba(4, 1, 1, 0.96) 88%);
}
.hazard-burst--rocks .hazard-burst__dim,
.catastrophe-overlay--rocks .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(220, 40, 30, 0.55) 0%, rgba(80, 12, 10, 0.85) 42%, rgba(3, 1, 1, 0.96) 88%);
}
.hazard-burst--snakes .hazard-burst__dim,
.catastrophe-overlay--snakes .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(200, 30, 60, 0.5) 0%, rgba(80, 8, 25, 0.85) 42%, rgba(2, 1, 2, 0.96) 88%);
}
.hazard-burst--spiders .hazard-burst__dim,
.catastrophe-overlay--spiders .vignette {
  background: radial-gradient(circle at 50% 50%, rgba(230, 30, 30, 0.6) 0%, rgba(95, 8, 8, 0.88) 42%, rgba(3, 0, 0, 0.97) 90%);
}

/* ============================================================
   TAX AUDIT (fire) — stamp slam + watermark + paper clips
   ============================================================ */
.crisis-audit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.audit__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-family: var(--font-display, system-ui);
  font-size: clamp(80px, 22vmin, 180px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(255, 26, 26, 0.5);
  white-space: nowrap;
  animation: auditWatermark 2.8s ease-out forwards;
  pointer-events: none;
}
@keyframes auditWatermark {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-22deg) scale(1.4); }
  20%  { opacity: 1; transform: translate(-50%, -50%) rotate(-22deg) scale(1); }
  75%  { opacity: 0.9; }
  100% { opacity: 0; }
}
.audit__stamps, .audit__clips { position: absolute; inset: 0; }
.audit__stamp {
  position: absolute;
  top: -10%;
  left: var(--left, 50%);
  width: var(--size, 80px);
  height: var(--size, 80px);
  margin-left: calc(var(--size, 80px) / -2);
  color: var(--crisis-red, #ff1a1a);
  animation: auditStampDrop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) var(--delay, 0ms) forwards;
}
.audit__stamp-svg {
  width: 100%;
  height: 100%;
  stroke: var(--crisis-red, #ff1a1a);
  fill: none;
  filter: drop-shadow(0 0 10px rgba(255, 26, 26, 0.7));
}
.audit__stamp-svg text { fill: var(--crisis-red, #ff1a1a); stroke: none; }
@keyframes auditStampDrop {
  0%   { transform: translateY(-120%) rotate(calc(var(--rot, 0deg) * -1)) scale(0.6); opacity: 0; }
  60%  { transform: translateY(40vh) rotate(var(--rot, 0deg)) scale(1.15); opacity: 1; }
  75%  { transform: translateY(36vh) rotate(var(--rot, 0deg)) scale(0.95); }
  100% { transform: translateY(38vh) rotate(var(--rot, 0deg)) scale(1.0); opacity: 1; }
}
.audit__clip {
  position: absolute;
  top: -2%;
  left: var(--left, 50%);
  width: 6px;
  height: 10px;
  background: rgba(255, 26, 26, 0.7);
  border-radius: 1px;
  animation: auditClipFall var(--dur, 900ms) ease-in var(--delay, 0ms) forwards;
}
@keyframes auditClipFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(var(--rot, 180deg)); opacity: 0.3; }
}

/* ============================================================
   LAWSUIT (mummy) — gavel strike + shockwave + chains
   ============================================================ */
.crisis-lawsuit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.lawsuit__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 60, 40, 0.15) 0%, transparent 55%);
}
.lawsuit__gavels, .lawsuit__chains { position: absolute; inset: 0; }
.lawsuit__gavel {
  position: absolute;
  top: -5%;
  left: var(--left, 50%);
  width: var(--size, 60px);
  height: var(--size, 60px);
  margin-left: calc(var(--size, 60px) / -2);
  animation: lawsuitGavelStrike 0.45s cubic-bezier(0.1, 1.8, 0.3, 1) var(--delay, 0ms) forwards;
}
.lawsuit__gavel-svg {
  width: 100%;
  height: 100%;
  stroke: var(--crisis-red, #ff1a1a);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 12px rgba(255, 26, 26, 0.8));
}
@keyframes lawsuitGavelStrike {
  0%   { transform: translateY(-100%) rotate(-45deg) scale(0.5); opacity: 0; }
  55%  { transform: translateY(28vh) rotate(0deg) scale(1.2); opacity: 1; }
  70%  { transform: translateY(22vh) rotate(2deg) scale(0.95); }
  100% { transform: translateY(25vh) rotate(0deg) scale(1.0); opacity: 1; }
}
.lawsuit__shockwave {
  position: absolute;
  top: 80%;
  left: 50%;
  width: var(--size, 60px);
  height: var(--size, 60px);
  margin-left: calc(var(--size, 60px) / -2);
  margin-top: calc(var(--size, 60px) / -2);
  border-radius: 50%;
  border: 2px solid rgba(255, 26, 26, 0.7);
  opacity: 0;
  animation: lawsuitShockwave 0.7s ease-out var(--delay, 0ms) forwards;
}
@keyframes lawsuitShockwave {
  0%   { transform: scale(0.2); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: scale(4); opacity: 0; }
}
.lawsuit__chain {
  position: absolute;
  top: var(--top, 50vh);
  width: 60vw;
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 2px,
    rgba(255, 26, 26, 0.6) 2px, rgba(255, 26, 26, 0.6) 14px,
    transparent 14px, transparent 16px
  );
  border-top: 1px solid rgba(255, 100, 80, 0.4);
  border-bottom: 1px solid rgba(255, 100, 80, 0.4);
  opacity: 0;
}
.lawsuit__chain--left  { left: -60vw;  animation: lawsuitChainLeft  var(--dur, 1000ms) ease-out var(--delay, 0ms) forwards; }
.lawsuit__chain--right { right: -60vw; animation: lawsuitChainRight var(--dur, 1000ms) ease-out var(--delay, 0ms) forwards; }
@keyframes lawsuitChainLeft {
  0%   { transform: translateX(0);    opacity: 0; }
  15%  { opacity: 0.8; }
  60%  { transform: translateX(65vw); opacity: 0.8; }
  100% { transform: translateX(65vw); opacity: 0.5; }
}
@keyframes lawsuitChainRight {
  0%   { transform: translateX(0);     opacity: 0; }
  15%  { opacity: 0.8; }
  60%  { transform: translateX(-65vw); opacity: 0.8; }
  100% { transform: translateX(-65vw); opacity: 0.5; }
}

/* ============================================================
   MARKET CRASH (rocks) — K-line draw + falling % + center arrow
   ============================================================ */
.crisis-crash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.hazard-burst--rocks .hazard-burst__icon--big {
  opacity: 0.25;
  transform: scale(0.55);
  filter: drop-shadow(0 0 18px rgba(255, 26, 26, 0.55));
}
.crash__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(180, 30, 20, 0.12) 0%, transparent 65%);
}
.crash__chart {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  height: 62%;
  opacity: 0;
  animation: crashChartReveal 2.4s ease-out 0.05s forwards;
}
.crash__chart-line {
  fill: none;
  stroke: var(--crisis-red, #ff1a1a);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 10px rgba(255, 80, 60, 0.9));
  animation: crashLineDraw 1.4s ease-out 0.2s forwards;
}
@keyframes crashChartReveal {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes crashLineDraw {
  0%   { stroke-dashoffset: 320; }
  100% { stroke-dashoffset: 0; }
}
.crash__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(60px, 18vmin, 130px);
  color: var(--crisis-red, #ff1a1a);
  text-shadow: 0 0 40px rgba(255, 26, 26, 0.8);
  animation: crashArrowPulse 0.7s ease-out forwards;
  z-index: 2;
}
@keyframes crashArrowPulse {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.85; }
}
.crash__nums { position: absolute; inset: 0; }
.crash__num {
  position: absolute;
  top: -5%;
  left: var(--left, 50%);
  font-family: var(--font-mono, monospace);
  font-size: clamp(14px, 3.5vmin, 24px);
  font-weight: 700;
  color: var(--crisis-red, #ff1a1a);
  text-shadow: 0 0 8px rgba(255, 26, 26, 0.7);
  white-space: nowrap;
  opacity: 0;
  animation: crashNumFall var(--dur, 1000ms) ease-in var(--delay, 0ms) forwards;
}
@keyframes crashNumFall {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)); opacity: 0.4; }
}

/* ============================================================
   FRAUD (snakes) — mask appears + shatters into shards + fake bills
   ============================================================ */
.crisis-fraud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.hazard-burst--snakes .hazard-burst__icon--big {
  opacity: 0.22;
  transform: scale(0.55);
  filter: drop-shadow(0 0 18px rgba(255, 26, 26, 0.55));
}
.fraud__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(180, 30, 60, 0.15) 0%, transparent 65%);
}
.fraud__mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 22vmin, 160px);
  height: clamp(80px, 22vmin, 160px);
  animation: fraudMaskAppear 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) forwards,
             fraudMaskShatter 0.25s ease-in 0.5s forwards;
}
@keyframes fraudMaskAppear {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-15deg); }
  60%  { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes fraudMaskShatter {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
.fraud__mask-svg {
  width: 100%;
  height: 100%;
  stroke: var(--crisis-red, #ff1a1a);
  stroke-width: 2;
  fill: rgba(255, 26, 26, 0.08);
  filter: drop-shadow(0 0 14px rgba(255, 26, 26, 0.75));
}
.fraud__shards { position: absolute; inset: 0; }
.fraud__shard {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 26, 26, 0.55);
  clip-path: var(--clip);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 26, 26, 0.7));
  animation: fraudShardFly 1.1s ease-out var(--delay, 0ms) forwards;
}
@keyframes fraudShardFly {
  0%   { opacity: 0.85; transform: translate(0, 0) rotate(0deg); }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(cos(var(--angle, 0deg)) * var(--dist, 30vmin)),
        calc(sin(var(--angle, 0deg)) * var(--dist, 30vmin))
      )
      rotate(var(--rot, 20deg));
  }
}
.fraud__bills { position: absolute; inset: 0; }
.fraud__bill {
  position: absolute;
  top: -4%;
  left: var(--left, 50%);
  width: 60px;
  height: 28px;
  background: rgba(0, 220, 90, 0.4);
  border: 1.5px solid rgba(0, 255, 100, 0.75);
  box-shadow: 0 0 14px rgba(0, 220, 90, 0.7);
  opacity: 0;
  animation: fraudBillFloat var(--dur, 1300ms) ease-in var(--delay, 0ms) forwards;
}
@keyframes fraudBillFloat {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(var(--rot, 180deg)); opacity: 0.3; }
}
.fraud__scam {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, system-ui);
  font-size: clamp(72px, 20vmin, 180px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--crisis-red, #ff1a1a);
  text-shadow:
    0 0 40px rgba(255, 26, 26, 0.95),
    0 0 12px rgba(255, 100, 80, 0.85);
  opacity: 0;
  animation: fraudScamStrobe 1.4s steps(1) 0.4s forwards;
  z-index: 4;
}
@keyframes fraudScamStrobe {
  0%   { opacity: 0; }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  20%  { opacity: 0; }
  28%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  36%  { opacity: 0; }
  44%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
}

/* ============================================================
   DEBT COLLECTORS (spiders) — red paint splatter + 還錢 drip + MISSED CALL counter
   ============================================================ */
.crisis-debt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.debt__dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(120, 10, 10, 0.1) 0%, transparent 60%);
}
.debt__splats, .debt__drips { position: absolute; inset: 0; }
.debt__splat {
  position: absolute;
  top: var(--top, 0%);
  left: var(--left, 0%);
  width: var(--size, 40vmin);
  height: var(--size, 40vmin);
  margin-top: calc(var(--size, 40vmin) / -2);
  margin-left: calc(var(--size, 40vmin) / -2);
  background:
    radial-gradient(circle at 50% 50%, rgba(220, 12, 12, 0.95) 0%, rgba(160, 6, 6, 0.85) 25%, rgba(120, 4, 4, 0.55) 45%, transparent 65%),
    radial-gradient(circle at 30% 40%, rgba(180, 8, 8, 0.6) 0%, transparent 35%),
    radial-gradient(circle at 70% 35%, rgba(180, 8, 8, 0.55) 0%, transparent 30%),
    radial-gradient(circle at 60% 70%, rgba(190, 8, 8, 0.5) 0%, transparent 28%);
  filter: blur(0.5px) drop-shadow(0 0 18px rgba(220, 10, 10, 0.6));
  opacity: 0;
  transform: scale(0.2);
  animation: debtSplatSpread 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) var(--delay, 0ms) forwards;
}
@keyframes debtSplatSpread {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.95; transform: scale(1); }
}
.debt__drip {
  position: absolute;
  top: 0;
  left: var(--left, 50%);
  width: 4px;
  height: var(--len, 30vh);
  background: linear-gradient(180deg, rgba(220, 12, 12, 0.95) 0%, rgba(160, 6, 6, 0.7) 70%, transparent 100%);
  transform-origin: top center;
  transform: scaleY(0);
  filter: drop-shadow(0 0 4px rgba(220, 10, 10, 0.6));
  animation: debtDripFall var(--dur, 1100ms) cubic-bezier(0.3, 0, 0.5, 1) var(--delay, 0ms) forwards;
}
@keyframes debtDripFall {
  0%   { transform: scaleY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.9; }
}
.debt__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, system-ui);
  font-weight: 900;
  font-size: clamp(110px, 30vmin, 260px);
  letter-spacing: 0.05em;
  color: var(--crisis-red, #ff1a1a);
  text-shadow:
    0 0 40px rgba(255, 26, 26, 0.9),
    0 0 12px rgba(255, 100, 80, 0.95),
    0 6px 0 rgba(120, 0, 0, 0.5);
  opacity: 0;
  z-index: 2;
  animation: debtTextSlam 1.6s cubic-bezier(0.18, 1.6, 0.32, 1) 0.18s forwards;
}
@keyframes debtTextSlam {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-3deg); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  55%  { transform: translate(-50%, -50%) scale(0.94) rotate(-1deg); }
  75%  { transform: translate(-50%, -50%) scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.debt__call {
  position: absolute;
  top: 6%;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(8, 4, 4, 0.78);
  border: 2px solid rgba(255, 26, 26, 0.85);
  box-shadow:
    0 0 16px rgba(255, 26, 26, 0.55),
    inset 0 0 8px rgba(255, 26, 26, 0.25);
  border-radius: 3px;
  opacity: 0;
  transform: translateX(40px);
  animation: debtCallSlide 0.45s ease-out 0.3s forwards, debtCallShake 0.18s ease-in-out 0.75s 3;
  z-index: 3;
}
@keyframes debtCallSlide {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes debtCallShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.debt__call-icon {
  font-size: clamp(20px, 4.5vmin, 30px);
  color: var(--crisis-red, #ff1a1a);
  text-shadow: 0 0 8px rgba(255, 26, 26, 0.8);
  animation: debtCallRing 0.25s ease-in-out 0.5s 6;
}
@keyframes debtCallRing {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-22deg); }
  75%      { transform: rotate(22deg); }
}
.debt__call-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.debt__call-label {
  font-family: var(--font-mono, monospace);
  font-size: clamp(9px, 2vmin, 11px);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 100, 80, 0.85);
}
.debt__call-count {
  font-family: var(--font-mono, monospace);
  font-size: clamp(20px, 4.8vmin, 32px);
  font-weight: 900;
  color: var(--crisis-red, #ff1a1a);
  text-shadow: 0 0 10px rgba(255, 26, 26, 0.85);
  letter-spacing: 0.04em;
  min-width: 3ch;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .audit__stamp, .audit__clip,
  .lawsuit__gavel, .lawsuit__shockwave, .lawsuit__chain,
  .crash__chart, .crash__chart-line, .crash__arrow, .crash__num,
  .fraud__mask, .fraud__shard, .fraud__bill, .fraud__scam,
  .debt__splat, .debt__drip, .debt__text, .debt__call, .debt__call-icon {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   v18 — Anime accents (shared across all hazards)
   - Speed lines (white radial bars, rotating)
   - Per-hazard onomatopoeia 「查!! / 告!! / 崩!! / 騙!! / 催!!」 inside star-burst frame
   - Anger marks ⚡⚡⚡ flashing
   - Impact wave (single ring expanding from center)
   ============================================================ */

/* --- Speed lines --- */
.hazard-burst__speedlines {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;
  margin-top: -110vmax;
  margin-left: -110vmax;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, transparent 6deg,
    rgba(255, 255, 255, 0.18) 6deg, rgba(255, 255, 255, 0.18) 7deg,
    transparent 7deg, transparent 14deg
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation:
    animeSpeedlinesIn 0.45s ease-out 0.15s forwards,
    animeSpeedlinesSpin 4s linear 0.6s infinite;
}
@keyframes animeSpeedlinesIn {
  0%   { opacity: 0; transform: scale(1.2); }
  100% { opacity: 0.42; transform: scale(1); }
}
@keyframes animeSpeedlinesSpin {
  to { transform: rotate(360deg); }
}

/* --- Impact wave: single thick white ring expanding from center --- */
.hazard-burst__impact-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: animeImpactRing 0.65s ease-out 0.15s forwards;
}
@keyframes animeImpactRing {
  0%   { opacity: 1; transform: scale(0.2); border-width: 8px; }
  100% { opacity: 0; transform: scale(48); border-width: 1px; }
}

/* --- Anger marks ⚡⚡⚡ top-right --- */
.hazard-burst__anger {
  position: absolute;
  top: 12%;
  right: 10%;
  font-size: clamp(28px, 6vmin, 56px);
  color: #ffeb3b;
  filter: drop-shadow(0 0 12px rgba(255, 235, 59, 0.85)) drop-shadow(0 0 4px rgba(255, 26, 26, 0.7));
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: animeAngerIn 0.05s linear 0.95s forwards, animeAngerFlash 0.18s steps(2) 1s 8;
}
@keyframes animeAngerIn { to { opacity: 1; } }
@keyframes animeAngerFlash {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.35; transform: scale(1.35) rotate(12deg); }
}

/* --- Onomatopoeia frame: star-burst + 擬聲詞 top-left --- */
.hazard-burst__ono-frame {
  position: absolute;
  top: 11%;
  left: 5%;
  width: clamp(120px, 24vmin, 220px);
  height: clamp(120px, 24vmin, 220px);
  pointer-events: none;
  z-index: 5;
  transform: rotate(-10deg);
  opacity: 0;
  animation: animeOnoFrameIn 0.55s cubic-bezier(0.18, 2, 0.4, 1) 0.55s forwards;
}
@keyframes animeOnoFrameIn {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0.2); }
  70%  { opacity: 1; transform: rotate(-6deg) scale(1.18); }
  100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}
.hazard-burst__ono-star {
  position: absolute;
  inset: 0;
  background: #ffeb3b;
  clip-path: polygon(
    50% 0%, 58% 16%, 78% 8%, 70% 28%,
    96% 28%, 78% 46%, 100% 60%, 78% 64%,
    90% 88%, 65% 78%, 60% 100%, 50% 82%,
    40% 100%, 35% 78%, 10% 88%, 22% 64%,
    0 60%, 22% 46%, 4% 28%, 30% 28%,
    22% 8%, 42% 16%
  );
  filter: drop-shadow(0 0 24px rgba(255, 26, 26, 0.85));
}
.hazard-burst__ono-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, "PingFang TC", "Microsoft JhengHei", system-ui);
  font-weight: 900;
  font-size: clamp(36px, 8vmin, 72px);
  color: #c00;
  -webkit-text-stroke: 4px #000;
  text-shadow: 4px 4px 0 #000;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .hazard-burst__speedlines,
  .hazard-burst__impact-wave,
  .hazard-burst__anger,
  .hazard-burst__ono-frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hazard-burst__ono-frame { transform: rotate(-10deg) !important; }
}

/* --- Catastrophe variants (boom = 2nd crisis full-screen) --- */
.catastrophe-speedlines {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260vmax;
  height: 260vmax;
  margin-top: -130vmax;
  margin-left: -130vmax;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, transparent 5deg,
    rgba(255, 255, 255, 0.28) 5deg, rgba(255, 255, 255, 0.28) 6deg,
    transparent 6deg, transparent 12deg
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation:
    animeSpeedlinesIn 0.45s ease-out 0.2s forwards,
    animeSpeedlinesSpin 3s linear 0.6s infinite;
}
.catastrophe-impact-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  animation: animeImpactRing 0.8s ease-out 0.15s forwards;
}
.catastrophe-anger {
  position: absolute;
  top: 9%;
  right: 8%;
  font-size: clamp(36px, 8vmin, 72px);
  color: #ffeb3b;
  filter: drop-shadow(0 0 16px rgba(255, 235, 59, 0.85)) drop-shadow(0 0 6px rgba(255, 26, 26, 0.7));
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  animation: animeAngerIn 0.05s linear 1s forwards, animeAngerFlash 0.18s steps(2) 1.05s 10;
}
.catastrophe-ono-frame {
  position: absolute;
  top: 9%;
  left: 4%;
  width: clamp(160px, 30vmin, 300px);
  height: clamp(160px, 30vmin, 300px);
  pointer-events: none;
  z-index: 5;
  transform: rotate(-12deg);
  opacity: 0;
  animation: animeOnoFrameIn 0.6s cubic-bezier(0.18, 2, 0.4, 1) 0.6s forwards;
}
.catastrophe-ono-star {
  position: absolute;
  inset: 0;
  background: #ffeb3b;
  clip-path: polygon(
    50% 0%, 58% 16%, 78% 8%, 70% 28%,
    96% 28%, 78% 46%, 100% 60%, 78% 64%,
    90% 88%, 65% 78%, 60% 100%, 50% 82%,
    40% 100%, 35% 78%, 10% 88%, 22% 64%,
    0 60%, 22% 46%, 4% 28%, 30% 28%,
    22% 8%, 42% 16%
  );
  filter: drop-shadow(0 0 30px rgba(255, 26, 26, 0.9));
}
.catastrophe-ono-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, "PingFang TC", "Microsoft JhengHei", system-ui);
  font-weight: 900;
  font-size: clamp(48px, 10vmin, 100px);
  color: #c00;
  -webkit-text-stroke: 5px #000;
  text-shadow: 5px 5px 0 #000;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .catastrophe-speedlines,
  .catastrophe-impact-wave,
  .catastrophe-anger,
  .catastrophe-ono-frame {
    animation: none !important;
    opacity: 1 !important;
  }
  .catastrophe-ono-frame { transform: rotate(-12deg) !important; }
}

/* ============================================================
   v18.2 — Money rain layer (falling $ / ¥ symbols, behind hero)
   ============================================================ */
.hazard-burst__money-rain,
.catastrophe-money-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.money-rain__bill {
  position: absolute;
  top: -8%;
  left: var(--left, 50%);
  font-family: "Courier New", "SF Mono", "Menlo", monospace;
  font-weight: 900;
  font-size: var(--size, 36px);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: moneyRainFall var(--dur, 1800ms) ease-in var(--delay, 0ms) forwards;
  will-change: transform, opacity;
  text-shadow: 0 0 10px currentColor;
}
.money-rain__bill.is-green {
  color: rgba(0, 220, 90, 0.85);
  filter: drop-shadow(0 0 6px rgba(0, 220, 90, 0.5));
}
.money-rain__bill.is-red {
  color: rgba(255, 90, 70, 0.85);
  filter: drop-shadow(0 0 6px rgba(255, 60, 40, 0.5));
}
@keyframes moneyRainFall {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.85; }
  100% { transform: translateY(118vh) rotate(var(--rot, 60deg)); opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .money-rain__bill { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   v19 Board Kings color POC
   Bright toy-board art direction without requiring new assets.
   v184 (Codex audit Fix #3): scoped from :root to .app--commercial-mobile
   so the experimental POC tokens no longer override the global :root
   for any context other than the actual rendered wrapper.
   ============================================================ */
.app--commercial-mobile {
  color-scheme: light;
  --toy-sky: oklch(84% 0.13 220);
  --toy-sky-deep: oklch(66% 0.16 230);
  --toy-mint: oklch(78% 0.16 150);
  --toy-grass: oklch(62% 0.16 145);
  --toy-cream: oklch(97% 0.035 92);
  --toy-paper: oklch(94% 0.035 92);
  --toy-ink: oklch(24% 0.055 218);
  --toy-muted: oklch(48% 0.04 215);
  --toy-line: oklch(78% 0.07 92);
  --toy-coin: oklch(81% 0.135 73);
  --toy-coin-lit: oklch(93% 0.06 82);
  --toy-coin-deep: oklch(60% 0.14 50);
  --toy-danger: oklch(65% 0.2 31);
  --toy-danger-deep: oklch(47% 0.17 31);
  --toy-safe: oklch(62% 0.17 149);
  --toy-teal: oklch(63% 0.14 190);
  --toy-shadow: oklch(25% 0.055 218 / 0.22);
  --bg: var(--toy-sky);
  --bg-2: var(--toy-mint);
  --panel: oklch(98% 0.028 92 / 0.94);
  --panel-strong: oklch(96% 0.04 88 / 0.98);
  --line: oklch(66% 0.12 84 / 0.42);
  --line-soft: oklch(70% 0.055 218 / 0.22);
  --text: var(--toy-ink);
  --muted: var(--toy-muted);
  --faint: oklch(61% 0.035 215);
  --gold: var(--toy-coin);
  --gold-2: var(--toy-coin-deep);
  --jade: var(--toy-safe);
  --teal: var(--toy-teal);
  --danger: var(--toy-danger);
  --ruby: var(--toy-danger-deep);
  --stone: oklch(91% 0.025 92);
  --terminal-green: var(--toy-safe);
  --crisis-red: var(--toy-danger);
  --shadow: 0 18px 38px var(--toy-shadow), 0 4px 0 oklch(55% 0.11 84 / 0.2);
  --focus: 0 0 0 4px oklch(66% 0.16 230 / 0.3);
}

/* v184 (Codex audit Fix #3): deleted late v19 body override that used
   --toy-sky directly on body. After scoping v19 tokens to
   .app--commercial-mobile, body can no longer read those vars (body is
   not a descendant of the .app wrapper). The base body style at the top
   of this file remains in effect. */

.app {
  background-color: var(--toy-sky);
  background-image:
    linear-gradient(180deg, oklch(88% 0.12 220 / 0.9) 0%, oklch(95% 0.08 165 / 0.78) 44%, oklch(88% 0.13 90 / 0.86) 100%),
    repeating-linear-gradient(90deg, oklch(24% 0.055 218 / 0.05) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, oklch(24% 0.055 218 / 0.04) 0 1px, transparent 1px 78px),
    url("./assets/temple-table.png");
  background-blend-mode: screen, normal, normal, soft-light;
}

.topbar {
  background: oklch(98% 0.025 92 / 0.9);
  border-bottom: 3px solid oklch(72% 0.14 84 / 0.7);
  box-shadow: 0 12px 28px var(--toy-shadow);
}

.topbar-menu__popover {
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.98), oklch(92% 0.045 92 / 0.98));
  border: 2px solid oklch(72% 0.14 84 / 0.58);
  box-shadow:
    0 5px 0 oklch(56% 0.095 84 / 0.22),
    0 18px 30px var(--toy-shadow);
}

.topbar-menu__popover::before {
  border-color: oklch(72% 0.14 84 / 0.58);
}

.topbar-menu__item {
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.9),
    0 3px 0 oklch(68% 0.045 218 / 0.24);
}

.brand__mark {
  border: 2px solid oklch(91% 0.11 86);
  background:
    linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 54%, var(--toy-coin-deep));
  color: oklch(32% 0.09 65);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 4px 0 oklch(55% 0.12 63),
    0 10px 18px var(--toy-shadow);
}

.brand h1,
.section-title h2,
.section-title h3 {
  color: var(--toy-ink);
  text-shadow: 0 2px 0 oklch(99% 0.025 92 / 0.9);
}

.brand p,
.section-title span,
.section-title small,
.stat__label,
.player-stat__label,
.setup-control label,
.choice-locked__label {
  color: var(--muted);
}

.stat {
  border-left-color: oklch(60% 0.055 218 / 0.22);
  min-width: 86px;
  padding: 8px 12px;
  border-left: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.035 92));
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.9),
    0 3px 0 oklch(65% 0.055 218 / 0.2);
}

.stat__value,
.player-stat__value--banked,
.log-toggle__main .svg-icon {
  color: var(--toy-coin-deep);
  text-shadow: 0 1px 0 oklch(99% 0.025 92 / 0.8);
}

.stat--risk .stat__value {
  color: var(--toy-danger);
}

.stat--risk {
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(93% 0.035 45));
}

.stat--online .stat__value {
  color: var(--toy-teal);
}

.icon-button,
.ghost-button,
.mini-button,
.primary-button,
.danger-button,
.choice-button {
  border-radius: 8px;
  transition:
    transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 140ms ease,
    background 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

.icon-button,
.ghost-button,
.mini-button {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.03 92));
  border: 1px solid oklch(69% 0.055 218 / 0.28);
  color: var(--toy-ink);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.9),
    0 3px 0 oklch(68% 0.045 218 / 0.28),
    0 10px 16px var(--toy-shadow);
}

.primary-button {
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 52%, var(--toy-coin-deep));
  color: oklch(22% 0.055 66);
  border: 1px solid oklch(92% 0.1 88);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.95),
    0 4px 0 oklch(54% 0.14 62),
    0 12px 18px oklch(31% 0.06 66 / 0.24);
}

.danger-button {
  background: linear-gradient(180deg, oklch(82% 0.12 42), var(--toy-danger) 52%, var(--toy-danger-deep));
  color: oklch(98% 0.025 76);
  border: 1px solid oklch(83% 0.12 42);
  box-shadow:
    inset 0 2px 0 oklch(94% 0.07 52 / 0.85),
    0 4px 0 oklch(39% 0.13 30),
    0 12px 18px oklch(35% 0.12 30 / 0.25);
}

.icon-button:hover,
.ghost-button:hover,
.mini-button:hover,
.primary-button:hover,
.danger-button:hover,
.choice-button:hover {
  transform: translateY(-2px);
}

.icon-button:active,
.ghost-button:active,
.mini-button:active,
.primary-button:active,
.danger-button:active,
.choice-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px oklch(25% 0.055 218 / 0.16);
}

.ghost-button--rules {
  background: linear-gradient(180deg, oklch(98% 0.04 92), oklch(90% 0.08 92));
  border-color: oklch(74% 0.12 84 / 0.5);
  color: oklch(42% 0.1 70);
}

.temple-strip,
.player-table,
.decision-panel,
.log-panel,
.score-panel,
.setup-panel,
.gameover-panel,
.ftue-modal__panel {
  background: var(--panel);
  border: 1px solid oklch(65% 0.09 84 / 0.38);
  box-shadow:
    0 18px 34px var(--toy-shadow),
    0 5px 0 oklch(58% 0.1 84 / 0.2);
}

.temple-strip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.95), oklch(92% 0.055 95 / 0.94));
}

.temple-strip::before {
  content: "";
  position: absolute;
  inset: 54px 12px 12px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 22%, oklch(84% 0.15 84 / 0.42) 0 10px, transparent 11px),
    radial-gradient(circle at 82% 28%, oklch(84% 0.15 84 / 0.32) 0 8px, transparent 9px),
    repeating-linear-gradient(90deg, transparent 0 56px, oklch(70% 0.12 190 / 0.22) 57px 60px),
    repeating-linear-gradient(0deg, transparent 0 46px, oklch(70% 0.12 190 / 0.18) 47px 50px);
  opacity: 0.45;
  pointer-events: none;
}

.temple-strip > * {
  position: relative;
  z-index: 1;
}

.empty-path,
.voter-card,
.privacy-card,
.intel-grid div,
.leave-preview div,
.choice-list li,
.room-code,
.setup-player,
.rules-list li,
.onboarding-rules {
  background: oklch(99% 0.018 92 / 0.72);
  border-color: oklch(65% 0.08 84 / 0.28);
  color: var(--toy-ink);
}

.card {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 92));
  border-color: oklch(70% 0.11 84 / 0.75);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.95),
    0 6px 0 oklch(58% 0.09 84 / 0.34),
    0 14px 24px var(--toy-shadow);
  transform: perspective(900px) rotateX(1.5deg);
}

.card::before {
  border-color: oklch(68% 0.09 84 / 0.22);
}

.card__symbol {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(89% 0.04 92));
  border-color: oklch(70% 0.05 218 / 0.22);
  box-shadow: inset 0 2px 0 oklch(99% 0.02 92 / 0.9);
}

.card__label,
.card__value,
.number-cell,
.gem-stack,
.status-cell strong,
.player-row__status strong,
.player-label strong,
.voter-card strong,
.privacy-card strong,
.intel-grid strong,
.leave-preview strong,
.choice-list b {
  color: var(--toy-ink);
  text-shadow: none;
}

.card__note,
.card__cash-kicker,
.card__cash-subtitle,
.card__hazard-kicker,
.card__hazard-subtitle,
.card__hazard-rule,
.privacy-card p,
.leave-preview p,
.setup-copy,
.log-list li {
  color: oklch(42% 0.04 215);
}

.card__hazard-title {
  color: oklch(97% 0.055 90);
  text-shadow: 0 0 16px oklch(62% 0.18 31 / 0.34);
}

.card__cash-title {
  color: var(--toy-ink);
  text-shadow: none;
}

.card--danger .card__hazard-rule {
  color: oklch(86% 0.12 42);
}

.card__tag,
.chip,
.log-toggle__count {
  background: oklch(92% 0.035 92);
  border-color: oklch(63% 0.07 84 / 0.28);
  color: var(--toy-muted);
}

.card--cash {
  background:
    linear-gradient(120deg, oklch(96% 0.08 132), oklch(89% 0.13 150) 58%, oklch(82% 0.12 165));
  border-color: oklch(62% 0.16 145);
}

.card--crisis {
  background:
    radial-gradient(circle at 52% 32%, oklch(58% 0.18 31 / 0.22), transparent 42%),
    linear-gradient(145deg, oklch(18% 0.06 28), oklch(11% 0.04 242) 56%, oklch(6% 0.025 242));
  border-color: oklch(76% 0.14 84 / 0.72);
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.16),
    0 0 0 1px oklch(78% 0.14 84 / 0.16),
    0 14px 24px oklch(5% 0.02 242 / 0.42);
}

.card--crisis .card__hazard-kicker,
.card--crisis .card__hazard-subtitle,
.card--crisis .card__hazard-rule {
  color: oklch(84% 0.09 84);
}

.card--crisis .card__symbol {
  color: oklch(88% 0.15 84);
  background:
    radial-gradient(circle at 50% 20%, oklch(80% 0.15 84 / 0.18), transparent 50%),
    oklch(8% 0.035 242 / 0.62);
  border-color: oklch(78% 0.14 84 / 0.32);
}

.card--tip {
  background:
    linear-gradient(120deg, oklch(96% 0.06 190), oklch(88% 0.11 196) 56%, oklch(78% 0.1 218));
  border-color: var(--toy-teal);
}

/* B3: Bear Market panic — deep violet field-state card. */
.card--bear {
  background:
    linear-gradient(120deg, oklch(58% 0.16 305), oklch(44% 0.17 300) 54%, oklch(32% 0.14 296));
  border-color: oklch(62% 0.2 304);
  color: oklch(97% 0.02 92);
}

.card--bear .card__hazard-kicker,
.card--bear .card__hazard-subtitle,
.card--bear .card__hazard-rule {
  color: oklch(91% 0.06 305);
}

.card--bear .card__symbol {
  color: oklch(96% 0.04 92);
}

/* B4: Black Swan — near-black catastrophe card. */
.card--black-swan {
  background:
    linear-gradient(120deg, oklch(27% 0.04 290), oklch(16% 0.03 285) 54%, oklch(8% 0.02 280));
  border-color: oklch(46% 0.1 295);
  color: oklch(97% 0.02 92);
}

.card--black-swan .card__hazard-kicker,
.card--black-swan .card__hazard-subtitle,
.card--black-swan .card__hazard-rule {
  color: oklch(82% 0.04 290);
}

.card--black-swan .card__symbol {
  color: oklch(95% 0.03 92);
}

.card__tag--bear {
  background: oklch(52% 0.2 304);
  color: oklch(98% 0.02 92);
}

.player-table {
  background: oklch(97% 0.03 92 / 0.92);
}

.player-row {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(92% 0.025 92));
  border-color: oklch(66% 0.08 84 / 0.28);
  box-shadow: 0 3px 0 oklch(63% 0.07 84 / 0.16);
}

.player-row.is-active {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(94% 0.055 145));
  border-color: oklch(62% 0.14 145 / 0.42);
}

.player-row.is-me {
  outline: 2px solid var(--toy-coin);
  outline-offset: -2px;
}

.player-stat {
  background: oklch(99% 0.015 92 / 0.78);
  border-color: oklch(65% 0.055 218 / 0.18);
}

.avatar {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(88% 0.035 92));
  border-width: 3px;
}

.decision-panel::after {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--toy-coin), transparent);
}

.choice-button {
  min-height: 82px;
  color: var(--toy-ink);
  border: 1px solid oklch(66% 0.08 84 / 0.36);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
    0 5px 0 oklch(55% 0.1 84 / 0.22),
    0 12px 20px var(--toy-shadow);
  position: relative;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 58px;
  text-align: left;
  justify-items: start;
}

.choice-button strong,
.choice-button span {
  color: inherit;
}

.choice-button::before {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: oklch(99% 0.02 92 / 0.78);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.8),
    0 4px 10px oklch(25% 0.055 218 / 0.16);
  font-size: 18px;
}

.choice-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 42%, oklch(99% 0.02 92 / 0.34) 50%, transparent 58% 100%);
  transform: translateX(-110%);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.choice-button:hover::after {
  transform: translateX(110%);
}

.choice-button--stay {
  background:
    linear-gradient(180deg, oklch(94% 0.08 152), oklch(76% 0.15 150) 56%, oklch(58% 0.15 150));
  border-color: oklch(60% 0.17 150);
}

/* F9: 加碼 icon ↑→▶（前進語義較強，「↑」易被當成 scroll-to-top） */
.choice-button--stay::before {
  content: "▶";
  border-radius: 8px;
  color: oklch(43% 0.15 149);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 oklch(99% 0.02 92 / 0.9);
  background:
    linear-gradient(135deg, transparent 0 58%, oklch(62% 0.16 149 / 0.16) 58% 100%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.03 92));
  border: 1px solid oklch(63% 0.1 145 / 0.34);
  box-shadow:
    -5px 5px 0 oklch(92% 0.035 92),
    -5px 5px 0 1px oklch(63% 0.1 145 / 0.26),
    inset 0 1px 0 oklch(99% 0.02 92 / 0.9),
    0 5px 10px oklch(25% 0.055 218 / 0.16);
}

/* C2 (Sprint 5): 規則 modal Glossary 名詞速查 */
.rules-glossary {
  margin-top: 14px;
  border: 1px solid oklch(70% 0.12 84 / 0.32);
  border-radius: 14px;
  background: oklch(99% 0.025 92 / 0.55);
  padding: 10px 14px;
}

.rules-glossary > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: oklch(38% 0.12 70);
  letter-spacing: 0.02em;
  padding: 4px 0;
  list-style: none;
  position: relative;
}

.rules-glossary > summary::marker,
.rules-glossary > summary::-webkit-details-marker {
  display: none;
}

.rules-glossary > summary::after {
  content: "▼";
  position: absolute;
  right: 4px;
  top: 6px;
  font-size: 10px;
  color: oklch(60% 0.12 70);
  transition: transform 200ms ease;
}

.rules-glossary[open] > summary::after {
  transform: rotate(180deg);
}

.rules-glossary__list {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr;
  gap: 5px 12px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
}

.rules-glossary__list dt {
  font-weight: 900;
  color: oklch(38% 0.12 70);
  white-space: nowrap;
}

.rules-glossary__list dd {
  margin: 0;
  color: oklch(28% 0.04 230);
}

/* C1 (Sprint 5): 首次危機/情報卡 inline tooltip — pulse 進場 + auto fade */
.card-first-hint {
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  z-index: 12;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, oklch(99% 0.025 92), oklch(91% 0.05 92));
  color: oklch(35% 0.1 70);
  border: 1px solid oklch(70% 0.16 78);
  box-shadow:
    0 6px 14px oklch(60% 0.14 70 / 0.36),
    0 0 0 4px oklch(80% 0.14 78 / 0.22);
  animation: cardFirstHintIn 320ms cubic-bezier(0.16, 1, 0.3, 1), cardFirstHintBob 1.8s ease-in-out 320ms infinite;
  pointer-events: auto;
  cursor: pointer;
}

.card-first-hint::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: oklch(95% 0.045 92);
  border-right: 1px solid oklch(70% 0.16 78);
  border-bottom: 1px solid oklch(70% 0.16 78);
}

.card-first-hint--dismiss {
  animation: cardFirstHintOut 240ms ease-out forwards;
}

@keyframes cardFirstHintIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes cardFirstHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes cardFirstHintOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .card-first-hint { animation: none; }
}

/* B4 (Sprint 5): 危機卡 reveal 時 path 短促震動 0.4s 強化警示感 */
.path--crisis-shake {
  animation: pathCrisisShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes pathCrisisShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(3px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .path--crisis-shake { animation: none; }
}

/* B2 (Sprint 5): one-tap choice lock feedback */
.choice-button--locking {
  animation: choiceLockThunk 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes choiceLockThunk {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    transform: scale(0.94);
    filter: brightness(1.18) saturate(1.25);
    box-shadow:
      inset 0 4px 12px oklch(25% 0.055 218 / 0.32),
      0 0 0 5px oklch(78% 0.16 78 / 0.42),
      0 4px 10px oklch(60% 0.14 70 / 0.32);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.06);
    box-shadow:
      inset 0 2px 6px oklch(25% 0.055 218 / 0.18),
      0 0 0 8px oklch(78% 0.16 78 / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice-button--locking { animation: none; filter: brightness(1.1); }
}

/* F3: 套現改 outline 為次 CTA — 加碼 fill 才是主 CTA */
.choice-button--leave {
  background:
    linear-gradient(180deg, oklch(99% 0.018 92), oklch(95% 0.025 92));
  border: 2px solid oklch(72% 0.15 78);
  color: oklch(42% 0.1 70);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
    0 3px 0 oklch(72% 0.15 78 / 0.28),
    0 8px 16px oklch(72% 0.15 78 / 0.18);
}

.choice-button--leave strong,
.choice-button--leave span {
  color: oklch(42% 0.1 70);
}

.choice-button--leave::before {
  content: "$";
  font-weight: 900;
  color: oklch(42% 0.1 70);
  background:
    linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 54%, var(--toy-coin-deep));
  border: 1px solid oklch(72% 0.15 78);
}

.choice-locked {
  border: 2px solid oklch(72% 0.13 84 / 0.75);
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(92% 0.04 92));
  box-shadow:
    0 0 0 9999px oklch(24% 0.055 218 / 0.28),
    0 18px 38px var(--toy-shadow),
    0 6px 0 oklch(55% 0.09 84 / 0.28);
}

.choice-locked--stay {
  border-color: oklch(62% 0.17 149);
}

.choice-locked--leave {
  border-color: var(--toy-coin-deep);
}

.choice-locked--stay .choice-locked__tag,
.choice-locked--stay .choice-locked__choice {
  color: oklch(47% 0.16 150);
  text-shadow: none;
}

.choice-locked--leave .choice-locked__tag,
.choice-locked--leave .choice-locked__choice {
  color: oklch(45% 0.11 66);
  text-shadow: none;
}

.choice-locked__hint {
  color: var(--toy-muted);
}

.setup-backdrop {
  background:
    linear-gradient(180deg, oklch(70% 0.13 220 / 0.54), oklch(55% 0.09 150 / 0.44));
}

.setup-backdrop--welcome {
  padding: 14px;
  background:
    linear-gradient(180deg, oklch(76% 0.14 220 / 0.82), oklch(74% 0.14 146 / 0.78));
}

.setup-panel--welcome,
.setup-panel--mode {
  width: min(680px, 100%);
  border: 2px solid oklch(72% 0.13 84 / 0.72);
  background:
    linear-gradient(180deg, oklch(99% 0.022 92), oklch(92% 0.055 92));
}

.setup-panel--welcome {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: auto;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

.setup-panel--welcome::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed oklch(62% 0.1 84 / 0.24);
  border-radius: 8px;
  pointer-events: none;
}

.setup-panel--welcome > * {
  position: relative;
  z-index: 1;
}

.welcome-toolbar {
  display: flex;
  justify-content: flex-end;
}

.greed-stage {
  position: relative;
  min-height: 248px;
  overflow: hidden;
  border: 2px solid oklch(70% 0.12 84 / 0.58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(83% 0.12 220), oklch(87% 0.12 155) 56%, oklch(82% 0.13 93)),
    repeating-linear-gradient(90deg, oklch(24% 0.055 218 / 0.08) 0 2px, transparent 2px 58px);
  box-shadow:
    inset 0 3px 0 oklch(99% 0.025 92 / 0.65),
    0 6px 0 oklch(55% 0.1 84 / 0.18);
}

.greed-stage::before,
.greed-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.greed-stage::before {
  bottom: 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent, oklch(71% 0.14 120 / 0.74)),
    repeating-linear-gradient(90deg, oklch(45% 0.12 118 / 0.22) 0 18px, transparent 18px 36px);
}

.greed-stage::after {
  top: 16px;
  height: 72px;
  background:
    linear-gradient(90deg, transparent 0 8%, oklch(99% 0.025 92 / 0.72) 8% 21%, transparent 21% 29%, oklch(99% 0.025 92 / 0.62) 29% 39%, transparent 39% 100%);
  opacity: 0.85;
}

.greed-coin {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: oklch(36% 0.1 66);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  background:
    linear-gradient(145deg, var(--toy-coin-lit), var(--toy-coin) 56%, var(--toy-coin-deep));
  border: 4px solid oklch(99% 0.035 92 / 0.86);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 10px 20px oklch(35% 0.1 66 / 0.24);
  animation: greedCoin 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
}

.greed-coin--one {
  left: 14%;
  top: 58%;
}

.greed-coin--two {
  left: 44%;
  top: 24%;
  width: 68px;
  height: 68px;
  font-size: 34px;
  animation-delay: 0.28s;
}

.greed-coin--three {
  right: 13%;
  top: 54%;
  animation-delay: 0.56s;
}

.greed-card {
  position: absolute;
  z-index: 2;
  top: 50px;
  display: grid;
  place-items: center;
  width: 100px;
  height: 128px;
  border-radius: 8px;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 92));
  border: 3px solid oklch(99% 0.025 92 / 0.86);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.85),
    0 13px 26px oklch(25% 0.055 218 / 0.24);
  animation: greedCard 3.2s ease-in-out infinite both;
}

.greed-card .svg-icon {
  width: 44px;
  height: 44px;
}

.greed-card--safe {
  left: 18%;
  color: var(--toy-safe);
  transform: rotate(-9deg);
}

.greed-card--risk {
  right: 18%;
  color: var(--toy-danger);
  transform: rotate(9deg);
  animation-delay: 0.34s;
}

.greed-stamp {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) rotate(-5deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 58px;
  padding: 8px 18px;
  border: 5px solid var(--toy-danger-deep);
  border-radius: 8px;
  color: var(--toy-danger-deep);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  background: oklch(99% 0.02 92 / 0.68);
  box-shadow: 0 12px 24px oklch(39% 0.13 30 / 0.18);
  animation: greedStamp 3.2s ease-in-out infinite both;
}

.welcome-copy {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.welcome-copy--tagline-only {
  margin-top: 2px;
}

/* F4 (Gemini fix): 直接調整 DOM 順序為 h1 → kicker → body，
   不再用 CSS order 屬性，screen reader 跟視覺一致 (h1 先讀)。
   kicker 跟在 hero+h1 之後作為 tagline。 */
.welcome-kicker { margin-top: 4px; }

.line-copy {
  display: grid;
  gap: 2px;
  max-width: 100%;
}

.line-copy > span {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.line-copy--center {
  justify-items: center;
  text-align: center;
}

.line-copy--left {
  justify-items: start;
  text-align: left;
}

.welcome-kicker {
  margin: 0;
  color: oklch(44% 0.12 70);
  /* F19: 13px 950fw 顆粒感太強訊息傳遞低 → 17px 750fw 可讀性大幅提升 */
  font-size: 17px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.welcome-kicker--choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.95em;
}

.welcome-kicker--verdict {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 364px);
  gap: clamp(9px, 3vw, 15px);
  padding: 10px clamp(12px, 3.8vw, 18px);
  border-top: 1px solid oklch(85% 0.13 84 / 0.72);
  border-bottom: 1px solid oklch(48% 0.12 34 / 0.28);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, oklch(99% 0.025 92 / 0.72) 16% 84%, transparent),
    linear-gradient(180deg, oklch(99% 0.022 92 / 0.34), oklch(84% 0.08 82 / 0.2));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.66),
    0 10px 24px oklch(41% 0.11 62 / 0.14);
  color: oklch(31% 0.09 62);
  font-size: clamp(20px, 5.6vw, 27px);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  isolation: isolate;
}

.welcome-kicker--verdict::before,
.welcome-kicker--verdict::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, oklch(73% 0.17 76 / 0.76), transparent);
  transform: translateY(-50%);
}

.welcome-kicker--verdict::before {
  left: -18px;
}

.welcome-kicker--verdict::after {
  right: -18px;
}

.welcome-kicker__strong {
  min-width: 0;
  font-family: var(--font-display);
  line-height: 1;
  text-shadow:
    0 1px 0 oklch(100% 0 0 / 0.86),
    0 8px 18px oklch(42% 0.1 55 / 0.2);
}

.welcome-kicker__strong--boom {
  color: oklch(47% 0.13 72);
}

.welcome-kicker__strong--bust {
  color: oklch(39% 0.13 31);
}

.welcome-kicker__pivot {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.54em;
  height: 2.54em;
  border: 1px solid oklch(80% 0.14 82 / 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, oklch(99% 0.04 92 / 0.98), transparent 0 22%),
    linear-gradient(145deg, oklch(93% 0.16 88), oklch(68% 0.16 68));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.72),
    inset 0 -6px 12px oklch(45% 0.13 55 / 0.18),
    0 8px 18px oklch(58% 0.15 72 / 0.22),
    0 0 18px oklch(82% 0.16 84 / 0.38);
  color: oklch(31% 0.12 58);
  font-size: 0.58em;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.welcome-kicker__pivot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid oklch(58% 0.14 66 / 0.42);
  border-radius: inherit;
  pointer-events: none;
}

.welcome-kicker__spark {
  display: inline-grid;
  place-items: center;
  color: var(--toy-coin-deep);
  font-size: 1.18em;
  line-height: 1;
  text-shadow:
    0 1px 0 oklch(99% 0.025 92 / 0.86),
    0 0 14px oklch(86% 0.17 84 / 0.62);
}

.welcome-copy h1 {
  margin: 0;
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: 66px;
  line-height: 0.9;
  letter-spacing: 0;
  text-shadow:
    0 3px 0 oklch(99% 0.03 92 / 0.94),
    0 12px 24px oklch(37% 0.09 66 / 0.24);
}

.welcome-body {
  max-width: 34rem;
  margin: 0;
  color: var(--toy-ink);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.52;
}

.home-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 2px solid oklch(72% 0.14 82 / 0.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92 / 0.84), oklch(92% 0.05 92 / 0.74));
  box-shadow:
    inset 0 2px 0 oklch(100% 0 0 / 0.7),
    0 5px 0 oklch(54% 0.09 76 / 0.16);
}

.home-progress__stat {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-progress__stat span,
.home-progress__meta {
  color: oklch(43% 0.1 70);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}

.home-progress__stat strong {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: clamp(18px, 4.8vw, 25px);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.home-progress__bar {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border: 1px solid oklch(54% 0.08 76 / 0.22);
  border-radius: 999px;
  background: oklch(85% 0.035 90 / 0.72);
}

.home-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(71% 0.15 78), oklch(78% 0.16 140));
}

.home-progress__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-progress__meta .mini-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

/* Wave 9: tap-to-toggle club explainer */
.home-progress__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.home-progress__toggle:focus-visible {
  outline: 2px solid rgba(255, 213, 122, 0.65);
  outline-offset: 4px;
  border-radius: 8px;
}

.home-progress__chev {
  font-size: 11px;
  opacity: 0.6;
  font-weight: 700;
  margin-left: 4px;
}

.home-progress__actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.club-explainer {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 213, 122, 0.22);
  color: rgba(255, 245, 215, 0.9);
  font-size: 12px;
  line-height: 1.5;
  animation: club-explainer-slide 220ms ease-out;
}

.club-explainer__defs {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
}

.club-explainer__defs dt {
  font-weight: 900;
  color: #ffe5a2;
  font-size: 13px;
}

.club-explainer__defs dd {
  margin: 0;
  color: rgba(255, 245, 215, 0.78);
}

.club-explainer__tiers-title {
  font-weight: 700;
  font-size: 12px;
  color: #ffe5a2;
  margin: 6px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.club-explainer__tiers {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.club-explainer__tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid transparent;
  opacity: 0.55;
  transition: opacity 160ms ease;
}

.club-explainer__tier.is-reached {
  opacity: 1;
  border-left-color: rgba(63, 191, 130, 0.85);
}

.club-explainer__tier.is-current {
  background: rgba(63, 191, 130, 0.16);
}

.club-explainer__tier.is-next {
  opacity: 1;
  border-left-color: rgba(255, 213, 122, 0.85);
  background: rgba(255, 213, 122, 0.10);
}

.club-explainer__tier-name {
  font-weight: 700;
  color: #fff5d7;
}

.club-explainer__tier-th {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  color: rgba(255, 245, 215, 0.7);
}

.club-explainer__tier-badge {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 245, 215, 0.78);
}

.club-explainer__tier.is-reached .club-explainer__tier-badge {
  color: rgb(186, 240, 200);
}

.club-explainer__tier.is-next .club-explainer__tier-badge {
  color: #ffe5a2;
}

.club-explainer__note {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(255, 245, 215, 0.62);
  font-style: italic;
}

@keyframes club-explainer-slide {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .club-explainer { animation: none; }
}

.season-badge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid oklch(62% 0.09 190 / 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(98% 0.02 92 / 0.78), oklch(90% 0.04 190 / 0.68));
  box-shadow:
    inset 0 2px 0 oklch(100% 0 0 / 0.66),
    0 5px 0 oklch(48% 0.08 190 / 0.12);
}

.season-badge--active {
  border-color: oklch(72% 0.15 54 / 0.66);
  background:
    radial-gradient(circle at 94% 12%, oklch(76% 0.16 54 / 0.26), transparent 44%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.07 60));
}

.season-badge__code,
.season-card__code,
.store-card__code {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  border-radius: 8px;
  color: oklch(38% 0.1 66);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 950;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.88),
    0 4px 0 oklch(55% 0.12 63 / 0.2);
}

.season-badge strong,
.season-card strong,
.store-card strong {
  display: block;
  color: var(--toy-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}

.season-badge small,
.season-card small,
.store-card small {
  display: block;
  margin-top: 3px;
  color: var(--toy-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

/* F5: welcome actions — main start CTA first, quick start second, tutorials third. */
.welcome-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 開始遊戲 = 最明顯的長方形主鈕；其餘三個並排成正方形 */
.welcome-actions__start {
  min-height: 62px;
  font-size: 18px;
}
.welcome-actions__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.welcome-actions__sq {
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 0;
  gap: 7px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.welcome-actions__sq .svg-icon {
  width: 27px;
  height: 27px;
  font-size: 27px;
}

.welcome-actions .primary-button {
  order: 1;
  min-height: 60px;
  font-size: 18px;
  font-weight: 900;
}

.welcome-actions__start,
.welcome-actions__quick,
.welcome-actions__tutorial {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.15;
}

.welcome-actions__start {
  order: 0 !important;
  min-height: 76px !important;
  padding-block: 14px;
  font-size: 20px !important;
}

.welcome-actions__quick {
  order: 1 !important;
  min-height: 58px !important;
  padding-block: 11px;
}

.welcome-actions__tutorial {
  order: 2 !important;
  min-height: 54px !important;
  padding-block: 10px;
}

.welcome-actions__start small,
.welcome-actions__quick small,
.welcome-actions__tutorial small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.78;
  letter-spacing: 0.04em;
}

.welcome-actions__start small { opacity: 0.86; }

.welcome-actions .ghost-button {
  min-height: 44px;
  font-size: 14px;
  opacity: 0.88;
}

.welcome-secondary-actions {
  order: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.welcome-secondary-actions:empty {
  display: none;
}

.welcome-secondary-actions .ghost-button {
  min-width: 0;
  padding-inline: 10px;
  font-size: 13px;
}

.setup-panel--mode {
  padding: 18px;
}

.play-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
}

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

.play-mode-card {
  appearance: none;
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 16px;
  border: 2px solid oklch(69% 0.11 84 / 0.48);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.86),
    0 5px 0 oklch(55% 0.1 84 / 0.18),
    0 16px 28px var(--toy-shadow);
  cursor: pointer;
  text-align: left;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.play-mode-card:hover,
.play-mode-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--toy-coin-deep);
  outline: none;
}

.play-mode-card:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px oklch(25% 0.055 218 / 0.16);
}

.play-mode-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  color: oklch(37% 0.11 66);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 4px 0 oklch(55% 0.12 63 / 0.26);
}

.play-mode-card__icon .svg-icon {
  width: 28px;
  height: 28px;
}

.play-mode-card strong {
  color: var(--toy-ink);
  font-size: 23px;
  line-height: 1.1;
}

.play-mode-card__copy {
  display: block;
  color: var(--toy-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.play-mode-card--online {
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(89% 0.05 190));
}

.play-mode-card--standard {
  background:
    radial-gradient(circle at 84% 14%, oklch(95% 0.13 84 / 0.42), transparent 36%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.09 84));
  border-color: oklch(74% 0.16 84 / 0.66);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.92),
    0 5px 0 oklch(58% 0.12 84 / 0.24),
    0 16px 28px var(--toy-shadow);
}

.play-mode-card--standard .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(94% 0.1 84), oklch(73% 0.15 76));
  color: oklch(99% 0.02 92);
}

.play-mode-card--standard strong::after {
  content: " ★";
  color: oklch(54% 0.14 76);
}

.play-mode-card--matchmaking {
  background:
    radial-gradient(circle at 84% 14%, oklch(86% 0.12 190 / 0.36), transparent 36%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(88% 0.055 190));
}

.play-mode-card--host {
  background:
    radial-gradient(circle at 84% 14%, oklch(92% 0.12 84 / 0.42), transparent 36%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.07 84));
}

.play-mode-card--matchmaking .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(89% 0.1 190), oklch(66% 0.13 200));
  color: oklch(99% 0.02 92);
}

.play-mode-card--local {
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.055 118));
}

.play-mode-card--async {
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.05 306));
}

.play-mode-card--async .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(91% 0.1 306), oklch(72% 0.13 302));
  color: oklch(99% 0.02 92);
}

.play-mode-card--tutorial-basic {
  background:
    radial-gradient(circle at 82% 16%, oklch(99% 0.03 92 / 0.82), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.065 92));
}

.play-mode-card--tutorial-advanced {
  background:
    radial-gradient(circle at 82% 16%, oklch(99% 0.03 92 / 0.72), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(89% 0.055 232));
}

.play-mode-card--tutorial-advanced .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(91% 0.08 232), oklch(69% 0.11 232));
  color: oklch(99% 0.02 92);
}

.play-mode-card--tutorial-roles {
  background:
    radial-gradient(circle at 82% 16%, oklch(96% 0.08 145 / 0.58), transparent 32%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(89% 0.055 145));
}

.play-mode-card--tutorial-roles .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(88% 0.12 145), oklch(62% 0.15 150));
  color: oklch(99% 0.02 92);
}

.play-mode-card--tutorial-variants {
  background:
    radial-gradient(circle at 82% 16%, oklch(96% 0.11 31 / 0.5), transparent 32%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.055 31));
}

.play-mode-card--tutorial-variants .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(84% 0.14 42), oklch(62% 0.16 31));
  color: oklch(99% 0.02 92);
}

/* A3 (v172): CDS tutorial card mirrors the variants visual treatment but with a
   warmer/redder accent to flag the wagering theme. */
.play-mode-card--tutorial-cds {
  background:
    radial-gradient(circle at 82% 16%, oklch(96% 0.14 18 / 0.5), transparent 32%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.07 18));
}

.play-mode-card--tutorial-cds .play-mode-card__icon {
  background: linear-gradient(180deg, oklch(80% 0.17 22), oklch(58% 0.18 16));
  color: oklch(99% 0.02 92);
}

.setup-flow {
  border: 2px solid oklch(69% 0.11 84 / 0.38);
  background:
    radial-gradient(circle at 86% 16%, oklch(86% 0.13 84 / 0.28), transparent 34%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.88),
    0 5px 0 oklch(55% 0.1 84 / 0.14);
}

.setup-flow__step {
  border-color: oklch(69% 0.07 84 / 0.22);
  color: oklch(43% 0.045 218);
  background: oklch(99% 0.018 92 / 0.5);
}

.setup-flow__step span {
  background: oklch(90% 0.035 92);
  color: oklch(43% 0.045 218);
}

.setup-flow__step.is-done {
  border-color: oklch(64% 0.15 145 / 0.48);
  color: oklch(34% 0.11 145);
  background: oklch(91% 0.055 145 / 0.64);
}

.setup-flow__step.is-done span {
  background: linear-gradient(180deg, oklch(82% 0.15 145), oklch(61% 0.16 145));
  color: oklch(98% 0.025 92);
}

.setup-flow__step.is-current {
  border-color: var(--toy-coin-deep);
  color: oklch(31% 0.085 66);
  background:
    radial-gradient(circle at 86% 16%, oklch(96% 0.1 92 / 0.72), transparent 38%),
    linear-gradient(180deg, oklch(98% 0.055 92), oklch(88% 0.12 84));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.88),
    0 0 0 3px oklch(84% 0.14 84 / 0.16);
}

.setup-flow__step.is-current span {
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin) 54%, var(--toy-coin-deep));
  color: oklch(29% 0.075 66);
}

.setup-step-title {
  color: var(--toy-ink);
  text-shadow: 0 2px 0 oklch(99% 0.025 92 / 0.86);
}

.setup-step-card {
  border: 2px solid oklch(69% 0.11 84 / 0.38);
  background:
    radial-gradient(circle at 88% 12%, oklch(86% 0.13 84 / 0.3), transparent 34%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.88),
    0 5px 0 oklch(55% 0.1 84 / 0.14),
    0 12px 22px var(--toy-shadow);
}

.setup-step-card__eyebrow {
  border-color: oklch(78% 0.13 84 / 0.55);
  color: oklch(38% 0.1 66);
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  box-shadow: inset 0 1px 0 oklch(99% 0.03 92 / 0.88);
}

.setup-step-card h3 {
  color: var(--toy-ink);
}

.setup-step-card p {
  color: var(--toy-muted);
  font-weight: 680;
}

.setup-mode-note {
  border-color: oklch(64% 0.14 190 / 0.36);
  background:
    radial-gradient(circle at 90% 14%, oklch(86% 0.11 190 / 0.36), transparent 36%),
    linear-gradient(180deg, oklch(98% 0.025 92), oklch(89% 0.05 190));
  box-shadow: inset 0 1px 0 oklch(99% 0.02 92 / 0.86);
}

.setup-mode-note strong {
  color: oklch(28% 0.08 190);
}

.setup-mode-note span {
  color: var(--toy-muted);
  font-weight: 740;
}

.setup-panel--season,
.setup-panel--store {
  display: grid;
  gap: 14px;
  width: min(680px, 100%);
  padding: 18px;
  border: 2px solid oklch(72% 0.13 84 / 0.72);
  background:
    linear-gradient(180deg, oklch(99% 0.022 92), oklch(92% 0.055 92));
}

.season-grid,
.store-grid {
  display: grid;
  gap: 10px;
}

.season-card {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid oklch(64% 0.1 84 / 0.4);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.045 92));
  text-align: left;
  cursor: pointer;
}

.season-card.is-selected {
  border-color: oklch(72% 0.15 84 / 0.8);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 0 0 4px oklch(78% 0.15 84 / 0.18),
    0 6px 0 oklch(54% 0.09 76 / 0.16);
}

.store-guardrail {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 2px solid oklch(66% 0.13 145 / 0.52);
  border-radius: 8px;
  background: linear-gradient(180deg, oklch(96% 0.04 145 / 0.82), oklch(88% 0.06 145 / 0.72));
  color: var(--toy-ink);
}

.store-guardrail strong {
  font-size: 15px;
  font-weight: 950;
}

.store-guardrail span {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.store-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid oklch(63% 0.09 230 / 0.36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(90% 0.05 230));
}

.online-start,
.local-start {
  display: grid;
  gap: 12px;
}

.online-entry,
.online-matchmaking-setup {
  display: grid;
  gap: 12px;
}

.online-entry__intro {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 2px solid oklch(64% 0.14 190 / 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 12%, oklch(86% 0.11 190 / 0.32), transparent 36%),
    linear-gradient(180deg, oklch(98% 0.025 92), oklch(89% 0.05 190));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.86),
    0 5px 0 oklch(48% 0.08 190 / 0.12);
}

.online-entry__intro span {
  color: oklch(33% 0.09 190);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.online-entry__intro h3 {
  margin: 0;
  color: var(--toy-ink);
  font-size: 22px;
  line-height: 1.12;
}

.online-entry__intro p {
  margin: 0;
  color: var(--toy-muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
}

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

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

@keyframes greedCoin {
  0% { opacity: 0; transform: translateY(44px) rotate(-18deg) scale(0.78); }
  20% { opacity: 1; transform: translateY(-10px) rotate(8deg) scale(1.08); }
  50% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  72% { opacity: 1; transform: translateY(-3px) rotate(8deg) scale(1.04); }
  100% { opacity: 0; transform: translateY(-54px) rotate(28deg) scale(0.86); }
}

@keyframes greedCard {
  0%, 100% { filter: saturate(0.92); }
  22%, 54% { filter: saturate(1.08); }
  68% { filter: saturate(1.35); }
}

@keyframes greedStamp {
  0%, 54% { opacity: 0; transform: translateX(-50%) rotate(-5deg) scale(1.28); }
  64% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(0.94); }
  74%, 92% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) rotate(-5deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .greed-coin,
  .greed-card,
  .greed-stamp {
    animation: none;
  }

  .greed-coin,
  .greed-stamp {
    opacity: 1;
  }
}

@media (max-width: 620px) {
  .setup-backdrop--welcome {
    align-items: start;
    padding: 10px;
  }

  .setup-panel--welcome,
  .setup-panel--mode {
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }

  .greed-stage {
    /* v189 F3: vh fallback first for iOS Safari < 15.4 (dvh unsupported →
       whole clamp() drops). dvh override second wins on modern browsers. */
    min-height: clamp(132px, 25vh, 188px);
    min-height: clamp(132px, 25dvh, 188px);
  }

  .greed-card {
    top: 44px;
    width: 82px;
    height: 108px;
  }

  .greed-card--safe {
    left: 12%;
  }

  .greed-card--risk {
    right: 12%;
  }

  .greed-coin {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .greed-coin--two {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }

  .greed-stamp {
    bottom: 28px;
    min-width: 176px;
    min-height: 50px;
    font-size: 23px;
    border-width: 4px;
  }

  .welcome-copy h1 {
    font-size: clamp(44px, 17vw, 58px);
  }

  .welcome-body {
    font-size: 14px;
  }

  .welcome-actions {
    position: sticky;
    bottom: -2px;
    margin: 0 -4px -4px;
    padding: 8px 4px 4px;
    background: linear-gradient(180deg, transparent, oklch(92% 0.055 92) 28%);
    z-index: 2;
  }

	  .welcome-actions,
	  .welcome-secondary-actions,
	  .play-mode-grid,
	  .setup-grid--online {
	    grid-template-columns: 1fr;
	  }

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

	  .play-mode-grid--tutorial .play-mode-card {
	    min-height: 120px;
	    padding: 10px;
	    gap: 6px;
	  }

	  .play-mode-grid--tutorial .play-mode-card strong {
	    font-size: 13px;
	  }

	  .play-mode-grid--tutorial .play-mode-card__icon {
	    width: 32px;
	    height: 32px;
	  }

	  .play-mode-grid--tutorial .play-mode-card__icon .svg-icon {
	    width: 20px;
	    height: 20px;
	  }

	  .ruleset-toggle,
	  .class-picker,
	  .class-picker--compact {
	    grid-template-columns: 1fr;
	  }

  /* F13: 電腦 toggle 跟 avatar picker「頭像」label 各佔一行視覺斷裂
     在 mobile 把 toggle chip-ify 放右上、識別行內，隱藏 redundant 頭像 label */
  .setup-player {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setup-player__identity {
    grid-column: 1;
  }

  /* Mobile P1: keep setup toggles at iOS/Android comfortable tap size. */
  .setup-player .toggle {
    grid-column: 2;
    align-self: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 6px 10px;
    background: oklch(99% 0.02 92 / 0.5);
    border-radius: 999px;
    border: 1px solid oklch(72% 0.08 84 / 0.32);
  }

  .setup-player .avatar-picker {
    grid-column: 1 / -1;
  }

  .setup-player .avatar-picker__label {
    display: none;
  }

  /* F12: 「換頭像」按鈕折疊 picker 預設不展開，省 70% 垂直 */
  .setup-player .setup-player__change-avatar {
    grid-column: 1 / -1;
    min-height: 44px;
    font-size: 12px;
    padding: 6px 12px;
    align-self: start;
    opacity: 0.78;
  }

  .room-code-entry,
  .room-code--with-actions {
    grid-template-columns: 1fr;
  }

  .room-code-entry {
    gap: 8px;
  }

  .room-invite-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-code-entry .room-invite-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .room-code-entry .room-invite-actions .ghost-button {
    width: 100%;
    padding-inline: 9px;
  }

  .play-mode-card {
    min-height: 146px;
  }

  .setup-panel > .section-title--flow .mini-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .setup-panel > .section-title--flow h2 {
    grid-column: 2;
    grid-row: 1;
  }

  .setup-panel > .section-title--flow .language-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}

.setup-control input {
  background: oklch(99% 0.015 92 / 0.86);
  border-color: oklch(65% 0.055 218 / 0.32);
  color: var(--toy-ink);
}

.log-toggle {
  color: var(--toy-ink);
}

.log-toggle:hover,
.log-toggle:focus-visible {
  background: oklch(91% 0.06 92 / 0.65);
}

.log-list li {
  border-bottom-color: oklch(66% 0.055 218 / 0.12);
}

.winner {
  background: oklch(92% 0.075 145);
  border-color: oklch(60% 0.16 145 / 0.5);
}

.winner strong {
  color: oklch(43% 0.15 145);
}

.leave-preview .leave-preview__red-zone,
.leave-preview__lose {
  background: linear-gradient(135deg, oklch(96% 0.06 48), oklch(88% 0.1 38));
  border-color: oklch(65% 0.2 31 / 0.62) !important;
  box-shadow: 0 10px 20px oklch(45% 0.14 31 / 0.18);
}

.leave-preview .leave-preview__red-zone .red-zone__bar {
  background: oklch(92% 0.035 50);
}

.leave-preview .leave-preview__red-zone .red-zone__fill {
  background: linear-gradient(90deg, oklch(82% 0.12 42), var(--toy-danger), var(--toy-danger-deep));
}

.leave-preview .leave-preview__red-zone .red-zone__label,
.leave-preview .leave-preview__red-zone .red-zone__label strong,
.leave-preview__lose span,
.leave-preview__lose strong {
  color: var(--toy-danger-deep) !important;
  text-shadow: none;
}

.app--frame-mine::before {
  border-width: 4px;
  border-color: oklch(66% 0.16 230);
  box-shadow: inset 0 0 22px oklch(66% 0.16 230 / 0.24);
}

.app--frame-retreated::before {
  border-color: var(--toy-coin);
  box-shadow: inset 0 0 22px oklch(86% 0.17 84 / 0.28);
}

.app--frame-end::before {
  border-color: var(--toy-danger);
  box-shadow: inset 0 0 24px oklch(65% 0.2 31 / 0.28);
}

.app--tension-low::after {
  background: linear-gradient(180deg, transparent 0%, oklch(65% 0.2 31 / 0.12) 100%);
}

.app--tension-mid::after {
  background: linear-gradient(180deg, transparent 0%, oklch(65% 0.2 31 / 0.24) 100%);
}

.app--tension-high::after {
  background: linear-gradient(180deg, transparent 0%, oklch(65% 0.2 31 / 0.36) 100%);
}

.treasure-burst__dim {
  background:
    linear-gradient(180deg, oklch(83% 0.13 220 / 0.9), oklch(92% 0.12 92 / 0.88));
}

.treasure-burst__glitch,
.treasure-burst__scan {
  display: none;
}

.treasure-burst__ticker {
  background: linear-gradient(90deg, var(--toy-coin-deep), var(--toy-coin), var(--toy-coin-deep));
  box-shadow: 0 8px 16px oklch(38% 0.1 66 / 0.25);
}

.treasure-burst__ticker-text {
  color: oklch(22% 0.055 66);
}

.treasure-burst__label-top,
.treasure-burst__big,
.treasure-burst__label {
  color: oklch(43% 0.13 70);
  letter-spacing: 0;
  text-shadow:
    0 2px 0 oklch(99% 0.025 92 / 0.95),
    0 12px 24px oklch(42% 0.13 66 / 0.3);
}

.treasure-burst__stack::before,
.treasure-burst__stack::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, var(--toy-coin-lit), var(--toy-coin) 54%, var(--toy-coin-deep));
  border: 4px solid oklch(98% 0.06 92 / 0.85);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.8),
    0 10px 18px oklch(38% 0.1 66 / 0.25);
  pointer-events: none;
}

.treasure-burst__stack::before {
  left: max(2vw, -42px);
  top: 16%;
  animation: toyCoinBob 1.6s ease-out 0.08s both;
}

.treasure-burst__stack::after {
  right: max(2vw, -42px);
  bottom: 8%;
  animation: toyCoinBob 1.6s ease-out 0.18s both reverse;
}

@keyframes toyCoinBob {
  0%   { opacity: 0; transform: translateY(40px) rotate(-20deg) scale(0.7); }
  40%  { opacity: 1; transform: translateY(-12px) rotate(8deg) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

.hazard-burst__dim {
  background:
    linear-gradient(180deg, oklch(94% 0.08 50 / 0.94), oklch(66% 0.2 31 / 0.9));
}

.hazard-burst.hazard-burst--market-risk {
  z-index: 112;
  color: oklch(95% 0.055 90);
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__dim {
  background:
    radial-gradient(circle at 50% 48%, oklch(62% 0.18 31 / 0.30), transparent 31%),
    radial-gradient(circle at 52% 24%, oklch(78% 0.16 84 / 0.18), transparent 34%),
    linear-gradient(180deg, oklch(6% 0.025 242 / 0.92), oklch(12% 0.055 26 / 0.92));
  -webkit-backdrop-filter: blur(6px) saturate(1.18);
  backdrop-filter: blur(6px) saturate(1.18);
  animation: marketRiskWash 2.5s ease-out both;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__scanlines {
  opacity: 0.24;
  background: repeating-linear-gradient(0deg, transparent 0 9px, oklch(92% 0.12 84 / 0.11) 10px 11px);
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__ticker {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  width: 100%;
  padding: 7px 0;
  color: oklch(92% 0.13 84);
  background:
    linear-gradient(90deg, oklch(16% 0.06 26 / 0.28), oklch(30% 0.12 30 / 0.86), oklch(16% 0.06 26 / 0.28));
  border-block: 1px solid oklch(82% 0.14 84 / 0.34);
  box-shadow: 0 9px 26px oklch(4% 0.02 242 / 0.5);
  text-shadow: 0 0 10px oklch(76% 0.18 31 / 0.58);
  animation: marketRiskTicker 2.45s linear forwards;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__stack {
  width: min(86vw, 440px);
  gap: 9px;
  padding: 16px 18px 15px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 12%, oklch(78% 0.15 84 / 0.18), transparent 29%),
    radial-gradient(circle at 72% 40%, oklch(56% 0.18 31 / 0.18), transparent 42%),
    linear-gradient(180deg, oklch(13% 0.04 242 / 0.98), oklch(7% 0.03 242 / 0.98));
  border: 2px solid oklch(78% 0.14 84 / 0.70);
  box-shadow:
    0 26px 60px oklch(4% 0.02 242 / 0.72),
    0 0 0 1px oklch(92% 0.12 84 / 0.18),
    0 0 34px oklch(64% 0.2 31 / 0.22),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.18);
  overflow: hidden;
}

.hazard-burst.hazard-burst--market-risk.is-active .hazard-burst__stack {
  animation: marketRiskPanelIn 760ms cubic-bezier(0.16, 1.25, 0.3, 1) both;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__stack::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid oklch(82% 0.14 84 / 0.26);
  border-radius: 9px;
  pointer-events: none;
}

.hazard-burst__stamp {
  position: relative;
  z-index: 1;
  transform: rotate(-5deg);
  padding: 5px 10px 6px;
  border: 1.5px solid oklch(84% 0.14 84 / 0.72);
  border-radius: 5px;
  color: oklch(96% 0.055 90);
  background: linear-gradient(180deg, oklch(30% 0.13 30 / 0.92), oklch(18% 0.08 26 / 0.94));
  font: 950 clamp(15px, 4vmin, 24px)/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow:
    0 0 18px oklch(64% 0.2 31 / 0.24),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.16);
  animation: marketRiskStamp 640ms cubic-bezier(0.16, 1.35, 0.3, 1) 160ms both;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__icon {
  color: oklch(86% 0.15 84);
  font-size: clamp(72px, 20vmin, 128px);
  filter:
    drop-shadow(0 0 20px oklch(76% 0.15 84 / 0.30))
    drop-shadow(0 5px 0 oklch(5% 0.02 242 / 0.46));
  animation: marketRiskIcon 780ms cubic-bezier(0.16, 1.25, 0.3, 1) 220ms both;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__icon .svg-icon svg {
  stroke: currentColor;
  fill: oklch(62% 0.18 31 / 0.22);
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__name {
  color: oklch(97% 0.07 88);
  font-size: clamp(31px, 8vmin, 58px);
  letter-spacing: 0.03em;
  text-shadow:
    0 2px 0 oklch(5% 0.02 242 / 0.74),
    0 0 20px oklch(70% 0.18 31 / 0.36);
  filter: none;
  animation: marketRiskName 720ms cubic-bezier(0.16, 1.25, 0.3, 1) 280ms both;
}

.hazard-burst__rule {
  position: relative;
  z-index: 1;
  color: oklch(91% 0.13 84);
  font: 900 clamp(13px, 3.2vmin, 18px)/1.1 var(--font-display);
}

.hazard-burst__ledger {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  width: min(100%, 360px);
  margin-top: 2px;
}

.hazard-burst__ledger span {
  display: block;
  padding: 5px 9px;
  border-radius: 7px;
  color: oklch(96% 0.06 90);
  background: linear-gradient(90deg, oklch(27% 0.12 30 / 0.72), oklch(9% 0.03 242 / 0.78));
  border: 1px solid oklch(78% 0.13 84 / 0.34);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  animation: marketRiskLedger 360ms ease-out calc(180ms + var(--i, 0) * 70ms) both;
}

.hazard-burst.hazard-burst--market-risk .hazard-burst__label {
  color: oklch(82% 0.11 84 / 0.82);
  font-size: clamp(12px, 3vmin, 15px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-shadow: none;
  animation: marketRiskName 600ms ease-out 640ms both;
}

@keyframes marketRiskWash {
  0%   { opacity: 0; filter: saturate(1.4); }
  12%  { opacity: 1; filter: saturate(1.18); }
  100% { opacity: 1; filter: saturate(1); }
}

@keyframes marketRiskTicker {
  0%   { transform: translateX(45%); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(-45%); opacity: 1; }
}

@keyframes marketRiskStamp {
  0%   { opacity: 0; transform: rotate(-12deg) translateY(-22px) scale(1.35); }
  58%  { opacity: 1; transform: rotate(-5deg) translateY(3px) scale(0.94); }
  100% { opacity: 1; transform: rotate(-5deg) translateY(0) scale(1); }
}

@keyframes marketRiskPanelIn {
  0%   { opacity: 0; transform: translateY(24px) scale(0.88); }
  62%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes marketRiskIcon {
  0%   { opacity: 0; transform: translateY(20px) scale(0.78); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes marketRiskName {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes marketRiskLedger {
  0%   { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: translateX(0); }
}

.cashout-banner {
  background:
    radial-gradient(circle at 16% 18%, oklch(100% 0 0 / 0.86), transparent 24%),
    linear-gradient(180deg, oklch(99% 0.035 92), oklch(88% 0.11 84));
  border-color: var(--accent, var(--toy-coin));
  box-shadow:
    0 22px 46px var(--toy-shadow),
    0 7px 0 oklch(55% 0.1 84 / 0.22),
    0 0 0 5px oklch(92% 0.13 84 / 0.22);
}

.cashout-banner__label {
  color: oklch(39% 0.08 66 / 0.62);
}

.cashout-banner__name {
  color: oklch(24% 0.07 66);
  text-shadow: none;
  filter: none;
}

.cashout-banner__amount {
  background: linear-gradient(180deg, oklch(99% 0.06 92), var(--accent, var(--toy-coin)), oklch(54% 0.13 66));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 oklch(41% 0.08 62 / 0.26));
}

.cashout-banner__action {
  color: var(--toy-muted);
  letter-spacing: 0;
}

.cashout-banner__avatar {
  background: oklch(99% 0.025 92);
}

.cashout-choice-burst__wash {
  background:
    radial-gradient(circle at 50% 48%, oklch(90% 0.14 84 / 0.34), transparent 30%),
    linear-gradient(180deg, oklch(22% 0.04 66 / 0.02), oklch(22% 0.04 66 / 0.24));
}

.cashout-choice-burst__panel {
  background:
    radial-gradient(circle at 16% 18%, oklch(100% 0 0 / 0.86), transparent 24%),
    linear-gradient(180deg, oklch(99% 0.035 92), oklch(88% 0.11 84));
  border-color: var(--accent, var(--toy-coin));
  color: oklch(24% 0.07 66);
  box-shadow:
    0 26px 54px var(--toy-shadow),
    0 8px 0 oklch(55% 0.1 84 / 0.22),
    0 0 0 6px oklch(92% 0.13 84 / 0.22);
}

.cashout-choice-burst__kicker {
  color: oklch(39% 0.08 66 / 0.62);
}

.cashout-choice-burst__copy strong {
  color: oklch(24% 0.07 66);
  text-shadow: none;
}

.cashout-choice-burst__copy em {
  color: var(--toy-muted);
}

.cashout-choice-burst__stamp {
  background: oklch(90% 0.09 145 / 0.58);
  border-color: oklch(52% 0.15 145 / 0.76);
  color: oklch(32% 0.12 145);
  box-shadow: 0 3px 0 oklch(52% 0.15 145 / 0.22);
}

.cashout-choice-burst__avatar {
  background: oklch(99% 0.025 92);
}

.money-time {
  color: oklch(94% 0.04 92);
}

.money-time__flash {
  background: oklch(86% 0.14 84 / 0.1);
}

.money-time__dim {
  background:
    radial-gradient(circle at 50% 38%, oklch(80% 0.14 84 / 0.18), transparent 36%),
    linear-gradient(180deg, oklch(10% 0.035 242 / 0.78), oklch(5% 0.025 242 / 0.9));
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
}

.money-time__scan::before {
  background: linear-gradient(90deg, transparent, oklch(86% 0.14 84) 20%, oklch(86% 0.14 84) 80%, transparent);
  opacity: 0.42;
}

.money-time__ticker-row {
  border-radius: 999px;
  background: linear-gradient(180deg, oklch(34% 0.07 150), oklch(16% 0.04 242));
  border: 1px solid oklch(76% 0.12 84 / 0.24);
  box-shadow: 0 5px 14px oklch(5% 0.025 242 / 0.32);
}

.money-time__ticker-row span {
  color: oklch(91% 0.09 146);
  font-weight: 900;
}

.money-time__stack {
  gap: 10px;
  width: min(92vw, 520px);
  padding: 22px 24px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 12%, oklch(92% 0.12 84 / 0.2), transparent 28%),
    linear-gradient(180deg, oklch(18% 0.04 242 / 0.96), oklch(8% 0.03 242 / 0.98));
  border: 2px solid oklch(76% 0.13 84 / 0.62);
  box-shadow:
    0 28px 64px oklch(5% 0.025 242 / 0.72),
    0 0 0 1px oklch(98% 0.04 92 / 0.1),
    inset 0 2px 0 oklch(98% 0.04 92 / 0.14);
}

.money-time__stack::before,
.money-time__stack::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(76% 0.13 84 / 0.76), transparent);
  box-shadow: 0 0 14px oklch(76% 0.13 84 / 0.28);
}

.money-time__stack::before {
  top: 14px;
  animation: none;
}

.money-time__stack::after {
  bottom: 14px;
  animation: none;
}

.money-time__sub {
  color: oklch(78% 0.1 84 / 0.82);
  font-family: var(--font-mono);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.money-time__title {
  color: transparent;
  background: linear-gradient(180deg, oklch(99% 0.055 92), oklch(82% 0.14 84), oklch(56% 0.12 74));
  -webkit-background-clip: text;
  background-clip: text;
  max-width: 100%;
  font-size: clamp(38px, 10.5vmin, 82px);
  font-weight: 950;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: none;
  filter: drop-shadow(0 4px 0 oklch(5% 0.025 242 / 0.56));
  animation: moneyTimePayout 900ms cubic-bezier(0.16, 1.25, 0.3, 1) 120ms both;
}

.money-time__player {
  color: var(--player-accent, oklch(92% 0.04 92));
  font-family: var(--font-display);
  font-weight: 950;
  letter-spacing: 0.03em;
  text-shadow: 0 0 16px color-mix(in srgb, currentColor 40%, transparent);
}

.money-time__hint {
  color: oklch(82% 0.06 92 / 0.78);
  font-family: var(--font-display);
  font-weight: 850;
  letter-spacing: 0.02em;
}

@keyframes moneyTimePayout {
  0%   { opacity: 0; transform: translateY(16px) scale(0.86); }
  58%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.streak-badge--treasure,
.streak-badge--survivor {
  color: oklch(22% 0.055 66);
  box-shadow:
    0 12px 24px var(--toy-shadow),
    0 4px 0 oklch(55% 0.12 63 / 0.36);
}

@media (prefers-reduced-motion: reduce) {
  .treasure-burst__stack::before,
  .treasure-burst__stack::after { animation: none; opacity: 1; }
}

.ftue-modal__backdrop {
  background:
    linear-gradient(180deg, oklch(24% 0.055 218 / 0.36), oklch(18% 0.04 150 / 0.42));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.ftue-modal__panel {
  gap: 16px;
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(92% 0.045 92));
  border: 2px solid oklch(70% 0.13 84 / 0.72);
  border-radius: 8px;
  box-shadow:
    0 26px 50px var(--toy-shadow),
    0 6px 0 oklch(55% 0.11 84 / 0.3);
}

.ftue-modal__dot {
  background: oklch(72% 0.06 218 / 0.26);
}

.ftue-modal__dot.is-done {
  background: oklch(74% 0.12 84 / 0.6);
}

.ftue-modal__dot.is-active {
  background: var(--toy-coin);
  box-shadow: 0 0 0 2px oklch(99% 0.02 92), 0 4px 10px oklch(50% 0.12 70 / 0.24);
}

.ftue-modal__icon {
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(89% 0.04 92));
  border-color: oklch(66% 0.08 84 / 0.42);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
    0 10px 20px var(--toy-shadow);
}

.ftue-modal__icon--treasure,
.ftue-modal__icon--cash {
  background: linear-gradient(180deg, oklch(96% 0.075 150), oklch(86% 0.1 150));
  border-color: oklch(62% 0.16 149 / 0.62);
  color: oklch(43% 0.15 149);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.75),
    0 10px 20px oklch(38% 0.12 149 / 0.2);
}

.ftue-modal__icon--hazard,
.ftue-modal__icon--crisis {
  background: linear-gradient(180deg, oklch(96% 0.06 48), oklch(86% 0.12 36));
  border-color: oklch(65% 0.2 31 / 0.62);
  color: var(--toy-danger-deep);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.7),
    0 10px 20px oklch(40% 0.14 31 / 0.2);
}

.ftue-modal__icon--choice {
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  border-color: oklch(72% 0.15 78 / 0.72);
  color: oklch(42% 0.1 70);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 10px 20px oklch(42% 0.12 66 / 0.2);
}

.ftue-modal__title {
  color: var(--toy-ink);
  letter-spacing: 0;
  text-shadow: 0 2px 0 oklch(99% 0.02 92 / 0.92);
}

.ftue-modal__body {
  color: oklch(25% 0.05 218);
  font-weight: 650;
}

.ftue-modal__body strong {
  color: oklch(38% 0.16 30);
  font-weight: 900;
}

.ftue-modal__step {
  color: var(--toy-muted);
  letter-spacing: 0;
}

.ftue-modal__practice-row {
  display: grid;
  margin-top: -4px;
}

.ftue-modal__practice-row .primary-button {
  width: 100%;
  min-height: 48px;
}

.ftue-modal__panel--trial {
  width: min(560px, 96vw);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 16px;
  text-align: left;
}

.ftue-trial__header {
  display: grid;
  gap: 6px;
  text-align: center;
}

.ftue-trial__header span {
  justify-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: oklch(42% 0.12 70);
  color: oklch(95% 0.04 84);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.ftue-trial__header h2,
.ftue-trial__header p {
  margin: 0;
}

.ftue-trial__header h2 {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.05;
}

.ftue-trial__header p {
  color: oklch(22% 0.05 218);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.42;
}

.ftue-trial {
  display: grid;
  gap: 10px;
}

.ftue-trial__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.ftue-trial__stats div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid oklch(40% 0.05 210 / 0.32);
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.8);
  text-align: center;
}

.ftue-trial__stats span {
  color: oklch(35% 0.05 215);
  font-size: 10px;
  font-weight: 950;
}

.ftue-trial__stats strong {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
}

.ftue-trial__path {
  display: flex;
  gap: 8px;
  min-height: 124px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}

.ftue-trial__deck-card,
.ftue-trial-card {
  flex: 0 0 106px;
  min-height: 118px;
  border-radius: 8px;
  scroll-snap-align: start;
}

.ftue-trial__deck-card {
  display: grid;
  place-items: center;
  gap: 5px;
  border: 2px dashed oklch(62% 0.08 218 / 0.42);
  background: oklch(99% 0.018 92 / 0.55);
  color: oklch(35% 0.05 215);
}

.ftue-trial__deck-card strong {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: 42px;
}

.ftue-trial__deck-card span {
  font-size: 12px;
  font-weight: 900;
}

.ftue-trial-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 5px;
  padding: 10px;
  border: 2px solid oklch(42% 0.07 210 / 0.72);
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 92));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.9),
    0 4px 0 oklch(35% 0.05 210 / 0.25);
  text-align: center;
}

.ftue-trial-card__symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto;
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.76);
}

.ftue-trial-card__symbol .svg-icon {
  width: 26px;
  height: 26px;
}

.ftue-trial-card strong {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
}

.ftue-trial-card span,
.ftue-trial-card small {
  color: oklch(34% 0.045 218);
  font-weight: 900;
  line-height: 1.15;
}

.ftue-trial-card small {
  color: oklch(35% 0.05 215);
  font-size: 11px;
}

.ftue-trial-card--cash .ftue-trial-card__symbol {
  color: oklch(45% 0.16 150);
}

.ftue-trial-card__symbol--cash {
  gap: 1px;
  align-content: center;
}

.ftue-trial-card__symbol--cash .svg-icon {
  width: 21px;
  height: 21px;
}

.ftue-trial-card__symbol-label {
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.ftue-trial-card--warn,
.ftue-trial-card--crash {
  border-color: oklch(65% 0.2 31 / 0.62);
  background: linear-gradient(180deg, oklch(98% 0.04 52), oklch(88% 0.1 38));
}

.ftue-trial-card--crash {
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.72),
    0 4px 0 oklch(42% 0.16 30 / 0.42),
    0 0 0 4px oklch(65% 0.2 31 / 0.12);
}

.ftue-trial__decision {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ftue-trial-choice {
  display: grid;
  gap: 2px;
  min-height: 58px;
  align-content: center;
  padding: 9px;
  border: 1px solid oklch(40% 0.05 210 / 0.32);
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.72);
  color: oklch(35% 0.05 215);
  opacity: 0.72;
  text-align: center;
}

.ftue-trial-choice.is-focus {
  opacity: 1;
  color: var(--toy-ink);
  border-color: oklch(74% 0.15 84 / 0.72);
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  box-shadow: 0 4px 0 oklch(54% 0.14 62 / 0.45);
}

.ftue-trial-choice strong {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.ftue-trial-choice span {
  font-size: 11px;
  font-weight: 900;
}

.ftue-trial__players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ftue-trial-player {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "avatar body"
    "avatar money";
  gap: 4px 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid oklch(40% 0.05 210 / 0.32);
  border-radius: 8px;
  background: oklch(99% 0.018 92 / 0.72);
}

.ftue-trial-player.is-you {
  border-color: oklch(48% 0.10 210 / 0.86);
  box-shadow: 0 0 0 3px oklch(52% 0.08 210 / 0.18);
}

.ftue-trial-player.is-out {
  background: oklch(93% 0.025 92 / 0.74);
}

.ftue-trial-player__avatar {
  grid-area: avatar;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 8px;
  background: oklch(99% 0.02 92);
}

.ftue-trial-player__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ftue-trial-player__body {
  grid-area: body;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.ftue-trial-player__body strong,
.ftue-trial-player__body span,
.ftue-trial-player__money span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ftue-trial-player__body strong {
  color: var(--toy-ink);
  font-size: 13px;
  font-weight: 950;
}

.ftue-trial-player__body span {
  color: oklch(35% 0.05 215);
  font-size: 11px;
  font-weight: 900;
}

.ftue-trial-player__money {
  grid-area: money;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ftue-trial-player__money span {
  padding: 3px 6px;
  border-radius: 999px;
  background: oklch(89% 0.05 150 / 0.62);
  color: oklch(35% 0.12 150);
  font-size: 10px;
  font-weight: 950;
}

.ftue-trial__footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

.ftue-trial__footer .primary-button,
.ftue-trial__footer .ghost-button {
  min-height: 48px;
}

@media (max-width: 520px) {
  .ftue-modal__panel--trial {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 14px;
  }

  .ftue-trial__header h2 {
    font-size: clamp(25px, 8vw, 34px);
  }

  .ftue-trial__stats {
    gap: 5px;
  }

  .ftue-trial__stats div {
    padding: 7px 4px;
  }

  .ftue-trial__stats span {
    font-size: 9px;
  }

  .ftue-trial__stats strong {
    font-size: 17px;
  }

  .ftue-trial__path {
    min-height: 116px;
  }

  .ftue-trial__deck-card,
  .ftue-trial-card {
    flex-basis: 98px;
    min-height: 110px;
  }

  .ftue-trial-card {
    padding: 8px;
  }

  .ftue-trial-card__symbol {
    width: 36px;
    height: 36px;
  }

  .ftue-trial-card strong {
    font-size: 25px;
  }

  .ftue-trial__footer {
    position: sticky;
    bottom: -14px;
    z-index: 4;
    grid-template-columns: minmax(86px, 0.42fr) minmax(0, 1fr);
    margin: 2px -14px -14px;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, oklch(94% 0.04 92 / 0.94) 18%, oklch(94% 0.04 92) 100%);
  }

  .ftue-trial__footer .ghost-button,
  .ftue-trial__footer .primary-button {
    min-width: 0;
    padding-inline: 10px;
    font-size: 14px;
  }
}

/* FTUE v2 — card system, hidden roles, variants, and reveal pacing */
.ftue-modal__panel--rich {
  width: min(560px, 96vw);
}

.ftue-mock--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ftue-card-system {
  min-width: 0;
  display: grid;
  gap: 5px;
  align-content: start;
  min-height: 112px;
  padding: 10px;
  border: 2px solid oklch(68% 0.1 84 / 0.45);
  border-radius: 8px;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(91% 0.04 92));
  color: var(--toy-ink);
  text-align: left;
  box-shadow: 0 4px 0 oklch(55% 0.09 84 / 0.18);
}

.ftue-card-system .svg-icon,
.ftue-card-system__back {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: oklch(40% 0.11 82);
}

.ftue-card-system__back {
  border-radius: 8px;
  background: oklch(23% 0.06 230);
  color: oklch(92% 0.12 84);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 950;
}

.ftue-card-system strong,
.ftue-card-system span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ftue-card-system strong {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.08;
}

.ftue-card-system span {
  color: var(--toy-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.ftue-card-system--cash { border-color: oklch(63% 0.16 150 / 0.55); }
.ftue-card-system--crisis { border-color: oklch(65% 0.2 31 / 0.55); }
.ftue-card-system--patent { border-color: oklch(68% 0.12 205 / 0.55); }
.ftue-card-system--private { border-color: oklch(62% 0.12 285 / 0.55); }
.ftue-card-system--bear { border-color: oklch(56% 0.2 304 / 0.62); }
.ftue-card-system--black-swan { border-color: oklch(40% 0.08 290 / 0.7); }

.ftue-card-system__back--bear {
  background: oklch(50% 0.2 304);
  color: oklch(98% 0.02 92);
}

.ftue-card-system__back--swan {
  background: oklch(15% 0.03 285);
  color: oklch(92% 0.04 290);
}

.ftue-mock--card-system-real {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.ftue-card-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.ftue-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 1 100px;
}
.ftue-card-col strong {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.2;
  color: var(--toy-ink);
  text-align: center;
}
.ftue-card-col span {
  font-size: 10px;
  font-weight: 800;
  color: var(--toy-muted);
  text-align: center;
  line-height: 1.2;
}
.ftue-mini-card {
  width: 76px;
  min-height: 92px;
  max-height: 108px;
  font-size: 10px;
  border-radius: 10px;
  pointer-events: none;
  overflow: hidden;
}
.ftue-mini-card .card__art {
  padding: 4px 0 2px;
}
.ftue-mini-card .card__art .card__symbol {
  width: 32px;
  height: 32px;
  font-size: 22px;
}
.ftue-mini-card .card__art .card__symbol .svg-icon {
  width: 24px;
  height: 24px;
}
.ftue-mini-card .card__footer {
  padding: 2px 4px 3px;
}
.ftue-mini-card .card__cash-title {
  font-size: 10px;
}
.ftue-mini-card .card__value {
  font-size: 12px;
}
.ftue-mini-card .card__note {
  font-size: 8px;
}
.ftue-mini-card .card__tag {
  font-size: 7px;
  padding: 1px 5px;
  top: 2px;
  right: 2px;
}
.ftue-mini-card .card__back-label {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 950;
  color: oklch(70% 0.08 84 / 0.6);
}
.ftue-mini-card.card--cash .card__art .cash-symbol {
  width: 36px;
  height: 36px;
}
.ftue-card-row--special .ftue-mini-card {
  min-height: 80px;
}

.ftue-mock--reveal,
.ftue-mock--class {
  grid-template-columns: minmax(126px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
}

.ftue-reveal-card,
.ftue-role-card {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 168px;
  border-radius: 8px;
  border: 3px solid oklch(78% 0.16 84);
  background:
    radial-gradient(circle at 50% 34%, oklch(96% 0.1 84 / 0.35), transparent 38%),
    linear-gradient(160deg, oklch(22% 0.06 230), oklch(14% 0.045 230));
  color: oklch(96% 0.08 92);
  box-shadow:
    0 0 0 6px oklch(82% 0.16 84 / 0.16),
    0 16px 30px var(--toy-shadow);
  text-align: center;
}

.ftue-reveal-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 6px;
  border: 1px solid oklch(88% 0.15 84 / 0.58);
  box-shadow: inset 0 0 24px oklch(86% 0.16 84 / 0.26);
}

.ftue-reveal-card strong,
.ftue-role-card strong {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
}

.ftue-reveal-card span,
.ftue-reveal-card em,
.ftue-role-card span,
.ftue-role-card em {
  font-size: 12px;
  font-weight: 950;
  font-style: normal;
}

.ftue-reveal-card em,
.ftue-role-card em {
  color: oklch(89% 0.13 84);
}

.ftue-reveal-steps,
.ftue-role-stack {
  display: grid;
  gap: 7px;
}

.ftue-reveal-steps span,
.ftue-role-stack span,
.ftue-variant-chip {
  display: grid;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid oklch(64% 0.09 84 / 0.34);
  background: oklch(99% 0.018 92 / 0.84);
  color: var(--toy-ink);
  font-size: 12px;
  font-weight: 900;
}

.ftue-private-card-guide {
  display: grid;
  grid-template-columns: minmax(88px, auto) 28px minmax(88px, auto);
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  width: 100%;
  padding: 8px 0 4px;
}

.ftue-private-card-guide .private-card-face,
.ftue-private-card-guide .private-card-face:not(.private-card-face--compact) {
  width: clamp(104px, 26vw, 120px);
  min-width: clamp(104px, 26vw, 120px);
}

.ftue-private-card-guide__slot {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.ftue-private-card-guide__slot > span {
  padding: 5px 8px;
  border: 1px solid oklch(70% 0.12 84 / 0.34);
  border-radius: 999px;
  background: oklch(18% 0.045 230 / 0.72);
  color: oklch(92% 0.08 92);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.ftue-private-card-guide__arrow {
  color: oklch(80% 0.14 84);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 950;
  text-shadow: 0 0 16px oklch(72% 0.14 84 / 0.56);
}

.ftue-private-card-guide__notes {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.ftue-private-card-guide__notes span {
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid oklch(65% 0.10 84 / 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, oklch(21% 0.055 230 / 0.92), oklch(13% 0.045 230 / 0.96));
  color: oklch(94% 0.06 92);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: inset 0 1px 0 oklch(98% 0.02 92 / 0.08);
}

.ftue-mock--variants {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ftue-mock--role-intro {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.ftue-role-intro-card {
  --role-glow: oklch(74% 0.13 84);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  min-height: 78px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid color-mix(in oklch, var(--role-glow) 56%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--role-glow) 30%, transparent), transparent 38%),
    linear-gradient(160deg, oklch(23% 0.06 230), oklch(14% 0.045 230));
  color: oklch(96% 0.07 92);
  text-align: left;
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.12),
    0 0 24px color-mix(in oklch, var(--role-glow) 20%, transparent),
    0 8px 18px var(--toy-shadow);
}

.ftue-role-intro-card::before {
  content: "";
  position: absolute;
  inset: -45% -80%;
  z-index: -1;
  background: linear-gradient(110deg, transparent 42%, oklch(99% 0.02 92 / 0.22) 50%, transparent 58%);
  transform: translateX(-35%) rotate(10deg);
  animation: ftueRoleSweep 2.8s ease-in-out infinite;
}

.ftue-role-intro-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--role-glow) 30%, transparent);
  box-shadow: inset 0 0 22px color-mix(in oklch, var(--role-glow) 16%, transparent);
}

.ftue-role-intro-card--intel { --role-glow: oklch(72% 0.14 232); }
.ftue-role-intro-card--audit { --role-glow: oklch(84% 0.14 88); }
.ftue-role-intro-card--swap { --role-glow: oklch(68% 0.18 302); }
.ftue-role-intro-card--reset { --role-glow: oklch(70% 0.14 190); }
.ftue-role-intro-card--protect { --role-glow: oklch(72% 0.14 195); }
.ftue-role-intro-card--hedge { --role-glow: oklch(74% 0.16 145); }
.ftue-role-intro-card--cds { --role-glow: oklch(70% 0.16 155); }
.ftue-role-intro-card--steal { --role-glow: oklch(70% 0.18 36); }
.ftue-role-intro-card--meme { --role-glow: oklch(76% 0.16 60); }

.ftue-role-intro-card__code {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: color-mix(in oklch, var(--role-glow) 22%, oklch(99% 0.02 92));
  color: oklch(18% 0.05 230);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 950;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--role-glow) 26%, transparent),
    0 0 16px color-mix(in oklch, var(--role-glow) 36%, transparent);
}

.ftue-role-intro-card__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ftue-role-intro-card__body strong,
.ftue-role-intro-card__body span,
.ftue-role-intro-card__body small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ftue-role-intro-card__body strong {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.05;
}

.ftue-role-intro-card__body span {
  color: oklch(90% 0.06 92 / 0.76);
  font-size: 10px;
  font-weight: 900;
}

.ftue-role-intro-card__body small {
  justify-self: start;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--role-glow) 28%, transparent);
  color: oklch(98% 0.04 92);
  font-size: 10px;
  font-weight: 950;
  box-shadow: 0 0 14px color-mix(in oklch, var(--role-glow) 24%, transparent);
  animation: ftueRolePulse 1.7s ease-in-out infinite;
}

/* CDS visual flow — Step 8 */
.ftue-mock--cds-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}

.ftue-cds-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 1 92px;
  padding: 10px 6px;
  border-radius: 12px;
  text-align: center;
}
.ftue-cds-step--bank {
  background: linear-gradient(145deg, oklch(38% 0.08 145 / 0.7), oklch(28% 0.06 145 / 0.6));
  border: 1px solid oklch(60% 0.12 145 / 0.4);
}
.ftue-cds-step--bet {
  background: linear-gradient(145deg, oklch(38% 0.10 30 / 0.7), oklch(28% 0.08 30 / 0.6));
  border: 1px solid oklch(60% 0.14 30 / 0.4);
}
.ftue-cds-step--result {
  background: linear-gradient(145deg, oklch(40% 0.10 84 / 0.7), oklch(30% 0.08 84 / 0.6));
  border: 1px solid oklch(65% 0.12 84 / 0.4);
}

.ftue-cds-step__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: oklch(99% 0.02 92 / 0.14);
  color: oklch(96% 0.04 92);
}
.ftue-cds-step__icon .svg-icon { width: 22px; height: 22px; }
.ftue-cds-step__icon--text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 950;
}

.ftue-cds-step strong {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 950;
  color: oklch(96% 0.04 92);
  line-height: 1.2;
}
.ftue-cds-step span {
  font-size: 9px;
  font-weight: 800;
  color: oklch(85% 0.04 92 / 0.7);
  line-height: 1.2;
}

.ftue-cds-arrow {
  font-size: 20px;
  font-weight: 900;
  color: oklch(75% 0.06 84 / 0.6);
  flex-shrink: 0;
}

.ftue-detail-button {
  justify-self: center;
  min-height: 44px;
}

.ftue-detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: 18px;
}

.ftue-detail-overlay__shade {
  position: absolute;
  inset: 0;
  background: oklch(24% 0.055 218 / 0.34);
}

.ftue-detail-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(760px, 96vw);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  padding: 16px;
  border: 2px solid oklch(70% 0.13 84 / 0.72);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, oklch(84% 0.15 84 / 0.28), transparent 34%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(92% 0.045 92));
  box-shadow:
    0 26px 50px var(--toy-shadow),
    0 6px 0 oklch(55% 0.11 84 / 0.22);
  color: var(--toy-ink);
  text-align: left;
}

.ftue-detail-panel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.ftue-detail-panel__header span {
  color: var(--toy-coin-deep);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ftue-detail-panel__header h3,
.ftue-detail-panel__intro {
  margin: 0;
}

.ftue-detail-panel__header h3 {
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 34px);
  line-height: 1.05;
}

.ftue-detail-panel__intro {
  color: var(--toy-muted);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.45;
}

.ftue-detail-grid {
  display: grid;
  gap: 10px;
}

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

.ftue-detail-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid oklch(65% 0.08 84 / 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, oklch(86% 0.14 84 / 0.16), transparent 38%),
    oklch(99% 0.018 92 / 0.76);
  box-shadow: inset 0 1px 0 oklch(99% 0.02 92 / 0.86);
}

.ftue-detail-card--variant {
  border-color: oklch(65% 0.08 84 / 0.32);
}

/* A3 (v172): CDS detail cards reuse the variant card layout with a warmer
   border so the wagering theme is visually distinct from variant cards. */
.ftue-detail-card--cds {
  border-color: oklch(62% 0.15 22 / 0.42);
  background:
    radial-gradient(circle at 12% 0%, oklch(82% 0.16 22 / 0.18), transparent 38%),
    oklch(99% 0.018 92 / 0.78);
}

.ftue-detail-card--cds .ftue-detail-card__code {
  background: linear-gradient(180deg, oklch(80% 0.17 22), oklch(58% 0.18 16));
  color: oklch(99% 0.02 92);
}

/* Small inline "Deep dive →" link inside the rules modal's CDS row. Sits at
   the end of the dd text without breaking the dl rhythm. */
.rules-inline-link {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: oklch(62% 0.16 22);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.rules-inline-link:hover {
  background: oklch(62% 0.16 22 / 0.12);
}

.ftue-detail-card__code {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--toy-coin-lit), var(--toy-coin));
  color: oklch(37% 0.1 66);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 3px 0 oklch(55% 0.12 63 / 0.2);
}

.ftue-detail-card__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ftue-detail-card__body strong {
  color: var(--toy-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.ftue-detail-card__body em {
  color: var(--toy-coin-deep);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ftue-detail-card__body p,
.ftue-detail-card__body ul {
  margin: 0;
}

.ftue-detail-card__body p,
.ftue-detail-card__body li {
  color: var(--toy-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.36;
}

.ftue-detail-card__body p strong {
  color: var(--toy-ink);
  font-size: inherit;
  font-weight: 950;
}

.ftue-detail-card__body ul {
  display: grid;
  gap: 4px;
  padding-left: 16px;
}

@keyframes ftueRoleSweep {
  0%, 38% { transform: translateX(-45%) rotate(10deg); opacity: 0; }
  52% { opacity: 1; }
  76%, 100% { transform: translateX(45%) rotate(10deg); opacity: 0; }
}

@keyframes ftueRolePulse {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.22); transform: translateY(-1px); }
}

.ftue-variant-chip {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
}

.ftue-variant-chip strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 8px;
  background: oklch(25% 0.06 230);
  color: oklch(94% 0.12 84);
  font-family: var(--font-display);
  font-size: 13px;
}

.ftue-variant-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ftue-variant-chip.is-standard strong {
  background: oklch(74% 0.13 84);
  color: oklch(28% 0.07 70);
}

.ftue-mock--cds-step {
  display: grid;
  place-items: center;
  min-height: 100px;
}

/* v222: role FTUE avatar + badge layout */
.ftue-mock--role-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
}
.role-ftue-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid oklch(78% 0.14 75 / 0.6);
  box-shadow:
    0 4px 16px oklch(30% 0.02 230 / 0.2),
    0 0 20px oklch(78% 0.18 75 / 0.12);
}

.cds-step-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(145deg, oklch(72% 0.14 30), oklch(58% 0.16 25));
  color: oklch(98% 0.02 84);
  font-size: 32px;
  font-weight: 900;
  font-family: var(--font-display);
  box-shadow: 0 4px 16px oklch(50% 0.12 30 / 0.25);
}

/* CDS FTUE mock UI — screenshot-style game visuals */
.ftue-mock--cds-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}
.cds-mock-label {
  font-size: 10px;
  font-weight: 700;
  color: oklch(70% 0.06 84 / 0.7);
  text-align: center;
}
.cds-mock-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, oklch(30% 0.06 260 / 0.8), oklch(22% 0.04 260 / 0.7));
  border: 1px solid oklch(55% 0.12 260 / 0.3);
  font-size: 11px;
  font-weight: 700;
  color: oklch(90% 0.04 260);
  line-height: 1.35;
  max-width: 310px;
}
.cds-mock-hint__icon { font-size: 18px; flex-shrink: 0; }
.cds-mock-hint b { color: oklch(96% 0.04 84); }
.cds-mock-path {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.cds-mock-card {
  width: 52px;
  height: 68px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: oklch(98% 0.02 92);
  text-align: center;
  line-height: 1.2;
}
.cds-mock-card--cash {
  background: linear-gradient(145deg, oklch(62% 0.14 145), oklch(48% 0.12 145));
  border: 1px solid oklch(68% 0.12 145 / 0.5);
}
.cds-mock-card--crisis {
  background: linear-gradient(145deg, oklch(55% 0.16 25), oklch(42% 0.14 25));
  border: 1px solid oklch(62% 0.14 25 / 0.5);
}
.cds-mock-card--cover {
  background: linear-gradient(145deg, oklch(32% 0.04 84), oklch(24% 0.03 84));
  border: 1px solid oklch(50% 0.06 84 / 0.4);
  font-size: 20px;
  font-weight: 900;
  color: oklch(75% 0.06 84 / 0.5);
}
.cds-mock-overlay {
  width: 100%;
  max-width: 300px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(145deg, oklch(22% 0.04 30 / 0.9), oklch(16% 0.03 30 / 0.85));
  border: 1px solid oklch(50% 0.12 30 / 0.3);
}
.cds-mock-overlay__header {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 950;
  color: oklch(75% 0.14 30);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-align: center;
}
.cds-mock-target {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  background: oklch(26% 0.03 84 / 0.5);
  margin-bottom: 5px;
}
.cds-mock-target__name {
  font-size: 12px;
  font-weight: 800;
  color: oklch(96% 0.04 92);
  min-width: 48px;
}
.cds-mock-target__carry {
  font-size: 10px;
  font-weight: 700;
  color: oklch(75% 0.06 84 / 0.8);
  flex: 1;
}
.cds-mock-target__carry--high {
  color: oklch(80% 0.14 84);
}
.cds-mock-target__btn {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  border: none;
  background: oklch(45% 0.10 30 / 0.7);
  color: oklch(90% 0.06 30);
  white-space: nowrap;
}
.cds-mock-target__btn--active {
  background: linear-gradient(135deg, oklch(55% 0.16 30), oklch(45% 0.14 25));
  color: oklch(98% 0.02 84);
  box-shadow: 0 2px 8px oklch(50% 0.14 30 / 0.3);
}
.cds-mock-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: oklch(35% 0.04 84 / 0.6);
  color: oklch(75% 0.06 84 / 0.8);
  white-space: nowrap;
}
.cds-mock-tag--hot {
  background: oklch(45% 0.14 30 / 0.5);
  color: oklch(85% 0.12 30);
}
.cds-mock-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 5px;
}
.cds-mock-result--win {
  background: linear-gradient(135deg, oklch(32% 0.08 145 / 0.7), oklch(24% 0.06 145 / 0.6));
  border: 1px solid oklch(55% 0.12 145 / 0.4);
}
.cds-mock-result--lose {
  background: linear-gradient(135deg, oklch(30% 0.06 30 / 0.5), oklch(22% 0.04 30 / 0.4));
  border: 1px solid oklch(50% 0.08 30 / 0.3);
}
.cds-mock-result__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.cds-mock-result--win .cds-mock-result__icon {
  background: oklch(55% 0.14 145 / 0.5);
  color: oklch(90% 0.08 145);
}
.cds-mock-result--lose .cds-mock-result__icon {
  background: oklch(45% 0.10 30 / 0.5);
  color: oklch(80% 0.08 30);
}
.cds-mock-result strong {
  font-size: 11px;
  font-weight: 800;
  color: oklch(96% 0.04 92);
  display: block;
  line-height: 1.2;
}
.cds-mock-result span {
  font-size: 10px;
  font-weight: 700;
  color: oklch(80% 0.06 84 / 0.8);
}

.role-ftue-category {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: -2px;
  margin-bottom: -4px;
}

.ftue-trial__lesson {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid oklch(64% 0.09 84 / 0.34);
  border-radius: 8px;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(93% 0.04 92));
  color: var(--toy-ink);
}

.ftue-trial__lesson strong {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.1;
}

.ftue-trial__lesson div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ftue-trial__lesson span,
.ftue-trial__taunt {
  padding: 5px 8px;
  border-radius: 999px;
  background: oklch(30% 0.06 210);
  color: oklch(95% 0.02 210);
  font-size: 11px;
  font-weight: 950;
}

.ftue-trial__taunt {
  justify-self: start;
  background: oklch(35% 0.08 30);
  color: oklch(95% 0.02 30);
}

.ftue-trial-card--cash {
  border-color: oklch(78% 0.17 84 / 0.8);
  background:
    radial-gradient(circle at 72% 18%, oklch(99% 0.04 92 / 0.68), transparent 28%),
    linear-gradient(135deg, oklch(98% 0.08 92), oklch(82% 0.18 84) 54%, oklch(68% 0.15 72));
}

.ftue-trial-card--patent {
  border-color: oklch(68% 0.13 205 / 0.76);
  background: linear-gradient(180deg, oklch(96% 0.055 198), oklch(86% 0.09 210));
}

.ftue-trial-card--private {
  border-color: oklch(62% 0.14 286 / 0.76);
  background:
    linear-gradient(135deg, oklch(23% 0.065 286), oklch(16% 0.045 238));
}

.ftue-trial-card--private strong,
.ftue-trial-card--private span,
.ftue-trial-card--private small {
  color: oklch(96% 0.08 92);
}

.ftue-trial-card--back {
  border-color: oklch(78% 0.16 84 / 0.8);
  background:
    radial-gradient(circle at 50% 34%, oklch(94% 0.12 84 / 0.22), transparent 40%),
    linear-gradient(160deg, oklch(22% 0.06 230), oklch(14% 0.045 230));
}

.ftue-trial-card--back strong,
.ftue-trial-card--back span,
.ftue-trial-card--back small {
  color: oklch(96% 0.08 92);
}

.ftue-trial-card--back .ftue-trial-card__symbol,
.ftue-trial-card--private .ftue-trial-card__symbol {
  background: oklch(99% 0.02 92 / 0.14);
  color: oklch(92% 0.12 84);
}

.ftue-trial-card__question {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.ftue-trial-player__body em {
  color: oklch(32% 0.12 286);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .ftue-mock--cards,
  .ftue-mock--variants,
  .ftue-mock--role-intro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .ftue-mock--reveal,
  .ftue-mock--class {
    grid-template-columns: 1fr;
  }

  .ftue-reveal-card,
  .ftue-role-card {
    min-height: 132px;
  }

  .ftue-card-system {
    min-height: 100px;
  }

  .ftue-role-intro-card {
    min-height: 72px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px;
    padding: 6px;
  }

  .ftue-role-intro-card__code {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .ftue-detail-overlay {
    padding: 8px;
  }

  .ftue-detail-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 12px;
  }

  .ftue-detail-grid--roles {
    grid-template-columns: 1fr;
  }

  .ftue-detail-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 10px;
  }

  .ftue-detail-card__code {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ftue-role-intro-card::before,
  .ftue-role-intro-card__body small {
    animation: none;
  }
}

.ghost-button--rules {
  color: oklch(27% 0.07 70);
}

.rules-list {
  color: var(--toy-ink);
}

.rules-list li {
  background: oklch(99% 0.02 92 / 0.9);
  border: 1px solid oklch(58% 0.09 84 / 0.3);
  box-shadow: 0 3px 0 oklch(60% 0.08 84 / 0.16);
}

.rules-list strong,
.onboarding-rules summary {
  color: var(--toy-ink);
  text-shadow: none;
}

.rules-list span,
.setup-copy {
  color: oklch(33% 0.045 218);
  font-weight: 650;
}

.setup-copy strong {
  color: oklch(28% 0.055 218);
}

@media (max-width: 520px) {
  .topbar__left {
    gap: 8px;
  }

  .stat {
    min-width: 68px;
    padding: 7px 8px;
  }

  .stat__label {
    font-size: 10px;
  }

  .stat__value {
    font-size: 18px;
  }
}

/* ============================================================
   v20 Commercial mobile board theme
   Owns the sellable casual-board-game direction.
   v184 (Codex audit Fix #3): scoped from :root to .app--commercial-mobile
   so commercial-* tokens + toy-* remaps only apply when that wrapper is
   present (it is the actual rendered class from app.js).
   ============================================================ */
.app--commercial-mobile {
  --commercial-sky: oklch(84% 0.13 220);
  --commercial-sea: oklch(72% 0.13 190);
  --commercial-grass: oklch(66% 0.17 145);
  --commercial-coral: oklch(68% 0.2 31);
  --commercial-plum: oklch(42% 0.1 315);
  --commercial-cream: oklch(98% 0.028 92);
  --commercial-paper: oklch(95% 0.045 92);
  --commercial-ink: oklch(22% 0.06 230);
  --commercial-shadow: oklch(25% 0.06 230 / 0.2);
  --toy-sky: var(--commercial-sky);
  --toy-mint: oklch(80% 0.13 165);
  --toy-ink: var(--commercial-ink);
  --toy-danger: var(--commercial-coral);
  --toy-danger-deep: oklch(48% 0.17 31);
  --toy-teal: var(--commercial-sea);
  --toy-shadow: var(--commercial-shadow);
}

.app--commercial-mobile {
  background-color: var(--commercial-sky);
  background-image:
    radial-gradient(circle at 12% 18%, oklch(98% 0.03 92 / 0.7) 0 7%, transparent 18%),
    radial-gradient(circle at 86% 16%, oklch(94% 0.12 84 / 0.62) 0 6%, transparent 17%),
    linear-gradient(180deg, oklch(86% 0.13 220 / 0.92), oklch(89% 0.12 165 / 0.9) 50%, oklch(88% 0.13 92 / 0.9)),
    url("./assets/mobile-board-shapes.svg");
  background-position: center, center, center, center;
  background-size: cover, cover, cover, cover;
  color: var(--commercial-ink);
  /* F15: 原 82px 在某些 mode (handoff panel 變大時) 不足，補到 110px 確保 fixed bottom-hud 不蓋內容 */
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

.app--commercial-mobile .topbar {
  border-bottom: 0;
  /* H9 fix: iPhone notch / Dynamic Island safe-area */
  padding-top: env(safe-area-inset-top, 0px);
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.94), oklch(94% 0.045 92 / 0.9));
  box-shadow:
    0 4px 0 oklch(61% 0.1 84 / 0.18),
    0 18px 34px var(--commercial-shadow);
}

.app--commercial-mobile .bottom-hud {
  border: 2px solid oklch(74% 0.14 84 / 0.5);
  /* H9 fix: iPhone home indicator safe-area, 不被 indicator 蓋 HUD */
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.95), oklch(91% 0.055 92 / 0.92));
  box-shadow:
    0 4px 0 oklch(58% 0.095 84 / 0.22),
    0 16px 30px var(--commercial-shadow);
}

.app--commercial-mobile .bottom-hud__item {
  background:
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(92% 0.038 92));
  border: 1px solid oklch(69% 0.055 218 / 0.22);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.92),
    0 2px 0 oklch(68% 0.045 218 / 0.18);
}

.app--commercial-mobile .bottom-hud__item span {
  color: oklch(38% 0.055 230);
}

.app--commercial-mobile .bottom-hud__item strong {
  color: var(--toy-coin-deep);
  text-shadow: 0 1px 0 oklch(99% 0.025 92 / 0.8);
}

.app--commercial-mobile .bottom-hud__item--risk strong {
  color: var(--toy-danger);
}

.app--commercial-mobile .topbar-menu__popover {
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.98), oklch(92% 0.05 92 / 0.98));
  border-color: oklch(74% 0.14 84 / 0.62);
  box-shadow:
    0 5px 0 oklch(58% 0.095 84 / 0.22),
    0 18px 30px var(--commercial-shadow);
}

.app--commercial-mobile .topbar-menu__popover::before {
  border-color: oklch(74% 0.14 84 / 0.62);
}

.app--commercial-mobile .brand__mark {
  position: relative;
  overflow: hidden;
  transform: rotate(-4deg);
}

.app--commercial-mobile .brand__mark::after {
  content: "";
  position: absolute;
  inset: 5px auto auto 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(99% 0.03 92 / 0.86);
}

.app--commercial-mobile .brand__mark--rich::after {
  display: none;
}

.app--commercial-mobile .brand__mark--app-icon::after {
  display: none;
}

.app--commercial-mobile .brand__mark--app-icon {
  transform: none;
}

.app--commercial-mobile .brand h1 {
  color: var(--commercial-ink);
  text-shadow:
    0 2px 0 oklch(99% 0.025 92),
    0 8px 18px oklch(36% 0.08 84 / 0.16);
}

.app--commercial-mobile .brand p {
  color: oklch(38% 0.055 230);
  font-weight: 800;
}

.app--commercial-mobile .action-strip {
  padding-top: 14px;
}

.app--commercial-mobile .temple-strip,
.app--commercial-mobile .leaderboard-rail,
.app--commercial-mobile .player-table,
.app--commercial-mobile .decision-panel,
.app--commercial-mobile .log-panel,
.app--commercial-mobile .score-panel {
  border: 0;
  background:
    linear-gradient(180deg, oklch(99% 0.025 92 / 0.94), oklch(94% 0.045 92 / 0.92));
  box-shadow:
    0 5px 0 oklch(58% 0.095 84 / 0.2),
    0 18px 34px var(--commercial-shadow);
}

.app--commercial-mobile .temple-strip {
  border: 3px solid oklch(74% 0.14 84 / 0.54);
}

.app--commercial-mobile .leaderboard-rail__head span {
  color: oklch(38% 0.055 230);
}

.app--commercial-mobile .leaderboard-rail__head strong,
.app--commercial-mobile .leaderboard-row__score {
  color: var(--commercial-ink);
  text-shadow: 0 1px 0 oklch(99% 0.025 92);
}

.app--commercial-mobile .leaderboard-row {
  border-color: oklch(62% 0.08 84 / 0.18);
  background:
    linear-gradient(180deg, oklch(99% 0.02 92 / 0.76), oklch(92% 0.04 92 / 0.66));
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.88),
    0 3px 0 oklch(58% 0.09 84 / 0.1);
}

.app--commercial-mobile .leaderboard-row.is-leading {
  border-color: color-mix(in oklch, var(--player-accent, var(--toy-coin)) 64%, oklch(76% 0.14 84));
  background:
    radial-gradient(circle at 90% 10%, color-mix(in oklch, var(--player-accent, var(--toy-coin)) 28%, transparent), transparent 48%),
    linear-gradient(180deg, oklch(99% 0.025 92), oklch(92% 0.08 84));
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--player-accent, var(--toy-coin)) 18%, transparent),
    0 5px 0 oklch(58% 0.095 84 / 0.22),
    0 14px 24px var(--commercial-shadow);
}

.app--commercial-mobile .leaderboard-row__rank {
  color: var(--toy-coin-deep);
}

.app--commercial-mobile .leaderboard-row__name {
  color: var(--commercial-ink);
}

.app--commercial-mobile .leaderboard-row__meta {
  color: oklch(38% 0.055 230);
}

.app--commercial-mobile .temple-strip::before {
  inset: 58px 14px 14px;
  border: 2px dashed oklch(60% 0.14 190 / 0.34);
  background:
    radial-gradient(circle at 18% 24%, oklch(86% 0.17 84 / 0.56) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 34%, oklch(68% 0.18 145 / 0.36) 0 11px, transparent 12px),
    linear-gradient(135deg, oklch(88% 0.1 190 / 0.22) 0 25%, transparent 25% 50%, oklch(92% 0.12 84 / 0.2) 50% 75%, transparent 75%);
  background-size: auto, auto, 64px 64px;
  opacity: 0.7;
}

.app--commercial-mobile .drama-banner {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(100deg, oklch(98% 0.035 92), oklch(91% 0.08 190));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
    0 4px 0 oklch(58% 0.1 190 / 0.18);
  animation: commercialBannerBreathe 3.4s ease-in-out infinite;
}

.app--commercial-mobile .drama-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, oklch(99% 0.03 92 / 0.55) 46%, transparent 55%);
  transform: translateX(-120%);
  animation: commercialBannerSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

.app--commercial-mobile .drama-banner span,
.app--commercial-mobile .drama-banner strong {
  position: relative;
  z-index: 1;
  color: var(--commercial-ink);
  text-shadow: none;
}

.app--commercial-mobile .card {
  isolation: isolate;
  border: 0;
  border-radius: 8px;
  transform: perspective(900px) rotateX(2deg);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.9),
    0 7px 0 oklch(47% 0.08 84 / 0.25),
    0 18px 30px oklch(25% 0.06 230 / 0.18);
}

.app--commercial-mobile .card::before,
.app--commercial-mobile .card::after {
  z-index: 0;
}

.app--commercial-mobile .card::before {
  inset: 7px;
  border: 2px solid oklch(99% 0.02 92 / 0.44);
}

.app--commercial-mobile .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, oklch(99% 0.025 92 / 0.32) 46%, transparent 54%),
    radial-gradient(circle at 12% 15%, oklch(99% 0.02 92 / 0.5), transparent 26%);
  pointer-events: none;
}

.app--commercial-mobile .card > * {
  position: relative;
  z-index: 1;
}

.app--commercial-mobile .card__symbol {
  border: 3px solid oklch(99% 0.02 92 / 0.82);
  border-radius: 28px;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.8),
    0 5px 0 oklch(35% 0.07 230 / 0.16);
}

.app--commercial-mobile .card--cash .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.055 142), oklch(74% 0.17 145));
  color: oklch(34% 0.13 150);
}

.app--commercial-mobile .card--tip .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.05 195), oklch(72% 0.14 205));
  color: oklch(34% 0.1 218);
}

.app--commercial-mobile .card--crisis .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.05 48), oklch(74% 0.18 35));
  color: oklch(38% 0.14 31);
}

/* Hazard upgrade: per-hazard tinted card backgrounds + bigger icon —
   每張危機卡跟主題搭，玩家視覺一眼分得出哪種危機 */
.app--commercial-mobile .card--crisis[data-hazard="fire"] {
  background:
    radial-gradient(circle at 78% 18%, oklch(99% 0.025 92 / 0.5), transparent 28%),
    linear-gradient(140deg, oklch(95% 0.04 240), oklch(72% 0.14 240) 56%, oklch(54% 0.16 250));
}
.app--commercial-mobile .card--crisis[data-hazard="fire"] .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.035 240), oklch(78% 0.14 250));
  color: oklch(28% 0.16 260);
}
.app--commercial-mobile .card--crisis[data-hazard="mummy"] {
  background:
    radial-gradient(circle at 78% 18%, oklch(99% 0.025 92 / 0.5), transparent 28%),
    linear-gradient(140deg, oklch(94% 0.04 22), oklch(58% 0.18 18) 56%, oklch(38% 0.16 12));
}
.app--commercial-mobile .card--crisis[data-hazard="mummy"] .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.04 22), oklch(78% 0.16 18));
  color: oklch(30% 0.16 18);
}
.app--commercial-mobile .card--crisis[data-hazard="rocks"] {
  background:
    radial-gradient(circle at 78% 18%, oklch(99% 0.025 92 / 0.5), transparent 28%),
    linear-gradient(140deg, oklch(95% 0.05 30), oklch(68% 0.22 28) 50%, oklch(48% 0.2 22));
}
.app--commercial-mobile .card--crisis[data-hazard="rocks"] .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.05 30), oklch(76% 0.2 28));
  color: oklch(36% 0.2 28);
}
.app--commercial-mobile .card--crisis[data-hazard="snakes"] {
  background:
    radial-gradient(circle at 78% 18%, oklch(99% 0.025 92 / 0.5), transparent 28%),
    linear-gradient(140deg, oklch(94% 0.04 310), oklch(62% 0.16 308) 56%, oklch(42% 0.18 308));
}
.app--commercial-mobile .card--crisis[data-hazard="snakes"] .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.04 310), oklch(78% 0.14 308));
  color: oklch(34% 0.18 308);
}
.app--commercial-mobile .card--crisis[data-hazard="spiders"] {
  background:
    radial-gradient(circle at 78% 18%, oklch(99% 0.025 92 / 0.5), transparent 28%),
    linear-gradient(140deg, oklch(94% 0.03 70), oklch(62% 0.12 60) 56%, oklch(40% 0.1 50));
}
.app--commercial-mobile .card--crisis[data-hazard="spiders"] .card__symbol {
  background: linear-gradient(180deg, oklch(98% 0.04 70), oklch(78% 0.13 60));
  color: oklch(34% 0.14 50);
}

/* Hazard upgrade: 警告 tag → 紅 rubber-stamp 斜角 + 撕裂紙感 */
.app--commercial-mobile .card--crisis .card__tag {
  background: oklch(99% 0.02 92 / 0.85);
  border: 1.5px solid oklch(58% 0.22 28);
  color: oklch(48% 0.22 28);
  font-weight: 950;
  letter-spacing: 0.18em;
  padding: 3px 9px 4px;
  border-radius: 4px;
  transform: rotate(-8deg);
  box-shadow:
    0 2px 0 oklch(58% 0.22 28 / 0.32),
    inset 0 0 0 1px oklch(99% 0.02 92);
}

.app--commercial-mobile .card--crisis.card--danger .card__tag {
  background: oklch(50% 0.24 28);
  border-color: oklch(40% 0.22 28);
  color: oklch(99% 0.02 92);
  letter-spacing: 0.16em;
  transform: rotate(-6deg) scale(1.04);
  box-shadow:
    0 3px 0 oklch(35% 0.2 28),
    inset 0 -2px 0 oklch(35% 0.2 28 / 0.6);
}

.app--commercial-mobile .card--crisis .card__footer--hazard {
  padding: 7px 8px;
  border-radius: 8px;
  background: oklch(99% 0.02 92 / 0.5);
  border: 1px solid oklch(58% 0.18 31 / 0.2);
}

.app--commercial-mobile .card--cash .card__footer--cash {
  padding: 7px 8px;
  border-radius: 8px;
  background: oklch(99% 0.02 92 / 0.52);
  border: 1px solid oklch(58% 0.15 145 / 0.22);
}

.app--commercial-mobile .card__hazard-kicker {
  color: oklch(42% 0.08 64 / 0.72);
}

.app--commercial-mobile .card__cash-kicker {
  color: oklch(42% 0.08 64 / 0.72);
}

.app--commercial-mobile .card__hazard-title {
  color: oklch(24% 0.07 66);
  font-size: clamp(22px, 5.8vmin, 32px);
  text-shadow: none;
}

.app--commercial-mobile .card__cash-title {
  color: oklch(24% 0.07 66);
  font-size: clamp(22px, 5.8vmin, 34px);
  text-shadow: none;
}

.app--commercial-mobile .card__hazard-subtitle {
  color: oklch(34% 0.07 230 / 0.72);
}

.app--commercial-mobile .card__cash-subtitle {
  color: oklch(34% 0.07 230 / 0.72);
}

.app--commercial-mobile .card__hazard-rule {
  color: oklch(44% 0.16 31);
}

.app--commercial-mobile .card__tag {
  border: 0;
  border-radius: 8px;
  background: oklch(99% 0.02 92 / 0.72);
  color: oklch(32% 0.055 230);
  box-shadow: 0 2px 0 oklch(50% 0.07 84 / 0.12);
}

.app--commercial-mobile .card--cash {
  background:
    radial-gradient(circle at 78% 20%, oklch(99% 0.02 92 / 0.5), transparent 25%),
    linear-gradient(135deg, oklch(96% 0.08 128), oklch(77% 0.16 150) 58%, oklch(67% 0.14 165));
}

.app--commercial-mobile .card--cash-big {
  background:
    radial-gradient(circle at 22% 20%, oklch(99% 0.04 92 / 0.8), transparent 24%),
    radial-gradient(circle at 78% 18%, oklch(99% 0.03 92 / 0.72), transparent 28%),
    linear-gradient(135deg, oklch(98% 0.08 92), oklch(82% 0.18 84) 54%, oklch(66% 0.16 72));
  color: oklch(28% 0.08 80);
}

.app--commercial-mobile .card--cash-big .card__symbol {
  background:
    radial-gradient(circle at 50% 34%, oklch(99% 0.05 92), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.08 92), oklch(76% 0.17 84));
  color: oklch(36% 0.12 82);
}

.app--commercial-mobile .card--cash-big .card__value {
  color: oklch(24% 0.08 80);
  text-shadow: 0 2px 0 oklch(99% 0.04 92 / 0.46);
}

.app--commercial-mobile .card--cash-big .card__footer--cash {
  background: oklch(99% 0.04 92 / 0.66);
  border-color: oklch(73% 0.16 82 / 0.28);
}

.app--commercial-mobile .card--cash-big .card__cash-title {
  color: oklch(24% 0.08 80);
  text-shadow: 0 2px 0 oklch(99% 0.04 92 / 0.46);
}

.app--commercial-mobile .card--cash-big .card__note,
.app--commercial-mobile .card--cash-big .card__cash-kicker,
.app--commercial-mobile .card--cash-big .card__cash-subtitle,
.app--commercial-mobile .card--cash-big .card__tag {
  color: oklch(28% 0.07 78);
}

.app--commercial-mobile .card--cash-big .card__tag {
  background: oklch(99% 0.04 92 / 0.8);
}

.app--commercial-mobile .card--cash-big .card__cash-pile {
  background: oklch(99% 0.06 92);
  color: oklch(42% 0.12 80);
  box-shadow:
    0 2px 0 oklch(40% 0.1 70 / 0.2),
    0 0 10px oklch(92% 0.16 90 / 0.42);
}

.app--commercial-mobile .card--tip {
  background:
    radial-gradient(circle at 78% 20%, oklch(99% 0.02 92 / 0.5), transparent 25%),
    linear-gradient(135deg, oklch(96% 0.06 190), oklch(75% 0.14 202) 58%, oklch(68% 0.12 232));
  /* MEDIUM fix (Sonnet review): F24 tip icon SVG 的 currentColor 在 commercial-mobile
     沒明確設定，cream-on-teal 對比差。釘深 teal 確保 i badge circle 可見 */
  color: oklch(34% 0.1 222);
}

.app--commercial-mobile .card--crisis {
  background:
    radial-gradient(circle at 78% 20%, oklch(99% 0.02 92 / 0.46), transparent 25%),
    linear-gradient(135deg, oklch(97% 0.06 58), oklch(78% 0.18 36) 54%, oklch(64% 0.2 30));
}

.app--commercial-mobile .card--frozen {
  box-shadow:
    0 0 0 3px oklch(88% 0.11 205 / 0.74),
    0 0 22px oklch(70% 0.16 205 / 0.48),
    inset 0 2px 0 oklch(99% 0.025 92 / 0.9),
    0 7px 0 oklch(47% 0.08 84 / 0.25),
    0 18px 30px oklch(25% 0.06 230 / 0.18);
}

.app--commercial-mobile .card--latest {
  z-index: 4;
  animation: commercialCardDeal 1850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile .card--latest .card-spot {
  animation: commercialSpotBoom 2100ms ease-out;
}

.app--commercial-mobile.app--card-impact .temple-strip {
  animation: commercialBoardImpact 1800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile.app--card-impact .decision-panel {
  animation: commercialPanelKick 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile .choice-button,
.app--commercial-mobile .play-mode-card,
.app--commercial-mobile .welcome-actions .ghost-button,
.app--commercial-mobile .welcome-actions .primary-button {
  transform: translateZ(0);
}

.app--commercial-mobile .choice-button:hover,
.app--commercial-mobile .play-mode-card:hover,
.app--commercial-mobile .welcome-actions button:hover {
  transform: translateY(-3px) scale(1.01);
}

/* F20: 歡迎頁 CTA 金色 fill 太亮搶過 Bankrupt hero — 降一階飽和度但仍主 CTA */
.app--commercial-mobile .welcome-actions .primary-button {
  background:
    linear-gradient(180deg, oklch(91% 0.1 88), oklch(82% 0.13 78) 52%, oklch(70% 0.14 72));
  border-color: oklch(75% 0.13 78);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.78),
    0 4px 0 oklch(52% 0.12 70 / 0.78),
    0 10px 18px oklch(32% 0.06 66 / 0.2);
}

.app--commercial-mobile .choice-buttons {
  animation: commercialChoiceEnter 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile .choice-button {
  min-height: 92px;
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.35),
    0 6px 0 oklch(35% 0.07 230 / 0.18),
    0 16px 28px oklch(25% 0.06 230 / 0.18);
}

.app--commercial-mobile .choice-button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 44%;
  background: linear-gradient(90deg, transparent, oklch(99% 0.025 92 / 0.62), transparent);
  transform: rotate(18deg);
  animation: commercialButtonGlint 2.9s ease-in-out infinite;
  pointer-events: none;
}

.app--commercial-mobile .choice-button--stay {
  background:
    radial-gradient(circle at 83% 18%, oklch(99% 0.02 92 / 0.55), transparent 26%),
    linear-gradient(180deg, oklch(93% 0.1 152), oklch(73% 0.17 150) 54%, oklch(58% 0.15 152));
  animation: commercialChoicePulse 2.5s ease-in-out infinite;
}

/* F3: 套現改 outline 為次 CTA — 主 CTA「加碼」金/綠 fill 才搶眼 */
.app--commercial-mobile .choice-button--leave {
  background:
    radial-gradient(circle at 83% 18%, oklch(99% 0.02 92 / 0.55), transparent 26%),
    linear-gradient(180deg, oklch(99% 0.02 92), oklch(96% 0.025 92));
  border: 2px solid oklch(70% 0.16 78);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.02 92 / 0.8),
    0 4px 0 oklch(70% 0.16 78 / 0.32),
    0 10px 18px oklch(72% 0.15 78 / 0.18);
  animation: none;
}

.app--commercial-mobile .choice-button--leave strong,
.app--commercial-mobile .choice-button--leave span {
  color: oklch(42% 0.1 70);
}

.app--commercial-mobile .setup-backdrop--welcome {
  background:
    linear-gradient(180deg, oklch(86% 0.13 220 / 0.8), oklch(83% 0.14 145 / 0.78)),
    url("./assets/mobile-board-shapes.svg");
  background-size: cover;
  background-position: center;
}

.app--commercial-mobile .setup-panel--welcome,
.app--commercial-mobile .setup-panel--mode {
  border: 0;
  box-shadow:
    0 7px 0 oklch(54% 0.1 84 / 0.24),
    0 26px 46px var(--commercial-shadow);
}

.app--commercial-mobile .greed-stage {
  background:
    linear-gradient(180deg, oklch(84% 0.13 220 / 0.42), oklch(80% 0.15 145 / 0.3)),
    url("./assets/mobile-board-shapes.svg");
  background-size: cover;
  background-position: center 54%;
}

.app--commercial-mobile .greed-stage::before {
  opacity: 0.82;
}

.app--commercial-mobile .greed-stage::after {
  background:
    linear-gradient(90deg, transparent 0 6%, oklch(99% 0.025 92 / 0.8) 6% 18%, transparent 18% 26%, oklch(99% 0.025 92 / 0.62) 26% 40%, transparent 40% 100%);
}

.app--commercial-mobile .greed-card {
  border: 4px solid oklch(99% 0.02 92 / 0.92);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.88),
    0 8px 0 oklch(36% 0.07 230 / 0.12),
    0 18px 28px oklch(25% 0.06 230 / 0.2);
}

.app--commercial-mobile .greed-stamp {
  background: oklch(99% 0.02 92 / 0.82);
  box-shadow:
    0 6px 0 oklch(48% 0.15 31 / 0.22),
    0 18px 28px oklch(38% 0.12 31 / 0.18);
}

.app--commercial-mobile .welcome-body .line-copy {
  max-width: 26ch;
}

.app--commercial-mobile .play-mode-card__copy .line-copy,
.app--commercial-mobile .setup-copy .line-copy,
.app--commercial-mobile .leave-preview .line-copy {
  max-width: 24ch;
}

.treasure-burst.is-active .treasure-burst__stack {
  animation: commercialTreasureStack 980ms cubic-bezier(0.16, 1.5, 0.3, 1);
}

.treasure-burst.is-active .treasure-burst__big {
  animation: valueSlam 0.45s cubic-bezier(0.16, 1.4, 0.3, 1) 0.18s forwards, commercialTreasureThrob 900ms ease-in-out 780ms 2;
}

.hazard-burst.is-active .hazard-burst__stack {
  animation: commercialHazardSmash 780ms cubic-bezier(0.16, 1.4, 0.3, 1);
}

.hazard-burst.is-active .hazard-burst__impact-wave {
  animation-duration: 900ms;
}

.cashout-banner {
  animation: cashOutBannerIn 580ms cubic-bezier(0.22, 1.6, 0.32, 1), commercialCashoutFloat 1.2s ease-in-out 580ms infinite;
}

@keyframes commercialCardDeal {
  0% {
    opacity: 0;
    transform: perspective(900px) translateY(74px) rotateX(30deg) rotateZ(-8deg) scale(0.68);
    filter: saturate(1.45) brightness(1.14) blur(2px);
  }
  42% {
    opacity: 1;
    transform: perspective(900px) translateY(-18px) rotateX(-10deg) rotateZ(4deg) scale(1.12);
    filter: saturate(1.25) brightness(1.08) blur(0);
  }
  70% {
    transform: perspective(900px) translateY(6px) rotateX(5deg) rotateZ(-2deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(2deg) rotateZ(0) scale(1);
    filter: saturate(1) brightness(1);
  }
}

@keyframes commercialSpotBoom {
  0% { opacity: 0; transform: scale(0.62); }
  28% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.9); }
}

@keyframes commercialBoardImpact {
  0% { transform: translateY(0) scale(1); filter: saturate(1); }
  34% { transform: translateY(-8px) scale(1.015); filter: saturate(1.18); }
  62% { transform: translateY(4px) scale(0.995); }
  100% { transform: translateY(0) scale(1); filter: saturate(1); }
}

@keyframes commercialPanelKick {
  0% { transform: rotate(0deg) scale(1); }
  38% { transform: rotate(-1.2deg) scale(1.018); }
  72% { transform: rotate(0.6deg) scale(0.995); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes commercialBannerBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes commercialBannerSweep {
  0%, 48% { transform: translateX(-120%) rotate(0deg); }
  76%, 100% { transform: translateX(220%) rotate(0deg); }
}

@keyframes commercialChoiceEnter {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes commercialChoicePulse {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(1); }
  50% { transform: translateY(-3px) scale(1.018); filter: saturate(1.12); }
}

@keyframes commercialButtonGlint {
  0%, 45% { left: -55%; opacity: 0; }
  58% { opacity: 0.85; }
  78%, 100% { left: 118%; opacity: 0; }
}

@keyframes commercialTreasureStack {
  0% { transform: translateY(34px) scale(0.62) rotate(-5deg); filter: blur(5px); }
  52% { transform: translateY(-18px) scale(1.12) rotate(2deg); filter: blur(0); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes commercialTreasureThrob {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes commercialHazardSmash {
  0% { transform: translateY(-44px) rotate(-8deg) scale(1.32); filter: blur(5px) saturate(1.4); }
  46% { transform: translateY(12px) rotate(3deg) scale(0.94); filter: blur(0) saturate(1.2); }
  72% { transform: translateY(-5px) rotate(-2deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0deg) scale(1); filter: saturate(1); }
}

@keyframes commercialCashoutFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-5px) rotate(-1deg); }
}

@media (max-width: 820px) {
  .app--commercial-mobile .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    justify-items: stretch;
    padding: 8px 10px;
  }

  .app--commercial-mobile .topbar__left {
    justify-content: flex-start;
  }

  .app--commercial-mobile .brand {
    order: 0;
    min-width: 0;
    grid-template-columns: auto minmax(0, auto);
    justify-self: center;
    align-items: center;
    justify-items: start;
    gap: 7px;
    text-align: left;
  }

  .app--commercial-mobile .brand__mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .app--commercial-mobile .brand h1 {
    font-size: 22px;
  }

  .app--commercial-mobile .brand p {
    display: none;
  }

  .app--commercial-mobile .topbar__right {
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
  }


  .app--commercial-mobile .topbar__right .icon-button,
  .app--commercial-mobile .topbar__right .ghost-button,
  .app--commercial-mobile .topbar__right .language-toggle {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  /* F17: 規則按鈕高可發現性 — 在 EN/靜音 灰 button 旁加金漸層、加粗、輕微陰影 */
  .app--commercial-mobile .ghost-button--rules {
    padding: 0 12px;
    gap: 5px;
    background:
      linear-gradient(180deg, oklch(96% 0.09 92), oklch(88% 0.13 84));
    border: 1px solid oklch(70% 0.16 78);
    color: oklch(38% 0.12 70);
    font-weight: 900;
    box-shadow:
      inset 0 1px 0 oklch(99% 0.02 92 / 0.8),
      0 2px 0 oklch(58% 0.12 78 / 0.32),
      0 6px 12px oklch(62% 0.14 78 / 0.22);
  }

  .app--commercial-mobile .ghost-button--rules .svg-icon {
    color: oklch(38% 0.12 70);
  }

  .app--commercial-mobile .main-grid {
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 10px 0;
  }

  .app--commercial-mobile .action-strip {
    padding: 8px 10px 0;
  }

  .app--commercial-mobile .board {
    gap: 8px;
    grid-template-rows: auto auto;
  }

  .app--commercial-mobile .temple-strip {
    padding: 10px;
  }

  .app--commercial-mobile .temple-strip > .section-title {
    margin-bottom: 6px;
  }

  .app--commercial-mobile .temple-strip > .section-title h2 {
    font-size: 21px;
  }

  .app--commercial-mobile .run-stage {
    min-height: 116px;
    margin-bottom: 8px;
    padding: 13px;
  }

  .app--commercial-mobile .card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(84px, 1fr) auto;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
  }

  .app--commercial-mobile .card__symbol {
    width: 88px;
    height: 88px;
    border-radius: 22px;
    font-size: 52px;
  }

  /* Hazard upgrade: crisis card symbol 變更大主視覺 (vs 88px default) */
  .app--commercial-mobile .card--crisis {
    min-height: 224px;
    grid-template-rows: minmax(98px, auto) auto;
  }

  .app--commercial-mobile .card--crisis .card__symbol {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    font-size: 56px;
  }

  .app--commercial-mobile .card__footer {
    align-items: center;
    text-align: center;
  }

  .app--commercial-mobile .card__footer--hazard {
    justify-content: center;
    min-height: 76px;
  }

  .app--commercial-mobile .card__footer--cash {
    justify-content: center;
    min-height: 70px;
  }

  .app--commercial-mobile .card__tag {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 520px) {
  .app--commercial-mobile .run-stage {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    min-height: clamp(86px, 10vh, 102px);
    min-height: clamp(86px, 10dvh, 102px);
    margin-bottom: 6px;
    padding: 10px;
  }

  .app--commercial-mobile .topbar__left {
    justify-content: flex-start;
  }

  .topbar-menu__popover {
    top: calc(100% + 8px);
    width: min(184px, calc(100vw - 18px));
  }

  .app--commercial-mobile .topbar__right {
    justify-content: flex-end;
  }

  .app--commercial-mobile .ghost-button--rules {
    font-size: 0;
  }

  .app--commercial-mobile .ghost-button--rules .svg-icon {
    font-size: 17px;
  }

  .app--commercial-mobile .card {
    min-height: 168px;
  }

  .app--commercial-mobile .card--crisis {
    min-height: 224px;
  }
}

/* v21 Gameplay stage pass — clearer run state, shorter copy, louder impact. */
.run-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 244, 216, 0.08);
  border: 1px solid var(--line-soft);
}

.run-stage::before,
.run-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.run-stage::before {
  inset: -38% auto auto -10%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 184, 77, 0.26), transparent 62%);
  animation: runStageOrb 3.8s ease-in-out infinite;
}

.run-stage::after {
  right: 12px;
  top: 10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, var(--toy-coin-lit, #fff1a8), var(--gold) 58%, var(--gold-2));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 5px 0 rgba(90, 58, 14, 0.24),
    0 14px 22px rgba(0, 0, 0, 0.18);
  animation: runStageCoin 2.1s ease-in-out infinite;
}

.run-stage > * {
  position: relative;
  z-index: 1;
}

.run-stage__ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 52px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.run-stage__ticker span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* F1 fix (Sonnet review): F1 砍掉第 3 個 stat 後 grid 改 2 列，避免右側留白 */
.run-stage__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.run-stage__stat {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 244, 216, 0.12);
}

.run-stage__stat span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.run-stage__stat strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(24px, 5.6vw, 36px);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.run-stage__stat--cash strong {
  color: var(--gold-2);
}

.run-stage__stat--risk strong {
  color: var(--danger);
}

.run-stage__meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.run-stage__meter span {
  display: block;
  width: max(8%, var(--run-risk, 0%));
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--jade), var(--gold) 48%, var(--danger));
  box-shadow: 0 0 16px rgba(232, 94, 61, 0.38);
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.temple-strip--hot .run-stage,
.temple-strip--critical .run-stage {
  animation: runStageHeat 1.25s ease-in-out infinite;
}

.temple-strip--critical .run-stage__meter span {
  animation: runStageMeterPanic 0.55s ease-in-out infinite;
}

.drama-banner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border-radius: 8px;
}

.drama-banner__label {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.drama-banner__detail {
  min-width: 0;
  justify-self: end;
  font-size: 13px;
  line-height: 1.2;
  /* F7: 避免「13 塊現金被分開：每人 3，/ 路徑留下 1。」這種標點留行尾 + 單字開新行 */
  text-wrap: pretty;
}

.drama-banner__detail .line-copy {
  display: inline;
}

.drama-banner__detail .line-copy > span {
  display: inline;
}

/* F14: 「{name} 已鎖定」原本 12-13px 灰字易漏看，改 chip 強化 */
.drama-banner--choice-stay,
.drama-banner--choice-leave {
  background: linear-gradient(180deg, oklch(95% 0.06 92), oklch(88% 0.09 84));
  border: 1px solid oklch(72% 0.13 84 / 0.6);
}

.drama-banner--choice-stay .drama-banner__detail,
.drama-banner--choice-leave .drama-banner__detail {
  font-size: 15px;
  font-weight: 900;
  color: oklch(38% 0.12 70);
  background: oklch(99% 0.02 92 / 0.85);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.02em;
}

.decision-panel--spotlight {
  overflow: hidden;
  border-color: color-mix(in oklch, var(--player-accent, var(--gold)) 60%, transparent);
}

.decision-panel--spotlight::before {
  content: "";
  position: absolute;
  inset: -48px -54px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--player-accent, var(--gold)) 54%, transparent), transparent 68%);
  pointer-events: none;
  opacity: 0.62;
  animation: playerSpotlightPulse 1.9s ease-in-out infinite;
}

.decision-panel--spotlight > * {
  position: relative;
  z-index: 1;
}

.decision-panel--ready {
  animation: readyPanelPulse 1.45s ease-in-out infinite;
}

/* Decision Pulse: truthful pressure hints before the one-tap choice. */
.decision-pressure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 2px solid oklch(72% 0.12 84 / 0.46);
  border-radius: 8px;
  color: var(--toy-ink);
  background: linear-gradient(180deg, oklch(99% 0.025 92), oklch(93% 0.04 92));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.88),
    0 4px 0 oklch(58% 0.09 84 / 0.2),
    0 14px 26px var(--toy-shadow);
}

.decision-pressure::before,
.decision-pressure::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.decision-pressure > * {
  position: relative;
  z-index: 1;
}

.decision-pressure::before {
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 0 35%, oklch(99% 0.03 92 / 0.5) 50%, transparent 65% 100%);
  animation: decisionPressureSweep 1.75s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.decision-pressure::after {
  inset: -34px -24px auto auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  opacity: 0.6;
}

.decision-pressure--reward {
  border-color: oklch(76% 0.16 92 / 0.68);
  background:
    radial-gradient(circle at 86% 16%, oklch(87% 0.17 92 / 0.34), transparent 42%),
    linear-gradient(180deg, oklch(99% 0.03 92), oklch(92% 0.075 92));
}

.decision-pressure--reward::after {
  background: radial-gradient(circle, oklch(86% 0.18 92 / 0.72), transparent 68%);
  animation: decisionRewardBloom 1.25s ease-in-out infinite;
}

.decision-pressure--danger {
  border-color: oklch(62% 0.18 34 / 0.72);
  background:
    repeating-linear-gradient(-12deg, transparent 0 9px, oklch(70% 0.18 34 / 0.09) 10px 13px),
    linear-gradient(180deg, oklch(98% 0.035 62), oklch(90% 0.09 44));
}

.decision-pressure--danger::after {
  background: radial-gradient(circle, oklch(66% 0.19 34 / 0.62), transparent 70%);
  animation: decisionDangerSiren 0.62s steps(2) infinite;
}

.decision-pressure__signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 43px;
  height: 43px;
  border-radius: 8px;
  color: oklch(35% 0.09 64);
  background: oklch(99% 0.02 92 / 0.88);
  border: 1px solid oklch(66% 0.09 84 / 0.28);
  box-shadow: inset 0 1px 0 oklch(99% 0.03 92 / 0.9);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 950;
}

.decision-pressure--danger .decision-pressure__signal {
  color: oklch(41% 0.16 34);
  animation: decisionSignalJolt 0.55s ease-in-out infinite;
}

.decision-pressure--reward .decision-pressure__signal {
  color: oklch(43% 0.13 92);
  animation: decisionSignalFloat 1.2s ease-in-out infinite;
}

.decision-pressure__signal .svg-icon {
  width: 20px;
  height: 20px;
}

.decision-pressure__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.decision-pressure__copy strong {
  overflow: hidden;
  color: var(--toy-ink);
  font-size: 14px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-pressure__copy span {
  overflow: hidden;
  color: oklch(39% 0.045 215);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-pressure__metric {
  min-width: 48px;
  padding: 5px 8px;
  border-radius: 999px;
  background: oklch(25% 0.055 218 / 0.08);
  color: var(--toy-ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.class-intel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 11px;
  border: 2px solid oklch(70% 0.13 250 / 0.46);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, oklch(78% 0.13 250 / 0.22), transparent 42%),
    linear-gradient(180deg, oklch(99% 0.022 92), oklch(92% 0.045 230));
  color: var(--toy-ink);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    0 4px 0 oklch(50% 0.09 230 / 0.16);
}

.class-intel strong,
.lobby-class-select > span {
  display: block;
  color: var(--toy-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.class-intel span {
  display: block;
  color: oklch(38% 0.055 230);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.private-card-panel,
.class-skill-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 2px solid rgba(232, 168, 88, 0.52);
  border-radius: 10px;
  color: #fff5d7;
  background:
    radial-gradient(circle at 94% 8%, rgba(232, 168, 88, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(22, 18, 36, 0.94), rgba(12, 10, 22, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 215, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

.private-card-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.private-card-panel__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.private-card-panel__copy span,
.class-skill-panel__head small,
.class-skill-panel__targets > span,
.class-skill-panel__result > span {
  color: #e8a858;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.private-card-panel__copy strong,
.class-skill-panel__head strong {
  color: #fff5d7;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.private-card-face {
  --private-card-glow: oklch(72% 0.14 84 / 0.2);
  --private-card-top: oklch(22% 0.045 232);
  --private-card-bottom: oklch(9% 0.035 238);
  --private-card-accent: oklch(73% 0.13 84);
  --private-card-metal: oklch(78% 0.14 84);
  --private-card-cream: oklch(95% 0.06 89);
  position: relative;
  isolation: isolate;
  width: clamp(104px, 29vw, 124px);
  min-width: clamp(104px, 29vw, 124px);
  aspect-ratio: 0.66;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 7px;
  padding: 10px 8px 9px;
  overflow: hidden;
  border-radius: 13px;
  border: 2px solid var(--private-card-metal);
  background:
    linear-gradient(90deg, transparent 0 5%, color-mix(in oklch, var(--private-card-metal) 28%, transparent) 5.5% 6.5%, transparent 7% 93%, color-mix(in oklch, var(--private-card-metal) 28%, transparent) 93.5% 94.5%, transparent 95%),
    repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in oklch, var(--private-card-accent) 16%, transparent) 8px 9px, transparent 9px 17px),
    repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in oklch, var(--private-card-accent) 8%, transparent) 13px 14px, transparent 14px 25px),
    radial-gradient(circle at 50% 41%, color-mix(in oklch, var(--private-card-accent) 18%, transparent), transparent 42%),
    radial-gradient(circle at 78% 7%, var(--private-card-glow), transparent 38%),
    linear-gradient(165deg, var(--private-card-top), var(--private-card-bottom));
  box-shadow:
    inset 0 0 0 1px oklch(96% 0.05 90 / 0.34),
    inset 0 0 0 5px oklch(5% 0.02 238 / 0.22),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.36),
    inset 0 -10px 20px oklch(5% 0.02 238 / 0.36),
    0 0 0 1px oklch(90% 0.11 86 / 0.22),
    0 0 18px color-mix(in oklch, var(--private-card-metal) 28%, transparent),
    0 9px 20px oklch(5% 0.02 238 / 0.56);
  text-align: center;
  color: var(--private-card-cream);
}

.private-card-face::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid color-mix(in oklch, var(--private-card-metal) 58%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(135deg, oklch(98% 0.04 92 / 0.1), transparent 30%),
    radial-gradient(circle at 50% 43%, transparent 0 34%, color-mix(in oklch, var(--private-card-metal) 72%, transparent) 34.8% 36.3%, transparent 37%),
    radial-gradient(circle at 50% 43%, transparent 0 44%, color-mix(in oklch, var(--private-card-metal) 34%, transparent) 44.6% 45.4%, transparent 46%),
    repeating-linear-gradient(135deg, transparent 0 10px, oklch(98% 0.04 92 / 0.045) 10px 11px);
  box-shadow:
    inset 0 0 18px color-mix(in oklch, var(--private-card-metal) 18%, transparent),
    inset 0 0 0 1px oklch(5% 0.02 238 / 0.3);
}

.private-card-face::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 7px;
  background:
    linear-gradient(var(--private-card-metal), var(--private-card-metal)) left top / 24px 1px no-repeat,
    linear-gradient(var(--private-card-metal), var(--private-card-metal)) right top / 24px 1px no-repeat,
    linear-gradient(var(--private-card-metal), var(--private-card-metal)) left bottom / 24px 1px no-repeat,
    linear-gradient(var(--private-card-metal), var(--private-card-metal)) right bottom / 24px 1px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in oklch, var(--private-card-metal) 60%, transparent), transparent) center 43% / 82% 1px no-repeat,
    linear-gradient(0deg, transparent, color-mix(in oklch, var(--private-card-metal) 45%, transparent), transparent) center 43% / 1px 52% no-repeat;
  opacity: 0.56;
}

.private-card-face:not(.private-card-face--compact) {
  width: clamp(118px, 31vw, 136px);
  min-width: clamp(118px, 31vw, 136px);
  padding: 11px 9px 10px;
}

.private-card-face__label {
  position: relative;
  align-self: start;
  justify-self: center;
  z-index: 1;
  width: calc(100% - 28px);
  max-width: calc(100% - 28px);
  min-width: 68px;
  padding: 5px 8px 5px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--private-card-metal) 72%, transparent);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 7px, color-mix(in oklch, var(--private-card-metal) 42%, transparent) 7px 8px, transparent 8px calc(100% - 8px), color-mix(in oklch, var(--private-card-metal) 42%, transparent) calc(100% - 8px) calc(100% - 7px), transparent calc(100% - 7px)),
    linear-gradient(180deg, oklch(98% 0.04 92 / 0.12), oklch(5% 0.02 238 / 0.38)),
    oklch(11% 0.035 238 / 0.88);
  color: var(--private-card-cream);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  box-shadow:
    0 0 12px color-mix(in oklch, var(--private-card-metal) 24%, transparent),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.24);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-card-face__label::before,
.private-card-face__label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid color-mix(in oklch, var(--private-card-metal) 68%, transparent);
  background: oklch(11% 0.035 238);
  transform: translateY(-50%) rotate(45deg);
}

.private-card-face__label::before {
  left: 8px;
}

.private-card-face__label::after {
  right: 8px;
}

.private-card-face:not(.private-card-face--compact) .private-card-face__label {
  width: calc(100% - 30px);
  max-width: calc(100% - 30px);
  font-size: 11px;
}

.private-card-face__value {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  z-index: 1;
  width: 100%;
  min-height: 72px;
  color: var(--private-card-cream);
  font-family: var(--font-display);
  font-size: 33px;
  line-height: 0.95;
  text-shadow:
    0 2px 0 oklch(8% 0.025 238 / 0.6),
    0 0 14px color-mix(in oklch, var(--private-card-accent) 48%, transparent);
  transform: translateY(-1px);
}

.private-card-face__value::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(82px, calc(100% - 8px));
  aspect-ratio: 1;
  border: 1.5px solid color-mix(in oklch, var(--private-card-metal) 78%, transparent);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, color-mix(in oklch, var(--private-card-accent) 16%, transparent), transparent 60%),
    oklch(5% 0.02 238 / 0.22);
  box-shadow:
    0 0 18px color-mix(in oklch, var(--private-card-metal) 25%, transparent),
    inset 0 0 14px oklch(5% 0.02 238 / 0.3);
}

.private-card-face:not(.private-card-face--compact) .private-card-face__value {
  min-height: 78px;
  font-size: 37px;
}

.private-card-face__mark {
  position: absolute;
  left: 50%;
  bottom: 36px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1.4px solid color-mix(in oklch, var(--private-card-metal) 76%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 32%, oklch(98% 0.04 92 / 0.22), transparent 44%),
    linear-gradient(180deg, oklch(20% 0.05 238 / 0.92), oklch(8% 0.035 238 / 0.96));
  color: var(--private-card-cream);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.05em;
  box-shadow:
    0 0 12px color-mix(in oklch, var(--private-card-metal) 24%, transparent),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.18);
  transform: translateX(-50%);
}

.private-card-face__mark .svg-icon {
  display: grid;
  width: 18px;
  height: 18px;
}

.private-card-face:not(.private-card-face--compact) .private-card-face__mark {
  bottom: 39px;
  width: 34px;
  height: 34px;
}

.private-card-face__footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 1;
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  min-height: 27px;
  padding: 5px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--private-card-metal) 68%, transparent);
  border-radius: 5px;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--private-card-accent) 16%, transparent), oklch(5% 0.02 238 / 0.44)),
    oklch(10% 0.035 238 / 0.84);
  color: var(--private-card-cream);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.2),
    0 0 12px color-mix(in oklch, var(--private-card-metal) 18%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-card-face__footer .svg-icon {
  display: grid;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.private-card-face:not(.private-card-face--compact) .private-card-face__footer {
  width: calc(100% - 16px);
  max-width: calc(100% - 16px);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-card-face--cash {
  --private-card-glow: oklch(72% 0.15 154 / 0.24);
  --private-card-top: oklch(28% 0.1 155);
  --private-card-bottom: oklch(11% 0.055 158);
  --private-card-accent: oklch(73% 0.17 154);
  --private-card-metal: oklch(78% 0.14 84);
}

.private-card-face--tip {
  --private-card-glow: oklch(70% 0.15 250 / 0.24);
  --private-card-top: oklch(26% 0.085 248);
  --private-card-bottom: oklch(10% 0.045 250);
  --private-card-accent: oklch(70% 0.16 250);
  --private-card-metal: oklch(78% 0.14 84);
}

.private-card-face--crisis {
  --private-card-glow: oklch(64% 0.18 28 / 0.26);
  --private-card-top: oklch(26% 0.105 28);
  --private-card-bottom: oklch(10% 0.055 28);
  --private-card-accent: oklch(64% 0.18 28);
  --private-card-metal: oklch(78% 0.14 84);
  background:
    linear-gradient(90deg, transparent 0 6%, color-mix(in oklch, var(--private-card-accent) 18%, transparent) 6.5% 7%, transparent 7.5% 92%, color-mix(in oklch, var(--private-card-accent) 18%, transparent) 93% 93.5%, transparent 94%),
    repeating-linear-gradient(-12deg, transparent 0 8px, color-mix(in oklch, var(--private-card-accent) 18%, transparent) 9px 12px),
    radial-gradient(circle at 50% 43%, rgba(255, 103, 118, 0.14), transparent 42%),
    radial-gradient(circle at 78% 10%, var(--private-card-glow), transparent 42%),
    linear-gradient(135deg, var(--private-card-top), var(--private-card-bottom));
}

.private-card-face--back,
.private-card-face--hidden {
  --private-card-accent: oklch(78% 0.14 84);
  --private-card-top: oklch(22% 0.045 238);
  --private-card-bottom: oklch(9% 0.035 242);
  --private-card-metal: oklch(78% 0.14 84);
  color: var(--private-card-cream);
  background:
    radial-gradient(circle at 50% 43%, oklch(78% 0.14 84 / 0.22), transparent 38%),
    linear-gradient(90deg, transparent 0 6%, oklch(78% 0.14 84 / 0.15) 6.5% 7%, transparent 7.5% 92%, oklch(78% 0.14 84 / 0.15) 93% 93.5%, transparent 94%),
    repeating-linear-gradient(135deg, oklch(20% 0.045 238), oklch(20% 0.045 238) 9px, oklch(12% 0.04 242) 9px, oklch(12% 0.04 242) 18px);
}

.private-card-face--back .private-card-face__value,
.private-card-face--hidden .private-card-face__value {
  min-height: 75px;
  font-size: 48px;
  transform: translateY(8px);
}

.private-card-face--back .private-card-face__mark,
.private-card-face--hidden .private-card-face__mark {
  top: 49px;
  bottom: auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  font-size: 9px;
  color: var(--private-card-cream);
}

.private-card-face--crisis .private-card-face__value::before {
  clip-path: polygon(50% 4%, 96% 88%, 4% 88%);
  border-radius: 10px;
}

.private-card-face--crisis .private-card-face__mark {
  color: oklch(76% 0.17 38);
}

.class-skill-panel__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.class-skill-panel__head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.class-skill-panel__targets {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.class-skill-panel__result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid oklch(62% 0.09 84 / 0.22);
  border-radius: 8px;
  background: oklch(99% 0.02 92 / 0.7);
}

.variant-decision {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid oklch(70% 0.12 84 / 0.38);
  background:
    radial-gradient(circle at 90% 12%, oklch(86% 0.16 84 / 0.24), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.024 92), oklch(91% 0.05 92));
  color: var(--toy-ink);
}

.variant-decision strong {
  color: var(--toy-ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.variant-decision span {
  color: oklch(38% 0.055 230);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
}

.variant-decision--short {
  border-color: oklch(66% 0.15 302 / 0.46);
  background:
    radial-gradient(circle at 90% 12%, oklch(72% 0.15 302 / 0.22), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.024 92), oklch(92% 0.045 300));
}

.variant-decision--bailout {
  border-color: oklch(68% 0.13 205 / 0.46);
  background:
    radial-gradient(circle at 90% 12%, oklch(78% 0.13 205 / 0.22), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.024 92), oklch(92% 0.04 205));
}

.variant-decision--leverage {
  border-color: oklch(76% 0.17 84 / 0.58);
  background:
    radial-gradient(circle at 90% 12%, oklch(86% 0.17 84 / 0.28), transparent 38%),
    linear-gradient(180deg, oklch(99% 0.035 92), oklch(91% 0.08 86));
}

.mini-skill-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid oklch(58% 0.09 84 / 0.26);
  color: var(--toy-ink);
  background: oklch(99% 0.025 92 / 0.9);
  box-shadow: 0 3px 0 oklch(48% 0.08 84 / 0.14);
  font-size: 12px;
  font-weight: 950;
}

.mini-skill-button--wide {
  width: 100%;
}

.mini-skill-button:disabled {
  opacity: 0.48;
  transform: none;
}

.chip--class-hidden {
  border-color: oklch(66% 0.06 230 / 0.34);
  background: oklch(30% 0.04 230 / 0.22);
  color: oklch(86% 0.04 230);
}

.class-badge--hidden {
  background: linear-gradient(180deg, oklch(36% 0.04 230), oklch(20% 0.04 230));
  color: oklch(96% 0.035 88);
}

.hidden-class-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1.5px dashed oklch(62% 0.08 230 / 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 8%, oklch(86% 0.13 84 / 0.18), transparent 36%),
    oklch(24% 0.04 230 / 0.06);
  color: var(--toy-ink);
}

.hidden-class-notice strong,
.hidden-class-notice small {
  display: block;
  line-height: 1.15;
}

.hidden-class-notice strong {
  font-size: 13px;
  font-weight: 950;
}

.hidden-class-notice small {
  margin-top: 3px;
  color: oklch(38% 0.055 230);
  font-size: 11px;
  font-weight: 800;
}

.hidden-class-notice--compact {
  padding: 8px;
}

.card--frozen {
  box-shadow:
    0 0 0 2px oklch(88% 0.1 205 / 0.72),
    0 0 18px oklch(72% 0.14 205 / 0.48),
    0 10px 22px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.card__lock {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid oklch(98% 0.02 92 / 0.72);
  background: oklch(34% 0.1 218 / 0.82);
  color: oklch(98% 0.02 92);
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
}

.class-skill-drawer {
  position: fixed;
  left: calc(env(safe-area-inset-left) + 10px);
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  z-index: 115;
  display: grid;
  grid-template-columns: auto;
  align-items: end;
  gap: 8px;
  pointer-events: none;
}

.app--commercial-mobile.app--mode-choosing .class-skill-drawer {
  bottom: calc(72px + max(10px, env(safe-area-inset-bottom)) + var(--visual-viewport-offset) + 156px);
}

.class-skill-drawer.is-open {
  grid-template-columns: auto minmax(0, 1fr);
}

.class-skill-drawer__toggle,
.class-skill-action {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.class-skill-drawer__toggle {
  pointer-events: auto;
  width: 52px;
  min-height: 72px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 2px solid oklch(74% 0.13 84 / 0.68);
  background:
    radial-gradient(circle at 50% 8%, oklch(91% 0.13 84 / 0.22), transparent 32%),
    linear-gradient(180deg, oklch(23% 0.045 238 / 0.96), oklch(10% 0.035 242 / 0.98));
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.2),
    0 0 0 3px oklch(74% 0.13 84 / 0.12),
    0 8px 20px oklch(5% 0.02 238 / 0.48);
}

.class-skill-drawer--ready .class-skill-drawer__toggle {
  border-color: oklch(80% 0.15 84 / 0.84);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.24),
    0 0 0 3px oklch(80% 0.15 84 / 0.18),
    0 0 24px oklch(77% 0.16 84 / 0.36),
    0 8px 20px oklch(5% 0.02 238 / 0.5);
}

.class-skill-drawer__toggle span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid oklch(74% 0.13 84 / 0.38);
  background: oklch(13% 0.04 238 / 0.9);
  color: oklch(98% 0.04 92);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 950;
}

.class-skill-drawer__toggle strong {
  writing-mode: vertical-rl;
  color: oklch(94% 0.06 90);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.class-skill-drawer__panel {
  pointer-events: auto;
  width: min(340px, calc(100vw - 76px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid color-mix(in oklab, var(--player-accent) 36%, oklch(74% 0.13 84));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in oklab, var(--player-accent) 24%, transparent), transparent 36%),
    linear-gradient(180deg, oklch(18% 0.045 238 / 0.97), oklch(9% 0.035 242 / 0.98));
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.14),
    0 0 0 4px oklch(74% 0.13 84 / 0.14),
    0 18px 40px oklch(5% 0.02 238 / 0.62);
  backdrop-filter: blur(12px);
}

.class-skill-drawer__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.class-skill-drawer__head small,
.class-skill-drawer__hint,
.class-private-strip > span,
.class-intel-row > span {
  color: oklch(78% 0.12 84);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

.class-skill-drawer__head strong {
  display: block;
  margin-top: 2px;
  color: oklch(96% 0.055 90);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
}

.class-skill-drawer__panel p,
.class-passive-note {
  margin: 0;
  color: oklch(86% 0.04 90 / 0.88);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.class-skill-drawer__panel p strong {
  color: oklch(82% 0.13 84);
  font-weight: 950;
}

.class-private-strip,
.class-intel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: oklch(13% 0.04 238 / 0.7);
  border: 1px solid oklch(70% 0.12 84 / 0.24);
}

.class-action-group,
.class-intel-results {
  display: grid;
  gap: 8px;
}

.class-action-group > strong {
  color: oklch(96% 0.055 90);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

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

.class-target-grid--empty {
  grid-template-columns: 1fr;
  padding: 8px;
  border-radius: 8px;
  background: oklch(11% 0.035 238 / 0.68);
  color: oklch(82% 0.05 90 / 0.74);
  font-size: 11px;
  font-weight: 850;
}

.class-skill-action {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid oklch(70% 0.12 84 / 0.36);
  background:
    radial-gradient(circle at 92% 12%, oklch(77% 0.14 84 / 0.16), transparent 36%),
    linear-gradient(180deg, oklch(20% 0.045 238 / 0.9), oklch(12% 0.035 242 / 0.94));
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.12),
    0 3px 0 oklch(6% 0.02 238 / 0.42);
}

.class-skill-action__text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.class-skill-action strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-skill-action__reason {
  overflow: hidden;
  color: oklch(78% 0.055 88 / 0.78);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-skill-action__meta {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: oklch(21% 0.05 230 / 0.82);
  color: oklch(98% 0.04 92);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 950;
}

.class-skill-action:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  box-shadow: none;
}

.class-skill-action--ready {
  border-color: oklch(76% 0.16 145 / 0.52);
}

.class-skill-coach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid oklch(80% 0.16 84 / 0.72);
  border-radius: 12px;
  background:
    linear-gradient(90deg, oklch(76% 0.15 84 / 0.18), transparent 34%),
    radial-gradient(circle at 10% 0%, oklch(78% 0.13 84 / 0.24), transparent 42%),
    linear-gradient(180deg, oklch(20% 0.05 238 / 0.96), oklch(9% 0.035 242 / 0.96));
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.18),
    0 0 0 1px oklch(78% 0.14 84 / 0.18),
    0 10px 22px oklch(5% 0.02 238 / 0.42);
}

.class-skill-coach__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid oklch(80% 0.16 84 / 0.58);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 18%, oklch(88% 0.13 88 / 0.32), transparent 46%),
    oklch(9% 0.035 242 / 0.82);
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 oklch(98% 0.04 92 / 0.16);
}

.class-skill-coach__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  color: oklch(94% 0.055 90);
  line-height: 1.12;
}

.class-skill-coach__copy strong {
  overflow: hidden;
  color: oklch(97% 0.055 90);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-skill-coach__copy small {
  overflow: hidden;
  color: oklch(83% 0.09 84);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-skill-coach__open,
.class-skill-coach__dismiss {
  appearance: none;
  min-width: 44px;
  min-height: 38px;
  border: 1px solid oklch(84% 0.16 84 / 0.74);
  border-radius: 10px;
  background: linear-gradient(180deg, oklch(72% 0.15 84), oklch(58% 0.14 74));
  color: oklch(14% 0.035 72);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.4),
    0 7px 16px oklch(5% 0.02 238 / 0.32);
}

.class-skill-coach__dismiss {
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  border-color: oklch(76% 0.13 84 / 0.38);
  background: oklch(7% 0.03 242 / 0.42);
  color: oklch(94% 0.055 90);
  box-shadow: none;
}

.class-intel-row strong {
  color: oklch(96% 0.055 90);
  font-size: 12px;
  font-weight: 950;
}

.class-private-strip strong,
.player-row__public-private strong {
  min-width: 0;
  overflow: hidden;
  color: oklch(96% 0.055 90);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-intel-row--card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.player-row__public-private {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid oklch(72% 0.13 84 / 0.42);
  background: oklch(96% 0.045 92 / 0.16);
}

.player-row__public-private > span {
  color: oklch(90% 0.06 88);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
}

.class-reveal-burst {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, color-mix(in oklab, var(--player-accent) 28%, transparent), transparent 38%),
    radial-gradient(circle at 50% 50%, oklch(12% 0.045 230 / 0.82), oklch(8% 0.035 230 / 0.92));
  transition: opacity 180ms ease-out;
}

.class-reveal-burst.is-active {
  opacity: 1;
}

.class-reveal-burst.is-leaving {
  opacity: 0;
  transition-duration: 420ms;
}

.class-reveal-burst__panel {
  width: min(420px, calc(100vw - 36px));
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 28px 22px;
  border-radius: 16px;
  border: 3px solid color-mix(in oklab, var(--player-accent) 38%, oklch(82% 0.17 84));
  background:
    radial-gradient(circle at 50% 0%, oklch(99% 0.035 92 / 0.36), transparent 34%),
    linear-gradient(180deg, oklch(24% 0.055 230), oklch(14% 0.045 230));
  color: oklch(98% 0.035 92);
  text-align: center;
  box-shadow:
    0 0 0 8px oklch(82% 0.16 84 / 0.18),
    0 0 56px color-mix(in oklab, var(--player-accent) 34%, transparent),
    0 26px 70px oklch(0% 0 0 / 0.48);
  transform: scale(0.82) rotateX(10deg);
  animation: classRevealPop 2200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.class-reveal-burst--skill .class-reveal-burst__panel {
  border-color: color-mix(in oklab, var(--player-accent) 54%, oklch(98% 0.04 92));
  animation-name: classSkillSlam;
}

.class-reveal-burst__headline {
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--player-accent) 36%, oklch(12% 0.04 230));
  color: oklch(99% 0.04 92);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.class-reveal-burst__code {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 24px;
  background: linear-gradient(180deg, oklch(92% 0.13 84), color-mix(in oklab, var(--player-accent) 50%, oklch(58% 0.12 64)));
  color: oklch(18% 0.05 230);
  font-family: var(--font-display);
  font-size: clamp(24px, 9vw, 42px);
  font-weight: 950;
  box-shadow:
    inset 0 3px 0 oklch(99% 0.03 92 / 0.72),
    0 14px 32px oklch(0% 0 0 / 0.32);
}

.class-reveal-burst__kicker,
.class-reveal-burst__player,
.class-reveal-burst__panel p {
  margin: 0;
  color: oklch(90% 0.06 88 / 0.88);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.class-reveal-burst__name {
  color: oklch(99% 0.04 92);
  font-family: var(--font-display);
  font-size: clamp(26px, 8vw, 44px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in oklab, var(--player-accent) 45%, transparent);
}

@keyframes classRevealPop {
  0% { transform: scale(0.78) rotateX(18deg); filter: blur(3px); }
  16% { transform: scale(1.06) rotateX(0); filter: blur(0); }
  68% { transform: scale(1) rotateX(0); }
  100% { transform: scale(0.98) rotateX(0); }
}

@keyframes classSkillSlam {
  0% { transform: translateY(42px) scale(0.72) rotateZ(-5deg); filter: blur(4px); }
  16% { transform: translateY(-8px) scale(1.08) rotateZ(2deg); filter: blur(0); }
  42% { transform: translateY(0) scale(1) rotateZ(0); }
  72% { transform: translateY(0) scale(1.02) rotateZ(0); }
  100% { transform: translateY(0) scale(0.98) rotateZ(0); }
}

.big-short-burst {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(100deg, oklch(8% 0.04 230 / 0.88) 0 18px, oklch(18% 0.08 28 / 0.9) 19px 34px),
    radial-gradient(circle at 50% 48%, color-mix(in oklab, var(--player-accent) 30%, transparent), transparent 42%);
  transition: opacity 160ms ease-out;
}

.big-short-burst.is-active {
  opacity: 1;
}

.big-short-burst.is-leaving {
  opacity: 0;
  transition-duration: 440ms;
}

.big-short-burst__ticker {
  position: absolute;
  top: 8%;
  left: -10%;
  display: flex;
  gap: 26px;
  min-width: 120%;
  padding: 10px 0;
  background: oklch(99% 0.02 92 / 0.92);
  color: oklch(40% 0.2 28);
  font-family: var(--font-mono);
  font-size: clamp(14px, 4vw, 22px);
  font-weight: 950;
  letter-spacing: 0.12em;
  transform: rotate(-8deg);
  animation: bigShortTicker 2.8s linear forwards;
}

.big-short-burst__panel {
  width: min(500px, calc(100vw - 32px));
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 30px 22px 24px;
  border-radius: 10px;
  border: 4px solid oklch(52% 0.22 28);
  background:
    radial-gradient(circle at 50% 0%, oklch(99% 0.02 92 / 0.8), transparent 36%),
    linear-gradient(180deg, oklch(96% 0.035 92), oklch(86% 0.08 84));
  color: oklch(18% 0.05 230);
  text-align: center;
  box-shadow:
    0 0 0 8px oklch(99% 0.02 92 / 0.32),
    0 0 58px oklch(58% 0.22 28 / 0.5),
    0 28px 80px oklch(0% 0 0 / 0.54);
  transform: rotate(-3deg) scale(0.8);
  animation: bigShortSlam 2600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.big-short-burst__stamp {
  padding: 6px 16px;
  border: 3px solid oklch(46% 0.22 28);
  border-radius: 4px;
  color: oklch(42% 0.22 28);
  font-family: var(--font-display);
  font-size: clamp(24px, 9vw, 58px);
  font-weight: 950;
  line-height: 0.95;
  text-transform: uppercase;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px oklch(99% 0.02 92 / 0.72);
}

.big-short-burst__name {
  color: oklch(18% 0.05 230);
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 46px);
  font-weight: 950;
  line-height: 1;
}

.big-short-burst__panel p {
  max-width: 34ch;
  margin: 0;
  color: oklch(30% 0.055 230);
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 850;
  line-height: 1.28;
}

.big-short-burst__tape {
  display: flex;
  gap: 6px;
  color: oklch(46% 0.22 28);
  font-size: 18px;
}

.big-short-burst__tape span {
  animation: bigShortTape 820ms ease-in-out calc(var(--i) * 55ms) infinite alternate;
}

@keyframes bigShortSlam {
  0% { transform: translateY(-70px) rotate(-8deg) scale(0.62); filter: blur(4px); }
  16% { transform: translateY(12px) rotate(3deg) scale(1.08); filter: blur(0); }
  28% { transform: translateY(0) rotate(-3deg) scale(1); }
  72% { transform: translateY(0) rotate(-2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(-3deg) scale(0.98); }
}

@keyframes bigShortTicker {
  0% { transform: translateX(-8%) rotate(-8deg); }
  100% { transform: translateX(8%) rotate(-8deg); }
}

@keyframes bigShortTape {
  0% { opacity: 0.45; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(4px); }
}

/* B3/B4: Bear Market + Black Swan full-screen bursts. */
.bear-burst,
.black-swan-burst {
  position: fixed;
  inset: 0;
  z-index: 332;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 160ms ease-out;
}

.bear-burst.is-active,
.black-swan-burst.is-active { opacity: 1; }

.bear-burst.is-leaving,
.black-swan-burst.is-leaving { opacity: 0; transition-duration: 460ms; }

.bear-burst__dim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, oklch(40% 0.16 305 / 0.62), transparent 58%),
    linear-gradient(180deg, oklch(14% 0.08 295 / 0.92), oklch(8% 0.05 290 / 0.95));
}

.bear-burst__arrows { position: absolute; inset: 0; }

.bear-burst__arrows span {
  position: absolute;
  top: -10vh;
  left: var(--x);
  color: oklch(72% 0.2 305);
  font-size: calc(34px * var(--s));
  font-weight: 950;
  text-shadow: 0 0 16px oklch(60% 0.2 305 / 0.8);
  animation: bearArrowFall 2.4s cubic-bezier(0.4, 0, 0.7, 1) var(--d) forwards;
}

@keyframes bearArrowFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(118vh) rotate(28deg); opacity: 0.2; }
}

.bear-burst__panel {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  width: min(440px, calc(100vw - 36px));
  padding: 30px 24px;
  border: 4px solid oklch(62% 0.2 304);
  border-radius: 14px;
  background: linear-gradient(180deg, oklch(40% 0.16 302), oklch(24% 0.13 296));
  box-shadow: 0 0 60px oklch(54% 0.2 304 / 0.6), 0 24px 70px oklch(0% 0 0 / 0.6);
  text-align: center;
  animation: bearPanelSlam 2600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bear-burst__kicker {
  color: oklch(86% 0.12 305);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.22em;
}

.bear-burst__title {
  color: oklch(98% 0.03 92);
  font-family: var(--font-display);
  font-size: clamp(34px, 11vw, 62px);
  font-weight: 950;
  line-height: 0.96;
  text-shadow: 0 0 26px oklch(70% 0.2 305 / 0.9);
}

.bear-burst__rule {
  color: oklch(90% 0.06 305);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 850;
}

@keyframes bearPanelSlam {
  0% { transform: translateY(-50px) scale(0.7); filter: blur(4px); }
  18% { transform: translateY(8px) scale(1.07); filter: blur(0); }
  30% { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

.black-swan-burst__void {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, oklch(20% 0.04 290 / 0.7), oklch(2% 0.01 280 / 0.99) 70%);
}

.black-swan-burst__flare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, oklch(99% 0 0 / 0.95), transparent 30%);
  animation: blackSwanFlare 760ms ease-out forwards;
}

@keyframes blackSwanFlare {
  0% { opacity: 0.95; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(2.6); }
}

.black-swan-burst__shards {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.black-swan-burst__shards span {
  position: absolute;
  color: oklch(78% 0.06 290);
  font-size: 30px;
  font-weight: 950;
  text-shadow: 0 0 14px oklch(60% 0.12 295 / 0.9);
  animation: blackSwanShard 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) forwards;
}

@keyframes blackSwanShard {
  0% { transform: rotate(var(--a)) translateY(0) scale(0.3); opacity: 0; }
  18% { opacity: 1; transform: rotate(var(--a)) translateY(-30vh) scale(1.1); }
  100% { transform: rotate(var(--a)) translateY(-92vh) scale(0.4); opacity: 0; }
}

.black-swan-burst__panel {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  width: min(460px, calc(100vw - 36px));
  padding: 34px 24px;
  border: 4px solid oklch(52% 0.1 295);
  border-radius: 14px;
  background: linear-gradient(180deg, oklch(16% 0.03 288), oklch(5% 0.01 282));
  box-shadow: 0 0 70px oklch(40% 0.1 295 / 0.7), 0 26px 90px oklch(0% 0 0 / 0.8);
  text-align: center;
  animation: blackSwanPanel 3200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.black-swan-burst__glyph {
  font-size: clamp(48px, 16vw, 96px);
  line-height: 0.8;
  color: oklch(90% 0.05 290);
  text-shadow: 0 0 30px oklch(70% 0.12 295);
  animation: blackSwanGlyph 3s ease-in-out forwards;
}

@keyframes blackSwanGlyph {
  0% { transform: scale(0.4) rotate(-30deg); opacity: 0; }
  20% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  32% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.black-swan-burst__kicker {
  color: oklch(72% 0.08 295);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.24em;
}

.black-swan-burst__title {
  color: oklch(98% 0.02 92);
  font-family: var(--font-display);
  font-size: clamp(38px, 13vw, 76px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: 0.04em;
  text-shadow: 0 0 34px oklch(70% 0.1 295 / 0.95);
}

.black-swan-burst__rule {
  max-width: 32ch;
  color: oklch(80% 0.04 290);
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 850;
  line-height: 1.3;
}

@keyframes blackSwanPanel {
  0% { transform: scale(0.6); filter: blur(6px); }
  14% { transform: scale(1.06); filter: blur(0); }
  24% { transform: scale(1); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bear-burst__arrows,
  .black-swan-burst__shards,
  .black-swan-burst__flare { display: none; }
  .bear-burst__panel,
  .black-swan-burst__panel,
  .black-swan-burst__glyph { animation: none; }
}

.lobby-class-select {
  display: grid;
  gap: 8px;
  width: 100%;
}

.decision-panel--pressure-reward .choice-button--nudged {
  animation: decisionRewardButton 1.05s ease-in-out infinite;
}

.decision-panel--pressure-danger .choice-button--nudged {
  animation: decisionDangerButton 0.74s ease-in-out infinite;
}

@keyframes decisionPressureSweep {
  0%, 28% { transform: translateX(-120%); }
  68%, 100% { transform: translateX(120%); }
}

@keyframes decisionRewardBloom {
  0%, 100% { transform: scale(0.82); opacity: 0.38; }
  50% { transform: scale(1.2); opacity: 0.78; }
}

@keyframes decisionDangerSiren {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.78; }
}

@keyframes decisionSignalFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}

@keyframes decisionSignalJolt {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(-2px) rotate(-4deg); }
  65% { transform: translateX(2px) rotate(4deg); }
}

@keyframes decisionRewardButton {
  0%, 100% {
    box-shadow:
      inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
      0 5px 0 oklch(55% 0.1 84 / 0.22),
      0 12px 20px var(--toy-shadow);
  }
  50% {
    box-shadow:
      0 0 0 4px oklch(86% 0.17 92 / 0.34),
      inset 0 2px 0 oklch(99% 0.02 92 / 0.95),
      0 7px 0 oklch(58% 0.13 84 / 0.32),
      0 20px 30px oklch(75% 0.15 92 / 0.32);
  }
}

@keyframes decisionDangerButton {
  0%, 100% {
    filter: saturate(1);
  }
  48% {
    filter: saturate(1.24) brightness(1.05);
    box-shadow:
      0 0 0 4px oklch(62% 0.18 34 / 0.28),
      inset 0 2px 0 oklch(99% 0.02 92 / 0.9),
      0 8px 0 oklch(54% 0.12 36 / 0.26),
      0 18px 28px oklch(62% 0.18 34 / 0.28);
  }
}

/* F23: round-end 路徑卡片視覺封盤 (灰階 + 70% opacity)，玩家一眼看出本輪結束 */
.app--quarter-over .path .card,
.app--quarter-over .temple-strip .card {
  filter: grayscale(0.55) brightness(0.92);
  opacity: 0.7;
  transition: filter 320ms ease-out, opacity 320ms ease-out;
}

/* HIGH fix (Sonnet review): .path 沒有 position 屬性，::after absolute 會逃逸到 board 蓋住整個棋盤
   需先把 .path 改 relative 才能 contain overlay */
.app--quarter-over .path,
.app--quarter-over .temple-strip {
  position: relative;
}

.app--quarter-over .path::after,
.app--quarter-over .temple-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(25% 0.04 230 / 0.06);
  pointer-events: none;
  border-radius: inherit;
  z-index: 4;
}

.decision-panel--spotlight .privacy-card,
.decision-panel--spotlight .voter-card {
  border-width: 2px;
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--player-accent, var(--gold)) 16%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.12);
}

.app--commercial-mobile .turn-callout {
  border: 3px solid color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 74%, oklch(99% 0.025 92));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 22%, transparent), transparent 56%),
    linear-gradient(180deg, oklch(99% 0.025 92), oklch(91% 0.055 92));
  color: var(--commercial-ink);
  animation-name: commercialTurnCalloutPulse;
  box-shadow:
    0 0 0 5px color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 20%, transparent),
    inset 0 2px 0 oklch(99% 0.03 92 / 0.95),
    0 5px 0 color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 34%, oklch(56% 0.08 84)),
    0 18px 32px var(--commercial-shadow);
}

.app--commercial-mobile .turn-callout--active-turn {
  border-color: color-mix(in oklch, var(--player-accent, var(--toy-coin)) 82%, oklch(99% 0.025 92));
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--player-accent, var(--toy-coin)) 28%, transparent),
    0 0 0 9px color-mix(in oklch, var(--player-accent, var(--toy-coin)) 22%, transparent),
    inset 0 0 0 2px oklch(99% 0.025 92 / 0.7),
    inset 0 12px 32px color-mix(in oklch, var(--player-accent, var(--toy-coin)) 16%, transparent),
    0 5px 0 color-mix(in oklch, var(--player-accent, var(--toy-coin)) 40%, oklch(58% 0.12 84 / 0.42)),
    0 18px 32px var(--commercial-shadow);
}

.app--commercial-mobile .turn-callout__kicker {
  color: color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 62%, var(--commercial-ink));
}

.app--commercial-mobile .turn-callout strong {
  color: var(--commercial-ink);
  text-shadow:
    0 2px 0 oklch(99% 0.025 92),
    0 0 24px color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 32%, transparent);
}

.app--commercial-mobile .turn-callout__avatar {
  border-color: color-mix(in oklch, var(--player-accent, var(--toy-coin)) 74%, oklch(99% 0.025 92));
  box-shadow:
    0 0 0 3px oklch(99% 0.025 92 / 0.7),
    0 4px 0 color-mix(in oklch, var(--player-accent, var(--toy-coin)) 34%, oklch(58% 0.12 84 / 0.3)),
    0 12px 18px var(--commercial-shadow);
}

.app--commercial-mobile .turn-callout small {
  color: oklch(38% 0.055 230);
}

.decision-meta span {
  display: block;
  max-width: 24ch;
}

.app--commercial-mobile .run-stage {
  border: 0;
  background:
    radial-gradient(circle at 18% 10%, oklch(99% 0.025 92 / 0.9), transparent 34%),
    linear-gradient(135deg, oklch(98% 0.035 92), oklch(89% 0.09 190) 58%, oklch(90% 0.1 145));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.025 92 / 0.92),
    0 5px 0 oklch(54% 0.1 190 / 0.2),
    0 14px 24px oklch(25% 0.06 230 / 0.14);
}

.app--commercial-mobile .run-stage__stat {
  background: oklch(99% 0.02 92 / 0.72);
  border: 1px solid oklch(62% 0.08 84 / 0.24);
  box-shadow: 0 3px 0 oklch(48% 0.08 84 / 0.12);
}

.app--commercial-mobile .run-stage__stat--cash {
  background: linear-gradient(180deg, oklch(99% 0.025 92 / 0.82), oklch(92% 0.09 92 / 0.78));
}

.app--commercial-mobile .run-stage__stat--risk {
  background: linear-gradient(180deg, oklch(99% 0.025 92 / 0.82), oklch(92% 0.08 42 / 0.78));
}

.app--commercial-mobile .run-stage__meter {
  background: oklch(45% 0.07 230 / 0.14);
}

.app--commercial-mobile .drama-banner {
  grid-template-columns: auto minmax(0, 1fr);
}

.app--commercial-mobile .drama-banner__label,
.app--commercial-mobile .drama-banner__detail {
  color: var(--commercial-ink);
}

/* F14 (Codex fix): commercial-mobile prefix 把 chip 樣式提升特異性勝過上方 .app--commercial-mobile .drama-banner */
.app--commercial-mobile .drama-banner--choice-stay,
.app--commercial-mobile .drama-banner--choice-leave {
  background: linear-gradient(180deg, oklch(95% 0.06 92), oklch(88% 0.09 84));
  border: 1px solid oklch(72% 0.13 84 / 0.6);
}

.app--commercial-mobile .drama-banner--choice-stay .drama-banner__detail,
.app--commercial-mobile .drama-banner--choice-leave .drama-banner__detail {
  font-size: 15px;
  font-weight: 900;
  color: oklch(38% 0.12 70);
  background: oklch(99% 0.02 92 / 0.85);
  border-radius: 999px;
  padding: 4px 12px;
  letter-spacing: 0.02em;
}

.app--commercial-mobile .path {
  gap: 12px;
  padding-top: 6px;
}

.app--turn-glow::before {
  content: "";
  position: fixed;
  inset: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  border: 3px solid color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 78%, oklch(99% 0.025 92));
  border-radius: 18px;
  pointer-events: none;
  z-index: 124;
  box-shadow:
    inset 0 0 0 2px oklch(99% 0.025 92 / 0.72),
    inset 0 0 28px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 28%, transparent),
    0 0 0 5px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 18%, transparent),
    0 0 34px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 52%, transparent);
  animation: activeTurnScreenGlow 1.35s ease-in-out infinite;
}

.app--turn-glow .primary-button--my-turn {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 72%, oklch(99% 0.025 92));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.92),
    0 0 0 4px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 18%, transparent),
    0 0 34px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 54%, transparent),
    0 9px 0 color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 42%, oklch(50% 0.11 78));
  animation: activeTurnButtonGlow 1.05s ease-in-out infinite;
}

.app--turn-glow .primary-button--my-turn::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 34%, transparent), transparent 70%);
  animation: activeTurnButtonHalo 1.05s ease-in-out infinite;
}

.card--pending-reveal {
  --pending-glow: var(--commercial-gold);
  --pending-ink: oklch(25% 0.05 230);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 3px solid color-mix(in oklch, var(--pending-glow) 78%, oklch(99% 0.025 92));
  background:
    radial-gradient(circle at 50% 18%, oklch(99% 0.025 92 / 0.92), transparent 30%),
    repeating-linear-gradient(135deg, oklch(31% 0.055 232), oklch(31% 0.055 232) 10px, oklch(24% 0.05 232) 10px, oklch(24% 0.05 232) 20px),
    linear-gradient(135deg, oklch(35% 0.06 232), oklch(19% 0.045 232));
  color: oklch(99% 0.025 92);
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--pending-glow) 24%, transparent),
    0 0 26px color-mix(in oklch, var(--pending-glow) 54%, transparent),
    inset 0 0 0 2px oklch(99% 0.025 92 / 0.38),
    inset 0 0 42px color-mix(in oklch, var(--pending-glow) 28%, transparent);
  animation: pendingCardCharge 1.5s ease-in-out infinite;
}

.card--pending-signal-green {
  --pending-glow: oklch(82% 0.19 145);
}

.card--pending-signal-gold {
  --pending-glow: oklch(86% 0.16 86);
}

.card--pending-signal-red {
  --pending-glow: oklch(66% 0.23 28);
}

.card--pending-signal-purple {
  --pending-glow: oklch(64% 0.2 310);
}

.card--pending-reveal::before,
.card--pending-reveal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
}

.card--pending-reveal::before {
  border: 2px solid color-mix(in oklch, var(--pending-glow) 76%, transparent);
  box-shadow:
    inset 0 0 16px color-mix(in oklch, var(--pending-glow) 46%, transparent),
    0 0 18px color-mix(in oklch, var(--pending-glow) 58%, transparent);
}

.card--pending-reveal::after {
  inset: -35%;
  background: conic-gradient(from 0deg, transparent 0 18%, color-mix(in oklch, var(--pending-glow) 78%, transparent) 22%, transparent 31% 100%);
  opacity: 0.42;
  animation: pendingCardSweep 1.5s linear infinite;
}

.card-back__edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--pending-glow) 0%, transparent), color-mix(in oklch, var(--pending-glow) 80%, transparent), color-mix(in oklch, var(--pending-glow) 0%, transparent)) top / 100% 4px no-repeat,
    linear-gradient(90deg, color-mix(in oklch, var(--pending-glow) 0%, transparent), color-mix(in oklch, var(--pending-glow) 80%, transparent), color-mix(in oklch, var(--pending-glow) 0%, transparent)) bottom / 100% 4px no-repeat,
    linear-gradient(0deg, color-mix(in oklch, var(--pending-glow) 0%, transparent), color-mix(in oklch, var(--pending-glow) 80%, transparent), color-mix(in oklch, var(--pending-glow) 0%, transparent)) left / 4px 100% no-repeat,
    linear-gradient(0deg, color-mix(in oklch, var(--pending-glow) 0%, transparent), color-mix(in oklch, var(--pending-glow) 80%, transparent), color-mix(in oklch, var(--pending-glow) 0%, transparent)) right / 4px 100% no-repeat;
  filter: blur(0.2px);
  z-index: 2;
}

.card-back__center {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 5px;
  height: 100%;
  text-align: center;
}

.card-back__center span,
.card-back__center em {
  font-size: 11px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(92% 0.04 92 / 0.82);
}

.card-back__center strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 0.95;
  color: oklch(99% 0.025 92);
  text-shadow:
    0 2px 0 oklch(14% 0.04 232 / 0.58),
    0 0 22px color-mix(in oklch, var(--pending-glow) 62%, transparent);
}

.card--pending-cash {
  --pending-glow: oklch(82% 0.18 145);
}

.card--pending-tip {
  --pending-glow: oklch(78% 0.14 205);
}

.card--pending-crisis {
  --pending-glow: oklch(72% 0.18 42);
}

.card--pending-crisis-boom {
  --pending-glow: oklch(66% 0.21 28);
}

.drama-banner--anticipation {
  border-color: color-mix(in oklch, var(--commercial-gold) 68%, oklch(99% 0.025 92));
  background:
    linear-gradient(90deg, oklch(99% 0.025 92 / 0.92), oklch(90% 0.1 84 / 0.86));
  box-shadow: 0 0 22px oklch(82% 0.17 84 / 0.22);
}

.decision-panel--auto-reveal {
  overflow: hidden;
  animation: autoRevealPanelPulse 1.1s ease-in-out infinite;
}

.auto-reveal-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 76px;
  padding: 14px;
  border-radius: 8px;
  border: 2px solid oklch(78% 0.16 84 / 0.58);
  color: #24160a;
  background:
    radial-gradient(circle at 50% 0%, oklch(88% 0.18 84 / 0.28), transparent 48%),
    linear-gradient(180deg, oklch(99% 0.03 92), oklch(91% 0.08 84));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.9),
    0 6px 0 oklch(56% 0.1 84 / 0.22),
    0 18px 28px oklch(25% 0.06 230 / 0.16);
  text-align: center;
}

.auto-reveal-card span {
  color: oklch(29% 0.04 230);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auto-reveal-card strong {
  color: #24160a;
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 38px);
  line-height: 0.95;
}

.auto-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 178;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  pointer-events: none;
  color: oklch(99% 0.025 92);
  background:
    radial-gradient(circle at 50% 44%, oklch(84% 0.18 84 / 0.26), transparent 33%),
    radial-gradient(circle at 50% 115%, oklch(12% 0.04 232 / 0.94), transparent 62%),
    oklch(11% 0.04 232 / 0.9);
  backdrop-filter: blur(10px) saturate(1.25);
  animation: autoRevealOverlayIn 220ms ease-out both;
}

.auto-reveal-overlay::before,
.auto-reveal-overlay::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.auto-reveal-overlay::before {
  inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 4px solid oklch(84% 0.18 84 / 0.88);
  border-radius: 24px;
  box-shadow:
    inset 0 0 34px oklch(84% 0.18 84 / 0.3),
    0 0 0 7px oklch(84% 0.18 84 / 0.18),
    0 0 58px oklch(84% 0.18 84 / 0.58);
  animation: autoRevealFrameSlam var(--auto-reveal-duration, 1900ms) ease-in-out infinite;
}

.auto-reveal-overlay::after {
  inset: -20%;
  background:
    conic-gradient(from 0deg, transparent 0 15%, oklch(99% 0.025 92 / 0.18) 18%, transparent 24% 48%, oklch(84% 0.18 84 / 0.24) 54%, transparent 60% 100%);
  opacity: 0.7;
  animation: autoRevealSpin var(--auto-reveal-duration, 1900ms) linear infinite;
}

.auto-reveal-overlay__wash {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, oklch(99% 0.025 92 / 0.045) 9px 10px),
    linear-gradient(90deg, transparent, oklch(99% 0.025 92 / 0.16), transparent);
  mix-blend-mode: screen;
  transform: translateX(-100%);
  animation: autoRevealScan var(--auto-reveal-duration, 1900ms) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.auto-reveal-overlay__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.auto-reveal-overlay__sparks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: oklch(92% 0.18 84);
  box-shadow: 0 0 18px oklch(92% 0.18 84 / 0.82);
  opacity: 0;
  transform: rotate(calc(var(--i) * 30deg)) translateX(38vw) scale(0.4);
  transform-origin: 0 0;
  animation: autoRevealSpark var(--auto-reveal-duration, 1900ms) ease-out infinite;
  animation-delay: calc(var(--i) * 55ms);
}

.auto-reveal-overlay__stage {
  position: relative;
  z-index: 3;
  width: min(90vw, 420px);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.auto-reveal-overlay__label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 999px;
  color: oklch(99% 0.025 92);
  border: 1px solid oklch(86% 0.17 84 / 0.62);
  background: oklch(14% 0.04 232 / 0.62);
  box-shadow: 0 0 24px oklch(86% 0.17 84 / 0.35);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auto-reveal-overlay__title {
  color: oklch(99% 0.025 92);
  font-family: var(--font-display);
  font-size: clamp(74px, 24vw, 128px);
  line-height: 0.78;
  text-shadow:
    0 5px 0 oklch(12% 0.04 232 / 0.82),
    0 0 30px oklch(86% 0.17 84 / 0.62),
    0 0 66px oklch(86% 0.17 84 / 0.42);
  animation: autoRevealTitleHit var(--auto-reveal-duration, 1900ms) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.auto-reveal-overlay__count {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px;
}

.auto-reveal-overlay__count span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--toy-ink);
  background: oklch(99% 0.025 92);
  box-shadow:
    0 4px 0 oklch(54% 0.1 84 / 0.34),
    0 0 20px oklch(86% 0.17 84 / 0.35);
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1;
  animation: autoRevealCountBeat var(--auto-reveal-duration, 1900ms) steps(1) infinite;
}

.auto-reveal-overlay__count span:nth-child(2) {
  animation-delay: calc(var(--auto-reveal-duration, 700ms) * 0.33);
}

.auto-reveal-overlay__count span:nth-child(3) {
  animation-delay: calc(var(--auto-reveal-duration, 700ms) * 0.66);
}

.auto-reveal-overlay__bot-progress {
  min-width: 86px;
  min-height: 54px;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 16px;
  color: oklch(98% 0.025 92);
  background: oklch(10% 0.035 232 / 0.72);
  border: 1px solid oklch(78% 0.16 145 / 0.52);
  box-shadow:
    inset 0 0 22px oklch(78% 0.16 145 / 0.12),
    0 0 22px oklch(78% 0.16 145 / 0.24);
}

.auto-reveal-overlay__bot-progress strong {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.9;
}

.auto-reveal-overlay__bot-progress span {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 950;
  opacity: 0.72;
}

.auto-reveal-overlay__stage p {
  max-width: 27ch;
  margin: 0;
  color: oklch(92% 0.04 92 / 0.88);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.auto-reveal-overlay--bot-only {
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 44%, oklch(84% 0.16 145 / 0.22), transparent 33%),
    radial-gradient(circle at 50% 115%, oklch(12% 0.04 232 / 0.94), transparent 62%),
    oklch(11% 0.04 232 / 0.9);
}

.auto-reveal-overlay--bot-only::before {
  border-color: oklch(78% 0.16 145 / 0.8);
  box-shadow:
    inset 0 0 34px oklch(78% 0.16 145 / 0.26),
    0 0 0 7px oklch(78% 0.16 145 / 0.16),
    0 0 58px oklch(78% 0.16 145 / 0.46);
}

.auto-reveal-overlay--bot-only .auto-reveal-overlay__label {
  border-color: oklch(78% 0.16 145 / 0.58);
  box-shadow: 0 0 24px oklch(78% 0.16 145 / 0.28);
}

.auto-reveal-overlay--bot-only .auto-reveal-overlay__title {
  font-size: clamp(54px, 18vw, 98px);
  text-shadow:
    0 5px 0 oklch(12% 0.04 232 / 0.82),
    0 0 30px oklch(78% 0.16 145 / 0.52),
    0 0 66px oklch(78% 0.16 145 / 0.36);
}

/* Wave 7: mixed bot+human mode — softer than bot-only, indicate "you're waiting on bots" */
.auto-reveal-overlay--mixed {
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 44%, oklch(80% 0.14 232 / 0.18), transparent 35%),
    radial-gradient(circle at 50% 115%, oklch(12% 0.04 232 / 0.88), transparent 60%),
    oklch(11% 0.04 232 / 0.85);
}

.auto-reveal-overlay--mixed::before {
  border-color: oklch(75% 0.14 232 / 0.7);
  box-shadow:
    inset 0 0 28px oklch(75% 0.14 232 / 0.22),
    0 0 0 5px oklch(75% 0.14 232 / 0.14),
    0 0 48px oklch(75% 0.14 232 / 0.4);
}

.auto-reveal-overlay--mixed .auto-reveal-overlay__label {
  border-color: oklch(75% 0.14 232 / 0.55);
  box-shadow: 0 0 20px oklch(75% 0.14 232 / 0.25);
}

.auto-reveal-overlay__bots {
  width: min(100%, 370px);
  display: grid;
  gap: 7px;
  margin: 3px 0 1px;
}

.auto-reveal-overlay__bot {
  --bot-color: oklch(78% 0.16 145);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  color: oklch(98% 0.025 92);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--bot-color) 26%, transparent), oklch(10% 0.035 232 / 0.72));
  border: 1px solid color-mix(in oklch, var(--bot-color) 58%, transparent);
  box-shadow:
    inset 0 0 18px color-mix(in oklch, var(--bot-color) 18%, transparent),
    0 0 22px color-mix(in oklch, var(--bot-color) 18%, transparent);
  opacity: 0.42;
  transform: translateY(8px) scale(0.98);
}

.auto-reveal-overlay__bot.is-thinking {
  opacity: 0.88;
  animation: botThinkingPulse 950ms ease-in-out infinite alternate;
}

.auto-reveal-overlay__bot.is-locked {
  opacity: 0.96;
  animation: botThinkLock 650ms cubic-bezier(0.16, 1.25, 0.3, 1) var(--bot-delay, 0ms) both;
}

.auto-reveal-overlay--fast .auto-reveal-overlay__bot.is-locked {
  animation-duration: 180ms;
}

.auto-reveal-overlay__bot-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid color-mix(in oklch, var(--bot-color) 80%, white);
  background: color-mix(in oklch, var(--bot-color) 18%, oklch(12% 0.04 232));
  box-shadow: 0 0 16px color-mix(in oklch, var(--bot-color) 35%, transparent);
}

.auto-reveal-overlay__bot-avatar .avatar {
  width: 100%;
  height: 100%;
}

.auto-reveal-overlay__bot-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  text-align: left;
}

.auto-reveal-overlay__bot b {
  min-width: 48px;
  color: color-mix(in oklch, var(--bot-color) 72%, white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auto-reveal-overlay__bot.is-thinking b {
  color: oklch(98% 0.025 92);
}

.auto-reveal-overlay__bot.is-waiting b {
  opacity: 0.62;
}

.auto-reveal-overlay__fast {
  pointer-events: auto;
  min-height: 44px;
  padding: 10px 18px;
  border-color: oklch(78% 0.16 145 / 0.72);
  color: oklch(98% 0.025 92);
  background:
    linear-gradient(180deg, oklch(26% 0.08 154 / 0.92), oklch(14% 0.04 232 / 0.88));
  box-shadow:
    0 6px 0 oklch(8% 0.03 232 / 0.5),
    0 0 26px oklch(78% 0.16 145 / 0.35);
}

@keyframes botThinkLock {
  0% {
    opacity: 0.28;
    transform: translateY(10px) scale(0.98);
    filter: saturate(0.8);
  }
  62% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
    filter: saturate(1.25);
  }
  100% {
    opacity: 0.96;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

@keyframes botThinkingPulse {
  0% {
    transform: translateY(4px) scale(0.99);
    box-shadow:
      inset 0 0 16px color-mix(in oklch, var(--bot-color) 18%, transparent),
      0 0 16px color-mix(in oklch, var(--bot-color) 18%, transparent);
  }
  100% {
    transform: translateY(0) scale(1.01);
    box-shadow:
      inset 0 0 22px color-mix(in oklch, var(--bot-color) 28%, transparent),
      0 0 30px color-mix(in oklch, var(--bot-color) 34%, transparent);
  }
}

.reveal-anticipation {
  --reveal-glow: var(--commercial-gold);
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  pointer-events: none;
  color: oklch(99% 0.025 92);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--reveal-glow) 26%, transparent), transparent 34%),
    radial-gradient(circle at 50% 110%, oklch(12% 0.04 232 / 0.9), transparent 58%),
    oklch(12% 0.04 232 / 0.86);
  backdrop-filter: blur(8px) saturate(1.18);
  animation: revealOverlayIn 260ms ease-out both;
}

.reveal-anticipation--cash,
.reveal-anticipation--signal-green {
  --reveal-glow: oklch(82% 0.18 145);
}

.reveal-anticipation--tip,
.reveal-anticipation--signal-gold {
  --reveal-glow: oklch(86% 0.16 86);
}

.reveal-anticipation--crisis,
.reveal-anticipation--crisis-boom,
.reveal-anticipation--signal-red {
  --reveal-glow: oklch(72% 0.18 42);
}

.reveal-anticipation--signal-purple {
  --reveal-glow: oklch(64% 0.2 310);
}

.reveal-anticipation__wash {
  position: absolute;
  inset: -18%;
  background:
    conic-gradient(from 0deg, transparent 0 18%, color-mix(in oklch, var(--reveal-glow) 34%, transparent) 22%, transparent 30% 58%, color-mix(in oklch, var(--reveal-glow) 26%, transparent) 64%, transparent 72% 100%);
  opacity: 0.48;
  animation: revealWashSpin 1.5s linear infinite;
}

.reveal-anticipation::before,
.reveal-anticipation::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.reveal-anticipation::before {
  inset: max(9px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  border: 3px solid color-mix(in oklch, var(--reveal-glow) 78%, oklch(99% 0.025 92));
  border-radius: 22px;
  box-shadow:
    inset 0 0 30px color-mix(in oklch, var(--reveal-glow) 32%, transparent),
    0 0 0 6px color-mix(in oklch, var(--reveal-glow) 18%, transparent),
    0 0 44px color-mix(in oklch, var(--reveal-glow) 58%, transparent);
  animation: revealFramePulse 1.5s ease-in-out infinite;
}

.reveal-anticipation::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, oklch(99% 0.025 92 / 0.12), transparent),
    repeating-linear-gradient(0deg, transparent 0 7px, oklch(99% 0.025 92 / 0.035) 8px 9px);
  mix-blend-mode: screen;
  opacity: 0.45;
  transform: translateX(-100%);
  animation: revealScanSweep 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.reveal-anticipation__stage {
  position: relative;
  z-index: 2;
  width: min(88vw, 390px);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.reveal-anticipation__label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  color: oklch(99% 0.025 92);
  border: 1px solid color-mix(in oklch, var(--reveal-glow) 58%, transparent);
  background: oklch(14% 0.04 232 / 0.58);
  box-shadow: 0 0 22px color-mix(in oklch, var(--reveal-glow) 28%, transparent);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reveal-anticipation__card {
  position: relative;
  width: min(74vw, 280px);
  aspect-ratio: 0.66;
  display: block;
  overflow: hidden;
  border: 4px solid color-mix(in oklch, var(--reveal-glow) 76%, oklch(99% 0.025 92));
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 18%, oklch(99% 0.025 92 / 0.74), transparent 24%),
    repeating-linear-gradient(135deg, oklch(32% 0.055 232), oklch(32% 0.055 232) 14px, oklch(22% 0.048 232) 14px, oklch(22% 0.048 232) 28px);
  box-shadow:
    0 0 0 8px color-mix(in oklch, var(--reveal-glow) 18%, transparent),
    0 0 58px color-mix(in oklch, var(--reveal-glow) 66%, transparent),
    inset 0 0 0 2px oklch(99% 0.025 92 / 0.42),
    inset 0 0 54px color-mix(in oklch, var(--reveal-glow) 34%, transparent);
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform, filter;
  animation: revealCardShowtime var(--reveal-duration, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal-anticipation__face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 4px;
  padding: 22px 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.reveal-anticipation__face--front {
  transform: rotateY(180deg);
}

.reveal-anticipation__edge {
  position: absolute;
  inset: 10px;
  border: 2px solid color-mix(in oklch, var(--reveal-glow) 72%, transparent);
  border-radius: 21px;
  box-shadow:
    inset 0 0 24px color-mix(in oklch, var(--reveal-glow) 42%, transparent),
    0 0 20px color-mix(in oklch, var(--reveal-glow) 58%, transparent);
}

.reveal-anticipation__freeze {
  position: absolute;
  inset: -18px;
  border-radius: 34px;
  border: 2px solid oklch(99% 0.025 92 / 0.7);
  opacity: 0;
  transform: scaleX(0.12);
  box-shadow:
    0 0 30px oklch(99% 0.025 92 / 0.6),
    0 0 50px color-mix(in oklch, var(--reveal-glow) 64%, transparent);
  animation: revealFreezeFlash var(--reveal-duration, 1800ms) steps(1, end) both;
}

.reveal-anticipation__shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -24px;
  height: 28px;
  border-radius: 50%;
  background: oklch(4% 0.025 232 / 0.74);
  filter: blur(10px);
  opacity: 0.4;
  transform: scaleX(0.72);
  animation: revealTableShadow var(--reveal-duration, 1800ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reveal-anticipation__face span {
  z-index: 1;
  grid-row: 2;
  color: oklch(92% 0.04 92 / 0.82);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reveal-anticipation__face strong {
  z-index: 1;
  grid-row: 3;
  color: oklch(99% 0.025 92);
  font-family: var(--font-display);
  font-size: clamp(84px, 28vw, 132px);
  line-height: 0.82;
  text-shadow:
    0 4px 0 oklch(10% 0.04 232 / 0.7),
    0 0 32px color-mix(in oklch, var(--reveal-glow) 68%, transparent);
}

.reveal-anticipation__stage h2 {
  margin: 0;
  color: oklch(99% 0.025 92);
  font-family: var(--font-display);
  font-size: clamp(34px, 11vw, 54px);
  line-height: 0.92;
  text-shadow:
    0 3px 0 oklch(10% 0.04 232 / 0.7),
    0 0 28px color-mix(in oklch, var(--reveal-glow) 52%, transparent);
}

.reveal-anticipation__stage p {
  max-width: 26ch;
  margin: 0;
  color: oklch(92% 0.04 92 / 0.86);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.app--commercial-mobile .card--latest {
  animation: commercialCardDeal 1850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile.app--card-impact .temple-strip {
  animation: commercialBoardImpact 1800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile.app--card-impact .decision-panel {
  animation: commercialPanelKick 1300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app--commercial-mobile.app--card-impact .decision-panel--confirming {
  animation: none;
  transform: none;
}

.app--commercial-mobile.app--card-impact .decision-panel--choosing {
  animation: none;
  transform: none;
}

.app--commercial-mobile.app--card-impact .decision-panel--handoff {
  animation: none;
  transform: none;
}

@keyframes runStageOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.56; }
  50% { transform: translate3d(18px, 10px, 0) scale(1.14); opacity: 0.88; }
}

@keyframes runStageCoin {
  0%, 100% { transform: translateY(0) rotate(-9deg) scale(1); }
  48% { transform: translateY(-7px) rotate(8deg) scale(1.08); }
}

@keyframes runStageHeat {
  0%, 100% { transform: translateY(0); filter: saturate(1); }
  50% { transform: translateY(-2px); filter: saturate(1.12); }
}

@keyframes runStageMeterPanic {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.28); }
}

@keyframes playerSpotlightPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.42; }
  50% { transform: scale(1.08); opacity: 0.72; }
}

@keyframes readyPanelPulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.06) brightness(1.02); }
}

@keyframes commercialChoicePulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.16) brightness(1.04); }
}

@keyframes commercialTurnCalloutPulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px oklch(86% 0.17 84 / 0.32),
      0 0 0 9px color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 16%, transparent),
      inset 0 2px 0 oklch(99% 0.03 92 / 0.95),
      0 5px 0 color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 34%, oklch(56% 0.08 84)),
      0 18px 32px var(--commercial-shadow);
  }
  50% {
    box-shadow:
      0 0 0 6px oklch(86% 0.17 84 / 0.42),
      0 0 0 12px color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 26%, transparent),
      inset 0 2px 0 oklch(99% 0.03 92 / 0.95),
      0 7px 0 color-mix(in oklch, var(--player-accent, var(--commercial-gold)) 42%, oklch(56% 0.08 84)),
      0 22px 38px var(--commercial-shadow);
  }
}

@keyframes activeTurnScreenGlow {
  0%, 100% {
    opacity: 0.76;
    transform: scale(1);
    box-shadow:
      inset 0 0 0 2px oklch(99% 0.025 92 / 0.72),
      inset 0 0 22px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 22%, transparent),
      0 0 0 5px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 16%, transparent),
      0 0 26px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 42%, transparent);
  }
  50% {
    opacity: 1;
    transform: scale(0.997);
    box-shadow:
      inset 0 0 0 3px oklch(99% 0.025 92 / 0.82),
      inset 0 0 34px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 34%, transparent),
      0 0 0 8px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 22%, transparent),
      0 0 42px color-mix(in oklch, var(--active-turn-accent, var(--commercial-gold)) 62%, transparent);
  }
}

@keyframes activeTurnButtonGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

@keyframes activeTurnButtonHalo {
  0%, 100% { opacity: 0.52; transform: scale(0.98); }
  50% { opacity: 0.9; transform: scale(1.06); }
}

@keyframes pendingCardCharge {
  0%, 100% {
    transform: translateY(0) rotateZ(-0.4deg) scale(1);
    filter: saturate(1.05) brightness(1);
  }
  50% {
    transform: translateY(-5px) rotateZ(0.6deg) scale(1.025);
    filter: saturate(1.28) brightness(1.08);
  }
}

@keyframes pendingCardSweep {
  to { transform: rotate(1turn); }
}

@keyframes autoRevealPanelPulse {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.16) brightness(1.04); }
}

@keyframes autoRevealOverlayIn {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes autoRevealFrameSlam {
  0%, 100% {
    opacity: 0.82;
    transform: scale(1);
  }
  38% {
    opacity: 1;
    transform: scale(0.986);
  }
}

@keyframes autoRevealSpin {
  to { transform: rotate(1turn); }
}

@keyframes autoRevealScan {
  0% { transform: translateX(-120%); opacity: 0.25; }
  45% { opacity: 0.82; }
  72%, 100% { transform: translateX(120%); opacity: 0.25; }
}

@keyframes autoRevealSpark {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateX(20vw) scale(0.2);
  }
  30% {
    opacity: 1;
    transform: rotate(calc(var(--i) * 30deg)) translateX(34vw) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateX(48vw) scale(0.3);
  }
}

@keyframes autoRevealTitleHit {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    letter-spacing: 0;
  }
  34% {
    transform: scale(1.1) rotate(-1.6deg);
    letter-spacing: 0.03em;
  }
  58% {
    transform: scale(0.96) rotate(1deg);
    letter-spacing: 0;
  }
}

@keyframes autoRevealCountBeat {
  0%, 32% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
    filter: brightness(1.12);
  }
  33%, 100% {
    opacity: 0.38;
    transform: translateY(0) scale(0.92);
    filter: brightness(0.78);
  }
}

@keyframes revealOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes revealWashSpin {
  to { transform: rotate(1turn); }
}

@keyframes revealFramePulse {
  0%, 100% {
    opacity: 0.76;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(0.995);
  }
}

@keyframes revealScanSweep {
  0% { transform: translateX(-120%); }
  64%, 100% { transform: translateX(120%); }
}

@keyframes revealCardShowtime {
  0% {
    transform: perspective(1000px) translateY(16px) rotateX(8deg) rotateY(-4deg) rotateZ(-1deg) scale(0.96);
    filter: saturate(1.08) brightness(0.96) blur(1px);
  }
  18% {
    transform: perspective(1000px) translateY(-8px) rotateX(4deg) rotateY(4deg) rotateZ(0.8deg) scale(1.025);
    filter: saturate(1.24) brightness(1.06) blur(0);
  }
  42% {
    transform: perspective(1000px) translateY(-14px) rotateX(0deg) rotateY(-5deg) rotateZ(-0.7deg) scale(1.045);
    filter: saturate(1.42) brightness(1.12);
  }
  62% {
    transform: perspective(1000px) translateY(-10px) rotateX(0deg) rotateY(38deg) rotateZ(0deg) scale(1.055);
    filter: saturate(1.34) brightness(1.08);
  }
  73%, 84% {
    transform: perspective(1000px) translateY(-8px) rotateX(0deg) rotateY(90deg) rotateZ(0deg) scale(1.06);
    filter: saturate(1.65) brightness(1.26) contrast(1.22);
  }
  94% {
    transform: perspective(1000px) translateY(30px) rotateX(10deg) rotateY(178deg) rotateZ(0deg) scale(1.14);
    filter: saturate(1.25) brightness(1.16);
  }
  100% {
    transform: perspective(1000px) translateY(8px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1.02);
    filter: saturate(1) brightness(1);
  }
}

@keyframes revealFreezeFlash {
  0%, 72% { opacity: 0; }
  73%, 84% { opacity: 1; }
  85%, 100% { opacity: 0; }
}

@keyframes revealTableShadow {
  0%, 58% {
    opacity: 0.28;
    transform: scaleX(0.64);
  }
  73%, 84% {
    opacity: 0.14;
    transform: scaleX(0.18);
  }
  94% {
    opacity: 0.82;
    transform: scaleX(1.16);
  }
  100% {
    opacity: 0.5;
    transform: scaleX(0.8);
  }
}

/* P2-C: handoff turn-callout slide-in + breathing avatar */
@keyframes commercialHandoffSlideIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    filter: blur(4px);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes commercialAvatarBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 3px oklch(99% 0.025 92 / 0.7),
      0 4px 0 color-mix(in oklch, var(--player-accent, var(--toy-coin)) 34%, oklch(58% 0.12 84 / 0.3)),
      0 12px 18px var(--commercial-shadow);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 0 5px oklch(99% 0.025 92 / 0.85),
      0 4px 0 color-mix(in oklch, var(--player-accent, var(--toy-coin)) 48%, oklch(58% 0.12 84 / 0.36)),
      0 16px 28px var(--commercial-shadow),
      0 0 32px color-mix(in oklch, var(--player-accent, var(--toy-coin)) 36%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile .decision-panel--handoff .turn-callout,
  .app--commercial-mobile .decision-panel--handoff .turn-callout__avatar {
    animation: none;
  }
}

@keyframes commercialCardDeal {
  0% {
    opacity: 0;
    transform: perspective(900px) translateY(132px) rotateX(56deg) rotateZ(-16deg) scale(0.48);
    filter: saturate(1.65) brightness(1.2) blur(6px);
  }
  24% {
    opacity: 1;
    transform: perspective(900px) translateY(-38px) rotateX(-18deg) rotateZ(9deg) scale(1.16);
    filter: saturate(1.38) brightness(1.12) blur(0);
  }
  44% {
    opacity: 1;
    transform: perspective(900px) translateY(16px) rotateX(9deg) rotateZ(-5deg) scale(0.94);
    filter: saturate(1.14) brightness(1.05) blur(0);
  }
  66% {
    transform: perspective(900px) translateY(-8px) rotateX(-4deg) rotateZ(3deg) scale(1.04);
  }
  84% {
    transform: perspective(900px) translateY(2px) rotateX(1deg) rotateZ(-1deg) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0) rotateZ(0) scale(1);
    filter: saturate(1) brightness(1);
  }
}

@keyframes commercialBoardImpact {
  0% { transform: translateY(0) scale(1) rotate(0deg); filter: saturate(1); }
  30% { transform: translateY(-12px) scale(1.024) rotate(-0.7deg); filter: saturate(1.22); }
  56% { transform: translateY(7px) scale(0.992) rotate(0.45deg); }
  76% { transform: translateY(-3px) scale(1.01) rotate(-0.2deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); filter: saturate(1); }
}

@keyframes commercialPanelKick {
  0% { transform: rotate(0deg) scale(1); }
  32% { transform: rotate(-1.8deg) scale(1.025); }
  62% { transform: rotate(1deg) scale(0.992); }
  100% { transform: rotate(0deg) scale(1); }
}

@media (max-width: 520px) {
  .app--commercial-mobile {
    padding-bottom: calc(122px + env(safe-area-inset-bottom));
  }

  .app--commercial-mobile .board {
    grid-template-rows: auto;
  }

  .app--commercial-mobile .leaderboard-rail {
    gap: 6px;
    padding: 8px;
    max-height: 128px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* P3-B: decision-state subtraction — drop the standings rail during the
     secret choice / handoff so the only focus is card + risk + the two choices. */
  .app--mode-choosing .leaderboard-rail,
  .app--mode-handoff .leaderboard-rail {
    display: none;
  }

  .app--commercial-mobile .leaderboard-rail__head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
  }

  .app--commercial-mobile .leaderboard-rail__head strong {
    justify-self: end;
    max-width: 18ch;
    font-size: 16px;
  }

  .app--commercial-mobile .leaderboard-list {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .app--commercial-mobile .leaderboard-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "rank name score";
    gap: 6px;
    min-width: 0;
    padding: 7px 8px;
  }

  .app--commercial-mobile .leaderboard-row__avatar,
  .app--commercial-mobile .leaderboard-row__meta {
    display: none;
  }

  .app--commercial-mobile .leaderboard-row__rank {
    min-width: 27px;
    font-size: 15px;
  }

  .app--commercial-mobile .leaderboard-row__name {
    font-size: 12px;
  }

  .app--commercial-mobile .leaderboard-row__score {
    font-size: 16px;
  }

  .app--commercial-mobile .player-table,
  .app--commercial-mobile .side {
    display: none;
  }

  .run-stage {
    padding: 10px;
  }

  .run-stage__ticker {
    font-size: 10px;
    padding-right: 48px;
  }

  .run-stage__stats {
    gap: 6px;
  }

  .run-stage__stat {
    padding: 8px 7px;
  }

  .run-stage__stat span {
    font-size: 9px;
  }

  .run-stage__stat strong {
    font-size: 26px;
  }

  .drama-banner {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .drama-banner__detail {
    justify-self: start;
    font-size: 12px;
  }

  .turn-callout {
    padding: 14px 10px;
  }

  .turn-callout strong {
    font-size: clamp(30px, 11vw, 42px);
  }

  .turn-callout small {
    font-size: 12px;
  }

  .app--commercial-mobile .path {
    flex-direction: row;
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    min-height: clamp(176px, 21vh, 202px);
    min-height: clamp(176px, 21dvh, 202px);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 4px 2px 10px;
  }

  .app--commercial-mobile .path .card {
    flex: 0 0 min(36vw, 148px);
    width: auto;
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(170px, 20vh, 196px);
    height: clamp(170px, 20dvh, 196px);
    scroll-snap-align: start;
  }

  .app--commercial-mobile .empty-path {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    min-height: clamp(170px, 20vh, 196px);
    min-height: clamp(170px, 20dvh, 196px);
  }

  .app--commercial-mobile .path .card__symbol {
    width: 76px;
    height: 90px;
    border-radius: 22px;
    font-size: 43px;
  }

  .app--commercial-mobile .path .card__symbol--cash .svg-icon {
    width: 30px;
    height: 30px;
  }

  .app--commercial-mobile .path .card__symbol-label {
    font-size: 13px;
  }

  .app--commercial-mobile .path .card__value {
    font-size: 30px;
  }

  .app--commercial-mobile .path .card__note {
    display: none;
  }

  .app--commercial-mobile .path .card__footer {
    min-height: 44px;
    justify-content: flex-end;
  }

  .app--commercial-mobile .path .card--cash {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(202px, 23vh, 228px);
    height: clamp(202px, 23dvh, 228px);
    padding-bottom: 64px;
  }

  .app--commercial-mobile .path .card--cash .card__art {
    align-self: center;
    transform: translateY(-34px);
  }

  .app--commercial-mobile .path .card--cash .card__symbol--cash {
    width: 66px;
    height: 66px;
    border-radius: 17px;
  }

  .app--commercial-mobile .path .card--cash .card__symbol--cash .svg-icon {
    width: 26px;
    height: 26px;
  }

  .app--commercial-mobile .path .card--cash .card__footer--cash {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 0;
    padding: 6px 5px;
    gap: 1px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .app--commercial-mobile .path .card__cash-kicker {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .app--commercial-mobile .path .card__cash-title {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1;
    text-overflow: ellipsis;
  }

  .app--commercial-mobile .path .card__cash-subtitle {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app--commercial-mobile .path .card--crisis {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(202px, 23vh, 228px);
    height: clamp(202px, 23dvh, 228px);
    padding-bottom: 64px;
  }

  .app--commercial-mobile .path .card--crisis .card__art {
    align-self: center;
    transform: translateY(-10px);
  }

  .app--commercial-mobile .path .card--crisis .card__symbol {
    width: 72px;
    height: 78px;
    border-radius: 19px;
    font-size: 40px;
  }

  .app--commercial-mobile .path .card--crisis .card__footer--hazard {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 0;
    padding: 6px 5px;
    gap: 1px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .app--commercial-mobile .path .card__hazard-kicker {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .app--commercial-mobile .path .card__hazard-title {
    font-size: clamp(17px, 4.8vw, 20px);
    line-height: 1;
  }

  .app--commercial-mobile .path .card__hazard-subtitle,
  .app--commercial-mobile .path .card__hazard-rule {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .app--commercial-mobile .decision-panel {
    padding: 11px;
  }

  .app--commercial-mobile .decision-panel .section-title {
    margin-bottom: 7px;
  }

  .app--commercial-mobile .decision-panel .section-title h2 {
    font-size: 20px;
  }

  .app--commercial-mobile .choice-stage {
    gap: 8px;
  }

  .app--commercial-mobile .player-status-list__row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 38px;
    padding: 5px 7px 5px 5px;
  }

  .app--commercial-mobile .player-status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .app--commercial-mobile .player-status-list--reveal {
    grid-template-columns: 1fr;
    /* clear the fixed heckle-bar rail pinned to the right edge so the
       加碼/套現 chip is never hidden behind it */
    padding-right: 50px;
  }

  .app--commercial-mobile .player-status-list__avatar {
    width: 30px;
    height: 30px;
  }

  .app--commercial-mobile .player-status-list__name {
    font-size: 13px;
  }

  .app--commercial-mobile .status-chip {
    min-height: 24px;
    padding: 4px 7px;
    font-size: 10px;
  }

  .app--commercial-mobile .quarter-progress {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .app--commercial-mobile .quarter-progress__timer,
  .app--commercial-mobile .quarter-progress__meta {
    text-align: left;
  }

  .app--commercial-mobile .private-card-panel,
  .app--commercial-mobile .class-skill-panel {
    padding: 8px;
    gap: 7px;
  }

  .app--commercial-mobile .private-card-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app--commercial-mobile .private-card-face {
    width: clamp(100px, 27vw, 114px);
    min-width: clamp(100px, 27vw, 114px);
    padding: 9px 7px 8px;
  }

  .app--commercial-mobile .private-card-face:not(.private-card-face--compact) {
    width: clamp(118px, 31vw, 132px);
    min-width: clamp(118px, 31vw, 132px);
    padding: 10px 8px 9px;
  }

  .app--commercial-mobile .private-card-face__value {
    font-size: 29px;
  }

  .app--commercial-mobile .private-card-face:not(.private-card-face--compact) .private-card-face__value {
    font-size: 34px;
  }

  .app--commercial-mobile .private-card-face:not(.private-card-face--compact) .private-card-face__footer {
    max-width: calc(100% - 6px);
    font-size: 10px;
  }

  .card-inspect-panel {
    padding: 16px 14px;
    gap: 10px;
  }

  .card-inspect-panel__title {
    font-size: clamp(24px, 8vw, 32px);
  }

  .card-inspect-panel__copy p {
    font-size: 13px;
    line-height: 1.4;
  }

  .app--commercial-mobile .class-skill-panel__targets {
    margin-inline: -2px;
    padding-inline: 2px;
  }

  .app--commercial-mobile .decision-panel--handoff .section-title,
  .app--commercial-mobile .decision-panel--handoff .emoji-bar {
    display: none;
  }

  .app--commercial-mobile .decision-panel--handoff {
    padding-bottom: 26px;
  }

  /* P2-C: Turn callout 主角感 — handoff 模式放大 avatar + 置中 + slide-in + breathing
     avatar 80px + name clamp(34px) 是避免跟 fixed ready button 重疊的上限 */
  .app--commercial-mobile .decision-panel--handoff .turn-callout {
    padding: 12px 14px 10px;
    gap: 4px;
    display: grid;
    justify-items: center;
    text-align: center;
    animation:
      commercialTurnCalloutPulse 2.6s ease-in-out infinite,
      commercialHandoffSlideIn 520ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .app--commercial-mobile .decision-panel--handoff .turn-callout__avatar {
    position: relative;
    top: auto;
    left: auto;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    animation: commercialAvatarBreath 2.4s ease-in-out infinite;
  }

  .app--commercial-mobile .turn-callout__avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .app--commercial-mobile .decision-panel--handoff .turn-callout__kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .app--commercial-mobile .decision-panel--handoff .turn-callout strong {
    font-size: clamp(28px, 9vw, 38px);
    line-height: 1.05;
  }

  .app--commercial-mobile .decision-panel--handoff .turn-callout small {
    display: none;
  }

  .app--commercial-mobile.app--mode-choosing .bottom-hud,
  .app--commercial-mobile.app--mode-handoff .bottom-hud {
    display: none;
  }

  /* v188: removed the old v73 rule that pinned the handoff 「輪到我了」 button
     with `position: fixed`. Since v184 the .action-strip is itself
     `position: sticky; bottom: 0`, so the whole handoff panel — turn-callout
     AND button — is already pinned reachable at the viewport bottom. The v73
     fixed button became redundant AND harmful: pulled out of flow it landed
     on top of the sticky-pinned turn-callout, covering the player name.
     Letting the button stay in normal flow stacks it below the name again. */

  .app--commercial-mobile .decision-panel--choosing .section-title,
  .app--commercial-mobile .decision-panel--choosing .decision-meta,
  .app--commercial-mobile .decision-panel--choosing .emoji-bar {
    display: none;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout {
    padding: 10px;
    gap: 5px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout strong {
    font-size: clamp(27px, 9vw, 36px);
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout small {
    display: none;
  }

  .app--commercial-mobile .choice-reminder {
    display: none;
  }

  .app--commercial-mobile .decision-pressure {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    z-index: 1;
    min-height: 52px;
    margin-top: 2px;
    padding: 8px 9px;
    gap: 8px;
  }

  .app--commercial-mobile .decision-pressure__signal {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .app--commercial-mobile .decision-pressure__signal .svg-icon {
    width: 18px;
    height: 18px;
  }

  .app--commercial-mobile .decision-pressure__copy strong {
    font-size: 14px;
  }

  .app--commercial-mobile .decision-pressure__copy span {
    font-size: 11px;
  }

  .app--commercial-mobile .decision-pressure__metric {
    min-width: 44px;
    padding: 5px 7px;
    font-size: 16px;
  }

  .app--commercial-mobile .choice-buttons {
    gap: 8px;
  }

  /* Wave 11 (2026-05-17): was padding-bottom: 218px to reserve space for the
     fixed-position buttons. Sticky positioning (below) lives in normal flow,
     so the big reservation is no longer needed; keep a small gutter so the
     gradient backdrop has room. */
  .app--commercial-mobile .decision-panel--choosing:not(.decision-panel--confirming) {
    padding-bottom: 18px;
  }

  /* Wave 11 fix (2026-05-17): position:fixed → position:sticky.
     Reason: Hank reported on iOS Safari with text-size enlarged the choice
     buttons became invisible. position:fixed + visual-viewport math is brittle
     under Safari text/page zoom — the calculated bottom offset can push the
     buttons off the visible area when visualViewport pans. Sticky uses the
     scroll container, so it stays correct under any zoom/pan combination
     and gracefully falls back to normal flow when content fits. */
  .app--commercial-mobile .decision-panel--choosing:not(.decision-panel--confirming) .choice-buttons {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 128;
    padding: 10px 0 12px;
    margin-top: 10px;
    background: linear-gradient(to top, var(--panel-strong) 72%, rgba(6, 6, 6, 0));
  }

  .app--commercial-mobile .decision-panel--choosing:not(.decision-panel--confirming) .leave-preview {
    display: none;
  }

  .app--commercial-mobile .choice-button {
    min-height: 70px;
    padding: 10px;
    padding-right: 56px;
  }

  .app--commercial-mobile .choice-locked {
    position: relative;
    z-index: 130;
    width: min(100%, 390px);
    padding: 10px;
    gap: 6px;
  }

  .app--commercial-mobile .decision-panel--confirming .turn-callout {
    padding: 8px;
    gap: 4px;
  }

  .app--commercial-mobile .decision-panel--confirming .turn-callout__avatar {
    width: 42px;
    height: 42px;
  }

  .app--commercial-mobile .decision-panel--confirming .turn-callout strong {
    font-size: clamp(24px, 8vw, 34px);
  }

  .app--commercial-mobile .decision-panel--confirming .turn-callout small {
    display: none;
  }

  .app--commercial-mobile .choice-locked__head {
    gap: 8px;
  }

  .app--commercial-mobile .choice-locked__label,
  .app--commercial-mobile .choice-locked__tag {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .app--commercial-mobile .choice-locked__choice {
    font-size: clamp(24px, 7.4vw, 32px);
  }

  .app--commercial-mobile .choice-locked__hint {
    display: none;
  }

  .app--commercial-mobile .choice-locked__actions .ghost-button,
  .app--commercial-mobile .choice-locked__actions .primary-button {
    min-height: 44px;
    font-size: 15px;
  }

  .app--commercial-mobile .leave-preview {
    gap: 7px;
  }

  .app--commercial-mobile .leave-preview p {
    display: none;
  }

  .bottom-hud {
    gap: 5px;
    padding: 6px;
    border-radius: 10px;
  }

  .bottom-hud__item {
    padding: 6px 4px;
  }

  .bottom-hud__item span {
    font-size: 9px;
  }

  .bottom-hud__item strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-stage::before,
  .run-stage::after,
  .decision-pressure,
  .decision-pressure::before,
  .decision-pressure::after,
  .decision-pressure__signal,
  .decision-panel--pressure-reward .choice-button--nudged,
  .decision-panel--pressure-danger .choice-button--nudged,
  .temple-strip--hot .run-stage,
  .temple-strip--critical .run-stage,
  .temple-strip--critical .run-stage__meter span,
  .turn-callout,
  .decision-panel--spotlight::before,
  .decision-panel--ready,
  .app--turn-glow::before,
  .app--turn-glow .primary-button--my-turn,
  .app--turn-glow .primary-button--my-turn::after,
  .decision-panel--auto-reveal,
  .auto-reveal-overlay,
  .auto-reveal-overlay::before,
  .auto-reveal-overlay::after,
  .auto-reveal-overlay__wash,
  .auto-reveal-overlay__sparks span,
  .auto-reveal-overlay__title,
  .auto-reveal-overlay__count span,
  .card--pending-reveal,
  .card--pending-reveal::after,
  .reveal-anticipation,
  .reveal-anticipation::before,
  .reveal-anticipation::after,
  .reveal-anticipation__wash,
  .reveal-anticipation__freeze,
  .reveal-anticipation__shadow,
  .reveal-anticipation__card {
    animation: none;
  }

  .app--commercial-mobile .card--latest,
  .app--commercial-mobile.app--card-impact .temple-strip,
  .app--commercial-mobile.app--card-impact .decision-panel,
  .app--commercial-mobile .drama-banner,
  .app--commercial-mobile .drama-banner::after,
  .app--commercial-mobile .choice-buttons,
  .app--commercial-mobile .choice-button,
  .app--commercial-mobile .choice-button::after,
  .treasure-burst.is-active .treasure-burst__stack,
  .treasure-burst.is-active .treasure-burst__big,
  .hazard-burst.is-active .hazard-burst__stack,
  .cashout-banner__coins span,
  .cashout-banner,
  .cashout-choice-burst,
  .cashout-choice-burst__panel,
  .cashout-choice-burst__panel::after,
  .cashout-choice-burst__coins span {
    animation: none;
  }
}

/* 2026-05-14: online co-play beta banner — 修了 deck broadcast 後仍有 race/disconnect
   edge cases (v1.1 P1 #1-#3), banner 管理用戶期待. 永遠顯示, 不可關. */
.online-beta-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(180deg, oklch(96% 0.06 92), oklch(92% 0.09 84));
  border-bottom: 1px solid oklch(70% 0.13 84 / 0.45);
  color: oklch(35% 0.08 64);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 oklch(99% 0.025 92 / 0.5);
}

.online-beta-banner__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: oklch(60% 0.18 38);
  color: oklch(99% 0.02 92);
  font-family: var(--font-display, system-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 1px 0 oklch(48% 0.14 36 / 0.4);
}

.online-beta-banner__copy {
  flex: 1;
  min-width: 0;
  color: oklch(36% 0.05 64);
}

/* Wave 6: inline coach for first-time players (round 1 only) */
.inline-coach {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 58px 10px 12px;
  background: linear-gradient(180deg, rgba(63, 191, 130, 0.16), rgba(63, 191, 130, 0.05));
  border-bottom: 1px solid rgba(63, 191, 130, 0.45);
  color: #d4ffe8;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  animation: inline-coach-slide 380ms ease-out;
}

.inline-coach__steps {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inline-coach__steps li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-coach__steps li b {
  color: #fff5d7;
  font-weight: 900;
}

.inline-coach__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(63, 191, 130, 0.85);
  color: #0a1f15;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 900;
}

.inline-coach__dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 245, 215, 0.25);
  background: rgba(0, 0, 0, 0.25);
  color: #fff5d7;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.inline-coach__dismiss:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 245, 215, 0.45);
}

@keyframes inline-coach-slide {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* v179 guided-mode topbar chip + auto-reveal continue button. The chip uses
   a warmer amber tone so it sits between the muted topbar neutrals and the
   alarming red of a danger state. */
.topbar--guided .brand h1,
.topbar--guided .topbar-brand-wordmark {
  display: none;
}

.guided-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 168, 88, 0.92), rgba(220, 132, 60, 0.92));
  border: 1px solid rgba(255, 200, 120, 0.8);
  color: #1f1206;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  animation: guided-chip-pulse 2200ms ease-in-out infinite alternate;
}
.guided-chip:hover {
  filter: brightness(1.05);
}
@keyframes guided-chip-pulse {
  from { box-shadow: 0 0 0 0 rgba(232, 168, 88, 0); }
  to   { box-shadow: 0 0 0 5px rgba(232, 168, 88, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .guided-chip { animation: none; }
}

.confirm-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(92, 196, 180, 0.92), rgba(46, 148, 136, 0.94));
  border: 1px solid rgba(170, 246, 233, 0.72);
  color: #041a17;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(7, 27, 24, 0.22), 0 8px 22px rgba(18, 87, 79, 0.22);
}

.confirm-chip:hover {
  filter: brightness(1.05);
}

.auto-reveal-overlay__continue {
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 999px;
}

/* v180: visual spotlight on the next-to-press button when guidedMode is on.
   Pulsing amber ring + an upward-pointing finger pseudo-element above the
   button so eyes are drawn even on a busy screen. Works on any button class
   because it's purely additive (z-index lift + box-shadow + ::before). */
.guided-spot {
  position: relative;
  z-index: 5;
  animation: guided-spot-ring 1400ms ease-in-out infinite;
  outline: 3px solid rgba(255, 200, 80, 0.55);
  outline-offset: 4px;
}
.guided-spot:not(.choice-button)::before {
  content: "👇";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: guided-spot-bounce 900ms ease-in-out infinite;
  pointer-events: none;
  z-index: 6;
}
.choice-buttons--guided::before {
  content: "👇";
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: guided-spot-bounce 900ms ease-in-out infinite;
  pointer-events: none;
  z-index: 7;
}
@keyframes guided-spot-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 80, 0.55), 0 0 18px 2px rgba(255, 200, 80, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 200, 80, 0.12), 0 0 28px 6px rgba(255, 200, 80, 0.65); }
}
@keyframes guided-spot-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .guided-spot { animation: none; outline-color: rgba(255, 200, 80, 0.7); }
  .guided-spot:not(.choice-button)::before,
  .choice-buttons--guided::before { animation: none; }
}

/* v181: CDS bet buttons in the overlay grid can have 3-6 spotlit at once
   (each enabled target gets one). Suppress the bouncing 👇 emoji on this
   surface — it'd stack into visual noise. Keep the pulsing ring so each
   enabled bet is still individually discoverable, and trim the outline
   offset so rings don't bleed into neighbouring target rows. */
.cds-overlay__place.guided-spot::before {
  display: none;
}
.cds-overlay__place.guided-spot {
  outline-offset: 2px;
}

/* Guided tutorial overlay: modal explanation card shown during 實戰教學 mode */
.guided-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 20px;
  animation: guided-tutorial-fade 250ms ease-out both;
}
@keyframes guided-tutorial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.guided-tutorial-card {
  position: relative;
  width: min(360px, 90vw);
  background: var(--panel-strong, rgba(6, 6, 6, 0.92));
  border: 1px solid oklch(40% 0.06 210 / 0.35);
  border-radius: 16px;
  padding: 24px 20px 20px;
  text-align: center;
  animation: guided-tutorial-slide 300ms ease-out both;
}
.guided-tutorial-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: oklch(50% 0.03 210 / 0.15);
  color: oklch(40% 0.04 210);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
@keyframes guided-tutorial-slide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.guided-tutorial-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: oklch(30% 0.08 210);
  margin-bottom: 12px;
}
.guided-tutorial-card__body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text, #e8e8e8);
  margin-bottom: 20px;
  text-align: left;
}
.guided-tutorial-card__body strong {
  color: oklch(32% 0.14 25);
  font-weight: 900;
}
.guided-tutorial-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.guided-tutorial-card__actions .primary-button {
  width: 100%;
}
.guided-tutorial-card__actions .ghost-button {
  font-size: 0.82rem;
  opacity: 0.7;
}

/* v177 next-action coach: persistent step-by-step "what to press next" chip
   that sits just above the action-strip. Always visible until dismissed via
   "隱藏" button. Neutral teal accent so it doesn't compete with the warmer
   CDS/coach hints. */
.action-coach {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  margin: 0 auto 6px;
  max-width: min(600px, 92vw);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(80, 180, 200, 0.18), rgba(40, 110, 130, 0.10));
  border: 1px solid rgba(120, 190, 210, 0.45);
  color: #e0fbff;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
  animation: inline-coach-slide 240ms ease-out;
}
.action-coach__icon {
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
}
.action-coach__text {
  flex: 1;
  min-width: 0;
}
.action-coach__text b {
  color: #ffe39a;
  font-weight: 900;
}
.action-coach__dismiss {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 245, 215, 0.32);
  background: rgba(0, 0, 0, 0.25);
  color: #e0fbff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.action-coach__dismiss:hover {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 245, 215, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .action-coach { animation: none; }
}

/* A2 (v174): one-line CDS-unlock hint shown after first R1 cash-out. Subtler
   than inline-coach (no green, less padding) so it reads as a heads-up not a
   guide. Uses the warmer accent that matches the CDS overlay palette. */
.cds-unlock-hint {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 58px 8px 12px;
  background: linear-gradient(180deg, rgba(232, 168, 88, 0.14), rgba(232, 168, 88, 0.04));
  border-bottom: 1px solid rgba(232, 168, 88, 0.45);
  color: #fff5d7;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 600;
  animation: inline-coach-slide 320ms ease-out;
}
.cds-unlock-hint__icon {
  font-size: 16px;
  line-height: 1.2;
}
.cds-unlock-hint__text {
  flex: 1;
}
.cds-unlock-hint__text b {
  color: #ffd070;
  font-weight: 900;
}
.cds-unlock-hint__dismiss {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 245, 215, 0.25);
  background: rgba(0, 0, 0, 0.25);
  color: #fff5d7;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cds-unlock-hint__dismiss:hover {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 245, 215, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .cds-unlock-hint { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inline-coach { animation: none; }
}

.async-replay-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: linear-gradient(180deg, oklch(96% 0.045 306), oklch(90% 0.055 292));
  border-bottom: 1px solid oklch(64% 0.11 302 / 0.42);
  color: oklch(24% 0.06 292);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  box-shadow: inset 0 -1px 0 oklch(99% 0.025 92 / 0.42);
}

.async-replay-banner__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: oklch(52% 0.15 300);
  color: oklch(99% 0.02 92);
  font-family: var(--font-display, system-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.async-replay-banner__copy {
  flex: 1;
  min-width: 0;
}

/* 競技感 C1-C7: live ranking + leader badge + streak chip + bust flash */
.player-row__rank-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 0 2px;
  flex-wrap: wrap;
}

.player-rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  background: oklch(92% 0.04 230 / 0.6);
  color: #24160a;
  font-family: var(--font-display, system-ui);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.player-rank-chip--1 {
  background: linear-gradient(180deg, oklch(95% 0.13 92), oklch(82% 0.16 84));
  color: oklch(28% 0.12 64);
  box-shadow: inset 0 1px 0 oklch(99% 0.025 92 / 0.7), 0 1px 0 oklch(48% 0.1 64 / 0.32);
}

.player-rank-chip--2 {
  background: linear-gradient(180deg, oklch(93% 0.025 230), oklch(82% 0.045 230));
  color: oklch(32% 0.04 230);
}

.player-rank-chip--3 {
  background: linear-gradient(180deg, oklch(91% 0.07 60), oklch(78% 0.1 50));
  color: oklch(30% 0.1 50);
}

.player-rank-chip--4,
.player-rank-chip--5,
.player-rank-chip--6,
.player-rank-chip--7,
.player-rank-chip--8 {
  background: oklch(86% 0.018 230 / 0.5);
  color: oklch(40% 0.03 230);
}

.leader-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(82% 0.16 84), oklch(74% 0.18 60));
  /* Phase 2A: 對比修正 — 白字 on 亮金 < 1.5:1 改深棕字 on 亮金 ≥ 7:1 */
  color: oklch(28% 0.12 64);
  font-family: var(--font-display, system-ui);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 oklch(99% 0.025 92 / 0.5);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.03 92 / 0.65),
    0 1px 0 oklch(48% 0.14 50 / 0.32),
    0 0 0 1px oklch(99% 0.02 92 / 0.42);
  animation: leaderBadgePulse 2.4s ease-in-out infinite;
}

@keyframes leaderBadgePulse {
  0%, 100% { box-shadow: inset 0 1px 0 oklch(99% 0.03 92 / 0.65), 0 1px 0 oklch(48% 0.14 50 / 0.32), 0 0 0 0 oklch(82% 0.16 84 / 0); }
  50%      { box-shadow: inset 0 1px 0 oklch(99% 0.03 92 / 0.65), 0 1px 0 oklch(48% 0.14 50 / 0.32), 0 0 0 5px oklch(82% 0.16 84 / 0.32); }
}

.player-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: oklch(94% 0.08 60 / 0.62);
  color: oklch(38% 0.15 50);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
}

/* C5: leader glow on avatar */
.player-row.is-leader .avatar,
.player-row.is-leader .player-row__head .avatar img {
  box-shadow:
    0 0 0 2px oklch(82% 0.16 84 / 0.6),
    0 0 12px oklch(82% 0.16 84 / 0.42);
  border-radius: 50%;
  animation: leaderAvatarGlow 2s ease-in-out infinite;
}

@keyframes leaderAvatarGlow {
  0%, 100% { box-shadow: 0 0 0 2px oklch(82% 0.16 84 / 0.6), 0 0 12px oklch(82% 0.16 84 / 0.42); }
  50%      { box-shadow: 0 0 0 4px oklch(82% 0.16 84 / 0.74), 0 0 20px oklch(82% 0.16 84 / 0.62); }
}

/* C6: bust shake + red flash on quarter-over crisis-boom */
.player-row.is-busted {
  animation: bustShake 600ms ease-out;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(82% 0.16 30 / 0.18));
}

@keyframes bustShake {
  0%, 100% { transform: translateX(0); background-color: transparent; }
  10%      { transform: translateX(-3px); background-color: oklch(65% 0.2 30 / 0.42); }
  20%, 60% { transform: translateX(3px); }
  30%, 50% { transform: translateX(-3px); }
  40%      { transform: translateX(3px); background-color: oklch(65% 0.2 30 / 0.62); }
  70%, 90% { transform: translateX(2px); }
  80%      { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .leader-badge,
  .player-row.is-leader .avatar,
  .player-row.is-leader .player-row__head .avatar img,
  .player-row.is-busted {
    animation: none;
  }
  .player-row.is-busted {
    background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(82% 0.16 30 / 0.12));
  }
}

/* 競技感 Phase 2B: C3 rank toast + C4 quarter leader callout + choice reminder */

.rank-toast {
  position: fixed;
  /* Phase 3 polish (Gemini Low): max() 防 iPhone 14/15 Pro Dynamic Island 卡邊緣;
     76px buffer 確保 iPhone Pro 系列也能落在 Dynamic Island 下方 */
  top: max(calc(env(safe-area-inset-top) + 64px), 76px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 220;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(94% 0.04 92));
  border: 1.5px solid var(--player-accent, oklch(74% 0.13 84));
  color: var(--toy-ink);
  font-family: var(--font-display, system-ui);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 14px oklch(20% 0.04 230 / 0.18),
    inset 0 1px 0 oklch(99% 0.025 92 / 0.6);
  opacity: 0;
  animation: rankToastIn 360ms cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
  pointer-events: none;
}

.rank-toast.is-leaving {
  animation: rankToastOut 600ms ease-in forwards;
}

.rank-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--player-accent, oklch(74% 0.13 84));
  color: oklch(99% 0.02 92);
  font-size: 11px;
  font-weight: 950;
  text-shadow: 0 1px 0 oklch(30% 0.06 230 / 0.4);
}

@keyframes rankToastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-32px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes rankToastOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

.leader-callout {
  position: fixed;
  inset: 0;
  z-index: 215;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: oklch(20% 0.04 230 / 0);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.leader-callout.is-active {
  opacity: 1;
  background: oklch(20% 0.04 230 / 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.leader-callout.is-leaving {
  opacity: 0;
}

.leader-callout__panel {
  display: grid;
  gap: 6px;
  padding: 18px 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, oklch(99% 0.02 92), oklch(94% 0.04 92));
  border: 2.5px solid var(--player-accent, oklch(74% 0.13 84));
  text-align: center;
  transform: scale(0.86);
  opacity: 0;
  box-shadow:
    0 10px 30px oklch(20% 0.04 230 / 0.32),
    inset 0 2px 0 oklch(99% 0.025 92 / 0.8),
    0 0 0 4px var(--player-accent, oklch(74% 0.13 84 / 0.42)) inset;
  transition: transform 320ms cubic-bezier(0.16, 1.2, 0.3, 1), opacity 220ms ease-out;
}

.leader-callout.is-active .leader-callout__panel {
  transform: scale(1);
  opacity: 1;
}

.leader-callout__kicker {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Phase 3 polish (Gemini Nit): 40% → 32% 提升對比 4.1:1 → 5.8:1 過 WCAG AA */
  color: oklch(32% 0.09 64);
}

.leader-callout__name {
  font-family: var(--font-display, system-ui);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 950;
  color: var(--toy-ink);
  line-height: 1.05;
}

.leader-callout__score {
  font-size: 13px;
  font-weight: 800;
  color: oklch(40% 0.06 218);
}

.leader-callout__score strong {
  font-family: var(--font-display, system-ui);
  font-size: 22px;
  color: var(--player-accent, oklch(60% 0.16 84));
  margin-left: 6px;
}

.choice-reminder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border: 1px solid oklch(68% 0.12 84 / 0.34);
  border-radius: 999px;
  background: oklch(99% 0.025 92 / 0.68);
  color: oklch(29% 0.04 230);
}

.choice-reminder__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--player-accent, oklch(70% 0.16 84));
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--player-accent, oklch(70% 0.16 84)) 18%, transparent);
}

.choice-reminder__hint {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .rank-toast,
  .rank-toast.is-leaving,
  .leader-callout,
  .leader-callout__panel {
    animation: none;
    transition: none;
  }
  .rank-toast {
    opacity: 1;
  }
  .leader-callout {
    opacity: 1;
  }
  .leader-callout__panel {
    transform: none;
    opacity: 1;
  }
}

/* 競技感 G1 (簡化版): post-reveal colored glow signal */
.card--g1-anticipation {
  position: relative;
}

.card--g1-anticipation::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  animation: g1AnticipationGlow 1.2s ease-out forwards;
}

.card--g1-anticipation--danger::after {
  box-shadow:
    0 0 0 3px oklch(68% 0.2 32 / 0.6),
    0 0 16px oklch(68% 0.2 32 / 0.45),
    0 0 32px oklch(60% 0.2 32 / 0.32);
}

.card--g1-anticipation--reward::after {
  box-shadow:
    0 0 0 3px oklch(82% 0.16 84 / 0.6),
    0 0 16px oklch(82% 0.16 84 / 0.5),
    0 0 32px oklch(74% 0.18 60 / 0.36);
}

@keyframes g1AnticipationGlow {
  0%   { opacity: 0; transform: scale(0.92); }
  18%  { opacity: 1; transform: scale(1.04); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .card--g1-anticipation::after {
    animation: none;
    opacity: 0;
  }
}

/* T-02: solo cash-out celebration overlay */
.solo-cash-burst {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, oklch(82% 0.16 84 / 0.32), oklch(20% 0.06 50 / 0.6));
  opacity: 0;
  transition: opacity 240ms ease-out;
  overflow: hidden;
}

.solo-cash-burst.is-active {
  opacity: 1;
}

.solo-cash-burst.is-leaving {
  opacity: 0;
}

.solo-cash-burst__panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 22px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, oklch(99% 0.025 92), oklch(94% 0.06 92));
  border: 3px solid var(--player-accent, oklch(72% 0.18 84));
  text-align: center;
  transform: scale(0.7);
  opacity: 0;
  box-shadow:
    0 14px 36px oklch(20% 0.04 230 / 0.42),
    inset 0 2px 0 oklch(99% 0.025 92 / 0.85),
    0 0 0 6px var(--player-accent, oklch(72% 0.18 84 / 0.32)) inset;
  transition: transform 360ms cubic-bezier(0.16, 1.4, 0.3, 1), opacity 220ms ease-out;
  pointer-events: auto;
}

.solo-cash-burst.is-active .solo-cash-burst__panel {
  transform: scale(1);
  opacity: 1;
}

.solo-cash-burst__avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--player-accent, oklch(72% 0.18 84));
  box-shadow: 0 0 28px var(--player-accent, oklch(82% 0.16 84 / 0.62));
}

.solo-cash-burst__avatar img,
.solo-cash-burst__avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solo-cash-burst__kicker {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(32% 0.1 64);
}

.solo-cash-burst__name {
  font-family: var(--font-display, system-ui);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 950;
  color: #24160a;
  line-height: 1.05;
}

.solo-cash-burst__delta {
  font-family: var(--font-display, system-ui);
  font-size: clamp(38px, 10vw, 56px);
  font-weight: 950;
  color: var(--player-accent, oklch(58% 0.18 84));
  line-height: 1;
  letter-spacing: -0.02em;
}

.solo-cash-burst__patent {
  font-size: 13px;
  font-weight: 800;
  color: oklch(40% 0.1 92);
  padding: 4px 10px;
  border-radius: 999px;
  background: oklch(94% 0.08 92 / 0.74);
  justify-self: center;
}

.solo-cash-burst__taunts {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.solo-cash-burst__taunt {
  appearance: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid oklch(72% 0.14 84 / 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, oklch(99% 0.025 92), oklch(91% 0.08 84));
  box-shadow:
    0 8px 18px oklch(28% 0.06 230 / 0.24),
    inset 0 1px 0 oklch(99% 0.025 92 / 0.8);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.solo-cash-burst__taunt:focus-visible,
.solo-cash-burst__taunt:hover {
  outline: none;
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 10px 22px oklch(28% 0.06 230 / 0.3),
    0 0 20px oklch(82% 0.16 84 / 0.46);
}

.solo-cash-burst__taunt:active {
  transform: translateY(1px) scale(0.96);
}

.solo-cash-burst__bills {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.solo-cash-burst__bill {
  position: absolute;
  top: -40px;
  left: calc(50% + var(--xoff, 0vw));
  font-family: var(--font-display, system-ui);
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 950;
  color: oklch(70% 0.18 138);
  text-shadow: 0 2px 0 oklch(40% 0.14 138 / 0.5);
  animation: soloCashBillFall 1.6s linear forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}

@keyframes soloCashBillFall {
  0%   { transform: translateY(0) rotate(-12deg); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* T-03: Final round (Q5) framing — 整 app vignette + bottom-hud chip */
.app--final-round {
  position: relative;
}

.app--final-round::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Audit fix (Gemini Medium): z-index 1 → 95 — 不被 topbar(20)/HUD(58) 蓋 */
  z-index: 95;
  background:
    radial-gradient(circle at 50% 100%, transparent 40%, oklch(40% 0.18 30 / 0.16) 100%),
    radial-gradient(circle at 50% 0%, transparent 30%, oklch(40% 0.18 30 / 0.08) 100%);
  animation: finalRoundVignettePulse 3.6s ease-in-out infinite;
}

@keyframes finalRoundVignettePulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.bottom-hud__item--final {
  background: linear-gradient(180deg, oklch(94% 0.08 60), oklch(86% 0.14 38)) !important;
  border: 1.5px solid oklch(60% 0.2 32 / 0.62) !important;
  color: oklch(28% 0.12 40) !important;
  animation: bottomHudFinalPulse 1.6s ease-in-out infinite;
}

@keyframes bottomHudFinalPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(70% 0.2 32 / 0); }
  50%      { box-shadow: 0 0 0 4px oklch(70% 0.2 32 / 0.42); }
}

/* T-04: personal best chip */
.gameover-best-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  margin: 8px auto 4px;
  background: oklch(94% 0.04 92 / 0.74);
  border: 1.5px solid oklch(74% 0.13 84 / 0.5);
  color: oklch(32% 0.09 64);
  font-size: 13px;
  font-weight: 800;
}

.gameover-best-chip strong {
  font-family: var(--font-display, system-ui);
  font-size: 18px;
  color: oklch(40% 0.14 70);
}

.gameover-best-chip--new {
  border-color: oklch(72% 0.18 84);
  background: linear-gradient(135deg, oklch(94% 0.1 92), oklch(86% 0.14 60));
  color: oklch(26% 0.14 50);
  animation: bestChipPulse 1.4s ease-in-out infinite;
}

.gameover-best-chip--new strong {
  color: oklch(36% 0.16 60);
  font-size: 22px;
}

/* v175 (v3.1 §1.11): destruction fund redistribution summary in game-over panel.
   Distinct fiery accent ties it to the burn metaphor of the fund itself. */
.gameover-fund {
  display: block;
  margin: 10px auto 4px;
  padding: 8px 14px;
  max-width: min(560px, 92vw);
  border-radius: 12px;
  background: linear-gradient(135deg, oklch(96% 0.08 32 / 0.85), oklch(90% 0.12 18 / 0.75));
  border: 1.5px solid oklch(68% 0.18 28 / 0.55);
  color: oklch(28% 0.14 28);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
.gameover-fund--empty {
  background: oklch(94% 0.02 92 / 0.7);
  border-color: oklch(72% 0.05 84 / 0.4);
  color: oklch(38% 0.05 70);
  font-weight: 600;
}

@keyframes bestChipPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(72% 0.18 84 / 0); }
  50%      { box-shadow: 0 0 0 6px oklch(72% 0.18 84 / 0.42); }
}

/* T-05: reverse FOMO miss toast */
.miss-toast {
  position: fixed;
  top: max(calc(env(safe-area-inset-top) + 120px), 132px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 218;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: oklch(96% 0.08 60 / 0.94);
  border: 1.5px solid oklch(58% 0.18 38 / 0.5);
  color: oklch(32% 0.12 40);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px oklch(30% 0.06 230 / 0.2);
  opacity: 0;
  animation: missToastIn 320ms cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
  pointer-events: none;
}

.miss-toast.is-leaving {
  animation: missToastOut 500ms ease-in forwards;
}

.miss-toast__icon {
  font-size: 14px;
}

@keyframes missToastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-32px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes missToastOut {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-28px); }
}

@media (prefers-reduced-motion: reduce) {
  .solo-cash-burst,
  .solo-cash-burst__panel,
  .solo-cash-burst__bill,
  .app--final-round::before,
  .bottom-hud__item--final,
  .gameover-best-chip--new,
  .miss-toast,
  .miss-toast.is-leaving {
    animation: none;
    transition: none;
  }
  .solo-cash-burst { opacity: 1; }
  .solo-cash-burst__panel { transform: none; opacity: 1; }
  .solo-cash-burst__bills { display: none; }
  .miss-toast { opacity: 1; }
}

/* T-07 v57 fix (Sonnet High): 獨立 heckle-bar fixed-position 不被 mobile media hide */
.heckle-bar {
  position: fixed;
  right: calc(env(safe-area-inset-right) + 10px);
  bottom: calc(env(safe-area-inset-bottom) + 78px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  max-height: calc(100vh - 170px);
}

.heckle-bar__tag {
  writing-mode: vertical-rl;
  justify-self: center;
  align-self: center;
  max-height: 88px;
  padding: 7px 4px;
  border-radius: 999px;
  background: oklch(15% 0.04 230 / 0.76);
  color: oklch(96% 0.05 84 / 0.9);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px oklch(18% 0.04 230 / 0.28);
  backdrop-filter: blur(8px);
}

.heckle-bar__btn {
  appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid oklch(72% 0.13 50 / 0.5);
  border-radius: 999px;
  background: oklch(96% 0.06 60 / 0.85);
  color: var(--toy-ink);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 8px oklch(30% 0.06 230 / 0.18);
  transition: transform 120ms ease-out, background 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.heckle-bar__btn--boast {
  border-color: oklch(82% 0.16 84 / 0.72);
  background: linear-gradient(180deg, oklch(98% 0.06 88 / 0.95), oklch(84% 0.13 82 / 0.88));
}

.heckle-bar__btn--pressure {
  border-color: oklch(70% 0.17 34 / 0.62);
  background: linear-gradient(180deg, oklch(97% 0.05 60 / 0.92), oklch(82% 0.13 42 / 0.85));
}

.heckle-bar__btn--panic {
  border-color: oklch(68% 0.2 28 / 0.7);
  background: linear-gradient(180deg, oklch(93% 0.08 42 / 0.92), oklch(68% 0.18 32 / 0.86));
}

.heckle-bar__btn--bluff {
  border-color: oklch(66% 0.15 302 / 0.66);
  background: linear-gradient(180deg, oklch(92% 0.05 300 / 0.9), oklch(60% 0.13 292 / 0.86));
}

.heckle-bar__btn:hover,
.heckle-bar__btn:active {
  background: oklch(92% 0.08 60 / 0.95);
  transform: scale(0.95);
}

.heckle-bullet {
  position: fixed;
  top: calc(50vh + var(--heckle-y, 0px));
  left: 100vw;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 6px;
  border-radius: 999px;
  color: oklch(99% 0.025 92);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px oklch(30% 0.06 230 / 0.4);
  animation: heckleFlyAcross 1.8s linear forwards;
}

/* 發話者頭像：一眼看出彈幕是哪個角色講的（不寫名字） */
.heckle-bullet__avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: oklch(99% 0.02 92 / 0.3);
  border: 2px solid oklch(99% 0.025 92 / 0.85);
  box-shadow: 0 1px 3px oklch(20% 0.05 250 / 0.45);
}

.heckle-bullet--tone-panic,
.heckle-bullet--bust {
  background: linear-gradient(90deg, oklch(58% 0.2 32), oklch(40% 0.18 30));
}

.heckle-bullet--tone-boast,
.heckle-bullet--run {
  background: linear-gradient(90deg, oklch(72% 0.16 84), oklch(58% 0.18 60));
}

.heckle-bullet--tone-pressure {
  background: linear-gradient(90deg, oklch(62% 0.18 34), oklch(44% 0.16 26));
}

.heckle-bullet--tone-bluff,
.heckle-bullet--wait {
  background: linear-gradient(90deg, oklch(45% 0.06 230), oklch(35% 0.08 220));
}

@keyframes heckleFlyAcross {
  0%   { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(-130vw, -12px) rotate(2deg); opacity: 0; }
}

/* T-08 + T-10: Lifetime stats chip */
.lifetime-chip {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  margin: 10px auto;
  max-width: 360px;
  border-radius: 12px;
  border: 1.5px solid oklch(72% 0.13 84 / 0.5);
  background: linear-gradient(180deg, oklch(99% 0.025 92), oklch(94% 0.06 92));
  color: var(--toy-ink);
  font-size: 13px;
  font-weight: 700;
}

.lifetime-chip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lifetime-chip__tier {
  font-size: 14px;
  font-weight: 950;
  color: oklch(36% 0.12 64);
}

.lifetime-chip__total {
  font-family: var(--font-display, system-ui);
  font-size: 18px;
  color: oklch(28% 0.14 60);
  letter-spacing: -0.01em;
}

.lifetime-chip__progress {
  height: 6px;
  border-radius: 999px;
  background: oklch(92% 0.025 230 / 0.5);
  overflow: hidden;
}

.lifetime-chip__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, oklch(78% 0.16 84), oklch(68% 0.18 60));
  transition: width 0.6s ease-out;
}

.lifetime-chip__hint {
  font-size: 11px;
  color: oklch(40% 0.05 218);
  font-weight: 600;
}

/* T-09: Final scoreboard reveal — choice-list li 預設隱藏由 JS reveal */
.gameover-overlay .choice-list li {
  /* 初始 opacity 由 JS 直接 set inline avoid FOUC on slow CPU */
}

.choice-list__item--winner {
  background: linear-gradient(90deg, oklch(96% 0.06 92), oklch(90% 0.12 84 / 0.5)) !important;
  border-left: none !important;
  box-shadow: inset 0 0 0 2px oklch(72% 0.18 84) !important;
  padding-left: 8px;
  animation: winnerHighlight 1.2s ease-out;
}

@keyframes winnerHighlight {
  0%   { box-shadow: 0 0 0 0 oklch(82% 0.16 84 / 0); }
  40%  { box-shadow: 0 0 0 8px oklch(82% 0.16 84 / 0.5); }
  100% { box-shadow: 0 0 0 0 oklch(82% 0.16 84 / 0); }
}

.gameover-actions__skip {
  font-size: 12px;
  padding: 6px 10px;
  opacity: 0.7;
}

/* Card readability pass: keep value text above art, glow, and deal effects. */
.card__cash-amount {
  position: relative;
  z-index: 4;
  display: none;
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: 12px;
  border: 1px solid oklch(99% 0.035 92 / 0.78);
  background:
    linear-gradient(180deg, oklch(99% 0.045 92 / 0.9), oklch(90% 0.11 84 / 0.88));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.04 92 / 0.86),
    0 5px 0 oklch(45% 0.1 70 / 0.22),
    0 14px 24px oklch(34% 0.09 72 / 0.22);
  text-align: center;
  isolation: isolate;
}

.card__cash-amount span {
  display: block;
  color: oklch(36% 0.09 78);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.card__cash-amount strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.02em;
  width: 100%;
  max-width: 100%;
  color: oklch(22% 0.1 76);
  font-family: var(--font-display);
  font-size: clamp(30px, 8vw, 48px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.88;
  white-space: nowrap;
  text-shadow:
    0 2px 0 oklch(99% 0.035 92 / 0.88),
    0 9px 18px oklch(36% 0.12 76 / 0.18);
}

.card__cash-amount .card__cash-main,
.card__cash-amount .card__cash-unit {
  display: inline-block;
  color: inherit;
  font: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 0.88;
  text-transform: none;
}

.card__cash-amount .card__cash-unit {
  flex: 0 0 auto;
  font-size: 0.58em;
  line-height: 1;
  transform: translateY(-0.05em);
}

.card--cash .card__art,
.card--crisis .card__art {
  pointer-events: none;
}

.card__footer--cash,
.card__footer--hazard,
.card__tag {
  z-index: 4;
}

.card--latest .card-spot {
  z-index: 0;
  inset: -26px;
  background:
    radial-gradient(circle at 82% 16%, oklch(96% 0.16 88 / 0.38) 0 12%, transparent 34%),
    radial-gradient(circle at 12% 86%, oklch(76% 0.16 150 / 0.22), transparent 38%);
}

.card--latest .card__cash-amount,
.card--latest .card__footer--cash,
.card--latest .card__footer--hazard,
.card--latest .card__tag {
  z-index: 5;
}

.card--g1-anticipation::after {
  z-index: 2;
}

@media (max-width: 520px) {
  .app--commercial-mobile .path .card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 10px;
  }

  .app--commercial-mobile .path .card--cash {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(228px, 26vh, 256px);
    height: clamp(228px, 26dvh, 256px);
    padding: 10px;
  }

  .app--commercial-mobile .path .card--crisis {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: clamp(228px, 26vh, 256px);
    height: clamp(228px, 26dvh, 256px);
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .app--commercial-mobile .path .card--cash .card__art {
    position: absolute;
    inset: 34px 7px 72px;
    z-index: 1;
    opacity: 0.44;
    transform: none;
  }

  .app--commercial-mobile .path .card--cash .card__symbol--cash {
    width: 104px;
    height: 104px;
    border-radius: 30px;
    transform: rotate(-8deg);
  }

  .app--commercial-mobile .path .card--cash .card__symbol--cash .svg-icon {
    width: 44px;
    height: 44px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-pile {
    opacity: 0.68;
  }

  .app--commercial-mobile .path .card__cash-amount {
    display: grid;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    margin: 20px 0 4px;
    min-height: 76px;
    place-items: center;
  }

  .app--commercial-mobile .path .card__cash-amount strong {
    font-size: clamp(34px, 10.2vw, 48px);
  }

  .app--commercial-mobile .path .card--cash .card__footer--cash,
  .app--commercial-mobile .path .card--crisis .card__footer--hazard {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-row: 3;
    min-height: 0;
    padding: 7px 7px;
    border-radius: 10px;
    background: oklch(99% 0.025 92 / 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .app--commercial-mobile .path .card__cash-title {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app--commercial-mobile .path .card__cash-subtitle {
    max-width: 100%;
    overflow: hidden;
    font-size: 8px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app--commercial-mobile .path .card--crisis .card__art {
    grid-row: 2;
    width: 100%;
    min-height: 70px;
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    opacity: 0.96;
    transform: none;
  }

  .app--commercial-mobile .path .card--crisis .card__symbol {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 19px;
    font-size: 36px;
    box-shadow:
      inset 0 2px 0 oklch(99% 0.025 92 / 0.82),
      0 8px 0 oklch(40% 0.13 28 / 0.16),
      0 18px 26px oklch(32% 0.12 28 / 0.2);
  }

  .app--commercial-mobile .path .card--crisis .card__symbol::after {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 26px;
    background:
      linear-gradient(180deg, oklch(99% 0.025 92 / 0.2), transparent),
      repeating-linear-gradient(135deg, oklch(99% 0.025 92 / 0.14) 0 5px, transparent 5px 11px);
    opacity: 0.62;
  }

  .app--commercial-mobile .path .card__hazard-kicker {
    font-size: 8px;
    letter-spacing: 0;
  }

  .app--commercial-mobile .path .card__hazard-title {
    max-width: 100%;
    color: oklch(22% 0.08 46);
    font-size: clamp(15px, 4.3vw, 18px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .app--commercial-mobile .path .card__hazard-subtitle,
  .app--commercial-mobile .path .card__hazard-rule {
    max-width: 100%;
    color: oklch(32% 0.08 42);
    font-size: 8px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  /* v192-block fix (Gemini Add): hazard-rule contains mechanic-critical text
     like "首次警告，同款再出＝崩盤" (14 chars Chinese). nowrap+8px clips
     "再出＝崩盤" — players lose the bust trigger. line-clamp:2 lets it
     wrap to a second line; 8px on 138px-wide cards still fits ~14 chars per
     line so 2 lines covers all current hazard rule strings. */
  .app--commercial-mobile .path .card__hazard-rule {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: ellipsis;
  }

  .app--commercial-mobile .path .card__tag--hazard {
    position: relative;
    top: auto;
    right: auto;
    grid-row: 1;
    justify-self: stretch;
    z-index: 5;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 8px;
    background: linear-gradient(180deg, oklch(54% 0.24 28), oklch(42% 0.2 24));
    color: oklch(99% 0.025 92);
    font-size: 10px;
    letter-spacing: 0;
    transform: none;
    box-shadow:
      inset 0 1px 0 oklch(99% 0.025 92 / 0.42),
      0 3px 0 oklch(32% 0.16 24 / 0.38);
  }

  .app--commercial-mobile .path .card__tag--hazard::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: oklch(84% 0.18 42);
    box-shadow: 0 0 10px oklch(84% 0.18 42 / 0.82);
    animation: hazardAlertDot 1.1s ease-in-out infinite;
  }

  .app--commercial-mobile .path .card--cash .card__tag {
    top: 8px;
    right: 8px;
    z-index: 5;
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    font-size: 10px;
    letter-spacing: 0;
  }
}

@keyframes hazardAlertDot {
  0%, 100% { opacity: 0.55; transform: scale(0.82); }
  45% { opacity: 1; transform: scale(1.14); }
}

/* Cash card redesign: premium yield certificate, with amount-first hierarchy. */
.app--commercial-mobile .card--cash {
  color: oklch(24% 0.08 152);
  background:
    radial-gradient(circle at 16% 18%, oklch(99% 0.04 92 / 0.72), transparent 22%),
    radial-gradient(circle at 88% 18%, oklch(92% 0.14 146 / 0.42), transparent 24%),
    repeating-linear-gradient(135deg, oklch(99% 0.025 112 / 0.12) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, oklch(97% 0.055 132), oklch(79% 0.16 150) 54%, oklch(66% 0.13 170));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.86),
    inset 0 -2px 0 oklch(38% 0.09 156 / 0.16),
    0 8px 0 oklch(42% 0.1 150 / 0.24),
    0 18px 30px oklch(25% 0.06 230 / 0.18);
}

.app--commercial-mobile .card--cash::before {
  inset: 8px;
  border: 2px solid oklch(99% 0.025 92 / 0.6);
  box-shadow:
    inset 0 0 0 1px oklch(39% 0.11 154 / 0.14),
    inset 0 0 26px oklch(99% 0.035 92 / 0.32);
}

.app--commercial-mobile .card--cash::after {
  background:
    radial-gradient(ellipse at 18% 72%, transparent 0 22%, oklch(40% 0.1 150 / 0.14) 23% 24%, transparent 25% 42%, oklch(40% 0.1 150 / 0.08) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 82% 26%, transparent 0 20%, oklch(40% 0.1 150 / 0.12) 21% 22%, transparent 23% 39%, oklch(40% 0.1 150 / 0.08) 40% 41%, transparent 42%),
    linear-gradient(115deg, transparent 0 36%, oklch(99% 0.03 92 / 0.34) 45%, transparent 54%);
  mix-blend-mode: soft-light;
}

.app--commercial-mobile .card--cash-big {
  color: oklch(25% 0.08 78);
  background:
    radial-gradient(circle at 16% 20%, oklch(99% 0.05 92 / 0.9), transparent 24%),
    radial-gradient(circle at 88% 18%, oklch(99% 0.04 92 / 0.7), transparent 28%),
    repeating-linear-gradient(135deg, oklch(99% 0.035 92 / 0.2) 0 1px, transparent 1px 10px),
    linear-gradient(135deg, oklch(99% 0.075 94), oklch(83% 0.18 84) 52%, oklch(66% 0.16 72));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.04 92 / 0.9),
    inset 0 -2px 0 oklch(45% 0.12 74 / 0.18),
    0 8px 0 oklch(48% 0.12 74 / 0.28),
    0 20px 34px oklch(34% 0.09 72 / 0.22);
}

.app--commercial-mobile .card--cash-jackpot {
  background:
    radial-gradient(circle at 16% 18%, oklch(99% 0.06 92 / 0.94), transparent 25%),
    radial-gradient(circle at 83% 20%, oklch(99% 0.045 92 / 0.82), transparent 30%),
    radial-gradient(circle at 50% 78%, oklch(96% 0.18 92 / 0.42), transparent 34%),
    repeating-linear-gradient(135deg, oklch(99% 0.035 92 / 0.24) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, oklch(99% 0.09 96), oklch(87% 0.19 86) 46%, oklch(62% 0.17 74));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.05 92 / 0.94),
    inset 0 -2px 0 oklch(45% 0.12 74 / 0.22),
    0 9px 0 oklch(48% 0.12 74 / 0.32),
    0 0 22px oklch(89% 0.16 88 / 0.28),
    0 24px 40px oklch(34% 0.09 72 / 0.24);
}

.app--commercial-mobile .card--cash-big .card__cash-amount {
  border-color: oklch(99% 0.05 92 / 0.98);
  background:
    radial-gradient(circle at 20% 16%, oklch(99% 0.055 92 / 0.76), transparent 30%),
    linear-gradient(180deg, oklch(99% 0.07 94 / 0.98), oklch(86% 0.17 84 / 0.94));
  box-shadow:
    inset 0 2px 0 oklch(99% 0.05 92 / 0.94),
    0 5px 0 oklch(48% 0.12 74 / 0.28),
    0 0 18px oklch(90% 0.15 88 / 0.32),
    0 18px 28px oklch(34% 0.09 72 / 0.22);
}

.app--commercial-mobile .card--cash-big .card__cash-amount span {
  color: oklch(36% 0.1 78 / 0.82);
}

.app--commercial-mobile .card--cash-big .card__cash-amount strong {
  color: oklch(18% 0.09 74);
}

.app--commercial-mobile .card--cash .card__symbol--cash {
  position: relative;
  width: 96px;
  height: 78px;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: oklch(33% 0.11 154);
  box-shadow: none;
  transform: rotate(-5deg);
}

.app--commercial-mobile .card--cash-big .card__symbol--cash {
  color: oklch(36% 0.12 82);
}

.card__cash-note {
  position: absolute;
  display: block;
  width: 78px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid oklch(99% 0.03 92 / 0.82);
  background:
    radial-gradient(circle at 50% 50%, oklch(99% 0.025 92 / 0.62), transparent 31%),
    repeating-linear-gradient(90deg, oklch(30% 0.1 154 / 0.14) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, oklch(93% 0.09 142), oklch(67% 0.14 154));
  box-shadow:
    inset 0 1px 0 oklch(99% 0.025 92 / 0.88),
    0 4px 0 oklch(34% 0.09 154 / 0.2),
    0 10px 18px oklch(28% 0.08 154 / 0.18);
}

.app--commercial-mobile .card--cash-big .card__cash-note {
  background:
    radial-gradient(circle at 50% 50%, oklch(99% 0.05 92 / 0.72), transparent 31%),
    repeating-linear-gradient(90deg, oklch(39% 0.12 76 / 0.14) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, oklch(98% 0.08 92), oklch(75% 0.17 82));
  box-shadow:
    inset 0 1px 0 oklch(99% 0.05 92 / 0.88),
    0 4px 0 oklch(44% 0.12 76 / 0.22),
    0 0 16px oklch(90% 0.15 90 / 0.28);
}

.card__cash-note--back {
  left: 10px;
  top: 16px;
  opacity: 0.72;
  transform: rotate(9deg);
}

.card__cash-note--front {
  left: 0;
  top: 6px;
  transform: rotate(-4deg);
}

.card__cash-note-lines {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.22;
}

.card__cash-note-seal {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: 0.3;
}

.card__cash-coin {
  position: absolute;
  z-index: 3;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid oklch(99% 0.045 92 / 0.8);
  background:
    radial-gradient(circle at 34% 28%, oklch(99% 0.055 92), transparent 25%),
    linear-gradient(145deg, oklch(95% 0.14 92), oklch(70% 0.17 80));
  box-shadow:
    inset 0 -2px 0 oklch(48% 0.13 76 / 0.32),
    0 3px 0 oklch(44% 0.12 76 / 0.26),
    0 0 12px oklch(90% 0.15 88 / 0.34);
}

.card__cash-coin--one {
  right: 7px;
  bottom: 6px;
}

.card__cash-coin--two {
  right: 23px;
  bottom: 0;
  transform: scale(0.82);
}

.card__cash-coin--three {
  left: 4px;
  bottom: 0;
  transform: scale(0.72);
}

.card__cash-bankmark {
  position: absolute;
  z-index: 4;
  left: 15px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: oklch(99% 0.03 92 / 0.72);
  box-shadow: inset 0 0 0 1px currentColor;
}

.card__cash-bankmark .svg-icon {
  width: 16px;
  height: 16px;
}

.app--commercial-mobile .card--cash .card__footer--cash {
  background:
    linear-gradient(180deg, oklch(99% 0.035 92 / 0.86), oklch(92% 0.075 120 / 0.78));
  border: 1px solid oklch(42% 0.11 154 / 0.16);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.03 92 / 0.8),
    0 4px 0 oklch(35% 0.09 154 / 0.12);
}

.app--commercial-mobile .card--cash-big .card__footer--cash {
  background:
    linear-gradient(180deg, oklch(99% 0.045 92 / 0.88), oklch(90% 0.13 84 / 0.8));
  border-color: oklch(55% 0.13 78 / 0.18);
}

.app--commercial-mobile .card__cash-kicker {
  color: oklch(34% 0.08 146 / 0.78);
}

.app--commercial-mobile .card__cash-title {
  color: oklch(22% 0.08 150);
  text-shadow: 0 1px 0 oklch(99% 0.03 92 / 0.78);
}

.app--commercial-mobile .card--cash-big .card__cash-title {
  color: oklch(24% 0.08 78);
}

.app--commercial-mobile .card__cash-subtitle {
  color: oklch(32% 0.075 150 / 0.78);
}

.app--commercial-mobile .card--cash .card__tag {
  background: oklch(99% 0.03 92 / 0.76);
  color: oklch(28% 0.08 150);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.03 92 / 0.8),
    0 2px 0 oklch(36% 0.08 150 / 0.14);
}

.app--commercial-mobile .card--cash-big .card__tag {
  color: oklch(30% 0.08 78);
}

.card--latest.card--cash .card__cash-note--front {
  animation: cashNotePop 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.card--latest.card--cash .card__cash-coin {
  animation: cashCoinGleam 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Decision UX pass: compact market strip and keep choices in one viewport. */
.run-stage__status {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.run-stage__status span {
  color: oklch(38% 0.055 230);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.run-stage__status strong {
  min-width: 0;
  overflow: hidden;
  color: var(--commercial-ink, var(--text));
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-rank-strip {
  display: flex;
  justify-content: space-between;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--toy-ink, #2a3a4a);
  opacity: 0.7;
  font-weight: 600;
}
.compact-rank-strip__me { }
.compact-rank-strip__leader { text-align: right; }

.decision-quick-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.decision-quick-strip span {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid oklch(62% 0.08 84 / 0.22);
  background:
    linear-gradient(180deg, oklch(99% 0.02 92 / 0.8), oklch(92% 0.04 92 / 0.7));
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.88),
    0 3px 0 oklch(48% 0.08 84 / 0.1);
}

.decision-quick-strip b {
  color: oklch(38% 0.055 230);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.decision-quick-strip strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--commercial-ink, var(--text));
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes cashNotePop {
  0% { transform: rotate(-4deg) translateY(8px) scale(0.92); filter: brightness(0.9); }
  55% { transform: rotate(-6deg) translateY(-4px) scale(1.04); filter: brightness(1.08); }
  100% { transform: rotate(-4deg) translateY(0) scale(1); filter: brightness(1); }
}

@keyframes cashCoinGleam {
  0% { opacity: 0; transform: translateY(12px) scale(0.65); }
  55% { opacity: 1; transform: translateY(-5px) scale(1.08); }
  100% { opacity: 1; }
}

@media (max-width: 520px) {
  .app--commercial-mobile {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .app--commercial-mobile.app--mode-choosing,
  .app--commercial-mobile.app--mode-handoff {
    /* v187 (Gemini iOS diagnosis 2026-05-19): the earlier v184 attempt set
       `height: 100dvh` (a hard lock) + `overflow-y: auto`, which turned .app
       into an INTERNAL scroll container. iOS Safari mishandles nested-scroll
       + flexbox + overscroll-behavior-y — the page scroll locked AND the
       sticky action-strip below got swallowed, so 套現/加碼 were unreachable.
       Android Chrome's nested-scroll/sticky impl is standard so it stayed fine.
       Fix: keep ONLY min-height (the -webkit-fill-available / 100vh / 100dvh
       cascade stays as a graceful single-screen min-height). With no hard
       height and no internal overflow, native <body> scroll takes over and
       iOS Safari handles body-scroll `position: sticky; bottom: 0` correctly.
       Layers B (sticky action-strip below) + C (drawer auto-close in app.js
       render) are unchanged — they only needed this broken layer-A removed. */
    min-height: -webkit-fill-available;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .app--commercial-mobile.app--mode-choosing .main-grid,
  .app--commercial-mobile.app--mode-handoff .main-grid {
    gap: 6px;
    padding: 6px 10px 0;
  }

  /* v184 (bugfix B): pin the decision strip to viewport bottom in mobile
     choosing/handoff modes so 套現/加碼 are always reachable without
     scrolling, regardless of how tall the page grew above. z-index 130 sits
     above class-skill-drawer (115) but below auto-reveal (178) and the CDS
     overlay (200). Backdrop fade keeps content under it readable.
     v184 (iOS defensive): touch-action: manipulation kills the iOS 300ms
     double-tap delay; -webkit-sticky vendor prefix for older iOS. */
  .app--commercial-mobile.app--mode-choosing .action-strip,
  .app--commercial-mobile.app--mode-handoff .action-strip {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 130;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(20, 16, 32, 0.78) 28%,
      rgba(20, 16, 32, 0.94) 100%
    );
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    touch-action: manipulation;
  }

  .app--commercial-mobile.app--mode-choosing .action-strip,
  .app--commercial-mobile.app--mode-handoff .action-strip {
    padding-top: 4px;
  }

  /* v184 (iOS PWA standalone defensive): when user adds the game to home
     screen and launches in standalone mode (no Safari chrome), the bottom
     home indicator overlays viewport but env(safe-area-inset-bottom) is
     ~34px instead of Safari's 0. The sticky action-strip needs extra
     bottom padding so 套現/加碼 don't sit under the home indicator.
     Only applies in standalone display-mode AND mobile viewport.
     v186 (notch fix): removed `.app--commercial-mobile { padding-top }`
     because it caused the sticky topbar to visually jump (topbar pinned at
     viewport top:0 ignores parent padding, but pre-pin position respected
     it). Top safe-area is now handled on `.topbar` itself (universal rule)
     so works in both browser and standalone mode. */
  @media (display-mode: standalone) {
    .app--commercial-mobile.app--mode-choosing .action-strip,
    .app--commercial-mobile.app--mode-handoff .action-strip {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
  }

  .app--commercial-mobile .leaderboard-rail {
    max-height: 84px;
  }

  .app--commercial-mobile.app--mode-choosing .leaderboard-rail,
  .app--commercial-mobile.app--mode-handoff .leaderboard-rail {
    max-height: 72px;
  }

  .app--commercial-mobile .leaderboard-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app--commercial-mobile .leaderboard-row {
    min-height: 31px;
    padding: 5px 7px;
  }

  .app--commercial-mobile .leaderboard-rail__head {
    display: none;
  }

  .app--commercial-mobile .temple-strip > .section-title {
    display: none;
  }

  .app--commercial-mobile .run-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "status"
      "meter";
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .app--commercial-mobile .run-stage::before,
  .app--commercial-mobile .run-stage::after {
    display: none;
  }

  .app--commercial-mobile .run-stage__ticker {
    display: none;
  }

  .app--commercial-mobile .run-stage__status {
    grid-area: status;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .app--commercial-mobile .run-stage__status span {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .app--commercial-mobile .run-stage__status strong {
    max-width: 100%;
    font-size: 12px;
    text-align: right;
  }

  .app--commercial-mobile .run-stage__stats {
    grid-area: stats;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .app--commercial-mobile .run-stage__stat {
    padding: 5px 4px;
    border-radius: 7px;
    text-align: center;
  }

  .app--commercial-mobile .run-stage__stat span {
    font-size: 8px;
    letter-spacing: 0;
  }

  .app--commercial-mobile .run-stage__stat strong {
    margin-top: 1px;
    font-size: clamp(15px, 4.2vw, 18px);
  }

  .app--commercial-mobile .run-stage__meter {
    grid-area: meter;
    height: 5px;
  }

  .app--commercial-mobile .drama-banner {
    min-height: 0;
    margin-bottom: 5px;
    padding: 6px 8px;
    border-radius: 9px;
  }

  .app--commercial-mobile .drama-banner__label {
    font-size: 10px;
  }

  .app--commercial-mobile .drama-banner__detail {
    font-size: 11px;
    line-height: 1.15;
  }

  .app--commercial-mobile .path {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    min-height: clamp(144px, 17vh, 176px);
    min-height: clamp(144px, 17dvh, 176px);
    padding-bottom: 7px;
  }

  .app--commercial-mobile.app--mode-choosing .path,
  .app--commercial-mobile.app--mode-handoff .path,
  .app--commercial-mobile.app--mode-choosing .empty-path,
  .app--commercial-mobile.app--mode-handoff .empty-path {
    min-height: clamp(132px, 15vh, 160px);
    min-height: clamp(132px, 15dvh, 160px);
  }

  .app--commercial-mobile .path .card {
    flex-basis: min(34vw, 138px);
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(154px, 18vh, 178px);
    height: clamp(154px, 18dvh, 178px);
  }

  .app--commercial-mobile.app--mode-choosing .path .card,
  .app--commercial-mobile.app--mode-handoff .path .card {
    flex-basis: min(31vw, 126px);
    height: clamp(184px, 20vh, 202px);
    height: clamp(184px, 20dvh, 202px);
  }

  .app--commercial-mobile.app--mode-choosing .path .card--crisis,
  .app--commercial-mobile.app--mode-handoff .path .card--crisis {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
  }

  .app--commercial-mobile .empty-path {
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    min-height: clamp(144px, 17vh, 176px);
    min-height: clamp(144px, 17dvh, 176px);
  }

  .app--commercial-mobile .decision-quick-strip {
    gap: 5px;
  }

  .app--commercial-mobile .decision-quick-strip span {
    padding: 6px 5px;
    border-radius: 9px;
  }

  .app--commercial-mobile .decision-quick-strip b {
    font-size: 9px;
    letter-spacing: 0;
  }

  .app--commercial-mobile .decision-quick-strip strong {
    font-size: 18px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout {
    min-height: 52px;
    padding: 7px 8px 7px 58px;
    gap: 2px;
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout__avatar {
    top: 8px;
    left: 8px;
    width: 40px;
    height: 40px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout__kicker {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout strong {
    font-size: clamp(20px, 6.2vw, 27px);
  }

  .app--commercial-mobile .decision-panel--choosing:not(.decision-panel--confirming) {
    padding-bottom: 12px;
  }

  .app--commercial-mobile .decision-pressure {
    bottom: auto;
    min-height: 42px;
    margin-top: 0;
    padding: 6px 8px;
  }

  .app--commercial-mobile .decision-pressure__signal {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .app--commercial-mobile .decision-pressure__copy strong {
    font-size: 12px;
  }

  .app--commercial-mobile .decision-pressure__copy span {
    display: none;
  }

  .app--commercial-mobile .decision-pressure__metric {
    min-width: 40px;
    font-size: 14px;
  }

  /* Wave 11: smaller-mobile breakpoint override — sticky inherits bottom from
     the parent rule; nothing extra needed since sticky doesn't use the old
     visual-viewport math. Kept as anchor for any future per-breakpoint tweak. */
  .app--commercial-mobile .decision-panel--choosing:not(.decision-panel--confirming) .choice-buttons {
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .app--commercial-mobile .choice-button {
    min-height: 62px;
    padding: 9px 52px 9px 10px;
  }

  .app--commercial-mobile .choice-button strong {
    font-size: clamp(19px, 5.7vw, 25px);
  }

  .app--commercial-mobile .choice-button span {
    font-size: 11px;
  }

  .bottom-hud {
    padding: 5px;
  }

  .bottom-hud__item {
    padding: 5px 4px;
  }

  .bottom-hud__item strong {
    font-size: 15px;
  }

  .app--commercial-mobile .path .card--cash {
    grid-template-rows: 24px minmax(76px, 1fr) auto;
    /* v189 F3: vh fallback for iOS Safari < 15.4. */
    height: clamp(178px, 20vh, 206px);
    height: clamp(178px, 20dvh, 206px);
    padding: 9px;
  }

  .app--commercial-mobile .path .card--cash .card__art {
    position: absolute;
    inset: 28px 10px 70px;
    z-index: 1;
    display: grid;
    place-items: center;
    opacity: 0.92;
    transform: none;
  }

  .app--commercial-mobile .path .card--cash .card__symbol--cash {
    width: min(68%, 142px);
    height: 76px;
    border-radius: 22px;
    transform: rotate(-6deg) translateY(-4px);
  }

  .app--commercial-mobile .path .card--cash .card__cash-note {
    width: 96px;
    height: 54px;
    border-radius: 12px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-note--back {
    left: 25px;
    top: 18px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-note--front {
    left: 9px;
    top: 6px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-bankmark {
    left: 27px;
    top: 19px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-coin {
    width: 23px;
    height: 23px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-coin--one {
    right: 24px;
    bottom: 9px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-coin--two {
    right: 47px;
    bottom: 1px;
  }

  .app--commercial-mobile .path .card--cash .card__cash-coin--three {
    left: 24px;
    bottom: 0;
  }

  .app--commercial-mobile .path .card__cash-amount {
    position: relative;
    z-index: 4;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    display: grid;
    min-height: 78px;
    margin: 26px 6px 3px;
    padding: 10px 8px 11px;
    place-items: center;
    border-radius: 15px;
    border: 1px solid oklch(99% 0.04 92 / 0.92);
    background:
      radial-gradient(circle at 16% 18%, oklch(99% 0.045 92 / 0.72), transparent 28%),
      linear-gradient(180deg, oklch(99% 0.045 92 / 0.94), oklch(91% 0.12 84 / 0.9));
    box-shadow:
      inset 0 2px 0 oklch(99% 0.04 92 / 0.88),
      0 5px 0 oklch(45% 0.1 74 / 0.24),
      0 16px 26px oklch(34% 0.09 72 / 0.22);
    overflow: hidden;
  }

  .app--commercial-mobile .path .card__cash-amount::before {
    content: "RBD";
    position: absolute;
    top: 8px;
    left: 10px;
    color: oklch(42% 0.1 78 / 0.36);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
  }

  .app--commercial-mobile .path .card__cash-amount::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid oklch(43% 0.1 78 / 0.14);
    border-radius: 12px;
    pointer-events: none;
  }

  .app--commercial-mobile .path .card__cash-amount span {
    position: relative;
    z-index: 1;
    color: oklch(34% 0.09 78 / 0.78);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .app--commercial-mobile .path .card__cash-amount strong {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
    color: oklch(20% 0.09 76);
    max-width: 100%;
    font-size: clamp(28px, 7.8vw, 36px);
    letter-spacing: 0;
    line-height: 0.86;
    overflow: hidden;
    text-overflow: clip;
    text-shadow:
      0 2px 0 oklch(99% 0.04 92 / 0.9),
      0 10px 20px oklch(36% 0.12 76 / 0.2);
  }

  .app--commercial-mobile .path .card__cash-amount .card__cash-main,
  .app--commercial-mobile .path .card__cash-amount .card__cash-unit {
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 0.86;
    text-transform: none;
  }

  .app--commercial-mobile .path .card__cash-amount .card__cash-unit {
    font-size: 0.56em;
    line-height: 1;
    transform: translateY(-0.04em);
  }

  .app--commercial-mobile .path .card--cash-big .card__cash-amount {
    min-height: 82px;
    margin-inline: 3px;
  }

  .app--commercial-mobile .path .card--cash-big .card__cash-amount strong {
    font-size: clamp(27px, 7.4vw, 34px);
  }

  .app--commercial-mobile .path .card--cash-two-digit .card__cash-amount strong {
    font-size: clamp(26px, 7vw, 33px);
  }

  .app--commercial-mobile .path .card--cash-three-digit .card__cash-amount strong {
    font-size: clamp(21px, 5.8vw, 28px);
  }

  .app--commercial-mobile .path .card--cash-jackpot .card__cash-amount strong {
    font-size: clamp(25px, 6.8vw, 32px);
  }

  .app--commercial-mobile .path .card--cash .card__footer--cash {
    grid-row: 3;
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 12px;
    background: oklch(99% 0.035 92 / 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .app--commercial-mobile .path .card--cash .card__tag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--latest.card--cash .card__cash-note--front,
  .card--latest.card--cash .card__cash-coin {
    animation: none;
  }

  .heckle-bullet,
  .choice-list__item--winner,
  .lifetime-chip__progress-bar,
  .class-reveal-burst,
  .class-reveal-burst__panel,
  .big-short-burst,
  .big-short-burst__ticker,
  .big-short-burst__panel,
  .big-short-burst__tape span,
  .app--turn-glow .primary-button--my-turn,
  .app--turn-glow .primary-button--my-turn::after {
    animation: none;
    transition: none;
  }
  .heckle-bullet { display: none; }
  .class-reveal-burst__panel,
  .big-short-burst__panel { transform: none; }
}

/* Wave 10 Phase 3: multi-player cash-out group banner (1 banner, N avatars) */
.cashout-banner--group .cashout-banner__group-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cashout-banner--group .cashout-banner__group-avatar {
  display: inline-grid;
  place-items: center;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--accent, #e8b84d);
  padding: 2px;
}
.cashout-banner--group .cashout-banner__group-avatar:first-child {
  margin-left: 0;
}
.cashout-banner--group .cashout-banner__avatar--group {
  width: 32px;
  height: 32px;
  border: 2px solid #0d1311;
}
.cashout-banner--group .cashout-banner__name {
  font-size: 13px;
  line-height: 1.3;
}

/* Wave 10 Phase 2: basic FTUE modal — 3-step auto-opened on first ever visit */
.basic-ftue {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;
  display: grid;
  align-items: center;
  justify-items: center;
  /* v186 iOS notch fix: safe-area padding so the basic FTUE card doesn't sit
     under the notch / home indicator.
     v189 F2: calc() pattern for 20px breathing room. */
  padding: calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px);
}
.basic-ftue__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: oklch(92% 0.02 200 / 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.basic-ftue__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(420px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 32px));
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
  padding: clamp(24px, 6vw, 28px) clamp(18px, 5.8vw, 26px) 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, oklch(97% 0.02 200) 0%, oklch(94% 0.03 200) 100%);
  border: 2px solid oklch(78% 0.14 75 / 0.5);
  border-radius: 20px;
  box-shadow: 0 32px 90px oklch(30% 0.02 230 / 0.25), 0 0 30px oklch(78% 0.14 75 / 0.12);
  text-align: center;
  display: grid;
  gap: 14px;
  animation: basic-ftue-in 360ms cubic-bezier(0.22, 1.4, 0.32, 1);
}
@keyframes basic-ftue-in {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.basic-ftue__skip {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid oklch(40% 0.02 230 / 0.3);
  border-radius: 12px;
  color: oklch(40% 0.02 230 / 0.65);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.basic-ftue__skip:hover {
  color: oklch(30% 0.02 230);
  border-color: oklch(40% 0.02 230 / 0.55);
}
.basic-ftue__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 8px auto 0;
  border-radius: 50%;
  background: oklch(78% 0.14 75 / 0.15);
  border: 2px solid oklch(78% 0.14 75 / 0.45);
  color: var(--gold, #e8b84d);
}
.basic-ftue__icon .svg-icon {
  width: 44px;
  height: 44px;
}
.basic-ftue__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--toy-ink, #2a3a4a);
  letter-spacing: 0.02em;
}
.basic-ftue__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: oklch(35% 0.02 230);
}
.basic-ftue__body b {
  color: oklch(55% 0.18 75);
  font-weight: 800;
}
.basic-ftue__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.basic-ftue__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(70% 0.02 230 / 0.3);
  transition: background 220ms ease, transform 220ms ease;
}
.basic-ftue__dot--active {
  background: var(--gold, #e8b84d);
  transform: scale(1.25);
  box-shadow: 0 0 8px rgba(232, 184, 77, 0.6);
}
.basic-ftue__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.basic-ftue__cta {
  min-width: 120px;
  min-height: 44px;
}

/* Phase B (CDS UI, 2026-05-18): overlay shown alongside auto-reveal when the
   CDS window is open. Floats above the reveal-anticipation but below modals. */
.cds-overlay {
  position: fixed;
  /* v189 F1 (landscape notch fix): replace left:50% + transform centering with
     left/right safe-area gutters so the side-bet dialog never extends into
     the iPhone landscape notch (safe-area-inset-left/right ~44-59px). Width
     auto-caps at 420px via max-width + margin-inline:auto so portrait
     centering is preserved without transform. */
  /* v189 F2: calc(env() + N) pattern for breathing room above home indicator
     and clear of the landscape notch. */
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: var(--z-cds-overlay);
  width: auto;
  max-width: 420px;
  margin-inline: auto;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 8px 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 16, 32, 0.96), rgba(10, 8, 18, 0.96));
  border: 2px solid rgba(232, 168, 88, 0.6);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  color: #fff5d7;
  font-size: 13px;
  line-height: 1.4;
  animation: cds-overlay-in 220ms cubic-bezier(0.22, 0.9, 0.32, 1);
}
@keyframes cds-overlay-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.cds-overlay__header {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 245, 215, 0.18);
}
.cds-overlay__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cds-overlay__kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #e8a858;
  text-transform: uppercase;
  font-weight: 800;
}
.cds-overlay__help-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  border: 1px solid oklch(78% 0.14 84 / 0.58);
  background:
    radial-gradient(circle at 50% 18%, oklch(88% 0.1 86 / 0.26), transparent 48%),
    oklch(12% 0.04 242 / 0.9);
  color: oklch(95% 0.055 90);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 14px oklch(78% 0.14 84 / 0.14);
}
.cds-overlay__help-toggle.is-open {
  background: linear-gradient(180deg, #e8a858, #b97825);
  color: #171007;
}
.cds-overlay__header strong { font-size: 13px; color: #fff5d7; }

.cds-overlay__why {
  margin: 2px 0 0;
  color: oklch(92% 0.055 90);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
}

.cds-overlay__decision-card {
  display: grid;
  gap: 1px;
  margin: 0 0 5px;
  padding: 5px 8px;
  border: 1px solid oklch(78% 0.14 84 / 0.48);
  border-radius: 10px;
  background:
    linear-gradient(90deg, oklch(76% 0.14 84 / 0.18), transparent 42%),
    oklch(9% 0.035 242 / 0.72);
  box-shadow: inset 0 1px 0 oklch(98% 0.04 92 / 0.13);
}

.cds-overlay__decision-card span {
  color: oklch(82% 0.13 84);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cds-overlay__decision-card strong {
  color: oklch(96% 0.055 90);
  font-size: 11.5px;
  font-weight: 950;
  line-height: 1.18;
}

.cds-overlay__decision-card small {
  color: oklch(80% 0.07 90);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1.2;
}

.cds-overlay__countdown {
  height: 3px;
  margin: 0 0 5px;
  border-radius: 999px;
  background: rgba(255, 245, 215, 0.12);
  overflow: hidden;
}
.cds-overlay__countdown-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #e8a858, #e0492f);
  transform-origin: left center;
  animation: cds-overlay-countdown var(--cds-window-duration, 6000ms) linear forwards;
}
@keyframes cds-overlay-countdown {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cds-overlay__countdown { display: none; }
}
.cds-overlay__help {
  display: grid;
  gap: 7px;
  margin: 0 0 6px;
  padding: 8px 9px;
  border: 1px solid oklch(78% 0.14 84 / 0.46);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, oklch(78% 0.14 84 / 0.13), transparent 42%),
    linear-gradient(180deg, oklch(15% 0.04 242 / 0.95), oklch(9% 0.034 242 / 0.94));
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.12),
    0 0 18px oklch(78% 0.14 84 / 0.12);
}
.cds-overlay__help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cds-overlay__help-head strong {
  color: #ffd070;
  font-size: 12px;
  font-weight: 950;
}
.cds-overlay__help-close {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid oklch(78% 0.14 84 / 0.42);
  border-radius: 50%;
  background: oklch(8% 0.03 242 / 0.78);
  color: oklch(94% 0.055 90);
  font-size: 17px;
  font-weight: 850;
}
.cds-overlay__help-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 245, 215, 0.9);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.26;
}
.cds-overlay__help-list b {
  color: #fff4c8;
  font-weight: 950;
}
.cds-overlay__help-foot {
  margin: 0;
  padding: 5px 7px;
  border-radius: 8px;
  background: oklch(8% 0.03 242 / 0.58);
  color: #9fc3ff;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
}
.cds-overlay__buyer {
  --accent: #e8a858;
  display: grid;
  gap: 3px;
  padding: 6px 7px;
  margin-top: 5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border-left: none;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.cds-overlay__buyer--placed { opacity: 0.85; }
.cds-overlay__buyer--broke {
  opacity: 0.7;
  box-shadow: inset 0 0 0 1.5px rgba(220, 80, 80, 0.6);
}
.cds-overlay__buyer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cds-overlay__buyer-head strong { font-size: 13px; }
.cds-overlay__placed-tag,
.cds-overlay__premium-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(232, 168, 88, 0.18);
  color: #e8a858;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cds-overlay__placed-line {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 245, 215, 0.78);
}

.cds-overlay__ruleline {
  margin: -1px 0 1px;
  padding: 2px 6px;
  border: 1px solid oklch(76% 0.13 84 / 0.28);
  border-radius: 8px;
  background: oklch(8% 0.03 242 / 0.32);
  color: oklch(94% 0.055 90);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
}
.cds-overlay__targets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.cds-overlay__target {
  --accent: #fff5d7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "info action";
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-left: none;
  box-shadow: inset 0 0 0 1px var(--accent);
  font-size: 12px;
}
.cds-overlay__target.is-hot {
  background: rgba(232, 168, 88, 0.14);
  box-shadow:
    inset 0 0 0 1.5px #e8a858,
    0 0 18px rgba(232, 168, 88, 0.18);
}
.cds-overlay__target.is-full { opacity: 0.55; }
.cds-overlay__target-info {
  grid-area: info;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cds-overlay__target-name,
.cds-overlay__target-question {
  min-width: 0;
  overflow: hidden;
  color: #fff5d7;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cds-overlay__target-question {
  font-size: 12.5px;
  letter-spacing: 0;
}
.cds-overlay__quick-math {
  color: #f8d58f;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.08;
}
.cds-overlay__target-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  min-width: 0;
}
.cds-overlay__target-carry,
.cds-overlay__target-status,
.cds-overlay__target-reason {
  font-size: 10px;
  color: rgba(255, 245, 215, 0.72);
}
.cds-overlay__target-reason {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 220, 145, 0.86);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cds-overlay__target.is-hot .cds-overlay__target-status {
  color: #f8d58f;
  font-weight: 800;
}
.cds-overlay__target.is-hot .cds-overlay__target-reason {
  color: #ffd87a;
}
.cds-overlay__place {
  appearance: none;
  grid-area: action;
  display: inline-grid;
  justify-items: center;
  background: linear-gradient(180deg, #e8a858, #c1842c);
  color: #1a1208;
  font-weight: 800;
  border: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.05;
  cursor: pointer;
  min-width: 78px;
}

.cds-overlay__place-verb {
  font-size: 11px;
  font-weight: 950;
}

.cds-overlay__place-detail {
  font-size: 8.8px;
  font-weight: 850;
  white-space: nowrap;
}

.cds-overlay__place:hover:not([disabled]) { filter: brightness(1.1); }
.cds-overlay__place[disabled] {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 245, 215, 0.4);
  cursor: not-allowed;
}
.cds-overlay__hint {
  margin: 7px 0 0;
  font-size: 10.5px;
  color: rgba(255, 245, 215, 0.6);
  text-align: center;
  font-style: italic;
}

.cds-overlay__skip {
  appearance: none;
  width: 100%;
  min-height: 40px;
  margin: 5px 0 1px;
  border: 1px solid oklch(76% 0.13 84 / 0.46);
  border-radius: 11px;
  background:
    linear-gradient(180deg, oklch(22% 0.052 238 / 0.94), oklch(11% 0.038 242 / 0.96));
  color: oklch(95% 0.055 90);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.14),
    0 0 16px oklch(76% 0.13 84 / 0.12);
}
.cds-overlay--peer { border-color: rgba(120, 140, 220, 0.55); }
.cds-overlay--peer .cds-overlay__kicker { color: #88a0e8; }
.cds-overlay__peer-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 245, 215, 0.72);
}
.player-cds-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  margin-left: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(232, 88, 88, 0.18);
  color: #ffa080;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease;
}
.player-cds-chip:hover { background: rgba(232, 88, 88, 0.28); }
.player-cds-chip.is-expanded {
  background: rgba(232, 88, 88, 0.32);
  flex-wrap: wrap;
  max-width: 280px;
  white-space: normal;
  padding: 4px 8px;
}
.player-cds-chip__explain {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 4px 6px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 245, 215, 0.88);
  letter-spacing: 0;
  text-align: left;
}

/* v170 Codex CDS UX: overlay subtitle under header strong, slightly smaller. */
.cds-overlay__subtitle {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 245, 215, 0.7);
  letter-spacing: 0;
}

/* v175 (v3.1 §1.11): destruction fund balance line shown only when fund > 0.
   Lets buyers see how much shortfall the fund can cover before they bet. */
.cds-overlay__fund {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #8fb9ff;
  letter-spacing: 0.02em;
}

/* Compact first-time CDS coachmark. Keep it above the target list so it explains
   the choice without pushing betting options below the first screen. */
.cds-overlay__coachmark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 5px 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, oklch(78% 0.14 84 / 0.15), transparent 48%),
    oklch(8% 0.032 242 / 0.78);
  border: 1px solid oklch(78% 0.14 84 / 0.36);
  box-shadow: inset 0 1px 0 oklch(98% 0.04 92 / 0.08);
  animation: cds-coachmark-pulse 1800ms ease-in-out 0s 2 alternate;
}
@keyframes cds-coachmark-pulse {
  from { border-color: oklch(78% 0.14 84 / 0.32); }
  to   { border-color: oklch(78% 0.14 84 / 0.66); }
}
.cds-overlay__coachmark-title {
  color: oklch(82% 0.13 84);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.cds-overlay__coachmark-copy {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 245, 215, 0.92);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cds-overlay__coachmark-steps {
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 6px;
  list-style: none;
  font-size: 9.5px;
  line-height: 1.05;
  color: rgba(255, 245, 215, 0.92);
}

.cds-overlay__coachmark-steps li {
  white-space: nowrap;
}

.cds-overlay__coachmark-steps li b {
  color: #ffd070;
}
.cds-overlay__coachmark-cta {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(232, 168, 88, 0.85);
  background: rgba(232, 168, 88, 0.18);
  color: #fff5d7;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cds-overlay__coachmark-cta:hover {
  background: rgba(232, 168, 88, 0.32);
}
@media (prefers-reduced-motion: reduce) {
  .cds-overlay__coachmark { animation: none; }
}

/* Phase D (CDS recap, 2026-05-18): CDS market section in the highlight reel
   modal at quarter end. Slides in after the outcome rows, before the next
   round transition. Hits show green / target-color accent, expires show
   muted grey/red ghost.  */
.highlight-reel__cds {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display: grid;
  gap: 6px;
  width: min(560px, 92vw);
  padding: 10px 12px 12px;
  border-radius: 12px;
  background: rgba(20, 16, 32, 0.65);
  border: 1px solid rgba(232, 168, 88, 0.45);
}
.highlight-reel__cds-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #e8a858;
  text-align: center;
  margin-bottom: 4px;
  opacity: 0;
  animation: outcomeRowIn 320ms ease-out 700ms forwards;
}
.highlight-reel__cds-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto minmax(0, 1fr) minmax(80px, auto);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 244, 216, 0.1);
  font-size: 12px;
  opacity: 0;
  transform: translateX(-12px);
  animation: outcomeRowIn 360ms cubic-bezier(0.22, 1.4, 0.32, 1) calc(900ms + var(--j, 0) * 120ms) forwards;
}
.highlight-reel__cds-row--hit {
  border-color: rgba(62, 211, 145, 0.55);
  background: linear-gradient(180deg, rgba(20, 60, 40, 0.6), rgba(8, 22, 16, 0.7));
}
.highlight-reel__cds-row--expired {
  border-color: rgba(180, 180, 180, 0.28);
  background: linear-gradient(180deg, rgba(40, 35, 50, 0.55), rgba(18, 16, 24, 0.65));
  opacity: 0.85;
}
/* v174: Black Swan refund row — neutral blue, distinct from green (hit) and
   muted grey (expired) so players can tell the premium was returned, not lost. */
.highlight-reel__cds-row--refunded {
  border-color: rgba(120, 168, 232, 0.5);
  background: linear-gradient(180deg, rgba(20, 36, 60, 0.6), rgba(10, 18, 28, 0.7));
}
.highlight-reel__cds-icon {
  text-align: center;
  font-size: 16px;
}
.highlight-reel__cds-buyer,
.highlight-reel__cds-target {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.highlight-reel__cds-arrow {
  color: rgba(255, 244, 216, 0.5);
  font-size: 14px;
  text-align: center;
}
.highlight-reel__cds-result {
  font-weight: 900;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
.highlight-reel__cds-row--hit .highlight-reel__cds-result {
  color: #6fffb0;
}
.highlight-reel__cds-row--expired .highlight-reel__cds-result {
  color: rgba(255, 200, 180, 0.6);
}
.highlight-reel__cds-row--refunded .highlight-reel__cds-result {
  color: #8fb9ff;
}
@media (max-width: 520px) {
  .highlight-reel__cds-row {
    grid-template-columns: 20px minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 6px;
    padding: 6px 8px;
  }
  .highlight-reel__cds-result {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    text-align: right;
  }
}
@media (max-width: 520px) {
  .cds-overlay {
    /* v189 F1: width now auto + left/right safe-area gutters from base rule.
       Override only the mobile-specific bottom/padding/font-size.
       v189 F2: calc() pattern for breathing room. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding: 10px 12px 12px;
    font-size: 12px;
  }
  .cds-overlay__target {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info action";
    grid-template-rows: auto;
    gap: 4px 6px;
  }
  .cds-overlay__target-status {
    grid-column: auto;
    grid-row: auto;
  }
  .cds-overlay__place {
    grid-column: auto;
    grid-row: auto;
    align-self: center;
  }
}

@media (max-width: 390px) {
  .app--commercial-mobile .main-grid {
    gap: 5px;
    padding-inline: 8px;
  }

  .app--commercial-mobile .choice-stage {
    gap: 8px;
  }

  .app--commercial-mobile .voter-card {
    min-height: 0;
    gap: 4px;
    padding: 10px 11px;
  }

  .app--commercial-mobile .voter-card span {
    font-size: 11px;
  }

  .app--commercial-mobile .voter-card strong {
    font-size: clamp(18px, 5.6vw, 21px);
    line-height: 1.08;
  }

  .app--commercial-mobile .player-status-list {
    gap: 5px;
  }

  .app--commercial-mobile .player-status-list--ready {
    grid-template-columns: 1fr;
  }

  .app--commercial-mobile .player-status-list__row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-height: 34px;
    gap: 6px;
    padding: 4px 6px 4px 4px;
  }

  .app--commercial-mobile .player-status-list__avatar {
    width: 26px;
    height: 26px;
  }

  .app--commercial-mobile .player-status-list__name {
    font-size: 12px;
  }

  .app--commercial-mobile .status-chip {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .app--commercial-mobile .quarter-progress__timer {
    font-size: 16px;
  }

  .app--commercial-mobile .quarter-progress__meta {
    font-size: 11px;
  }

  .app--commercial-mobile .decision-quick-strip {
    gap: 4px;
  }

  .app--commercial-mobile .decision-quick-strip span {
    padding: 5px 4px;
  }

  .app--commercial-mobile .decision-quick-strip strong {
    font-size: 16px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout {
    min-height: 48px;
    padding: 6px 7px 6px 52px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout__avatar {
    top: 6px;
    left: 7px;
    width: 36px;
    height: 36px;
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout strong {
    font-size: clamp(18px, 5.8vw, 23px);
  }

  .app--commercial-mobile .decision-panel--choosing .turn-callout small {
    font-size: 10px;
    line-height: 1.2;
  }

  .app--commercial-mobile .decision-pressure {
    min-height: 38px;
    padding: 5px 7px;
  }

  .app--commercial-mobile .decision-pressure__signal {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .app--commercial-mobile .decision-pressure__metric {
    min-width: 36px;
    font-size: 13px;
  }

  .app--commercial-mobile .choice-button {
    min-height: 58px;
    padding: 8px 44px 8px 9px;
  }

  .app--commercial-mobile .choice-button strong {
    font-size: clamp(17px, 5.3vw, 21px);
  }

  .app--commercial-mobile .choice-button span {
    font-size: 10px;
  }

  .app--commercial-mobile.app--mode-choosing .path,
  .app--commercial-mobile.app--mode-handoff .path,
  .app--commercial-mobile.app--mode-choosing .empty-path,
  .app--commercial-mobile.app--mode-handoff .empty-path {
    min-height: clamp(126px, 15vh, 152px);
    min-height: clamp(126px, 15dvh, 152px);
  }

  .app--commercial-mobile.app--mode-choosing .path .card,
  .app--commercial-mobile.app--mode-handoff .path .card {
    flex-basis: min(33vw, 118px);
    height: clamp(176px, 19.4vh, 194px);
    height: clamp(176px, 19.4dvh, 194px);
  }

  .app--commercial-mobile.app--mode-choosing .path .card--crisis,
  .app--commercial-mobile.app--mode-handoff .path .card--crisis {
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    overflow: hidden;
  }

  .app--commercial-mobile .path .card__cash-amount {
    min-height: 64px;
    margin: 18px 4px 2px;
    padding: 8px 6px 9px;
    border-radius: 12px;
  }

  .app--commercial-mobile .path .card__cash-amount::before {
    top: 7px;
    left: 8px;
    font-size: 8px;
  }

  .app--commercial-mobile .path .card__cash-amount::after {
    inset: 6px;
    border-radius: 10px;
  }

  .app--commercial-mobile .path .card__cash-amount span {
    font-size: 9px;
  }

  .app--commercial-mobile .path .card__cash-amount strong {
    font-size: clamp(23px, 6.8vw, 30px);
    line-height: 0.88;
  }

  .app--commercial-mobile .path .card--cash-big .card__cash-amount {
    min-height: 68px;
    margin-inline: 2px;
  }

  .app--commercial-mobile .path .card--cash-big .card__cash-amount strong {
    font-size: clamp(22px, 6.4vw, 28px);
  }

  .app--commercial-mobile .path .card--cash-two-digit .card__cash-amount strong {
    font-size: clamp(21px, 6vw, 27px);
  }

  .app--commercial-mobile .path .card--cash-three-digit .card__cash-amount strong {
    font-size: clamp(17px, 4.9vw, 22px);
  }

  .app--commercial-mobile .path .card--cash-jackpot .card__cash-amount strong {
    font-size: clamp(19px, 5.4vw, 24px);
  }

  .app--commercial-mobile .path .card--cash .card__footer--cash,
  .app--commercial-mobile .path .card--crisis .card__footer--hazard {
    padding: 4px 5px;
    border-radius: 10px;
  }

  .app--commercial-mobile .path .card__cash-title {
    font-size: 10px;
    line-height: 1;
  }

  .app--commercial-mobile .path .card__cash-subtitle {
    font-size: 7px;
    line-height: 1.02;
  }

  .app--commercial-mobile .path .card__hazard-title {
    font-size: clamp(13px, 4vw, 15px);
    line-height: 1;
  }

  .app--commercial-mobile .path .card__hazard-subtitle,
  .app--commercial-mobile .path .card__hazard-rule {
    font-size: 7px;
    line-height: 1.02;
  }
}

html.viewport-mobile-narrow .app--commercial-mobile .path .card--crisis .card__footer--hazard,
html.viewport-mobile-narrow .app--commercial-mobile .path .card--bear .card__footer--hazard,
html.viewport-mobile-narrow .app--commercial-mobile .path .card--black-swan .card__footer--hazard {
  padding: 5px 6px;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 2px;
}

html.viewport-mobile-narrow .app--commercial-mobile .path .card__hazard-kicker {
  font-size: 7px;
  letter-spacing: 0.03em;
}

html.viewport-mobile-narrow .app--commercial-mobile .path .card__hazard-title {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(12px, 3.8vw, 14px);
  line-height: 1.05;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.viewport-mobile-narrow .app--commercial-mobile .path .card__hazard-subtitle {
  display: none;
}

html.viewport-mobile-narrow .app--commercial-mobile .path .card__hazard-rule {
  max-width: 100%;
  overflow: hidden;
  font-size: 7px;
  line-height: 1.08;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.viewport-mobile-tall .app--commercial-mobile.app--mode-choosing .path,
html.viewport-mobile-tall .app--commercial-mobile.app--mode-handoff .path,
html.viewport-mobile-tall .app--commercial-mobile.app--mode-choosing .empty-path,
html.viewport-mobile-tall .app--commercial-mobile.app--mode-handoff .empty-path {
  min-height: clamp(148px, 18vh, 182px);
  min-height: clamp(148px, 18dvh, 182px);
}

html.viewport-mobile-tall .app--commercial-mobile.app--mode-choosing .path .card,
html.viewport-mobile-tall .app--commercial-mobile.app--mode-handoff .path .card {
  flex-basis: min(34vw, 132px);
  height: clamp(190px, 21.4vh, 210px);
  height: clamp(190px, 21.4dvh, 210px);
}

html.viewport-mobile-tall .app--commercial-mobile.app--mode-choosing .path .card--crisis,
html.viewport-mobile-tall .app--commercial-mobile.app--mode-handoff .path .card--crisis {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

html.viewport-mobile-short .app--commercial-mobile.app--mode-choosing .action-strip,
html.viewport-mobile-short .app--commercial-mobile.app--mode-handoff .action-strip {
  padding-top: 2px;
}

html.viewport-mobile-short .app--commercial-mobile .decision-panel {
  padding: 9px;
}

html.viewport-mobile-short .app--commercial-mobile .choice-stage {
  gap: 7px;
}

html.viewport-mobile-short .app--commercial-mobile .choice-button {
  min-height: 54px;
  padding: 7px 42px 7px 8px;
}

html.viewport-mobile-short .app--commercial-mobile .choice-button strong {
  font-size: clamp(16px, 5vw, 20px);
}

html.viewport-mobile-short .app--commercial-mobile .choice-button span {
  font-size: 10px;
}

html.viewport-mobile-short .app--commercial-mobile .player-status-list {
  gap: 5px;
}

html.viewport-mobile-short .app--commercial-mobile .player-status-list__row {
  min-height: 34px;
  padding: 4px 6px 4px 4px;
}

.app--commercial-mobile.app--mode-choosing .player-status-list--decision,
.app--commercial-mobile.app--mode-handoff .player-status-list--decision {
  display: none;
}

.app--commercial-mobile.app--mode-choosing .heckle-bar,
.app--commercial-mobile.app--mode-handoff .heckle-bar,
.app--commercial-mobile.app--mode-quarter-over .heckle-bar,
.app--commercial-mobile.app--result-review .heckle-bar {
  /* Hide the fixed right-rail taunt buttons while a result/quarter review panel
     is up so they don't overlap the recap / near-miss callout. Same convention
     as choosing/handoff above; presentation-only (no gameplay change). */
  display: none;
}

.app--fatal-recovery {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.fatal-recovery-card {
  width: min(100%, 520px);
  display: grid;
  gap: 14px;
  padding: 24px 20px;
  border-radius: 24px;
  background: rgba(7, 14, 19, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
  color: #f7f2df;
}

.fatal-recovery-card h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.fatal-recovery-card p {
  margin: 0;
  color: rgba(255, 246, 228, 0.94);
  line-height: 1.6;
}

.fatal-recovery-card__eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f1c66a;
}

.fatal-recovery-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fatal-recovery-card__details {
  font-size: 0.92rem;
  color: rgba(255, 244, 220, 0.9);
}

.fatal-recovery-card__details summary {
  cursor: pointer;
  color: #fff5d7;
  font-weight: 800;
}

.fatal-recovery-card__details code {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff9ec;
  overflow-wrap: anywhere;
}

/* v213b: FTUE mini-card cascade-last overrides
   Must appear after .app--commercial-mobile .card rules
   to win at equal specificity (0,2,0). */
.card.ftue-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 76px;
  height: auto;
  min-height: 80px;
  max-height: 108px;
  gap: 0;
  padding: 4px 4px 2px;
  grid-template-columns: none;
  grid-template-rows: none;
  transform: none;
  isolation: auto;
  box-shadow:
    inset 0 1px 0 oklch(99% 0.02 92 / 0.7),
    0 3px 0 oklch(47% 0.08 84 / 0.15),
    0 6px 12px oklch(25% 0.06 230 / 0.12);
}
.card--crisis.ftue-mini-card { min-height: 80px; max-height: 108px; }
.card.ftue-mini-card .card-spot { display: none; }
.card.ftue-mini-card::after { display: none; }
.card.ftue-mini-card::before { inset: 3px; border-radius: 4px; }
.card.ftue-mini-card .card__art { padding: 6px 0 2px; width: 100%; display: grid; place-items: center; }
.card.ftue-mini-card .card__symbol { width: 32px; height: 32px; font-size: 22px; border-radius: 10px; }
.card.ftue-mini-card .card__symbol .svg-icon { width: 24px; height: 24px; }
.card.ftue-mini-card .card__footer { padding: 2px 4px 3px; width: 100%; text-align: center; min-height: 0; }
.card.ftue-mini-card .card__tag { font-size: 7px; padding: 1px 5px; top: 2px; right: 2px; }

/* v214: Bear Market + Black Swan FTUE mini-card special themes */
.card--bear.ftue-mini-card {
  background:
    radial-gradient(circle at 50% 35%, oklch(48% 0.18 295 / 0.6), transparent 65%),
    linear-gradient(155deg, oklch(38% 0.16 305), oklch(26% 0.14 298) 55%, oklch(18% 0.1 290));
  border-color: oklch(55% 0.2 300);
  box-shadow: inset 0 1px 0 oklch(65% 0.12 305 / 0.5), 0 3px 0 oklch(22% 0.1 295 / 0.3), 0 6px 14px oklch(18% 0.08 290 / 0.25);
}
.card--bear.ftue-mini-card::before { border-color: oklch(58% 0.14 305 / 0.3); }
.card--bear.ftue-mini-card .card__symbol { color: oklch(92% 0.06 305); background: oklch(32% 0.14 300 / 0.6); border-color: oklch(52% 0.16 305 / 0.4); }
.card--bear.ftue-mini-card .card__note { color: oklch(88% 0.08 305); }

.card--black-swan.ftue-mini-card {
  background:
    radial-gradient(circle at 50% 30%, oklch(22% 0.06 285 / 0.7), transparent 60%),
    linear-gradient(155deg, oklch(18% 0.04 280), oklch(10% 0.03 275) 55%, oklch(5% 0.02 270));
  border-color: oklch(38% 0.08 285);
  box-shadow: inset 0 1px 0 oklch(35% 0.06 285 / 0.4), 0 3px 0 oklch(8% 0.04 280 / 0.5), 0 6px 14px oklch(5% 0.03 270 / 0.4);
}
.card--black-swan.ftue-mini-card::before { border-color: oklch(30% 0.05 285 / 0.25); }
.card--black-swan.ftue-mini-card .card__symbol { color: oklch(85% 0.04 30); background: oklch(14% 0.04 280 / 0.8); border-color: oklch(35% 0.06 285 / 0.3); }
.card--black-swan.ftue-mini-card .card__note { color: oklch(78% 0.03 280); }

/* v215: Character avatar for role FTUE */
.ftue-character { display: flex; flex-direction: column; align-items: center; }
.ftue-character__frame {
  --char-color: oklch(62% 0.14 84);
  width: 128px; height: 128px; border-radius: 50%;
  border: 3px solid var(--char-color); overflow: hidden;
  box-shadow: 0 0 0 5px oklch(65% 0.10 84 / 0.18), 0 8px 24px oklch(15% 0.04 240 / 0.35);
  animation: char-appear 0.4s ease-out both;
}
.ftue-character__frame--text { display: grid; place-items: center; }
.ftue-character__text { font-size: 36px; font-weight: 900; font-family: var(--font-display); color: oklch(96% 0.02 84); text-shadow: 0 2px 4px oklch(15% 0.04 240 / 0.3); }
.ftue-character__img { width: 100%; height: 100%; object-fit: cover; }
@keyframes char-appear { from { opacity: 0; transform: scale(0.7) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.ftue-cast-grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 8px; justify-content: center; animation: cast-reveal 0.5s ease-out both; }
.ftue-cast-mini { width: 52px; height: 52px; border-radius: 50%; border: 2px solid oklch(75% 0.08 84 / 0.5); object-fit: cover; box-shadow: 0 3px 10px oklch(15% 0.04 240 / 0.25); }
.ftue-cast-mini--text { display: grid; place-items: center; font-size: 14px; font-weight: 800; font-family: var(--font-display); color: oklch(96% 0.02 84); }
@keyframes cast-reveal { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* v216: Detail overlay avatar */
.ftue-detail-card__avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid oklch(65% 0.08 84 / 0.35);
  box-shadow: 0 2px 8px oklch(15% 0.04 240 / 0.2);
}

/* v217: Role intro card avatar */
.ftue-role-intro-card__avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  box-shadow:
    0 0 0 2px color-mix(in oklch, var(--role-glow) 26%, transparent),
    0 0 16px color-mix(in oklch, var(--role-glow) 36%, transparent);
}

/* v222: 3D hero guide character — home screen */
.hero-guide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -8px auto 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 600px;
}
.hero-guide__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(78% 0.18 75 / 0.25) 0%, transparent 70%);
  pointer-events: none;
  animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -55%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -55%) scale(1.12); }
}
.hero-guide__scene {
  transform-style: preserve-3d;
  animation: hero-entrance 600ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes hero-entrance {
  0% { opacity: 0; transform: translateY(40px) translateZ(-60px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) translateZ(0) scale(1); }
}
.hero-guide__character {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 3.5px solid oklch(78% 0.16 75 / 0.7);
  box-shadow:
    0 6px 24px oklch(30% 0.02 230 / 0.18),
    0 0 0 6px oklch(78% 0.14 75 / 0.1),
    0 0 40px oklch(78% 0.18 75 / 0.15);
  animation: hero-idle 4s ease-in-out 600ms infinite;
  transform: translateZ(30px);
}
@keyframes hero-idle {
  0%, 100% { transform: translateZ(30px) translateY(0) scale(1); }
  50% { transform: translateZ(30px) translateY(-6px) scale(1.02); }
}
.hero-guide__character--bounce {
  animation: hero-tap-bounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hero-tap-bounce {
  0% { transform: translateZ(30px) scale(1); }
  40% { transform: translateZ(50px) scale(1.12) rotate(-3deg); }
  70% { transform: translateZ(35px) scale(0.96) rotate(1deg); }
  100% { transform: translateZ(30px) scale(1) rotate(0deg); }
}
.hero-guide__bubble {
  position: relative;
  margin-top: 8px;
  padding: 8px 16px;
  background: oklch(99% 0.01 75 / 0.95);
  border: 2px solid oklch(78% 0.14 75 / 0.35);
  border-radius: 16px;
  box-shadow: 0 4px 14px oklch(30% 0.02 230 / 0.08);
  animation: bubble-in 400ms cubic-bezier(0.22, 1.4, 0.36, 1) 300ms both;
}
@keyframes bubble-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-guide__bubble--pop {
  animation: bubble-pop 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bubble-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.hero-guide__tail {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: oklch(99% 0.01 75 / 0.95);
  border-top: 2px solid oklch(78% 0.14 75 / 0.35);
}
.hero-guide__text {
  font-size: 15px;
  font-weight: 800;
  color: oklch(28% 0.03 230);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hero-guide__hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: oklch(55% 0.02 230 / 0.5);
  font-weight: 600;
  animation: hint-fade 1.5s ease-in-out 1.5s both;
}
@keyframes hint-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* v222: compact hero-guide for tutorial picker */
.hero-guide--compact {
  margin: 2px auto 6px;
}
.hero-guide--compact .hero-guide__glow {
  width: 130px;
  height: 130px;
}
.hero-guide--compact .hero-guide__character {
  width: 90px;
  height: 90px;
  box-shadow:
    0 4px 16px oklch(30% 0.02 230 / 0.14),
    0 0 0 4px oklch(78% 0.14 75 / 0.08),
    0 0 24px oklch(78% 0.18 75 / 0.1);
}
.hero-guide--compact .hero-guide__bubble { padding: 6px 14px; }
.hero-guide--compact .hero-guide__text { font-size: 14px; }
.hero-guide--compact .hero-guide__hint { display: none; }

/* v222: basic FTUE hero avatar + speech bubble */
.basic-ftue__hero {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0 auto;
  perspective: 500px;
}
.basic-ftue__hero-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(78% 0.18 75 / 0.2) 0%, transparent 70%);
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
.basic-ftue__hero-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3.5px solid oklch(78% 0.16 75 / 0.7);
  box-shadow:
    0 6px 20px oklch(30% 0.02 230 / 0.15),
    0 0 0 5px oklch(78% 0.14 75 / 0.1),
    0 0 30px oklch(78% 0.18 75 / 0.12);
  animation: hero-idle 4s ease-in-out infinite;
  transform: translateZ(20px);
}
.basic-ftue__speech {
  position: relative;
  margin-top: 10px;
  padding: 10px 16px 8px;
  background: oklch(97% 0.015 200 / 0.6);
  border: 1.5px solid oklch(78% 0.14 75 / 0.25);
  border-radius: 14px;
  text-align: center;
}
.basic-ftue__speech-tail {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: oklch(97% 0.015 200 / 0.6);
}

/* v222: advanced FTUE guide strip — avatar + speech bubble for captions */
.ftue-guide-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px auto 0;
  padding: 0 4px;
  max-width: 400px;
  animation: bubble-in 350ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.ftue-guide-strip__avatar-wrap {
  flex-shrink: 0;
  perspective: 400px;
}
.ftue-guide-strip__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid rgba(232, 184, 77, 0.6);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.25),
    0 0 16px rgba(232, 184, 77, 0.15);
  animation: hero-idle 4s ease-in-out infinite;
  transform: translateZ(15px);
}
.ftue-guide-strip__bubble {
  position: relative;
  padding: 7px 12px;
  background: oklch(0.28 0.055 65);
  border: 1.5px solid oklch(0.42 0.09 70);
  border-radius: 12px 12px 12px 4px;
}
.ftue-guide-strip__tail {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 10px;
  clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
  background: oklch(0.28 0.055 65);
}
.ftue-guide-strip__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: oklch(0.93 0.035 85);
  font-weight: 700;
}

/* ── Path card length uniformity (Hank 2026-05-22) ──
   現金 / 危機 / 專利 / 熊市 / 黑天鵝 五種公牌在檯面（盤勢 strip）長度一致。
   為什麼放檔尾 + 為什麼是 generic .card：default(ready/playing) mode 的高度散落在
   多個 max-width:520 區塊（generic .card clamp(154,18dvh,178) + 專屬 .card--cash
   clamp(178,20dvh,206)）+ 殘留 min-height:168（bear/swan/tip）/ 0（crisis），
   造成 crisis≈154 · bear/swan/tip≈168 · cash≈178 三種高度。choosing/handoff mode
   用 4-class 以上選擇器已把所有 type 釘成單一高度（不受此規則影響）。
   這條 (0,3,0) 同等 specificity + source-order 最後，統一壓過 default mode 全部 type，
   採 cash 既有 clamp 當基準（cash 不變，其餘長到對齊）；min-height:0 移除分歧地板。 */
@media (max-width: 520px) {
  .app--commercial-mobile .path .card {
    height: clamp(178px, 20vh, 206px);
    height: clamp(178px, 20dvh, 206px);
    min-height: 0;
  }
}


/* ── art-candy (Lane B · impeccable craft 2026-05-23): anime-3D 圖融入亮色糖果卡 ──
   保留每型糖果漸層;圖放在柔光暈上跟底色分開,避免 v1 的雜亂感。只動 .path 卡。 */
.card__art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 3px 6px oklch(30% 0.06 40 / 0.34));
}
.app--commercial-mobile .path .card__art {
  padding: 4px;
  min-height: 0;
  border-radius: 13px;
  background: radial-gradient(ellipse at 50% 40%, oklch(100% 0.025 92 / 0.55), transparent 62%);
}
.app--commercial-mobile .path .card__art-img {
  min-height: 64px;
}

/* art-candy: 現金卡是金底,金幣圖容易糊 → 加亮暈 + 較強陰影讓圖 pop */
.app--commercial-mobile .path .card--cash .card__art {
  background: radial-gradient(ellipse at 50% 42%, oklch(100% 0.035 92 / 0.72), oklch(72% 0.1 60 / 0.16) 54%, transparent 70%);
}
.app--commercial-mobile .path .card--cash .card__art-img {
  filter: drop-shadow(0 2px 5px oklch(34% 0.12 58 / 0.5));
}

/* ── art-scenes (2026-05-24): 首頁背景色跟著當前角色 (--home-hue, 取樣自 avatar 主色) ── */
.app--commercial-mobile .setup-backdrop--welcome.home-themed {
  background:
    radial-gradient(130% 80% at 50% 2%, oklch(80% 0.12 var(--home-hue) / 0.55), transparent 56%),
    linear-gradient(180deg, oklch(86% 0.08 var(--home-hue)), oklch(76% 0.1 var(--home-hue)));
  transition: background 0.45s ease;
}
.app--commercial-mobile .home-themed .greed-stage {
  background:
    radial-gradient(circle at 76% 16%, oklch(94% 0.06 var(--home-hue) / 0.55), transparent 32%),
    linear-gradient(160deg, oklch(82% 0.13 var(--home-hue)), oklch(62% 0.15 var(--home-hue)));
  transition: background 0.45s ease;
}
.home-themed .hero-guide__glow {
  background: radial-gradient(circle, oklch(78% 0.16 var(--home-hue) / 0.5), transparent 70%);
  transition: background 0.45s ease;
}

/* ════════ art-scenes 全沉浸玻璃版 (2026-05-24): 場景鋪滿 + chrome 面板深色玻璃 + 淺字,不留奶油 ════════ */
.app--commercial-mobile[class*="app--round-"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 24%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.app--commercial-mobile.app--round-1::before { background-image: linear-gradient(180deg, rgba(16,12,8,0.4), rgba(16,12,8,0.56)), url('./assets/art/bg-q1.webp'); }
.app--commercial-mobile.app--round-2::before { background-image: linear-gradient(180deg, rgba(16,12,8,0.42), rgba(16,12,8,0.58)), url('./assets/art/bg-q2.webp'); }
.app--commercial-mobile.app--round-3::before { background-image: linear-gradient(180deg, rgba(20,12,10,0.46), rgba(20,12,10,0.6)), url('./assets/art/bg-q3.webp'); }
.app--commercial-mobile.app--round-4::before { background-image: linear-gradient(180deg, rgba(10,8,16,0.54), rgba(10,8,16,0.66)), url('./assets/art/bg-q4.webp'); }
.app--commercial-mobile.app--round-5::before { background-image: linear-gradient(180deg, rgba(20,8,10,0.54), rgba(20,8,10,0.66)), url('./assets/art/bg-q5.webp'); }

.app--commercial-mobile[class*="app--round-"],
.app--commercial-mobile[class*="app--round-"] .main-grid,
.app--commercial-mobile[class*="app--round-"] .side,
.app--commercial-mobile[class*="app--round-"] .board { background: transparent !important; }
.app--commercial-mobile[class*="app--round-"] > * { position: relative; z-index: 1; }

/* chrome 面板 → 深色玻璃 + 金邊 */
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail,
.app--commercial-mobile[class*="app--round-"] .leaderboard-row,
.app--commercial-mobile[class*="app--round-"] .player-table,
.app--commercial-mobile[class*="app--round-"] .player-row,
.app--commercial-mobile[class*="app--round-"] .bottom-hud,
.app--commercial-mobile[class*="app--round-"] .bottom-hud__item,
.app--commercial-mobile[class*="app--round-"] .decision-panel,
.app--commercial-mobile[class*="app--round-"] .player-status-list,
.app--commercial-mobile[class*="app--round-"] .drama-banner,
.app--commercial-mobile[class*="app--round-"] .run-stage,
.app--commercial-mobile[class*="app--round-"] .log-panel,
.app--commercial-mobile[class*="app--round-"] .log-toggle,
.app--commercial-mobile[class*="app--round-"] .voter-card,
.app--commercial-mobile[class*="app--round-"] .privacy-card,
.app--commercial-mobile[class*="app--round-"] .intel-grid div,
.app--commercial-mobile[class*="app--round-"] .turn-callout,
.app--commercial-mobile[class*="app--round-"] .player-stat {
  background: oklch(17% 0.02 250 / 0.52) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid oklch(74% 0.12 86 / 0.3) !important;
  box-shadow: 0 6px 16px oklch(6% 0.02 250 / 0.42) !important;
}
/* 盤勢區透明:卡片浮在場景上 */
.app--commercial-mobile[class*="app--round-"] .temple-strip {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* chrome 面板文字轉淺金 (排除卡片) */
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .player-table :not(.card):not(.card *):not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .bottom-hud :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .decision-panel :not(.card):not(.card *):not(.svg-icon):not(.primary-button):not(.choice-button):not(.quarter-recap__danger),
.app--commercial-mobile[class*="app--round-"] .player-status-list :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .drama-banner :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .temple-strip .section-title :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .run-stage :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .log-panel :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .log-toggle {
  color: oklch(93% 0.045 90) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ── art-scenes 3D + 揭曉一行四欄 (2026-05-24) ── */
/* 揭曉/決策名單 → 一行四個玩家(緊湊直式 cell) */
.app--commercial-mobile .player-status-list {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
.app--commercial-mobile .player-status-list__row {
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
  gap: 4px;
  min-height: 0 !important;
  padding: 8px 4px !important;
}
.app--commercial-mobile .player-status-list__avatar { width: 38px; height: 38px; }
.app--commercial-mobile .player-status-list__name {
  font-size: 11px;
  max-width: 100%;
  white-space: nowrap;
}

/* T4-C: Live Tutorial completion panel. The dramatic Game Over ceremony
   (fade-in pulse + red title) makes the tutorial recap feel like a loss,
   so opt out: full opacity, no animation, gold title, cream body. */
.gameover-overlay--tutorial-done,
.gameover-panel--tutorial-done {
  animation: none !important;
  opacity: 1 !important;
}
.gameover-panel--tutorial-done .gameover-title {
  animation: none !important;
  opacity: 1 !important;
  color: var(--gold) !important;
  margin-bottom: 6px;
}
.gameover-tutorial-done__body {
  color: oklch(0.93 0.045 90);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0;
}
.gameover-actions--tutorial-done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.gameover-actions--tutorial-done > button {
  animation: none !important;
  opacity: 1 !important;
}

/* T3-P2: post-reveal result-review stacks reveal rows vertically + restores the
   row's 3-column layout so the cash breakdown can wrap to a 2nd row beneath
   each leaver. Scoped to app--result-review so auto-reveal's 4-up grid stays. */
.app--commercial-mobile.app--result-review .player-status-list--reveal {
  grid-template-columns: 1fr !important;
}
.app--commercial-mobile.app--result-review .player-status-list--reveal .player-status-list__row {
  grid-template-areas:
    "avatar name chip"
    "avatar breakdown breakdown";
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  justify-items: stretch !important;
  align-items: center !important;
  text-align: left !important;
  gap: 4px 10px !important;
  min-height: 50px !important;
  padding: 8px 10px 8px 8px !important;
}
.app--commercial-mobile.app--result-review .player-status-list--reveal .player-status-list__avatar {
  grid-area: avatar;
  width: 38px !important;
  height: 38px !important;
  align-self: center;
  justify-self: center;
}
.app--commercial-mobile.app--result-review .player-status-list--reveal .player-status-list__name {
  grid-area: name;
  align-self: center;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding-left: 0;
  font-size: 15px !important;
  line-height: 1.1;
}
.app--commercial-mobile.app--result-review .player-status-list--reveal .status-chip {
  grid-area: chip;
  align-self: center;
}
.app--commercial-mobile.app--result-review .player-status-list--reveal .player-status-list__breakdown {
  grid-area: breakdown;
  grid-column: auto;
  padding: 0;
  line-height: 1.35;
}
/* T3-P2 visual: brighten the panel title + breakdown to the theme gold so the
   review screen reads clearly against the dark navy background. */
.app--commercial-mobile.app--result-review .decision-panel .section-title h2 {
  color: var(--gold) !important;
}
.app--commercial-mobile.app--result-review .decision-panel .section-title span {
  color: color-mix(in oklch, var(--gold) 80%, var(--cream, oklch(0.93 0.045 90))) !important;
}

/* 玻璃面板加 3D 立體(上緣高光 + 下緣內陰影 + 浮起投影) */
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail,
.app--commercial-mobile[class*="app--round-"] .leaderboard-row,
.app--commercial-mobile[class*="app--round-"] .player-table,
.app--commercial-mobile[class*="app--round-"] .player-row,
.app--commercial-mobile[class*="app--round-"] .bottom-hud,
.app--commercial-mobile[class*="app--round-"] .decision-panel,
.app--commercial-mobile[class*="app--round-"] .player-status-list__row,
.app--commercial-mobile[class*="app--round-"] .drama-banner,
.app--commercial-mobile[class*="app--round-"] .run-stage,
.app--commercial-mobile[class*="app--round-"] .voter-card,
.app--commercial-mobile[class*="app--round-"] .privacy-card,
.app--commercial-mobile[class*="app--round-"] .intel-grid div,
.app--commercial-mobile[class*="app--round-"] .turn-callout {
  box-shadow:
    inset 0 1.5px 0 oklch(98% 0.02 92 / 0.24),
    inset 0 -3px 7px oklch(4% 0.02 250 / 0.4),
    0 9px 20px oklch(3% 0.02 250 / 0.5) !important;
  border-top: 1px solid oklch(88% 0.1 90 / 0.42) !important;
}

/* 按鈕 3D:上緣高光 + 厚下沿 + 浮起,可按壓感 */
.app--commercial-mobile[class*="app--round-"] .primary-button,
.app--commercial-mobile[class*="app--round-"] .choice-button,
.app--commercial-mobile[class*="app--round-"] .action-strip button,
.app--commercial-mobile[class*="app--round-"] .ghost-button {
  box-shadow:
    inset 0 2px 0 oklch(99% 0.05 92 / 0.55),
    0 4px 0 oklch(38% 0.1 68 / 0.45),
    0 9px 15px oklch(8% 0.04 60 / 0.4) !important;
  transform: translateZ(0);
}
.app--commercial-mobile[class*="app--round-"] .primary-button:active,
.app--commercial-mobile[class*="app--round-"] .choice-button:active,
.app--commercial-mobile[class*="app--round-"] .action-strip button:active {
  box-shadow: inset 0 2px 4px oklch(20% 0.06 60 / 0.5) !important;
  transform: translateY(3px);
}

/* 卡片浮起更立體(投影加深 + 內緣高光) */
.app--commercial-mobile[class*="app--round-"] .path .card {
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.5),
    0 14px 26px oklch(3% 0.02 250 / 0.55),
    0 4px 8px oklch(3% 0.02 250 / 0.4) !important;
}

/* 揭曉/選擇名單 → 一行四個玩家(緊湊直式) */
.app--commercial-mobile .choice-list {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
.app--commercial-mobile .choice-list li {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  padding: 9px 4px !important;
  font-size: 12px;
}
.app--commercial-mobile[class*="app--round-"] .choice-list li {
  box-shadow:
    inset 0 1.5px 0 oklch(98% 0.02 92 / 0.2),
    0 6px 14px oklch(4% 0.02 250 / 0.4) !important;
  border-top: 1px solid oklch(86% 0.1 90 / 0.35) !important;
}

/* ── art-scenes: glossy premium 按鈕 + 揭曉格配色 (2026-05-24) ── */
/* 自動揭曉格子 → 暖金深玻璃,跟主題一致 */
.app--commercial-mobile .choice-list li {
  background:
    linear-gradient(180deg, oklch(99% 0.03 92 / 0.16) 0%, oklch(99% 0.03 92 / 0) 46%),
    linear-gradient(180deg, oklch(30% 0.035 72 / 0.66), oklch(19% 0.03 64 / 0.68)) !important;
  border: 1px solid oklch(74% 0.12 86 / 0.34) !important;
}
.app--commercial-mobile .choice-list li span { color: oklch(93% 0.045 90) !important; }
.app--commercial-mobile .choice-list li b { color: oklch(84% 0.13 88) !important; }

/* glossy 半立體主按鈕 (Monopoly GO / Clash Royale 風):上亮面 + bevel + rim + 厚下沿 + 軟陰影 */
.primary-button {
  background:
    linear-gradient(180deg, oklch(100% 0.04 95 / 0.62) 0%, oklch(100% 0.04 95 / 0) 48%),
    linear-gradient(180deg, #ecd6a0, #c2913e 56%, #9c722e) !important;
  border: 1.5px solid oklch(94% 0.08 92) !important;
  border-radius: 15px !important;
  color: #3c2606 !important;
  text-shadow: 0 1px 0 oklch(98% 0.05 95 / 0.5);
  box-shadow:
    inset 0 1.5px 1px oklch(100% 0.03 95 / 0.85),
    inset 0 -3px 3px oklch(45% 0.1 60 / 0.4),
    0 5px 0 #836026,
    0 11px 16px oklch(28% 0.06 50 / 0.42) !important;
}
.primary-button:active {
  box-shadow: inset 0 2px 5px oklch(40% 0.1 55 / 0.55), 0 1px 0 #836026 !important;
  transform: translateY(4px);
}
/* 決策按鈕(套現/加碼)同 glossy 質感,保留各自色相 */
.choice-button {
  border-radius: 15px !important;
  box-shadow:
    inset 0 1.5px 1px oklch(100% 0.03 95 / 0.6),
    inset 0 -3px 3px oklch(20% 0.05 250 / 0.4),
    0 5px 0 oklch(32% 0.06 250 / 0.55),
    0 11px 16px oklch(12% 0.04 250 / 0.4) !important;
}
.choice-button::after {
  content: "";
  position: absolute;
  inset: 2px 2px 50% 2px;
  border-radius: 13px 13px 40% 40%;
  background: linear-gradient(180deg, oklch(100% 0.02 95 / 0.4), oklch(100% 0.02 95 / 0));
  pointer-events: none;
}
.choice-button { position: relative; }
.choice-button:active { transform: translateY(4px); box-shadow: inset 0 2px 5px oklch(20% 0.05 250 / 0.5) !important; }

/* ── art-scenes: 底部決策區配色配合主題 (2026-05-24) ── */
.app--commercial-mobile[class*="app--round-"] .choice-buttons {
  background: transparent !important;
  box-shadow: none !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip span {
  background:
    linear-gradient(180deg, oklch(99% 0.03 92 / 0.14) 0%, oklch(99% 0.03 92 / 0) 46%),
    linear-gradient(180deg, oklch(30% 0.035 72 / 0.68), oklch(19% 0.03 64 / 0.7)) !important;
  border: 1px solid oklch(74% 0.12 86 / 0.32) !important;
  box-shadow: inset 0 1.5px 0 oklch(98% 0.02 92 / 0.2), 0 4px 10px oklch(4% 0.02 250 / 0.38) !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip b { color: oklch(80% 0.06 86) !important; }
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip strong { color: oklch(93% 0.05 90) !important; }
.app--commercial-mobile[class*="app--round-"] .player-status-list__row {
  background:
    linear-gradient(180deg, oklch(99% 0.03 92 / 0.12) 0%, oklch(99% 0.03 92 / 0) 46%),
    linear-gradient(180deg, oklch(28% 0.035 70 / 0.62), oklch(18% 0.03 60 / 0.66)) !important;
}

/* ── art-scenes: 加碼/套現 配色配合金色主題 (2026-05-24) ── */
/* 加碼 = 深翡翠綠 glossy(前進/加注) */
.app--commercial-mobile[class*="app--round-"] .choice-button--stay {
  background:
    linear-gradient(180deg, oklch(92% 0.1 158 / 0.55) 0%, oklch(92% 0.1 158 / 0) 48%),
    linear-gradient(180deg, #34b873, #1f7e4e 55%, #135536) !important;
  border: 1.5px solid oklch(84% 0.14 158) !important;
  color: oklch(99% 0.03 150) !important;
  text-shadow: 0 1px 0 oklch(35% 0.1 150 / 0.5);
}
.app--commercial-mobile[class*="app--round-"] .choice-button--stay strong,
.app--commercial-mobile[class*="app--round-"] .choice-button--stay span { color: oklch(99% 0.03 150) !important; }
/* 套現 = 鮮金 glossy(現金/安全) */
.app--commercial-mobile[class*="app--round-"] .choice-button--leave {
  background:
    linear-gradient(180deg, oklch(100% 0.04 95 / 0.6) 0%, oklch(100% 0.04 95 / 0) 48%),
    linear-gradient(180deg, #ecd6a0, #c2913e 56%, #9c722e) !important;
  border: 1.5px solid oklch(94% 0.08 92) !important;
  color: #3c2606 !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave strong,
.app--commercial-mobile[class*="app--round-"] .choice-button--leave span { color: #3c2606 !important; text-shadow: 0 1px 0 oklch(98% 0.05 95 / 0.5); }

/* ── art-scenes: 按鈕更立體 + 文字更好讀 (2026-05-24) ── */
.app--commercial-mobile[class*="app--round-"] .primary-button,
.app--commercial-mobile[class*="app--round-"] .choice-button {
  border-radius: 16px !important;
  box-shadow:
    inset 0 2.5px 1px oklch(100% 0.03 95 / 0.9),
    inset 0 -5px 5px oklch(30% 0.08 55 / 0.4),
    0 7px 0 var(--btn-edge, oklch(40% 0.08 60)),
    0 15px 22px oklch(6% 0.03 250 / 0.5) !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
}
.app--commercial-mobile[class*="app--round-"] .primary-button:active,
.app--commercial-mobile[class*="app--round-"] .choice-button:active {
  transform: translateY(6px) !important;
  box-shadow: inset 0 3px 6px oklch(25% 0.07 55 / 0.55), 0 1px 0 var(--btn-edge, oklch(40% 0.08 60)) !important;
}
/* 金色鈕(primary + 套現):深濃咖啡字 + 亮底襯線,在金面上高對比 */
.app--commercial-mobile[class*="app--round-"] .primary-button,
.app--commercial-mobile[class*="app--round-"] .choice-button--leave,
.app--commercial-mobile[class*="app--round-"] .primary-button strong,
.app--commercial-mobile[class*="app--round-"] .primary-button span,
.app--commercial-mobile[class*="app--round-"] .choice-button--leave strong,
.app--commercial-mobile[class*="app--round-"] .choice-button--leave span {
  color: oklch(26% 0.08 52) !important;
  text-shadow: 0 1px 0 oklch(99% 0.05 95 / 0.65) !important;
}
.app--commercial-mobile[class*="app--round-"] .primary-button,
.app--commercial-mobile[class*="app--round-"] .choice-button--leave { --btn-edge: #836026; }
/* 翡翠鈕(加碼):純白字 + 深綠陰影 */
.app--commercial-mobile[class*="app--round-"] .choice-button--stay,
.app--commercial-mobile[class*="app--round-"] .choice-button--stay strong,
.app--commercial-mobile[class*="app--round-"] .choice-button--stay span {
  color: oklch(99% 0.015 150) !important;
  text-shadow: 0 1.5px 2px oklch(24% 0.1 150 / 0.7) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--stay { --btn-edge: #0f4d31; }

/* ── art-scenes: CTA 按鈕 dopamine 重做 (2026-05-24, per UX brief) ── */
/* 加碼 = 興奮主 CTA:亮翡翠 #35E08F→#1DBE72 + 發光邊 + glow pulse */
.app--commercial-mobile[class*="app--round-"] .choice-button--stay {
  background:
    linear-gradient(180deg, oklch(100% 0.04 158 / 0.5) 0%, oklch(100% 0.04 158 / 0) 46%),
    linear-gradient(180deg, #35E08F 0%, #1DBE72 54%, #0f8a52 100%) !important;
  border: 2px solid #7dffc0 !important;
  color: #ffffff !important;
  text-shadow: 0 1.5px 2px rgba(8,55,32,0.78) !important;
  animation: ctaPulseGreen 2.1s ease-in-out infinite;
}
@keyframes ctaPulseGreen {
  0%, 100% { box-shadow: inset 0 2.5px 1px rgba(255,255,255,0.9), inset 0 -5px 6px rgba(8,70,42,0.45), 0 7px 0 #0d5836, 0 15px 22px rgba(5,35,21,0.5), 0 0 0 0 rgba(80,240,165,0); }
  50% { box-shadow: inset 0 2.5px 1px rgba(255,255,255,0.9), inset 0 -5px 6px rgba(8,70,42,0.45), 0 7px 0 #0d5836, 0 15px 22px rgba(5,35,21,0.5), 0 0 22px 2px rgba(80,240,165,0.55); }
}
/* 套現 = jackpot CTA:金 #e6c878→#b57f28 + 金幣移動反光 + 金光邊 */
.app--commercial-mobile[class*="app--round-"] .choice-button--leave {
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.62) 48%, transparent 58%) -120% 0 / 240% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 46%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #e6c878 0%, #b57f28 56%, #8c5a1d 100%) !important;
  border: 2px solid #f0d79a !important;
  color: #3a2406 !important;
  text-shadow: 0 1px 0 rgba(255,240,190,0.7) !important;
  box-shadow:
    inset 0 2.5px 1px rgba(255,255,255,0.85),
    inset 0 -5px 5px rgba(120,70,10,0.4),
    0 7px 0 #836026,
    0 15px 22px rgba(40,28,8,0.5),
    0 0 16px rgba(246,213,106,0.4) !important;
  animation: coinShineGold 3.6s ease-in-out infinite;
}
@keyframes coinShineGold {
  0%, 66% { background-position: -120% 0, 0 0, 0 0; }
  100% { background-position: 240% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile[class*="app--round-"] .choice-button--stay,
  .app--commercial-mobile[class*="app--round-"] .choice-button--leave { animation: none !important; }
}

/* ── art-scenes: 減少 UI 外框 (2026-05-24, per UX brief 二「減少外框」) ──
   商業手遊靠 elevation(陰影)分群,不靠描邊。去掉玩家區/中央區/HUD 巢狀+重複+次要面板的金框,
   只在兩個主聚焦容器(玩家名單、決策面板)留一條極淡細邊。box-shadow 立體感保留不動。 */
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail,
.app--commercial-mobile[class*="app--round-"] .leaderboard-row,
.app--commercial-mobile[class*="app--round-"] .player-row,
.app--commercial-mobile[class*="app--round-"] .bottom-hud,
.app--commercial-mobile[class*="app--round-"] .bottom-hud__item,
.app--commercial-mobile[class*="app--round-"] .player-stat,
.app--commercial-mobile[class*="app--round-"] .player-status-list,
.app--commercial-mobile[class*="app--round-"] .player-status-list__row,
.app--commercial-mobile[class*="app--round-"] .drama-banner,
.app--commercial-mobile[class*="app--round-"] .run-stage,
.app--commercial-mobile[class*="app--round-"] .log-panel,
.app--commercial-mobile[class*="app--round-"] .log-toggle,
.app--commercial-mobile[class*="app--round-"] .voter-card,
.app--commercial-mobile[class*="app--round-"] .turn-callout,
.app--commercial-mobile[class*="app--round-"] .choice-list li {
  border: none !important;
}
/* 主聚焦容器:玩家名單 + 決策面板 留極淡細邊(降彩度+透明度,非金框) */
.app--commercial-mobile[class*="app--round-"] .player-table,
.app--commercial-mobile[class*="app--round-"] .decision-panel {
  border: 1px solid oklch(80% 0.05 88 / 0.16) !important;
}

/* ── art-scenes: ②卡牌聚焦 + ④降低背景 (2026-05-24, per UX brief 三+四) ── */
/* ④ 背景退為 atmosphere:降飽和/對比/細節(blur)+ 壓暗,不搶卡牌 attention */
.app--commercial-mobile[class*="app--round-"]::before {
  inset: -14px !important;           /* blur bleed room,避免邊緣硬切 */
  filter: saturate(0.6) contrast(0.8) brightness(0.76) blur(3px);
}
/* ② vignette(四周壓暗)+ spotlight(中上聚光打在卡牌區)→ 第一眼只看卡牌 */
.app--commercial-mobile[class*="app--round-"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 72% at 50% 30%, transparent 0 33%, oklch(5% 0.02 250 / 0.58) 100%),
    radial-gradient(66% 36% at 50% 29%, oklch(96% 0.06 90 / 0.17), transparent 62%);
}
/* ② 卡牌放大 ~13% + 提高對比 + 加深投影 + 暖金桌面反光 */
.app--commercial-mobile[class*="app--round-"] .path .card {
  min-height: 104px !important;
  filter: contrast(1.07) saturate(1.08);
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.6),
    0 16px 30px oklch(2% 0.02 250 / 0.6),
    0 5px 10px oklch(2% 0.02 250 / 0.45),
    0 30px 28px -16px oklch(72% 0.12 86 / 0.28) !important;
}

/* ════════ art-scenes: ③HUD 情緒化 + ⑤玩家資訊卡 (2026-05-24, per UX brief §五/六/七) ════════
   palette §八: Gold #d4a84e · Emerald #30E38A · Crash Red #D61F3E · Swan Purple #7A4DFF */

/* ── §六 Market Emotion HUD:盤勢 run-stage 隨 hazardRisk 等級變情緒 ── */
.app--commercial-mobile[class*="app--round-"] .run-stage {
  position: relative;
  transition: box-shadow .4s ease;
}
.app--commercial-mobile[class*="app--round-"] .run-stage__status strong {
  font-weight: 900;
  letter-spacing: .02em;
}
/* calm = 牛市/穩:翡翠綠 glow */
.app--commercial-mobile[class*="app--round-"] .run-stage--calm {
  box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 18px #30e38a55, 0 8px 18px #02140c88 !important;
}
.app--commercial-mobile[class*="app--round-"] .run-stage--calm .run-stage__status strong { color: #5bf0a8 !important; text-shadow: 0 0 10px #30e38a99; }
/* warm = 加溫:琥珀金 */
.app--commercial-mobile[class*="app--round-"] .run-stage--warm {
  box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 16px #d4a84e55, 0 8px 18px #14100288 !important;
}
.app--commercial-mobile[class*="app--round-"] .run-stage--warm .run-stage__status strong { color: #d4a84e !important; text-shadow: 0 0 10px #d4a84e99; }
/* hot = 熊市/警戒:Crash 紅 pulse */
.app--commercial-mobile[class*="app--round-"] .run-stage--hot .run-stage__status strong { color: #ff7488 !important; text-shadow: 0 0 12px #d61f3edd; }
.app--commercial-mobile[class*="app--round-"] .run-stage--hot { animation: mktBearPulse 1.5s ease-in-out infinite; }
@keyframes mktBearPulse {
  0%,100% { box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 14px #d61f3e55, 0 8px 18px #1a0206aa; }
  50% { box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 28px #d61f3eaa, 0 8px 18px #1a0206aa; }
}
/* critical = 黑天鵝逼近:Swan 紫 lightning + 閃爍 */
.app--commercial-mobile[class*="app--round-"] .run-stage--critical .run-stage__status strong { color: #b79bff !important; text-shadow: 0 0 14px #7a4dffdd; }
.app--commercial-mobile[class*="app--round-"] .run-stage--critical { animation: mktSwanFlash 1.15s steps(1) infinite; }
@keyframes mktSwanFlash {
  0%,100% { box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 16px #7a4dff66, 0 8px 18px #0c0420; }
  48% { box-shadow: inset 0 1px 0 oklch(99% .03 92/.3), 0 0 30px #7a4dffcc, 0 0 50px #7a4dff55, 0 8px 18px #0c0420; }
  52% { box-shadow: inset 0 0 0 1px #b79bff, 0 0 38px #b79bffdd, 0 8px 18px #0c0420; }
}
/* drama-banner 事件情緒色 */
.app--commercial-mobile[class*="app--round-"] .drama-banner--black-swan,
.app--commercial-mobile[class*="app--round-"] .drama-banner--swan { box-shadow: 0 0 22px #7a4dff77 !important; }
.app--commercial-mobile[class*="app--round-"] .drama-banner--crash,
.app--commercial-mobile[class*="app--round-"] .drama-banner--bust { box-shadow: 0 0 22px #d61f3e77 !important; }

/* ── §七 玩家情緒 HUD:decision-quick-strip 改情緒化(身上現金超大 + 風險 meter)── */
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip { gap: 7px; align-items: stretch; }
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip .dqs {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
}
.app--commercial-mobile[class*="app--round-"] .dqs--cash b::before { content: "💰 "; }
.app--commercial-mobile[class*="app--round-"] .dqs--vault b::before { content: "🏦 "; }
.app--commercial-mobile[class*="app--round-"] .dqs--risk b::before { content: "⚠️ "; }
.app--commercial-mobile[class*="app--round-"] .dqs--cash strong {
  font-size: 25px; font-weight: 900; line-height: 1; color: #d4a84e !important;
  text-shadow: 0 1px 0 #00000066, 0 0 12px #d4a84e55;
}
.app--commercial-mobile[class*="app--round-"] .dqs--vault strong { color: #f0e6c8 !important; font-weight: 800; }
.app--commercial-mobile[class*="app--round-"] .dqs--risk { padding-bottom: 11px; }
.app--commercial-mobile[class*="app--round-"] .dqs__meter {
  position: absolute; left: 9px; right: 9px; bottom: 5px; height: 4px;
  border-radius: 99px; background: oklch(30% .02 250 / .7); overflow: hidden;
}
.app--commercial-mobile[class*="app--round-"] .dqs__meter::before {
  content: ""; position: absolute; inset: 0; width: clamp(0%, var(--risk, 0%), 100%);
  border-radius: 99px;
  background: linear-gradient(90deg, #30e38a, #d4a84e 55%, #d61f3e);
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--hot .dqs--risk strong { color: #ff7488 !important; }
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--critical .dqs--risk strong { color: #b79bff !important; }

/* ── §五 玩家資訊卡:leaderboard-row → poker seat 卡(grid named-areas 沿用不動)── */
.app--commercial-mobile[class*="app--round-"] .leaderboard-row {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, oklch(27% .03 255 / .6), oklch(16% .025 255 / .66)) !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__rank {
  color: #d4a84e !important; font-weight: 900; opacity: .8;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__avatar {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  box-shadow: 0 0 0 2px oklch(82% .06 90 / .32), 0 2px 6px #00000077 !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__name { font-weight: 800 !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__score {
  font-size: 18px !important; font-weight: 900 !important; color: #d4a84e !important;
  text-shadow: 0 0 10px #d4a84e44;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__meta { opacity: .82; }
/* 領先 = 金 glow */
.app--commercial-mobile[class*="app--round-"] .leaderboard-row.is-leading {
  background: linear-gradient(180deg, oklch(42% .09 88 / .5), oklch(22% .05 80 / .62)) !important;
  box-shadow: 0 0 0 1.5px #d4a84e88, 0 0 18px #d4a84e55, 0 8px 16px #0c0a04 !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row.is-leading .leaderboard-row__avatar {
  box-shadow: 0 0 0 2px #d4a84e, 0 0 12px #d4a84eaa !important;
}
/* 你 = 翡翠 ring */
.app--commercial-mobile[class*="app--round-"] .leaderboard-row.is-me:not(.is-leading) {
  box-shadow: 0 0 0 1.5px #30e38a77, 0 6px 14px #04140c !important;
}

/* reduce-motion:關 market 脈動/閃爍 */
@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile[class*="app--round-"] .run-stage--hot,
  .app--commercial-mobile[class*="app--round-"] .run-stage--critical { animation: none !important; }
}

/* §七 延伸:decision-pressure 危機條 retheme 成暗玻璃 + 情緒色(原淺桃色撞沉浸主題)*/
.app--commercial-mobile[class*="app--round-"] .decision-pressure {
  color: oklch(93% .045 90) !important;
  border: none !important;
  background: linear-gradient(180deg, oklch(24% .03 255 / .66), oklch(15% .025 255 / .7)) !important;
  box-shadow: inset 0 1.5px 0 oklch(99% .03 92 / .18), 0 8px 18px #00000088 !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-pressure--danger {
  background:
    repeating-linear-gradient(-12deg, transparent 0 9px, #d61f3e1f 10px 13px),
    linear-gradient(180deg, oklch(30% .08 28 / .7), oklch(17% .05 24 / .72)) !important;
  box-shadow: inset 0 1.5px 0 #ffffff22, 0 0 18px #d61f3e44, 0 8px 18px #1a0206 !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-pressure--reward {
  background:
    radial-gradient(circle at 86% 16%, #d4a84e33, transparent 44%),
    linear-gradient(180deg, oklch(34% .07 88 / .66), oklch(18% .04 80 / .7)) !important;
  box-shadow: inset 0 1.5px 0 #ffffff22, 0 0 16px #d4a84e44, 0 8px 18px #14100266 !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-pressure__copy strong { color: #ffffff !important; }
.app--commercial-mobile[class*="app--round-"] .decision-pressure__copy span,
.app--commercial-mobile[class*="app--round-"] .decision-pressure__metric { color: oklch(90% .04 90) !important; }
.app--commercial-mobile[class*="app--round-"] .decision-pressure--danger .decision-pressure__copy strong { color: #ff8a99 !important; text-shadow: 0 0 8px #d61f3e88; }

/* ════════ art-scenes Batch A: #3 輪到你 / #4 風險三段 / #5 warning 標籤 / #10 idle 動畫 (2026-05-24) ════════ */

/* ── #3 「現在輪到你」:pulse border + 金色 streak(最重要的決策提示)── */
.app--commercial-mobile[class*="app--round-"] .turn-callout--active-turn {
  position: relative; overflow: hidden;
  animation: turnPulse 1.8s ease-in-out infinite;
}
@keyframes turnPulse {
  0%,100% { box-shadow: 0 0 0 1.5px #d4a84e66, 0 0 12px #d4a84e44, inset 0 1.5px 0 #ffffff22; }
  50% { box-shadow: 0 0 0 2px #ecd6a0, 0 0 22px #d4a84e99, inset 0 1.5px 0 #ffffff33; }
}
.app--commercial-mobile[class*="app--round-"] .turn-callout--active-turn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 32%;
  background: linear-gradient(105deg, transparent, #ffe9b388, transparent);
  transform: skewX(-16deg); pointer-events: none; z-index: 2;
  animation: turnStreak 2.8s ease-in-out infinite;
}
@keyframes turnStreak { 0%,60% { left: -42%; } 100% { left: 132%; } }

/* ── #4 風險條三段情緒:<50 綠 / 50-75 黃 pulse / 75+ 紅閃 + shake ── */
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-low .dqs__meter::before {
  background: linear-gradient(90deg, #30e38a, #5bf0a8) !important;
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-mid .dqs__meter::before {
  background: linear-gradient(90deg, #f0b53e, #ffce5e) !important;
  animation: riskMidPulse 1.1s ease-in-out infinite;
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-high .dqs__meter::before {
  background: linear-gradient(90deg, #d61f3e, #ff6a7e) !important;
  animation: riskHighFlash .5s steps(2) infinite;
}
@keyframes riskMidPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes riskHighFlash { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-mid .dqs--risk strong { color: #ffce5e !important; }
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-high .dqs--risk strong {
  color: #ff6a7e !important; text-shadow: 0 0 10px #d61f3eaa;
}
.app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-high .dqs--risk {
  animation: riskShake .42s ease-in-out infinite;
}
@keyframes riskShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }

/* ── #5 warning 標籤:讓那條 % 標明是「爆倉率」── */
.app--commercial-mobile[class*="app--round-"] .decision-pressure__metric {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1; gap: 2px;
}
.app--commercial-mobile[class*="app--round-"] .decision-pressure__metric-label {
  font-size: 9px; font-weight: 800; font-style: normal; opacity: .9; letter-spacing: .02em; white-space: nowrap;
}

/* ── #10 idle 動畫:讓 UI 活起來(卡牌 breathing float + skyline 緩慢 parallax)── */
.app--commercial-mobile[class*="app--round-"] .path .card { animation: cardFloat 4.6s ease-in-out infinite; }
.app--commercial-mobile[class*="app--round-"] .path .card:nth-child(even) { animation-delay: -2.3s; }
@keyframes cardFloat {
  0%,100% { transform: perspective(900px) rotateX(2deg) translateY(0); }
  50% { transform: perspective(900px) rotateX(2deg) translateY(-3px); }
}
.app--commercial-mobile[class*="app--round-"]::before {
  animation: skylineDrift 40s ease-in-out infinite alternate;
}
@keyframes skylineDrift { 0% { background-position: center 24%; } 100% { background-position: center 31%; } }

/* reduce-motion:全關 Batch A idle/emotion 動畫 */
@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile[class*="app--round-"] .turn-callout--active-turn,
  .app--commercial-mobile[class*="app--round-"] .turn-callout--active-turn::after,
  .app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-mid .dqs__meter::before,
  .app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-high .dqs__meter::before,
  .app--commercial-mobile[class*="app--round-"] .decision-quick-strip--risk-high .dqs--risk,
  .app--commercial-mobile[class*="app--round-"] .path .card,
  .app--commercial-mobile[class*="app--round-"]::before { animation: none !important; }
}

/* ════════ art-scenes Batch B-1: #12 市場情緒世界 / #6 卡框降光 / #1 卡圖 spotlight / #7 中央 poker felt (2026-05-24) ════════ */

/* ── #7 中央牌區 = poker felt:暗底 + 背景 blur/降彩,讓 skyline 退、卡牌上舞台 ── */
.app--commercial-mobile[class*="app--round-"] .temple-strip {
  background: radial-gradient(120% 82% at 50% 42%, oklch(17% 0.02 250 / 0.5), oklch(10% 0.015 250 / 0.66)) !important;
  -webkit-backdrop-filter: blur(2px) saturate(0.66);
  backdrop-filter: blur(2px) saturate(0.66);
  border-radius: 16px !important;
}
.app--commercial-mobile[class*="app--round-"] .temple-strip::before { opacity: 0.16 !important; }

/* ── #6 候選卡降彩度(綠/紅不再吃掉卡圖)+ #1 卡圖後柔暗 spotlight + 提對比清晰 ── */
.app--commercial-mobile[class*="app--round-"] .path .card { filter: contrast(1.03) !important; }
.app--commercial-mobile[class*="app--round-"] .path .card--cash {
  background: linear-gradient(120deg, oklch(89% 0.056 134), oklch(81% 0.094 150) 58%, oklch(73% 0.088 165)) !important;
  border-color: oklch(58% 0.11 146) !important;
}
.app--commercial-mobile[class*="app--round-"] .path .card--crisis {
  background: linear-gradient(120deg, oklch(89% 0.044 52), oklch(81% 0.08 42) 52%, oklch(73% 0.094 31)) !important;
  border-color: oklch(58% 0.13 30) !important;
}
.app--commercial-mobile[class*="app--round-"] .path .card::before { opacity: 0.4 !important; }
.app--commercial-mobile[class*="app--round-"] .path .card .card__art { position: relative; }
.app--commercial-mobile[class*="app--round-"] .path .card .card__art::before {
  content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, oklch(16% 0.02 250 / 0.34), transparent 66%);
}
.app--commercial-mobile[class*="app--round-"] .path .card .card__art-img {
  position: relative; z-index: 1;
  filter: contrast(1.12) saturate(1.1) drop-shadow(0 3px 7px rgba(0,0,0,0.42));
}

/* ── #12 全螢幕市場情緒世界(整屏 ::after 隨 app--market-level;牛/熊/黑天鵝)── */
.app--commercial-mobile.app--market-calm[class*="app--round-"]::after {
  background:
    radial-gradient(125% 75% at 50% 32%, transparent 0 36%, oklch(8% 0.03 160 / 0.5) 100%),
    radial-gradient(60% 32% at 50% 28%, oklch(82% 0.12 150 / 0.13), transparent 62%);
}
.app--commercial-mobile.app--market-hot[class*="app--round-"]::after {
  background:
    radial-gradient(125% 80% at 50% 35%, transparent 0 26%, oklch(7% 0.06 24 / 0.66) 100%),
    radial-gradient(70% 40% at 50% 30%, oklch(46% 0.17 26 / 0.16), transparent 60%);
  animation: worldBear 3.2s steps(4) infinite;
}
@keyframes worldBear { 0%,100% { opacity: 1; } 50% { opacity: .85; } }
.app--commercial-mobile.app--market-critical[class*="app--round-"]::after {
  background:
    radial-gradient(125% 85% at 50% 36%, transparent 0 22%, oklch(5% 0.07 300 / 0.72) 100%),
    radial-gradient(72% 42% at 50% 30%, oklch(48% 0.2 300 / 0.2), transparent 58%);
  animation: worldSwan 1.5s steps(2) infinite;
}
@keyframes worldSwan {
  0%,100% { transform: translateX(0); filter: hue-rotate(0deg); }
  48% { transform: translateX(-1px); filter: hue-rotate(7deg); }
  50% { transform: translateX(1.5px); filter: hue-rotate(-9deg); }
}
@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile.app--market-hot[class*="app--round-"]::after,
  .app--commercial-mobile.app--market-critical[class*="app--round-"]::after { animation: none !important; }
}

/* ════════ art-scenes Batch B-2: #2 當前卡舞台 / #8 排行榜皇冠 / #9 套現誘惑 (2026-05-24) ════════ */

/* ── #2 當前事件卡(最新一張)放大 5% + 微 tilt + 抬升,像 Marvel Snap 主事件 ── */
.app--commercial-mobile[class*="app--round-"] .path .card:last-child {
  animation: none !important;
  transform: perspective(900px) rotateX(2deg) scale(1.045) rotateZ(-1.1deg) !important;
  z-index: 3;
  box-shadow:
    inset 0 2px 0 oklch(99% 0.03 92 / 0.6),
    0 20px 38px oklch(2% 0.02 250 / 0.66),
    0 6px 12px oklch(2% 0.02 250 / 0.5),
    0 34px 30px -16px oklch(72% 0.12 86 / 0.34) !important;
}
.app--commercial-mobile[class*="app--round-"] .path .card:last-child .card__art::before {
  background: radial-gradient(circle at 50% 46%, oklch(22% 0.03 250 / 0.42), transparent 68%) !important;
}

/* ── #8 排行榜 #1 = 皇冠 + 金 shine(社交壓力來源)── */
.app--commercial-mobile[class*="app--round-"] .leaderboard-list li:first-child .leaderboard-row__rank::before {
  content: "👑"; display: block; font-size: 12px; line-height: 1; margin-bottom: 1px;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-list li:first-child.is-leading {
  animation: leaderShine 2.6s ease-in-out infinite;
}
@keyframes leaderShine {
  0%,100% { box-shadow: 0 0 0 1.5px #d4a84e88, 0 0 16px #d4a84e55, 0 8px 16px #0c0a04; }
  50% { box-shadow: 0 0 0 2px #ecd6a0, 0 0 26px #d4a84eaa, 0 8px 16px #0c0a04; }
}

/* ── #9 套現按鈕更誘惑:金色 inner glow 呼吸(jackpot cashout),疊加既有金幣掃光 ── */
.app--commercial-mobile[class*="app--round-"] .choice-button--leave {
  animation: coinShineGold 3.6s ease-in-out infinite, cashoutGlow 2.2s ease-in-out infinite;
}
@keyframes cashoutGlow {
  0%,100% {
    box-shadow:
      inset 0 2.5px 1px rgba(255,255,255,0.85),
      inset 0 -5px 5px rgba(120,70,10,0.4),
      0 7px 0 #836026,
      0 15px 22px rgba(40,28,8,0.5),
      0 0 14px rgba(230,200,120,0.32);
  }
  50% {
    box-shadow:
      inset 0 2.5px 1px rgba(255,255,255,0.95),
      inset 0 -5px 5px rgba(120,70,10,0.4),
      inset 0 0 16px rgba(255,225,150,0.28),
      0 7px 0 #836026,
      0 15px 22px rgba(40,28,8,0.5),
      0 0 24px rgba(245,215,130,0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app--commercial-mobile[class*="app--round-"] .leaderboard-list li:first-child.is-leading,
  .app--commercial-mobile[class*="app--round-"] .choice-button--leave { animation: none !important; }
}

/* ════════ art-scenes fixes (2026-05-24 pm): topbar 主題/z-index、排版 order、turn-callout、按鈕文字 ════════ */

/* ── #2 漢堡選單可點:沉浸的 >*{z-index:1} 蓋掉 topbar z-index,popover 被後面 sibling 蓋住 ── */
.app--commercial-mobile[class*="app--round-"] > .topbar { z-index: 60 !important; }
.app--commercial-mobile[class*="app--round-"] > .topbar.topbar--menu-open { z-index: 200 !important; }
.app--commercial-mobile[class*="app--round-"] .topbar-menu,
.app--commercial-mobile[class*="app--round-"] .topbar-menu__popover { z-index: 210 !important; }

/* ── #1 固定欄改暗色賭場主題(原 commercial 是近白底,不搭沉浸)── */
.app--commercial-mobile[class*="app--round-"] .topbar {
  background: linear-gradient(180deg, oklch(20% 0.03 255 / 0.92), oklch(13% 0.025 255 / 0.95)) !important;
  border-bottom: 1px solid oklch(74% 0.1 86 / 0.32) !important;
  box-shadow: 0 6px 20px oklch(4% 0.02 250 / 0.5) !important;
}
.app--commercial-mobile[class*="app--round-"] .topbar h1,
.app--commercial-mobile[class*="app--round-"] .topbar .brand p,
.app--commercial-mobile[class*="app--round-"] .topbar .icon-button,
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button { color: oklch(95% 0.04 90) !important; }
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button,
.app--commercial-mobile[class*="app--round-"] .topbar .icon-button {
  background: oklch(30% 0.03 255 / 0.5) !important;
  border-color: oklch(74% 0.1 86 / 0.28) !important;
}
.app--commercial-mobile[class*="app--round-"] .topbar-menu__popover {
  background: linear-gradient(180deg, oklch(23% 0.03 255 / 0.98), oklch(14% 0.025 255 / 0.98)) !important;
  border: 1px solid oklch(74% 0.12 86 / 0.42) !important;
}
.app--commercial-mobile[class*="app--round-"] .topbar-menu__popover::before { border-color: oklch(74% 0.12 86 / 0.42) !important; }
.app--commercial-mobile[class*="app--round-"] .topbar-menu__item { color: oklch(95% 0.04 90) !important; }

/* ── #3 排版:盤勢(board 內 run-stage)排上、排名(leaderboard)排下不干擾 ── */
.app--commercial-mobile[class*="app--round-"] .main-grid > .board { order: 1; }
.app--commercial-mobile[class*="app--round-"] .main-grid > .leaderboard-rail { order: 2; }
.app--commercial-mobile[class*="app--round-"] .main-grid > .side { order: 3; }

/* ── #4 現在輪到誰:移除虛線框 + 收斂外圈更清爽 ── */
.app--commercial-mobile[class*="app--round-"] .turn-callout::before { display: none !important; }
.app--commercial-mobile[class*="app--round-"] .turn-callout {
  padding: 12px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,244,216,0.16), 0 10px 22px rgba(0,0,0,0.34) !important;
}

/* ── #5 加碼/套現文字更清楚:提到 sheen 之上 + 去糊 text-shadow + 加粗 ── */
.app--commercial-mobile[class*="app--round-"] .choice-button > strong,
.app--commercial-mobile[class*="app--round-"] .choice-button > span { position: relative; z-index: 2; }
.app--commercial-mobile[class*="app--round-"] .choice-button::after { opacity: 0.5; }
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > strong {
  color: #ffffff !important; font-weight: 900 !important; text-shadow: 0 1px 2px rgba(4,40,22,0.6) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > span {
  color: oklch(96% 0.04 150) !important; text-shadow: 0 1px 1px rgba(4,40,22,0.5) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > strong {
  color: #3a2406 !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(255,240,200,0.72) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > span {
  color: #4a3210 !important; text-shadow: 0 1px 0 rgba(255,240,200,0.6) !important;
}

/* #2 強化:popover 改 fixed 脫離任何 stacking 陷阱(run-stage backdrop-filter+z:1 會蓋),保證最上層可點 */
.app--commercial-mobile[class*="app--round-"] .topbar-menu__popover {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 58px) !important;
  left: calc(env(safe-area-inset-left) + 10px) !important;
  right: auto !important;
  z-index: 9999 !important;
}

/* ════════ art-scenes fixes-2 (2026-05-24 pm): 按鈕字去糊 + 排名縮小移到最下 ════════ */

/* ── #5 修正:先前 2px-blur shadow + 900 字重反而糊 → 0-blur / 無陰影 + 800 字重,銳利清晰 ── */
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > strong {
  color: #ffffff !important; font-weight: 800 !important; text-shadow: none !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > span {
  color: #eafff2 !important; text-shadow: none !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > strong {
  color: #2e1c04 !important; font-weight: 800 !important; text-shadow: none !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > span {
  color: #3f2a08 !important; text-shadow: none !important;
}

/* ── 排名移到最下面 + 大幅縮小(卡牌才是重點,減少上下滑動)── */
.app--commercial-mobile[class*="app--round-"] .main-grid > .side { order: 2; }
.app--commercial-mobile[class*="app--round-"] .main-grid > .leaderboard-rail { order: 9; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail__head { display: none !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail { gap: 4px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row {
  padding: 4px 7px !important; border-radius: 9px !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__avatar {
  width: 24px !important; height: 24px !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__name { font-size: 11px !important; font-weight: 700 !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__score { font-size: 13px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__meta { font-size: 9px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__rank { font-size: 10px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-list li:first-child .leaderboard-row__rank::before { font-size: 9px !important; }

/* ── 排名壓成單行水平緊湊 strip(高度砍半,卡牌主導、減少滑動)── */
.app--commercial-mobile[class*="app--round-"] .leaderboard-list {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 5px !important;
  overflow-x: auto;
  grid-auto-flow: unset !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row {
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  flex: 0 0 auto;
  padding: 3px 9px 3px 4px !important;
  scroll-snap-align: start;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__rank,
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__meta { display: none !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__avatar { width: 22px !important; height: 22px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__name {
  font-size: 10px !important; font-weight: 700 !important;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__score { font-size: 13px !important; }
.app--commercial-mobile[class*="app--round-"] .leaderboard-list li:first-child .leaderboard-row__name::before {
  content: "👑 "; font-size: 9px;
}

/* ════════ FIX 排版重疊 (2026-05-24 pm): 矮螢幕 sticky 決策區浮起蓋住排名,半透明面板讓排名文字透出 → 破版 ════════ */
/* ① action-strip 給不透明深底(頂部漸隱融合),pin 起來時乾淨覆蓋後方內容,不再透出排名 */
.app--commercial-mobile[class*="app--round-"] .action-strip {
  background: linear-gradient(180deg, oklch(10% 0.02 255 / 0) 0%, oklch(9% 0.02 255 / 0.92) 16%, oklch(8% 0.02 255 / 0.98) 100%) !important;
}
/* ② 移除與排名重複的 compact-rank-strip(省決策區高度 + 去冗餘,排名已在下方 strip)*/
.app--commercial-mobile[class*="app--round-"] .compact-rank-strip { display: none !important; }
/* ③ 決策面板實心化:避免後方 leaderboard 透過玻璃透出造成「重疊」觀感 */
.app--commercial-mobile[class*="app--round-"] .decision-panel {
  background: linear-gradient(180deg, oklch(20% 0.025 255 / 0.96), oklch(13% 0.022 255 / 0.98)) !important;
}

/* ════════ RESTORE 翻牌大動畫 (2026-05-24 pm): 最新卡 cardReveal 揭幕被 idle float / last-child animation:none 蓋掉 → 還原 ════════ */
.app--commercial-mobile[class*="app--round-"] .path .card.card--latest {
  animation: cardReveal 0.46s cubic-bezier(0.2, 0.9, 0.25, 1) both !important;
  transform: perspective(900px) rotateX(2deg) scale(1.06) rotateZ(-1.1deg) !important;
}

/* ════════ FIX overlay 回歸 (2026-05-24 pm): 沉浸 >*{position:relative;z-index:1} 把全螢幕 fixed overlay de-fix 成 relative z1 → 蓋不住畫面(翻牌揭幕/auto-reveal/CDS/結算/教學/設定)。還原 position:fixed + z-index ════════ */
/* 註:未來新增全螢幕 overlay 也要加進這份清單,否則會被 >* 壓掉 */
.app--commercial-mobile[class*="app--round-"] > .reveal-anticipation,
.app--commercial-mobile[class*="app--round-"] > .auto-reveal-overlay,
.app--commercial-mobile[class*="app--round-"] > .cds-overlay,
.app--commercial-mobile[class*="app--round-"] > .gameover-overlay,
.app--commercial-mobile[class*="app--round-"] > .guided-tutorial-overlay,
.app--commercial-mobile[class*="app--round-"] > .setup-backdrop,
.app--commercial-mobile[class*="app--round-"] > .setup-panel,
.app--commercial-mobile[class*="app--round-"] > .heckle-bar { position: fixed !important; }
.app--commercial-mobile[class*="app--round-"] > .reveal-anticipation { z-index: 180 !important; }
.app--commercial-mobile[class*="app--round-"] > .auto-reveal-overlay { z-index: 178 !important; }
.app--commercial-mobile[class*="app--round-"] > .cds-overlay { z-index: 182 !important; }
.app--commercial-mobile[class*="app--round-"] > .gameover-overlay { z-index: 190 !important; }
.app--commercial-mobile[class*="app--round-"] > .guided-tutorial-overlay { z-index: 186 !important; }
.app--commercial-mobile[class*="app--round-"] > .setup-backdrop { z-index: 194 !important; }
.app--commercial-mobile[class*="app--round-"] > .setup-panel { z-index: 195 !important; }

/* ════════ 蓋牌樣式:用設計好的 cardback.webp(取代通用斜紋 + 「?」佔位)════════ */
/* 大螢幕翻牌揭幕 overlay 的蓋牌背面 */
.app--commercial-mobile[class*="app--round-"] .reveal-anticipation__face--back {
  background:
    radial-gradient(circle at 50% 26%, oklch(99% 0.04 92 / 0.18), transparent 52%),
    url('./assets/art/cardback.webp') center / cover no-repeat !important;
}
.app--commercial-mobile[class*="app--round-"] .reveal-anticipation__face--back span,
.app--commercial-mobile[class*="app--round-"] .reveal-anticipation__face--back strong { display: none !important; }
/* overlay 卡片本體底紋也換掉(原斜紋),露出 cardback */
.app--commercial-mobile[class*="app--round-"] .reveal-anticipation__card {
  background:
    url('./assets/art/cardback.webp') center / cover no-repeat !important;
}
/* 檯面 face-down 卡(card--back)也用同一張蓋牌 */
.app--commercial-mobile[class*="app--round-"] .card--back {
  background:
    linear-gradient(180deg, oklch(22% 0.02 250 / 0.18), oklch(12% 0.02 250 / 0.42)),
    url('./assets/art/cardback.webp') center / cover no-repeat !important;
}
.app--commercial-mobile[class*="app--round-"] .card--back .card-back__center span { opacity: 0.55; font-size: 11px; }

/* ════════ FIX turn-callout 重疊 (2026-05-24 pm): 非 handoff 的頭像是 position:absolute 左上角,kicker/name 文字沒避開 → 被頭像壓住(只露出半個字)。改 grid-areas 橫向:頭像左欄、文字右欄,頭像改 in-flow ════════ */
.app--commercial-mobile[class*="app--round-"] .turn-callout:not(.turn-callout--handoff) {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "avatar kicker" "avatar name" "avatar small" !important;
  justify-items: start !important;
  align-items: center;
  gap: 1px 12px !important;
  text-align: left !important;
}
.app--commercial-mobile[class*="app--round-"] .turn-callout:not(.turn-callout--handoff) .turn-callout__avatar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-area: avatar !important;
  width: 46px !important;
  height: 46px !important;
  align-self: center;
}
.app--commercial-mobile[class*="app--round-"] .turn-callout:not(.turn-callout--handoff) .turn-callout__kicker { grid-area: kicker !important; }
.app--commercial-mobile[class*="app--round-"] .turn-callout:not(.turn-callout--handoff) > strong { grid-area: name !important; }
.app--commercial-mobile[class*="app--round-"] .turn-callout:not(.turn-callout--handoff) > small { grid-area: small !important; }

/* ════════ turn-row (2026-05-24 pm): turn-callout 右側原本整片空 → 把身上/套現/風險數據移到同一行右側,省掉獨立那排高度 ════════ */
.app--commercial-mobile[class*="app--round-"] .turn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app--commercial-mobile[class*="app--round-"] .turn-row > .turn-callout {
  flex: 0 0 auto;
  grid-template-columns: auto auto !important;
}
.app--commercial-mobile[class*="app--round-"] .turn-row > .decision-quick-strip {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
}
/* 右側數據在窄欄裡縮一點字,避免擠 */
.app--commercial-mobile[class*="app--round-"] .turn-row > .decision-quick-strip .dqs--cash strong { font-size: 21px; }
.app--commercial-mobile[class*="app--round-"] .turn-row > .decision-quick-strip .dqs b { font-size: 10px; }

/* ════════ Typography premium pass (2026-05-24 pm): 階級 + 數字 jackpot + 發光紀律 ════════ */
/* ── 主 CTA(加碼/套現/開始遊戲)= 最厚最大 + 實體按鈕 emboss(crisp bevel/rim,非模糊 glow)── */
.app--commercial-mobile[class*="app--round-"] .choice-button > strong,
.app--commercial-mobile[class*="app--round-"] .primary-button {
  font-family: var(--font-title) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: 0.01em;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > strong {
  text-shadow: 0 1px 0 rgba(2,40,22,0.72), 0 2px 1px rgba(0,28,14,0.4) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > strong,
.app--commercial-mobile[class*="app--round-"] .primary-button {
  text-shadow: 0 1px 0 rgba(255,243,205,0.78), 0 -1px 0 rgba(120,80,20,0.22) !important;
}
/* ── 次標題(再翻一張/保底 37)= 細、小、淡,不搶 CTA ── */
.app--commercial-mobile[class*="app--round-"] .choice-button > span {
  font-weight: 500 !important;
  font-size: 11px !important;
  opacity: 0.82;
  text-shadow: none !important;
}
/* ── 資訊型(輪到/盤勢/標籤)= 細、字距、低 glow,Bloomberg 感 ── */
.app--commercial-mobile[class*="app--round-"] .turn-callout__kicker,
.app--commercial-mobile[class*="app--round-"] .run-stage__status span,
.app--commercial-mobile[class*="app--round-"] .dqs b,
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail__head span {
  font-weight: 500 !important;
  letter-spacing: 0.05em;
  opacity: 0.78;
  text-shadow: none !important;
}
/* ── 數字(身上/套現/風險/分數/現金)= Space Grotesk tabular + 字距 + 高對比 ── */
.app--commercial-mobile[class*="app--round-"] .dqs strong,
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__score,
.app--commercial-mobile[class*="app--round-"] .card__value,
.app--commercial-mobile[class*="app--round-"] .card__cash-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em;
  font-variant-numeric: tabular-nums;
}
.app--commercial-mobile[class*="app--round-"] .dqs--cash strong {
  text-shadow: 0 0 12px rgba(212,168,78,0.42), 0 1px 0 rgba(0,0,0,0.45) !important;
}
/* ── 玩家名:乾淨可讀(非 glow)── */
.app--commercial-mobile[class*="app--round-"] .turn-callout > strong {
  font-family: var(--font-title) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__name {
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45) !important;
}

/* 規則 icon = 金色法典 + tiny glow(秘密手冊感,非普通文件)*/
.app--commercial-mobile[class*="app--round-"] .ghost-button--rules .svg-icon {
  filter: drop-shadow(0 0 4px rgba(212,168,78,0.55));
}

/* ════════ #5 Icon glossy/3D (2026-05-24 pm): topbar icon 按鈕做成 casino chip / finance badge(非扁平 web icon)════════ */
.app--commercial-mobile[class*="app--round-"] .topbar .icon-button,
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button {
  background:
    linear-gradient(180deg, oklch(42% 0.03 255 / 0.65) 0%, oklch(42% 0.03 255 / 0) 50%),
    linear-gradient(180deg, oklch(29% 0.03 255), oklch(17% 0.025 255)) !important;
  border: 1px solid oklch(72% 0.1 86 / 0.38) !important;
  border-radius: 13px !important;
  box-shadow:
    inset 0 1px 0 oklch(96% 0.05 90 / 0.28),
    inset 0 -3px 4px oklch(8% 0.02 250 / 0.5),
    0 3px 0 oklch(10% 0.02 250 / 0.6),
    0 5px 10px oklch(4% 0.02 250 / 0.45) !important;
  transition: transform .08s ease, box-shadow .08s ease;
}
.app--commercial-mobile[class*="app--round-"] .topbar .icon-button:active,
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px oklch(8% 0.02 250 / 0.6) !important;
}
/* icon 字符加微立體 */
.app--commercial-mobile[class*="app--round-"] .topbar .svg-icon {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
/* 規則法典金邊更顯(finance badge)*/
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button--rules {
  color: oklch(88% 0.15 84) !important;
  background:
    radial-gradient(circle at 50% 18%, oklch(92% 0.13 86 / 0.26), transparent 38%),
    radial-gradient(circle at 58% 86%, oklch(52% 0.18 42 / 0.20), transparent 40%),
    linear-gradient(180deg, oklch(30% 0.055 250), oklch(13% 0.04 250) 68%, oklch(17% 0.07 66)) !important;
  border-color: oklch(84% 0.14 86 / 0.74) !important;
  box-shadow:
    inset 0 1px 0 oklch(98% 0.08 90 / 0.42),
    inset 0 -3px 4px oklch(20% 0.06 60 / 0.4),
    0 3px 0 oklch(28% 0.07 62 / 0.72),
    0 5px 12px oklch(5% 0.02 250 / 0.46),
    0 0 13px oklch(74% 0.13 86 / 0.34) !important;
}
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button--rules .svg-icon {
  width: 20px;
  height: 20px;
  color: oklch(88% 0.15 84) !important;
  filter:
    drop-shadow(0 1px 0 oklch(98% 0.04 92 / 0.32))
    drop-shadow(0 0 5px oklch(82% 0.14 84 / 0.42)) !important;
}
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button--rules .rule-codex-icon__cover {
  fill-opacity: 0.22;
  stroke-width: 1.8;
}
.app--commercial-mobile[class*="app--round-"] .topbar .ghost-button--rules .rule-codex-icon__seal {
  fill: oklch(92% 0.17 88);
}
/* 自動揭曉格、底部 HUD 等 in-game 小 icon 也加 glossy 深度 */
.app--commercial-mobile[class*="app--round-"] .decision-pressure__signal {
  background:
    linear-gradient(180deg, oklch(100% 0.04 95 / 0.3), transparent 50%),
    linear-gradient(180deg, oklch(34% 0.06 28 / 0.6), oklch(20% 0.05 24 / 0.7)) !important;
  box-shadow: inset 0 1px 0 oklch(95% 0.05 90 / 0.3), 0 2px 5px oklch(4% 0.02 250 / 0.5) !important;
}

/* ════════ Typography 可讀性修正 (2026-05-24 pm): 過度美術化 → 乾淨(Marvel Snap/Clash Royale 其實字很乾淨)。暖白/減glow70%/去厚shadow/中文≤700/去bevel/header flat ════════ */
/* #4#5 CTA:中文 ≤700、去厚 emboss/bevel、暖白、僅極淡 1px 提可讀 */
.app--commercial-mobile[class*="app--round-"] .choice-button > strong,
.app--commercial-mobile[class*="app--round-"] .primary-button { font-weight: 700 !important; }
.app--commercial-mobile[class*="app--round-"] .choice-button--stay > strong {
  color: #f3e8d0 !important; text-shadow: 0 1px 1px rgba(0,28,14,0.3) !important;
}
.app--commercial-mobile[class*="app--round-"] .choice-button--leave > strong,
.app--commercial-mobile[class*="app--round-"] .primary-button {
  color: #3a2a12 !important; text-shadow: none !important;
}
/* turn-callout 名:中文 700、暖白、去厚 shadow */
.app--commercial-mobile[class*="app--round-"] .turn-callout > strong {
  font-weight: 700 !important; color: #f3e8d0 !important; text-shadow: 0 1px 1px rgba(0,0,0,0.32) !important;
}
/* #2 數字減 glow ~70%(暖金,不刺眼) */
.app--commercial-mobile[class*="app--round-"] .dqs--cash strong {
  color: #f0dca0 !important; text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__score { text-shadow: none !important; }
/* #1 純白淺字 → 暖白;#3 chrome 可讀陰影減薄(0.5→0.32) */
.app--commercial-mobile[class*="app--round-"] .leaderboard-rail :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .player-table :not(.card):not(.card *):not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .decision-panel :not(.card):not(.card *):not(.svg-icon):not(.primary-button):not(.choice-button):not(.choice-button *),
.app--commercial-mobile[class*="app--round-"] .player-status-list :not(.svg-icon),
.app--commercial-mobile[class*="app--round-"] .run-stage :not(.svg-icon) {
  text-shadow: 0 1px 1px rgba(0,0,0,0.32) !important;
}
.app--commercial-mobile[class*="app--round-"] .leaderboard-row__name,
.app--commercial-mobile[class*="app--round-"] .turn-callout__kicker,
.app--commercial-mobile[class*="app--round-"] .player-status-list__name { color: #f3e8d0 !important; }
/* market mood 文字 glow 減量(保色相、降強度) */
.app--commercial-mobile[class*="app--round-"] .run-stage--calm .run-stage__status strong { text-shadow: 0 0 4px #30e38a55 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--warm .run-stage__status strong { text-shadow: 0 0 4px #f6c54a55 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--hot .run-stage__status strong { text-shadow: 0 0 5px #d61f3e88 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--critical .run-stage__status strong { text-shadow: 0 0 5px #7a4dff88 !important; }
/* Topbar brand image: use the same transparent Rich by Dawn wordmark, scaled
   down to replace the old app icon + RBD abbreviation without crowding action
   buttons on 375px-class phones. */
.app--commercial-mobile[class*="app--round-"] .brand--wordmark,
.app--commercial-mobile .brand--wordmark {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.app--commercial-mobile[class*="app--round-"] .topbar-brand-wordmark,
.app--commercial-mobile .topbar-brand-wordmark {
  width: clamp(116px, 36vw, 154px);
}
.app--commercial-mobile[class*="app--round-"] .topbar-brand-wordmark img,
.app--commercial-mobile .topbar-brand-wordmark img {
  filter:
    drop-shadow(0 4px 8px oklch(3% 0.02 250 / 0.64))
    drop-shadow(0 0 7px oklch(82% 0.14 82 / 0.20));
}
@media (max-width: 380px) {
  .app--commercial-mobile[class*="app--round-"] .topbar-brand-wordmark,
  .app--commercial-mobile .topbar-brand-wordmark {
    width: clamp(108px, 34vw, 132px);
  }
}

/* ============================================================
   Cinematic home menu (v249) — full-bleed mockup plate +
   scrim + real interactive topbar / CTA / 4 mode cards.
   Replaces the cream modal welcome on first-run.
   ============================================================ */
.setup-backdrop--welcome.home-cinematic,
.app--commercial-mobile .setup-backdrop--welcome.home-cinematic {
  display: block !important;
  padding: 0 !important;
  z-index: 70;
  background: #0a0c14 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* v2 (GPT-Image-2 ref): scrollable premium lobby — content taller than the
     viewport scrolls over a viewport-fixed cinematic backdrop. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.home-cine__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a0c14 url('./assets/art/home-hero.webp') center top / cover no-repeat;
  animation: homeBgDrift 26s ease-in-out infinite alternate;
}
@keyframes homeBgDrift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.09) translateY(-1.4%); }
}
.home-cine__scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8,10,18,0.98) 0%,
      rgba(8,10,18,0.96) 10%,
      rgba(8,10,18,0.00) 18%,
      rgba(8,10,18,0.00) 40%,
      rgba(10,14,26,0.50) 47%,
      rgba(8,11,20,0.97) 55%,
      rgba(6,8,15,1) 64%,
      rgba(6,8,15,1) 100%),
    radial-gradient(120% 55% at 50% 30%, rgba(246,197,74,0.10), transparent 60%);
}

.home-cinematic .setup-panel--welcome.home-menu {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
.home-cinematic .setup-panel--welcome.home-menu::before { display: none !important; }
.home-cinematic .setup-panel--welcome.home-menu > * { position: relative; z-index: 1; }

/* Topbar */
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 11px) calc(env(safe-area-inset-right) + 14px) 14px calc(env(safe-area-inset-left) + 14px);
  background: linear-gradient(180deg, rgba(7,9,16,0.78) 0%, rgba(7,9,16,0.35) 62%, rgba(7,9,16,0) 100%);
}
.home-topbar__id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.home-topbar__avatar {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #11203a;
  border: 1.5px solid rgba(212,168,78,0.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.55);
}
.home-topbar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-topbar__name {
  font-family: var(--font-display, 'Space Grotesk','Noto Sans TC',sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #f3e8d0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* P3-2: 12px gap so adjacent 34px chips' 44px hit-areas don't steal each other's overlap. */
.home-topbar__tools { display: flex; gap: 12px; flex: 0 0 auto; }
.home-icon-chip {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; font-size: 0.78rem;
  color: #f3e8d0;
  background: linear-gradient(180deg, rgba(38,50,76,0.92), rgba(17,25,43,0.94));
  border: 1px solid rgba(212,168,78,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 2px 7px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.home-icon-chip .svg-icon { width: 18px; height: 18px; }
.home-icon-chip .svg-icon svg { stroke: #f3e8d0; }
.home-icon-chip:active { transform: translateY(1px); }
/* P3-2: 44px tap target for the 34px topbar chip — invisible hit-area, visual unchanged.
   -6px → 46px box so the effective tap clears 44px after subpixel rounding. */
.home-icon-chip::after { content: ""; position: absolute; inset: -6px; }

/* Reference-matched Rich by Dawn title mark. This uses the provided bitmap
   wordmark so role-entry and results match the reference instead of a CSS
   approximation. Home intentionally does not use this component. */
.rbd-wordmark {
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  margin: 0 auto;
  pointer-events: none;
}
.rbd-wordmark__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 18px oklch(3% 0.02 250 / 0.78))
    drop-shadow(0 0 14px oklch(82% 0.14 82 / 0.28));
}
.rbd-wordmark--role-entry {
  width: min(92%, 340px);
  margin: 6px auto 4px;
}
.rbd-wordmark--result {
  width: min(100%, 320px);
  margin: -10px auto -2px;
}
@media (max-width: 380px) {
  .rbd-wordmark--role-entry { width: min(92%, 316px); }
  .rbd-wordmark--result { width: min(100%, 292px); }
}
@media (min-width: 760px) {
  .rbd-wordmark--role-entry { width: 370px; }
  .rbd-wordmark--result { width: 350px; }
}

/* Hero spacer — reserves room so the (viewport-fixed) cinematic logo/scene shows
   above the CTA; the lobby scrolls under it. */
.home-stage { flex: none; min-height: clamp(296px, 43vh, 372px); }

/* Bottom interactive panel */
.home-menu__panel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 4px 16px calc(env(safe-area-inset-bottom) + 16px);
}

/* Big gold CTA — CSS beveled plaque (GPT-Image-2 v2 ref): metallic gold frame,
   cut-corner / arrow ends, dark center, inner+outer stroke, soft glow. */
.home-cta {
  position: relative;
  width: min(100%, 300px);
  margin: 4px auto 0;
  padding: 15px 40px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  background: linear-gradient(180deg, #fff1c6 0%, #f6c84e 42%, #c98a23 100%);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(246,197,74,0.4));
  transition: transform 0.1s ease;
  animation: homeCtaGlow 3.4s ease-in-out infinite;
}
@keyframes homeCtaGlow {
  0%, 100% { filter: drop-shadow(0 5px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 13px rgba(246,197,74,0.3)); }
  50%      { filter: drop-shadow(0 5px 10px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(246,197,74,0.58)); }
}
/* dark beveled center inside the gold frame */
.home-cta::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  background: linear-gradient(180deg, #2c1e09 0%, #130d05 58%, #281b04 100%);
  box-shadow: inset 0 1px 0 rgba(255,236,176,0.55), inset 0 0 0 1px rgba(246,197,74,0.38), inset 0 -4px 8px rgba(0,0,0,0.5);
}
.home-cta__shine {
  position: absolute;
  top: 0; left: -60%;
  width: 42%; height: 100%;
  z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  animation: homeCtaSheen 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes homeCtaSheen {
  0%, 60% { left: -60%; }
  80%, 100% { left: 130%; }
}
.home-cta__label {
  position: relative;
  z-index: 2;
  font-family: var(--font-display, sans-serif);
  font-weight: 900; font-size: 1.5rem; letter-spacing: 0.12em;
  color: #ffe9b4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 14px rgba(246,197,74,0.55);
}
.home-cta:active { transform: translateY(3px); animation: none; }
@media (prefers-reduced-motion: reduce) { .home-cta { animation: none; } }

/* Mode-section title — gold caps flanked by hairlines (GPT-Image-2 v2 ref) */
.home-section-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 10px 4px 2px;
}
.home-section-title::before, .home-section-title::after {
  content: ""; height: 1px; flex: 0 1 46px;
}
.home-section-title::before { background: linear-gradient(90deg, transparent, rgba(243,196,90,0.7)); }
.home-section-title::after  { background: linear-gradient(90deg, rgba(243,196,90,0.7), transparent); }
.home-section-title span {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.2em;
  color: #f3c45a;
  text-shadow: 0 0 10px rgba(246,197,74,0.4);
  white-space: nowrap;
}

/* Portrait game-mode cards — all four on a single row (mobile + desktop), proportionally
   shrunk to 2:3. No carousel, no 2x2 (user feedback: one row, don't scroll). */
.home-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px 0 2px;
  /* all four portrait cards on one row, proportionally shrunk (user request).
     Single short row → control cluster sits low, clear of the hero wordmark. */
}
/* Premium mode buttons: generated art as the base layer, app text + CTA overlaid
   on top via HTML/CSS (image carries no baked-in copy). */
.home-mode {
  position: relative;
  aspect-ratio: 3 / 5;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  padding: 7px 6px 8px;
  text-align: left;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(165deg, rgba(28,38,62,0.94), rgba(12,18,32,0.97));
  /* rgb(var / a) instead of color-mix(oklch): same per-card accent, but works on
     Safari <=16.1 too (color-mix(oklch) is dropped there → would lose the border). */
  border: 1px solid rgb(var(--mode-accent-rgb, 69 215 255) / 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,225,160,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px rgb(var(--mode-accent-rgb, 69 215 255) / 0.12),
    0 6px 18px -6px rgb(var(--mode-accent-rgb, 69 215 255) / 0.30),
    0 6px 16px rgba(0,0,0,0.5);
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* image art layer */
.home-mode__art {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-mode__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* dark gradient bottom + accent tint → keeps the overlaid title/CTA legible while
   leaving the upper portrait art visible */
.home-mode__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,20,0) 0%, rgba(6,10,20,0.06) 42%, rgba(6,10,20,0.58) 70%, rgba(4,7,14,0.93) 100%),
    radial-gradient(120% 58% at 50% 118%, rgb(var(--mode-accent-rgb, 69 215 255) / 0.34), transparent 60%);
}
.home-mode__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
  margin-top: auto;
}
.home-mode:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,225,160,0.18), 0 2px 8px rgba(0,0,0,0.55); }
@media (hover: hover) {
  .home-mode:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--mode-accent-rgb, 69 215 255) / 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255,225,160,0.30),
      0 0 0 1px rgb(var(--mode-accent-rgb, 69 215 255) / 0.28),
      0 12px 26px -8px rgb(var(--mode-accent-rgb, 69 215 255) / 0.55),
      0 10px 22px rgba(0,0,0,0.55);
  }
}
.home-mode__title {
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0; line-height: 1.1;
  color: #fff6e6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgb(var(--mode-accent-rgb, 69 215 255) / 0.32);
  /* small 4-in-row cards: never let a longer title wrap and shove the CTA off-card */
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-mode__sub {
  font-size: 0.44rem; line-height: 1.15; font-weight: 600;
  color: rgba(247,240,224,0.72);
  text-shadow: 0 1px 2px rgba(0,0,0,0.78);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-mode__cta {
  position: relative; z-index: 2;
  margin-top: 4px;
  align-self: flex-start;
  display: inline-flex; align-items: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 0.46rem; letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(rgb(var(--mode-accent-rgb, 69 215 255) / 0.30), rgb(var(--mode-accent-rgb, 69 215 255) / 0.30)), rgba(6,10,18,0.78);
  border: 1px solid rgb(var(--mode-accent-rgb, 69 215 255) / 0.72);
  box-shadow: 0 0 12px -3px rgb(var(--mode-accent-rgb, 69 215 255) / 0.70), inset 0 1px 0 rgba(255,255,255,0.18);
}
.home-mode--online { --mode-accent: #45d7ff; --mode-accent-rgb: 69 215 255; }
.home-mode--role   { --mode-accent: #b478ff; --mode-accent-rgb: 180 120 255; }
.home-mode--learn  { --mode-accent: #ff8a3d; --mode-accent-rgb: 255 138 61; }
/* recommended entry (快速遊戲) reads a touch brighter to hint the default path */
.home-mode--quick {
  --mode-accent: #30e38a; --mode-accent-rgb: 48 227 138;
  border-color: rgb(48 227 138 / 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,236,184,0.30),
    0 0 0 1px rgb(48 227 138 / 0.22),
    0 9px 26px -8px rgb(48 227 138 / 0.52),
    0 8px 18px rgba(0,0,0,0.5);
}
.home-mode--quick .home-mode__art img { filter: saturate(1.06) brightness(1.05); }
/* tutorial art is a darker orange scene — lift it so it reads as vividly as the others */
.home-mode--learn .home-mode__art img { filter: saturate(1.12) brightness(1.24); }
/* and ease the scrim on the learn card so the lifted art shows through */
.home-mode--learn .home-mode__scrim {
  background:
    linear-gradient(180deg, rgba(6,10,20,0) 0%, rgba(6,10,20,0.04) 44%, rgba(6,10,20,0.5) 72%, rgba(4,7,14,0.9) 100%),
    radial-gradient(120% 58% at 50% 118%, rgb(var(--mode-accent-rgb, 255 138 61) / 0.34), transparent 60%);
}

/* Desktop: the 4-in-row cards are a bit wider, so bump the overlaid text a touch */
@media (min-width: 760px) {
  .home-mode__title { font-size: 0.9rem; }
  .home-mode__sub { font-size: 0.58rem; }
  .home-mode__cta { font-size: 0.56rem; }
}
/* v286: mid-height phones (≈700–900px, e.g. 360×800 / 390×844) — trim the hero
   spacer so the Daily panel fits in-viewport without needing to scroll. Taller
   screens (≥901px, e.g. 430×932) keep the full cinematic spacer. */
@media (max-height: 900px) {
  .home-stage { min-height: clamp(280px, 36vh, 330px); }
}
/* short viewports: collapse the art spacer so the single card row + plaque + Daily fit */
@media (max-height: 680px) {
  .home-stage { min-height: 0; }
  .home-cta { width: min(100%, 250px); }
}

.home-daily {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 11px 10px;
  border-radius: 10px;
  color: #f3e8d0;
  background: linear-gradient(180deg, rgba(22,30,50,0.96), rgba(11,16,28,0.98));
  /* neon-gold edge + glow to match the premium mode cards */
  border: 1px solid rgba(243,196,90,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.16),
    0 0 0 1px rgba(243,196,90,0.10),
    0 6px 18px -8px rgba(243,196,90,0.28),
    0 5px 16px rgba(0,0,0,0.42);
}
/* all daily challenges cleared → celebratory gold glow */
.home-daily--complete {
  border-color: rgba(246,197,74,0.78);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.24),
    0 0 0 1px rgba(246,197,74,0.22),
    0 0 22px -4px rgba(246,197,74,0.5),
    0 6px 18px rgba(0,0,0,0.45);
}
.home-daily__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.home-daily__title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-daily__count {
  flex: 0 0 auto;
  font-family: var(--font-display, sans-serif);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffe9b4;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(243,196,90,0.14);
  border: 1px solid rgba(243,196,90,0.42);
  white-space: nowrap;
}
.home-daily--complete .home-daily__count {
  color: #3a2407;
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 60%, #d99a2c);
  border-color: rgba(246,224,162,0.7);
}
/* progress bar (real X/N done) */
.home-daily__bar {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(243,196,90,0.12);
}
.home-daily__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f3c45a, #ffe6a3);
  box-shadow: 0 0 8px rgba(246,197,74,0.6);
  transition: width 0.4s ease;
}
.home-daily__header strong {
  font-family: var(--font-display, sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  color: #f3c45a;
}
.home-daily__header small {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(243,232,208,0.68);
  white-space: nowrap;
}
.home-daily__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* mission-panel rows: badge · task · status chip */
.home-daily__header .home-daily__reset {
  flex: 0 0 auto;
  font-size: 0.6rem; font-weight: 700;
  color: rgba(243,232,208,0.55);
  white-space: nowrap;
}
/* P2-2: streak reads as a reward, not a passive reset timestamp. */
.home-daily__header .home-daily__reset--streak {
  color: rgba(245,200,120,0.92);
  font-weight: 800;
}
.home-daily__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  font-size: 0.68rem;
  line-height: 1.2;
  color: rgba(243,232,208,0.74);
}
.home-daily__row.is-done { color: rgba(255,243,214,0.96); background: rgba(243,196,90,0.07); }
.home-daily__badge {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  font-size: 0.62rem; font-weight: 900;
  color: #d4a84e;
  background: linear-gradient(180deg, rgba(243,196,90,0.16), rgba(243,196,90,0.06));
  border: 1px solid rgba(212,168,78,0.3);
}
.home-daily__row.is-done .home-daily__badge {
  color: #1a1206;
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 60%, #d99a2c);
  border-color: rgba(246,224,162,0.7);
}
.home-daily__task {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700;
}
.home-daily__status {
  flex: 0 0 auto;
  font-family: var(--font-display, sans-serif);
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em;
  color: rgba(243,232,208,0.55);
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}
.home-daily__row.is-done .home-daily__status {
  color: #1a1206;
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 60%, #d99a2c);
  border-color: rgba(246,224,162,0.7);
}

@media (prefers-reduced-motion: reduce) {
  .home-cine__bg { animation: none; }
  .home-cta { animation: none; }
  .home-cta__shine { animation: none; display: none; }
}

/* ============================================================
   Unified dark-cinematic theme (v250) — retire the cream/candy
   setup+tutorial chrome; match the v249 home (navy + champagne
   gold + glossy panels + warm-white premium type). Scoped to
   setup/tutorial surfaces only; in-game board + home untouched.
   ============================================================ */

/* Backdrops (all setup sub-screens except the home plate) */
.app--commercial-mobile .setup-backdrop:not(.home-cinematic),
.setup-backdrop:not(.home-cinematic) {
  background:
    radial-gradient(120% 70% at 50% 10%, rgba(246,197,74,0.10), transparent 55%),
    linear-gradient(180deg, #0c1322 0%, #080b14 62%, #05070e 100%) !important;
}
.basic-ftue__backdrop {
  background: rgba(6,8,16,0.84) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Panels — navy glossy */
.app--commercial-mobile .setup-panel:not(.home-menu),
.setup-panel:not(.home-menu),
.ftue-modal__panel,
.basic-ftue__card {
  background: linear-gradient(180deg, rgba(28,38,60,0.98), rgba(12,18,32,0.99)) !important;
  border: 1px solid rgba(212,168,78,0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 22px 50px rgba(0,0,0,0.62),
    0 0 36px rgba(246,197,74,0.10) !important;
  color: #f3e8d0 !important;
}

/* Headings + body text → warm white / champagne */
.setup-backdrop:not(.home-cinematic) .section-title h2,
.setup-backdrop:not(.home-cinematic) .section-title h3,
.setup-backdrop:not(.home-cinematic) .setup-step-title,
.setup-backdrop:not(.home-cinematic) .setup-step-card h3,
.ftue-modal__title,
.basic-ftue__title {
  color: #f3e8d0 !important;
  font-family: var(--font-display, 'Space Grotesk','Noto Sans TC',sans-serif);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
}
.setup-backdrop:not(.home-cinematic) .section-title small,
.setup-backdrop:not(.home-cinematic) .setup-step-card p,
.setup-backdrop:not(.home-cinematic) .setup-copy,
.setup-backdrop:not(.home-cinematic) .line-copy,
.ftue-modal__body,
.ftue-trial__header p,
.basic-ftue__body {
  color: rgba(243,232,208,0.66) !important;
}
.ftue-modal__body strong,
.basic-ftue__body strong,
.setup-backdrop:not(.home-cinematic) .setup-step-card strong {
  color: #f3c45a !important;
}
/* Trial header title: near-white + clear drop shadow so it reads crisply on navy */
.ftue-trial__header h2 {
  color: #fdfaf2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.62), 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Mode / tutorial cards → dark glossy + per-mode accent */
.app--commercial-mobile .play-mode-card,
.play-mode-card {
  background: linear-gradient(165deg, rgba(30,40,64,0.96), rgba(13,19,33,0.98)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 6px 18px rgba(0,0,0,0.5) !important;
}
.play-mode-card:hover, .play-mode-card:focus-visible {
  border-color: var(--mode-accent, #d4a84e) !important;
}
.play-mode-card strong { color: #f3e8d0 !important; }
.play-mode-card__copy, .play-mode-card__copy .line-copy { color: rgba(243,232,208,0.64) !important; }
.play-mode-card__icon {
  background: linear-gradient(180deg, rgba(42,54,82,0.96), rgba(18,26,44,0.96)) !important;
  color: var(--mode-accent, #d4a84e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 7px rgba(0,0,0,0.5) !important;
}
.play-mode-card__icon .svg-icon svg { stroke: var(--mode-accent, #d4a84e); }
.play-mode-card--local, .play-mode-card--standard, .play-mode-card--tutorial-basic { --mode-accent:#30e38a; --mode-accent-rgb:48 227 138; border-color: rgba(48,227,138,0.26) !important; }
.play-mode-card--online, .play-mode-card--matchmaking, .play-mode-card--host { --mode-accent:#45d7ff; --mode-accent-rgb:69 215 255; border-color: rgba(69,215,255,0.26) !important; }
.play-mode-card--async, .play-mode-card--tutorial-advanced { --mode-accent:#f3c45a; --mode-accent-rgb:243 196 90; border-color: rgba(243,196,90,0.28) !important; }
.play-mode-card--tutorial-roles { --mode-accent:#9a7bff; --mode-accent-rgb:154 123 255; border-color: rgba(122,77,255,0.30) !important; }
.play-mode-card--tutorial-cds, .play-mode-card--tutorial-variants { --mode-accent:#d61f3e; border-color: rgba(214,31,62,0.30) !important; }

/* Premium image layer for the start-picker cards — reuses the home mode-card art
   behind the existing text. Scoped to .play-mode-card--art so the tutorial / setup
   pickers keep their flat treatment. Text, data-action, routing unchanged. */
.play-mode-card--art { position: relative; overflow: hidden; isolation: isolate; }
.play-mode-card--art > .play-mode-card__art,
.play-mode-card--art > .play-mode-card__scrim { position: absolute; inset: 0; pointer-events: none; }
.play-mode-card--art > .play-mode-card__art { z-index: 0; }
.play-mode-card__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.play-mode-card--art > .play-mode-card__scrim {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,10,20,0.28) 0%, rgba(6,10,20,0.60) 50%, rgba(4,7,14,0.90) 100%),
    radial-gradient(130% 80% at 50% 122%, rgb(var(--mode-accent-rgb, 69 215 255) / 0.26), transparent 64%);
}
/* lift existing content above art+scrim; don't touch the absolute badge/tag position */
.play-mode-card--art > .play-mode-card__icon,
.play-mode-card--art > strong,
.play-mode-card--art > .play-mode-card__copy { position: relative; z-index: 2; }
.play-mode-card--art > .play-mode-card__badge,
.play-mode-card--art > .play-mode-card__tag { z-index: 2; }
/* premium neon/gold edge + text legibility over the art */
.app--commercial-mobile .play-mode-card--art,
.play-mode-card--art {
  border: 1px solid rgb(var(--mode-accent-rgb, 69 215 255) / 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,160,0.20),
    0 0 0 1px rgb(var(--mode-accent-rgb, 69 215 255) / 0.12),
    0 8px 22px -8px rgb(var(--mode-accent-rgb, 69 215 255) / 0.32),
    0 8px 20px rgba(0,0,0,0.5) !important;
}
.play-mode-card--art strong { text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 14px rgb(var(--mode-accent-rgb, 69 215 255) / 0.30); }
.play-mode-card--art .play-mode-card__copy,
.play-mode-card--art .play-mode-card__copy .line-copy { color: rgba(247,240,224,0.88) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.82); }

/* Batch B: recommended quick-play hero (full-width, gold ring + 推薦 badge) and
   the advanced (role mode) marker — so the picker reads as a guided path. */
.play-mode-card--recommend {
  grid-column: 1 / -1;
  position: relative;
  --mode-accent: #30e38a;
  --mode-accent-rgb: 48 227 138;
  min-height: 0 !important;
  border-color: rgba(243,196,90,0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.5),
    0 0 26px rgba(243,196,90,0.16) !important;
}
.play-mode-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 55%, #d99a2c);
  color: #3a2407;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.play-mode-card--advanced { position: relative; }
.play-mode-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(154,123,255,0.18);
  border: 1px solid rgba(154,123,255,0.45);
  color: #c9b8ff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* P1-1: start-picker portrait cards — visual parity with the home portrait cards.
   Scoped to .play-mode-grid--portrait so the tutorial / online-setup pickers stay flat.
   Text / data-action / routing unchanged; only layout + the decorative icon is hidden. */
.play-mode-grid--portrait {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.play-mode-grid--portrait .play-mode-card {
  aspect-ratio: 2 / 3;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 12px 11px 13px;
  border-radius: 16px;
}
.play-mode-grid--portrait .play-mode-card__icon { display: none; }
.play-mode-grid--portrait .play-mode-card strong { font-size: 1.04rem; line-height: 1.12; }
.play-mode-grid--portrait .play-mode-card__copy { font-size: 11.5px; line-height: 1.3; }
/* recommended quick-play stays a full-width landscape hero (emphasis), not portrait */
.play-mode-grid--portrait .play-mode-card--recommend {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 118px !important;
}
/* desktop: hero full-width on top + four portrait cards in one row */
@media (min-width: 760px) {
  .play-mode-grid--portrait { grid-template-columns: repeat(4, 1fr); }
}

/* Buttons (scoped to setup/tutorial only — in-game buttons untouched) */
.setup-backdrop:not(.home-cinematic) .primary-button,
.ftue-modal .primary-button,
.basic-ftue .primary-button {
  background: linear-gradient(180deg, #ffe6a3 0%, #f3c45a 44%, #d99a2c 100%) !important;
  border: 1px solid rgba(246,224,162,0.6) !important;
  color: #3a2407 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 0 #946314, 0 10px 20px rgba(0,0,0,0.45) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
}
.setup-backdrop:not(.home-cinematic) .primary-button:active,
.ftue-modal .primary-button:active,
.basic-ftue .primary-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 #946314, 0 3px 10px rgba(0,0,0,0.45) !important;
}
.setup-backdrop:not(.home-cinematic) .ghost-button,
.setup-backdrop:not(.home-cinematic) .mini-button,
.ftue-modal .ghost-button,
.basic-ftue .ghost-button {
  background: linear-gradient(180deg, rgba(40,52,78,0.92), rgba(18,26,44,0.94)) !important;
  border: 1px solid rgba(212,168,78,0.34) !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.45) !important;
}

/* Step card + form controls */
.setup-step-card {
  background: linear-gradient(180deg, rgba(20,28,46,0.92), rgba(11,16,28,0.96)) !important;
  border: 1px solid rgba(212,168,78,0.20) !important;
  color: #f3e8d0 !important;
}
.setup-step-card__eyebrow { color: #f3c45a !important; background: rgba(246,197,74,0.12) !important; }
.setup-backdrop:not(.home-cinematic) input,
.setup-backdrop:not(.home-cinematic) select {
  background: rgba(8,12,22,0.85) !important;
  color: #f3e8d0 !important;
  border: 1px solid rgba(212,168,78,0.30) !important;
}
.setup-backdrop:not(.home-cinematic) .setup-control label,
.setup-backdrop:not(.home-cinematic) .toggle { color: rgba(243,232,208,0.82) !important; }

/* FTUE dots already gold-on-dark; ensure inactive visible on navy */
.ftue-modal__dot { background: rgba(243,232,208,0.18) !important; }
.basic-ftue__dot { background: rgba(243,232,208,0.22) !important; }

/* Setup wizard breadcrumb (count/names/rules) — straggler still on the candy
   cream skin while the panel went navy. Retint to match the dark theme. */
.setup-backdrop:not(.home-cinematic) .setup-flow {
  background: rgba(11,16,28,0.6) !important;
  border: 1px solid rgba(212,168,78,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(243,232,208,0.14) !important;
  color: rgba(243,232,208,0.5) !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step span {
  background: rgba(243,232,208,0.12) !important;
  color: rgba(243,232,208,0.72) !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step.is-current {
  background: linear-gradient(180deg, rgba(243,196,90,0.22), rgba(212,168,78,0.10)) !important;
  border-color: #d4a84e !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 2px rgba(212,168,78,0.18) !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step.is-current span {
  background: linear-gradient(180deg, #ffe6a3, #f3c45a 54%, #d99a2c) !important;
  color: #3a2407 !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step.is-done {
  background: rgba(48,227,138,0.12) !important;
  border-color: rgba(48,227,138,0.42) !important;
  color: #9be9c2 !important;
}
.setup-backdrop:not(.home-cinematic) .setup-flow__step.is-done span {
  background: linear-gradient(180deg, #5be3a0, #2bbd77) !important;
  color: #06281a !important;
}

/* round 2 — stragglers the broad selectors missed */
.online-entry__intro {
  background: linear-gradient(180deg, rgba(20,28,46,0.92), rgba(11,16,28,0.95)) !important;
  border: 1px solid rgba(212,168,78,0.22) !important;
  color: #f3e8d0 !important;
}
.online-entry__intro h3 { color: #f3e8d0 !important; }
.online-entry__intro > span { color: #f3c45a !important; }
.online-entry__intro p { color: rgba(243,232,208,0.66) !important; }

.basic-ftue__speech {
  background: linear-gradient(180deg, rgba(22,30,50,0.96), rgba(12,18,32,0.98)) !important;
  border: 1px solid rgba(212,168,78,0.28) !important;
}
.basic-ftue__speech-tail { background: rgba(22,30,50,0.96) !important; }
.basic-ftue__title { color: #f3e8d0 !important; }
.basic-ftue__body { color: rgba(243,232,208,0.80) !important; }
.basic-ftue__skip {
  background: linear-gradient(180deg, rgba(40,52,78,0.9), rgba(18,26,44,0.92)) !important;
  border: 1px solid rgba(212,168,78,0.3) !important;
  color: rgba(243,232,208,0.85) !important;
}

/* round 3 — tone down the bright cream form controls (count select,
   variant dropdown, ruleset toggle) to navy glossy; keep a champagne
   badge as the only gold accent. */
.setup-backdrop:not(.home-cinematic) .themed-select,
.setup-backdrop:not(.home-cinematic) .variant-dropdown {
  background:
    radial-gradient(circle at 90% 12%, rgba(246,197,74,0.10), transparent 42%),
    linear-gradient(180deg, rgba(22,30,50,0.94), rgba(11,16,28,0.97)) !important;
  border: 1px solid rgba(212,168,78,0.30) !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.45) !important;
}
.setup-backdrop:not(.home-cinematic) .themed-select__value,
.setup-backdrop:not(.home-cinematic) .variant-dropdown__body { color: #f3e8d0 !important; }
.setup-backdrop:not(.home-cinematic) .themed-select__chevron,
.setup-backdrop:not(.home-cinematic) .variant-dropdown__chevron { color: #d4a84e !important; }

.setup-backdrop:not(.home-cinematic) .ruleset-toggle__btn,
.setup-backdrop:not(.home-cinematic) .ruleset-toggle__btn--class {
  background:
    radial-gradient(circle at 86% 12%, rgba(246,197,74,0.08), transparent 44%),
    linear-gradient(180deg, rgba(22,30,50,0.94), rgba(11,16,28,0.97)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.45) !important;
}
.setup-backdrop:not(.home-cinematic) .ruleset-toggle__btn.is-selected {
  border-color: rgba(212,168,78,0.7) !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(246,197,74,0.18), transparent 44%),
    linear-gradient(180deg, rgba(34,46,72,0.96), rgba(15,22,38,0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 16px rgba(246,197,74,0.22), 0 4px 12px rgba(0,0,0,0.5) !important;
}
.setup-backdrop:not(.home-cinematic) .ruleset-toggle__copy strong { color: #f3e8d0 !important; }
.setup-backdrop:not(.home-cinematic) .ruleset-toggle__copy small { color: rgba(243,232,208,0.62) !important; }

/* champagne (not neon-yellow) badges */
.setup-backdrop:not(.home-cinematic) .themed-select__badge,
.setup-backdrop:not(.home-cinematic) .variant-dropdown__code,
.setup-backdrop:not(.home-cinematic) .ruleset-toggle__badge {
  background: linear-gradient(180deg, #e6c574, #c39a40 56%, #94701f) !important;
  border-color: rgba(212,168,78,0.5) !important;
  color: #2a1c06 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 5px rgba(0,0,0,0.4) !important;
}

/* round 4 — online lobby (建立房間後的房間頁) was still on the cream
   decision-panel skin: the lobby has no app--round- immersive scope, so the
   dark in-game styling never reached it. Retint scoped to .online-panel only
   (lobby-exclusive) so the in-game decision UI is untouched. */
.online-panel {
  background: linear-gradient(180deg, rgba(28,38,60,0.98), rgba(12,18,32,0.99)) !important;
  border: 1px solid rgba(212,168,78,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 22px 50px rgba(0,0,0,0.6) !important;
}
.online-panel .section-title h2 { color: #f3e8d0 !important; }
.online-panel .section-title > span { color: rgba(243,232,208,0.7) !important; }
.online-panel .room-code {
  background: rgba(8,12,22,0.6) !important;
  border: 1px solid rgba(212,168,78,0.28) !important;
  color: #f3e8d0 !important;
}
.online-panel .room-code span { color: rgba(243,232,208,0.6) !important; }
.online-panel .room-code strong { color: #f3c45a !important; }
.online-panel .setup-copy,
.online-panel .line-copy { color: rgba(243,232,208,0.66) !important; }
.online-panel .ghost-button {
  background: linear-gradient(180deg, rgba(40,52,78,0.92), rgba(18,26,44,0.94)) !important;
  border: 1px solid rgba(212,168,78,0.34) !important;
  color: #f3e8d0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 6px rgba(0,0,0,0.45) !important;
}
.online-panel .primary-button {
  background: linear-gradient(180deg, #ffe6a3 0%, #f3c45a 44%, #d99a2c 100%) !important;
  border: 1px solid rgba(246,224,162,0.6) !important;
  color: #3a2407 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 0 #946314, 0 10px 20px rgba(0,0,0,0.45) !important;
}
.online-panel .online-status,
.online-panel .online-status span { color: rgba(243,232,208,0.58) !important; }
.online-panel .waiting-note {
  background: rgba(8,12,22,0.5) !important;
  border: 1px solid rgba(212,168,78,0.2) !important;
  color: rgba(243,232,208,0.7) !important;
}
/* lobby stragglers now that the lobby is inside the immersive scope: the empty
   market placeholder + the online beta banner were still on the cream skin. */
.app--commercial-mobile[class*="app--round-"] .empty-path {
  background: rgba(8,12,22,0.5) !important;
  border: 1px dashed rgba(212,168,78,0.26) !important;
  color: rgba(243,232,208,0.6) !important;
}
.online-beta-banner {
  background: linear-gradient(180deg, rgba(40,52,78,0.92), rgba(18,26,44,0.94)) !important;
  border-bottom: 1px solid rgba(212,168,78,0.28) !important;
  color: rgba(243,232,208,0.82) !important;
}

/* Game-over panel dark retheme — .gameover-panel had been reverted to the cream
   commercial-mobile skin by var(--panel), leaving the ranked list (light text)
   low-contrast. Restore the intended dark cinematic, scoped to .gameover-overlay. */
.gameover-overlay .gameover-panel {
  background: linear-gradient(180deg, rgba(22,30,50,0.99), rgba(8,11,20,0.99)) !important;
  border: 1px solid rgba(212,168,78,0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 32px 80px rgba(0,0,0,0.85) !important;
}
.gameover-overlay .gameover-winner__label { color: rgba(243,232,208,0.6) !important; }
.gameover-overlay .gameover-winner__name { color: #a8ffd4 !important; }
.gameover-overlay .gameover-winner__score { color: #fff5d7 !important; }
.gameover-overlay .gameover-recap { color: rgba(243,232,208,0.9) !important; }
.gameover-overlay .lifetime-chip {
  background: linear-gradient(180deg, rgba(22,30,50,0.94), rgba(11,16,28,0.97)) !important;
  border: 1px solid rgba(212,168,78,0.3) !important;
  color: rgba(243,232,208,0.85) !important;
}
.gameover-overlay .lifetime-chip__tier { color: #f3c45a !important; }
.gameover-overlay .lifetime-chip__total { color: #f3e8d0 !important; }
.gameover-overlay .lifetime-chip__hint { color: rgba(243,232,208,0.6) !important; }
/* P2-4: keep the investor battle-card dark cinematic over the mobile skin. */
.gameover-overlay .gameover-card {
  background: linear-gradient(180deg, rgba(28,38,62,0.96), rgba(12,18,32,0.98)) !important;
  border: 1px solid rgba(212,168,78,0.42) !important;
}
.gameover-overlay .gameover-card--win { border-color: rgba(245,200,120,0.7) !important; }
.gameover-overlay .gameover-card__score strong { color: #f5c878 !important; }
.gameover-overlay .gameover-actions__skip,
.gameover-overlay .gameover-actions .ghost-button {
  background: linear-gradient(180deg, rgba(40,52,78,0.92), rgba(18,26,44,0.94)) !important;
  border: 1px solid rgba(212,168,78,0.34) !important;
  color: #f3e8d0 !important;
}

/* ============================================================
   v252 POLISH PASS — motion + atmosphere only, no layout change.
   "5% visual adjustment = 30% quality". Keep everything subtle.
   ============================================================ */

/* ── 1. Button micro-motion: 加碼 / 套現 glow-breathe (no scale, keeps tap) ── */
.app--commercial-mobile .choice-button--stay {
  animation: commercialChoicePulse 2.5s ease-in-out infinite, choiceGlowBreathe 3.6s ease-in-out infinite !important;
}
.app--commercial-mobile .choice-button--leave {
  animation: choiceGlowBreatheSoft 4s ease-in-out infinite !important;
}
@keyframes choiceGlowBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(48,227,138,0)); }
  50%      { filter: drop-shadow(0 0 9px rgba(48,227,138,0.42)); }
}
@keyframes choiceGlowBreatheSoft {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(246,197,74,0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(246,197,74,0.34)); }
}

/* ── 2. Background atmosphere ── */
/* home: slow gold dust drift (scrim ::after, pointer-events none, full-bleed) */
.home-cine__scrim::after {
  content: "";
  position: absolute;
  inset: -10% 0 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 32%, rgba(246,224,162,0.55), transparent),
    radial-gradient(1.5px 1.5px at 72% 18%, rgba(246,224,162,0.45), transparent),
    radial-gradient(1px 1px at 44% 64%, rgba(246,224,162,0.5), transparent),
    radial-gradient(2px 2px at 88% 52%, rgba(246,224,162,0.4), transparent),
    radial-gradient(1px 1px at 28% 80%, rgba(246,224,162,0.42), transparent),
    radial-gradient(1.5px 1.5px at 60% 88%, rgba(246,224,162,0.38), transparent);
  background-size: 100% 140%;
  animation: homeDustDrift 22s linear infinite;
  opacity: 0.7;
}
@keyframes homeDustDrift {
  0%   { background-position: 0 0; opacity: 0.32; }
  50%  { opacity: 0.7; }
  100% { background-position: 0 -140%; opacity: 0.32; }
}
/* in-game: slow city parallax drift + spotlight breathe (no new elements) */
.app--commercial-mobile[class*="app--round-"]::before {
  animation: sceneCityDrift 34s ease-in-out infinite alternate;
}
@keyframes sceneCityDrift {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.045) translateY(-1.1%); }
}
.app--commercial-mobile[class*="app--round-"]::after {
  animation: sceneSpotlightBreathe 9s ease-in-out infinite;
}
@keyframes sceneSpotlightBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.84; }
}

/* ── 3. Hazard card danger glow (emotionally dangerous, crisis only) ── */
.app--commercial-mobile[class*="app--round-"] .path .card--crisis {
  animation: hazardDangerPulse 1.9s ease-in-out infinite;
}
@keyframes hazardDangerPulse {
  0%, 100% {
    box-shadow:
      inset 0 2px 0 oklch(99% 0.03 92 / 0.55),
      0 16px 30px oklch(2% 0.02 250 / 0.6),
      0 0 0 rgba(214,31,62,0);
  }
  50% {
    box-shadow:
      inset 0 2px 0 oklch(99% 0.03 92 / 0.55),
      0 16px 30px oklch(2% 0.02 250 / 0.6),
      0 0 16px rgba(214,31,62,0.5);
  }
}

/* ── 4. Typography polish: −20% glow, warm off-white, thinner CN titles ── */
.app--commercial-mobile[class*="app--round-"] .run-stage__status strong { font-weight: 800 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--calm .run-stage__status strong { text-shadow: 0 0 8px #30e38a88 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--warm .run-stage__status strong { text-shadow: 0 0 8px #d4a84e88 !important; }
.app--commercial-mobile[class*="app--round-"] .run-stage--hot .run-stage__status strong  { text-shadow: 0 0 9px #d61f3eaa !important; }
.home-topbar__name { color: #efe2c6 !important; }

/* ── 5. Header reduction (home topbar) ── */
.home-topbar {
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-bottom: 10px;
}
.home-topbar__avatar { width: 34px; height: 34px; }
.home-icon-chip { width: 34px; height: 34px; }
.home-icon-chip .svg-icon { width: 16px; height: 16px; }
.home-topbar__name { font-size: 0.9rem; }

/* ── 6. Screen entry transitions (cinematic easing, subtle) ── */
.home-cinematic .home-menu__panel {
  animation: screenRiseIn 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* entry animation only on input-free picker cards (avoids replay-on-blur
   flicker on the name/count/ruleset setup steps) */
.setup-backdrop:not(.home-cinematic) .play-mode-card {
  animation: cardStaggerIn 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.setup-backdrop:not(.home-cinematic) .play-mode-card:nth-child(2) { animation-delay: 60ms; }
.setup-backdrop:not(.home-cinematic) .play-mode-card:nth-child(3) { animation-delay: 120ms; }
.setup-backdrop:not(.home-cinematic) .play-mode-card:nth-child(4) { animation-delay: 180ms; }
@keyframes screenRiseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardStaggerIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-cine__scrim::after,
  .app--commercial-mobile[class*="app--round-"]::before,
  .app--commercial-mobile[class*="app--round-"]::after,
  .app--commercial-mobile .choice-button--stay,
  .app--commercial-mobile .choice-button--leave,
  .app--commercial-mobile[class*="app--round-"] .path .card--crisis,
  .home-cinematic .home-menu__panel,
  .setup-backdrop:not(.home-cinematic) .setup-panel:not(.home-menu),
  .setup-backdrop:not(.home-cinematic) .play-mode-card { animation: none !important; }
}

/* Role-mode entry banner on the play-mode picker (職業玩法 已開啟) */
.role-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 2px;
  padding: 9px 13px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(122,77,255,0.20), rgba(122,77,255,0.10));
  border: 1px solid rgba(154,123,255,0.42);
  color: #d9ccff;
  font-family: var(--font-display, 'Space Grotesk','Noto Sans TC',sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 16px rgba(122,77,255,0.18);
}
.role-lock-banner .svg-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.role-lock-banner .svg-icon svg { stroke: #9a7bff; }

/* ── Home talking-hero (左上角動畫對話) ── */
.home-hero {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px; /* P3-2: 44px tap height; centered row keeps avatar/bubble visually put */
  flex: 1 1 auto;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.home-hero__avatar {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #11203a;
  border: 1.5px solid rgba(212,168,78,0.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.55);
  animation: heroBob 3.2s ease-in-out infinite;
}
.home-hero__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes heroBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.home-hero:active .home-hero__avatar { transform: scale(0.93); }
.home-hero__bubble {
  position: relative;
  min-width: 0;
  max-width: 210px;
  padding: 6px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(26,36,58,0.94), rgba(13,19,33,0.96));
  border: 1px solid rgba(212,168,78,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.5);
  animation: heroBubblePop 420ms cubic-bezier(0.22, 1.4, 0.32, 1) both;
}
.home-hero__tail {
  position: absolute;
  left: -4px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4px;
  background: rgba(26,36,58,0.94);
  border-left: 1px solid rgba(212,168,78,0.34);
  border-bottom: 1px solid rgba(212,168,78,0.34);
  transform: rotate(45deg);
}
.home-hero__text {
  display: block;
  font-family: var(--font-display, 'Space Grotesk','Noto Sans TC',sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: #f3e8d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
@keyframes heroBubblePop {
  0%   { transform: scale(0.92) translateX(-4px); opacity: 0.3; }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__avatar { animation: none; }
  .home-hero__bubble { animation: none; }
}

/* v296 interaction clarity follow-up: in-game cash/reveal feedback stays readable.
   Keep the board visible, avoid pale casino plaques, and stop huge numbers from
   covering the decision context on mobile. */
.cashout-banner {
  min-height: 76px;
  border: 2px solid oklch(76% 0.13 84 / 0.58);
  border-left-width: 2px;
  color: oklch(95% 0.055 90);
  background:
    radial-gradient(circle at 14% 8%, oklch(78% 0.13 84 / 0.2), transparent 34%),
    linear-gradient(180deg, oklch(18% 0.045 238 / 0.96), oklch(9% 0.035 242 / 0.98));
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.12),
    0 14px 34px oklch(5% 0.02 238 / 0.64);
}

.cashout-banner__label,
.cashout-banner__action {
  color: oklch(82% 0.08 86 / 0.82);
}

.cashout-banner__name {
  color: oklch(96% 0.055 90);
  text-shadow: 0 2px 0 oklch(5% 0.02 238 / 0.38);
}

.cashout-banner__amount {
  color: oklch(78% 0.16 145);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-size: clamp(28px, 7vmin, 42px);
  text-shadow:
    0 0 14px oklch(70% 0.16 145 / 0.36),
    0 2px 0 oklch(5% 0.02 238 / 0.42);
  filter: none;
}

.cashout-banner__avatar {
  background: oklch(12% 0.035 242);
  border-color: oklch(76% 0.13 84 / 0.42);
}

.treasure-burst__dim {
  background: oklch(5% 0.02 238 / 0.48);
  backdrop-filter: blur(1px);
}

.treasure-burst__glitch,
.treasure-burst__scan,
.treasure-burst__ticker {
  display: none;
}

.treasure-burst__stack {
  width: min(84vw, 360px);
  padding: 18px 18px 16px;
  border: 1.5px solid oklch(76% 0.13 84 / 0.52);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, oklch(78% 0.13 84 / 0.18), transparent 42%),
    linear-gradient(180deg, oklch(15% 0.04 238 / 0.9), oklch(8% 0.03 242 / 0.94));
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.13),
    0 18px 42px oklch(5% 0.02 238 / 0.62);
}

.treasure-burst__label-top,
.treasure-burst__label {
  color: oklch(92% 0.075 90);
  letter-spacing: 0.12em;
  text-transform: none;
}

.treasure-burst__big,
.treasure-burst--mega .treasure-burst__big,
.treasure-burst--ultra .treasure-burst__big {
  max-width: 100%;
  color: oklch(76% 0.17 145);
  font-size: clamp(48px, 19vw, 92px);
  text-shadow:
    0 0 18px oklch(70% 0.16 145 / 0.4),
    0 2px 0 oklch(5% 0.02 238 / 0.5);
}

@media (max-width: 480px) {
  .cashout-banner {
    width: min(92vw, 420px);
    min-height: 70px;
    border-left-width: 2px;
  }

  .cashout-banner__amount {
    font-size: clamp(27px, 8vmin, 38px);
  }
}

.app--commercial-mobile.app--result-review .decision-ready-actions {
  position: relative;
  z-index: 2;
  padding: 4px 0 0;
  background:
    linear-gradient(180deg, transparent, oklch(8% 0.03 242 / 0.94) 42%);
}

.app--commercial-mobile.app--result-review .choice-stage {
  padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
}

.app--commercial-mobile.app--result-review .quarter-progress {
  border-color: oklch(76% 0.13 84 / 0.42);
  background:
    radial-gradient(circle at 92% 0%, oklch(78% 0.13 84 / 0.16), transparent 36%),
    linear-gradient(180deg, oklch(17% 0.04 238 / 0.86), oklch(10% 0.035 242 / 0.9));
}

body.game-animation-locked .app .class-skill-drawer {
  pointer-events: auto;
}

body.game-animation-locked .app .class-skill-drawer__toggle,
body.game-animation-locked .app .class-skill-drawer__panel {
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  filter: none;
}

body.game-animation-locked .app .class-skill-action {
  cursor: progress;
  opacity: 0.54;
  filter: saturate(0.7);
}

.app--commercial-mobile[class*="app--round-"] > .cds-overlay,
.cds-overlay {
  z-index: 246 !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.app {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .app {
    overflow-x: hidden;
  }
}

.app--commercial-mobile .main-grid,
.app--commercial-mobile .board,
.app--commercial-mobile .temple-strip {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.app--commercial-mobile .path {
  width: 100%;
  max-width: 100%;
  contain: layout paint;
  overscroll-behavior-x: contain;
}

.app--commercial-mobile .card--crisis,
.app--commercial-mobile .card--crisis[data-hazard] {
  background:
    radial-gradient(circle at 52% 20%, oklch(72% 0.16 84 / 0.16), transparent 34%),
    radial-gradient(circle at 70% 58%, oklch(58% 0.18 31 / 0.18), transparent 42%),
    linear-gradient(145deg, oklch(16% 0.055 28), oklch(9% 0.035 242) 58%, oklch(5% 0.025 242));
  border: 1px solid oklch(76% 0.14 84 / 0.58);
  color: oklch(95% 0.055 90);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.16),
    0 0 0 1px oklch(78% 0.14 84 / 0.12),
    0 12px 24px oklch(5% 0.02 242 / 0.46);
}

.app--commercial-mobile .card--crisis .card__symbol {
  background:
    radial-gradient(circle at 50% 20%, oklch(82% 0.15 84 / 0.20), transparent 50%),
    linear-gradient(180deg, oklch(18% 0.06 28 / 0.82), oklch(8% 0.03 242 / 0.9));
  border-color: oklch(78% 0.14 84 / 0.34);
  color: oklch(88% 0.15 84);
  box-shadow:
    inset 0 1px 0 oklch(98% 0.04 92 / 0.12),
    0 0 18px oklch(62% 0.18 31 / 0.20);
}

.app--commercial-mobile .card--crisis .card__footer--hazard {
  background:
    linear-gradient(180deg, oklch(99% 0.035 92 / 0.86), oklch(92% 0.075 120 / 0.78));
  border-color: oklch(42% 0.11 154 / 0.16);
  box-shadow:
    inset 0 1px 0 oklch(99% 0.03 92 / 0.8),
    0 4px 0 oklch(35% 0.09 154 / 0.12);
}

.app--commercial-mobile .card--crisis .card__hazard-kicker,
.app--commercial-mobile .card--crisis .card__hazard-subtitle,
.app--commercial-mobile .card--crisis .card__hazard-rule {
  color: oklch(32% 0.075 150 / 0.78);
}

.app--commercial-mobile .card--crisis .card__hazard-title {
  color: oklch(22% 0.08 150);
  text-shadow: 0 1px 0 oklch(99% 0.03 92 / 0.78);
}

.app--commercial-mobile .card--crisis .card__tag {
  background: linear-gradient(180deg, oklch(30% 0.13 30 / 0.92), oklch(18% 0.08 26 / 0.94));
  border: 1px solid oklch(84% 0.14 84 / 0.68);
  color: oklch(96% 0.055 90);
  box-shadow:
    0 0 14px oklch(64% 0.2 31 / 0.22),
    inset 0 1px 0 oklch(98% 0.04 92 / 0.14);
}