/* ═══════════════════════════════════════════
   THE COMPOUNDING CHRONICLES
   shared.css — Complete Design System
   Shriram AMC
═══════════════════════════════════════════ */
:root{
  --y:#F5A800;--a:#BF6D00;--da:#8B5000;
  --cr:#FFF9EE;--cr2:#FFF3D0;--cr3:#FFEEB0;
  --ink:#1A0F00;--soft:#5C3D00;--mu:#9C7A40;
  --w:#FFFFFF;
  --g:#0F6E56;--gl:#E1F5EE;--gm:#2D8659;
  --rd:#993C1D;--rl:#FAECE7;
  --bl:#1D4E89;--bll:#E6F1FB;
  --pu:#534AB7;--pul:#EEEDFE;
  --bd:rgba(26,15,0,.1);--bds:rgba(26,15,0,.2);
  --sh1:0 1px 6px rgba(26,15,0,.06);
  --sh2:0 2px 16px rgba(26,15,0,.08);
  --sh3:0 4px 28px rgba(26,15,0,.12);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-f:9999px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{font-family:'DM Sans',sans-serif;background:var(--cr);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.syne{font-family:'Syne',sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:'DM Sans',sans-serif;}

/* ── PAGE WRAPPER ─── */
.page{max-width:480px;margin:0 auto;padding:0 0 80px;min-height:100vh;position:relative;}

/* ── YOU BANNER ─── */
.you-banner{
  background:linear-gradient(135deg,var(--y),var(--a));
  padding:10px 16px;display:flex;align-items:center;gap:10px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(191,109,0,.35);
}
.yb-av{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:12px;font-weight:800;color:var(--ink);
  flex-shrink:0;
}
.yb-info{flex:1;}
.yb-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:var(--ink);}
.yb-status{font-size:11px;color:rgba(26,15,0,.65);}
.yb-you{
  font-family:'Syne',sans-serif;font-size:9px;font-weight:800;
  background:var(--ink);color:var(--y);padding:3px 8px;border-radius:var(--r-f);
  letter-spacing:.08em;text-transform:uppercase;
}

/* ── TREE SCENE ─── */
.tree-scene{
  width:100%;height:160px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#C8E6FF 0%,#A8D5F5 40%,#FFF9EE 100%);
  border-bottom:2px solid rgba(245,168,0,.2);
}
.tree-scene svg{width:100%;height:100%;}
.tree-season-badge{
  position:absolute;top:8px;right:10px;
  font-size:10px;font-weight:600;color:var(--ink);
  background:rgba(255,249,238,.85);backdrop-filter:blur(4px);
  padding:3px 9px;border-radius:var(--r-f);border:1px solid var(--bd);
}

/* ── LIFECYCLE BAR ─── */
.lifecycle{
  background:var(--w);border-bottom:1px solid var(--bd);
  padding:10px 16px;overflow-x:auto;
  display:flex;align-items:center;gap:0;
  scrollbar-width:none;
}
.lifecycle::-webkit-scrollbar{display:none;}
.lc-node{
  display:flex;flex-direction:column;align-items:center;
  min-width:56px;opacity:.4;transition:opacity .3s;
}
.lc-node.done{opacity:.65;}
.lc-node.active{opacity:1;}
.lc-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--bd);border:2px solid transparent;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.lc-node.active .lc-dot{
  background:var(--y);border-color:var(--a);
  transform:scale(1.5);box-shadow:0 0 0 4px rgba(245,168,0,.2);
}
.lc-node.done .lc-dot{background:var(--g);border-color:var(--gm);}
.lc-line{flex:1;height:2px;background:var(--bd);margin-top:-6px;min-width:16px;transition:background .5s;}
.lc-line.done{background:var(--g);}
.lc-age{font-size:10px;color:var(--mu);margin-top:5px;font-weight:500;}
.lc-role{font-size:9px;color:var(--mu);text-align:center;line-height:1.2;margin-top:1px;}

/* ── METERS ROW ─── */
.meters{display:flex;gap:6px;padding:10px 16px 0;}
.meter{
  flex:1;background:var(--w);border:1px solid var(--bd);
  border-radius:var(--r-md);padding:8px 10px;
  box-shadow:var(--sh1);
}
.m-icon{font-size:14px;margin-bottom:3px;}
.m-label{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.m-val{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:4px;}
.m-val.col-g{color:var(--g);}
.m-val.col-y{color:var(--a);}
.m-val.col-r{color:var(--rd);}
.m-track{height:4px;background:var(--bd);border-radius:2px;overflow:hidden;}
.m-fill{height:100%;border-radius:2px;transition:width .9s cubic-bezier(.34,1.56,.64,1);}
.m-fill.wf{background:linear-gradient(90deg,var(--g),var(--gm));}
.m-fill.mf{background:linear-gradient(90deg,var(--y),var(--a));}
.m-fill.ef{background:linear-gradient(90deg,#1D4E89,#2D6FBB);}
.m-fill.bf{background:linear-gradient(90deg,var(--pu),#7B74D4);}
.m-pulse{animation:mpulse .6s ease;}
@keyframes mpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ── CHAPTER HEADER ─── */
.ch-bar{
  display:flex;align-items:center;gap:6px;
  padding:12px 16px 6px;
}
.ch-bar-pips{display:flex;gap:3px;flex:1;}
.ch-pip{flex:1;height:3px;border-radius:2px;background:var(--bd);transition:background .35s;}
.ch-pip.d{background:var(--g);}
.ch-pip.a{background:var(--y);}
.ch-tag-text{font-size:10px;color:var(--mu);white-space:nowrap;letter-spacing:.04em;}
.chapter-header{padding:4px 16px 10px;}
.ch-eyebrow{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;display:flex;align-items:center;gap:6px;}
.ch-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--y);}
.ch-title{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;line-height:1.12;letter-spacing:-.01em;}

/* ── SCENE PANEL ─── */
.scene-panel{
  background:var(--w);margin:0 16px 10px;
  border-radius:var(--r-lg);border:1px solid var(--bd);
  overflow:hidden;box-shadow:var(--sh2);
  animation:cardin .3s ease;
}
@keyframes cardin{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.scene-story{
  padding:14px 16px;font-size:13.5px;line-height:1.72;color:var(--soft);
  border-bottom:1px solid var(--bd);
}
.scene-story b,.scene-story strong{color:var(--ink);font-weight:500;}
.scene-story .amt{font-family:'Syne',sans-serif;font-weight:700;color:var(--a);}
/* Characters in scene */
.scene-chars{
  display:flex;justify-content:space-around;align-items:flex-end;
  padding:16px 16px 0;
  background:linear-gradient(180deg,#FFF8DC 0%,#FFE88A 100%);
  min-height:110px;border-bottom:1px solid rgba(245,168,0,.2);
}
.char-wrap{display:flex;flex-direction:column;align-items:center;}
.char-fig{position:relative;animation:idle 2.8s ease-in-out infinite;}
.char-fig.you-char{animation-delay:0s;}
.char-fig.ram-char{animation-delay:.5s;}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.char-lbl{
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--r-f);margin-top:5px;
}
.char-lbl.you{background:var(--ink);color:var(--y);}
.char-lbl.ram{background:var(--g);color:#fff;}
.char-speech{
  max-width:105px;font-size:11px;line-height:1.42;
  padding:6px 9px;margin-bottom:7px;
  border-radius:10px 10px 10px 2px;
  border:1px solid var(--bd);background:var(--w);
  animation:bubblein .3s cubic-bezier(.34,1.56,.64,1);
}
.char-speech.ram-sp{
  border-radius:10px 10px 2px 10px;
  background:var(--gl);border-color:rgba(15,110,86,.2);color:#085041;
}
@keyframes bubblein{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ── CHAT WIDGET ─── */
.chat-widget{overflow:hidden;}
.chat-hdr{
  background:#075E54;padding:9px 14px;
  display:flex;align-items:center;gap:9px;
}
.chat-hdr-av{
  width:30px;height:30px;border-radius:50%;
  background:#128C7E;display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:11px;font-weight:800;color:#fff;
  flex-shrink:0;
}
.chat-hdr-name{font-size:13px;font-weight:600;color:#fff;}
.chat-hdr-sub{font-size:10px;color:rgba(255,255,255,.65);}
.chat-hdr-dots{margin-left:auto;display:flex;gap:3px;}
.chat-hdr-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);}
.chat-msgs{background:#ECE5DD;padding:10px;display:flex;flex-direction:column;gap:5px;}
.msg{
  max-width:82%;padding:7px 11px;font-size:12.5px;line-height:1.45;
  position:relative;animation:msgin .2s ease;
}
@keyframes msgin{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.msg.you{
  align-self:flex-end;background:#DCF8C6;
  border-radius:8px 8px 2px 8px;
}
.msg.ram{
  align-self:flex-start;background:#fff;
  border-radius:8px 8px 8px 2px;
}
.msg.sys{
  align-self:center;background:rgba(0,0,0,.1);color:#555;
  font-size:11px;padding:3px 10px;border-radius:var(--r-f);
}
.msg-time{font-size:9px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px;}

/* ── EFFECT TAGS ─── */
.effect-row{display:flex;gap:5px;flex-wrap:wrap;padding:8px 16px 0;}
.eff-tag{
  font-size:11px;font-weight:500;padding:3px 10px;
  border-radius:var(--r-f);display:inline-flex;align-items:center;gap:4px;
}
.eff-tag.up-w{background:#E1F5EE;color:#085041;}
.eff-tag.dn-w{background:#FAECE7;color:#712B13;}
.eff-tag.up-m{background:#FFF3C0;color:#7A5A00;}
.eff-tag.dn-m{background:#FAECE7;color:#712B13;}
.eff-tag.up-e{background:#E6F1FB;color:#185FA5;}
.eff-tag.dn-e{background:#FAECE7;color:#712B13;}
.eff-tag.up-b{background:#EEEDFE;color:#3C3489;}
.eff-tag.dn-b{background:#FAECE7;color:#712B13;}

/* ── CHOICE SECTION ─── */
.choice-section{padding:10px 16px;}
.choice-divider{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.cd-line{flex:1;height:1px;background:var(--bd);}
.cd-text{
  font-family:'Syne',sans-serif;font-size:10px;font-weight:800;
  color:var(--mu);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.choice-card{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--w);border:2px solid var(--bd);border-radius:var(--r-lg);
  padding:13px 14px;cursor:pointer;width:100%;text-align:left;
  transition:all .15s cubic-bezier(.34,1.56,.64,1);
  margin-bottom:8px;box-shadow:var(--sh1);
}
.choice-card:hover:not([disabled]){
  border-color:var(--y);background:#FFFBF0;
  transform:translateY(-2px);box-shadow:0 5px 16px rgba(245,168,0,.22);
}
.choice-card[disabled]{cursor:default;}
.choice-card.picked-w{border-color:var(--g)!important;background:var(--gl)!important;}
.choice-card.picked-m{border-color:var(--a)!important;background:var(--cr2)!important;}
.choice-card.picked-l{border-color:#D85A30!important;background:var(--rl)!important;}
.choice-badge{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cr);border:1.5px solid var(--bd);
  font-family:'Syne',sans-serif;font-size:11px;font-weight:800;color:var(--soft);
  margin-top:1px;transition:all .2s;
}
.choice-card.picked-w .choice-badge{background:var(--g);color:#fff;border-color:var(--g);}
.choice-card.picked-m .choice-badge{background:var(--a);color:#fff;border-color:var(--a);}
.choice-card.picked-l .choice-badge{background:#D85A30;color:#fff;border-color:#D85A30;}
.choice-body{}
.choice-title{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px;line-height:1.3;}
.choice-sub{font-size:12px;color:var(--mu);line-height:1.4;}
.choice-tag{
  display:inline-block;font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:var(--r-f);margin-top:4px;
}
.ct-smart{background:#E1F5EE;color:#085041;}
.ct-risk{background:#FAECE7;color:#712B13;}
.ct-balance{background:#FFF3C0;color:#7A5A00;}

/* ── OUTCOME ─── */
.outcome-wrap{padding:0 16px 10px;animation:slideup .35s ease;}
@keyframes slideup{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.outcome-story{
  border-radius:var(--r-lg);padding:14px 16px;
  font-size:13px;line-height:1.72;margin-bottom:8px;
  border:1px solid transparent;
}
.outcome-story.ow{background:var(--gl);color:#085041;border-color:rgba(15,110,86,.2);border-left:4px solid var(--g);}
.outcome-story.om{background:var(--cr2);color:var(--soft);border-color:rgba(191,109,0,.2);border-left:4px solid var(--a);}
.outcome-story.ol{background:var(--rl);color:#712B13;border-color:rgba(153,60,29,.18);border-left:4px solid #D85A30;}
.outcome-icon{font-size:18px;margin-bottom:6px;}
.concept-card{
  background:var(--pul);border:1px solid rgba(83,74,183,.2);
  border-radius:var(--r-md);padding:11px 14px;
  font-size:12.5px;line-height:1.6;color:#26215C;margin-bottom:8px;
}
.concept-label{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pu);margin-bottom:4px;display:flex;align-items:center;gap:5px;
}
.flashfwd-card{
  background:var(--ink);border-radius:var(--r-md);
  padding:12px 15px;font-size:13px;color:var(--cr);
  line-height:1.65;margin-bottom:8px;
}
.ff-label{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--y);margin-bottom:5px;
}
.echo-note{
  background:var(--cr2);border:1px solid rgba(191,109,0,.2);
  border-radius:var(--r-md);padding:10px 13px;
  font-size:12px;color:var(--soft);line-height:1.5;margin-bottom:8px;
  display:flex;align-items:flex-start;gap:8px;
}
.echo-icon{font-size:14px;flex-shrink:0;margin-top:1px;}

/* ── GAP BAR ─── */
.gap-wrap{
  background:var(--w);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:11px 14px;margin-bottom:8px;
}
.gap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.gap-who{font-size:11px;font-weight:500;}
.gap-amt{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;}
.gap-track{height:6px;background:var(--bd);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.gap-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.gf-you{background:linear-gradient(90deg,var(--g),var(--gm));}
.gf-ram{background:linear-gradient(90deg,var(--y),var(--a));}

/* ── NEXT BUTTON ─── */
.next-btn{
  display:block;width:calc(100% - 32px);margin:4px 16px 12px;
  padding:15px;background:var(--ink);color:var(--cr);
  font-family:'Syne',sans-serif;font-size:14px;font-weight:800;
  border:none;border-radius:var(--r-lg);cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.28);transition:all .15s;
  letter-spacing:.02em;
}
.next-btn:hover:not([disabled]){background:var(--da);transform:translateY(-1px);box-shadow:0 5px 0 rgba(0,0,0,.28);}
.next-btn:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.28);}
.next-btn[disabled]{opacity:.28;cursor:default;box-shadow:none;}
.next-btn.gold{background:linear-gradient(135deg,var(--y),var(--a));color:var(--ink);box-shadow:0 4px 0 var(--da);}

/* ── BUDGET DRAG MECHANIC ─── */
.budget-card{
  background:var(--w);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:16px;margin:0 16px 10px;box-shadow:var(--sh2);
}
.budget-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;margin-bottom:14px;color:var(--ink);}
.budget-salary{
  text-align:center;padding:12px;background:var(--cr2);
  border-radius:var(--r-md);margin-bottom:14px;border:1px solid rgba(191,109,0,.2);
}
.bs-label{font-size:11px;color:var(--mu);margin-bottom:4px;}
.bs-amt{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:var(--a);}
.budget-row{margin-bottom:12px;}
.br-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.br-label{font-size:12px;color:var(--soft);}
.br-amt{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;}
.br-track{height:10px;background:var(--bd);border-radius:5px;overflow:visible;position:relative;cursor:pointer;}
.br-fill{height:100%;border-radius:5px;transition:width .2s;position:relative;}
.br-fill.fixed-f{background:linear-gradient(90deg,#D85A30,#E87050);}
.br-fill.sip-f{background:linear-gradient(90deg,var(--g),var(--gm));}
.br-fill.spend-f{background:linear-gradient(90deg,var(--y),var(--a));}
.br-handle{
  position:absolute;right:-8px;top:-5px;
  width:20px;height:20px;background:var(--w);
  border:2px solid var(--g);border-radius:50%;
  box-shadow:0 2px 8px rgba(15,110,86,.3);
  cursor:grab;
}
.sip-slider{width:100%;accent-color:var(--g);height:4px;margin-top:4px;}
.budget-summary{
  background:var(--cr2);border-radius:var(--r-md);padding:10px 14px;
  display:flex;gap:10px;
}
.bsum-item{flex:1;text-align:center;}
.bsum-lbl{font-size:10px;color:var(--mu);}
.bsum-val{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;}

/* ── HOLD-TO-RESIST MECHANIC ─── */
.panic-card{
  background:var(--w);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:16px;margin:0 16px 10px;box-shadow:var(--sh2);text-align:center;
}
.panic-market{
  background:var(--rl);border-radius:var(--r-md);padding:12px;
  margin-bottom:12px;border:1px solid rgba(153,60,29,.2);
}
.pm-label{font-size:11px;color:var(--rd);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.pm-val{font-family:'Syne',sans-serif;font-size:32px;font-weight:800;color:var(--rd);}
.panic-portfolio{
  display:flex;justify-content:center;gap:14px;margin-bottom:14px;
}
.pp-item{text-align:center;}
.pp-lbl{font-size:10px;color:var(--mu);}
.pp-val{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;}
.pp-val.red{color:var(--rd);}
.hold-instruction{font-size:12px;color:var(--soft);margin-bottom:14px;line-height:1.5;}
.hold-btn-wrap{position:relative;margin-bottom:10px;}
.hold-btn{
  width:100%;padding:18px;
  background:linear-gradient(135deg,var(--g),var(--gm));
  color:#fff;border:none;border-radius:var(--r-lg);
  font-family:'Syne',sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 4px 0 var(--da);transition:transform .1s;
}
.hold-btn:active{transform:scale(.98);}
.hold-progress{
  position:absolute;top:0;left:0;bottom:0;
  background:rgba(255,255,255,.25);border-radius:var(--r-lg);
  transition:width .1s linear;pointer-events:none;
}
.hold-timer{
  font-family:'Syne',sans-serif;font-size:28px;font-weight:800;
  color:var(--g);margin-bottom:4px;
}
.sell-btn{
  width:100%;padding:12px;
  background:none;border:2px solid rgba(153,60,29,.3);
  color:var(--rd);border-radius:var(--r-md);
  font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;
}
.sell-btn:hover{background:var(--rl);}
.panic-hint{font-size:11px;color:var(--mu);margin-top:8px;}

/* ── TIMER MECHANIC ─── */
.timer-bar{
  height:6px;background:var(--bd);border-radius:3px;
  overflow:hidden;margin:0 16px 10px;
}
.timer-fill{
  height:100%;background:linear-gradient(90deg,var(--g),var(--y),var(--rd));
  border-radius:3px;transition:width .1s linear;
}
.timer-label{
  text-align:center;font-family:'Syne',sans-serif;font-size:13px;
  font-weight:700;color:var(--rd);margin-bottom:4px;padding:0 16px;
}

/* ── LEVEL TRANSITION ─── */
.level-screen{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 24px;text-align:center;
  background:linear-gradient(180deg,var(--cr) 0%,var(--cr2) 100%);
}
.level-badge{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--y),var(--a));
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:var(--ink);
  margin-bottom:16px;
  box-shadow:0 0 0 0 rgba(245,168,0,.4);
  animation:lvlpulse 2s ease-in-out infinite;
}
@keyframes lvlpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,168,0,.4)}50%{box-shadow:0 0 0 20px rgba(245,168,0,0)}}
.level-num{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;}
.level-title{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em;}
.level-sub{font-size:14px;color:var(--soft);line-height:1.6;margin-bottom:24px;}
.level-tips{width:100%;margin-bottom:24px;}
.level-tip{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--w);border:1px solid var(--bd);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:8px;font-size:13px;color:var(--soft);line-height:1.5;text-align:left;
  box-shadow:var(--sh1);
}
.lt-icon{font-size:16px;flex-shrink:0;}

/* ── INTRO SCREEN ─── */
.intro-screen{
  min-height:100vh;background:linear-gradient(180deg,var(--ink) 0%,var(--soft) 100%);
  display:flex;flex-direction:column;padding:0 0 32px;overflow:hidden;
}
.intro-hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px 20px;text-align:center;position:relative;
}
.intro-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--y);color:var(--ink);
  font-family:'Syne',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-f);margin-bottom:20px;
}
.intro-badge .dot{width:5px;height:5px;background:var(--ink);border-radius:50%;}
.intro-title{
  font-family:'Syne',sans-serif;font-size:38px;font-weight:800;
  line-height:1.05;letter-spacing:-.02em;
  color:var(--w);margin-bottom:10px;
}
.intro-title em{color:var(--y);font-style:normal;}
.intro-tagline{font-size:14px;color:rgba(255,255,255,.6);line-height:1.6;}
/* Floating coins */
.coin{
  position:absolute;width:24px;height:24px;border-radius:50%;
  background:var(--y);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--ink);
  animation:coinfloat 4s ease-in-out infinite;
}
@keyframes coinfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}

/* ── CHARACTER CREATION ─── */
.creation-panel{
  background:var(--w);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:24px 20px;margin-top:auto;
}
.cp-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;margin-bottom:6px;}
.cp-sub{font-size:13px;color:var(--soft);margin-bottom:20px;line-height:1.5;}
.cp-section{margin-bottom:18px;}
.cp-label{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.name-input{
  width:100%;padding:12px 14px;font-family:'Syne',sans-serif;font-size:16px;
  font-weight:700;border:2px solid var(--bd);border-radius:var(--r-md);
  background:var(--cr);color:var(--ink);outline:none;
  transition:border-color .2s;
}
.name-input:focus{border-color:var(--y);}
.name-input::placeholder{color:var(--mu);font-weight:400;}
/* Skin selector */
.skin-opts{display:flex;gap:10px;}
.skin-opt{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.skin-opt.selected{border-color:var(--y);transform:scale(1.2);box-shadow:0 0 0 3px rgba(245,168,0,.3);}
/* Hair selector */
.hair-opts{display:flex;gap:8px;flex-wrap:wrap;}
.hair-opt{
  width:60px;height:52px;border-radius:var(--r-md);cursor:pointer;
  border:2px solid var(--bd);background:var(--cr);
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.hair-opt.selected{border-color:var(--y);background:#FFF3C0;}
.hair-opt svg{pointer-events:none;}
/* Backstory selector */
.backstory-opts{display:flex;flex-direction:column;gap:8px;}
.bs-opt{
  display:flex;align-items:flex-start;gap:12px;
  border:2px solid var(--bd);border-radius:var(--r-lg);padding:13px 14px;
  cursor:pointer;background:var(--w);transition:all .15s;
}
.bs-opt.selected{border-color:var(--y);background:#FFFBF0;}
.bs-opt-icon{font-size:22px;flex-shrink:0;margin-top:1px;}
.bs-opt-title{font-size:13px;font-weight:500;margin-bottom:2px;}
.bs-opt-desc{font-size:11px;color:var(--mu);}
.bs-opt-stat{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap;}
.bs-stat-tag{font-size:10px;padding:2px 7px;border-radius:var(--r-f);background:var(--cr2);color:var(--soft);}
/* Preview */
.char-preview{
  display:flex;justify-content:center;align-items:center;gap:32px;
  padding:16px;background:linear-gradient(180deg,#FFF8DC 0%,#FFE98A 100%);
  border-radius:var(--r-lg);margin-bottom:18px;border:1px solid rgba(245,168,0,.3);
}
.cp-char-label{text-align:center;margin-top:6px;}
.cpl-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;}
.cpl-role{font-size:10px;color:var(--mu);}

/* ── END SCREEN ─── */
.end-scene{
  background:linear-gradient(180deg,#C8E6FF 0%,#FFF9EE 100%);
  padding:20px 16px 0;min-height:180px;
  display:flex;align-items:flex-end;justify-content:space-around;
}
.end-header{text-align:center;padding:20px 16px 14px;}
.end-badge{
  display:inline-block;background:var(--y);
  font-family:'Syne',sans-serif;font-size:14px;font-weight:800;
  color:var(--ink);padding:8px 20px;border-radius:var(--r-f);
  box-shadow:0 3px 0 var(--da);margin-bottom:14px;
}
.end-corpus{font-family:'Syne',sans-serif;font-size:44px;font-weight:800;color:var(--g);letter-spacing:-.02em;line-height:1;}
.end-corpus-label{font-size:12px;color:var(--mu);margin-bottom:4px;}
.end-corpus-note{font-size:11px;color:var(--mu);margin-top:4px;}
.badge-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:10px 0;}
.bdg{font-size:11px;font-weight:500;padding:4px 11px;border-radius:var(--r-md);}
.bdg.g{background:#E1F5EE;color:#085041;}
.bdg.r{background:#FAECE7;color:#712B13;}
.bdg.a{background:var(--cr2);color:var(--da);}
.bdg.p{background:var(--pul);color:#3C3489;}
/* Comparison */
.compare-block{padding:0 16px;margin-bottom:14px;}
.cb-inner{background:var(--w);border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh1);}
.cb-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.cb-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:12px;font-weight:800;}
.cb-av.you{background:#FFF0B3;color:var(--a);}
.cb-av.ram{background:var(--gl);color:var(--g);}
.cb-info{flex:1;}
.cb-name{font-size:13px;font-weight:500;}
.cb-tag{font-size:10px;color:var(--mu);}
.cb-amt{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;}
.cb-track{height:7px;background:var(--bd);border-radius:4px;overflow:hidden;margin-top:4px;}
.cb-fill{height:100%;border-radius:4px;transition:width 1.2s ease;}
/* Gap insight */
.gap-insight{
  background:var(--cr2);border:1px solid rgba(191,109,0,.2);
  border-radius:var(--r-lg);padding:14px 16px;
  font-size:13px;color:var(--soft);line-height:1.65;margin:0 16px 14px;
}
.gi-win{background:var(--gl);border-color:rgba(15,110,86,.2);color:#085041;}
/* Reveal box */
.reveal-box{
  background:var(--ink);border-radius:var(--r-lg);
  padding:22px 20px;margin:0 16px 12px;text-align:center;
  position:relative;overflow:hidden;
}
.reveal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--y),var(--a));}
.reveal-eq{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;color:#fff;margin-bottom:6px;}
.reveal-eq .plus{color:var(--y);}
.reveal-sub{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:20px;}
.cta-btn{
  display:block;width:100%;padding:15px;
  background:linear-gradient(135deg,var(--y),var(--a));color:var(--ink);
  font-family:'Syne',sans-serif;font-size:14px;font-weight:800;
  border:none;border-radius:var(--r-md);cursor:pointer;
  box-shadow:0 3px 0 var(--da);transition:all .15s;
}
.cta-btn:hover{opacity:.9;transform:translateY(-1px);}
.disc-text{font-size:11px;color:var(--mu);text-align:center;line-height:1.6;padding:0 16px;margin-bottom:8px;}
.replay-btn{
  display:block;width:calc(100% - 32px);margin:0 16px;padding:12px;
  background:none;border:1px solid var(--bd);border-radius:var(--r-md);
  font-size:13px;color:var(--soft);cursor:pointer;text-align:center;
  transition:background .15s;margin-bottom:12px;
}
.replay-btn:hover{background:rgba(26,15,0,.04);}

/* ── ENDING CARDS (cinematic) ─── */
.ending-card{
  background:var(--w);border-radius:var(--r-lg);border:1px solid var(--bd);
  padding:20px 16px;margin:0 16px 10px;
  animation:cardin .5s ease;box-shadow:var(--sh2);
}
.ec-scene{font-size:28px;text-align:center;margin-bottom:12px;}
.ec-title{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;margin-bottom:8px;text-align:center;}
.ec-text{font-size:13.5px;line-height:1.75;color:var(--soft);}
.ec-text b{color:var(--ink);}

/* ── SHARE CARD ─── */
.share-card{
  background:linear-gradient(135deg,var(--ink),var(--soft));
  border-radius:var(--r-lg);padding:20px 16px;margin:0 16px 14px;
  text-align:center;
}
.sc-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;}
.sc-stat{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--y);margin:4px 0;}
.sc-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px;}

/* ── PARTICLES ─── */
#pc{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:9999;}
.pt{position:absolute;border-radius:50%;animation:ptfall 1.4s ease forwards;}
@keyframes ptfall{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0) rotate(180deg);opacity:0}}
/* Page shake */
.shaking{animation:pgshk .45s ease!important;}
@keyframes pgshk{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(8px)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}}

/* ── MARKET BADGE ─── */
.mkt-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:4px 10px;
  border-radius:var(--r-f);margin-bottom:10px;
}
.mkt-up{background:#E1F5EE;color:var(--g);}
.mkt-dn{background:#FAECE7;color:var(--rd);}
.mkt-flat{background:var(--cr2);color:var(--da);}

/* ── UTIL ─── */
.pad{padding:0 16px;}
.mt-sm{margin-top:8px;}
.mt-md{margin-top:16px;}
.ta-c{text-align:center;}

/* ── DESKTOP WRAPPER ────────────────────────── */
@media (min-width: 520px) {
  body {
    background: linear-gradient(135deg, #1A0F00 0%, #3D1F00 50%, #1A0F00 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
  }
  .page, #app, .ending-wrap {
    max-width: 480px;
    width: 100%;
    background: var(--cr);
    min-height: 100vh;
    box-shadow: 0 0 80px rgba(0,0,0,.5);
    position: relative;
  }
  /* Level/ending screens that do min-height:100vh already look fine */
  .level-screen {
    min-height: 100vh;
  }
  .intro-screen {
    min-height: 100vh;
  }
}

@media (min-width: 520px) {
  /* Subtle desktop watermark in the dark gutters */
  body::before {
    content: 'THE COMPOUNDING CHRONICLES';
    position: fixed;
    left: 0;
    right: 480px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .25em;
    color: rgba(245,168,0,.12);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
  }
  body::after {
    content: 'SHRIRAM AMC';
    position: fixed;
    left: 480px;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .25em;
    color: rgba(245,168,0,.12);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
  }
}