@import url('https://fonts.googleapis.com/css2?family=Bungee&family=VT323&family=Share+Tech+Mono&display=swap');

/* ── TOKENS ── */
:root {
  --bg:       #02040a; /* Darkest Navy Space */
  --bg-panel: #060a16; 
  --bg-card:  #0a1224; 
  --bg-hover: #121f3a;
  
  --green:    #4dd2ff; /* Icy Cyan */
  --green-dim:#1a6b8c;
  --green-glow: none;
  
  --amber:    #e5c07b; /* Pale Gold */
  --amber-dim:#8c754d;
  
  --red:      #ff4d4d; /* Flat Red */
  --red-dim:  #8c1a1a;
  
  --cyan:     #5c8a8a; /* Slate */
  --purple:   #9ca3af; /* Silver/Grey */
  
  --txt:      #e2e8f0; /* Crisp Slate White */
  --txt-dim:  #94a3b8;
  
  --border:   #1e293b; 
  --border-hi:#334155;
  
  --font-primary: 'Jura', sans-serif;
  --font-secondary: 'Rajdhani', sans-serif;
  --header-h: 60px; --sidebar-w: 240px;
  --trans: .2s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; font-family: var(--font-mono); }

#bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#app, #start-screen, #ending-screen { position: relative; z-index: 10; }

/* ── MINIMALIST BODY ── */
html, body { 
  height: 100vh; 
  overflow: hidden; 
  background-color: var(--bg); 
  background-image: radial-gradient(circle at 50% 50%, #0a1224 0%, #02040a 100%);
  color: var(--txt); 
  font-family: var(--font-primary); 
  line-height: 1.5;
}

/* ── LAYOUT ── */
#app { display: grid; grid-template-rows: var(--header-h) 1fr; height: 100vh; overflow: hidden; }
#game-body { display: flex; height: calc(100vh - var(--header-h)); overflow: hidden; }

/* ── HEADER ── */
#header {
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: rgba(6,10,22,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-hi); z-index: 100;
}
.logo { font-family: var(--font-secondary); font-size: 2.4rem; color: #fff; font-weight: 700; letter-spacing: 4px; line-height: 1; transform: translateY(2px); }
.hdr-year { font-family: var(--font-secondary); font-size: 1.8rem; color: var(--amber); letter-spacing: 2px; }
.hdr-axiom { font-size: .85rem; padding: 3px 12px; border: 1px solid var(--border-hi); background: var(--bg-card); color: var(--txt-dim); border-radius: 2px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.hdr-score { font-family: var(--font-secondary); font-size: 1.8rem; color: var(--green); margin-left: auto; }
#hdr-traits { display: flex; gap: 6px; flex-wrap: nowrap; }
.trait-badge { font-size: .75rem; padding: 2px 9px; background: rgba(92,138,138,.1); border: 1px solid rgba(92,138,138,.3); color: var(--cyan); border-radius: 2px; font-weight: 600; text-transform: uppercase; }

/* Tab nav */
.tab-nav { display: flex; gap: 5px; margin-left: auto; margin-right: 20px; }
.tab-btn { font-size: .85rem; padding: 6px 14px; background: transparent; border: 1px solid transparent; color: var(--txt-dim); letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; transition: var(--trans); font-weight: 600; }
.tab-btn:hover { color: var(--txt); background: var(--bg-hover); }
.tab-btn.active { background: var(--bg-card); border-color: var(--border-hi); color: var(--green); }

/* ── SIDEBAR ── */
#sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100%;
  background: rgba(7,8,18,.8); backdrop-filter: blur(4px); border-right: 2px solid var(--border-hi);
  padding: 14px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.s-label { font-size: .75rem; color: var(--amber); letter-spacing: 3px; text-transform: uppercase; padding: 8px 0 4px; border-bottom: 1px solid #333; margin-bottom: 8px; font-weight: bold; }

/* Resource Bars */
.res-bar { margin-bottom: 10px; }
.res-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--txt-dim); margin-bottom: 4px; align-items: center; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.res-val { font-family: var(--font-secondary); font-size: 1.3rem; color: var(--txt); font-weight: 600; }
.res-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.res-fill { height: 100%; border-radius: 1px; transition: width .8s ease; }
.res-fill-food     { background: linear-gradient(90deg, var(--bg-hover), var(--green)); }
.res-fill-energy   { background: linear-gradient(90deg, var(--bg-hover), var(--amber)); }
.res-fill-water    { background: linear-gradient(90deg, var(--bg-hover), var(--cyan)); }
.res-fill-minerals { background: linear-gradient(90deg, var(--bg-hover), var(--purple)); }

/* Opinion Bars */
.op-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.op-lbl { font-size: .75rem; width: 44px; color: var(--txt-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.op-track { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.op-fill { height: 100%; border-radius: 1px; transition: width .6s ease; }
.op-fill-trust { background: var(--cyan); }
.op-fill-fear  { background: var(--red); }
.op-fill-anger { background: var(--amber); }
.op-fill-hope  { background: var(--green); }
.op-val { font-family: var(--font-secondary); font-size: 1.2rem; width: 32px; text-align: right; font-weight: 600; }

/* Collapse Risk */
.risk-row { display: flex; justify-content: space-between; font-size: .75rem; color: var(--txt-dim); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.risk-val { font-family: var(--font-secondary); font-size: 1.25rem; font-weight: 600; }
.risk-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.risk-fill { height: 100%; border-radius: 1px; transition: width .8s ease, background .8s ease; }

/* Director */
#director-state .dir-label { font-family: var(--font-secondary); font-size: 1.3rem; padding-bottom: 2px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.dir-bar-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 4px 0; }
.dir-bar-fill { height: 100%; transition: width .6s ease; }
.dir-sub { font-size: .75rem; color: var(--txt-dim); margin-top: 4px; }

/* Alert panels */
.advisor-msg { padding: 8px 10px; background: rgba(57,255,20,.1); border-left: 3px solid var(--green-dim); font-size: .8rem; color: var(--green); line-height: 1.4; margin-top: 6px; font-weight: bold; }
.anomaly-msg { padding: 8px 10px; border-left: 3px solid var(--amber); font-size: .8rem; color: var(--amber); background: rgba(255,180,0,.1); margin-top: 6px; font-weight: bold; }
.revolution-msg { padding: 8px 10px; border-left: 3px solid var(--red); font-size: .8rem; color: var(--red); background: rgba(255,34,68,.1); margin-top: 6px; font-weight: bold; animation: pulse-border 1s infinite; }

/* ── MAIN ── */
#main { flex: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.tab-panel { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.tab-panel.active { display: flex; }

/* ════════════════════════════
   MAIN TAB — NEWS FLASH + CHOICES
   ════════════════════════════ */
#tab-main { flex-direction: column; }

/* News Flash */
#news-flash-area {
  flex: 1; display: flex; flex-direction: column;
  padding: 24px 30px 14px; overflow: hidden;
}
.news-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.news-terminal-id { font-family: var(--font-secondary); font-size: 1rem; color: var(--green); letter-spacing: 2px; font-weight: 600; text-transform: uppercase; }
.news-sev { font-size: .7rem; padding: 3px 10px; border: 1px solid; border-radius: 2px; letter-spacing: 1.5px; font-weight: 700; font-family: var(--font-secondary); }
.news-sev.LOW          { color: var(--cyan);   border-color: var(--cyan);   background: rgba(0,255,238,.1); }
.news-sev.MODERATE     { color: var(--amber);  border-color: var(--amber);  background: rgba(255,180,0,.1); }
.news-sev.HIGH         { color: #ff6600;        border-color: #ff6600;        background: rgba(255,102,0,.1); }
.news-sev.CATASTROPHIC { color: var(--red);    border-color: var(--red);    background: rgba(255,34,68,.15); animation: pulse-border 1s infinite; }

/* Terminal window */
#news-flash-terminal {
  flex: 1; background: rgba(4,8,20,.9); border: 1px solid var(--border-hi);
  border-radius: 2px; padding: 20px 24px; overflow: hidden; position: relative;
}
#news-flash-terminal::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green); border-radius: 2px 0 0 2px;
}
#news-flash-title { font-family: var(--font-secondary); font-size: 1.4rem; color: var(--amber); margin-bottom: 10px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
#news-flash-text { font-size: 1rem; color: var(--txt-dim); line-height: 1.8; white-space: pre-wrap; font-weight: 400; }
#news-cursor { display: inline-block; width: 8px; height: 1em; background: var(--green); margin-left: 4px; vertical-align: text-bottom; animation: blink-cur .7s step-end infinite; }
@keyframes blink-cur { 0%,100%{opacity:1;box-shadow:var(--green-glow)} 50%{opacity:0;box-shadow:none} }

/* Effects row */
#news-effects { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.eff-tag { font-family: var(--font-primary); font-size: .8rem; padding: 2px 10px; border-radius: 2px; border: 1px solid; }
.eff-good { color: var(--green); border-color: rgba(77,210,255,.4); background: rgba(77,210,255,.05); }
.eff-bad  { color: var(--red);   border-color: rgba(255,77,77,.4);  background: rgba(255,77,77,.05); }
.eff-warn { color: var(--amber); border-color: rgba(229,192,123,.4);background: rgba(229,192,123,.05); }

/* ── CHOICE AREA ── */
#choice-area {
  padding: 16px 30px 20px; border-top: 2px solid var(--border-hi);
  background: rgba(0,0,0,.8); flex-shrink: 0;
}
.choice-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; margin-top: auto; }
.choice-hdr-line { flex: 1; height: 1px; background: var(--border-hi); }
.choice-hdr-txt { font-size: .85rem; color: var(--txt-dim); letter-spacing: 2px; font-weight: 600; text-transform: uppercase; }

/* Policy grid 3×2 */
#policy-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.policy-btn {
  background: var(--bg-card); border: 1px solid var(--border-hi);
  color: var(--txt); padding: 14px 16px; border-radius: 4px;
  text-align: left; transition: all var(--trans); display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden;
}
.policy-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(255,255,255,.03)); pointer-events: none; }
.policy-btn .p-icon { font-size: 2.2rem; line-height: 1; }
.policy-btn .p-name { font-family: var(--font-secondary); font-size: 1.1rem; letter-spacing: 1px; margin-top: 4px; color: #fff; }
.policy-btn .p-desc { font-size: .8rem; color: var(--txt-dim); line-height: 1.4; font-weight: bold; }
.policy-btn:hover:not(:disabled) { border-color: var(--green); background: rgba(57,255,20,.1); color: var(--green); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(57,255,20,.2); }
.policy-btn:hover:not(:disabled) .p-name { color: var(--green); text-shadow: none; }
.policy-btn:hover:not(:disabled) .p-desc { color: var(--green-dim); }
.policy-btn:active:not(:disabled) { transform: translateY(0px); }
.policy-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ════════════════════════════
   DATA TAB
   ════════════════════════════ */
#tab-data { padding: 14px 16px; gap: 10px; overflow: hidden; }
#metrics-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; flex-shrink: 0; }
.metric-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; transition: border-color var(--trans); }
.metric-tile:hover { border-color: var(--border-hi); }
.m-icon { font-size: 1.4rem; flex-shrink: 0; }
.m-label { font-size: .6rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--txt-dim); margin-bottom: 2px; }
.m-value { font-family: var(--font-secondary); font-size: 1.2rem; color: var(--txt); line-height: 1; }
.m-delta { font-family: var(--font-secondary); font-size: .85rem; padding: 0 5px; border-radius: 2px; display: inline-block; margin-top: 1px; }
.delta-up        { background: rgba(57,255,20,.1);  color: var(--green); }
.delta-down      { background: rgba(255,34,68,.1);  color: var(--red); }
.delta-inv-up    { background: rgba(255,34,68,.1);  color: var(--red); }
.delta-inv-down  { background: rgba(57,255,20,.1);  color: var(--green); }
#ml-panel { flex-shrink: 0; }
#history-chart { width: 100%; flex: 1; min-height: 0; }

/* ════════════════════════════
   TECH TAB
   ════════════════════════════ */
#tab-tech { padding: 14px 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; overflow: hidden; }
.tech-col, .tl-col { display: flex; flex-direction: column; overflow: hidden; }
.tab-section-hdr { font-size: .65rem; color: var(--amber); letter-spacing: 3px; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--border-hi); margin-bottom: 10px; flex-shrink: 0; }
#tech-tree-panel, #timeline-panel { flex: 1; overflow-y: auto; padding-right: 4px; }
.tech-path { margin-bottom: 13px; }
.tech-path-name { font-size: .7rem; font-weight: 700; margin-bottom: 5px; letter-spacing: .5px; }
.tech-levels { display: flex; gap: 5px; }
.tech-level { flex: 1; padding: 6px 5px; text-align: center; border-radius: 2px; border: 1px solid var(--border); font-size: .62rem; cursor: pointer; transition: var(--trans); background: var(--bg-card); line-height: 1.3; color: var(--txt-dim); }
.tech-level.unlocked { border-color: var(--border-hi); color: var(--green); }
.tech-level.unlocked:not(.researched):hover { transform: translateY(-1px); background: var(--bg-hover); }
.tech-level.locked { opacity: .25; cursor: not-allowed; }
.tech-level.researched { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.tl-entry { display: flex; gap: 8px; margin-bottom: 7px; align-items: flex-start; font-size: .7rem; }
.tl-year { font-family: var(--font-secondary); font-size: .85rem; color: var(--amber); min-width: 28px; padding-top: 2px; font-weight: 600; }
.tl-dot { width: 5px; height: 5px; background: var(--green-dim); border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.tl-text { color: var(--txt-dim); line-height: 1.5; }

/* ════════════════════════════
   WORLD TAB
   ════════════════════════════ */
#tab-world { padding: 14px 16px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; overflow: hidden; }
.world-col, .strat-col { display: flex; flex-direction: column; overflow: hidden; }
#world-stage-panel, #strategy-panel { flex: 1; overflow-y: auto; }
.civ-card { background: var(--bg-card); border: 1px solid var(--border-hi); border-radius: 3px; padding: 12px; margin-bottom: 8px; }
.civ-card-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.civ-name { font-family: var(--font-secondary); font-size: 1rem; letter-spacing: 1px; font-weight: 600; }
.civ-risk { font-size: .68rem; }
.civ-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.civ-stat { text-align: center; background: var(--bg-panel); padding: 5px; border-radius: 2px; }
.civ-stat-lbl { font-size: .58rem; color: var(--txt-dim); margin-bottom: 2px; }
.civ-stat-val { font-family: var(--font-vt); font-size: 1rem; }
.embed-row { margin-bottom: 6px; }
.embed-lbl-row { display: flex; justify-content: space-between; font-size: .63rem; color: var(--txt-dim); margin-bottom: 2px; }
.embed-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.embed-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.strat-title { font-family: var(--font-vt); font-size: 1.3rem; margin-bottom: 4px; letter-spacing: 1px; }
.strat-adapt { font-size: .7rem; color: var(--txt-dim); margin-bottom: 12px; line-height: 1.5; }
.emotion-box { margin-top: 10px; font-size: .7rem; color: var(--txt-dim); }

/* ════════════════════════════
   MODALS
   ════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal-card { background: var(--bg-panel); border: 1px solid var(--border-hi); border-radius: 4px; padding: 28px 30px; max-width: 620px; width: 92%; position: relative; animation: slideUp .25s ease; }
.modal-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); border-radius: 4px 0 0 4px; }
.modal-card.crisis::before { background: var(--red); }
.modal-year { font-size: .62rem; color: var(--txt-dim); letter-spacing: 2px; margin-bottom: 6px; }
.modal-title { font-family: var(--font-vt); font-size: 2rem; color: var(--amber); margin-bottom: 6px; letter-spacing: 1px; }
.modal-body { font-size: .85rem; color: var(--txt-dim); line-height: 1.7; margin-bottom: 22px; }
.modal-choices { display: flex; flex-direction: column; gap: 8px; }
.choice-btn { text-align: left; padding: 13px 16px; background: var(--bg-card); border: 1px solid var(--border-hi); border-left: 3px solid var(--green-dim); border-radius: 2px; color: var(--txt); font-family: var(--font-primary); transition: var(--trans); }
.choice-btn:hover { border-left-color: var(--green); background: rgba(57,255,20,.06); color: var(--green); }
.choice-label { font-size: .88rem; font-weight: 600; margin-bottom: 3px; }
.choice-detail { font-size: .75rem; color: var(--txt-dim); }
.choice-costs { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.cost-tag { font-family: var(--font-vt); font-size: .9rem; padding: 1px 8px; border-radius: 2px; }
.cost-neg { background: rgba(255,34,68,.1); color: var(--red); }
.cost-pos { background: rgba(57,255,20,.1); color: var(--green); }

/* ════════════════════════════
   START SCREEN
   ════════════════════════════ */
#start-screen { display: none; position: fixed; inset: 0; z-index: 200; background: transparent; overflow: hidden; align-items: center; justify-content: center; flex-direction: column; }
#start-screen.active { display: flex; }
.start-logo { font-family: var(--font-secondary); font-size: 9rem; color: var(--green); text-shadow: 0 0 50px rgba(57,255,20,.7), 0 0 100px rgba(57,255,20,.3); letter-spacing: 4px; line-height: 1; margin-bottom: 4px; animation: crt-flicker 4s infinite; }
.start-subtitle { font-family: var(--font-vt); font-size: 1.5rem; color: var(--amber); letter-spacing: 6px; margin-bottom: 12px; text-align: center; }
.start-desc { font-size: 1rem; color: var(--txt); text-align: center; max-width: 600px; line-height: 1.9; margin-bottom: 34px; font-weight: bold; background: rgba(0,0,0,.6); padding: 10px; border-radius: 4px; }
.start-select-lbl { font-family: var(--font-secondary); font-size: 1rem; color: var(--amber); letter-spacing: 4px; margin-bottom: 18px; text-align: center; text-shadow: 0 0 10px rgba(255,180,0,.4); }
#axiom-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; max-width: 1100px; margin-bottom: 28px; }
.axiom-card { background: rgba(12,13,26,.8); backdrop-filter: blur(4px); border: 1px solid var(--border-hi); border-radius: 4px; padding: 22px 16px; text-align: center; cursor: pointer; transition: all .2s; }
.axiom-card:hover, .axiom-card.selected { border-color: var(--accent-color, var(--green)); background: var(--glow-bg, rgba(57,255,20,.15)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.axiom-card .icon { font-size: 3.5rem; margin-bottom: 12px; text-shadow: 0 5px 10px rgba(0,0,0,.5); }
.axiom-card .name { font-family: var(--font-secondary); font-size: 1.2rem; margin-bottom: 8px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 8px currentColor; }
.axiom-card .desc { font-size: .8rem; color: var(--txt-dim); line-height: 1.6; font-weight: bold; }
#axiom-desc-preview { font-size: .95rem; color: var(--txt-dim); min-height: 24px; margin-bottom: 22px; text-align: center; font-weight: bold; background: rgba(0,0,0,.5); padding: 4px 12px; border-radius: 4px; }
.btn-primary { background: rgba(57,255,20,.15); border: 2px solid var(--green); border-bottom: 5px solid var(--green); color: var(--green); font-family: var(--font-game); font-size: 2rem; padding: 16px 60px; letter-spacing: 4px; border-radius: 4px; transition: all .2s; text-shadow: var(--green-glow); backdrop-filter: blur(4px); }
.btn-primary:hover { background: rgba(57,255,20,.3); box-shadow: 0 0 30px rgba(57,255,20,.4); transform: translateY(-3px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; border-bottom-width: 2px; background: rgba(0,0,0,.5); }
.start-footer { font-family: var(--font-vt); font-size: .9rem; color: var(--cyan); opacity: .6; margin-top: 24px; letter-spacing: 4px; }

/* ════════════════════════════
   ENDING SCREEN
   ════════════════════════════ */
#ending-screen { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: rgba(0,0,0,.9); }
#ending-screen.active { display: flex; }
.ending-grade { font-family: var(--font-game); font-size: 8rem; display: block; margin-bottom: 12px; text-shadow: 0 0 40px currentColor; }
.ending-title { font-family: var(--font-game); font-size: 3.5rem; letter-spacing: 2px; margin-bottom: 12px; }
.ending-subtitle { font-family: var(--font-vt); font-size: 1.2rem; letter-spacing: 4px; color: var(--txt-dim); margin-bottom: 24px; }
.ending-year { font-family: var(--font-vt); font-size: 1.4rem; color: var(--txt-dim); margin-bottom: 24px; }
.ending-desc { max-width: 600px; font-size: 1.1rem; color: var(--txt); line-height: 1.9; margin-bottom: 34px; font-weight: bold; }
.ending-stats { font-family: var(--font-vt); font-size: 1.3rem; color: var(--txt-dim); margin-bottom: 30px; letter-spacing: 1.5px; }

/* Tech discoveries */
#tech-discovery-panel { flex-shrink: 0; }
.disc-banner { background: rgba(0,255,238,.07); border: 1px solid rgba(0,255,238,.3); border-radius: 3px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.disc-banner .disc-hdr { font-family: var(--font-vt); font-size: 1.1rem; color: var(--cyan); }
.disc-banner .disc-efx { font-size: .72rem; color: var(--txt-dim); }

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-border { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 18px rgba(255,34,68,.4)} }
@keyframes typeIn  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Scrollbars */
::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }