/* HOLLOWDEEP: gothic UI over a pixel canvas */
:root{
  --gold:#c9a959; --gold-bright:#e8cf8a; --parchment:#d8cdb4; --dim:#8a8398;
  --blood:#b03a3a; --mana:#4a7fd4; --xp:#7fb84a; --panel:#12101cee; --panel-edge:#2c2740;
  --common:#c7c3ce; --fine:#7fc46a; --superior:#5aa2e8; --epic:#b06ae8; --mythic:#e8a33d;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}
html,body{width:100%;height:100%;overflow:hidden;background:#07060c}
body{font-family:'Spectral',Georgia,serif;color:var(--parchment)}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none!important}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center,transparent 46%,rgba(2,1,6,.38) 78%,rgba(2,1,6,.82) 100%)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud-top-left{position:absolute;top:14px;left:14px;display:flex;gap:10px;align-items:flex-start}
#portrait{width:56px;height:56px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:4px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #000a}
#portrait canvas{image-rendering:pixelated;width:48px;height:48px}
#bars{display:flex;flex-direction:column;gap:4px;min-width:210px}
#hud-name{font-family:'Cinzel',serif;font-size:12px;letter-spacing:.14em;color:var(--gold);text-shadow:0 1px 3px #000}
.bar{position:relative;height:14px;background:#0a0812;border:1px solid #2c2740;border-radius:3px;overflow:hidden;box-shadow:0 1px 6px #0009}
.bar-fill{height:100%;width:100%;transition:width .25s ease;border-radius:2px}
.hp-bar .bar-fill{background:linear-gradient(180deg,#d05050,#8c2626)}
.mp-bar .bar-fill{background:linear-gradient(180deg,#5c8fe0,#2c4f9c)}
.mp-bar{height:10px}
.xp-bar{height:6px}
.xp-bar .bar-fill{background:linear-gradient(180deg,#93cc5e,#547e2c);transition:width .4s ease}
.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.05em}
#status-row{display:flex;gap:4px;margin-top:2px;flex-wrap:wrap}
.status-chip{font-size:10px;padding:1px 6px;border-radius:8px;background:#0a0812cc;border:1px solid #333;letter-spacing:.05em}

#hud-top-right{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#depth-label{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.18em;color:var(--gold);text-shadow:0 1px 4px #000}
#minimap{background:#0a0812cc;border:1px solid var(--panel-edge);border-radius:4px;box-shadow:0 2px 12px #000a;image-rendering:pixelated}
#wealth{font-size:13px;text-shadow:0 1px 3px #000}
#wealth em{color:var(--dim);font-style:normal;font-size:11px}
#gold-label{color:var(--gold-bright);font-weight:600}
#echo-label{color:#9ecbe8;font-weight:600}

#log{position:absolute;left:14px;bottom:88px;width:360px;max-width:44vw;max-height:176px;overflow:hidden;
  display:flex;flex-direction:column-reverse;gap:2px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
.log-line{font-size:13px;line-height:1.35;text-shadow:0 1px 3px #000,0 0 6px #0008;opacity:.95;
  animation:logIn .25s ease}
.log-line.old{opacity:.45}
@keyframes logIn{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:.95}}

#skillbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto}
.skill-btn{position:relative;width:54px;height:54px;background:var(--panel);border:1px solid var(--panel-edge);
  border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 2px 12px #000a;transition:border-color .15s}
.skill-btn:hover{border-color:var(--gold)}
.skill-btn canvas{image-rendering:pixelated;width:32px;height:32px}
.skill-btn .key-hint{position:absolute;top:2px;left:5px;font-size:10px;color:var(--dim)}
.skill-btn .cost{position:absolute;bottom:2px;right:5px;font-size:10px;color:#7fa6e0}
.skill-btn .cd-shade{position:absolute;inset:0;background:#05040acc;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:20px;color:#fff}
.skill-btn.unusable{filter:saturate(.3) brightness(.7)}
.skill-btn.potion-slot .count{position:absolute;bottom:2px;right:5px;font-size:10px;color:var(--gold-bright)}

#boss-bar{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:min(560px,70vw);text-align:center}
#boss-name{font-family:'Cinzel',serif;font-size:14px;letter-spacing:.22em;color:#e0b0b0;text-shadow:0 1px 4px #000;margin-bottom:4px}
.boss-hp{height:10px}
.boss-hp .bar-fill{background:linear-gradient(180deg,#c05858,#701e1e)}

/* ---------- banner ---------- */
#banner{position:fixed;top:26vh;left:0;right:0;text-align:center;z-index:20;pointer-events:none}
#banner-title{font-family:'Cinzel',serif;font-weight:700;font-size:42px;letter-spacing:.3em;color:var(--gold-bright);
  text-shadow:0 0 24px #c9a95966,0 2px 6px #000}
#banner-sub{font-style:italic;font-size:16px;color:var(--dim);letter-spacing:.1em;margin-top:6px}
#banner.show{animation:bannerIn 3.4s ease forwards}
@keyframes bannerIn{0%{opacity:0;transform:translateY(14px)}12%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}

/* ---------- overlay screens ---------- */
#overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(4,3,9,.72);backdrop-filter:blur(3px)}
.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:8px;padding:26px 30px;
  max-width:min(860px,94vw);max-height:88vh;overflow-y:auto;box-shadow:0 8px 48px #000c, inset 0 1px 0 #ffffff0f}
.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#2c2740;border-radius:4px}
.panel h1{font-family:'Cinzel',serif;font-weight:900;font-size:56px;letter-spacing:.22em;color:var(--gold-bright);
  text-align:center;text-shadow:0 0 30px #c9a95955,0 2px 8px #000}
.panel h2{font-family:'Cinzel',serif;font-size:22px;letter-spacing:.18em;color:var(--gold);text-align:center;margin-bottom:14px}
.panel h3{font-family:'Cinzel',serif;font-size:14px;letter-spacing:.12em;color:var(--gold);margin:14px 0 6px}
.subtitle{text-align:center;color:var(--dim);font-style:italic;margin:6px 0 22px;letter-spacing:.06em}
.menu{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn{font-family:'Cinzel',serif;font-size:15px;letter-spacing:.16em;color:var(--parchment);background:#1a1628;
  border:1px solid var(--panel-edge);border-radius:5px;padding:11px 34px;cursor:pointer;min-width:260px;text-align:center;
  transition:all .15s}
.btn:hover:not(.disabled){border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 16px #c9a95922;transform:translateY(-1px)}
.btn.primary{border-color:var(--gold);color:var(--gold-bright)}
.btn.danger:hover{border-color:var(--blood);color:#e08a8a}
.btn.small{min-width:0;padding:6px 16px;font-size:12px}
.btn.disabled{opacity:.4;cursor:default}
.hint{color:var(--dim);font-size:12px;text-align:center;margin-top:16px;letter-spacing:.05em}

/* class select */
.class-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.class-card{width:170px;background:#171325;border:1px solid var(--panel-edge);border-radius:7px;padding:14px;cursor:pointer;
  text-align:center;transition:all .15s;position:relative}
.class-card:hover:not(.locked){border-color:var(--gold);transform:translateY(-3px);box-shadow:0 6px 20px #000a}
.class-card canvas{image-rendering:pixelated;width:64px;height:64px;margin-bottom:6px}
.class-card .cname{font-family:'Cinzel',serif;font-size:14px;letter-spacing:.1em;color:var(--gold-bright)}
.class-card .cdesc{font-size:11.5px;color:var(--dim);margin-top:6px;line-height:1.4;min-height:60px}
.class-card.locked{filter:grayscale(.85) brightness(.6);cursor:default}
.class-card .lock-tag{position:absolute;top:8px;right:8px;font-size:11px;color:#9ecbe8}

/* sanctum */
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}
.upg-card{background:#171325;border:1px solid var(--panel-edge);border-radius:6px;padding:12px 14px}
.upg-card .uname{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);letter-spacing:.08em}
.upg-card .udesc{font-size:12px;color:var(--dim);margin:4px 0 8px;line-height:1.35}
.upg-card .pips{display:flex;gap:3px;margin-bottom:8px}
.pip{width:14px;height:6px;border-radius:2px;background:#241f38}
.pip.full{background:var(--gold)}
.upg-row{display:flex;justify-content:space-between;align-items:center}
.ucost{font-size:12px;color:#9ecbe8}

/* level up */
.perk-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.perk-card{width:190px;background:#171325;border:1px solid var(--panel-edge);border-radius:7px;padding:16px;cursor:pointer;
  text-align:center;transition:all .15s}
.perk-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 0 18px #c9a95926}
.perk-card .pname{font-family:'Cinzel',serif;font-size:14px;color:var(--gold-bright);letter-spacing:.06em}
.perk-card .pdesc{font-size:12px;color:var(--parchment);opacity:.85;margin-top:8px;line-height:1.45}

/* inventory */
.inv-layout{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.inv-list{width:340px;display:flex;flex-direction:column;gap:5px;max-height:52vh;overflow-y:auto;padding-right:4px}
.inv-item{display:flex;align-items:center;gap:10px;background:#171325;border:1px solid var(--panel-edge);
  border-radius:5px;padding:6px 10px;cursor:pointer;transition:border-color .12s}
.inv-item:hover{border-color:var(--gold)}
.inv-item canvas{image-rendering:pixelated;width:28px;height:28px;flex-shrink:0}
.inv-item .iname{font-size:13px;flex:1}
.inv-item .itag{font-size:11px;color:var(--dim)}
.eq-panel{width:300px}
.eq-slot{display:flex;align-items:center;gap:10px;background:#100d1c;border:1px dashed #2c2740;border-radius:5px;
  padding:7px 10px;margin-bottom:6px;min-height:44px}
.eq-slot canvas{image-rendering:pixelated;width:28px;height:28px}
.eq-slot .slot-label{font-size:10px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;width:58px}
.eq-slot .iname{font-size:13px}
.r-common{color:var(--common)} .r-fine{color:var(--fine)} .r-superior{color:var(--superior)}
.r-epic{color:var(--epic)} .r-mythic{color:var(--mythic)}
.stat-table{width:100%;font-size:13px;border-collapse:collapse;margin-top:4px}
.stat-table td{padding:3px 6px;border-bottom:1px solid #1c1830}
.stat-table td:last-child{text-align:right;color:var(--gold-bright)}
.perk-list{font-size:12.5px;line-height:1.6;color:var(--parchment)}
.perk-list b{color:var(--gold)}

/* tooltip */
#tooltip{position:fixed;z-index:60;background:#0d0b17f2;border:1px solid var(--panel-edge);border-radius:6px;
  padding:10px 13px;max-width:270px;pointer-events:none;box-shadow:0 6px 24px #000c;font-size:12.5px;line-height:1.45}
#tooltip .tname{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.05em;margin-bottom:4px}
#tooltip .tstat{color:#9fd08a}
#tooltip .tdesc{color:var(--dim);font-style:italic;margin-top:4px}

/* shop */
.shop-list{display:flex;flex-direction:column;gap:6px;min-width:380px}
.shop-item{display:flex;align-items:center;gap:10px;background:#171325;border:1px solid var(--panel-edge);border-radius:5px;padding:7px 10px}
.shop-item canvas{image-rendering:pixelated;width:28px;height:28px}
.shop-item .iname{flex:1;font-size:13px}
.price{color:var(--gold-bright);font-size:13px;min-width:60px;text-align:right}

/* death / victory */
.death-title{color:#c86060!important;text-shadow:0 0 30px #b03a3a55,0 2px 8px #000!important}
.win-title{color:#e8cf8a!important}
.run-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;font-size:14px;margin:18px auto;max-width:400px}
.run-stats span:nth-child(even){text-align:right;color:var(--gold-bright)}
.echo-award{text-align:center;font-size:17px;margin:12px 0;color:#9ecbe8}
.echo-award b{font-size:24px}

kbd{background:#1a1628;border:1px solid #2c2740;border-radius:3px;padding:1px 6px;font-size:11px;font-family:inherit}
.help-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;font-size:13px;line-height:1.9}

@media (max-width:760px){
  .panel h1{font-size:34px}
  #log{width:60vw}
}