/* =============================================================================
   MR. ILLUSTRIOUS — UI / typography
   OWNER: Agent D.
   System font stacks only. No webfonts, no network, no images. Every transition
   eases cubic-bezier(0.22, 1, 0.36, 1). Nothing linear. Nothing instant.
   ========================================================================== */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                ui-serif, Georgia, "Times New Roman", serif;

  /* The past is always the warmest thing on screen. */
  --lou: #f0c674;

  --paper: #f3eff8;
  --paper-soft: rgba(243, 239, 248, 0.80);
  --paper-dim: rgba(243, 239, 248, 0.52);
  --shadow: 0 2px 24px rgba(0, 0, 0, 0.92), 0 1px 3px rgba(0, 0, 0, 0.85);

  --key: #ff2d6f;
  --fill: #1b1035;
  --accent: #00e5ff;
  --name: #00e5ff;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---- per-chapter palettes (ART_DIRECTION.md) ------------------------------ */
[data-palette="club_ice"]  { --key:#ff2d6f; --fill:#1b1035; --accent:#00e5ff; --name:#41edff; }
[data-palette="business"]  { --key:#ffb020; --fill:#120d1e; --accent:#ff2d6f; --name:#ff5c8d; }
[data-palette="new_york"]  { --key:#e8e2d4; --fill:#0a1420; --accent:#c8102e; --name:#f2596d; }
[data-palette="ameera"]    { --key:#ff8a3d; --fill:#2a0f1e; --accent:#7b5cff; --name:#ad96ff; }
[data-palette="last_ride"] { --key:#5a6b7a; --fill:#080b10; --accent:#ffffff; --name:#d6e4f0; }
[data-palette="hospital"]  { --key:#dfe9ee; --fill:#141a1d; --accent:#6fd3c7; --name:#8fe4d9; }
[data-palette="memory"]    { --key:#f0c674; --fill:#1a1208; --accent:#f0c674; --name:#f6d799; }

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

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #05030a;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-sans);
}

#app { position: fixed; inset: 0; }
#stage { display: block; width: 100%; height: 100%; }
#ui { position: absolute; inset: 0; pointer-events: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The frame shudders when Uncle Lou disapproves. */
@keyframes miShudder {
  0%   { transform: translate3d(0,0,0); }
  15%  { transform: translate3d(-2px, 1px, 0); }
  32%  { transform: translate3d(2px, -1.5px, 0); }
  50%  { transform: translate3d(-1.5px, -1px, 0); }
  68%  { transform: translate3d(1.5px, 1.5px, 0); }
  85%  { transform: translate3d(-1px, 0, 0); }
  100% { transform: translate3d(0,0,0); }
}
body.mi-shudder #app { animation: miShudder 400ms var(--ease) both; }

/* =============================================================================
   BOOT / TITLE CARD
   ========================================================================== */
#boot {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(30px, 5vh, 64px);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,45,111,.18), transparent 58%),
    radial-gradient(90% 70% at 82% 96%, rgba(0,229,255,.14), transparent 60%),
    linear-gradient(180deg, #0b0618 0%, #05030a 58%, #08040e 100%);
  opacity: 1;
  transition: opacity 900ms var(--ease), visibility 0s linear 0ms;
}
#boot::before {
  content: ""; position: absolute; inset: -20%;
  background-image: var(--grain);
  opacity: .055; mix-blend-mode: screen; pointer-events: none;
  animation: bootGrain 620ms steps(1, end) infinite;
}
#boot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 60% at 50% 46%, transparent 40%, rgba(0,0,0,.72) 100%);
}
@keyframes bootGrain {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -1%, 0); }
  100% { transform: translate3d(1%, 3%, 0); }
}
#boot.gone {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 900ms var(--ease), visibility 0s linear 900ms;
}

#boot-title {
  position: relative; z-index: 2;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(30px, 8.2vw, 132px);
  letter-spacing: clamp(6px, 1.5vw, 26px);
  text-indent: clamp(6px, 1.5vw, 26px); /* balance the trailing tracking */
  line-height: 1;
  color: #f6f2ff;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    -2px 0 0 rgba(255,45,111,.55),
     2px 0 0 rgba(0,229,255,.45),
     0 0 44px rgba(255,45,111,.35),
     0 0 120px rgba(0,229,255,.22);
  animation: titleIn 1600ms var(--ease) both 160ms;
}
#boot-title::before, #boot-title::after {
  content: ""; position: absolute; left: 50%; width: min(74vw, 860px); height: 1px;
  transform: translateX(-50%) scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(246,242,255,.62), transparent);
  animation: ruleIn 1400ms var(--ease) both 700ms;
}
#boot-title::before { top: -.24em; }
#boot-title::after  { bottom: -.24em; }

@keyframes titleIn {
  from { opacity: 0; filter: blur(14px); letter-spacing: clamp(14px, 3.6vw, 62px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes ruleIn { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }

#boot-sub {
  position: relative; z-index: 2;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(11px, 1.25vw, 19px);
  letter-spacing: clamp(2px, .5vw, 8px);
  color: rgba(240, 198, 116, .88);
  text-align: center;
  animation: subIn 1400ms var(--ease) both 1000ms;
}
@keyframes subIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#boot-start {
  position: relative; z-index: 2;
  margin-top: clamp(10px, 2.6vh, 34px);
  padding: clamp(12px, 1.5vh, 18px) clamp(34px, 5vw, 70px);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(11px, .92vw, 15px);
  letter-spacing: .42em; text-indent: .42em;
  color: #0a0610;
  background: #f6f2ff;
  border: 1px solid rgba(246,242,255,.9);
  border-radius: 2px;
  cursor: pointer;
  transition: transform 420ms var(--ease), background 420ms var(--ease),
              color 420ms var(--ease), box-shadow 420ms var(--ease), letter-spacing 420ms var(--ease);
  box-shadow: 0 0 0 rgba(255,45,111,0);
  animation: subIn 1200ms var(--ease) both 1500ms;
}
#boot-start:hover, #boot-start:focus-visible {
  background: transparent; color: #f6f2ff;
  letter-spacing: .54em; text-indent: .54em;
  transform: translateY(-2px);
  box-shadow: 0 0 46px rgba(255,45,111,.42), inset 0 0 0 1px rgba(246,242,255,.9);
}
#boot-start:active { transform: translateY(0) scale(.985); }

/* =============================================================================
   FRAME
   ========================================================================== */
.mi {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: var(--font-sans);
  color: var(--paper);
  --pad-x: clamp(20px, 6vw, 132px);
}

.mi-scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.mi-scrim-top {
  top: 0; height: 22vh;
  background: linear-gradient(180deg, rgba(3,2,7,.72), rgba(3,2,7,0));
}
/* Tinted with the chapter fill so the scrim reads as part of the grade, not a black bar. */
.mi-scrim-bottom {
  bottom: 0; height: 46vh;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--fill) 52%, transparent) 0%, transparent 56%),
    linear-gradient(0deg, rgba(3,2,7,.88) 0%, rgba(3,2,7,.70) 26%, rgba(3,2,7,.26) 62%, rgba(3,2,7,0) 100%);
  transition: background 900ms var(--ease);
}

.mi-advance {
  position: absolute; inset: 0; z-index: 5;
  appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; pointer-events: auto;
}
.mi-advance:disabled { pointer-events: none; cursor: default; }

.mi-lower {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(14px, 2.4vh, 30px);
  padding: 0 var(--pad-x) clamp(96px, 15vh, 190px);
  pointer-events: none;
}

/* =============================================================================
   DIALOGUE
   ========================================================================== */
.mi-dialogue {
  display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 38px);
  opacity: 0; transform: translateY(16px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease), filter 460ms var(--ease);
  pointer-events: none;
}
.mi-dialogue.is-on { opacity: 1; transform: none; }
.mi-dialogue.is-hushed { opacity: .26; filter: saturate(.35) blur(.4px); transform: translateY(4px); }

.mi-portrait { flex: 0 0 auto; }
.mi-portrait canvas {
  display: block;
  height: clamp(150px, 27vh, 340px); width: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.72)) drop-shadow(0 0 26px color-mix(in srgb, var(--key) 26%, transparent));
  animation: portraitIn 620ms var(--ease) both;
}
@keyframes portraitIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.mi-dialogue.no-portrait .mi-portrait { display: none; }

/* ~62 characters per line. `em` tracks the font; `ch` lies about proportional faces.
   The box carries the dialogue size so the measure, the name rule and the chevron
   all share one column. */
.mi-box {
  position: relative; flex: 1 1 auto; min-width: 0;
  font-size: clamp(15px, 1.05vw + 5px, 23px);
  max-width: min(100%, 30em);
}

.mi-name {
  display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px);
  margin: 0 0 clamp(8px, 1.1vh, 14px);
  opacity: 0; transform: translateY(6px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  height: 1.1em;
}
.mi-name.is-on { opacity: 1; transform: none; }
.mi-name-txt {
  font-weight: 800;
  font-size: clamp(10px, .82vw, 15px);
  letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase;
  color: var(--name);
  white-space: nowrap;
  text-shadow: 0 0 22px color-mix(in srgb, var(--name) 42%, transparent), 0 1px 2px rgba(0,0,0,.9);
}
.mi-name-rule {
  flex: 1 1 auto; height: 1px; min-width: 20px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--name) 62%, transparent), transparent 78%);
}

.mi-text {
  margin: 0;
  max-width: 100%;
  font-size: 1em;
  line-height: 1.6;                    /* generous leading */
  font-weight: 400;
  letter-spacing: .004em;
  color: var(--paper);
  text-shadow: var(--shadow);
  text-wrap: pretty;
}
.mi-dialogue.is-narrate .mi-text {
  position: relative;
  padding-left: clamp(14px, 1.3vw, 22px);
  color: var(--paper-soft);
  font-weight: 350;
}
.mi-dialogue.is-narrate .mi-text::before {
  content: ""; position: absolute; left: 0; top: .34em; bottom: .28em; width: 2px;
  background: linear-gradient(180deg, var(--key), transparent);
  opacity: .62;
}

/* per-character reveal ------------------------------------------------------ */
.mi-w { display: inline-block; white-space: pre; }
.mi-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.14em);
  animation: chIn var(--cd, 330ms) var(--ease) forwards;
  animation-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
@keyframes chIn { to { opacity: 1; transform: none; } }
.is-done .mi-ch { animation: none !important; opacity: 1 !important; transform: none !important; }

/* advance chevron ----------------------------------------------------------- */
.mi-next {
  position: absolute; right: 0; bottom: -1.9em;
  width: 22px; height: 22px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.mi-next.is-on { opacity: .82; transform: none; }
.mi-next span {
  position: absolute; left: 4px; top: 5px; width: 9px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  animation: nextBob 1500ms var(--ease) infinite;
}
@keyframes nextBob {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(3px,3px); opacity: 1; }
}

/* =============================================================================
   THE UNCLE LOU VOICE
   No portrait. No name plate. Lower in frame. Cannot be clicked away.
   ========================================================================== */
.mi-lou {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(40px, 7vh, 96px);
  z-index: 15;
  display: flex; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition: opacity 1150ms var(--ease), transform 1150ms var(--ease), filter 1150ms var(--ease);
}
.mi-lou::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(94vw, 1180px); height: 320%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(240,198,116,.16), rgba(240,198,116,.05) 42%, transparent 72%);
  pointer-events: none;
}
.mi-lou.is-on { opacity: 1; transform: none; filter: blur(0); }
.mi-lou.is-leaving {
  opacity: 0; transform: translateY(-16px); filter: blur(5px);
  transition: opacity 820ms var(--ease), transform 820ms var(--ease), filter 820ms var(--ease);
}
.mi-lou-text {
  position: relative;
  margin: 0;
  max-width: 44ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.55vw + 6px, 38px);
  line-height: 1.36;
  letter-spacing: .006em;
  text-align: center;
  color: var(--lou);
  text-shadow:
    0 0 34px rgba(240,198,116,.42),
    0 0 90px rgba(240,198,116,.18),
    0 2px 16px rgba(0,0,0,.95);
}
.mi-lou-text .mi-ch { animation-timing-function: var(--ease); }

/* =============================================================================
   CHOICES
   ========================================================================== */
.mi-choices {
  display: none;
  flex-direction: column;
  gap: clamp(8px, 1.1vh, 14px);
  font-size: clamp(15px, 1.05vw + 5px, 23px);
  max-width: min(100%, 36em);
  pointer-events: none;
}
.mi-choices.is-on { display: flex; pointer-events: auto; }

.mi-choice {
  position: relative;
  display: flex; align-items: flex-start; gap: clamp(12px, 1.3vw, 22px);
  width: 100%;
  padding: clamp(12px, 1.5vh, 20px) clamp(16px, 1.6vw, 26px);
  text-align: left;
  font-family: var(--font-sans);
  color: var(--paper);
  background: linear-gradient(90deg, rgba(10,7,18,.78), rgba(10,7,18,.42));
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--key) 55%, transparent);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(22px);
  animation: choiceRise 620ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 60ms + 90ms);   /* staggered ~60ms apart */
  transition: background 340ms var(--ease), border-color 340ms var(--ease),
              transform 340ms var(--ease), box-shadow 340ms var(--ease);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
@keyframes choiceRise { to { opacity: 1; transform: none; } }

.mi-choice::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--key) 20%, transparent), transparent 46%);
  opacity: 0; transition: opacity 340ms var(--ease); pointer-events: none;
}
.mi-choice.is-cursor, .mi-choice:hover {
  border-left-color: var(--key);
  transform: translateX(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), -8px 0 34px -12px color-mix(in srgb, var(--key) 70%, transparent);
}
.mi-choice.is-cursor::after, .mi-choice:hover::after { opacity: 1; }
.mi-choice.is-picked { border-left-color: var(--accent); transform: translateX(10px); }
.mi-choices.is-picking .mi-choice:not(.is-picked) { opacity: .18; transform: translateY(6px); }

.mi-choice-mark {
  flex: 0 0 auto; min-width: 2.1em;
  font-weight: 800; font-size: clamp(10px, .74vw, 13px);
  letter-spacing: .22em;
  color: var(--key);
  padding-top: .35em;
  opacity: .9;
}
.mi-choice-body { display: flex; flex-direction: column; gap: .34em; flex: 1 1 auto; min-width: 0; }
.mi-choice-text {
  font-size: clamp(14px, .82vw + 5px, 20px);
  line-height: 1.45; font-weight: 500;
  text-wrap: pretty;
}
.mi-choice-hint {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(12px, .58vw + 5px, 16px);
  line-height: 1.4;
  color: var(--paper-dim);
}
.mi-choice-cost {
  flex: 0 0 auto; align-self: center;
  font-weight: 800; font-size: clamp(9px, .62vw, 11px);
  letter-spacing: .2em;
  color: var(--lou);
  border: 1px solid color-mix(in srgb, var(--lou) 44%, transparent);
  border-radius: 999px;
  padding: .42em .82em;
  white-space: nowrap;
}

/* =============================================================================
   STAT HUD
   ========================================================================== */
.mi-hud {
  position: absolute; z-index: 30;
  top: clamp(16px, 3.2vh, 42px);
  left: clamp(16px, 2.2vw, 46px);
  width: clamp(132px, 12.5vw, 210px);
  display: flex; flex-direction: column; gap: clamp(7px, .95vh, 13px);
  opacity: 0; transform: translateX(-10px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  pointer-events: none;
}
.mi-hud.is-on { opacity: 1; transform: none; }
.mi-hud.is-rebuked { animation: rebuke 900ms var(--ease); }
@keyframes rebuke {
  0%, 100% { filter: none; }
  18%      { filter: drop-shadow(0 0 18px rgba(240,198,116,.85)); }
}
.mi-hud-rule {
  height: 1px; margin-bottom: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--key) 70%, transparent), transparent);
}

.mi-stat { display: flex; flex-direction: column; gap: 4px; }
.mi-stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mi-stat-key {
  font-weight: 800; font-size: clamp(8px, .56vw, 10.5px);
  letter-spacing: .24em;
  color: rgba(243,239,248,.52);
  transition: color 500ms var(--ease), text-shadow 500ms var(--ease);
}
.mi-stat-val {
  font-weight: 700; font-size: clamp(11px, .78vw, 15px);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  color: rgba(243,239,248,.94);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  transition: color 500ms var(--ease), text-shadow 500ms var(--ease);
}
.mi-meter { position: relative; display: block; height: 2px; background: rgba(243,239,248,.13); overflow: hidden; }
.mi-meter i {
  position: absolute; inset: 0; display: block;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--key), color-mix(in srgb, var(--key) 40%, var(--accent)));
  transition: transform 720ms var(--ease), background 600ms var(--ease);
}
.mi-meter u {
  position: absolute; inset: 0; display: block; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%); opacity: 0;
}

.mi-stat.is-gain .mi-stat-val { color: var(--accent); text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }
.mi-stat.is-gain .mi-meter u { animation: sweep 900ms var(--ease); }
@keyframes sweep { 0% { transform: translateX(-100%); opacity: .9; } 100% { transform: translateX(100%); opacity: 0; } }

.mi-stat.is-drop .mi-stat-val { color: #ff7a8f; }
.mi-stat.is-loss .mi-stat-key,
.mi-stat.is-loss .mi-stat-val {
  color: var(--lou);
  text-shadow: 0 0 22px rgba(240,198,116,.8);
  animation: amberFlash 1200ms var(--ease);
}
.mi-stat.is-loss .mi-meter i { background: linear-gradient(90deg, var(--lou), rgba(240,198,116,.35)); }
@keyframes amberFlash {
  0%   { opacity: 1; }
  12%  { opacity: .25; }
  24%  { opacity: 1; }
  40%  { opacity: .35; }
  100% { opacity: 1; }
}
.mi-discipline-penalty {
  width: min(72vw, 310px);
  margin-top: 5px;
  padding: 8px 10px;
  border-left: 2px solid var(--lou);
  background: linear-gradient(90deg, rgba(12,7,16,.92), rgba(12,7,16,.25));
  color: var(--lou);
  font-weight: 900;
  font-size: clamp(8px, .62vw, 11px);
  line-height: 1.35;
  letter-spacing: .15em;
  opacity: 0;
  transform: translateX(-8px);
}
.mi-discipline-penalty.is-on { animation: disciplinePenalty 3.2s var(--ease) both; }
@keyframes disciplinePenalty {
  0%   { opacity: 0; transform: translateX(-8px); }
  10%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* =============================================================================
   TAROT — card ink
   ========================================================================== */
.mi-card-art, .mi-card-back-art { display: block; width: 100%; height: 100%; }
.mi-card-art {
  object-fit: contain;
  object-position: center;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
}
.mi-card-art .pf { fill: #120c17; }
.mi-card-art .ln { fill: none; stroke: var(--lou); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi-card-art .hv { fill: none; stroke: var(--lou); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.mi-card-art .thin { stroke-width: 1.6; }
.mi-card-art .hair { stroke-width: .9; opacity: .68; }
.mi-card-art .ac  { fill: none; stroke: #c8102e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mi-card-art .fl  { fill: var(--lou); stroke: none; }
.mi-card-art .acf { fill: #c8102e; stroke: none; }
.mi-card-art .gf  { fill: var(--lou); opacity: .13; stroke: none; }
.mi-card-art .nm {
  fill: var(--lou); font-family: var(--font-sans); font-size: 8px; font-weight: 800;
  letter-spacing: 1.5px; opacity: .9;
}
.mi-card-back-art .pb { fill: #1a1030; }
.mi-card-back-art .bl { fill: none; stroke: var(--lou); stroke-width: 1.4; opacity: .48; }
.mi-card-back-art .bh { fill: none; stroke: var(--lou); stroke-width: .9; opacity: .3; }
.mi-card-back-art .bf { fill: var(--lou); opacity: .85; }
.mi-card-back-art .rosette { opacity: .55; }

.mi-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.7);
}
.mi-front { transform: rotateY(180deg); }
.mi-flipper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 1000ms var(--ease);
}

/* ---- persistent rail ------------------------------------------------------ */
.mi-rail {
  position: absolute; z-index: 30;
  right: clamp(12px, 1.5vw, 30px); top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(-50%) translateX(26px);
  transition: opacity 780ms var(--ease), transform 780ms var(--ease);
  pointer-events: none;
}
.mi-rail.is-on { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.mi-rail.is-tucked { opacity: 0; transform: translateY(-50%) translateX(26px); pointer-events: none; }
.mi-rail-label span {
  writing-mode: vertical-rl;
  font-weight: 800; font-size: 8.5px; letter-spacing: .34em;
  color: color-mix(in srgb, var(--lou) 70%, transparent);
  opacity: .7;
}
.mi-rail-cards { display: flex; flex-direction: column; gap: 5px; }
.mi-rail-card {
  position: relative;
  width: clamp(26px, 2.3vw, 40px); aspect-ratio: var(--card-ratio, 3 / 5);
  perspective: 700px;
  cursor: default;
  transition: transform 460ms var(--ease), filter 460ms var(--ease);
  filter: saturate(.5) brightness(.78);
}
.mi-rail-card:hover, .mi-rail-card:focus-visible { transform: translateX(-6px) scale(1.1); filter: none; z-index: 2; }
.mi-rail-card.is-flipped { filter: none; }
.mi-rail-card.is-flipped .mi-flipper { transform: rotateY(180deg); }
.mi-rail-card.is-landing { animation: landPulse 2400ms var(--ease); }
@keyframes landPulse {
  0%   { filter: drop-shadow(0 0 0 rgba(240,198,116,0)); }
  22%  { filter: drop-shadow(0 0 22px rgba(240,198,116,.95)); }
  100% { filter: drop-shadow(0 0 0 rgba(240,198,116,0)); }
}
.mi-rail-tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  width: max-content; max-width: 34ch;
  padding: 10px 14px;
  background: rgba(8,5,14,.94);
  border-left: 2px solid var(--lou);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.mi-rail-card.is-flipped:hover .mi-rail-tip,
.mi-rail-card.is-flipped:focus-visible .mi-rail-tip { opacity: 1; transform: translateY(-50%); }
.mi-rail-tip b {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lou); margin-bottom: 5px;
}
.mi-rail-tip i {
  display: block; font-family: var(--font-serif); font-size: 13px; line-height: 1.45;
  color: var(--paper-soft);
}

/* ---- the dealing ceremony ------------------------------------------------- */
.mi-ceremony {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms var(--ease);
}
.mi-ceremony.is-on { opacity: 1; pointer-events: auto; }
.mi-ceremony.is-leaving { opacity: 0; pointer-events: none; transition: opacity 720ms var(--ease); }
.mi-ceremony-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 54% at 50% 46%, rgba(255,138,61,.20), transparent 66%),
    radial-gradient(120% 100% at 50% 100%, rgba(123,92,255,.16), transparent 62%),
    rgba(6,3,10,.93);
}
.mi-ceremony-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.6vh, 32px);
  padding: 0 4vw;
  width: 100%;
}
.mi-ceremony-kicker {
  font-weight: 800; font-size: clamp(9px, .62vw, 12px); letter-spacing: .5em; text-indent: .5em;
  color: color-mix(in srgb, var(--lou) 85%, transparent);
  opacity: 0;
}
.mi-ceremony.is-on .mi-ceremony-kicker { animation: subIn 900ms var(--ease) both 200ms; }
.mi-ceremony-title {
  font-weight: 800; font-size: clamp(22px, 3.4vw, 56px);
  letter-spacing: clamp(5px, .9vw, 16px); text-indent: clamp(5px, .9vw, 16px);
  color: #f6f2ff;
  text-shadow: 0 0 44px rgba(255,138,61,.5);
  margin-bottom: clamp(4px, 1.4vh, 18px);
  opacity: 0;
}
.mi-ceremony.is-on .mi-ceremony-title { animation: subIn 1100ms var(--ease) both 320ms; }
.mi-spread { display: flex; justify-content: center; align-items: center; gap: clamp(4px, .7vw, 16px); }
.mi-deal-card {
  position: relative;
  width: clamp(46px, 7vw, 118px); aspect-ratio: 120 / 200;
  opacity: 0;
}
.mi-ceremony.is-on .mi-deal-card {
  animation: dealIn 980ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 230ms + 760ms);
}
@keyframes dealIn {
  from { opacity: 0; transform: translate(0, -46vh) rotate(-26deg) scale(.5); }
  to   { opacity: 1; transform: translateY(var(--arc)) rotate(var(--rot)); }
}
.mi-ceremony-foot {
  display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2vh, 22px);
  opacity: 0; transform: translateY(12px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.mi-ceremony.is-dealt .mi-ceremony-foot { opacity: 1; transform: none; }
.mi-ceremony-note {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(11px, .78vw, 16px); letter-spacing: .16em;
  color: rgba(243,239,248,.62); text-align: center;
}
.mi-ceremony-go {
  padding: .9em 3em;
  font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(10px, .68vw, 12px); letter-spacing: .38em; text-indent: .38em;
  color: var(--lou); background: transparent;
  border: 1px solid color-mix(in srgb, var(--lou) 52%, transparent);
  border-radius: 2px; cursor: pointer;
  transition: background 380ms var(--ease), color 380ms var(--ease), letter-spacing 380ms var(--ease);
}
.mi-ceremony-go:hover, .mi-ceremony-go:focus-visible {
  background: var(--lou); color: #17100a; letter-spacing: .48em; text-indent: .48em;
}

/* ---- a prophecy landing --------------------------------------------------- */
.mi-prophecy {
  position: absolute; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.6vw, 46px);
  pointer-events: none;
  opacity: 0;
}
.mi-prophecy.is-on { animation: prophecy 4200ms var(--ease) both; }
@keyframes prophecy {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}
.mi-prophecy::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(48% 46% at 50% 50%, rgba(6,3,10,.90), rgba(6,3,10,.55) 58%, transparent 78%);
}
.mi-prophecy-card {
  position: relative;
  width: clamp(110px, 13vw, 208px); aspect-ratio: var(--card-ratio, 3 / 5);
  filter: drop-shadow(0 22px 46px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(240,198,116,.42));
  animation: prophecyCard 1400ms var(--ease) both;
}
@keyframes prophecyCard {
  from { transform: rotateY(180deg) scale(.7); opacity: 0; }
  to   { transform: rotateY(0) scale(1); opacity: 1; }
}
.mi-prophecy-copy { position: relative; max-width: 34ch; }
.mi-prophecy-kicker {
  font-weight: 800; font-size: clamp(9px, .6vw, 11px); letter-spacing: .44em;
  color: color-mix(in srgb, var(--lou) 80%, transparent); margin-bottom: .8em;
}
.mi-prophecy-name {
  font-family: var(--font-serif); font-size: clamp(20px, 2.1vw, 38px);
  line-height: 1.1; color: #f6f2ff; margin-bottom: .5em;
}
.mi-prophecy-line {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(13px, 1vw, 19px); line-height: 1.5; color: var(--lou);
}

/* =============================================================================
   CHAPTER CARD
   ========================================================================== */
.mi-chapcard {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 50%, color-mix(in srgb, var(--fill) 88%, transparent), transparent 72%),
    rgba(4,2,8,.96);
  transition: opacity 760ms var(--ease);
}
.mi-chapcard.is-on { opacity: 1; }
.mi-chapcard.is-leaving { opacity: 0; transition: opacity 860ms var(--ease); }
.mi-chapcard-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.6vh, 34px);
  padding: 0 6vw; text-align: center;
}
.mi-chapcard-rule {
  display: block; width: min(58vw, 720px); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--key) 82%, transparent), transparent);
  transform: scaleX(0);
}
.mi-chapcard.is-on .mi-chapcard-rule.top { animation: ruleGrow 1200ms var(--ease) both 180ms; }
.mi-chapcard.is-on .mi-chapcard-rule.bot { animation: ruleGrow 1200ms var(--ease) both 320ms; }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mi-chapcard-kicker {
  font-weight: 800; font-size: clamp(9px, .68vw, 13px);
  letter-spacing: .56em; text-indent: .56em;
  color: var(--accent);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
}
.mi-chapcard.is-on .mi-chapcard-kicker { animation: subIn 1000ms var(--ease) both 340ms; }

.mi-chapcard-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 6.6vw, 112px);
  line-height: 1.04;
  letter-spacing: clamp(6px, 1.3vw, 22px);
  text-indent: clamp(6px, 1.3vw, 22px);
  color: #f7f4ff;
  text-shadow:
    0 0 60px color-mix(in srgb, var(--key) 55%, transparent),
    0 0 140px color-mix(in srgb, var(--accent) 30%, transparent),
    0 4px 24px rgba(0,0,0,.9);
}
.mi-chapcard-title .mi-ch { transform: translateY(.24em); }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .mi { --pad-x: clamp(16px, 5vw, 40px); }
  .mi-lower { padding-bottom: clamp(88px, 13vh, 150px); }
  .mi-text { font-size: clamp(15px, 2.9vw, 19px); max-width: 46ch; }
  .mi-lou-text { font-size: clamp(18px, 4.6vw, 27px); max-width: 26ch; }
  .mi-hud { width: clamp(112px, 34vw, 150px); }
  .mi-portrait canvas { height: clamp(110px, 20vh, 190px); }

  /* the rail lies down across the top-right so it never collides with prose */
  .mi-rail {
    right: clamp(10px, 3vw, 18px); top: clamp(14px, 2.4vh, 24px);
    flex-direction: row-reverse; align-items: flex-start;
    transform: translateY(0) translateX(20px);
  }
  .mi-rail.is-on { transform: translateY(0) translateX(0); }
  .mi-rail.is-tucked { transform: translateY(0) translateX(20px); }
  .mi-rail-cards { flex-direction: row; gap: 3px; }
  .mi-rail-card { width: clamp(14px, 4vw, 22px); }
  .mi-rail-card:hover, .mi-rail-card:focus-visible { transform: translateY(5px) scale(1.15); }
  /* no room for the label beside the HUD on a phone — the cards say enough */
  .mi-rail-label { display: none; }
  .mi-rail-tip {
    right: 0; top: calc(100% + 8px); transform: translateY(4px); max-width: 60vw;
  }
  .mi-rail-card.is-flipped:hover .mi-rail-tip,
  .mi-rail-card.is-flipped:focus-visible .mi-rail-tip { transform: none; }

  .mi-prophecy { flex-direction: column; gap: 18px; padding: 0 8vw; text-align: center; }
  .mi-prophecy-card { width: clamp(96px, 30vw, 140px); }
  .mi-spread { gap: 2px; }
  .mi-deal-card { width: clamp(30px, 9.4vw, 58px); }
  .mi-choice-hint { font-size: 12.5px; }
  .mi-choice { padding: 12px 14px; gap: 10px; }
  .mi-choice-cost { align-self: flex-start; margin-top: .15em; }
}

@media (max-width: 560px) {
  .mi-scrim-bottom { height: 58vh; }
  .mi-lower { padding-bottom: clamp(76px, 12vh, 120px); }
  .mi-lou { bottom: clamp(20px, 3.4vh, 34px); }

  /* The title breaks to two lines on a phone — it reads as a poster, not a crop. */
  #boot { padding: 0 18px; }
  #boot-title {
    white-space: normal;
    font-size: clamp(26px, 9.4vw, 54px);
    letter-spacing: clamp(3px, 1.4vw, 9px);
    text-indent: clamp(3px, 1.4vw, 9px);
    line-height: 1.16;
  }
  #boot-title::before, #boot-title::after { width: min(84vw, 620px); }
  #boot-sub { letter-spacing: clamp(1.5px, 1vw, 5px); }
}

/* =============================================================================
   REDUCED MOTION — everything still happens, it just stops moving.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .mi-ch { opacity: 1 !important; transform: none !important; }
  body.mi-shudder #app { animation: none !important; }
  .mi-lou { filter: none !important; }
  .mi-next span { animation: none; opacity: 1; }
}