@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Tokens ── */
:root {
  /* Structure — cold navy (Ember/Stellar shared base) */
  --bg:      #030810;
  --panel:   #07111e;
  --panel2:  #0b1a2c;
  --panel3:  #0e2038;
  --border:  #1a3050;
  --border2: #102030;

  /* Path accent colors */
  --cyan:     #00d4ff;
  --cyan2:    #0099cc;
  --cyan-dim: #006688;
  --orange:   #ff9933;
  --purple:   #b080ff;
  /* Veil path colors */
  --veil:     #c880ff;
  --void:     #7040c0;
  --light:    #e0c060;

  /* Data / status colors */
  --green:  #00f080;
  --green2: #00aa55;
  --yellow: #ffd040;
  --red:    #ff4060;

  /* Text scale */
  --text:   #c8e8f5;
  --text2:  #7aabcc;
  --text3:  #6090b0;
  --bright: #eef8ff;

  /* Path aliases */
  --corp:   #00d4ff;
  --mil:    #ff9933;
  --church: #b080ff;

  /* Glow tokens — Ember pattern */
  --glow-cyan:        0 0 14px rgba(0,212,255,0.45);
  --glow-cyan-soft:   0 0 7px  rgba(0,212,255,0.22);
  --glow-orange:      0 0 14px rgba(255,153,51,0.45);
  --glow-orange-soft: 0 0 7px  rgba(255,153,51,0.22);
  --glow-purple:      0 0 14px rgba(176,128,255,0.45);
  --glow-green:       0 0 10px rgba(0,240,128,0.35);

  /* Gradient dark anchors (Ember progress bar pattern) */
  --gd-cyan-dk:   #003848;
  --gd-orange-dk: #7a3800;
  --gd-purple-dk: #2a0050;
  --gd-green-dk:  #1e5c10;

  /* Animation */
  --anim-fast:   80ms;
  --anim-normal: 200ms;

  /* Typography — JetBrains Mono: terminal/hacker/sci-fi, purpose-built for screens */
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing scale — 4px base (Ember pattern) */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 20px;
  --sp6: 24px;

  /* Letter-spacing */
  --ls-tight:  1.5px;
  --ls-normal: 2.5px;
  --ls-wide:   4px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
/* Terminal aesthetic — zero border-radius on all interactive/structural elements */
button,input,select,textarea,.card,.mbox,.sc,.ec-card,.btn,.tab,.spd,.pause-btn,.path-choice,.intro-path-card,.sb,.dst,.us,.info-box { border-radius:0 !important }

/* ── Base — dot-grid bg + scanlines (Ember/Stellar shared) ── */
html,body {
  width:100%; height:100%;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(0,200,255,.038) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}
body::after {
  content:''; position:fixed; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.10) 2px,
    rgba(0,0,0,.10) 3px
  );
  pointer-events:none; z-index:9999;
}
#app {
  width:100%; height:100%;
  display:flex; flex-direction:column;
}

/* ── HEADER ── */
#hdr {
  flex-shrink:0; height:56px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; padding:0 14px; gap:0;
  position:relative;
}
/* Top edge highlight — cold cyan (Ember widget anatomy) */
#hdr::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.25), transparent);
}
.hd { width:1px; height:32px; background:var(--border); flex-shrink:0; margin:0 12px }

/* Title */
.title {
  font-size:17px; font-weight:700; letter-spacing:var(--ls-wide);
  color:var(--cyan); text-transform:uppercase;
  text-shadow: var(--glow-cyan-soft); flex-shrink:0;
}
.path-badge {
  font-size:10px; letter-spacing:var(--ls-normal); text-transform:uppercase;
  padding:2px 7px; border:1px solid; margin-top:3px; display:inline-block;
  font-weight:500;
}
.path-badge.corp   { color:var(--cyan);   border-color:var(--cyan-dim);  background:rgba(0,212,255,.06)  }
.path-badge.mil    { color:var(--orange); border-color:#aa5500;           background:rgba(255,153,51,.06) }
.path-badge.church { color:var(--purple); border-color:#7744aa;           background:rgba(176,128,255,.06)}

/* Header stats — Ember top-hstat pattern */
.hs { display:flex; flex-direction:column; gap:1px; flex-shrink:0; min-width:90px }
.hs-lbl { font-size:10px; color:var(--text3); letter-spacing:var(--ls-tight); text-transform:uppercase }
.hs-val { font-size:16px; font-weight:700; color:var(--bright); line-height:1; font-variant-numeric:tabular-nums }
.hs-val.cr  { color:var(--yellow) }
.hs-val.ic  { color:var(--green)  }
.hs-val.ec  { color:var(--purple) }
.hs-val.neg { color:var(--red)    }

/* Age bar */
.age-wrap { flex:1; min-width:100px; display:flex; flex-direction:column; gap:4px }
.age-lbl  { font-size:11px; color:var(--text2); display:flex; justify-content:space-between; letter-spacing:var(--ls-tight) }
.age-bar  { height:5px; background:var(--border2); border:1px solid var(--border2); overflow:hidden }
.age-fill { height:100%; transition:width .5s linear }
/* Ember progress bar pattern — gradient + glow */
.age-fill.corp   { background:linear-gradient(90deg,var(--gd-cyan-dk),var(--green),var(--yellow) 60%,var(--red));   box-shadow:0 0 5px rgba(0,212,255,.3) }
.age-fill.mil    { background:linear-gradient(90deg,var(--gd-orange-dk),var(--orange),var(--yellow) 60%,var(--red)); box-shadow:0 0 5px rgba(255,153,51,.3) }
.age-fill.church { background:linear-gradient(90deg,var(--gd-purple-dk),var(--purple),#dd88ff 60%,var(--red));       box-shadow:0 0 5px rgba(176,128,255,.3) }
.age-fill.veil   { background:linear-gradient(90deg,var(--void),var(--veil),var(--light) 60%,var(--red));             box-shadow:0 0 5px rgba(200,128,255,.3) }

/* Speed / pause controls */
.hdr-ctrl  { display:flex; flex-direction:column; gap:3px; flex-shrink:0 }
.spd-row   { display:flex; gap:2px }
.spd {
  padding:3px 9px; font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-tight);
  cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text2);
  text-transform:uppercase; touch-action:manipulation;
  transition:border-color var(--anim-fast), color var(--anim-fast), background var(--anim-fast);
}
.spd.on   { background:rgba(0,212,255,.1); border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-cyan-soft) }
.spd:hover:not(.on) { border-color:var(--text2); color:var(--text) }
.spd.rst  { color:var(--text3); margin-left:4px }
.spd.rst:hover { border-color:var(--red); color:var(--red); background:rgba(255,64,96,.08) }
.pause-btn {
  padding:4px 10px; font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-normal);
  text-transform:uppercase; cursor:pointer; border:1px solid var(--border);
  background:transparent; color:var(--text2); text-align:center; touch-action:manipulation;
  transition:border-color var(--anim-fast), color var(--anim-fast), background var(--anim-fast);
}
.pause-btn:hover        { border-color:var(--cyan); color:var(--cyan) }
.pause-btn.paused       { background:rgba(255,208,64,.08); border-color:var(--yellow); color:var(--yellow) }

/* ── PAUSE OVERLAY ── */
#pause-overlay {
  display:none; position:fixed; top:56px; left:0; right:0; bottom:0;
  background:transparent; z-index:200; pointer-events:none;
  align-items:flex-start; justify-content:center;
}
#pause-overlay.show { display:flex }

/* ── LAYOUT ── */
#main { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border2); overflow:hidden; min-height:0 }
.panel { background:var(--panel); display:flex; flex-direction:column; overflow:hidden }
.ph {
  flex-shrink:0; padding:8px 14px;
  background:var(--panel2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0; position:relative;
}
/* Ember widget top-highlight on panel headers */
.ph::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.15), transparent);
}
.ph-t { font-size:11px; letter-spacing:var(--ls-normal); text-transform:uppercase; color:var(--cyan); white-space:nowrap; font-weight:500 }
.ph-t.mil    { color:var(--orange) }
.ph-t.church { color:var(--purple) }
.ph-s { font-size:11px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:var(--ls-tight) }
.scroll { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0 }
::-webkit-scrollbar       { width:3px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }

/* ── CARD GRID ── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; padding:8px; align-content:start }

/* Tier headers — Ember wlbl pattern with amber/path accent */
.tier-hdr {
  grid-column:1/-1; padding:4px 6px; font-size:10px; letter-spacing:var(--ls-normal);
  text-transform:uppercase; color:var(--text3); background:rgba(0,0,0,.4);
  display:flex; align-items:center; gap:8px; margin-top:2px;
}
.tier-hdr:first-child { margin-top:0 }
.tier-hdr::before {
  content:''; width:3px; height:3px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 4px var(--cyan); flex-shrink:0;
}
.tier-hdr.mil-tier::before    { background:var(--orange); box-shadow:0 0 4px var(--orange) }
.tier-hdr.church-tier::before { background:var(--purple); box-shadow:0 0 4px var(--purple) }
.tier-hdr::after { content:''; flex:1; height:1px; background:var(--border2) }

/* ── CARDS ── */
.card {
  background:var(--panel2); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:10px 8px 8px; cursor:pointer;
  transition:background var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast);
  gap:4px; text-align:center; position:relative; min-height:168px;
}
/* Ember widget top-highlight on every card */
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.12), transparent);
  pointer-events:none;
}
.card:hover             { background:var(--panel3); border-color:var(--cyan-dim) }
.card.active            { border-color:var(--cyan);   background:rgba(0,212,255,.07);   box-shadow:inset 0 0 16px rgba(0,212,255,.05), var(--glow-cyan-soft) }
.card.mil-active        { border-color:var(--orange); background:rgba(255,153,51,.07);  box-shadow:inset 0 0 16px rgba(255,153,51,.04), var(--glow-orange-soft) }
.card.church-active     { border-color:var(--purple); background:rgba(176,128,255,.06); box-shadow:inset 0 0 16px rgba(176,128,255,.04), var(--glow-purple) }
.card.sk-active         { border-color:var(--green);  background:rgba(0,240,128,.05);   box-shadow:inset 0 0 16px rgba(0,240,128,.04),  var(--glow-green) }
.card.void-active       { border-color:var(--void);   background:rgba(112,64,192,.07);  box-shadow:inset 0 0 16px rgba(112,64,192,.05) }
.card.light-active      { border-color:var(--light);  background:rgba(224,192,96,.07);  box-shadow:inset 0 0 16px rgba(224,192,96,.05) }
.card.next-locked       { opacity:.38; cursor:default; pointer-events:none }
.card.housing-on        { border-color:var(--orange); background:rgba(255,153,51,.07) }
.card.maxed-card        { border-color:rgba(255,153,51,.45); background:rgba(255,100,30,.04) }

/* Card interior */
.card-art {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  font-size:22px; border:1px solid rgba(255,255,255,.06); flex-shrink:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 7px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 7px);
}
.card-art-lbl { font-size:8px; letter-spacing:1px; color:rgba(255,255,255,.14); text-transform:uppercase }
.card-name    { font-size:12px; color:var(--bright); font-weight:700; line-height:1.3; word-break:break-word }
.card-name.dim{ color:var(--text2); font-weight:400 }
.card-stat    { font-size:14px; font-weight:700; min-height:18px }
.card-lv      { font-size:11px; color:var(--text2) }
.card-lv b    { color:var(--cyan) }
.card-lv.sk b { color:var(--green) }
.card-lv.mx   { color:var(--orange) }
.card-sub     { font-size:10px; color:var(--text3); line-height:1.4; word-break:break-word; min-height:13px; letter-spacing:var(--ls-tight) }

/* Active dot */
.card-dot { position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; display:none }
.card-dot.job       { background:var(--cyan);   box-shadow:0 0 6px var(--cyan)   }
.card-dot.mil       { background:var(--orange); box-shadow:0 0 6px var(--orange) }
.card-dot.church    { background:var(--purple); box-shadow:0 0 6px var(--purple) }
.card-dot.skill     { background:var(--green);  box-shadow:0 0 6px var(--green)  }
.card-dot.void-dot  { background:var(--void);   box-shadow:0 0 6px var(--void)   }
.card-dot.light-dot { background:var(--light);  box-shadow:0 0 6px var(--light)  }
.card-dot.show   { display:block; animation:blink 1.2s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.08} }

/* XP bar — Ember .prog/.pf pattern: bordered track, gradient fill, glow */
.card-xb-wrap { width:100%; margin-top:auto; display:flex; flex-direction:column; gap:2px }
.card-xb {
  height:5px; background:var(--panel3);
  border:1px solid var(--border2); overflow:hidden; width:100%;
}
.card-xf { height:100%; transition:width .25s ease }
/* Corp — cyan */
.card-xf.j  { background:linear-gradient(90deg,var(--gd-cyan-dk),var(--cyan));   box-shadow:0 0 5px rgba(0,212,255,.35) }
/* Mil — orange */
.card-xf.jm { background:linear-gradient(90deg,var(--gd-orange-dk),var(--orange)); box-shadow:0 0 5px rgba(255,153,51,.35) }
/* Church — purple */
.card-xf.jc { background:linear-gradient(90deg,var(--gd-purple-dk),var(--purple)); box-shadow:0 0 5px rgba(176,128,255,.35) }
/* Skill — green */
.card-xf.s   { background:linear-gradient(90deg,var(--gd-green-dk),var(--green));  box-shadow:0 0 5px rgba(0,240,128,.3)  }
/* Void — dark purple */
.card-xf.jvd { background:linear-gradient(90deg,#1a0a40,var(--void));  box-shadow:0 0 5px rgba(112,64,192,.35) }
/* Light — amber-gold */
.card-xf.jlt { background:linear-gradient(90deg,#302000,var(--light)); box-shadow:0 0 5px rgba(224,192,96,.35) }
.card-xt { font-size:10px; color:var(--text3); text-align:center; letter-spacing:var(--ls-tight) }

/* Suppress base card ::before shine on veil cards — their own ::before handles it */
.card.void-card::before, .card.light-card::before { background:none }

/* Void cards — glossy black, red inner glow */
.card.void-card {
  background:linear-gradient(160deg,#050508 0%,#08000f 60%,#050508 100%);
  border-color:rgba(40,0,10,.9);
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 12px rgba(180,0,40,.2);
}
.card.void-card::before { background:linear-gradient(90deg,transparent,rgba(180,0,40,.15),transparent) }
.card.void-card::after  { content:''; position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%,rgba(255,255,255,.02) 100%); }
.card.void-card:hover   { border-color:rgba(180,0,40,.6); box-shadow:inset 0 0 16px rgba(180,0,40,.3) }
.card.void-card .card-name { color:#d0a0b0 }
.card.void-card .card-lv b { color:#c06070 }
.card.void-card.void-active { border-color:rgba(180,0,40,.8); background:linear-gradient(160deg,#0a0005 0%,#100008 60%,#0a0005 100%); box-shadow:inset 0 0 20px rgba(180,0,40,.3), 0 0 12px rgba(180,0,40,.2) }

/* Light cards — pearl white, silver border, gold inner glow */
.card.light-card {
  background:linear-gradient(160deg,#f8f5ee 0%,#ede8df 60%,#f4f0e8 100%);
  border-color:rgba(160,155,145,.6);
  box-shadow:inset 0 0 12px rgba(200,160,0,.12);
}
.card.light-card::before { background:linear-gradient(90deg,transparent,rgba(200,160,0,.15),transparent) }
.card.light-card:hover   { border-color:rgba(160,155,145,.9); box-shadow:inset 0 0 16px rgba(200,160,0,.2) }
.card.light-card .card-name  { color:#2a2010; font-weight:700 }
.card.light-card .card-lv    { color:#3a3020 }
.card.light-card .card-lv b  { color:#806020 }
.card.light-card .card-stat  { color:#4a3a10 }
.card.light-card .card-sub   { color:#6a5a30 }
.card.light-card .card-xt    { color:#8a7a50 }
.card.light-card .card-art   { border-color:rgba(160,120,0,.2) }
.card.light-card .card-art-lbl { color:rgba(42,32,0,.3) }
.card.light-card .card-xb    { background:rgba(160,120,0,.1); border-color:rgba(160,120,0,.2) }
.card.light-card.light-active { border-color:rgba(160,130,0,.8); background:linear-gradient(160deg,#faf6ec 0%,#f0eadc 60%,#f6f2e8 100%); box-shadow:inset 0 0 20px rgba(200,160,0,.2), 0 0 12px rgba(200,160,0,.15) }

/* ── SHOP ── */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px; padding:8px; align-content:start }
.shop-hdr {
  grid-column:1/-1; padding:4px 6px; font-size:10px; letter-spacing:var(--ls-normal);
  text-transform:uppercase; color:var(--text3); background:rgba(0,0,0,.4);
  display:flex; align-items:center; gap:8px; margin-top:2px;
}
.shop-hdr:first-child { margin-top:0 }
.shop-hdr::before { content:''; width:3px; height:3px; border-radius:50%; background:var(--cyan); box-shadow:0 0 4px var(--cyan); flex-shrink:0 }
.shop-hdr::after  { content:''; flex:1; height:1px; background:var(--border2) }
.sc {
  background:var(--panel2); border:1px solid var(--border); padding:10px;
  cursor:pointer; transition:background var(--anim-fast), border-color var(--anim-fast), box-shadow var(--anim-fast);
  display:flex; flex-direction:column; gap:5px; position:relative;
}
.sc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.1), transparent);
}
.sc:hover:not(.sc-cant):not(.sc-maxed):not(.sc-hon) { background:var(--panel3); border-color:var(--cyan-dim) }
.sc-cant    { opacity:.3; cursor:not-allowed }
.sc-maxed   { border-color:rgba(255,153,51,.45); cursor:default }
.sc-hon     { border-color:var(--green); background:rgba(0,240,128,.05); box-shadow:var(--glow-green) }
.sc-hon:hover { background:rgba(0,240,128,.08)!important; border-color:var(--green)!important }
.sc-rent-on { border-color:var(--green); background:rgba(0,240,128,.04); box-shadow:var(--glow-green) }
.sc-rent-on:hover { background:rgba(0,240,128,.07)!important; border-color:var(--green)!important }
.sc-top  { display:flex; align-items:flex-start; gap:9px }
.sc-ico  { width:36px; height:36px; background:var(--panel3); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0 }
.sc-inf  { flex:1; min-width:0 }
.sc-nm   { font-size:13px; color:var(--bright); font-weight:700; margin-bottom:2px }
.sc-ds   { font-size:11px; color:var(--text2); line-height:1.5; letter-spacing:var(--ls-tight) }
.sc-bot  { display:flex; align-items:center; justify-content:space-between }
.sc-cost { font-size:13px; color:var(--yellow); font-weight:700; letter-spacing:var(--ls-tight) }
.sc-cost.maxed    { color:var(--orange) }
.sc-cost.drain    { color:var(--text2) }
.sc-cost.drain-on { color:var(--green) }
.sc-own  { font-size:10px; color:var(--text3); letter-spacing:var(--ls-tight) }

/* ── TABS ── */
.tabs {
  flex-shrink:0; display:flex; background:var(--panel2);
  border-bottom:1px solid var(--border);
}
.tab {
  flex:1; padding:10px 4px; font-family:var(--mono);
  font-size:10px; letter-spacing:var(--ls-tight); text-transform:uppercase;
  cursor:pointer; color:var(--text2); background:none; border:none;
  border-bottom:2px solid transparent; transition:color var(--anim-fast), border-color var(--anim-fast), background var(--anim-fast);
  margin-bottom:-1px;
}
.tab:hover  { color:var(--text); background:rgba(0,212,255,.03) }
.tab.on     { color:var(--cyan); border-bottom-color:var(--cyan) }
.tc         { display:none; overflow-y:auto; flex:1; min-height:0 }
.tc.on      { display:block }

/* ── UPLOAD / SETTINGS ── */
.up   { padding:12px }
.us   { background:var(--panel2); border:1px solid var(--border); padding:12px; margin-bottom:8px; position:relative }
.us::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.15), transparent);
}
.us-t { font-size:10px; letter-spacing:var(--ls-normal); text-transform:uppercase; color:var(--cyan); margin-bottom:7px; padding-bottom:6px; border-bottom:1px solid var(--border2) }
.us-d { font-size:12px; color:var(--text2); line-height:1.75; margin-bottom:10px; letter-spacing:var(--ls-tight) }
.sg   { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px }
.sb   { background:var(--bg); border:1px solid var(--border2); padding:8px 10px }
.sb-l { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:var(--ls-tight) }
.sb-v { font-size:17px; color:var(--yellow); margin-top:2px; font-weight:700 }
.sb-v.pu { color:var(--purple) }
.sb-v.cy { color:var(--cyan)   }
.sb-v.gr { color:var(--green)  }
.sb-v.or { color:var(--orange) }

/* Echo cards */
.ec-card {
  display:flex; align-items:center; gap:9px; padding:9px 10px;
  border:1px solid var(--border2); margin-bottom:6px; cursor:pointer;
  transition:border-color var(--anim-fast), background var(--anim-fast); background:var(--bg);
}
.ec-card:hover:not(.ec-maxed):not(.ec-cant) { border-color:var(--cyan); background:rgba(0,212,255,.04) }
.ec-card.ec-maxed { border-color:rgba(0,240,128,.25); cursor:default }
.ec-card.ec-cant  { opacity:.3; cursor:not-allowed }
.ec-ico { width:32px; height:32px; background:var(--panel2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0 }
.ec-inf { flex:1; min-width:0 }
.ec-nm  { font-size:13px; color:var(--bright); margin-bottom:2px; font-weight:700 }
.ec-ds  { font-size:11px; color:var(--text2); line-height:1.5; letter-spacing:var(--ls-tight) }
.ec-r   { flex-shrink:0; text-align:right }
.ec-cs  { font-size:13px; color:var(--purple); font-weight:700; letter-spacing:var(--ls-tight) }
.ec-cs.done { color:var(--green); font-size:11px }
.ec-lv  { font-size:10px; color:var(--text3); margin-top:2px; letter-spacing:var(--ls-tight) }

/* ── BUTTONS — Ember .btn base pattern ── */
.btn {
  display:inline-block; padding:10px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:var(--ls-normal); text-transform:uppercase;
  cursor:pointer; border:1px solid; width:100%; margin-bottom:6px;
  touch-action:manipulation;
  transition:background var(--anim-fast), box-shadow var(--anim-fast), border-color var(--anim-fast), color var(--anim-fast);
}
.btn:disabled { opacity:.28; cursor:not-allowed; pointer-events:none }

/* Primary — solid cyan fill */
.btn-p { background:var(--cyan); border-color:var(--cyan); color:#020c18; font-weight:700 }
.btn-p:hover:not(:disabled) { background:#40e0ff; box-shadow:var(--glow-cyan); border-color:#40e0ff }

/* Secondary — outlined */
.btn-s { background:transparent; color:var(--text2); border-color:var(--border) }
.btn-s:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-cyan-soft) }

/* Danger */
.btn-d { background:transparent; color:var(--red); border-color:rgba(255,64,96,.3) }
.btn-d:hover:not(:disabled) { background:rgba(255,64,96,.07); border-color:var(--red) }

/* Settings */
.sw  { padding:12px; display:flex; flex-direction:column; gap:4px }
.sg-t{ font-size:10px; letter-spacing:var(--ls-normal); text-transform:uppercase; color:var(--text3); padding:6px 0 4px; border-bottom:1px solid var(--border2); margin-top:4px }
.info-box { font-size:12px; color:var(--text2); line-height:1.9; padding:10px; background:var(--panel2); border:1px solid var(--border2); letter-spacing:var(--ls-tight) }

/* ── MODALS — Ember overlay-card anatomy ── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(2,8,18,.93); z-index:300; align-items:center; justify-content:center; backdrop-filter:blur(2px) }
.modal-bg.show { display:flex }

.mbox {
  background:var(--panel); border:1px solid var(--cyan);
  box-shadow:0 0 60px rgba(0,212,255,.1), inset 0 0 60px rgba(0,0,0,.2);
  padding:28px; width:min(580px,92vw); max-height:92vh; overflow-y:auto;
  position:relative;
}
/* Amber top-accent line — Ember title-card::before pattern */
.mbox::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan) 30%, var(--cyan) 70%, transparent);
  box-shadow:0 0 12px rgba(0,212,255,.5);
}
.mbox.mil-box    { border-color:var(--orange); box-shadow:0 0 60px rgba(255,153,51,.08) }
.mbox.mil-box::before    { background:linear-gradient(90deg, transparent, var(--orange) 30%, var(--orange) 70%, transparent); box-shadow:0 0 12px rgba(255,153,51,.4) }
.mbox.church-box { border-color:var(--purple); box-shadow:0 0 60px rgba(176,128,255,.08) }
.mbox.church-box::before { background:linear-gradient(90deg, transparent, var(--purple) 30%, var(--purple) 70%, transparent); box-shadow:0 0 12px rgba(176,128,255,.4) }
.mbox.path-box   { border-color:var(--text2) }
.mbox.path-box::before   { background:linear-gradient(90deg, transparent, var(--text2) 30%, var(--text2) 70%, transparent); box-shadow:none }

.mt      { font-size:24px; letter-spacing:var(--ls-wide); text-transform:uppercase; margin-bottom:3px; text-align:center; font-weight:700 }
.mt.cy   { color:var(--cyan);   text-shadow:var(--glow-cyan)   }
.mt.or   { color:var(--orange); text-shadow:var(--glow-orange) }
.mt.pu   { color:var(--purple); text-shadow:var(--glow-purple) }
.msub    { font-size:10px; letter-spacing:var(--ls-wide); color:var(--text3); margin-bottom:20px; text-align:center }
.mlog    { font-size:13px; color:var(--text2); line-height:1.95; border-left:2px solid var(--border); padding-left:14px; margin-bottom:18px; letter-spacing:var(--ls-tight) }
.mlog .hl{ color:var(--cyan)   }
.mlog .or{ color:var(--orange) }
.mlog .pu{ color:var(--purple) }
.mlog .br{ color:var(--bright); font-weight:700 }
.mlog .em{ color:var(--yellow) }
.mdesc   { font-size:12px; color:var(--text3); line-height:1.85; margin-bottom:20px; padding:12px; background:var(--panel2); border:1px solid var(--border2); letter-spacing:var(--ls-tight) }
.mdesc b { color:var(--bright) }

/* Path choices */
.path-choices   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-bottom:16px }
.path-choice    { border:1px solid var(--border); padding:13px 9px; cursor:pointer; transition:border-color var(--anim-fast), background var(--anim-fast), box-shadow var(--anim-fast); text-align:center; position:relative }
.path-choice::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,212,255,.1), transparent) }
.path-choice:hover  { border-color:var(--text2); background:rgba(255,255,255,.02) }
.path-choice.chosen { border-color:var(--green); background:rgba(0,240,128,.05); box-shadow:0 0 10px rgba(0,240,128,.1) }
.path-choice.locked { opacity:.25; cursor:not-allowed; pointer-events:none }
.pc-ico  { font-size:24px; margin-bottom:5px }
.pc-nm   { font-size:12px; font-weight:700; color:var(--bright); margin-bottom:3px; letter-spacing:var(--ls-tight) }
.pc-ds   { font-size:10px; color:var(--text3); line-height:1.5; letter-spacing:var(--ls-tight) }

/* Two-column button row */
.btn-2 { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:0 }

/* Death modal stats grid */
.dg  { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px }
.dst { background:var(--panel2); border:1px solid var(--border); padding:10px; position:relative }
.dst::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,212,255,.12), transparent) }
.dst-l { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:var(--ls-tight); margin-bottom:3px }
.dst-v { font-size:16px; color:var(--yellow); font-weight:700 }
.dst-v.pu { color:var(--purple) }
.dst-v.cy { color:var(--cyan)   }
.dst-v.sm { font-size:12px      }
.dn  { font-size:11px; color:var(--text3); margin-top:10px; line-height:1.8; text-align:center; letter-spacing:var(--ls-tight) }

/* Welcome back modal */
.wt  { font-size:18px; letter-spacing:var(--ls-wide); color:var(--cyan); margin-bottom:7px; text-align:center; font-weight:700 }
.ws  { font-size:12px; color:var(--text2); margin-bottom:16px; line-height:1.7; text-align:center; letter-spacing:var(--ls-tight) }
.wg  { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px }

/* ── #notif removed — no flyout tooltips ── */
#notif { display:none !important }

/* ── INTRO PATH SELECTOR (2-column corp/mil picker) ── */
.intro-path-label { font-size:10px; color:var(--text2); letter-spacing:var(--ls-wide); text-align:center; margin:4px 0 8px }
.intro-path-row   { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-bottom:16px }
.intro-path-card  {
  border:1px solid var(--border); padding:14px 12px; cursor:pointer;
  transition:border-color var(--anim-normal), background var(--anim-normal), box-shadow var(--anim-normal);
  text-align:center; position:relative;
}
.intro-path-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,212,255,.1), transparent) }
.intro-path-card.corp:hover { border-color:var(--cyan);   background:rgba(0,212,255,.07);   box-shadow:var(--glow-cyan-soft) }
.intro-path-card.mil:hover  { border-color:var(--orange); background:rgba(255,153,51,.07);  box-shadow:var(--glow-orange-soft) }
.intro-path-card.veil:hover { border-color:var(--veil);   background:rgba(200,128,255,.07); box-shadow:0 0 16px rgba(200,128,255,.2) }
.intro-path-card.corp:hover::before { background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.5 }
.intro-path-card.mil:hover::before  { background:linear-gradient(90deg, transparent, var(--orange), transparent); opacity:.5 }
.intro-path-card.veil:hover::before { background:linear-gradient(90deg, transparent, var(--veil), transparent); opacity:.5 }
.intro-path-card.corp .ipc-name { color:var(--cyan)   }
.intro-path-card.mil  .ipc-name { color:var(--orange) }
.intro-path-card.veil .ipc-name { color:var(--veil)   }
.intro-path-card.pulse { animation:pulse-card 0.35s ease; }
@keyframes pulse-card { 0%,100%{transform:none} 40%{transform:scale(1.02)} 70%{transform:scale(.99)} }
.ipc-ico  { font-size:22px; margin-bottom:5px }
.ipc-name { font-size:12px; font-weight:700; margin-bottom:3px; letter-spacing:var(--ls-tight) }
.ipc-ds   { font-size:10px; color:var(--text3); line-height:1.5; letter-spacing:var(--ls-tight) }

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