/* ═══════════════════════════════════════════════════════════
   LORDS OF LOGOS — interface
   Palette & type continue the landing page: ink, stone, bone,
   ember, gem. Everything pixel-crisp, nothing smooth.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#0a0a0d;
  --stone:#1a1c22;
  --stone-2:#2a2d36;
  --stone-3:#3a3f4b;
  --bone:#d8d2bf;
  --bone-dim:#9a9685;
  --ember:#ff7a1a;
  --ember-hot:#ffd66b;
  --ember-deep:#a83410;
  --gem:#3bd66e;
  --gem-deep:#0a8a3a;
  --gem-glow:#9bff8a;
  --blood:#7a0d12;
  --blood-hot:#e03a3a;
  --water:#2a6a9a;
  --px-border:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  overflow:hidden;
  background:var(--ink);
  color:var(--bone);
  font-family:'IM Fell English SC',serif;
}
body{
  image-rendering:pixelated;
  -webkit-font-smoothing:none;
}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
button,input,select,textarea{font-family:inherit;color:inherit}
::selection{background:var(--ember-deep);color:var(--bone)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--stone-3);border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--ember-deep)}

.hidden{display:none !important}

/* ── screens ─────────────────────────────────────────────── */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  background:var(--stone-2);
  border:var(--px-border) solid var(--stone-3);
  border-bottom-color:#101116;
  border-right-color:#101116;
  color:var(--bone);
  font-family:'IM Fell English SC',serif;
  font-size:16px;
  padding:8px 16px;
  cursor:pointer;
  text-transform:lowercase;
  letter-spacing:1px;
  transition:none;
}
.btn:hover{background:var(--stone-3);color:var(--ember-hot);border-color:var(--ember-deep)}
.btn:active{transform:translate(1px,1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ember{
  background:linear-gradient(var(--ember-deep),#6a2008);
  border-color:var(--ember);
  border-bottom-color:#3a1004;border-right-color:#3a1004;
  color:var(--ember-hot);
  text-shadow:0 0 6px rgba(255,122,26,.6);
}
.btn-ember:hover{background:linear-gradient(#c44214,#7a2408);color:#fff}
.btn-big{
  font-family:'Pirata One',serif;
  font-size:30px;
  padding:14px 42px;
  min-width:380px;
  text-transform:none;
  letter-spacing:2px;
}
.btn-dim{opacity:.75}
.btn-dice{font-size:18px;padding:6px 10px;line-height:1}
.btn-full{width:100%}
.btn-hud{font-size:13px;padding:4px 8px}

/* ── main menu ───────────────────────────────────────────── */
#screen-menu{align-items:center;justify-content:center}
.menu-sky{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(255,122,26,.20) 0%, transparent 40%),
    radial-gradient(ellipse at 25% 15%, rgba(80,30,20,.30) 0%, transparent 55%),
    linear-gradient(to bottom,#05060a 0%,#0c1018 40%,#171410 70%,#2a1306 100%);
}
.menu-ground{
  position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(to bottom,#1a0d06,#0e0805);
  border-top:var(--px-border) solid #2a1a0c;
}
.menu-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.game-title{
  font-family:'Pirata One',serif;
  font-size:clamp(64px,10vw,120px);
  line-height:.9;
  color:var(--bone);
  text-shadow:
    0 0 0 var(--bone),
    4px 4px 0 var(--ember-deep),
    8px 8px 0 #3a1004,
    0 0 40px rgba(255,122,26,.25);
  letter-spacing:4px;
}
.title-of{
  font-family:'IM Fell English SC',serif;
  font-size:.32em;
  color:var(--ember);
  vertical-align:middle;
  margin:0 .3em;
  text-shadow:none;
}
.tagline{
  font-family:'VT323',monospace;
  font-size:20px;
  color:var(--bone-dim);
  letter-spacing:3px;
  margin-bottom:18px;
}
.menu-buttons{display:flex;flex-direction:column;gap:12px}
.menu-note{font-family:'VT323',monospace;color:var(--ember);font-size:18px;min-height:22px;letter-spacing:2px}
.menu-version{font-family:'VT323',monospace;color:var(--stone-3);font-size:15px;letter-spacing:1px}

/* ── panel pages (host / join / create) ──────────────────── */
.panel-page{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,30,20,.25) 0%, transparent 50%),
    linear-gradient(to bottom,#07080c,#12100c);
  overflow-y:auto;
  padding:20px;
}
.parchment{
  width:min(860px,94vw);
  background:var(--stone);
  border:var(--px-border) solid var(--stone-3);
  outline:var(--px-border) solid var(--ink);
  box-shadow:0 0 0 6px var(--stone), 0 0 60px rgba(0,0,0,.8), inset 0 0 80px rgba(0,0,0,.45);
  padding:28px 34px;
  max-height:94vh;
  overflow-y:auto;
}
.parchment-narrow{width:min(480px,94vw);text-align:center}
.parchment-wide{width:min(1060px,96vw)}
.panel-title{
  font-family:'Pirata One',serif;
  font-size:34px;
  color:var(--ember-hot);
  text-shadow:2px 2px 0 var(--ember-deep);
  letter-spacing:2px;
  margin-bottom:4px;
}
.panel-sub{color:var(--bone-dim);font-size:16px;margin-bottom:20px}
.panel-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.panel-status{font-family:'VT323',monospace;color:var(--ember);font-size:17px;margin-top:10px;min-height:20px;letter-spacing:1px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.field{display:flex;flex-direction:column;gap:6px}
.field-wide{grid-column:1/-1}
.field-label{font-size:14px;color:var(--bone-dim);letter-spacing:2px;text-transform:uppercase}
.field-label em{color:var(--stone-3);font-style:normal;text-transform:none;letter-spacing:0}
.field-label b{color:var(--ember-hot)}
.field-row{display:flex;gap:6px}
.field-row input{flex:1}

input[type=text],textarea,select{
  background:var(--ink);
  border:var(--px-border) solid var(--stone-3);
  padding:8px 10px;
  font-size:17px;
  color:var(--bone);
  outline:none;
}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--ember-deep)}
textarea{resize:vertical;font-family:'VT323',monospace;font-size:18px;letter-spacing:.5px}
select{cursor:pointer}
option{background:var(--ink)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:8px;background:var(--ink);border:2px solid var(--stone-3);
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;background:var(--ember);border:3px solid var(--ember-deep);
}

.code-input{
  width:220px;
  font-family:'VT323',monospace;
  font-size:56px;
  text-align:center;
  letter-spacing:16px;
  text-transform:uppercase;
  margin:10px auto 6px;
  display:block;
  color:var(--ember-hot);
}

/* flavor output (world) */
.flavor-out{
  margin-top:18px;
  background:var(--ink);
  border:var(--px-border) solid var(--ember-deep);
  padding:12px 16px;
}
.flavor-head{font-size:13px;letter-spacing:2px;color:var(--ember);margin-bottom:6px}
.flavor-out p{font-family:'VT323',monospace;font-size:18px;color:var(--bone);line-height:1.35}
.ai-tag{
  font-family:'VT323',monospace;
  font-size:12px;
  background:var(--ink);
  color:var(--gem);
  border:2px solid var(--gem-deep);
  padding:1px 5px;
  letter-spacing:1px;
  vertical-align:middle;
}

/* ── character creation ──────────────────────────────────── */
.create-cols{display:grid;grid-template-columns:1fr 300px;gap:28px}
.create-form{display:flex;flex-direction:column;gap:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

.pick-row{display:flex;flex-wrap:wrap;gap:6px}
.pick{
  background:var(--ink);
  border:var(--px-border) solid var(--stone-3);
  padding:5px 12px;
  cursor:pointer;
  font-size:15px;
  color:var(--bone-dim);
  user-select:none;
}
.pick:hover{border-color:var(--ember-deep);color:var(--bone)}
.pick.sel{background:var(--ember-deep);border-color:var(--ember);color:var(--ember-hot)}
.pick-small .pick{padding:3px 8px;font-size:13px}

.swatch-row{display:flex;flex-wrap:wrap;gap:5px}
.swatch{
  width:26px;height:26px;
  border:3px solid var(--stone-3);
  cursor:pointer;
}
.swatch:hover{border-color:var(--bone)}
.swatch.sel{border-color:var(--ember-hot);outline:2px solid var(--ember-deep)}

.create-side{display:flex;flex-direction:column;gap:12px}
.portrait-frame{
  width:72px;height:72px;
  background:var(--ink);
  border:var(--px-border) solid var(--stone-3);
  outline:2px solid var(--ink);
  position:relative;
  flex-shrink:0;
}
.portrait-frame canvas{width:100%;height:100%;display:block}
.portrait-frame.big{width:100%;height:auto;aspect-ratio:1;border-color:var(--ember-deep)}
.portrait-veil{
  position:absolute;inset:0;
  background:rgba(10,10,13,.88);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:'VT323',monospace;
  font-size:17px;
  color:var(--bone-dim);
  letter-spacing:1px;
  line-height:1.4;
}
.portrait-veil.conjuring{color:var(--ember-hot);animation:veil-pulse 1s steps(2,end) infinite}
@keyframes veil-pulse{50%{opacity:.55}}

.stat-roll{background:var(--ink);border:var(--px-border) solid var(--stone-3);padding:10px 12px}
.stat-roll-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:2px;color:var(--bone-dim);margin-bottom:8px}
.stat-roll-head em{text-transform:none;letter-spacing:0;color:var(--stone-3);font-style:normal}
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.stat-cell{
  text-align:center;background:var(--stone);
  border:2px solid var(--stone-3);padding:4px 2px;
}
.stat-cell .s-name{font-size:11px;letter-spacing:1px;color:var(--bone-dim)}
.stat-cell .s-val{font-family:'VT323',monospace;font-size:26px;color:var(--bone);line-height:1}
.stat-cell .s-mod{font-family:'VT323',monospace;font-size:14px;color:var(--gem)}
.stat-cell .s-mod.neg{color:var(--blood-hot)}
.stat-note{font-family:'VT323',monospace;font-size:15px;color:var(--bone-dim);margin-top:8px;line-height:1.3}

/* ── game screen ─────────────────────────────────────────── */
#screen-game{background:var(--ink)}

#topbar{
  height:42px;
  background:linear-gradient(var(--stone-2),var(--stone));
  border-bottom:var(--px-border) solid var(--ink);
  box-shadow:0 3px 0 var(--stone-3);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  z-index:5;
  flex-shrink:0;
}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-realm{
  font-family:'Pirata One',serif;font-size:20px;color:var(--ember-hot);
  letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-code{
  font-family:'VT323',monospace;font-size:18px;color:var(--gem);
  border:2px solid var(--gem-deep);padding:0 8px;letter-spacing:4px;
  cursor:pointer;
}
.tb-mid{display:flex;gap:18px}
.res{display:flex;align-items:center;gap:6px;font-family:'VT323',monospace;font-size:21px}
.res b{min-width:44px;font-weight:normal}
.res-ico{width:14px;height:14px;display:inline-block;flex-shrink:0}
.res-gold{background:var(--ember-hot);box-shadow:inset -4px -4px 0 #b8860b}
.res-wood{background:#8a5a2a;box-shadow:inset -4px -4px 0 #5a3a18}
.res-ore{background:#8a8f9a;box-shadow:inset -4px -4px 0 #4a4f5a}
.res-gems{background:var(--gem);box-shadow:inset -4px -4px 0 var(--gem-deep)}
.tb-right{display:flex;align-items:center;gap:14px}
.tb-day{font-family:'VT323',monospace;font-size:21px;color:var(--bone);letter-spacing:2px}
.tb-day b{color:var(--ember-hot);font-weight:normal}
.tb-conn{font-size:14px;color:var(--gem)}
.tb-conn.bad{color:var(--blood-hot)}

#main-row{flex:1;display:flex;min-height:0}
#viewport{flex:1;position:relative;overflow:hidden;min-height:0}
#map-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}

/* ambiance tint (set via data-amb on body) */
#ambiance-overlay{position:absolute;inset:0;pointer-events:none;z-index:4;transition:background .8s}
body[data-amb="rain"] #ambiance-overlay{background:rgba(30,50,80,.22);box-shadow:inset 0 0 120px rgba(20,30,60,.5)}
body[data-amb="fog"] #ambiance-overlay{background:rgba(160,160,170,.16);backdrop-filter:blur(1px)}
body[data-amb="night"] #ambiance-overlay{background:rgba(5,8,30,.42)}
body[data-amb="bloodmoon"] #ambiance-overlay{background:rgba(120,13,18,.25);box-shadow:inset 0 0 160px rgba(122,13,18,.55)}

/* help button */
#help-btn{
  position:absolute;top:12px;right:12px;z-index:9;
  width:34px;height:34px;
  background:var(--stone-2);
  border:var(--px-border) solid var(--stone-3);
  color:var(--ember-hot);
  font-family:'Pirata One',serif;
  font-size:22px;
  cursor:pointer;
  line-height:1;
}
#help-btn:hover{border-color:var(--ember);background:var(--ember-deep)}

/* ── GM right toolbar ─────────────────────────────────────── */
#gm-side{
  width:236px;flex-shrink:0;
  background:linear-gradient(to left,var(--stone),var(--stone-2));
  border-left:var(--px-border) solid var(--ink);
  box-shadow:-3px 0 0 var(--stone-3);
  overflow-y:auto;
  padding:8px;
  display:flex;flex-direction:column;gap:8px;
  z-index:5;
}
.side-section{
  background:var(--ink);
  border:var(--px-border) solid var(--stone-3);
  padding:7px 8px;
  display:flex;flex-direction:column;gap:6px;
  flex-shrink:0;
}
.side-head{
  font-size:11px;letter-spacing:2px;color:var(--bone-dim);
  border-bottom:2px solid var(--stone-2);padding-bottom:3px;
}
#side-minimap{
  width:100%;
  border:2px solid var(--stone-2);
  background:#000;
  cursor:pointer;
}
.side-btnrow{display:flex;gap:5px}
.side-btnrow .btn{flex:1;min-width:0}
.dice-row{display:flex;flex-wrap:wrap;gap:4px}
.dice-row .btn{flex:1 0 26%;padding:3px 2px;font-family:'VT323',monospace;font-size:15px}
.side-check{
  font-family:'VT323',monospace;font-size:14px;color:var(--bone-dim);
  display:flex;align-items:center;gap:6px;cursor:pointer;
}
.dice-out{
  font-family:'VT323',monospace;font-size:17px;color:var(--ember-hot);
  min-height:22px;text-align:center;letter-spacing:1px;
  background:#131316;border:2px solid var(--stone-2);padding:3px;
}
.side-select{
  width:100%;font-size:14px;padding:4px 6px;border-width:2px;
  background:#131316;
}
.amb-row .btn{font-size:15px;padding:3px 0}
.amb-row .btn.sel{border-color:var(--ember);background:var(--ember-deep)}
.ledger{
  font-family:'VT323',monospace;font-size:14px;color:var(--bone-dim);
  line-height:1.45;background:#131316;border:2px solid var(--stone-2);
  padding:4px 7px;
}
.ledger b{color:var(--bone);font-weight:normal}

/* confirm + help + bigmap */
.confirm-body{
  font-family:'VT323',monospace;font-size:18px;line-height:1.4;
  background:var(--ink);border:2px solid var(--ember-deep);
  padding:10px 14px;margin-bottom:14px;color:var(--bone);
}
.help-box{width:min(680px,94vw)}
.help-body{
  font-family:'VT323',monospace;font-size:17px;line-height:1.5;
  background:var(--ink);border:2px solid var(--stone-3);
  padding:12px 16px;margin-bottom:14px;
  max-height:56vh;overflow-y:auto;
}
.help-body h4{
  font-family:'IM Fell English SC',serif;font-size:15px;letter-spacing:2px;
  color:var(--ember);margin:10px 0 4px;
}
.help-body h4:first-child{margin-top:0}
.help-body kbd{
  background:var(--stone-2);border:2px solid var(--stone-3);
  padding:0 6px;font-family:'VT323',monospace;color:var(--ember-hot);
  display:inline-block;min-width:22px;text-align:center;
}
.help-body p{margin:2px 0;color:var(--bone-dim)}
.help-body p b{color:var(--bone);font-weight:normal}

.bigmap-box{
  width:min(1100px,94vw);
  background:var(--stone);
  border:var(--px-border) solid var(--ember-deep);
  outline:var(--px-border) solid var(--ink);
  padding:12px;
}
.bigmap-head{
  font-family:'Pirata One',serif;font-size:20px;color:var(--ember-hot);
  letter-spacing:2px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.bigmap-hint{font-family:'VT323',monospace;font-size:14px;color:var(--bone-dim);letter-spacing:1px}
#bigmap-canvas{
  width:100%;height:auto;display:block;
  background:#000;border:2px solid var(--stone-3);
  cursor:pointer;
}

#tile-tip{
  position:absolute;
  pointer-events:none;
  background:var(--ink);
  border:2px solid var(--stone-3);
  font-family:'VT323',monospace;
  font-size:16px;
  padding:3px 8px;
  color:var(--bone);
  z-index:6;
  white-space:nowrap;
  letter-spacing:1px;
}
#tile-tip .tip-danger{color:var(--blood-hot)}
#tile-tip .tip-good{color:var(--gem)}

#narration-banner{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  max-width:70%;
  background:rgba(10,10,13,.94);
  border:var(--px-border) solid var(--ember-deep);
  box-shadow:0 0 40px rgba(255,122,26,.25);
  padding:14px 26px;
  font-size:20px;
  line-height:1.4;
  text-align:center;
  z-index:7;
  animation:banner-in .3s steps(4,end);
}
#narration-banner::before{
  content:"THE MASTER SPEAKS";
  display:block;
  font-family:'VT323',monospace;
  font-size:13px;
  letter-spacing:3px;
  color:var(--ember);
  margin-bottom:6px;
}
@keyframes banner-in{from{transform:translateX(-50%) translateY(-20px);opacity:0}}

/* ── HUD shared ──────────────────────────────────────────── */
.hud{
  flex-shrink:0;
  height:190px;
  background:linear-gradient(var(--stone-2),var(--stone) 30%);
  border-top:var(--px-border) solid var(--ink);
  box-shadow:0 -3px 0 var(--stone-3);
  display:grid;
  gap:8px;
  padding:8px;
  z-index:5;
}
#hud-player{grid-template-columns:230px 150px 190px 1fr 160px}
#hud-gm{grid-template-columns:230px 200px 290px 1fr}

.hud-slab{
  background:var(--ink);
  border:var(--px-border) solid var(--stone-3);
  padding:6px 8px;
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  overflow:hidden;
}
.slab-head{
  font-size:11px;letter-spacing:2px;color:var(--bone-dim);
  border-bottom:2px solid var(--stone-2);
  padding-bottom:3px;margin-bottom:5px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.gm-badge{
  background:var(--blood);color:var(--bone);
  font-size:10px;padding:0 5px;letter-spacing:1px;
}

/* identity slab */
.hud-identity{flex-direction:row;gap:10px;align-items:flex-start;padding-top:10px}
.ident-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ident-name{font-family:'Pirata One',serif;font-size:19px;color:var(--ember-hot);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ident-sub{font-family:'VT323',monospace;font-size:14px;color:var(--bone-dim);letter-spacing:1px}
.bar{
  position:relative;height:16px;
  background:#131316;
  border:2px solid var(--stone-3);
}
.bar-fill{height:100%;background:linear-gradient(var(--blood-hot),var(--blood));width:100%;transition:width .25s steps(5)}
.mv-bar .bar-fill{background:linear-gradient(var(--gem),var(--gem-deep))}
.bar-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'VT323',monospace;font-size:13px;color:var(--bone);
  text-shadow:1px 1px 0 #000;
  letter-spacing:1px;
}
.hp-bar.foe .bar-fill{background:linear-gradient(#b86adb,#5a2a7a)}

/* stats slab */
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;overflow-y:auto}
.mini-stat{display:flex;justify-content:space-between;font-family:'VT323',monospace;font-size:17px}
.mini-stat .ms-n{color:var(--bone-dim)}
.mini-stat .ms-v{color:var(--bone)}
.mini-stat .ms-v b{color:var(--gem);font-weight:normal;font-size:14px}
.mini-stat .ms-v b.neg{color:var(--blood-hot)}

/* inventory slab */
.inv-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:4px;
  flex:1;
}
.inv-slot{
  background:#131316;border:2px solid var(--stone-2);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  cursor:default;
  position:relative;
  min-height:0;
}
.inv-slot.filled{border-color:var(--stone-3);cursor:pointer}
.inv-slot.filled:hover{border-color:var(--ember)}
.inv-slot .inv-qty{
  position:absolute;right:1px;bottom:0;
  font-family:'VT323',monospace;font-size:12px;color:var(--ember-hot);
  text-shadow:1px 1px 0 #000;
}

/* log slab */
.hud-log{min-width:0}
.log-scroll{
  flex:1;overflow-y:auto;
  font-family:'VT323',monospace;
  font-size:16px;
  line-height:1.3;
  letter-spacing:.5px;
  padding-right:4px;
}
.log-line{margin-bottom:2px;word-wrap:break-word}
.log-line .log-day{color:var(--stone-3)}
.log-event{color:var(--bone)}
.log-combat{color:var(--blood-hot)}
.log-loot{color:var(--ember-hot)}
.log-chat{color:var(--bone-dim)}
.log-chat b{color:var(--gem);font-weight:normal}
.log-gm{color:var(--ember)}
.log-system{color:var(--stone-3)}
.chat-row{flex-shrink:0;margin-top:4px}
.chat-row input{
  width:100%;
  font-family:'VT323',monospace;font-size:15px;
  padding:4px 8px;
  border-width:2px;
}

/* minimap slab */
.hud-map canvas{
  flex:1;width:100%;min-height:0;
  border:2px solid var(--stone-2);
  background:#000;
  cursor:pointer;
  object-fit:contain;
}
.hud-btnrow{display:flex;gap:5px;margin-top:5px;flex-shrink:0}
.hud-btnrow .btn{flex:1}

/* ── GM slabs ────────────────────────────────────────────── */
.roster-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.roster-card{
  display:flex;gap:7px;align-items:center;
  background:#131316;border:2px solid var(--stone-2);
  padding:4px 6px;cursor:pointer;
}
.roster-card:hover{border-color:var(--ember-deep)}
.roster-card .portrait-frame{width:34px;height:34px;border-width:2px}
.roster-info{flex:1;min-width:0}
.roster-name{font-size:14px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-sub{font-family:'VT323',monospace;font-size:12px;color:var(--bone-dim)}
.roster-hp{width:100%;height:5px;background:#000;margin-top:2px}
.roster-hp i{display:block;height:100%;background:var(--blood-hot)}
.roster-card.offline{opacity:.45}
.roster-empty{font-family:'VT323',monospace;font-size:15px;color:var(--stone-3);text-align:center;padding:14px 4px;line-height:1.4}

.palette-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  overflow-y:auto;flex:1;align-content:start;
}
.pal-btn{
  background:#131316;border:2px solid var(--stone-2);
  font-size:17px;
  padding:4px 0;
  cursor:pointer;
  text-align:center;
  color:var(--bone);
  line-height:1.1;
}
.pal-btn small{display:block;font-family:'VT323',monospace;font-size:9px;color:var(--bone-dim);letter-spacing:0}
.pal-btn:hover{border-color:var(--ember-deep)}
.pal-btn.sel{border-color:var(--ember);background:var(--ember-deep);color:var(--ember-hot)}
.palette-hint{font-family:'VT323',monospace;font-size:12px;color:var(--stone-3);margin-top:4px;flex-shrink:0;line-height:1.2}

.gm-oracle textarea{
  flex-shrink:0;
  border-width:2px;
  font-size:15px;
  width:100%;
}
.oracle-out{
  flex:1;overflow-y:auto;
  font-family:'VT323',monospace;font-size:14px;line-height:1.3;
  color:var(--bone-dim);
  margin-top:5px;
  padding-right:4px;
}
.oracle-out .oracle-entry{border-left:3px solid var(--ember-deep);padding-left:6px;margin-bottom:6px;color:var(--bone)}
.oracle-out .oracle-meta{color:var(--gem);font-size:12px}

/* ── modals ──────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;
  background:rgba(5,6,10,.82);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
}
.combat-box{
  width:min(560px,94vw);
  background:var(--stone);
  border:var(--px-border) solid var(--ember-deep);
  outline:var(--px-border) solid var(--ink);
  box-shadow:0 0 80px rgba(255,122,26,.15), inset 0 0 60px rgba(0,0,0,.5);
  padding:22px 26px;
}
.combat-title{
  font-family:'Pirata One',serif;font-size:28px;color:var(--ember-hot);
  text-shadow:2px 2px 0 var(--ember-deep);
  margin-bottom:12px;letter-spacing:2px;
}
.combat-arena{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.combatant{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.combatant .portrait-frame{width:80px;height:80px}
.combatant-name{font-size:17px}
.combatant .bar{width:100%}
.combat-vs{font-size:30px;color:var(--blood-hot);flex-shrink:0;animation:vs-throb 1.2s steps(2,end) infinite}
@keyframes vs-throb{50%{transform:scale(1.25)}}
.combat-log{
  height:110px;overflow-y:auto;
  background:var(--ink);border:2px solid var(--stone-3);
  padding:6px 10px;
  font-family:'VT323',monospace;font-size:16px;line-height:1.35;
  margin-bottom:14px;
}
.combat-log .roll{color:var(--ember-hot)}
.combat-log .hurt{color:var(--blood-hot)}
.combat-log .good{color:var(--gem)}
.combat-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
#narrate-modal textarea{width:100%;margin-bottom:14px}

.inspect-body{
  font-family:'VT323',monospace;font-size:17px;line-height:1.5;
  background:var(--ink);border:2px solid var(--stone-3);
  padding:10px 14px;margin-bottom:14px;
  display:flex;gap:14px;align-items:flex-start;
}
.inspect-body .portrait-frame{width:64px;height:64px}
.inspect-body .k{color:var(--bone-dim)}

/* floating combat text on map */
.float-text{
  position:absolute;
  font-family:'VT323',monospace;
  font-size:20px;
  pointer-events:none;
  z-index:8;
  text-shadow:2px 2px 0 #000;
  animation:float-up 1.1s steps(6,end) forwards;
}
@keyframes float-up{to{transform:translateY(-34px);opacity:0}}

/* responsive fallback */
@media (max-width:1100px){
  #hud-player{grid-template-columns:210px 140px 1fr 150px}
  #hud-player .hud-stats{display:none}
  #hud-gm{grid-template-columns:190px 170px 1fr}
}
@media (max-width:860px){
  #hud-player{grid-template-columns:200px 1fr 140px}
  #hud-player .hud-inv{display:none}
  #hud-gm{grid-template-columns:180px 1fr}
  #hud-gm .gm-palette{display:none}
  #gm-side{width:190px}
}