/* ===================================================================
   hud.css — floating fantasy chrome over the 3D world
   =================================================================== */
:root{
  --ember:#e3b755; --ember-dk:#c1933f; --wine:#7d2330; --wine2:#a23644;
  --parch:#e9dcbf; --ink:#2a2017; --night:#14233a; --panel:#182338cc; --panel2:#101a2ee6;
  --line:#e3b75533; --ally:#3f7d4a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0c1426;
  font-family:'EB Garamond',Georgia,serif;color:var(--parch);
  -webkit-user-select:none;user-select:none}
a-scene,canvas{outline:none}
.display{font-family:'Cinzel',Georgia,serif}
.eyebrow{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);opacity:.85}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud .panel{pointer-events:auto}
/* Embedded in the React tabletop (?bare=1): the host draws its own unified
   panels, so suppress the world's built-in HUD chrome — 3D scene only. */
body.bare #hud{display:none}
/* ?baretop=1: the React host draws a dropdown top nav (view / light / DM-only
   role), so hide the world's own segmented topbar — but keep the Enter-VR
   button (the React bar has no WebXR entry) floated at the top-right. */
body.baretop #hud .topbar{background:none;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
body.baretop #hud .topbar > :not(#vrBtn){display:none}
body.baretop #hud .topbar > #vrBtn{pointer-events:auto;margin-left:auto}
.leather{background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 10px 30px #0008, inset 0 1px 0 #ffffff14;
  backdrop-filter:blur(7px)}

/* ---- top bar ---- */
.topbar{position:absolute;top:14px;left:14px;right:14px;height:56px;
  display:flex;align-items:center;gap:14px;padding:0 14px}
.crest{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#b23a47,var(--wine));
  color:#f4d9a0;font-family:'Cinzel',serif;font-weight:700;font-size:20px;
  border:2px solid var(--ember);box-shadow:0 2px 8px #0006}
.tb-title{display:flex;flex-direction:column;line-height:1.05}
.tb-title .name{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#f3e7c8}
.tb-title .sub{font-size:12.5px;font-style:italic;opacity:.72}
.tb-spacer{flex:1}
.seg{display:flex;background:#0c1426aa;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{appearance:none;border:0;background:transparent;color:#c9bfa6;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.08em;padding:8px 12px;cursor:pointer;transition:.15s}
.seg button.on{background:linear-gradient(180deg,var(--ember),var(--ember-dk));color:#2a1d08;font-weight:700}
.seg button:hover:not(.on){color:#f3e7c8;background:#ffffff10}
.mode-toggle button.on{background:linear-gradient(180deg,#b23a47,var(--wine));color:#fff}
/* ---- map selector dropdown ---- */
.mapsel-wrap{position:relative;display:flex;align-items:center}
.mapsel-wrap::after{content:'\25BE';position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ember);font-size:11px}
.mapsel{appearance:none;-webkit-appearance:none;cursor:pointer;
  background:linear-gradient(180deg,#1a2440,#0c1426);color:#f0e6cd;
  border:1px solid var(--ember);border-radius:10px;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.05em;
  padding:8px 30px 8px 14px;max-width:210px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:.15s;
  box-shadow:inset 0 1px 0 rgba(255,230,190,.08)}
.mapsel:hover{background:linear-gradient(180deg,#22305a,#101a30);box-shadow:0 0 0 1px var(--ember),inset 0 1px 0 rgba(255,230,190,.1)}
.mapsel:focus{outline:none;box-shadow:0 0 0 2px var(--ember)}
.mapsel optgroup{font-family:'Cinzel',serif;font-style:normal;color:var(--ember);background:#0c1426;font-size:10px;letter-spacing:.12em}
.mapsel option{font-family:'EB Garamond',Georgia,serif;color:#f0e6cd;background:#13203d;font-size:13px}
.xr-btn{pointer-events:auto;appearance:none;border:1px solid var(--ember);border-radius:10px;
  background:#0c1426aa;color:var(--ember);font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;
  padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s}
.xr-btn:hover{background:var(--ember);color:#2a1d08}
.xr-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---- left card / roster ---- */
.leftcol{position:absolute;left:14px;top:84px;width:252px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden;padding-right:3px}
.pcard{padding:16px 16px 14px;text-align:center}
.pcard .ptrait{width:74px;height:74px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;
  font-size:38px;background:#0c1426;border:3px solid var(--ring,#9a6f28);box-shadow:0 3px 12px #0007;overflow:hidden}
.pcard .ptrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pcard .pname{font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:#f3e7c8}
.pcard .pcls{font-size:13px;font-style:italic;opacity:.75;margin-bottom:8px}
.hpbar{height:9px;border-radius:6px;background:#0c1426;border:1px solid #ffffff1a;overflow:hidden;margin:4px 0}
.hpbar i{display:block;height:100%;background:var(--ally);transition:width .3s,background .3s}
.hpnum{font-size:12px;opacity:.8}
.pstats{display:flex;justify-content:center;gap:14px;margin-top:8px;font-size:12.5px}
.pstats b{font-family:'Cinzel',serif;color:var(--ember);font-size:14px}
.pstats span{display:flex;flex-direction:column;align-items:center;opacity:.85}

.roster{padding:12px}
.roster h4,.tracker h4,.dicebox h4{margin:0 0 8px;font-family:'Cinzel',serif;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember);font-weight:600}
.rrow{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;transition:.12s}
.rrow:hover{background:#ffffff0e}
.rrow .rs{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:#0c1426;border:2px solid var(--ring,#777)}
.rrow .rb{flex:1;min-width:0}
.rrow .rn{font-size:14px;color:#f0e6cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .rm{font-size:11px;opacity:.62;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow.concealed{opacity:.58}
.pill{font-size:9px;font-family:'Cinzel',serif;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border-radius:6px;border:1px solid currentColor}
.pill.seen{color:var(--ally)} .pill.hidden{color:var(--ember-dk)} .pill.dm{color:var(--wine2)}
.eye{appearance:none;border:1px solid var(--line);background:#0c1426aa;color:var(--parch);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:13px;flex:none}
.eye:hover{border-color:var(--ember);color:var(--ember)}
.eye.on{background:var(--ember);color:#2a1d08;border-color:var(--ember)}

/* ---- right column ---- */
.rightcol{position:absolute;right:14px;top:84px;width:262px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 150px);overflow-y:auto;overflow-x:hidden;padding-right:3px}
.tracker{padding:12px}
.tracker .trk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.round{display:flex;flex-direction:column;line-height:1}
.round .rl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.round .rv{font-family:'Cinzel',serif;font-size:24px;color:var(--ember)}
.btn{appearance:none;border:1px solid var(--ember);border-radius:9px;cursor:pointer;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.06em;padding:8px 12px;transition:.15s;
  background:linear-gradient(180deg,var(--ember),var(--ember-dk));color:#2a1d08;font-weight:700}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#0c1426aa;color:var(--ember)}
.btn.sm{padding:5px 9px;font-size:10px}
.init-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:9px;margin-bottom:3px;transition:.12s}
.init-row.cur{background:linear-gradient(90deg,#e3b75522,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.init-num{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex:none;
  font-family:'Cinzel',serif;font-weight:700;font-size:13px;background:#0c1426;border:1px solid var(--line);color:var(--ember)}
.init-s{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:none;
  background:#0c1426;border:2px solid var(--ring,#777)}
.init-b{flex:1;min-width:0}
.init-n{font-size:13.5px;color:#f0e6cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.init-hp{height:5px;border-radius:4px;background:#0c1426;overflow:hidden;margin-top:3px}
.init-hp i{display:block;height:100%;background:var(--ally)}
.adj{display:flex;gap:3px}
.adj button{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:#0c1426aa;color:var(--parch);cursor:pointer;font-size:13px;line-height:1}
.adj button:hover{border-color:var(--ember);color:var(--ember)}

.dicebox{padding:12px}
.dice-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dice-head h4{margin:0}
#diceFocusBtn.on{background:linear-gradient(180deg,#b23a47,var(--wine));color:#fff;border-color:var(--wine2)}
.dice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.dbtn{appearance:none;border:1px solid var(--line);border-radius:9px;background:#0c1426aa;
  color:#f0e6cd;font-family:'Cinzel',serif;font-weight:700;font-size:13px;padding:9px 0;cursor:pointer;transition:.12s}
.dbtn:hover{border-color:var(--ember);color:var(--ember);background:#ffffff0c;transform:translateY(-1px)}
.dlog{margin-top:9px;max-height:96px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.dlog .dl{display:flex;align-items:center;gap:8px;font-size:12.5px;opacity:.9}
.dlog .dl b{font-family:'Cinzel',serif;color:var(--ember);font-size:14px;min-width:26px;text-align:right}
.dlog .dl em{opacity:.6;font-size:11px}

/* ---- multi-roll session ---- */
.roll-session{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.rs-queue{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:6px}
.rs-lab{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);opacity:.85}
.rs-hint{font-size:11.5px;opacity:.5;font-style:italic}
.qchip{appearance:none;border:1px solid var(--line);border-radius:7px;background:#0c1426aa;color:#f0e6cd;
  font-family:'Cinzel',serif;font-weight:700;font-size:12px;padding:4px 7px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.12s}
.qchip:hover{border-color:var(--wine2);color:#ff9aa6;background:#ffffff0c}
.qchip i{font-style:normal;opacity:.5;font-size:13px;line-height:1}
.qchip:hover i{opacity:1}
.rs-counter{font-size:12.5px;opacity:.92}
.rs-counter b{color:var(--ember);font-family:'Cinzel',serif}
.rs-counter em{color:#bfe6a8;font-style:normal;opacity:.85}
.rs-results{display:flex;flex-direction:column;gap:3px;max-height:118px;overflow:auto}
.rs-results .rl{display:flex;align-items:center;gap:8px;font-size:12.5px}
.rs-results .rn{font-family:'Cinzel',serif;font-size:10px;opacity:.45;min-width:18px;text-align:right}
.rs-results .rl b{font-family:'Cinzel',serif;color:var(--ember);font-size:14px;min-width:24px;text-align:right}
.rs-results .rl em{opacity:.55;font-size:11px}
.rs-sum{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;
  padding-top:6px;margin-top:1px;border-top:1px dashed var(--line);letter-spacing:.02em;opacity:.92}
.rs-sum b{font-family:'Cinzel',serif;color:#ffd98a;font-size:18px}
.rs-last{font-size:11px;opacity:.72;margin-top:1px}
.rs-last b{color:#ffd98a;font-family:'Cinzel',serif}
.rs-last span{opacity:.55}
.rs-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.dbtn.act{font-size:11.5px;padding:8px 0}
.dbtn.act.end{grid-column:1 / -1;background:linear-gradient(180deg,#27361f,#19260f);
  border-color:#3f5a30;color:#c8ecab}
.dbtn.act.end:hover{border-color:#7ab84e;color:#e0ffc6;background:#2c3d22}

/* ---- bottom hint ---- */
.hintbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:8px 16px;font-size:12.5px;color:#d8cfb6}
.hintbar b{color:var(--ember);font-family:'Cinzel',serif;font-weight:600}
.hintbar .k{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--ember);background:#0c1426aa}
.sep{width:1px;height:16px;background:var(--line)}

/* ---- selected readout ---- */
.selreadout{position:absolute;left:50%;top:84px;transform:translateX(-50%);
  display:none;align-items:center;gap:10px;padding:7px 14px;font-size:13px}
.selreadout.show{display:flex}
.selreadout .ss{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:#0c1426;border:2px solid var(--ring,#777)}
.selreadout b{font-family:'Cinzel',serif;color:#f3e7c8}

.note{font-size:11.5px;opacity:.6;font-style:italic;margin-top:6px;line-height:1.35}

/* ---- collapsible sections ---- */
.sec{border-top:1px solid var(--line);margin-top:8px;padding-top:6px;text-align:left}
.pcard > .sec:first-of-type{margin-top:10px}
.tracker > .sec,.dicebox.sec{border-top:0;margin-top:0;padding-top:0}
.sec-head,.sec-head-row{display:flex;align-items:center;gap:8px}
.sec-head-row{justify-content:space-between}
.sec-head{appearance:none;background:transparent;border:0;cursor:pointer;padding:4px 2px;flex:1;min-width:0;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--ember);font-weight:600}
.sec-head:hover{color:#f3e7c8}
.sec-title{flex:1;text-align:left;white-space:nowrap}
.sec-meta{font-family:'EB Garamond',serif;font-size:11px;letter-spacing:0;text-transform:none;opacity:.6}
.chev{display:inline-block;transition:transform .18s;font-size:10px;opacity:.8}
.sec.collapsed .chev{transform:rotate(-90deg)}
.sec-body{padding:4px 2px 2px}
.sec.collapsed > .sec-body{display:none}

/* ---- attacks & abilities widget ---- */
.atklist{display:flex;flex-direction:column;gap:6px}
.atk{background:#0c142688;border:1px solid #ffffff12;border-left:3px solid var(--wine2);border-radius:8px;padding:6px 9px}
.atk-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.atk-name{font-family:'Cinzel',serif;font-size:13px;color:#f0e6cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atk-hit{font-family:'Cinzel',serif;font-weight:700;color:var(--ember);font-size:13px;flex:none}
.atk-sub{font-size:12px;opacity:.85;margin-top:1px}
.atk-sub b{color:#f3e7c8}
.atk-note{font-size:11px;opacity:.62;font-style:italic;margin-top:2px;line-height:1.3}
/* ---- attack: selectable + strike (Enter combat) ---- */
.atk{cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;position:relative}
.atk:hover{background:#13203d99}
.atk.active{border-left-color:var(--ember);background:#1a1c2e;box-shadow:0 0 0 1px var(--ember) inset, 0 0 14px #e3b75533}
.atk-key{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:4px;background:#ffffff14;color:#cbb482;font:700 10px 'Cinzel',serif;margin-right:6px;flex:none}
.atk.active .atk-key{background:var(--ember);color:#1a140c}
.atk-top{display:flex;align-items:center;justify-content:flex-start;gap:6px}
.atk-top .atk-name{flex:1}
.atk-bound{font-family:'Cinzel',serif;color:var(--ember);font-weight:700;font-size:13px;flex:none;filter:drop-shadow(0 0 5px #e3b75588)}
.atk-go{margin-top:6px;width:100%;padding:5px 0;border:1px solid #ffffff1a;border-radius:7px;cursor:pointer;
  background:linear-gradient(180deg,#7d2330,#5a1722);color:#ffe0c8;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.05em;
  opacity:.55;transition:opacity .15s,transform .08s}
.atk.active .atk-go,.atk:hover .atk-go{opacity:1}
.atk-go:hover{background:linear-gradient(180deg,#a23644,#7d2330)}
.atk-go:active{transform:translateY(1px)}
.atk-hint{font-size:11px;opacity:.6;font-style:italic;margin-top:8px;line-height:1.35;color:#d8c8a4}
.atk-hint b{color:var(--ember);font-style:normal}
/* ---- floating combat numbers ---- */
.cbt-float{position:fixed;z-index:40;transform:translate(-50%,-50%);pointer-events:none;text-align:center;
  font-family:'Cinzel',Georgia,serif;opacity:0;transition:opacity .25s, top .9s cubic-bezier(.2,.7,.3,1);
  text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap;line-height:1.05}
.cbt-float.go{opacity:1}
.cbt-float span{display:block}
.cbt-float .roll{font-size:24px;font-weight:700;color:#f3e7c8}
.cbt-float .dmg{font-size:30px;font-weight:700;color:#ff6a5a}
.cbt-float .dmgsub,.cbt-float span:not(.roll):not(.dmg){font-size:11px;font-family:'EB Garamond',serif;font-style:italic;color:#e9dcbf;opacity:.85}
.cbt-float.crit .roll{color:#ffd35a;font-size:28px;filter:drop-shadow(0 0 10px #ffae3c)}
.cbt-float.crit .dmg,.cbt-float.damage.crit .dmg{color:#ffae3c}
.cbt-float.hit .roll{color:#9ad77f}
.cbt-float.miss{color:#9aa3b0}
.cbt-float.miss b,.cbt-float.miss span{color:#9aa3b0}
.featlist{display:flex;flex-direction:column;gap:5px;margin-top:8px;border-top:1px dashed var(--line);padding-top:7px}
.feat-name{font-family:'Cinzel',serif;font-size:12.5px;color:var(--ember)}
.feat-desc{font-size:11.5px;opacity:.75;line-height:1.32;margin-top:1px}
.empty{font-size:11.5px;opacity:.55;font-style:italic;padding:4px 2px}

/* ---- ability scores ---- */
.abilgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ab{background:#0c142688;border:1px solid #ffffff12;border-radius:8px;padding:5px 0;text-align:center}
.ab-k{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:.08em;color:var(--ember);opacity:.85}
.ab-v{font-family:'Cinzel',serif;font-weight:700;font-size:17px;color:#f3e7c8;line-height:1.05}
.ab-m{font-size:11px;opacity:.7}

.card-actions{display:flex;gap:7px;margin-top:10px}
.card-actions .btn{flex:1}
.impd{font-style:normal;color:var(--ally);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.trk-btns{display:flex;gap:6px;flex:none;align-items:center}
.round-inline{font-family:'Cinzel',serif;font-size:12px;color:var(--ember);opacity:.9;margin-right:2px}
.round{display:flex;flex-direction:column;line-height:1;align-items:flex-end}

/* ---- toast ---- */
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-8px);pointer-events:none;
  background:linear-gradient(180deg,#1d2942,#101a2e);border:1px solid var(--ember);border-radius:10px;
  padding:9px 16px;font-size:13px;color:#f3e7c8;box-shadow:0 8px 24px #0009;opacity:0;transition:.25s;max-width:60vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:820px){
  .leftcol,.rightcol{width:200px}
  .hintbar{font-size:11px;gap:8px;flex-wrap:wrap;justify-content:center;max-width:92vw}
}