:root {
  --bg: #07060f;
  --panel: #131226;
  --card: #1c1a36;
  --ink: #f7f4ff;
  --muted: #c4bee8;
  --accent: #78f9ff;
  --hot: #ff6cb6;
  --warn: #ffc14a;
  --good: #63ff96;
  --bad: #ff514a;
  --line: #4f45a2;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 0;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(120, 249, 255, .18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 108, 182, .16), transparent 24%),
    linear-gradient(145deg, #190f35, var(--bg) 62%);
}

button { font: inherit; }
.cb-shell { max-width: 1440px; margin: 0 auto; padding: clamp(.75rem, 2.6vw, 1.2rem); }
.cb-header { display:flex; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; align-items:center; margin-bottom: 1rem; }
.cb-brand, .cb-nav a { min-height:44px; display:inline-flex; align-items:center; color: var(--accent); text-decoration:none; font-weight:900; touch-action:manipulation; text-shadow: 0 0 14px rgba(120,249,255,.45); }
.cb-nav { display:flex; gap:.75rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.hero { margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); line-height: .86; margin: .25rem 0; color: var(--hot); text-transform: uppercase; letter-spacing: -.06em; text-shadow: 5px 5px 0 #17122e, 0 0 25px rgba(255,108,182,.35); }
.hero-copy { max-width: 78ch; line-height: 1.55; color: #eee9ff; }
.eyebrow, .kicker { letter-spacing: .12em; text-transform: uppercase; color: var(--warn); font-size: .78rem; font-weight: 900; margin: 0 0 .35rem; }

.panel, .briefing-room, .economy-stage, .ending-card {
  background: linear-gradient(180deg, rgba(31,27,63,.98), rgba(18,17,37,.98));
  border: 3px solid var(--line);
  border-radius: 22px;
  padding: clamp(.9rem, 2.4vw, 1.1rem);
  box-shadow: 0 16px 50px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hidden { display:none !important; }
.setup-panel { display: grid; gap: 1rem; }
.setup-copy, .mode-details { color: var(--muted); line-height: 1.55; }
.mode-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.75rem; }
.mode-card {
  border: 2px solid #fff;
  color: var(--ink);
  background: linear-gradient(180deg, #3a3472, #282350);
  border-radius: 16px;
  min-height: 130px;
  padding: .9rem;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: .5rem;
}
.mode-card strong { color: var(--accent); font-size: 1.08rem; }
.mode-card span { color: #ded8ff; line-height: 1.35; }
.mode-card.active, .chunky.active, .action-button.selected { outline: 3px solid var(--good); box-shadow: 0 0 0 6px rgba(99,255,150,.12); }

.chunky, .mini-button {
  border: 2px solid #fff;
  color: var(--ink);
  background: #3a3472;
  border-radius: 12px;
  min-height: 44px;
  padding: .7rem .95rem;
  font-weight: 900;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow: 0 5px 0 #0b0920;
}
.chunky:hover, .mini-button:hover, .mode-card:hover, .action-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.chunky:active, .mini-button:active, .action-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b0920; }
.chunky.primary { background: linear-gradient(90deg, #24dfff, #7cff9d); color: #091125; }
.mini-button { min-height: 36px; padding: .45rem .7rem; font-size: .9rem; }

.game-layout { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 1rem; align-items: start; }
.briefing-room { position: sticky; top: 1rem; border-color: #ffcc4d; background: linear-gradient(180deg, #252040, #151124); }
.briefing-topline, .stage-topbar { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.briefing-room h2, .economy-stage h2 { margin: .1rem 0 .4rem; }
.quarter-pill { display: inline-flex; color: #151124; background: var(--warn); padding: .35rem .55rem; border-radius: 999px; font-weight: 900; margin: .2rem 0 .9rem; }
.briefing-section { border-top: 2px dashed rgba(255,255,255,.22); padding-top: .75rem; margin-top: .75rem; }
.briefing-section h3, .advisor-box h3, .lesson-card h3 { margin: 0 0 .45rem; color: var(--accent); }
.briefing-section p, .advisor-box p, .lesson-card p { color: #e9e4ff; line-height: 1.48; margin: 0; }
.advisor-box { border: 2px solid rgba(120,249,255,.75); border-radius: 16px; padding: .8rem; background: rgba(9, 20, 42, .7); box-shadow: inset 0 0 30px rgba(120,249,255,.08); }
.advisor-header { display:flex; gap:.55rem; align-items:center; }
.advisor-orb { width: 18px; height: 18px; border-radius: 999px; background: radial-gradient(circle, #fff, var(--accent) 45%, #245fff); box-shadow: 0 0 18px var(--accent); animation: pulse 1.7s infinite alternate; }
.action-list { display: grid; gap: .6rem; }
.action-button { text-align: left; border: 2px solid #574fb0; border-radius: 14px; background: linear-gradient(135deg, #302a60, #1d193b); color: var(--ink); padding: .72rem; cursor: pointer; box-shadow: 0 4px 0 #0b0920; }
.action-button strong { display:block; color: var(--warn); margin-bottom: .2rem; }
.action-button span { color: var(--muted); font-size: .92rem; line-height: 1.35; }
.aftermath { min-height: 112px; }

.economy-stage { min-width: 0; }
.score-box { border: 2px solid #3e3984; border-radius: 14px; padding: .55rem .75rem; background: rgba(0,0,0,.22); min-width: 180px; }
.score-box p { margin: .1rem 0; color: var(--muted); }
.dashboard { margin: .85rem 0; display:grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap:.65rem; }
.metric { background: var(--card); border: 2px solid #3e3984; border-radius: 14px; padding: .65rem; min-width: 0; position: relative; overflow: hidden; }
.metric::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05)); pointer-events:none; }
.metric.good { border-color: rgba(99,255,150,.75); }
.metric.warn { border-color: rgba(255,193,74,.85); }
.metric.bad { border-color: rgba(255,81,74,.85); animation: dangerBlink 1.1s infinite alternate; }
.metric-label { margin:0; color:#fff; font-weight:900; font-size:.9rem; }
.metric-value { margin:.18rem 0 .35rem; font-size:1.15rem; color: var(--accent); }
.metric-foot { margin:.35rem 0 0; color: var(--muted); font-size:.78rem; }
.bar { height: 10px; border-radius: 999px; background: #0e0d19; overflow:hidden; border: 1px solid rgba(255,255,255,.12); }
.fill { height: 100%; background: linear-gradient(90deg, #63ff96, #ffc14a, #ff514a); transition: width .35s ease; }
.metric.good .fill { background: linear-gradient(90deg, #32f7ff, #63ff96); }

.economy-view { min-height: 430px; border: 3px solid #312a72; border-radius: 22px; overflow: hidden; position: relative; background: linear-gradient(#332b7a 0%, #475fc0 50%, #17122e 51%, #0c0a19 100%); transition: background .35s ease, border-color .35s ease, filter .35s ease; }
.economy-view.stable { background: linear-gradient(#405fe1 0%, #78d7ff 50%, #29345f 51%, #16162d 100%); border-color: #63ff96; }
.economy-view.strained { background: linear-gradient(#41306d 0%, #b36f7d 50%, #34224b 51%, #160f24 100%); border-color: #ffc14a; }
.economy-view.crisis { background: linear-gradient(#1a1026 0%, #842b3d 50%, #24101f 51%, #09060c 100%); border-color: #ff514a; filter: saturate(1.25); animation: shake .55s infinite; }
.sky-noise { position:absolute; inset:0; opacity:.2; background-image: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.16) 11px, transparent 12px); pointer-events:none; }
.sun-moon { position:absolute; top:22px; right:28px; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:#ffe56f; color:#6a3a00; box-shadow:0 0 34px rgba(255,229,111,.85); font-size:1.5rem; }
.economy-view.crisis .sun-moon { background:#ff514a; color:#2b0202; box-shadow:0 0 40px rgba(255,81,74,.9); }
.ticker { position:absolute; top:0; left:0; right:0; background:#05050d; border-bottom:2px solid rgba(255,255,255,.2); color:#7cff9d; white-space:nowrap; overflow:hidden; padding:.38rem 0; font-weight:900; }
.ticker span { display:inline-block; padding-left:100%; animation: ticker 18s linear infinite; }
.headline-board { position:absolute; left:1rem; top:4.1rem; width:min(420px, calc(100% - 2rem)); background:rgba(4,4,10,.72); border:2px solid rgba(255,255,255,.22); border-radius:14px; padding:.7rem; backdrop-filter: blur(3px); z-index:2; }
.headline-board ul { margin:.2rem 0 0; padding-left:1.1rem; }
.headline-board li { margin:.28rem 0; color:#fff; line-height:1.3; }
.city { position:absolute; left:5%; right:5%; bottom:72px; display:flex; align-items:flex-end; justify-content:space-around; gap:.6rem; }
.building { width:18%; min-width:58px; background:linear-gradient(180deg, #34306d, #17142d); border:3px solid rgba(255,255,255,.18); border-bottom:0; display:grid; place-items:center; color:#fff; text-align:center; font-weight:900; box-shadow: inset 0 0 0 5px rgba(255,255,255,.04); transition: transform .3s ease, filter .3s ease; }
.bank { height:170px; }
.tower { height:245px; background-image: repeating-linear-gradient(90deg, transparent 0 16px, rgba(120,249,255,.28) 17px 24px), linear-gradient(180deg,#332d7b,#17142d); }
.homes { height:95px; }
.market { height:135px; }
.factory { height:120px; }
.economy-view.strained .building { transform: skewX(-2deg); filter: brightness(.9); }
.economy-view.crisis .building { transform: rotate(-2deg) translateY(8px); filter: brightness(.72); border-color: rgba(255,81,74,.55); }
.street { position:absolute; left:0; right:0; bottom:0; height:72px; background: repeating-linear-gradient(90deg, #222 0 55px, #292929 55px 110px); border-top:5px solid rgba(255,255,255,.18); display:flex; align-items:center; gap:8%; padding:0 8%; font-size:1.8rem; }
.person { filter: drop-shadow(0 3px 0 #000); }
.panic-mob { opacity:0; margin-left:auto; transition: opacity .2s ease; }
.economy-view.crisis .panic-mob, .economy-view.strained .panic-mob { opacity:1; }

.lower-panels { display:grid; grid-template-columns: 1.3fr .7fr; gap:.75rem; margin-top:.8rem; }
.lesson-card { background: var(--card); border: 2px solid #3e3984; border-radius: 14px; padding: .8rem; }
.event-log { max-height: 190px; overflow:auto; padding-left: 1.1rem; margin:.2rem 0 0; }
.event-log li { margin-bottom: .45rem; line-height:1.35; color:#eee9ff; }
.terms-card { border-style: dashed; }

.ending-modal { position: fixed; inset: 0; background: rgba(3,2,8,.75); display: grid; place-items: center; padding: 1rem; z-index: 20; }
.ending-card { max-width: 620px; width: min(100%, 620px); border-color: var(--warn); }
.ending-card h2 { font-size: clamp(2rem, 8vw, 4rem); margin:.1rem 0 .6rem; color:var(--hot); line-height:.95; }
.ending-score { color: var(--accent); font-weight:900; }
.action-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }

@keyframes ticker { to { transform: translateX(-100%); } }
@keyframes pulse { from { transform: scale(.9); opacity:.78; } to { transform: scale(1.08); opacity:1; } }
@keyframes dangerBlink { from { box-shadow: 0 0 0 rgba(255,81,74,0); } to { box-shadow: 0 0 18px rgba(255,81,74,.42); } }
@keyframes shake { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } }

@media (max-width: 1120px){
  .game-layout { grid-template-columns: 1fr; }
  .briefing-room { position: static; }
  .dashboard { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@media (max-width: 760px){
  .mode-grid, .lower-panels { grid-template-columns: 1fr; }
  .dashboard { grid-template-columns: 1fr; }
  .stage-topbar { display:grid; }
  .score-box { width: 100%; }
  .economy-view { min-height: 500px; }
  .headline-board { top:3.6rem; }
  .city { left:2%; right:2%; gap:.25rem; }
  .building { font-size:.72rem; }
}

@media (max-width: 440px) {
  .cb-shell { padding: .7rem; }
  .cb-header { display: grid; }
  .cb-nav { width: 100%; padding-bottom: .2rem; }
  .hero h1 { line-height: .9; }
  .panel, .briefing-room, .economy-stage { border-width: 2px; }
  .chunky, .mode-card { width: 100%; }
  .action-row { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.curriculum-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.curriculum-brief article,
.notebook dl > div,
.ending-debrief {
  border: 2px solid rgba(120, 249, 255, .25);
  border-radius: 16px;
  background: rgba(120, 249, 255, .07);
}

.curriculum-brief article {
  padding: .85rem;
}

.curriculum-brief span {
  display: inline-flex;
  margin-bottom: .55rem;
  border-radius: 999px;
  padding: .25rem .48rem;
  background: rgba(255, 193, 74, .14);
  color: var(--warn);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.curriculum-brief h3 {
  margin: 0 0 .35rem;
  color: var(--accent);
}

.curriculum-brief p {
  margin: 0;
  color: #ded8ff;
  line-height: 1.42;
}

.notebook dl {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.notebook dl > div {
  padding: .68rem;
}

.notebook dt {
  margin-bottom: .22rem;
  color: var(--warn);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.notebook dd {
  margin: 0;
  color: #f5f1ff;
  line-height: 1.4;
}

.ending-debrief {
  margin-top: 1rem;
  padding: .85rem;
}

.ending-debrief h3 {
  margin: 0 0 .45rem;
  color: var(--accent);
}

.ending-debrief ul {
  margin: 0;
  padding-left: 1.15rem;
}

.ending-debrief li {
  margin: .4rem 0;
  color: #efeaff;
  line-height: 1.42;
}

@media (max-width: 760px){
  .curriculum-brief {
    grid-template-columns: 1fr;
  }
}