:root{
  --ink:#0d0f0c;
  --panel:rgba(14,16,12,.82);
  --parch:#e8ddc0;
  --gold:#d9b25f;
  --gold-dim:#8d7434;
  --blood:#a8322a;
  --moss:#7fa05a;
  --line:rgba(217,178,95,.28);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:#0b0d0a;color:var(--parch);
  font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased;user-select:none;}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none !important;}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:40;}
#loading{background:radial-gradient(circle at 50% 40%,#1b2016 0%,#080a07 70%);z-index:60;}
.loading-inner{text-align:center;width:min(520px,80vw);}
.loading-inner h1{font-size:clamp(28px,4vw,46px);letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:var(--gold);}
.sigil{font-size:38px;color:var(--gold);opacity:.8;margin-bottom:10px;animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.95;transform:scale(1.04)}}
.load-note{margin:14px 0 18px;opacity:.6;font-style:italic;letter-spacing:.04em;}
.loadbar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
#loadfill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .25s ease;}
.load-pct{margin-top:8px;font-size:12px;opacity:.5;letter-spacing:.1em;}

#title{background:
  radial-gradient(ellipse at 50% 15%,rgba(217,178,95,.10),transparent 55%),
  linear-gradient(180deg,rgba(6,8,6,.55),rgba(6,8,6,.9) 65%,#060806 100%);}
.title-inner{text-align:center;max-width:760px;padding:24px;}
.title-kicker{letter-spacing:.42em;text-transform:uppercase;font-size:11px;color:var(--gold);opacity:.8;}
#title h1{font-size:clamp(38px,7vw,86px);font-weight:400;letter-spacing:.06em;line-height:1;margin:14px 0 10px;
  text-shadow:0 2px 30px rgba(0,0,0,.85),0 0 40px rgba(217,178,95,.12);color:#f2e7c9;}
.title-tag{font-style:italic;opacity:.72;font-size:clamp(13px,1.5vw,17px);margin-bottom:36px;}
.menu{display:flex;flex-direction:column;gap:10px;align-items:center;}
.btn{font-family:inherit;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(20,23,17,.7);color:var(--parch);border:1px solid var(--line);
  padding:12px 38px;min-width:220px;cursor:pointer;transition:all .18s ease;}
.btn:hover{background:rgba(217,178,95,.14);border-color:var(--gold);color:#fff8e4;}
.btn.primary{background:linear-gradient(180deg,rgba(217,178,95,.22),rgba(120,95,40,.18));border-color:rgba(217,178,95,.55);}
.btn.ghost{background:transparent;opacity:.75;}
.btn:disabled{opacity:.3;cursor:not-allowed;}
.title-hint{margin-top:26px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.4;}

.panel{background:linear-gradient(160deg,rgba(24,28,20,.96),rgba(11,13,10,.97));
  border:1px solid var(--line);padding:30px 34px;max-width:min(720px,90vw);max-height:84vh;overflow:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.75),inset 0 0 60px rgba(217,178,95,.03);}
.panel h2{font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-size:20px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px;}
.panel p{line-height:1.65;margin-bottom:10px;opacity:.9;font-size:15px;}
.panel .btn{margin-top:20px;}
.tiny{font-size:12px;opacity:.5;margin-top:10px;letter-spacing:.05em;}

#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}
.vitals{position:absolute;left:24px;top:22px;width:min(300px,34vw);}
.vital-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.vital-label{width:34px;font-size:10px;letter-spacing:.12em;color:var(--gold);opacity:.85;}
.vital-label b{font-size:12px;}
.bar{position:relative;flex:1;height:12px;background:rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden;}
.bar .fill{height:100%;width:100%;transition:width .16s linear;}
.bar.hp .fill{background:linear-gradient(180deg,#c04a3c,#7d211a);}
.bar.sp{height:7px;}
.bar.sp .fill{background:linear-gradient(180deg,#9fc46b,#567f37);}
.bar.xp{height:5px;}
.bar.xp .fill{background:linear-gradient(90deg,#6e5a24,var(--gold));width:0;}
.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.8);text-shadow:0 1px 2px #000;}
.xp-row{align-items:center;}
.gold{margin-left:6px;font-size:12px;color:var(--gold);letter-spacing:.05em;white-space:nowrap;}

.quest-panel{position:absolute;right:24px;top:22px;width:min(280px,32vw);text-align:right;
  border-right:2px solid rgba(217,178,95,.35);padding-right:12px;}
.quest-kicker{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.6;}
.quest-title{font-size:15px;letter-spacing:.05em;margin:3px 0 5px;color:#f4ead0;}
.quest-obj{font-size:12.5px;opacity:.82;line-height:1.45;}
.quest-hint{font-size:11px;opacity:.45;margin-top:6px;line-height:1.4;font-style:italic;}

.boss-bar{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:min(520px,52vw);text-align:center;}
.boss-name{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#f0dfb6;
  text-shadow:0 2px 8px #000;margin-bottom:6px;}
.bar.boss{height:9px;border-color:rgba(217,178,95,.35);}
.bar.boss .fill{background:linear-gradient(180deg,#b24a3a,#5e1712);}

.party{position:absolute;left:24px;bottom:26px;display:flex;flex-direction:column;gap:6px;}
.party-card{display:flex;align-items:center;gap:9px;background:rgba(10,12,9,.55);
  border:1px solid rgba(217,178,95,.16);padding:5px 10px 5px 6px;min-width:170px;}
.party-avatar{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);font-size:12px;color:var(--gold);background:rgba(217,178,95,.08);}
.party-meta{flex:1;}
.party-name{font-size:11.5px;letter-spacing:.06em;}
.party-hp{height:3px;background:rgba(0,0,0,.6);margin-top:3px;}
.party-hp .fill{height:100%;background:#8c3a2e;}
.party-state{font-size:9px;opacity:.5;letter-spacing:.08em;text-transform:uppercase;}

.prompt{position:absolute;left:50%;bottom:130px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;background:rgba(8,10,7,.8);
  border:1px solid var(--line);padding:9px 16px;font-size:13px;letter-spacing:.05em;}
.key{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;
  border:1px solid var(--gold-dim);color:var(--gold);font-size:11px;}
.toast{position:absolute;left:50%;top:20%;transform:translateX(-50%);background:rgba(8,10,7,.85);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 26px;
  font-size:14px;letter-spacing:.06em;text-align:center;transition:opacity .4s;max-width:70vw;}
.dialogue{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);width:min(680px,86vw);
  background:linear-gradient(180deg,rgba(12,14,10,.92),rgba(8,10,7,.96));
  border:1px solid var(--line);padding:18px 24px 14px;}
.dspeaker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.dtext{font-size:15.5px;line-height:1.55;}
.dcontinue{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.4;margin-top:12px;text-align:right;}
.subtitle{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);max-width:70vw;text-align:center;
  font-size:15px;font-style:italic;text-shadow:0 2px 8px #000;color:#f0e6cc;}
.crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;
  background:rgba(232,221,192,.5);box-shadow:0 0 6px rgba(0,0,0,.8);opacity:.5;}
.controls{position:absolute;right:22px;bottom:22px;display:flex;flex-wrap:wrap;gap:6px 14px;max-width:44vw;
  justify-content:flex-end;transition:opacity 1s;font-size:10px;letter-spacing:.05em;opacity:.5;}
.controls b{color:var(--gold);font-weight:400;}
.lockhint{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;opacity:.5;}
.obj-arrow{position:absolute;color:var(--gold);font-size:18px;text-shadow:0 0 10px rgba(0,0,0,.9);opacity:.85;}

.dmg{position:absolute;font-size:17px;font-weight:700;color:#ffe9b0;text-shadow:0 2px 4px #000;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform,opacity;}
.dmg.crit{color:#ffb14e;font-size:22px;}
.dmg.heal{color:#9fe07a;}
.dmg.player{color:#ff7a6a;}

#journal .panel{width:min(720px,90vw);}
.journal-entry{border-left:1px solid var(--line);padding:0 0 14px 16px;margin-bottom:14px;}
.journal-entry h3{font-size:14px;letter-spacing:.08em;color:var(--gold);font-weight:400;margin-bottom:4px;}
.journal-entry p{font-size:13px;opacity:.75;line-height:1.5;}
.journal-entry.done{opacity:.45;}
.journal-entry.done h3{text-decoration:line-through;}
.credits-panel{width:min(760px,92vw);}
.credits-panel h3{color:var(--gold);font-weight:400;letter-spacing:.1em;font-size:14px;margin:18px 0 6px;}
.credits-panel p,.credits-panel li{font-size:12.5px;line-height:1.6;opacity:.75;}
.credits-panel ul{list-style:none;}
.credits-panel a{color:var(--parch);}
.ending-panel{text-align:center;width:min(640px,90vw);}
.ending-panel p{font-size:15px;margin-bottom:12px;}
.death-panel{text-align:center;}
.death-panel h2{color:#d68a7a;}
@media (max-width:720px){
  .quest-panel{display:none;}
  .controls{display:none;}
  .party{bottom:14px;}
  .vitals{width:44vw;}
  #prompt{bottom:150px;}
}