/* =============================================================================
 * app.css  the whole theme (one stylesheet, no preprocessor).
 * BREADCRUMBS:
 * • Design tokens live in :root (--bg/--panel/--gold/--blue/... + dice colors).
 *   Star-Wars-ish: near-black bg, gold/amber accents.
 * • Layout: header.top + .wrap; the builder is a 3-column grid (.builder:
 *   stepnav | main | rail) that collapses to one column under 1080px. The
 *   sticky stepnav/rail carry z-index:30  without it the scrolling main panel
 *   painted OVER them in single-column mode (a real bug we fixed).
 * • Dice: .die-chip (colored dice), .ffg-sym/.sym-svg (result glyphs),
 *   .force-die (the white Force d12 in the Force heading).
 * • Play Mode: .play/.playhead/.trk (trackers), .rollcard/.rollgrid, .infocard
 *   (cards), .logentry (explained roll log), .forcepool/.resbar (pips/money/XP).
 * • Popups: .drawer (slide-in) and .popup-bg/.popup (centered rule popup).
 * • Components are added in-place as features grew; search by class name.
 * ===========================================================================*/
/* SWCharGen Web  Star Wars FFG character builder theme */
:root{
  --bg:#05070d; --bg2:#0b0f1a; --panel:#10151f; --panel2:#161d2b;
  --line:#243049; --line2:#33415e;
  --ink:#e8edf6; --ink-dim:#9aa7bf; --ink-faint:#697590;
  --gold:#ffcf45; --gold-dim:#b9933a; --blue:#4ea3ff; --red:#ff5d52; --green:#46d6a0;
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --r:10px;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #142036 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 100%, #131a0f 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font:15px/1.5 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:.02em}
.display{font-family:"Trebuchet MS","Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:.18em}

/* ---- top bar ---- */
header.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:12px 22px;background:linear-gradient(#0b0f1ae6,#0b0f1ab3);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);
}
header.top .brand{display:flex;align-items:baseline;gap:10px}
header.top .brand b{color:var(--gold);font-size:20px;letter-spacing:.22em;text-transform:uppercase}
header.top .brand span{color:var(--ink-faint);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
header.top nav{display:flex;gap:6px;margin-left:auto}
header.top nav a{
  padding:8px 16px;border-radius:8px;color:var(--ink-dim);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:12.5px;
}
header.top nav a:hover{background:var(--panel2);color:var(--ink);text-decoration:none}
header.top nav a.active{background:var(--gold);color:#1a1300}
.authchip{display:flex;align-items:center;gap:8px;margin-left:14px}
.authchip .auser{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-dim);font-weight:600}
.authchip .gmbadge{background:var(--gold);color:#1a1300;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;letter-spacing:.08em}
.savestat{font-size:12px;font-weight:800;white-space:nowrap;padding:3px 10px;border-radius:8px;border:1px solid transparent;letter-spacing:.02em}
.savestat.saving{color:#1a1300;background:var(--gold)}
.savestat.saved{color:#04241a;background:var(--green)}
.savestat.offline{color:#1a1300;background:#ff9d2e}
.savestat.local{color:var(--ink-dim);background:var(--panel2);border-color:var(--line)}
.savestat:empty{display:none}
@keyframes savepulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.savestat.flash{animation:savepulse .35s ease}

/* ---- Master Console (GM) ---- */
.mono{font-family:ui-monospace,Consolas,Menlo,monospace}
.gmowner{display:flex;align-items:center;gap:12px;margin:18px 0 10px;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.gmowner .gmavatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#000}
.gmowner .gmownername{font-weight:700;color:var(--ink);font-size:15px}
.gmowner .gmownerid{font-size:11px;color:var(--ink-faint)}
/* GM Bestiary stat block (FFG adversary card layout, compact for the drawer) */
.statblock .chars{grid-template-columns:repeat(6,1fr);gap:6px}
.statblock .charbox{padding:8px 3px;border-radius:9px}
.statblock .charbox .ring{width:44px;height:44px;font-size:19px;margin-bottom:4px;border-width:2px}
.statblock .charbox .nm{font-size:9px}
.statblock .tbl td,.statblock .tbl th{padding:5px 8px;font-size:13px}
.statblock .tbl.skills td:nth-child(2),.statblock .tbl.skills td:nth-child(3){text-align:center}
@media(max-width:520px){.statblock .chars{grid-template-columns:repeat(3,1fr)}}

/* ---- layout ---- */
.wrap{max-width:1240px;margin:0 auto;padding:22px}
.builder{display:grid;grid-template-columns:230px 1fr 290px;gap:18px;align-items:start}
@media(max-width:1080px){.builder{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel.pad{padding:18px 20px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:8px}

/* ---- step nav ---- */
.stepnav{position:sticky;top:74px;z-index:30;background:var(--panel)}
.stepnav .guidelink{display:block;text-align:center;margin:8px;padding:9px;border-radius:9px;background:var(--panel2);border:1px solid var(--gold-dim);color:var(--gold);font-weight:800;letter-spacing:.03em;text-decoration:none}
.stepnav .guidelink:hover,.stepnav .guidelink.active{background:var(--gold);color:#1a1300}
.stepnav ol{list-style:none;margin:0;padding:8px}
.stepnav li a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--ink-dim);font-weight:600;font-size:13.5px;
}
.stepnav li a:hover{background:var(--panel2);color:var(--ink);text-decoration:none}
.stepnav li a.active{background:linear-gradient(90deg,#1e2842,#10151f);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.stepnav .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--ink);font-size:12px;font-weight:700}
.stepnav li a.done .num{background:var(--green);color:#04150d}
.stepnav .badge{margin-left:auto;font-size:11px;color:var(--ink-faint)}

/* ---- summary rail ---- */
.rail{position:sticky;top:74px;z-index:30;display:flex;flex-direction:column;gap:14px}
.xpbar{display:flex;flex-direction:column;gap:6px}
.xpbar .nums{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.xpbar .nums b{font-size:22px;color:var(--gold)}
/* XP ledger: Started / Spent / Remaining + per-category breakdown */
.xpledger{display:flex;flex-direction:column;gap:8px}
.xpl-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center}
.xpl-cell{display:flex;flex-direction:column;gap:2px;padding:6px 4px;border-radius:8px;background:var(--panel2)}
.xpl-cell span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-dim)}
.xpl-cell b{font-size:20px;font-variant-numeric:tabular-nums;color:var(--ink)}
.xpl-cell.big b{font-size:24px;color:var(--gold)}
.xpl-cell.big.over b{color:#ff6b6b}
.xpl-break{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.xpl-brow{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-faint)}
.xpl-brow em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
/* two-phase creation: phase banner + legality checklist */
.phasebar{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:10px;border:1px solid var(--line)}
.phasebar b{font-size:12px;letter-spacing:.12em}
.phasebar span{font-size:12.5px;color:var(--ink-dim)}
.phasebar.create{background:rgba(120,90,200,.12);border-color:rgba(150,120,230,.4)}
.phasebar.create b{color:#b9a3ff}
.phasebar.advance{background:rgba(80,160,110,.12);border-color:rgba(100,190,140,.4)}
.phasebar.advance b{color:var(--green)}
.checklist{margin-top:12px;padding:10px 14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.checklist.ok{border-color:rgba(100,190,140,.5)}
.checklist.ok b{color:var(--green)}
.checklist b{color:#ffb27d}
.checklist ul{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink-dim)}
.checklist li{margin:2px 0}
.meter{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.meter > i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}
.meter.over > i{background:var(--red)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center}
.stat .v{font-size:22px;font-weight:800;color:var(--ink)}
.stat .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.issues{font-size:12.5px;color:var(--red)}
.issues.ok{color:var(--green)}
.issues ul{margin:.3em 0 0;padding-left:18px}

/* ---- characteristics ring ---- */
.chars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:640px){.chars{grid-template-columns:repeat(3,1fr)}}
.charbox{text-align:center;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 6px}
.charbox .ring{width:62px;height:62px;margin:0 auto 6px;border-radius:50%;
  border:3px solid var(--gold-dim);display:grid;place-items:center;
  font-size:26px;font-weight:800;color:var(--gold);background:#0c1119}
.charbox .nm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.charbox .ctl{display:flex;gap:6px;justify-content:center;margin-top:8px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:600;font-size:13px}
.btn:hover{border-color:var(--gold-dim);color:var(--gold)}
.btn.primary{background:var(--gold);color:#1a1300;border-color:var(--gold)}
.btn.primary:hover{filter:brightness(1.08);color:#1a1300}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 9px;font-size:12px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn.round{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;font-size:17px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

input,select,textarea{
  background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;
  padding:9px 11px;font:inherit;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-dim)}
label.fld{display:block;margin-bottom:12px}
label.fld > span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}

/* ---- pick grid (species/career/spec) ---- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input[type=search]{max-width:300px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pick{cursor:pointer;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);transition:.12s}
.pick:hover{border-color:var(--gold-dim);transform:translateY(-2px)}
.pick.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 18px rgba(255,207,69,.12)}
.pick h4{margin:0 0 4px;color:var(--ink)}
.pick .meta{font-size:12px;color:var(--ink-faint)}
.pick .chvals{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.chip{font-size:11px;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-dim)}
.chip b{color:var(--gold)}
.chip.on.bad{border-color:var(--red);color:var(--red)}
.havestar{color:var(--gold);font-weight:800;font-size:12px}
.havestar.cap{color:var(--green)}
.tbl tr.haverow{background:rgba(255,207,69,.07)}
.attach-preview{background:var(--panel2);border:1px solid var(--gold-dim);border-radius:10px;padding:12px 14px}
.tcell.frnode{box-shadow:inset 0 0 0 2px var(--green)}
.frbadge{display:inline-block;font-size:9.5px;font-weight:800;color:#04241a;background:var(--green);border-radius:5px;padding:1px 5px;margin-top:3px;letter-spacing:.02em}
.src{font-size:11px;color:var(--ink-faint);font-style:italic}

/* ---- tables / skills ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;color:var(--ink-faint);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 10px;border-bottom:1px solid var(--line2)}
table.tbl td{padding:6px 10px;border-bottom:1px solid var(--line)}
table.tbl tr:hover td{background:#0e1420}
.pips{display:inline-flex;gap:3px;vertical-align:middle}
.pip{width:13px;height:13px;border-radius:3px;border:1px solid var(--line2);background:#0c1119}
.pip.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 5px rgba(255,207,69,.5)}
.pip.free{background:var(--green);border-color:var(--green)}
.tag{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--line2);color:var(--ink-dim)}
.tag.career{border-color:var(--gold-dim);color:var(--gold)}

/* ---- talent tree ---- */
.tree-wrap{overflow-x:auto;padding-bottom:8px}
.tree{position:relative;display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:30px 22px;padding:8px}
.tcell{position:relative;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:9px 10px;min-height:84px;z-index:2}
.tcell .tn{font-weight:700;font-size:13px;color:var(--ink)}
.tcell .ta{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.tcell.bought{border-color:var(--gold);background:linear-gradient(160deg,#2a2410,#161d2b);box-shadow:0 0 0 1px var(--gold)}
.tcell.buyable{border-color:var(--green);cursor:pointer}
.tcell.buyable:hover{background:#16241c}
.tcell.locked{opacity:.5}
.tcell .cost{position:absolute;top:-9px;right:8px;font-size:10px;background:var(--bg);border:1px solid var(--line2);
  border-radius:10px;padding:1px 7px;color:var(--gold)}
.tree-row-cost{font-size:11px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}
/* connection lines */
.tlink{position:absolute;background:var(--gold-dim);z-index:1}
.tlink.on{background:var(--gold);box-shadow:0 0 6px rgba(255,207,69,.6)}

/* ---- FFG dice symbols ---- */
.ffg-sym{display:inline-block;width:1.15em;text-align:center;font-weight:700;line-height:1}
.ffg-boost{color:#5bc0ff}.ffg-setback{color:#cfd6e4}.ffg-ability{color:#4cd07a}
.ffg-difficulty{color:#b06bff}.ffg-proficiency{color:#ffd23f}.ffg-challenge{color:#ff5d52}
.ffg-success{color:#ffd23f}.ffg-failure{color:#cfd6e4}.ffg-advantage{color:#ffd23f}
.ffg-threat{color:#ff8a3d}.ffg-triumph{color:#ffd23f}.ffg-despair{color:#cfd6e4}
.ffg-force,.ffg-forcepoint{color:#c89bff}.ffg-light{color:#fff}.ffg-dark{color:#222;text-shadow:0 0 2px #888}

/* ---- Play Mode ---- */
.play{display:flex;flex-direction:column;gap:14px}
.playhead{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.playhead .playid{min-width:200px}
.trackers{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.trk{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:8px 12px;text-align:center;min-width:84px}
.trk-l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.trk-ctl{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:4px}
.trk-v{font-size:18px;font-weight:800;min-width:54px}
.rollbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px}
.rollgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.rollcard{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px}
.rollcard:hover{border-color:var(--gold-dim)}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rc-name{font-weight:700;display:flex;align-items:center}
.rc-pool{margin:8px 0 4px;min-height:22px;display:flex;flex-wrap:wrap;gap:3px}
.rc-sub{font-size:11.5px;margin-top:2px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.infocard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.infocard .ic-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.infocard .ic-body{font-size:12.5px;line-height:1.45}
.infocard .ic-foot{margin-top:8px}
.rulelink{display:inline-block;font-size:11.5px;color:var(--gold);border:1px solid var(--gold-dim);
  border-radius:6px;padding:2px 8px;text-decoration:none}
.rulelink:hover{background:var(--gold);color:#1a1300;text-decoration:none}
details.fpcard{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;margin-bottom:8px}
details.fpcard > summary{list-style:none;cursor:pointer;padding:11px 14px;display:flex;align-items:center;gap:12px}
details.fpcard > summary::-webkit-details-marker{display:none}
details.fpcard > summary::before{content:'▸';color:var(--gold);transition:.15s}
details.fpcard[open] > summary::before{transform:rotate(90deg)}
details.fpcard .fp-name{font-weight:700;color:var(--ink)}
details.fpcard .fp-meta{font-size:12px}
details.fpcard .fp-roll{margin-left:auto}
.fp-body{padding:0 16px 14px 16px}
.fp-upgrades{display:flex;flex-direction:column;gap:6px}
.fp-up{background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:7px 10px}
.fp-up-name{font-weight:700;color:var(--ink-dim);display:block;font-size:13px;margin-bottom:2px}
.fp-up.toggle{cursor:pointer}
.fp-up.toggle:hover{border-color:var(--gold-dim)}
.fp-up.owned{border-color:var(--gold-dim);background:#1a1710}
.fp-up.owned .fp-up-name{color:var(--gold)}
.playresult{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;
  width:min(680px,94vw);background:var(--panel);border:1px solid var(--gold-dim);border-radius:12px;
  padding:12px 16px;box-shadow:var(--shadow);cursor:pointer}
/* live multiplayer table-roll dock (left side, Play screen) */
.teamfeed{position:fixed;left:0;top:120px;z-index:75;width:250px;height:74vh;
  background:var(--panel);border:1px solid var(--gold-dim);border-left:none;border-radius:0 12px 12px 0;
  box-shadow:var(--shadow);font-size:13px;display:flex;flex-direction:column;overflow:hidden}
.teamfeed.collapsed{width:auto;height:auto}
.teamfeed .tf-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;color:var(--gold)}
.teamfeed .tf-roll{border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.teamfeed .tf-who{font-size:12.5px}
.teamfeed .tf-verdict{font-weight:700;font-size:12px}
.teamfeed .tf-verdict.hit{color:var(--green)}
.teamfeed .tf-verdict.miss{color:var(--red)}
.teamfeed .tf-help{font-size:11px;color:var(--gold);margin-top:2px}
.teamfeed .tf-chat-log{flex:1 1 auto;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.teamfeed .tf-chat-msg{font-size:12px;line-height:1.35}
.teamfeed .tf-chat-msg b{color:var(--gold)}
.teamfeed .tf-chat-sys{font-size:11px;color:var(--ink-faint);font-style:italic;line-height:1.3}
.teamfeed .tf-chat-row{display:flex;gap:5px;padding:8px 10px;border-top:1px solid var(--line);flex:0 0 auto;background:var(--panel)}
.teamfeed .tf-chat-in{flex:1;min-width:0;font-size:12px;padding:5px 8px}
@media(max-width:900px){.teamfeed{top:auto;bottom:0;height:44vh}}
/* initiative tracker: docked on the RIGHT, opposite the table-roll feed */
.initfeed{position:fixed;right:0;top:120px;z-index:75;width:256px;max-height:74vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--gold-dim);border-right:none;border-radius:12px 0 0 12px;
  box-shadow:var(--shadow);font-size:13px}
.initfeed.collapsed{width:auto}
.initfeed .if-head{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);color:var(--gold)}
.initfeed .if-body{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.initfeed .if-list{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.initfeed .if-row{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:5px 7px}
.initfeed .if-pos{min-width:18px;height:18px;display:inline-grid;place-items:center;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:11px;font-weight:700}
.initfeed .if-name{font-size:12.5px}
.initfeed .if-res{font-size:11px}
.initfeed .if-ctl{display:flex;gap:2px;flex-wrap:wrap;max-width:74px;justify-content:flex-end}
.initfeed .if-ctl .btn.round.sm{width:22px;height:22px;padding:0;font-size:10px}
.initfeed .if-hpwrap{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.initfeed .if-hp{display:flex;align-items:center;gap:4px;font-size:11px}
.initfeed .if-hp-l{min-width:26px;font-weight:700}
.initfeed .if-hp .btn.round.sm{width:20px;height:20px;padding:0;font-size:11px}
@media(max-width:900px){.initfeed{top:auto;bottom:0;max-height:40vh}}
/* over encumbrance flag on stat/tracker boxes */
.stat.over,.trk.over{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.stat.over .v,.trk.over .trk-v{color:var(--red)}
.playresult .pr-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.playresult .pr-verdict{font-weight:800}
.playresult .pr-verdict.hit{color:var(--green)}
.playresult .pr-verdict.miss{color:var(--red)}
.playresult .faces{display:flex;gap:6px;flex-wrap:wrap}
.playresult .face{display:inline-flex;gap:2px;align-items:center;padding:3px 6px;border-radius:6px;background:#0c1119;border:1px solid var(--line)}

/* ---- dice chips + roller ---- */
.die-chip{display:inline-grid;place-items:center;border-radius:4px;font-weight:800;
  font-size:11px;line-height:1;vertical-align:-3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.die-difficulty,.die-challenge{border-radius:3px;transform:rotate(45deg)}
.die-difficulty span,.die-challenge span{transform:rotate(-45deg)}
.die-proficiency,.die-challenge{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.sym-svg{vertical-align:-3px}
.pooler{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.poolctl{display:flex;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:8px;padding:4px 8px}
.poolctl .lbl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-dim);min-width:96px}
.poolctl .cnt{min-width:18px;text-align:center;font-weight:700}
.rollout{background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;margin-top:12px}
.rollout .pool{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.rollout .faces{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;min-height:30px}
.rollout .face{display:inline-flex;gap:2px;align-items:center;padding:4px 7px;border-radius:7px;
  background:#0c1119;border:1px solid var(--line)}
.rollout .verdict{font-size:17px;font-weight:800}
.rollout .verdict.hit{color:var(--green)}
.rollout .verdict.miss{color:var(--red)}
.rollout .tally{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:13px}
.rollout .tally b{color:var(--ink)}

/* ---- centered info popup ---- */
.popup-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.popup-bg.open{display:flex}
.popup{background:var(--panel);border:1px solid var(--gold-dim);border-radius:14px;max-width:540px;width:100%;
  max-height:85vh;overflow:auto;box-shadow:0 16px 60px rgba(0,0,0,.6)}
.popup-h{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.popup-h h3{margin:0;color:var(--gold);flex:1}
.popup-meta{padding:10px 20px 0;color:var(--ink-faint);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.popup-b{padding:14px 20px}
.popup-b .prose{font-size:14.5px;line-height:1.6}
.popup-b p{margin:0 0 10px}
.popup-f{padding:12px 20px;border-top:1px solid var(--line)}
.rs-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dim);margin:12px 0 5px}
.force-dice{display:inline-flex;gap:4px;vertical-align:-3px}
.force-dice.clickable{cursor:pointer;padding:3px 6px;border-radius:8px;border:1px solid transparent}
.force-dice.clickable:hover{border-color:var(--gold-dim);background:var(--panel2)}
.forcepool{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg2);
  border:1px solid var(--line2);border-radius:10px;padding:10px 14px;margin:4px 0 14px}
.pipctl{display:inline-flex;align-items:center;gap:6px}
.pipdot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #b7c0d4}
.resbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.resfield{display:flex;flex-direction:column;gap:3px}
.resfield .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.resfield .sub{font-size:10px;color:var(--ink-faint)}
.resfield input{width:120px;font-size:16px;font-weight:700;color:var(--ink)}
.resfield.primary input{width:140px;font-size:19px;color:var(--gold)}
.resstat{display:flex;flex-direction:column;gap:3px}
.resstat .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.resstat .v{font-size:18px;font-weight:700;color:var(--ink)}
.logentry{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px}
.logentry .le-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.logentry .faces{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.logentry .le-ex{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink-dim)}
.logentry .le-ex li{margin-bottom:3px}
.logentry .le-ex b{color:var(--ink)}
.force-die{display:inline-block;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #d7dce5);
  border:1px solid #b7c0d4;box-shadow:inset 0 0 4px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4)}
.stat.click{cursor:pointer}
.stat.click:hover{border-color:var(--gold-dim);background:#0e1420}
.infocard.click{cursor:pointer}
.infocard.click:hover{border-color:var(--gold-dim);background:#141a26}

/* ---- detail / drawer ---- */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;display:none}
.drawer-bg.open{display:block}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(560px,94vw);background:var(--panel);
  border-left:1px solid var(--line2);z-index:91;transform:translateX(100%);transition:.25s;overflow:auto;box-shadow:var(--shadow)}
.drawer.open{transform:none}
.drawer .dh{position:sticky;top:0;background:var(--panel);padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.drawer .db{padding:18px 20px}
.prose{font-size:14px;line-height:1.6;color:var(--ink-dim)}
.prose .mk-h{color:var(--gold);display:inline-block;margin-bottom:4px}
.prose strong{color:var(--ink)}

.sectionhead{display:flex;align-items:center;gap:12px;margin:2px 0 16px}
.sectionhead h2{margin:0;color:var(--gold)}
.sectionhead .sub{color:var(--ink-faint);font-size:13px}
/* Started / Spent / Left badge in step headers */
.xppill{margin-left:auto;display:flex;gap:16px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 16px}
.xppill .xpp{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.xppill .xpp span{font-size:10px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em}
.xppill .xpp b{font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink)}
.xppill .xpp.big b{font-size:20px;color:var(--gold)}
.xppill.over .xpp.big b{color:#ff6b6b}
.muted{color:var(--ink-faint)}
.right{margin-left:auto}
.flex{display:flex;gap:10px;align-items:center}
.wrapf{flex-wrap:wrap}
.note{background:#15203a;border:1px solid var(--line2);border-left:3px solid var(--blue);
  border-radius:6px;padding:10px 14px;font-size:13px;color:var(--ink-dim);margin:12px 0}
.empty{text-align:center;color:var(--ink-faint);padding:50px 20px}
.spinner{display:inline-block;width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* compendium */
.compendium .grid{margin-top:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px;margin:10px 0}
.kv dt{color:var(--ink-faint);text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding-top:2px}
.kv dd{margin:0;color:var(--ink)}
.pillrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

.footer{color:var(--ink-faint);font-size:12px;text-align:center;padding:30px 0 40px}

/* ---- VTT (the Table view): shared map + draggable tokens ---- */
.vtt{display:flex;flex-direction:column;gap:12px}
.vtt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vtt-tools{display:flex;gap:8px;flex-wrap:wrap}
.vtt-host{width:100%;display:flex;justify-content:center}
.vtt-frame-wrap{width:100%;height:calc(100vh - 150px);min-height:480px;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#070b12;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.vtt-frame{width:100%;height:100%;border:0;display:block}
.vtt-stage{position:relative;width:100%;height:calc(100vh - 190px);min-height:420px;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#070b12;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.vtt-stage canvas{display:block;width:100%;height:100%}
.vtt-drop{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(78,163,255,.12);border:3px dashed var(--blue);border-radius:10px;color:var(--blue);font-weight:800;font-size:20px;letter-spacing:.03em}
.vtt-drop.on{display:flex}
.vtt-grid-ctl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-dim)}
.vtt-grid-inp{width:64px;padding:5px 7px}
.vtt-maplib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:60vh;overflow:auto}
.vtt-map-card{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.vtt-map-thumb{height:96px;background-size:cover;background-position:center;cursor:pointer;border-bottom:1px solid var(--line)}
.vtt-map-thumb:hover{outline:2px solid var(--gold);outline-offset:-2px}
.vtt-map-meta{display:flex;justify-content:space-between;gap:6px;padding:6px 8px;font-size:12px}
.vtt-map-meta span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtt-map-card .btn{margin:0 8px 8px;font-size:11px}
.vtt-board{position:relative;display:inline-block;max-width:100%;border:1px solid var(--line2);border-radius:10px;
  background:var(--bg2);box-shadow:0 8px 30px rgba(0,0,0,.45);overflow:hidden;touch-action:none}
.vtt-board.empty{width:100%;min-height:360px;display:flex;align-items:center;justify-content:center}
.vtt-map{display:block;max-width:100%;max-height:78vh;user-select:none;-webkit-user-drag:none}
.vtt-empty-msg{color:var(--ink-faint);font-size:14px;text-align:center;padding:40px}
.vtt-token{position:absolute;transform:translate(-50%,-50%);border:2px solid var(--gold);border-radius:50%;
  background:rgba(8,12,20,.82);display:flex;align-items:center;justify-content:center;cursor:default;
  box-shadow:0 2px 8px rgba(0,0,0,.5);user-select:none;overflow:visible}
.vtt-token.mine{cursor:grab}
.vtt-token.dragging{cursor:grabbing;z-index:50;filter:brightness(1.15)}
.vtt-tk-img{width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none}
.vtt-tk-ini{font-weight:800;font-size:14px;letter-spacing:.02em;pointer-events:none}
.vtt-tk-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;
  font-size:11px;color:var(--ink);background:rgba(5,7,13,.78);padding:1px 6px;border-radius:6px;pointer-events:none}
.vtt-tk-hp{position:absolute;bottom:-7px;left:10%;width:80%;height:4px;border-radius:3px;background:rgba(255,93,82,.35);overflow:hidden;pointer-events:none}
.vtt-tk-hp>span{display:block;height:100%;background:var(--green)}
.vtt-pick-list,.vtt-edit{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.vtt-pick-row{padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--panel)}
.vtt-pick-row:hover{border-color:var(--gold);background:var(--panel2)}
.vtt-fld{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-dim)}
.vtt-fld>span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}

/* ---- Lightsaber blade colors (flavor only) ----------------------------------
 * Every element reads two custom properties set inline from data/saber_colors.json:
 *   --sb the blade color, --sc the hot core. Nothing here is mechanical.
 * .saber-swatch  round chip (hilt list, picker heads)
 * .saber-blade   the lit blade: core stripe, colored body, outer glow
 * .saber-card    one color in the picker grid
 * .rollcard.lit  a weapon card whose saber has a color set
 * -------------------------------------------------------------------------- */
.saber-swatch{display:inline-block;border-radius:50%;vertical-align:-2px;flex:none;
  background:radial-gradient(circle at 50% 50%, var(--sc) 0 30%, var(--sb) 45% 100%);
  box-shadow:0 0 6px var(--sb),0 0 2px var(--sc) inset}
.saber-swatch.none{background:transparent;border:1px dashed var(--line2);box-shadow:none}
.saber-blade{display:inline-block;flex:none;width:120px;max-width:46vw;border-radius:99px;
  background:linear-gradient(90deg,var(--sb) 0 4%,var(--sc) 12% 88%,var(--sb) 96% 100%);
  box-shadow:0 0 10px var(--sb),0 0 22px var(--sb),0 0 3px var(--sc);vertical-align:middle}
.saber-current{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0}
.saber-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:6px}
.saber-card{border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--panel);
  cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.saber-card:hover{border-color:var(--sb);box-shadow:0 0 14px -4px var(--sb);transform:translateY(-1px)}
.saber-card.on{border-color:var(--sb);box-shadow:0 0 0 1px var(--sb) inset,0 0 16px -5px var(--sb)}
.saber-card .sc-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.saber-card .sc-blade{margin-bottom:8px}
.saber-card .sc-blade .saber-blade{width:100%;max-width:none}
.saber-card .sc-mean{font-size:12.5px;line-height:1.5}
.saber-card .sc-lore{font-size:11.5px;line-height:1.5;margin-top:5px}
.saber-card .sc-who{font-size:11px;margin-top:6px;color:var(--ink-faint)}
.rollcard.lit{border-color:color-mix(in srgb,var(--sb) 45%,var(--line))}
.rc-blade{display:flex;align-items:center;gap:8px;margin:4px 0 8px;cursor:pointer}
.rc-blade .saber-blade{width:86px}
.rc-blade-l{font-size:11.5px;font-weight:600;letter-spacing:.02em}

/* ---- Always-on weapon quality readouts on a weapon card --------------------
 * .rc-auto      qualities already folded into the pool (Accurate, Cumbersome...)
 * .rc-remember  qualities with no automatic effect that still need a human
 *               decision (Limited Ammo, Prepare, Slow-Firing, Ion, Cortosis)
 * -------------------------------------------------------------------------- */
.rc-auto{color:var(--green);font-size:11px;line-height:1.45}
.rc-remember{color:var(--gold);font-size:11px;line-height:1.45;cursor:help}

/* ---- Droid Workshop, portraits, era badges ---------------------------------
 * .dw-*        the droid construction wizard (chassis, checks, result options)
 * .portrait    companion / droid / NPC art, set by URL or upload
 * .erabadge    in-universe era of the source book (never hides anything)
 * -------------------------------------------------------------------------- */
.dw-rail{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dw-step{background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);
  border-radius:99px;padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.dw-step:hover:not(:disabled){border-color:var(--gold-dim);color:var(--ink)}
.dw-step.on{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.12)}
.dw-step.done{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.dw-step:disabled{opacity:.4;cursor:default}
.dw-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin-top:4px}
.dw-stats b{color:var(--ink)}
.dw-line{font-size:12px;line-height:1.5;margin-top:4px}
.dw-opt{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:8px 10px;margin:5px 0;
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.dw-opt.on{border-color:var(--gold);background:rgba(212,175,55,.08)}
.dw-num{display:inline-flex;flex-direction:column;gap:2px;font-size:11px}
.dw-num input{width:70px}
.dw-pick{max-width:210px;flex:none}
.dw-bank{font-size:12px;display:inline-flex;gap:4px;align-items:baseline}
.dw-bank b{font-size:15px}

.portrait{display:inline-block;flex:none;border-radius:8px;border:1px solid var(--line2);
  background-size:cover;background-position:center;background-color:var(--panel2);vertical-align:middle}
.portrait.none{display:inline-grid;place-items:center;border-style:dashed;color:var(--ink-faint);font-size:18px}
.portrait-slot:hover .portrait,.portrait-slot:hover .portrait.none{border-color:var(--gold)}

.erabadge{display:inline-block;font-size:10.5px;letter-spacing:.04em;padding:2px 8px;border-radius:99px;
  border:1px solid var(--ec);color:var(--ec);background:color-mix(in srgb,var(--ec) 12%,transparent);cursor:help;white-space:nowrap}
.erabadge.after{border-style:dashed;opacity:.85}
/* .hbbadge  entry is not official published rules (fan supplement, dataset
   author's own addition, or an NPC block converted into a playable species).
   It never hides or blocks anything, it only says what the entry is. */
.hbbadge{display:inline-block;margin-left:7px;font-size:10px;letter-spacing:.04em;
  padding:2px 7px;border-radius:99px;vertical-align:middle;white-space:nowrap;cursor:help;
  border:1px dashed var(--gold);color:var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent)}

/* ---- Import target chooser (new character, or update an existing one) ---- */
.imp-choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);cursor:pointer}
.imp-choice:hover{border-color:var(--gold-dim)}
.imp-choice.on{border-color:var(--gold);background:rgba(212,175,55,.08)}
.imp-choice input{width:auto;margin-top:3px;flex:none}