/* Emberfall - interface chrome.
   Everything is drawn with gradients and borders; no image files, so nothing
   can 404 on a fresh upload. */

:root{
  --wood-dark:#241a11;
  --wood:#3c2d1e;
  --wood-lit:#54402b;
  --stone:#6b6455;
  --stone-dark:#413c32;
  --stone-lit:#8a8272;
  --parch:#d8c9a3;
  --parch-dark:#b9a87e;
  --ink:#2b2013;
  --gold:#e0c23c;
  --text:#e9dcbd;
  --green:#7fc06a;
  --red:#c4453a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#14100b;
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;color:var(--text);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
canvas{display:block}

.screen{position:absolute;inset:0}

/* ------------------------------------------------------------- buttons */
.stone-btn{
  background:linear-gradient(#7d7565,#4b463b);
  border:2px solid #241f18;
  border-top-color:#9a9383;border-left-color:#8c8474;
  color:var(--text);text-shadow:1px 1px 0 #000;
  padding:8px 16px;font-size:15px;letter-spacing:.5px;cursor:pointer;
  border-radius:2px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.35);
}
.stone-btn:hover{background:linear-gradient(#8d8574,#585244)}
.stone-btn:active{background:linear-gradient(#4b463b,#7d7565);box-shadow:inset 0 3px 6px rgba(0,0,0,.45)}
.stone-btn.big{font-size:18px;padding:12px 26px;min-width:230px}
.stone-btn.small{padding:5px 10px;font-size:13px;min-width:0}
.stone-btn.ghost{background:linear-gradient(#5a5348,#3a352c)}
button.mini{background:linear-gradient(#6f6857,#413c32);border:1px solid #241f18;color:var(--text);
  padding:2px 7px;font-size:12px;cursor:pointer;border-radius:2px}
button.mini.on{background:linear-gradient(#b79a4a,#7a6427);color:#fff}

/* ------------------------------------------------------------ parchment */
.parchment{
  background:linear-gradient(#e3d5b0,#c3b18a);
  border:3px solid #6a5535;color:var(--ink);
  box-shadow:0 6px 26px rgba(0,0,0,.6), inset 0 0 40px rgba(140,110,60,.35);
  padding:16px;border-radius:3px;
}
.parchment h2{margin:0 0 10px;font-size:20px;letter-spacing:1px;color:#4a3a1e;
  border-bottom:2px solid #9c8a63;padding-bottom:6px}
.parchment label{display:block;margin:8px 0;font-size:14px;color:#402f18}
.parchment input[type=text],.parchment input[type=password]{
  width:100%;margin-top:4px;padding:7px 8px;font-size:15px;
  background:#f1e7cd;border:2px solid #7c6942;color:#2b2013;border-radius:2px}

/* ------------------------------------------------------------ title */
#screen-title{background:radial-gradient(ellipse at 50% 0%,#3a3222,#120e09 70%)}
.title-bg{position:absolute;inset:0;opacity:.55}
.title-bg canvas{width:100%;height:100%}
.title-wrap{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px;overflow:auto}
.game-title{
  margin:0;font-size:clamp(38px,8vw,76px);letter-spacing:6px;font-weight:700;
  color:#f0dda3;text-shadow:0 3px 0 #6a4f1c,0 6px 14px rgba(0,0,0,.85);
  font-family:Georgia,"Times New Roman",serif;
}
.game-title.small{font-size:36px}
.game-title .numeral{color:var(--gold)}
.tagline{margin:0 0 8px;font-style:italic;color:#c3b189;font-size:15px;text-shadow:1px 1px 3px #000}
.title-buttons{display:flex;flex-direction:column;gap:12px}
.form-box{width:min(380px,92vw)}
.form-row{display:flex;gap:10px;margin-top:12px}
.form-err{color:#8c2a1e;font-size:13px;min-height:18px;margin-top:6px;font-weight:bold}
.footnote{position:absolute;bottom:10px;font-size:11px;color:#7d7157;text-align:center;width:100%}

/* --------------------------------------------------- character creation */
#screen-char{background:radial-gradient(ellipse at 50% 20%,#3a3222,#120e09 70%)}
.char-layout{height:100%;display:flex;align-items:center;justify-content:center;gap:26px;
  flex-wrap:wrap;padding:20px;overflow:auto}
.char-preview{position:relative;width:min(330px,90vw);height:min(440px,60vh);
  border:3px solid #6a5535;background:linear-gradient(#2e2a20,#15120c);box-shadow:0 6px 26px rgba(0,0,0,.6)}
#charViewport{position:absolute;inset:0}
.char-spin{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:14px}
.char-opts{width:min(420px,94vw);max-height:82vh;overflow:auto}
.opt-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.opt-row>span{width:92px;font-size:13px;color:#402f18;flex:none}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.sw{width:26px;height:26px;border:2px solid #6a5535;cursor:pointer;border-radius:2px}
.sw.sel{border-color:#fff;box-shadow:0 0 0 2px #6a5535}
.sw.text{width:auto;padding:2px 8px;font-size:12px;color:#2b2013;background:#e7d9b4;
  display:flex;align-items:center}

/* ------------------------------------------------------------- loading */
#screen-load{background:radial-gradient(ellipse at 50% 40%,#2d2618,#0e0b07 70%)}
.load-wrap{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.load-bar{width:min(420px,80vw);height:22px;background:#1b160e;border:2px solid #6a5535;padding:2px}
#loadFill{height:100%;width:0;background:linear-gradient(#d9b74e,#8b6d1e);transition:width .2s}
#loadText{font-size:14px;color:#b9a87e}

/* ---------------------------------------------------------------- game */
#gameGrid{position:absolute;inset:0;display:grid;
  grid-template-columns:1fr 262px;grid-template-rows:1fr 176px;
  grid-template-areas:"view side" "chat side";
  background:var(--wood-dark)}
#viewport{grid-area:view;position:relative;overflow:hidden;background:#0d0b08}
#viewport canvas{width:100%;height:100%}

#sidebar{grid-area:side;background:
  linear-gradient(90deg,#1d150d,#2f2416 6px,#3c2d1e 8px,#33271a 100%);
  border-left:3px solid #100c07;display:flex;flex-direction:column;overflow:hidden}

#chatPanel{grid-area:chat;background:linear-gradient(#2b2116,#1b1409);
  border-top:3px solid #100c07;display:flex;flex-direction:column;overflow:hidden}

/* minimap */
#minimapWrap{position:relative;padding:8px;flex:none;
  background:linear-gradient(#4a3a26,#2e2417);border-bottom:2px solid #100c07}
#minimap{width:168px;height:168px;margin:0 auto;display:block;border-radius:50%;
  border:3px solid #6a5535;background:#1d2a16;box-shadow:inset 0 0 20px rgba(0,0,0,.8)}
#compass{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(#d9c88f,#8a7647);border:2px solid #46381f;cursor:pointer}
#compass::after{content:"N";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#4a2a1a;font-weight:bold;font-size:15px}
#mmZoom{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:3px}
#mmZoom button{width:22px;height:20px;background:#5c5142;border:1px solid #241f18;color:#e9dcbd;cursor:pointer;font-size:13px;line-height:1}
#regionName{position:absolute;bottom:10px;left:12px;font-size:11px;color:#f0dda3;
  text-shadow:1px 1px 2px #000;max-width:110px}

/* status orbs beside the minimap */
#orbs{position:absolute;left:6px;top:10px;display:flex;flex-direction:column;gap:6px}
.orb{position:relative;width:34px;height:34px;border-radius:50%;
  border:2px solid #46381f;background:#231c12;overflow:hidden;cursor:default;
  box-shadow:inset 0 0 8px rgba(0,0,0,.8)}
.orb .orb-fill{position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(#7fc06a,#3f7a35);transition:height .25s}
.orb b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#fff;text-shadow:1px 1px 0 #000,0 0 3px #000}
#orbPray .orb-fill{background:linear-gradient(#9fd0ef,#3f6ea8)}
#orbRun{cursor:pointer}
#orbRun .orb-fill{background:linear-gradient(#e0c23c,#8b6d1e)}
#orbRun.running{border-color:#e0c23c;box-shadow:0 0 8px rgba(224,194,60,.7),inset 0 0 8px rgba(0,0,0,.8)}
#minimap{cursor:crosshair}

/* tabs */
#tabRow{display:grid;grid-template-columns:repeat(5,1fr);flex:none;
  background:#241a11;border-bottom:2px solid #100c07}
.tab-btn{height:36px;background:linear-gradient(#5b5040,#332b20);
  border:1px solid #191309;border-top-color:#6f6450;
  color:#cbbd9a;font-size:11px;cursor:pointer;padding:0 2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-shadow:1px 1px 0 #000;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.35)}
.tab-btn.active{background:linear-gradient(#8b7442,#5c4a24);color:#fff}
.tab-btn:hover{background:linear-gradient(#5f5443,#3b3326)}
.tab-btn.active:hover{background:linear-gradient(#9a8149,#66522a)}

#panelBody{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;
  background:linear-gradient(#453724,#2c2216)}
#panelBody::-webkit-scrollbar{width:9px}
#panelBody::-webkit-scrollbar-track{background:#241a11}
#panelBody::-webkit-scrollbar-thumb{background:#6b5c3f;border:1px solid #241a11}

/* inventory: one recessed leather panel with faint slot divisions, rather
   than 28 separate grey boxes, which is what made it read as a spreadsheet */
.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  background:linear-gradient(#2a2014,#1a1309);
  border:2px solid #120d07;border-radius:2px;padding:3px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.75)}
.inv-grid.small{grid-template-columns:repeat(7,1fr);gap:2px}
.inv-slot{position:relative;aspect-ratio:1;
  background:linear-gradient(160deg,rgba(255,235,190,.055),rgba(0,0,0,.16));
  border:1px solid rgba(0,0,0,.45);
  box-shadow:inset 0 1px 0 rgba(255,230,180,.06);
  display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:2px}
.inv-slot:hover{background:linear-gradient(160deg,rgba(226,190,90,.30),rgba(120,92,30,.18));
  border-color:#b79a4a;box-shadow:inset 0 0 8px rgba(226,190,90,.25)}
.inv-slot:active{background:rgba(226,190,90,.42)}
.inv-slot canvas{width:100%;height:100%;image-rendering:auto;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.55))}
.inv-slot .qty{position:absolute;top:-1px;left:2px;font-size:12px;font-weight:bold;
  color:#f5e27a;pointer-events:none;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.inv-slot.drag{outline:2px solid var(--gold);outline-offset:-2px;
  background:rgba(226,190,90,.3)}

/* equipment */
.eq-layout{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}
.eq-slot{aspect-ratio:1;
  background:linear-gradient(160deg,rgba(255,235,190,.06),rgba(0,0,0,.3));
  border:1px solid rgba(0,0,0,.5);border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,230,180,.07),inset 0 0 8px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
  font-size:9px;color:#7d7157;text-align:center}
.eq-slot canvas{width:96%;height:96%;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.55))}
.eq-slot:hover{border-color:#9a8149}
.eq-empty{grid-column:span 1}

/* stats */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.stat-cell{background:linear-gradient(#59492f,#3a2f1e);border:1px solid #241a11;
  padding:3px 2px;font-size:10px;display:flex;align-items:center;gap:3px;cursor:pointer}
.stat-cell:hover{background:linear-gradient(#6e5b39,#4a3b25)}
.stat-dot{width:8px;height:8px;flex:none;border-radius:2px;border:1px solid #1a1409}
.stat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7c79d}
.stat-lvl{color:var(--gold);font-weight:bold}
.stat-total{margin-top:6px;text-align:center;font-size:12px;color:var(--gold);
  background:rgba(20,14,8,.5);border:1px solid #241a11;padding:4px}

/* lists */
.panel-h{font-size:13px;color:var(--gold);text-shadow:1px 1px 0 #000;margin:2px 0 6px;
  border-bottom:1px solid #6b5c3f;padding-bottom:3px}
.list-row{background:rgba(20,14,8,.4);border:1px solid #241a11;padding:5px 6px;margin-bottom:3px;
  font-size:12px;cursor:pointer;line-height:1.35}
.list-row:hover{background:rgba(120,100,50,.3)}
.list-row .sub{font-size:10px;color:#a3946f;display:block}
.q-done{color:var(--green)}
.q-active{color:var(--gold)}
.q-none{color:#b6a684}

/* prayer / magic */
.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.icon-cell{aspect-ratio:1;background:rgba(20,14,8,.45);border:1px solid #241a11;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:8px;color:#b6a684;text-align:center;padding:1px;overflow:hidden}
.icon-cell .gem{width:16px;height:16px;border-radius:50%;border:1px solid #1a1409;margin-bottom:2px}
.icon-cell.on{background:linear-gradient(#8b7442,#5c4a24);color:#fff}
.icon-cell.locked{opacity:.35;cursor:not-allowed}
.icon-cell:hover{border-color:#9a8149}

/* options */
.opt-line{display:flex;align-items:center;gap:6px;margin:7px 0;font-size:12px}
.opt-line label{flex:1;color:#d7c79d}
.opt-line input[type=range]{flex:1;accent-color:#8b7442}

/* hud bars */
.bar{height:14px;background:#1b1409;border:1px solid #241a11;position:relative;margin:3px 0}
.bar>i{display:block;height:100%}
.bar>span{position:absolute;inset:0;text-align:center;font-size:10px;line-height:12px;
  text-shadow:1px 1px 0 #000}

/* chat */
#chatTabs{display:flex;gap:2px;padding:3px 4px 0;flex:none}
.chat-tab{background:linear-gradient(#4e4436,#312a20);border:1px solid #191309;border-bottom:none;
  color:#cbbd9a;font-size:11px;padding:3px 10px;cursor:pointer}
.chat-tab.active{background:linear-gradient(#8b7442,#5c4a24);color:#fff}
#chatLog{flex:1;overflow-y:auto;padding:4px 8px;font-size:13px;line-height:1.45;
  background:rgba(10,7,4,.35);border-top:1px solid #100c07}
#chatLog::-webkit-scrollbar{width:9px}
#chatLog::-webkit-scrollbar-thumb{background:#6b5c3f}
#chatLog div{text-shadow:1px 1px 0 #000}
.c-game{color:#c8bb98}
.c-pub{color:#f0f0f0}
.c-pub b{color:#9fd0ff}
.c-pm{color:#d99bff}
.c-sys{color:#e0c23c}
.c-warn{color:#ff9a6a}
.c-good{color:#7fc06a}
#chatInputRow{flex:none;display:flex;align-items:center;gap:6px;padding:5px 8px;
  background:linear-gradient(#3c2d1e,#241a11);border-top:2px solid #100c07}
#chatPrefix{font-size:12px;color:var(--gold);flex:none}
#chatInput{flex:1;background:#1b1409;border:1px solid #6b5c3f;color:#fff;padding:5px 7px;font-size:13px}
#chatInput:focus{outline:none;border-color:#b79a4a}

/* viewport overlays */
#hoverText{position:absolute;top:6px;left:8px;font-size:14px;color:#fff;
  text-shadow:1px 1px 2px #000;pointer-events:none}
#splatLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.splat{position:absolute;width:34px;height:30px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;
  color:#fff;text-shadow:1px 1px 0 #000;pointer-events:none}
.splat.hit{background:radial-gradient(circle,#c4453a 58%,transparent 60%)}
.splat.miss{background:radial-gradient(circle,#3f6ea8 58%,transparent 60%)}
.splat.heal{background:radial-gradient(circle,#3f9b52 58%,transparent 60%)}
.nameplate{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  text-align:center;font-size:11px;color:#fff;text-shadow:1px 1px 2px #000;white-space:nowrap}
.nameplate .hpbar{width:44px;height:5px;background:#3a0f0c;border:1px solid #000;margin:2px auto 0}
.nameplate .hpbar i{display:block;height:100%;background:#4ec45a}
/* XP drops sit top-centre of the viewport, where the eye already is during
   a fight, rather than tucked into a corner. */
#xpDrop{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none}
#xpDrop div{font-size:17px;font-weight:bold;color:#fff;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  display:flex;align-items:center;gap:6px;
  animation:xpfade 2.6s ease-out forwards}
#xpDrop div i{width:11px;height:11px;border-radius:2px;border:1px solid #000;display:inline-block}
@keyframes xpfade{0%{opacity:0;transform:translateY(10px)}
  12%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px)}}

/* the cross that flashes where you clicked */
.click-x{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;
  animation:clickx .42s ease-out forwards}
.click-x::before,.click-x::after{content:"";position:absolute;left:50%;top:0;width:3px;height:100%;
  margin-left:-1.5px;background:#e03a2a;box-shadow:0 0 2px #000}
/* yellow means the click landed on nothing you can act on */
.click-x.dead::before,.click-x.dead::after{background:#f2d040}
.click-x::before{transform:rotate(45deg)}
.click-x::after{transform:rotate(-45deg)}
@keyframes clickx{0%{opacity:1;transform:scale(.5)}60%{opacity:1;transform:scale(1.15)}
  100%{opacity:0;transform:scale(1.3)}}

#deathOverlay{position:absolute;inset:0;background:rgba(70,10,5,.55);display:none;
  align-items:center;justify-content:center}
#deathOverlay.on{display:flex}
.death-box{width:min(360px,86vw);text-align:center}

/* floating windows */
.floating{position:absolute;z-index:40}
.window{background:linear-gradient(#4a3a26,#2e2417);border:3px solid #100c07;
  box-shadow:0 8px 30px rgba(0,0,0,.7);width:min(560px,94vw);
  left:50%;top:50%;transform:translate(-50%,-50%);max-height:88vh;display:flex;flex-direction:column}
.win-title{background:linear-gradient(#8b7442,#5c4a24);padding:6px 10px;font-size:15px;
  color:#fff;text-shadow:1px 1px 0 #000;flex:none;position:relative;cursor:move}
.win-close{position:absolute;right:6px;top:3px;background:none;border:none;color:#fff;
  font-size:20px;cursor:pointer;line-height:1}
.win-body{padding:8px;overflow:auto}
.grid-scroll{max-height:38vh;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:3px;
  background:rgba(10,7,4,.35);padding:4px;border:1px solid #241a11}
.bank-tools{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.bank-tools input{flex:1;min-width:120px;background:#1b1409;border:1px solid #6b5c3f;
  color:#fff;padding:4px 6px;font-size:12px}
.bank-amt{font-size:12px;color:#cbbd9a;display:flex;gap:3px;align-items:center}
.bank-foot{display:flex;gap:8px;margin-top:8px;align-items:flex-start;flex-wrap:wrap}
.bank-foot .inv-grid{flex:1;min-width:200px}
.bank-actions{width:170px;display:flex;flex-direction:column;gap:6px}
.hint{font-size:11px;color:#a3946f;line-height:1.3}
.shop-cell{position:relative}
.shop-cell .price{position:absolute;bottom:0;right:2px;font-size:9px;color:var(--gold);text-shadow:1px 1px 0 #000}

/* dialogue */
#dialogueBox{left:50%;bottom:200px;transform:translateX(-50%);width:min(560px,92vw);z-index:45}
.dlg-name{font-weight:bold;font-size:16px;color:#5a3f16;border-bottom:2px solid #9c8a63;
  padding-bottom:4px;margin-bottom:8px}
.dlg-text{font-size:15px;line-height:1.5;color:#33260f;min-height:44px}
.dlg-opts{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.dlg-opt{background:rgba(90,70,30,.14);border:1px solid #9c8a63;padding:6px 9px;
  font-size:14px;cursor:pointer;color:#33260f}
.dlg-opt:hover{background:rgba(140,110,40,.3)}

/* trade */
.trade-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trade-head{font-size:12px;color:var(--gold);margin-bottom:3px}
.trade-status{text-align:center;font-size:13px;color:#e9dcbd;margin:8px 0;min-height:18px}

/* level up + toast */
#levelUp{left:50%;top:30%;transform:translateX(-50%);width:min(340px,88vw);text-align:center;z-index:60}
#levelUp h3{margin:0 0 6px;font-size:20px;color:#5a3f16}
#toast{position:absolute;left:50%;bottom:190px;transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
.toast-msg{background:rgba(20,14,8,.9);border:2px solid #6a5535;padding:6px 14px;
  font-size:13px;color:#f0dda3;text-shadow:1px 1px 0 #000;border-radius:2px}

/* context menu */
.ctx{position:absolute;z-index:80;background:linear-gradient(#5d5140,#39301f);
  border:2px solid #100c07;min-width:150px;box-shadow:0 6px 18px rgba(0,0,0,.7)}
.ctx .ctx-head{background:#8b7442;color:#fff;font-size:12px;padding:3px 8px;text-shadow:1px 1px 0 #000}
.ctx div.ctx-item{padding:5px 10px;font-size:13px;cursor:pointer;color:#e9dcbd}
.ctx div.ctx-item:hover{background:#8b7442;color:#fff}

/* narrow screens: stack the sidebar under the view */
@media (max-width:820px){
  #gameGrid{grid-template-columns:1fr;grid-template-rows:1fr 150px 232px;
    grid-template-areas:"view" "chat" "side"}
  #sidebar{border-left:none;border-top:3px solid #100c07;flex-direction:row}
  #minimapWrap{width:186px;border-bottom:none;border-right:2px solid #100c07}
  #sidebar>div:not(#minimapWrap){}
  #tabRow{grid-template-columns:repeat(5,1fr);width:150px;grid-auto-rows:30px;
    border-bottom:none;border-right:2px solid #100c07;
    display:grid;grid-template-columns:repeat(2,1fr)}
  #panelBody{flex:1}
}

/* ============================================================================
   AUTHORED UI SKIN
   Everything below swaps the hand-rolled CSS chrome for the supplied artwork.
   It is appended last so it wins, and every rule degrades to the CSS look if
   an image is missing.
   ========================================================================== */

:root{ --ui:"assets/ui"; }

/* --- side panel ----------------------------------------------------------- */
#sidebar{
  background-image:url("../assets/ui/Frames/side_panel.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-left:none;
}

/* --- inventory: real frame, real slot states ------------------------------ */
#panelBody .inv-grid{
  background-image:url("../assets/ui/Frames/inventory_frame_4x7.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-color:transparent;
  border:none;
  box-shadow:none;
  gap:0;
  padding:3.2% 3.6%;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;
  aspect-ratio:214/379;          /* the frame's own proportions */
}
#panelBody .inv-grid .inv-slot{
  background-image:url("../assets/ui/Slots/slot_normal.png");
  background-size:100% 100%;
  background-color:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  /* icons sit at roughly 34px inside a 42px slot */
  padding:9%;
}
#panelBody .inv-grid .inv-slot:hover{
  background-image:url("../assets/ui/Slots/slot_hover.png");
  box-shadow:none;
}
#panelBody .inv-grid .inv-slot.drag,
#panelBody .inv-grid .inv-slot:active{
  background-image:url("../assets/ui/Slots/slot_selected.png");
  outline:none;
}
#panelBody .inv-grid .inv-slot.locked{
  background-image:url("../assets/ui/Slots/slot_disabled.png");
}
/* items: centred, aspect kept, never stretched into a neighbour */
.inv-slot canvas{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.6));
}
/* stack counts belong bottom-right */
.inv-slot .qty{
  top:auto;left:auto;right:6%;bottom:3%;
  font-size:11px;color:#ffe98a;
  text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
}

/* --- equipment slots reuse the same art ---------------------------------- */
.eq-slot{
  background-image:url("../assets/ui/Slots/slot_normal.png");
  background-size:100% 100%;
  background-color:transparent;border:none;box-shadow:none;padding:8%;
}
.eq-slot:hover{background-image:url("../assets/ui/Slots/slot_hover.png")}

/* --- minimap ------------------------------------------------------------- */
#minimapWrap{
  background:none;
  border-bottom:none;
  position:relative;
  padding:10px 8px 6px;
}
#minimapWrap::after{
  content:"";position:absolute;left:50%;top:6px;
  width:184px;height:184px;margin-left:-92px;
  background:url("../assets/ui/Frames/minimap_frame.png") center/100% 100% no-repeat;
  pointer-events:none;
}
#minimap{
  width:150px;height:150px;margin:17px auto 0;
  border:none;border-radius:50%;
  box-shadow:none;
}

/* --- orbs ---------------------------------------------------------------- */
#orbs{left:4px;top:16px;gap:4px}
.orb{
  width:40px;height:40px;border:none;background:none;box-shadow:none;overflow:visible;
}
.orb::after{
  content:"";position:absolute;inset:0;
  background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;
}
#orbHp::after{background-image:url("../assets/ui/Orbs/health_orb.png")}
#orbPray::after{background-image:url("../assets/ui/Orbs/prayer_orb.png")}
#orbRun::after{background-image:url("../assets/ui/Orbs/run_orb.png")}
.orb .orb-fill{
  left:14%;right:14%;bottom:12%;width:72%;border-radius:50%;
  opacity:.55;
}
.orb b{font-size:12px;z-index:2}

/* --- tabs ---------------------------------------------------------------- */
#tabRow{background:none;border-bottom:none;gap:1px;padding:2px}
.tab-btn{
  background-image:url("../assets/ui/Tabs/combat_normal.png");
  background-size:100% 100%;background-repeat:no-repeat;
  background-color:transparent;border:none;box-shadow:none;
  height:32px;color:#e6d9b4;font-size:10px;
}
.tab-btn:hover{background-image:url("../assets/ui/Tabs/combat_hover.png")}
.tab-btn.active{background-image:url("../assets/ui/Tabs/combat_active.png");color:#fff}

/* --- buttons ------------------------------------------------------------- */
.stone-btn{
  background:url("../assets/ui/Buttons/button_medium.png") center/100% 100% no-repeat;
  border:none;box-shadow:none;color:#f0e2bb;padding:10px 20px;
}
.stone-btn:hover{background-image:url("../assets/ui/Buttons/button_medium_hover.png")}
.stone-btn:active{background-image:url("../assets/ui/Buttons/button_medium_pressed.png")}
.stone-btn.big{
  background-image:url("../assets/ui/Buttons/button_large.png");
  padding:14px 30px;min-width:250px;
}
.stone-btn.big:hover{background-image:url("../assets/ui/Buttons/button_large_hover.png")}
.stone-btn.big:active{background-image:url("../assets/ui/Buttons/button_large_pressed.png")}
.stone-btn.small{
  background-image:url("../assets/ui/Buttons/button_small.png");
  padding:6px 12px;min-width:0;
}
.stone-btn.small:hover{background-image:url("../assets/ui/Buttons/button_small_hover.png")}
.stone-btn.small:active{background-image:url("../assets/ui/Buttons/button_small_pressed.png")}

/* --- chat ---------------------------------------------------------------- */
#chatPanel{
  background-image:url("../assets/ui/Frames/chat_frame.png");
  background-size:100% 100%;background-repeat:no-repeat;
  border-top:none;
}
#chatLog{background:rgba(8,6,3,.30);border-top:none;padding:6px 12px}
#chatInputRow{background:rgba(20,14,8,.55);border-top:1px solid rgba(0,0,0,.5)}

/* --- context menu -------------------------------------------------------- */
.ctx{
  background-image:url("../assets/ui/Panels/context_menu.png");
  background-size:100% 100%;background-repeat:no-repeat;
  background-color:transparent;border:none;padding:4px 2px 6px;
}
.ctx .ctx-head{background:none;color:#ffe08a;border-bottom:1px solid rgba(255,220,140,.25)}
.ctx div.ctx-item:hover{background:rgba(226,190,90,.28);color:#fff}

/* --- windows and dialogue ------------------------------------------------ */
.window{
  background-image:url("../assets/ui/Frames/side_panel.png");
  background-size:100% 100%;background-repeat:no-repeat;
  background-color:#2e2417;
}
#dialogueBox{
  background-image:url("../assets/ui/Panels/tooltip_panel.png");
  background-size:100% 100%;background-repeat:no-repeat;
  background-color:transparent;border:none;color:#f0e2bb;
}
.dlg-name{color:#ffdc8a;border-bottom-color:rgba(255,220,140,.3)}
.dlg-text{color:#eadfc2}
.dlg-opt{background:rgba(255,220,140,.07);border:1px solid rgba(255,220,140,.28);color:#f0e2bb}
.dlg-opt:hover{background:rgba(255,220,140,.2)}

/* per-tab artwork */
.tab-btn[data-tab="combat"]{background-image:url("../assets/ui/Tabs/combat_normal.png")}
.tab-btn[data-tab="combat"]:hover{background-image:url("../assets/ui/Tabs/combat_hover.png")}
.tab-btn[data-tab="combat"].active{background-image:url("../assets/ui/Tabs/combat_active.png")}
.tab-btn[data-tab="stats"]{background-image:url("../assets/ui/Tabs/skills_normal.png")}
.tab-btn[data-tab="stats"]:hover{background-image:url("../assets/ui/Tabs/skills_hover.png")}
.tab-btn[data-tab="stats"].active{background-image:url("../assets/ui/Tabs/skills_active.png")}
.tab-btn[data-tab="quests"]{background-image:url("../assets/ui/Tabs/quests_normal.png")}
.tab-btn[data-tab="quests"]:hover{background-image:url("../assets/ui/Tabs/quests_hover.png")}
.tab-btn[data-tab="quests"].active{background-image:url("../assets/ui/Tabs/quests_active.png")}
.tab-btn[data-tab="inventory"]{background-image:url("../assets/ui/Tabs/inventory_normal.png")}
.tab-btn[data-tab="inventory"]:hover{background-image:url("../assets/ui/Tabs/inventory_hover.png")}
.tab-btn[data-tab="inventory"].active{background-image:url("../assets/ui/Tabs/inventory_active.png")}
.tab-btn[data-tab="equipment"]{background-image:url("../assets/ui/Tabs/equipment_normal.png")}
.tab-btn[data-tab="equipment"]:hover{background-image:url("../assets/ui/Tabs/equipment_hover.png")}
.tab-btn[data-tab="equipment"].active{background-image:url("../assets/ui/Tabs/equipment_active.png")}
.tab-btn[data-tab="prayer"]{background-image:url("../assets/ui/Tabs/prayer_normal.png")}
.tab-btn[data-tab="prayer"]:hover{background-image:url("../assets/ui/Tabs/prayer_hover.png")}
.tab-btn[data-tab="prayer"].active{background-image:url("../assets/ui/Tabs/prayer_active.png")}
.tab-btn[data-tab="magic"]{background-image:url("../assets/ui/Tabs/magic_normal.png")}
.tab-btn[data-tab="magic"]:hover{background-image:url("../assets/ui/Tabs/magic_hover.png")}
.tab-btn[data-tab="magic"].active{background-image:url("../assets/ui/Tabs/magic_active.png")}
.tab-btn[data-tab="friends"]{background-image:url("../assets/ui/Tabs/friends_normal.png")}
.tab-btn[data-tab="friends"]:hover{background-image:url("../assets/ui/Tabs/friends_hover.png")}
.tab-btn[data-tab="friends"].active{background-image:url("../assets/ui/Tabs/friends_active.png")}
.tab-btn[data-tab="players"]{background-image:url("../assets/ui/Tabs/friends_normal.png")}
.tab-btn[data-tab="players"]:hover{background-image:url("../assets/ui/Tabs/friends_hover.png")}
.tab-btn[data-tab="players"].active{background-image:url("../assets/ui/Tabs/friends_active.png")}
.tab-btn[data-tab="options"]{background-image:url("../assets/ui/Tabs/settings_normal.png")}
.tab-btn[data-tab="options"]:hover{background-image:url("../assets/ui/Tabs/settings_hover.png")}
.tab-btn[data-tab="options"].active{background-image:url("../assets/ui/Tabs/settings_active.png")}