:root{
  --bg:#0d0f14; --bg2:#141821; --bg3:#1b202c; --line:#2a3142;
  --fg:#dfe5f0; --dim:#8a93a7; --amber:#ffb454; --teal:#4fd6c8;
  --red:#ff5a5a; --green:#6ee06e; --violet:#b07cff;
  --radius:7px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* id rules like #editorScreen{display:flex} must not beat the hidden attribute */
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--fg); overflow:hidden;
  font:13px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-user-select:none; user-select:none;
}
#app{height:100%;display:flex;flex-direction:column}
section{height:100%}
button{
  font:inherit; font-weight:600; color:var(--fg); background:var(--bg3);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px 11px; cursor:pointer;
  transition:background .12s,border-color .12s,transform .06s;
}
button:hover{background:#242b3a;border-color:#3b455c}
button:active{transform:translateY(1px)}
button.primary{background:linear-gradient(180deg,#ffc06a,#f59b2e);color:#231603;border-color:#c07a1c}
button.primary:hover{background:linear-gradient(180deg,#ffcd86,#ffa93f)}
button.big{padding:11px 26px;font-size:15px;letter-spacing:.06em}
input,select{
  font:inherit;color:var(--fg);background:#0b0e14;border:1px solid var(--line);
  border-radius:5px;padding:5px 7px;
}
input[type=range]{padding:0}
kbd{
  display:inline-block;background:#0b0e14;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;font:11px ui-monospace,monospace;color:var(--amber);margin-right:3px;
}

/* ---------- topbar ---------- */
#topbar{
  display:flex;align-items:center;gap:14px;padding:8px 14px;
  background:linear-gradient(180deg,var(--bg2),#10131b);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.22em;font-size:16px}
.brand .logo{color:var(--amber);font-size:20px;letter-spacing:0}
.bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1}
.bar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
label.num{display:flex;align-items:center;gap:5px;color:var(--dim);font-size:11px;font-weight:700}
label.num input{width:52px}

/* ---------- editor layout ---------- */
#editorScreen{display:flex;flex-direction:column}
#editorBody{flex:1;display:grid;grid-template-columns:186px 1fr 238px;min-height:0}
#palette,#inspector{
  background:var(--bg2);overflow-y:auto;padding:10px;
}
#palette{border-right:1px solid var(--line)}
#inspector{border-left:1px solid var(--line)}
.panelTitle{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:800;margin:12px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line);
}
.panelTitle:first-child{margin-top:0}
.toolRow{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.toolRow button{padding:6px 2px;font-size:11px}
.toolRow button.on{background:var(--amber);color:#231603;border-color:#c07a1c}
.palGroup{margin-bottom:6px}
.palGroup h4{margin:11px 0 6px;font-size:10px;letter-spacing:.13em;color:var(--dim);text-transform:uppercase}
.swatch{
  display:flex;align-items:center;gap:8px;width:100%;padding:5px 7px;margin-bottom:3px;
  background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;text-align:left;
  font-size:12px;font-weight:600;color:var(--fg);
}
.swatch:hover{background:#222836}
.swatch.on{background:#2b3446;border-color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)}
.swatch .chip{width:22px;height:22px;border-radius:4px;flex:none;border:1px solid #0009;image-rendering:pixelated}
.swatch canvas.chip{background:#11151d}

/* ---------- editor canvas ---------- */
#canvasWrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 40%,#171c26,#0a0c11 75%);
  overflow:hidden;min-height:0;
}
#editorCanvas{
  image-rendering:pixelated;cursor:crosshair;border-radius:4px;
  box-shadow:0 0 0 1px var(--line),0 18px 50px #0009;
}
#editorHint{
  position:absolute;bottom:9px;left:50%;transform:translateX(-50%);
  color:var(--dim);font-size:11px;background:#0b0e14cc;padding:4px 12px;border-radius:20px;
  border:1px solid var(--line);white-space:nowrap;
}

/* ---------- inspector ---------- */
.field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);font-weight:700;margin-bottom:8px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;font-size:11px;color:var(--dim)}
.stats b{color:var(--fg);font-variant-numeric:tabular-nums}
.validation{margin-top:8px;font-size:11px;line-height:1.5}
.validation .err{color:var(--red)}
.validation .warn{color:var(--amber)}
.validation .ok{color:var(--green)}
.selInfo{font-size:11px;color:var(--dim)}
.selInfo b{display:block;color:var(--fg);font-size:13px;margin-bottom:2px}
.levelList{display:flex;flex-direction:column;gap:4px}
.levelRow{display:flex;gap:4px;align-items:center}
.levelRow .nm{
  flex:1;padding:5px 8px;background:var(--bg3);border:1px solid var(--line);border-radius:5px;
  font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.levelRow .nm:hover{border-color:var(--amber)}
.levelRow .del{padding:4px 7px;color:var(--dim);background:transparent;border-color:transparent}
.levelRow .del:hover{color:var(--red);background:#2a1a1a}
.legend{margin:0;padding-left:15px;font-size:11px;color:var(--dim);line-height:1.6}
.legend b{color:var(--fg)}
.empty{color:var(--dim);font-size:11px;font-style:italic}

/* ---------- game ---------- */
#gameScreen{position:relative;background:#000;overflow:hidden}
#view,#hud{position:absolute;inset:0;width:100%;height:100%;display:block}
#view{image-rendering:pixelated}
#hud{pointer-events:none}
.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#0d0f14dd,#000000f2);backdrop-filter:blur(3px);z-index:5;
}
.overlay[hidden]{display:none}
.panel{
  width:min(480px,92vw);padding:30px 34px;text-align:center;
  background:linear-gradient(180deg,#171c26,#10131b);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 70px #000c;
}
.panel h1{margin:0 0 6px;font-size:34px;letter-spacing:.2em;color:var(--amber)}
.panel h1.dead{color:var(--red)}
.panel .lead{margin:0 0 18px;color:var(--dim)}
.panel button{margin:6px 4px 0}
.keys{
  display:grid;gap:6px;margin:0 0 20px;padding:14px;text-align:left;
  background:#0b0e14;border:1px solid var(--line);border-radius:8px;color:var(--dim);font-size:12px;
}
.row{display:flex;gap:14px;justify-content:center;margin-bottom:12px;text-align:left}
.endStats{
  display:grid;grid-template-columns:auto auto;gap:6px 22px;justify-content:center;
  margin:0 0 20px;padding:14px 20px;background:#0b0e14;border:1px solid var(--line);border-radius:8px;
  font-size:13px;color:var(--dim);
}
.endStats b{color:var(--fg);font-variant-numeric:tabular-nums;text-align:right}
.validation .info{color:var(--dim);margin-top:3px}

/* ---------- online ---------- */
body.is-online .soloOnly, body:not(.is-online) .onlineOnly, body:not(.is-host) .hostOnly{display:none !important}
body.is-spectator .playOnly, body:not(.is-spectator) .specOnly{display:none !important}
body.is-spectator #view{cursor:pointer}
button.online{background:linear-gradient(180deg,#5de3d5,#2fb3a6);color:#04211e;border-color:#23877d}
button.online:hover{background:linear-gradient(180deg,#78efe3,#3cc5b7)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.roomPill{background:#10241f;border-color:#23877d;color:var(--teal)}
.roomPill b{letter-spacing:.14em;color:#fff}
.code{font-family:ui-monospace,Consolas,monospace;letter-spacing:.12em;color:var(--teal)}
.codeRow{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;color:var(--dim);font-weight:700}
.codeRow b{font-size:14px}
.codeRow button{margin-left:auto;padding:3px 9px;font-size:11px}
#editorScreen{position:relative}
#editorScreen .overlay{z-index:20}
.panel.wide{width:min(760px,95vw);max-height:94vh;overflow-y:auto}
.panel h3{margin:4px 0 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.panel .small,.small{font-size:11px;color:var(--dim)}
.nameField{max-width:260px;margin:0 auto 14px;text-align:left}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;margin-bottom:10px}
.card{background:#0b0e14;border:1px solid var(--line);border-radius:10px;padding:14px}
.card h3:not(:first-child){margin-top:16px}
.card > button{width:100%;margin:10px 0 0}
.inline{display:flex;gap:6px}
.inline input{flex:1;min-width:0}
.inline button{margin:0}
.codeInput{font:700 16px ui-monospace,Consolas,monospace;letter-spacing:.3em;text-transform:uppercase;text-align:center}
.modePick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.modeBtn{display:flex;flex-direction:column;gap:3px;text-align:left;padding:9px 11px;margin:0 !important;background:#0f131b}
.modeBtn b{font-size:13px}
.modeBtn span{font-size:11px;font-weight:500;color:var(--dim);line-height:1.35}
.modeBtn.on{border-color:var(--amber);background:#2a2415;box-shadow:inset 0 0 0 1px var(--amber)}
.modeBtn[data-mode=versus].on{border-color:#ff6a8a;background:#2a1520;box-shadow:inset 0 0 0 1px #ff6a8a}
.modeBtn:disabled{opacity:1;cursor:default}
.modeBtn:disabled:not(.on){opacity:.45}
.msg{min-height:18px;margin:8px 0 2px;font-size:12px;color:var(--dim)}
.msg.bad{color:var(--red)}
.lobbyHead{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;margin-bottom:14px}
.lobbyInvite{text-align:right;max-width:280px}
.lobbyInvite button{margin:0 0 6px}
.kicker{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--dim)}
.bigCode{font:800 44px/1 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:var(--amber);-webkit-user-select:all;user-select:all}
.lobbyMaze{display:flex;gap:14px;align-items:center;text-align:left;background:#0b0e14;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:6px}
.lobbyMaze canvas{border-radius:6px;border:1px solid var(--line);flex:none;image-rendering:pixelated}
.lobbyMaze .mazeName{font-size:17px;font-weight:800;margin:2px 0}
.lobbyMaze button{margin:8px 6px 0 0;font-size:11px;padding:4px 9px}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 8px;text-align:left}
.seat{--seat:#fff;background:#0b0e14;border:1px solid var(--line);border-top:3px solid var(--seat);border-radius:8px;padding:9px 10px;min-height:92px}
.seat.me{background:#131a24}
.seat.open{opacity:.5;border-top-style:dashed}
.seat.open .seatState{color:var(--dim)}
.seatTop{display:flex;gap:5px;align-items:center;font-weight:800;color:var(--seat);font-size:12px}
.badge{font-size:9px;letter-spacing:.1em;background:#2b3446;color:var(--fg);border-radius:4px;padding:1px 5px}
.badge.you{background:var(--seat);color:#10131b}
.seatName{font-size:14px;font-weight:700;margin:4px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatState{font-size:11px;color:var(--green)}
.seatState.off{color:var(--dim)}
.seatState.watch{color:var(--teal)}
.modePick[data-for=role] .modeBtn.on{border-color:var(--teal);background:#10241f;box-shadow:inset 0 0 0 1px var(--teal)}
.seatSpawn{font-size:10px;color:var(--dim);margin-top:3px}
.lobbyResult{margin:8px 0;text-align:left}
.endTable{margin:0 0 18px}
.endTable:empty{display:none}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:4px 8px;border-bottom:1px solid var(--line)}
td{padding:6px 8px;border-bottom:1px solid #1b202c}
tr.me td{background:#161d28}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:50;max-width:min(680px,92vw);
  background:#0b0e14f2;border:1px solid var(--teal);color:var(--fg);padding:9px 16px;border-radius:9px;font-size:12px;
  box-shadow:0 10px 30px #000a;-webkit-user-select:text;user-select:text;word-break:break-all}
/* shown when the browser refused to capture the mouse: one click takes it back */
.relock{position:absolute;inset:0;z-index:4;cursor:pointer;display:flex;align-items:center;justify-content:center}
.relock span{padding:10px 20px;border-radius:24px;background:#0b0e14e6;border:1px solid var(--amber);color:var(--amber);font-weight:800;font-size:15px;box-shadow:0 10px 30px #000a}

/* ---------- floors ---------- */
#canvasWrap{flex-direction:column;gap:8px}
.floorTabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.floorTab{padding:4px 12px;font-size:11px;background:#10141c}
.floorTab.on{background:#2a2415;border-color:var(--amber);color:var(--amber)}
.floorTab.add{color:var(--teal);border-style:dashed}
.floorTab.del{color:var(--dim);background:transparent;border-color:transparent}
.floorTab.del:hover{color:var(--red)}
label.num input#inpFloors{width:40px}

/* ---------- palette extras ---------- */
.swatch.custom span::after{content:" ★";color:var(--amber);font-size:10px}
.makerBtn{width:100%;margin-top:4px;padding:6px 8px;font-size:12px;color:var(--amber);background:#1d1a12;border:1px dashed #6b5424}
.makerBtn:hover{background:#2a2415;border-color:var(--amber)}

/* ---------- monster maker ---------- */
.panel.maker{width:min(980px,96vw);text-align:left;padding:18px 22px}
.makerHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.makerHead h1{font-size:24px;margin:0}
.makerBody{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}
.bodyGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:4px}
.bodyBtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;margin:0 !important;background:#0f131b;font-size:10px}
.bodyBtn canvas{image-rendering:pixelated}
.bodyBtn.on{border-color:var(--amber);background:#2a2415;color:var(--amber)}
.colorsRow{display:flex;gap:14px;margin:4px 0 10px}
.colorsRow label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);font-weight:700}
.colorsRow input[type=color]{width:38px;height:26px;padding:1px;border-radius:5px;background:#0b0e14;cursor:pointer}
.mkSliders{display:grid;gap:6px;margin-bottom:10px}
.mkSlider{display:grid;grid-template-columns:104px 1fr 128px;align-items:center;gap:10px;font-size:11px;color:var(--dim);font-weight:700}
.mkSlider output{color:var(--fg);font-variant-numeric:tabular-nums}
.makerForm select{width:100%}
.makerPreview canvas{width:100%;border-radius:8px;border:1px solid var(--line);image-rendering:pixelated;display:block}
.threat{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:10px 0;font-size:12px;color:var(--dim)}
.threat div{display:flex;justify-content:space-between}
.threat b{color:var(--fg)}
.threat .star{font-style:normal;font-size:15px;color:#2f3645;letter-spacing:1px}
.threat .star.on{color:var(--amber)}
.mkButtons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mkButtons button{margin:0 !important}
.library{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:6px;max-height:190px;overflow-y:auto}
.libCard{display:flex;align-items:center;gap:8px;background:#0b0e14;border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.libCard.on{border-color:var(--amber)}
.libCard canvas{image-rendering:pixelated;flex:none}
.libCard > div{flex:1;min-width:0;display:flex;flex-direction:column}
.libCard b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libCard span{font-size:10px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libCard button{margin:0 !important;padding:3px 8px;font-size:11px}
.libCard .del{background:transparent;border-color:transparent;color:var(--dim)}
.libCard .del:hover{color:var(--red)}

/* ---------- character sheet ---------- */
.charOverlay{background:radial-gradient(ellipse at center,#0d0f14cc,#000000e0)}
.panel.sheet{width:min(920px,96vw);text-align:left;padding:18px 22px}
.sheetHead{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.lvBadge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:3px solid #ffd34a;background:#1d1a12}
.lvBadge small{font-size:9px;letter-spacing:.14em;color:#c9a94a;font-weight:800}
.lvBadge b{font-size:26px;line-height:1;color:#ffd34a}
.xpBox{flex:1}
.xpBar{height:12px;background:#0b0e14;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:4px}
.xpBar i{display:block;height:100%;background:linear-gradient(90deg,#c99b4a,#ffd34a);transition:width .3s}
.xpBox span{font-size:11px;color:var(--dim)}
.sheetCols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sheetCols h3{display:flex;justify-content:space-between;align-items:baseline}
.chPoints{color:#ffd34a;font-size:11px;letter-spacing:.06em;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.chStat{--c:#fff;display:grid;grid-template-columns:22px 1fr auto 34px;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:7px 8px;margin-bottom:5px;background:#0b0e14;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:7px}
.chStat kbd{grid-row:1/3}
.chStatName{display:flex;flex-direction:column}
.chStatName b{color:var(--c);font-size:13px}
.chStatName span{font-size:10px;color:var(--dim)}
.chPips{grid-column:2/4;grid-row:2;display:flex;gap:2px;margin-top:4px}
.chPips i{width:10px;height:5px;border-radius:2px;background:#1f2533}
.chPips i.on{background:var(--c)}
.chStatVal{font-size:11px;color:var(--fg);font-weight:700;text-align:right}
.chPlus{grid-row:1/3;grid-column:4;width:32px;height:32px;padding:0;font-size:18px;margin:0 !important;background:#1d1a12;border-color:#6b5424;color:#ffd34a}
.chPlus:disabled{opacity:.25}
.chSpell,.chScroll,.chItem{--c:#fff;display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;margin:0 0 5px !important;background:#0b0e14;border:1px solid var(--line);border-radius:7px;text-align:left}
.chSpell{cursor:pointer}
.chSpell.on{border-color:var(--c);box-shadow:inset 3px 0 0 var(--c)}
.chSpell > div,.chScroll > div{flex:1;display:flex;flex-direction:column;min-width:0}
.chSpell b,.chScroll b{color:var(--c);font-size:12px}
.chSpell span,.chScroll span{font-size:10px;color:var(--dim)}
.chItem b{flex:1;font-size:12px}
.chScroll button,.chItem button{margin:0 !important;padding:4px 10px;font-size:11px}
.chIcon{width:28px;height:28px;image-rendering:pixelated;flex:none}
.chEmpty{font-size:11px;color:var(--dim);font-style:italic;margin-bottom:6px}
@media (max-width:760px){
  .makerBody,.sheetCols{grid-template-columns:1fr}
  .bodyGrid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .cards,.modePick{grid-template-columns:1fr}
  .seats{grid-template-columns:1fr 1fr}
  .lobbyHead{flex-direction:column;align-items:flex-start}
  .lobbyInvite{text-align:left}
}
@media (max-width:1100px){
  #editorBody{grid-template-columns:160px 1fr}
  #inspector{display:none}
}