/* ══════════════════════════════════════════════════════════════
   ENGINES OF GROWTH — Design System
   Based on wireframe.html, physical card aesthetics
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Editorial palette */
  --amber:      #E8AA3D;
  --teal:       #4D696D;
  --cream:      #F2F0EC;
  --rust:       #AF4F37;
  --rust-light: #E8846A;
  --ink:        #1A1A1A;
  --ink-mid:    #555;
  --ink-muted:  #777;
  --ink-faint:  #999;
  --bar-bg:     #D8D8D8;
  --border:     #d4d4d4;
  --white:      #ffffff;

  /* Physical token palette */
  --token-green:   #2DB83D;
  --token-magenta: #E91E8C;
  --token-blue:    #00AEEF;
  --token-orange:  #F5851F;
  --token-purple:  #5E2D91;

  /* Semantic aliases */
  --green:    var(--token-green);
  --magenta:  var(--token-magenta);
  --blue:     var(--token-blue);
  --orange:   var(--token-orange);
  --purple:   var(--token-purple);

  /* Negative/pressure colours */
  --neg-bg:     #FFF3F0;
  --neg-border: #E8846A;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--white); color: var(--ink); }
body {
  font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Base layout ── */
.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 24px 96px;
  animation: fadeUp 0.3s ease;
}
.inner { width: 100%; max-width: 580px; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Game screen (all in-game views) ── */
.game-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F2F0EC;
  animation: fadeUp 0.25s ease;
  padding-bottom: 68px; /* room for tab nav */
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION BAR
   ══════════════════════════════════════════════════════════════ */
.nav {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 44px;
  flex-shrink: 0;
}
.nav-back {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
}
.nav-back:hover { opacity: .75; }
.nav-pills { display: flex; gap: 5px; }
.npill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 9px;
  border-radius: 2px;
}
.npill.on { color: var(--amber); border-color: var(--amber); }

/* ══════════════════════════════════════════════════════════════
   TOKEN + BUDGET BAR
   ══════════════════════════════════════════════════════════════ */
.tok-bar {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  padding: 8px 14px;
  gap: 4px;
}
.tok-bar-lbl {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-right: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.t {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.tc {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.tv { font-size: 12px; font-weight: 800; color: #fff; line-height: 1; }
.tv.tv-low { color: #FF7B6B; }
.tl { font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.tok-sep { width: 1px; height: 30px; background: rgba(255,255,255,.1); flex-shrink: 0; margin: 0 4px; }
.budget-blk { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.budget-lbl { font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.budget-val { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; color: var(--amber); line-height: 1; }
.budget-sub { font-size: 7px; color: rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════════════════════
   PUSH BAR
   ══════════════════════════════════════════════════════════════ */
.push-bar {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.push-ct { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; color: var(--amber); line-height: 1; }
.push-lbl { font-size: 11px; color: var(--ink-mid); font-weight: 600; margin-left: 4px; }
.btn-push {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--amber);
  color: var(--ink);
  border: none;
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: background .12s;
}
.btn-push:hover { background: #D49A30; }
.btn-push.off { background: var(--border); color: var(--ink-faint); cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════
   MARKET HEADER
   ══════════════════════════════════════════════════════════════ */
.mkt-hdr-row {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mkt-hdr-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  line-height: 1.1;
}
.mkt-hdr-sub { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.pushes-badge { display: flex; align-items: baseline; gap: 0; }
.pb-num { font-size: 26px; font-weight: 800; color: var(--amber); line-height: 1; font-variant-numeric: tabular-nums; }
.pb-denom { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.btn-reroll {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 8px;
  border: 1px solid var(--orange);
  color: var(--orange);
  background: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background .12s;
  margin-top: 3px;
}
.btn-reroll:hover { background: var(--orange); color: var(--white); }
.reroll-used { font-size: 9px; color: var(--green); font-weight: 700; letter-spacing: .06em; margin-top: 3px; }

/* ══════════════════════════════════════════════════════════════
   CARD CAROUSEL
   ══════════════════════════════════════════════════════════════ */
.card-carousel {
  display: flex;
  gap: 10px;
  padding: 12px 14px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: #F2F0EC;
}
.card-carousel::-webkit-scrollbar { height: 3px; }
.card-carousel::-webkit-scrollbar-track { background: transparent; }
.card-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.card-carousel > * { scroll-snap-align: start; }
.card-carousel-vert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 16px;
  background: #F2F0EC;
}

/* ══════════════════════════════════════════════════════════════
   PHYSICAL POLICY CARD (neutral — pillar badge = colour, Roman numeral = stage)
   ══════════════════════════════════════════════════════════════ */
.phys-card {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  display: flex;
  flex-direction: column;
}
.phys-card:hover   { border-color: var(--amber); box-shadow: 0 3px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
.phys-card.selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.phys-card.pushed  { opacity: .55; pointer-events: none; }

/* Card top band — always dark */
.phys-top {
  background: var(--ink);
  padding: 5px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phys-type-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.phys-stage-circle {
  width: 18px; height: 18px;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 9px; font-weight: 700; color: #fff;
}
.phys-card .phys-badges { padding: 7px 9px 2px; display: flex; gap: 4px; flex-wrap: wrap; }
.phys-pillar-badge {
  font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; padding: 2px 6px; border-radius: 2px;
}
.phys-suite-badge {
  font-size: 7px; font-weight: 700; color: var(--teal);
  border: 1px solid var(--teal); padding: 2px 5px; border-radius: 2px;
}
.phys-card .phys-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-size: 12px; font-weight: 700;
  color: var(--ink); padding: 3px 9px 4px; line-height: 1.3;
}
.phys-card .phys-desc {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-size: 10px; color: var(--ink-mid); padding: 0 9px 6px; line-height: 1.55; flex: 1;
}
.phys-impact-band {
  background: var(--ink); padding: 3px 9px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.phys-tokens-row { display: flex; gap: 5px; padding: 7px 9px; background: #F9F8F4; flex-wrap: wrap; }
.phys-passive-row { padding: 5px 9px 7px; background: #F9F8F4; border-top: 1px solid var(--border); }
.phys-passive-lbl { font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.phys-passive-val { font-size: 9px; font-weight: 700; color: var(--green); }
.phys-suite-row {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; font-size: 9px; font-weight: 600; color: var(--teal);
  background: rgba(77,105,109,.06); border-top: 1px solid rgba(77,105,109,.15);
}
.suite-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bar-bg); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: var(--white);
}
.suite-dot.done { background: var(--teal); }
.suite-dot.curr { background: var(--amber); }
.phys-cta {
  display: flex; gap: 5px;
  padding: 6px 9px 8px;
  border-top: 2px solid var(--amber);
  background: #FFFDF5;
}
.btn-push-policy {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); border: none;
  padding: 7px; cursor: pointer; border-radius: 2px; transition: background .12s;
}
.btn-push-policy:hover { background: #D49A30; }
.btn-push-policy:disabled { opacity: .35; cursor: not-allowed; }
.btn-cancel-policy {
  font-size: 9px; color: var(--ink-faint);
  background: none; border: 1px solid var(--border);
  padding: 7px 8px; cursor: pointer; border-radius: 2px;
}
.phys-pushed-label {
  padding: 7px 9px 8px; font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); text-align: center;
}
.phys-cant-push { padding: 7px 9px 8px; font-size: 9px; color: var(--ink-faint); text-align: center; font-style: italic; }

/* Token circles */
.tok-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 30px; }
.tok-circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--white); line-height: 1;
}
.tok-circle.tok-xs { width: 20px; height: 20px; font-size: 9px; }
.tok-circle.tok-sm { width: 24px; height: 24px; font-size: 10px; }
.tok-num { font-size: 7px; font-weight: 800; color: var(--ink-mid); }
.tok-dim { opacity: .4; }
.tok-finance    { background: var(--green); }
.tok-workforce  { background: var(--magenta); }
.tok-infra      { background: var(--blue); }
.tok-innovation { background: var(--orange); }
.tok-entrep     { background: var(--purple); }
.tok-passive { font-size: 9px; font-weight: 700; color: var(--green); display: inline-block; }

/* ══════════════════════════════════════════════════════════════
   ECONOMY STRIP
   ══════════════════════════════════════════════════════════════ */
.econ-strip {
  display: flex;
  background: var(--ink);
  color: var(--white);
  padding: 8px 14px;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.econ-cell {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; padding: 0 6px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.econ-cell:last-child { border-right: none; }
.econ-lbl { font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }
.econ-v { font-size: 13px; font-weight: 800; color: var(--white); font-variant-numeric: tabular-nums; line-height: 1; }

/* ══════════════════════════════════════════════════════════════
   NEGATIVE EVENT BANNER
   ══════════════════════════════════════════════════════════════ */
.neg-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 14px;
  background: var(--neg-bg);
  border-left: 4px solid var(--neg-border);
}
.neg-icon-wrap { font-size: 16px; flex-shrink: 0; }
.neg-text {}
.neg-title { font-size: 10px; font-weight: 800; color: var(--rust); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.neg-body  { font-size: 11px; color: var(--ink-muted); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   PRESSURE ZONE
   ══════════════════════════════════════════════════════════════ */
.pres-zone {
  background: var(--white);
  border-top: 1px solid var(--border);
}
.pres-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px 3px;
}
.pres-ttl { font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--rust); }
.pres-hint { font-size: 8px; color: var(--ink-faint); }
.pres-items { display: flex; border-top: 1px solid var(--border); }
.pi {
  flex: 1; padding: 5px 8px;
  border-right: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.pi:last-child { border-right: none; }
.pi-lbl { font-size: 8px; font-weight: 600; color: var(--ink-faint); }
.pi-val { font-size: 11px; font-weight: 800; color: var(--ink); }
.pi-val.r { color: var(--rust); }
.pi-val.g { color: var(--green); }
.pi-val.o { color: var(--orange); }
.pres-bar { height: 4px; background: #E8E6E0; margin: 0 14px 2px; border-radius: 2px; overflow: hidden; }
.pres-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--rust)); }
.pres-foot { padding: 2px 14px 7px; display: flex; justify-content: space-between; font-size: 8px; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════
   TAB NAVIGATION (bottom, game screens)
   ══════════════════════════════════════════════════════════════ */
.tab-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  background: var(--ink);
  border-top: 2px solid rgba(255,255,255,.08);
  height: 56px;
}
.tab-btn {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  color: rgba(255,255,255,.4);
  border: none;
  border-right: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: color .12s, background .12s;
}
.tab-btn:last-child { border-right: none; }
.tab-btn:hover { color: rgba(255,255,255,.7); }
.tab-btn.on { color: var(--amber); background: rgba(255,255,255,.04); }

/* ══════════════════════════════════════════════════════════════
   TOKEN TRAY (fixed bottom, outside #app)
   ══════════════════════════════════════════════════════════════ */
#token-tray-root { display: none !important; position: absolute; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   INTRO SCREEN
   ══════════════════════════════════════════════════════════════ */
.intro-screen { background: var(--ink); }
.intro-hero {
  background: var(--ink);
  padding: 32px 20px 24px;
  position: relative;
}
.intro-civic-link {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}
.intro-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 10px;
}
.intro-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 52px; font-weight: 800; text-transform: uppercase;
  color: #fff; line-height: .92; letter-spacing: .01em; margin-bottom: 10px;
}
.intro-title em { color: var(--amber); font-style: normal; }
.intro-sub { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.intro-content { background: var(--white); flex: 1; }
.intro-body { padding: 20px 20px 0; }
.intro-tagline {
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-style: italic; font-size: 16px; color: var(--ink-mid);
  line-height: 1.55; margin-bottom: 16px;
}
.intro-pillars {
  display: flex; gap: 0; margin-bottom: 16px;
  border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden;
}
.ip {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 8px 4px; gap: 3px;
  border-right: 1px solid var(--border);
}
.ip:last-child { border-right: none; }
.ip-circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; font-weight: 700;
}
.ip-lbl { font-size: 6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); text-align: center; }
.intro-objectives { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.intro-obj {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 3px;
}
.iobj-n { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--amber); opacity: .6; flex-shrink: 0; line-height: 1; width: 20px; }
.iobj-t { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.iobj-d { font-size: 11px; color: var(--ink-mid); line-height: 1.5; }
.intro-btns { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 7px; }
.btn-start {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); border: none;
  padding: 14px; cursor: pointer; border-radius: 3px; width: 100%;
  transition: background .12s;
}
.btn-start:hover { background: #D49A30; }
.btn-howto {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: none; color: var(--ink-mid); border: 1.5px solid var(--border);
  padding: 11px; cursor: pointer; border-radius: 3px; width: 100%;
}
.intro-footer { text-align: center; padding-top: 10px; font-size: 9px; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════
   HOW TO PLAY SCREEN
   ══════════════════════════════════════════════════════════════ */
.htp-main-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 800; text-transform: uppercase;
  color: var(--amber); letter-spacing: .04em;
}
.htp-body { padding: 0 18px 20px; }
.htp-sec { margin-top: 16px; }
.htp-sec-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 10px;
}
.htp-item { display: flex; gap: 10px; margin-bottom: 8px; }
.htp-n { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--amber); opacity: .6; flex-shrink: 0; width: 18px; line-height: 1.1; }
.htp-t { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.htp-d { font-size: 11px; color: var(--ink-mid); line-height: 1.5; }
.htp-tok-row {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--cream); border-radius: 3px; margin-bottom: 8px; flex-wrap: wrap;
}
.htp-tok { display: flex; align-items: center; gap: 4px; }
.htp-tc {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.htp-tl { font-size: 8px; font-weight: 700; color: var(--ink-mid); }

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE SCREEN
   ══════════════════════════════════════════════════════════════ */
.ent-section-hd {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); padding: 7px 14px;
  background: #EAE8E2; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.upgrade-hd { color: var(--orange); background: #FFF9F0; border-color: #FFE5C0; }
.phys-ent-card, .phys-card.ent-card {
  width: 100%; min-width: unset;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 5px; overflow: hidden;
}
.phys-card.ent-card.phys-affordable { border-color: var(--green); }
.ent-top { display: flex; justify-content: space-between; align-items: center; }
.ent-top > div { display: flex; align-items: center; gap: 7px; }
.ent-sector-label { font-size: 7px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ent-stage-badge {
  font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px; color: #fff;
}
.ent-micro, .ent-stage-badge.micro { background: var(--green); }
.ent-small, .ent-stage-badge.small { background: var(--blue); }
.ent-medium, .ent-stage-badge.medium { background: var(--purple); }
.ent-name-row { padding: 8px 9px 2px; display: flex; justify-content: space-between; align-items: flex-start; }
.ent-affordable-label {
  font-size: 8px; font-weight: 800; color: var(--green);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--green); border-radius: 2px;
  flex-shrink: 0; margin-left: 7px; margin-top: 2px;
}
.ent-cant-label {
  font-size: 8px; font-weight: 700; color: var(--rust);
  padding: 2px 6px; border: 1px solid var(--rust-light); border-radius: 2px;
  flex-shrink: 0; margin-left: 7px; margin-top: 2px;
}
.ent-gate-row {
  display: flex; gap: 4px; padding: 6px 9px;
  background: #F7F5EF; border-top: 1px solid var(--border); flex-wrap: wrap; align-items: center;
}
.ent-gate-lbl { font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-right: 3px; }
.ent-gate-item {
  font-size: 9px; font-weight: 600; color: var(--rust);
  background: rgba(175,79,55,.07); border: 1px solid var(--rust-light);
  padding: 2px 6px; border-radius: 2px;
}
.ureq-group { padding: 7px 9px 3px; }
.ureq-lbl { font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.ureq-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ureq-chip {
  font-size: 9px; font-weight: 600; padding: 2px 7px;
  border-radius: 2px; border: 1px solid var(--border); color: var(--ink-mid);
  display: inline-flex; align-items: center; gap: 3px;
}
.ureq-chip.met { background: rgba(45,184,61,.1); border-color: var(--green); color: var(--green); }
.ureq-chip.unmet { background: rgba(175,79,55,.07); border-color: var(--rust-light); color: var(--rust); }

/* ══════════════════════════════════════════════════════════════
   MANIFESTO / ECOSYSTEM SCREEN
   ══════════════════════════════════════════════════════════════ */
.eco-passive {
  display: flex; padding: 8px 12px; gap: 6px;
  border-bottom: 1px solid var(--border); background: #F7F5EF;
}
.ep-cell { flex: 1; text-align: center; }
.ep-val { font-size: 15px; font-weight: 800; line-height: 1; margin-bottom: 2px; color: var(--bar-bg); }
.ep-val.has-income { font-weight: 800; }
.ep-lbl { font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.eco-sec {
  font-size: 8px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 13px;
  background: #F7F5EF; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
}
.pp { display: flex; border-bottom: 1px solid var(--border); background: var(--white); }
.pp-band { width: 4px; flex-shrink: 0; }
.pp-body { display: flex; gap: 8px; padding: 8px 11px; align-items: flex-start; flex: 1; }
.pp-rd { font-size: 8px; font-weight: 800; color: var(--ink-faint); flex-shrink: 0; margin-top: 2px; }
.pp-pillar { font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1px; }
.pp-name { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pp-tag { font-size: 7px; color: var(--teal); font-weight: 700; display: inline-block; margin-top: 2px; }
.pp-passive {
  padding: 7px 10px; text-align: right;
  border-left: 1px solid var(--border); background: #FAFAF6;
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
}
.pp-plbl { font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.pp-pval { font-size: 9px; font-weight: 700; color: var(--green); }
.suite-card { border: 1px solid var(--border); margin: 7px 12px; }
.sc-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #F7F5EF; border-bottom: 1px solid var(--border); }
.sc-name { font-size: 11px; font-weight: 700; color: var(--ink); }
.sc-dots { display: flex; gap: 3px; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.sdot.done { background: var(--teal); }
.sdot.curr { background: var(--amber); }
.sc-bonus { font-size: 9px; font-weight: 700; color: var(--amber); }
.sc-rows {}
.sc-row { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.sc-row:last-child { border-bottom: none; }
.sc-st { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.sc-st.done { background: var(--teal); }
.sc-st.next { background: var(--amber); }
.sc-cn { font-size: 11px; color: var(--ink); flex: 1; }
.sc-s { font-size: 9px; color: var(--ink-faint); font-weight: 600; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   OUTCOME SCREEN
   ══════════════════════════════════════════════════════════════ */
.outcome-hero { padding: 28px 20px 20px; border-bottom: 2px solid var(--amber); }
.out-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.out-title { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.out-body { font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 14px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 12px; }
.out-score { font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 52px; line-height: 1; color: var(--amber); margin-bottom: 2px; }
.out-score-lbl { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.out-bars { padding: 16px 20px; }
.ob-row { margin-bottom: 10px; }
.ob-hdr { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ob-lbl { font-size: 11px; font-weight: 700; color: var(--ink); }
.ob-pct { font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ob-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ob-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.out-policies { padding: 0 20px 16px; }
.out-sec-lbl { font-size: 8px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; margin-top: 12px; }
.out-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.out-tag { font-size: 9px; font-weight: 600; border: 1px solid var(--border); padding: 3px 8px; color: var(--ink-mid); }
.out-suite-tag { font-size: 9px; font-weight: 600; border: 1px solid var(--amber); padding: 3px 8px; color: var(--amber); }
.out-btns { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.btn-report {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--amber); color: var(--ink); border: none;
  padding: 13px; cursor: pointer; border-radius: 3px; width: 100%;
}
.btn-replay {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: none; color: var(--ink-mid); border: 1.5px solid var(--border);
  padding: 11px; cursor: pointer; border-radius: 3px; width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   MISC / LEGACY HELPERS
   ══════════════════════════════════════════════════════════════ */
.brand-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--ink); color: var(--white);
}
.brand-bar-back { font-size: 9px; color: rgba(255,255,255,.35); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.game-counter  { font-size: 10px; color: rgba(255,255,255,.4); }
.pillar-strip  { display: flex; gap: 0; background: var(--white); border-bottom: 1px solid var(--border); }
.p-unit { flex: 1; padding: 7px 6px; border-right: 1px solid var(--border); }
.p-unit:last-child { border-right: none; }
.p-label { font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.p-track { height: 3px; background: var(--bar-bg); border-radius: 2px; overflow: hidden; margin-bottom: 3px; }
.p-fill  { height: 100%; border-radius: 2px; }
.p-row   { display: flex; gap: 4px; align-items: baseline; }
.p-val   { font-size: 12px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.p-val.low { color: var(--rust); }
.p-delta { font-size: 9px; font-weight: 700; }
.p-delta.up   { color: var(--green); }
.p-delta.down { color: var(--rust); }

.btn { width: 100%; padding: 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: none; color: var(--ink-mid); border: 1.5px solid var(--border); cursor: pointer; border-radius: 3px; margin-top: 6px; }
.btn-primary { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.btn-full { display: block; text-align: center; }

.divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.label-amber { font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.label-muted { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.game-title { font-family: 'Barlow Condensed', sans-serif; font-size: 44px; font-weight: 800; text-transform: uppercase; color: var(--ink); line-height: .92; }
.game-sub   { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; }
.intro-italic { font-family: 'EB Garamond', Garamond, Georgia, serif; font-style: italic; font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 0; }
.intro-body-txt { font-size: 13px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 16px; }
.obj-card  { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); }
.obj-n     { font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 30px; line-height: 1; color: var(--amber); opacity: .5; flex-shrink: 0; width: 24px; }
.obj-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.obj-desc  { font-size: 11px; color: var(--ink-muted); line-height: 1.55; }
.giz-note  { font-size: 10px; color: var(--ink-faint); text-align: center; }
.copyright-line { font-size: 9px; color: var(--ink-faint); text-align: center; margin-top: 4px; }
.market-title { font-size: 13px; font-weight: 800; color: var(--ink); }

/* Score bar section (outcome) */
.score-bar-section { padding: 20px 24px 0; }
.score-bar-row  { margin-bottom: 12px; }
.score-bar-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.score-bar-label { font-size: 11px; font-weight: 700; color: var(--ink); }
.score-bar-pct   { font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dim-bar-wrap { height: 6px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
.dim-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* Summit outcome legacy */
.summit-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; padding: 0 24px; }
.summit-title   { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.15; margin-bottom: 12px; padding: 0 24px; }
.summit-body    { font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 16px; color: var(--ink-mid); line-height: 1.65; margin-bottom: 20px; padding: 0 24px; }


/* ══════════════════════════════════════════════════════════════
   INTRO CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════ */
.intro-content { padding: 20px 20px 0; background: var(--white); }

/* ══════════════════════════════════════════════════════════════
   GAME TITLE STRIP (round + sector band)
   ══════════════════════════════════════════════════════════════ */
.game-title-strip {
  background: var(--ink);
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.06);
}
.gts-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
}
.gts-sub { font-size: 9px; color: rgba(255,255,255,.4); margin-top: 1px; }
.gts-round-lbl { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); text-align: right; }
.gts-round-val { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--white); line-height: 1; text-align: right; }

/* ── Neg banner view button ── */
.btn-notif-view {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--rust); color: #fff; border: none;
  padding: 5px 10px; cursor: pointer; border-radius: 2px;
  flex-shrink: 0; align-self: center;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION SCREEN
   ══════════════════════════════════════════════════════════════ */
.notif-eye { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--white); }
.notif-bell { width: 28px; height: 28px; background: var(--rust); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; flex-shrink: 0; }
.notif-from { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); }
.notif-org  { font-size: 10px; color: var(--ink-mid); font-weight: 600; }
.notif-card { margin: 12px 14px; background: var(--white); border: 1.5px solid var(--border); border-radius: 5px; overflow: hidden; }
.notif-ch   { background: var(--rust); padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.notif-av   { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.notif-slbl { font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1px; }
.notif-sname { font-size: 12px; font-weight: 700; color: #fff; }
.notif-body { padding: 12px; }
.notif-etype { font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-bottom: 5px; }
.notif-title { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
.notif-desc  { font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 12px; color: var(--ink-mid); line-height: 1.6; margin-bottom: 10px; }
.notif-cost  { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #FFF3F0; border: 1px solid #F5C5B8; border-radius: 3px; margin-bottom: 2px; }
.notif-cost-ico { font-size: 18px; }
.notif-cost-lbl { font-size: 8px; font-weight: 700; color: var(--rust); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1px; }
.notif-cost-val { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; color: var(--rust); line-height: 1; }
.notif-cost-sub { font-size: 8px; color: var(--ink-faint); }
.notif-dec  { display: flex; gap: 7px; padding: 10px 12px 12px; }
.btn-approve { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; border: none; padding: 10px; cursor: pointer; border-radius: 2px; }
.btn-approve:hover { background: #333; }
.btn-defer   { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: none; color: var(--ink-mid); border: 1.5px solid var(--border); padding: 10px; cursor: pointer; border-radius: 2px; }
.notif-meters { margin: 0 14px 12px; border: 1.5px solid var(--orange); border-radius: 4px; padding: 10px 11px; background: #FFF8F0; }
.nm-hdr  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.nm-lbl  { font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.nm-hint { font-size: 7px; color: var(--ink-faint); }
.nm-row  { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.nm-name { font-size: 8px; font-weight: 700; color: var(--ink-mid); width: 70px; flex-shrink: 0; }
.nm-track { flex: 1; height: 5px; background: #E8E4DC; border-radius: 3px; overflow: hidden; }
.nm-fill  { height: 100%; border-radius: 3px; background: var(--orange); }
.nm-fill.hi { background: var(--rust); }
.nm-val  { font-size: 9px; font-weight: 800; color: var(--ink-mid); width: 28px; text-align: right; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE SPLIT LAYOUT
   ══════════════════════════════════════════════════════════════ */
.s3 { display: flex; flex: 1; background: var(--cream); min-height: 0; overflow: hidden; }
.ind-panel { flex: 1; border-right: 2px solid var(--border); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.eco-panel { width: 148px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-hdr { padding: 9px 11px; background: var(--ink); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.panel-ttl { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.panel-ct  { font-size: 9px; color: rgba(255,255,255,.45); font-weight: 600; }
.ind-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px; overflow-y: auto; flex: 1; }
.ic { background: var(--white); border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; cursor: pointer; transition: border-color .15s; display: flex; flex-direction: column; }
.ic.aff  { border-color: var(--green); }
.ic:hover { border-color: var(--amber); }
.ic-top  { background: var(--ink); padding: 5px 6px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.ic-sec  { font-size: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ic-stg  { font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 4px; border-radius: 1px; color: #fff; background: var(--green); }
.ic-stg.sm { background: var(--blue); }
.ic-stg.md { background: var(--purple); }
.ic-name { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 10px; font-weight: 700; color: var(--ink); padding: 4px 6px 1px; line-height: 1.2; flex: 1; }
.ic-wk   { font-size: 7px; color: var(--ink-faint); padding: 0 6px 3px; }
.ic-costs { display: flex; gap: 3px; padding: 3px 6px 4px; flex-wrap: wrap; }
.icc     { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 700; flex-shrink: 0; }
.ic-cta  { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--amber); text-align: center; padding: 5px; cursor: pointer; border: none; width: 100%; flex-shrink: 0; }
.ic-cta.can   { background: var(--green); color: #fff; }
.ic-cta.owned { background: var(--teal); color: #fff; cursor: default; }
.ind-bud { padding: 9px 10px; border-top: 1px solid var(--border); background: var(--white); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.ind-bud-lbl { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ind-bud-val { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 800; color: var(--amber); line-height: 1; }

/* Ecosystem panel meters */
.eco-ms  { padding: 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.em      { background: var(--white); border: 1.5px solid var(--border); border-radius: 3px; padding: 5px 7px; flex-shrink: 0; }
.em-hdr  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.em-name { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 9px; font-weight: 700; color: var(--ink); }
.em-val  { font-size: 9px; font-weight: 800; }
.em-track { height: 5px; background: #E8E4DC; border-radius: 3px; overflow: hidden; }
.em-fill  { height: 100%; border-radius: 3px; transition: width .4s; }
.em-sub  { font-size: 6px; color: var(--ink-faint); margin-top: 2px; }
.eco-hid { padding: 6px 7px; border-top: 1px solid var(--border); background: #FAFAFA; flex-shrink: 0; }
.eco-hid-lbl { font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.eco-hid-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.eco-hid-n   { font-size: 7px; color: var(--ink-mid); width: 40px; flex-shrink: 0; }
.eco-hid-trk { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.eco-hid-fill { height: 100%; background: rgba(77,105,109,.5); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP / WIDE VIEWPORT  (≥ 680px)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 680px) {

  /* ── Body: dark frame behind the game ── */
  html, body {
    background: #111;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
  }
  body { padding: 32px 0 80px; }

  /* ── App container: centered phone-width frame ── */
  #app {
    width: 480px;
    min-height: calc(100vh - 64px);
    box-shadow: 0 12px 64px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.4);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  /* ── Tab nav: match container width and position ── */
  .tab-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 480px;
    border-radius: 0 0 10px 10px;
  }

  /* ── Game screen: fill container ── */
  .game-screen {
    min-height: calc(100vh - 64px);
  }

  /* ── Policy cards: 2×2 grid instead of horizontal scroll ── */
  .card-carousel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-x: visible;
    gap: 8px;
    padding: 12px 14px 16px;
  }
  .card-carousel > * {
    scroll-snap-align: unset;
  }
  .phys-card {
    width: 100%;
    min-width: unset;
  }

  /* ── Vertical carousel: 2-col on desktop too ── */
  .card-carousel-vert {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px 16px;
  }

  /* ── Nav pills: slightly larger touch target ── */
  .npill { font-size: 10px; padding: 5px 10px; cursor: pointer; }
  .nav-back { font-size: 11px; }

  /* ── Token bar: token circles slightly larger ── */
  .tc { width: 30px; height: 30px; font-size: 13px; }
  .tv { font-size: 13px; }
  .budget-val { font-size: 22px; }

  /* ── Push bar: bigger type ── */
  .push-ct { font-size: 22px; }
  .btn-push { font-size: 14px; padding: 10px 20px; }

  /* ── Market header ── */
  .mkt-hdr-title { font-size: 19px; }

  /* ── Game title strip ── */
  .gts-name { font-size: 12px; }
  .gts-sub  { font-size: 10px; }
  .gts-round-val { font-size: 24px; }

  /* ── Intro hero: slightly bigger title ── */
  .intro-title { font-size: 60px; }
  .intro-civic-link { font-size: 10px; }

  /* ── Econ strip: more breathing room ── */
  .econ-v { font-size: 14px; }

  /* ── Enterprise split panel: wider eco column ── */
  .eco-panel { width: 160px; }

  /* ── Outcome ── */
  .out-score { font-size: 72px; }
  .ob-row { margin-bottom: 5px; }

  /* ── How-to-play body ── */
  .htp-body { padding: 12px 20px 0; }

  /* ── Manifesto passive income cells ── */
  .ep-val { font-size: 18px; }

  /* ── Pressure zone ── */
  .pi-val { font-size: 12px; }
  .pi-lbl { font-size: 9px; }

}

/* ══════════════════════════════════════════════════════════════
   LARGE DESKTOP  (≥ 900px)  — widen container a little
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  #app { width: 520px; }
  .tab-nav { width: 520px; }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL SCALE-UP — improve readability across all screens
   ══════════════════════════════════════════════════════════════ */

/* Token bar circles + values */
.tc           { width: 34px; height: 34px; font-size: 15px; }
.tv           { font-size: 15px; }
.tl           { font-size: 8px; }
.tok-bar-lbl  { font-size: 9px; }
.tok-bar      { padding: 10px 14px; gap: 6px; }
.budget-val   { font-size: 22px; }
.budget-lbl   { font-size: 8px; }
.budget-sub   { font-size: 8px; }

/* Token circles on cards */
.tok-circle   { width: 30px; height: 30px; font-size: 13px; }
.tok-circle.tok-xs { width: 20px; height: 20px; font-size: 9px; }
.tok-num      { font-size: 10px; font-weight: 800; }

/* Policy card text */
.phys-card .phys-title { font-size: 14px; padding: 5px 10px 4px; }
.phys-card .phys-desc  { font-size: 11px; padding: 0 10px 8px; line-height: 1.5; }
.phys-type-label       { font-size: 9px; }
.phys-stage-circle     { width: 22px; height: 22px; font-size: 11px; }
.phys-pillar-badge     { font-size: 8px; padding: 3px 8px; }
.phys-suite-badge      { font-size: 8px; padding: 3px 7px; }
.phys-impact-band      { font-size: 8px; padding: 4px 10px; }
.phys-tokens-row       { padding: 8px 10px; gap: 7px; }
.phys-pushed-label     { font-size: 10px; padding: 9px 10px; }
.phys-cant-push        { font-size: 10px; }

/* Push bar */
.push-ct  { font-size: 24px; }
.push-lbl { font-size: 12px; }
.btn-push { font-size: 14px; padding: 10px 18px; }

/* Market header */
.mkt-hdr-title { font-size: 18px; }
.mkt-hdr-sub   { font-size: 11px; margin-top: 3px; }
.pb-num        { font-size: 28px; }
.pb-denom      { font-size: 14px; }

/* Nav */
.nav-back { font-size: 11px; }
.npill    { font-size: 10px; padding: 5px 10px; }
.tab-btn  { font-size: 12px; }

/* Economy strip */
.econ-lbl { font-size: 8px; }
.econ-v   { font-size: 14px; }

/* Pressure zone */
.pres-ttl { font-size: 9px; }
.pres-hint { font-size: 9px; }
.pi-lbl   { font-size: 9px; }
.pi-val   { font-size: 13px; }
.pres-foot { font-size: 9px; }

/* Intro screen */
.intro-tagline {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--ink-mid);
  margin-bottom: 18px;
  line-height: 1.5;
}
.intro-objectives { gap: 8px; margin-bottom: 24px; }
.intro-content { padding: 22px 20px 0; background: var(--white); }

/* How to play */
.htp-sec-lbl { font-size: 9px; }
.htp-t       { font-size: 14px; }
.htp-d       { font-size: 13px; line-height: 1.55; }
.htp-n       { font-size: 18px; min-width: 28px; }
.htp-tl      { font-size: 11px; }

/* Eco/manifesto */
.eco-sec { font-size: 10px; padding: 10px 14px 7px; }
.pp-name { font-size: 13px; }
.pp-pillar { font-size: 9px; }
.pp-pval { font-size: 11px; }
.ep-val  { font-size: 18px; }
.ep-lbl  { font-size: 9px; }
.sc-name { font-size: 13px; }
.sc-bonus { font-size: 10px; }
.sc-cn   { font-size: 12px; }
.sc-s    { font-size: 10px; }

/* Outcome */
.out-eyebrow   { font-size: 11px; }
.out-title     { font-size: 32px; }
.out-body      { font-size: 14px; line-height: 1.55; }
.out-score     { font-size: 72px; }
.out-score-lbl { font-size: 12px; }
.ob-lbl        { font-size: 13px; }
.ob-pct        { font-size: 12px; }
.ob-wrap       { height: 8px; }
.out-sec-lbl   { font-size: 10px; letter-spacing: .12em; }
.out-tag, .out-suite-tag { font-size: 11px; }

/* Notification */
.notif-title { font-size: 18px; }
.notif-desc  { font-size: 13px; }
.notif-from  { font-size: 10px; }
.notif-org   { font-size: 11px; }
.nm-name     { font-size: 9px; }
.nm-val      { font-size: 10px; }
.nm-lbl      { font-size: 9px; }

/* Enterprise split panel */
.panel-ttl   { font-size: 12px; }
.panel-ct    { font-size: 10px; }
.ic-name     { font-size: 11px; }
.ic-wk       { font-size: 8px; }
.ic-cta      { font-size: 10px; padding: 7px; }
.ic-stg      { font-size: 7px; }
.ic-sec      { font-size: 7px; }
.icc         { width: 18px; height: 18px; font-size: 9px; }
.em-name     { font-size: 10px; }
.em-val      { font-size: 10px; }
.em-sub      { font-size: 7px; }
.eco-hid-lbl { font-size: 8px; }
.eco-hid-n   { font-size: 8px; }
.ind-bud-lbl { font-size: 9px; }
.ind-bud-val { font-size: 20px; }

/* Game title strip */
.gts-name { font-size: 12px; letter-spacing: .18em; }
.gts-sub  { font-size: 10px; }
.gts-round-val { font-size: 24px; }
.gts-round-lbl { font-size: 9px; }