/* ==========================================================================
   FINANCE FORWARD — design tokens
   Display: Fraunces (soft, warm, editorial serif — used with restraint)
   Body/UI: Inter
   Data/numbers: IBM Plex Mono (financial figures get a distinct data voice)
   ========================================================================== */
:root{
  --burgundy: #6B1F2B;
  --burgundy-dark: #42131B;
  --beige: #F4EBDD;
  --beige-light: #FBF7F0;
  --rose: #A66A6A;

  --ink: #2B1A1D;
  --ink-soft: #6E5A57;
  --line: rgba(66, 19, 27, 0.12);

  --gain: #4B6B4E;      /* muted sage — investment gains */
  --gain-bg: #E7EEE3;
  --loss: #8C3B3B;      /* muted brick — losses/debt, distinct from primary burgundy */
  --loss-bg: #F3E2DE;
  --gold: #B08A3E;      /* muted gold — achievements/highlights */

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(66,19,27,0.06), 0 12px 28px -12px rgba(66,19,27,0.18);
  --shadow-card-hover: 0 4px 10px rgba(66,19,27,0.10), 0 24px 48px -16px rgba(66,19,27,0.26);
  --shadow-pop: 0 20px 60px -12px rgba(66,19,27,0.35);

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--beige-light);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family:'Fraunces', serif; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible{
  outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 6px;
}
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- layout scaffolding ---------- */
.screen{
  display:none;
  min-height:100vh;
  width:100%;
}
.screen.active{ display:block; }

/* ---------- eyebrow / section titles ---------- */
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--burgundy);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-title{ font-size: clamp(28px, 4vw, 44px); font-weight: 600; color: var(--burgundy-dark); }
.section-sub{ margin-top:10px; color: var(--ink-soft); font-size:16px; max-width:560px; }

/* ---------- buttons ---------- */
.btn{
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn--primary{ background: var(--burgundy); color: var(--beige-light); box-shadow: 0 8px 20px -6px rgba(107,31,43,0.55); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -8px rgba(107,31,43,0.6); background: var(--burgundy-dark); }
.btn--ghost{ background: transparent; color: var(--burgundy); border: 1.5px solid var(--line); }
.btn--ghost:hover{ background: rgba(107,31,43,0.06); }
.btn--xl{ padding: 18px 40px; font-size: 17px; }
.btn--lg{ padding: 16px 34px; font-size: 16px; }
.btn--sm{ padding: 9px 18px; font-size: 13px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

/* ==========================================================================
   OPENING
   ========================================================================== */
.screen--opening.active{ display:flex; }
.screen--opening{
  position:relative;
  align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(166,106,106,0.28), transparent 60%),
    radial-gradient(100% 80% at 85% 90%, rgba(107,31,43,0.16), transparent 60%),
    var(--beige-light);
  text-align:center;
  padding: 24px;
}
.opening-glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 40%, rgba(107,31,43,0.06), transparent 70%);
}
.opening-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.brand-title{
  font-size: clamp(56px, 11vw, 128px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--burgundy-dark);
  margin: 18px 0 20px;
}
.tagline{ font-size: clamp(16px, 2vw, 20px); color: var(--rose); font-style: italic; font-family:'Fraunces', serif; margin-bottom: 44px; }
[data-anim="fade-up"]{ opacity:0; transform: translateY(18px); animation: fadeUp .8s var(--ease) forwards; }
.opening-content > *:nth-child(1){ animation-delay: .05s; }
.opening-content > *:nth-child(2){ animation-delay: .18s; }
.opening-content > *:nth-child(3){ animation-delay: .34s; }
.opening-content > *:nth-child(4){ animation-delay: .5s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ==========================================================================
   CHARACTER SELECT
   ========================================================================== */
.screen--select{ padding: 64px 6vw 100px; }
.select-header{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.select-header .section-sub{ margin-left:auto; margin-right:auto; }
.character-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
}
.char-card{
  background: var(--beige);
  border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-card);
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(66,19,27,0.05);
}
.char-card:hover{ transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-card-hover); }
.char-card:hover .char-portrait{ transform: scale(1.04) rotate(-1deg); }
.char-portrait{ width:120px; height:120px; margin: 0 auto 18px; transition: transform .4s var(--ease); }
.char-card h3{ font-size:22px; text-align:center; color: var(--burgundy-dark); }
.char-card .char-meta{ text-align:center; color: var(--ink-soft); font-size:13px; margin-top:4px; font-family:'IBM Plex Mono', monospace; letter-spacing:.02em;}
.char-card .char-blurb{ text-align:center; margin-top:14px; font-size:14.5px; color: var(--ink); line-height:1.5; min-height:44px; }
.char-stats{ display:flex; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.char-stats div{ text-align:center; }
.char-stats .val{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:14px; color: var(--burgundy); }
.char-stats .lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-top:2px; }
.char-diff{
  position:absolute; top:20px; right:20px;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--rose); color:#fff;
}

/* ==========================================================================
   CHARACTER DETAIL
   ========================================================================== */
.screen--detail.active{ display:flex; }
.screen--detail{ align-items:center; justify-content:center; padding: 60px 5vw; background: var(--beige-light); }
.detail-card{
  max-width: 880px; width:100%;
  background: var(--beige);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 48px clamp(24px,5vw,64px);
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  animation: popIn .5s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform: translateY(24px) scale(.98);} to{ opacity:1; transform:none; } }
.detail-card .char-portrait{ width:160px; height:160px; }
.detail-name{ font-size: clamp(26px,4vw,36px); color: var(--burgundy-dark); }
.detail-meta{ font-family:'IBM Plex Mono', monospace; color: var(--rose); font-size:13px; margin-top:4px; letter-spacing:.03em;}
.detail-backstory{ margin-top:16px; font-size:15.5px; line-height:1.65; color: var(--ink); max-width: 56ch; }
.detail-facts{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top:24px; }
.fact{ background: var(--beige-light); border-radius: var(--radius-sm); padding: 12px 16px; }
.fact .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.fact .val{ font-family:'IBM Plex Mono', monospace; font-weight:600; color:var(--burgundy); font-size:16px; margin-top:2px; }
.detail-challenge{ margin-top:20px; font-size:14px; color:var(--ink-soft); font-style:italic; }
.detail-actions{ margin-top:28px; display:flex; gap:14px; grid-column: 1/-1; }
@media (max-width: 640px){ .detail-card{ grid-template-columns: 1fr; text-align:center; } .detail-facts{grid-template-columns:1fr 1fr;} .detail-actions{justify-content:center;} }

/* ==========================================================================
   DASHBOARD / HUD
   ========================================================================== */
.screen--dashboard.active{ display:flex; }
.screen--dashboard{ flex-direction:column; min-height:100vh; }
.hud{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding: 16px clamp(16px,3vw,36px);
  background: var(--beige-light);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 20;
}
.hud-character{ display:flex; align-items:center; gap:12px; min-width:170px; }
.hud-character .char-portrait{ width:44px; height:44px; }
.hud-character .name{ font-weight:700; font-size:14.5px; color: var(--burgundy-dark); }
.hud-character .role{ font-size:11.5px; color: var(--ink-soft); }
.hud-nav{ display:flex; gap:4px; background: var(--beige); padding:5px; border-radius: var(--radius-pill); overflow-x:auto; }
.hud-nav__item{
  padding: 9px 16px; border-radius: var(--radius-pill); font-size:13.5px; font-weight:600; color: var(--ink-soft);
  white-space:nowrap; transition: all .25s var(--ease);
}
.hud-nav__item.active{ background: var(--burgundy); color:#fff; box-shadow: 0 4px 10px -2px rgba(107,31,43,0.4); }
.hud-nav__item:hover:not(.active){ background: rgba(107,31,43,0.08); }
.hud-month{ font-family:'IBM Plex Mono', monospace; text-align:right; min-width:150px; }
.hud-month .m-name{ font-weight:700; color:var(--burgundy-dark); font-size:15px; }
.hud-month .m-idx{ font-size:11px; color: var(--ink-soft); }

.hud-stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:14px; padding: 18px clamp(16px,3vw,36px) 6px;
}
.stat-chip{
  background: var(--beige); border-radius: var(--radius-md); padding: 14px 18px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: var(--shadow-card);
  position:relative;
}
.stat-chip.emph{ background: var(--burgundy); color:#fff; transform: scale(1.02); }
.stat-chip .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color: var(--ink-soft); }
.stat-chip.emph .lbl{ color: rgba(255,255,255,0.7); }
.stat-chip .val{ font-family:'IBM Plex Mono', monospace; font-size:22px; font-weight:600; margin-top:4px; color: var(--burgundy-dark); }
.stat-chip.emph .val{ color:#fff; }
.stat-chip .delta{ font-size:11.5px; font-family:'IBM Plex Mono', monospace; margin-top:2px; }
.stat-chip .delta.up{ color: var(--gain); }
.stat-chip .delta.down{ color: var(--loss); }
.stat-chip.emph .delta.up{ color:#CFE3D0; }
.stat-chip.emph .delta.down{ color:#F0CFC7; }
.stat-chip .val.bump{ animation: bump .5s var(--ease); }
@keyframes bump{ 0%{ transform: scale(1);} 40%{ transform: scale(1.16); } 100%{ transform: scale(1); } }

.tab-panels{ flex:1; padding: 20px clamp(16px,3vw,36px) 40px; }
.tab-panel{ display:none; animation: fadeIn .35s var(--ease); }
.tab-panel.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }

.hud-footer{
  position: sticky; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px clamp(16px,3vw,36px);
  background: linear-gradient(0deg, var(--beige-light) 60%, rgba(251,247,240,0));
  border-top: 1px solid var(--line);
}
.chapter-tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--rose); }
.chapter-tag b{ color: var(--burgundy); }

/* ---------- card grid inside panels ---------- */
.grid-2{ display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 880px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

.panel-card{
  background: var(--beige); border-radius: var(--radius-lg); padding: 24px 26px;
  box-shadow: var(--shadow-card); margin-bottom:20px;
}
.panel-card h3{ font-size:18px; color: var(--burgundy-dark); margin-bottom:4px; }
.panel-card .card-sub{ font-size:13px; color: var(--ink-soft); margin-bottom:16px; }

/* dimensions */
.dim-row{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.dim-row:last-child{ margin-bottom:0; }
.dim-label{ width:120px; flex-shrink:0; font-size:13.5px; font-weight:600; color: var(--ink); }
.dim-bar{ flex:1; height:9px; border-radius: var(--radius-pill); background: rgba(66,19,27,0.08); overflow:hidden; }
.dim-bar__fill{ height:100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--rose), var(--burgundy)); transition: width .8s var(--ease); }
.dim-val{ width:32px; text-align:right; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color: var(--burgundy); }
.dim-note{ font-size:11.5px; color: var(--ink-soft); margin-top:2px; width:100%; }

/* events / upcoming */
.mini-event{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.mini-event:last-child{ border-bottom:none; }
.mini-event .tag{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color: var(--rose); font-weight:700; }

/* goals */
.goal-card{ background: var(--beige); border-radius: var(--radius-lg); padding:20px 22px; box-shadow: var(--shadow-card); margin-bottom:16px; }
.goal-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.goal-top h4{ font-size:15.5px; color: var(--burgundy-dark); }
.goal-top .goal-nums{ font-family:'IBM Plex Mono', monospace; font-size:13px; color: var(--ink-soft); }
.goal-bar{ height:10px; border-radius:var(--radius-pill); background: rgba(66,19,27,0.08); overflow:hidden; }
.goal-bar__fill{ height:100%; background: linear-gradient(90deg, var(--gain), #6E9270); transition: width 1s var(--ease); border-radius: var(--radius-pill); }
.goal-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.goal-form input{ flex:1; min-width:140px; padding:12px 16px; border-radius: var(--radius-pill); border:1.5px solid var(--line); background: var(--beige-light); font-family: inherit; font-size:14px; }
.goal-form input:focus{ outline:2px solid var(--burgundy); outline-offset:1px; }

/* skills */
.skill-card{ background: var(--beige); border-radius: var(--radius-lg); padding:22px; box-shadow: var(--shadow-card); }
.skill-name{ font-weight:700; color: var(--burgundy-dark); font-size:15px; }
.skill-level{ font-family:'IBM Plex Mono', monospace; font-size:12px; color: var(--rose); margin:4px 0 10px; }
.skill-track{ display:flex; gap:5px; }
.skill-pip{ flex:1; height:7px; border-radius:4px; background: rgba(66,19,27,0.1); }
.skill-pip.on{ background: var(--burgundy); }

/* achievements */
.ach-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.ach-badge{ background: var(--beige); border-radius: var(--radius-md); padding:16px; text-align:center; box-shadow: var(--shadow-card); opacity:.35; filter: grayscale(1); transition: all .4s var(--ease); }
.ach-badge.unlocked{ opacity:1; filter:none; }
.ach-badge .icon{ font-size:26px; }
.ach-badge .name{ font-size:12px; font-weight:700; margin-top:6px; color: var(--burgundy-dark); }

/* journey / timeline */
.timeline{ position:relative; padding-left: 28px; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: var(--line); }
.tl-item{ position:relative; padding: 4px 0 22px; }
.tl-item::before{ content:''; position:absolute; left:-28px; top:6px; width:12px; height:12px; border-radius:50%; background: var(--burgundy); border:3px solid var(--beige-light); }
.tl-item .tl-month{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color: var(--rose); font-weight:700; }
.tl-item .tl-title{ font-size:15px; font-weight:600; color: var(--ink); margin-top:2px; }
.tl-item .tl-detail{ font-size:13px; color: var(--ink-soft); margin-top:2px; }

/* investing */
.alloc-row{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.alloc-row label{ width:90px; font-size:13.5px; font-weight:600; flex-shrink:0; }
.alloc-row input[type=range]{ flex:1; accent-color: var(--burgundy); }
.alloc-row .alloc-val{ width:48px; text-align:right; font-family:'IBM Plex Mono', monospace; font-size:13px; }
.port-chart{ display:flex; height:16px; border-radius: var(--radius-pill); overflow:hidden; margin: 14px 0; }
.port-chart div{ transition: width .6s var(--ease); }
.disclaimer{ font-size:11.5px; color: var(--ink-soft); font-style:italic; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }

/* purchase options */
.option-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:16px; }
.option-card{ background: var(--beige-light); border-radius: var(--radius-md); padding:18px; border: 1.5px solid var(--line); cursor:pointer; transition: all .25s var(--ease); }
.option-card:hover{ border-color: var(--burgundy); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.option-card h4{ font-size:15px; color: var(--burgundy-dark); }
.option-card .price{ font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:700; color:var(--burgundy); margin:6px 0; }
.option-card .opt-note{ font-size:12px; color: var(--ink-soft); line-height:1.5; }

/* ==========================================================================
   EVENT OVERLAY (emergencies, market events, purchases)
   ========================================================================== */
.screen--event.active{ display:flex; }
.screen--event{
  position: fixed; inset:0; z-index: 100;
  background: var(--burgundy-dark);
  align-items:center; justify-content:center;
  padding: 5vh 5vw;
}
.event-scene{
  max-width: 720px; width:100%;
  background: var(--beige-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: clamp(28px,5vw,52px);
  text-align:center;
  animation: sceneIn .55s var(--ease);
  max-height: 90vh; overflow-y:auto;
}
@keyframes sceneIn{ from{ opacity:0; transform: scale(.92) translateY(24px);} to{ opacity:1; transform:none; } }
.event-scene .char-portrait{ width:110px; height:110px; margin:0 auto 20px; }
.event-tag{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--loss); font-weight:700; }
.event-tag.market{ color: var(--rose); }
.event-tag.milestone{ color: var(--gain); }
.event-title{ font-size: clamp(24px,4vw,34px); color: var(--burgundy-dark); margin: 10px 0 6px; }
.event-body{ font-size:15.5px; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 6px; line-height:1.55; }
.event-cost{ font-family:'IBM Plex Mono', monospace; font-size:28px; font-weight:700; color: var(--loss); margin: 16px 0; }
.event-choices{ display:flex; flex-direction:column; gap:12px; margin-top:22px; text-align:left; }
.choice-btn{
  background: var(--beige); border-radius: var(--radius-md); padding: 16px 20px;
  border:1.5px solid var(--line); transition: all .25s var(--ease); text-align:left;
}
.choice-btn:hover{ border-color: var(--burgundy); background:#fff; transform: translateX(4px); }
.choice-btn h4{ font-size:15px; color: var(--burgundy-dark); margin-bottom:4px; }
.choice-btn .choice-effects{ font-size:12.5px; color: var(--ink-soft); }
.why-box{ margin-top: 22px; background: var(--beige); border-radius: var(--radius-md); padding:18px 20px; text-align:left; }
.why-box .lbl{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color: var(--burgundy); font-weight:700; }
.why-box p{ font-size:14px; color: var(--ink); margin-top:6px; line-height:1.55; }

/* ==========================================================================
   TOASTS (money changes / achievements)
   ========================================================================== */
#toast-layer{ position: fixed; top: 20px; right: 20px; z-index: 200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  background: var(--burgundy); color:#fff; padding: 12px 20px; border-radius: var(--radius-pill);
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:14px;
  box-shadow: var(--shadow-pop);
  animation: toastIn .4s var(--ease), toastOut .4s var(--ease) 2.6s forwards;
  display:flex; align-items:center; gap:8px;
}
.toast.achievement{ background: var(--gold); }
@keyframes toastIn{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform: translateX(30px);} }

/* ==========================================================================
   ENDING
   ========================================================================== */
.screen--ending{ background: var(--burgundy-dark); min-height:100vh; padding: 8vh 6vw; }
.ending-content{ max-width: 920px; margin:0 auto; color: var(--beige-light); }
.ending-content .eyebrow{ color: var(--rose); }
.ending-content h1{ font-size: clamp(36px,6vw,64px); color:#fff; margin-bottom:10px;}
.ending-content .sub{ color: rgba(251,247,240,0.7); font-size:16px; margin-bottom: 44px; }
.end-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:40px; }
.end-stat{ background: rgba(251,247,240,0.06); border: 1px solid rgba(251,247,240,0.14); border-radius: var(--radius-md); padding:18px; }
.end-stat .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: rgba(251,247,240,0.55); }
.end-stat .val{ font-family:'IBM Plex Mono', monospace; font-size:24px; font-weight:700; margin-top:6px; }
.end-stat .val.gain{ color:#9FCBA0; }
.end-stat .val.loss{ color:#E3A79C; }
.end-section{ margin-bottom: 40px; }
.end-section h2{ font-size:22px; color:#fff; margin-bottom:18px; }
.end-cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.end-card{ background: rgba(251,247,240,0.06); border:1px solid rgba(251,247,240,0.14); border-radius: var(--radius-md); padding:20px; }
.end-card .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--rose); font-weight:700; }
.end-card .txt{ margin-top:8px; font-size:15px; line-height:1.5; }
.alt-future{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alt-col{ background: rgba(251,247,240,0.06); border-radius: var(--radius-lg); padding:26px; border:1px solid rgba(251,247,240,0.14); }
.alt-col.highlight{ border-color: var(--gold); background: rgba(176,138,62,0.12); }
.alt-col h3{ color:#fff; font-size:17px; margin-bottom:14px; }
.alt-col .big{ font-family:'IBM Plex Mono', monospace; font-size:32px; font-weight:700; color:#fff; }
@media (max-width:700px){ .alt-future{ grid-template-columns:1fr; } }
.end-note{ margin-top:18px; font-size:13px; color: rgba(251,247,240,0.55); font-style:italic; }
.end-actions{ margin-top: 40px; display:flex; gap:14px; }

/* ---------- scrollbar polish ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background: var(--rose); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }