:root{
  --gold:#d8b058; --gold2:#f4dc90; --bronze:#8a7448; --blood:#a01810; --ember:#ff5a28; --ink:#0a0706; --panel:rgba(12,8,6,.92);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#e8dcc0;font-family:'IM Fell English','Cinzel',Georgia,serif;user-select:none}
#view,#hud{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#hud{pointer-events:none;z-index:2}
.hidden{display:none!important}

/* ---------- click hint ---------- */
#clickHint{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%);z-index:5;padding:10px 26px;border:1px solid var(--bronze);background:rgba(8,4,2,.75);
  font-family:'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-size:15px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;
  box-shadow:0 0 30px rgba(255,60,20,.25)}
#clickHint.show{opacity:1;pointer-events:auto;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 40px rgba(255,80,30,.55)}}

/* ---------- menu ---------- */
#menu{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh}
.menuBg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.92) 100%);pointer-events:none}
#titleBlock{position:relative;text-align:center;margin-top:-4vh}
#titleBlock h1{margin:0;font-family:'Cinzel Decorative','Cinzel',Georgia,serif;font-weight:900;font-size:clamp(42px,8vw,112px);line-height:.9;letter-spacing:.04em;
  background:linear-gradient(180deg,#fff4c8 0%,#f0c460 35%,#b07018 60%,#f8d880 75%,#6a3c08 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 2px #000) drop-shadow(0 4px 0 #2a1402) drop-shadow(0 0 28px rgba(255,70,20,.55));text-transform:uppercase}
#titleBlock h1 span{display:block;font-size:.62em;letter-spacing:.22em;margin-top:.08em}
#titleBlock .sub{font-style:italic;color:#c8a878;font-size:clamp(14px,1.6vw,20px);margin-top:10px;letter-spacing:.08em;text-shadow:0 2px 6px #000}
#titleBlock .sigil{position:absolute;left:50%;top:50%;width:min(60vw,560px);height:min(60vw,560px);transform:translate(-50%,-50%);z-index:-1;opacity:.22;pointer-events:none;
  background:radial-gradient(circle,rgba(255,40,10,.6) 0%,rgba(120,0,0,0) 62%);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='black' stroke-width='1.4'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='42'/><path d='M50 8 L74.7 84 L10 37 L90 37 L25.3 84 Z'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='black' stroke-width='1.4'><circle cx='50' cy='50' r='46'/><circle cx='50' cy='50' r='42'/><path d='M50 8 L74.7 84 L10 37 L90 37 L25.3 84 Z'/></g></svg>") center/contain no-repeat;
  background-color:#ff3010;animation:spin 90s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.menuBox{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:min(420px,90vw);max-width:92vw;max-height:62vh;overflow:auto;padding:4px}
.mhead{font-family:'Cinzel',serif;font-weight:700;text-align:center;color:var(--gold2);letter-spacing:.25em;text-transform:uppercase;font-size:22px;margin:6px 0 10px;text-shadow:0 0 18px rgba(255,60,20,.6),0 2px 0 #000}
.screen-dead .mhead,.screen-victory .mhead{font-family:'Cinzel Decorative',serif;font-size:clamp(34px,5vw,64px);color:#ff5030;letter-spacing:.12em}
.screen-victory .mhead{color:var(--gold2)}
.mbtn{position:relative;font-family:'Cinzel',serif;font-weight:700;font-size:17px;letter-spacing:.18em;text-transform:uppercase;color:#e8d8b0;cursor:pointer;
  padding:12px 28px;border:0;background:linear-gradient(180deg,rgba(40,30,22,.92),rgba(14,10,8,.95));
  box-shadow:inset 0 0 0 1px #2a2014,inset 0 0 0 2px var(--bronze),inset 0 0 0 3px #14100a,0 4px 14px rgba(0,0,0,.7);transition:all .12s}
.mbtn::before,.mbtn::after{content:'✠';position:absolute;top:50%;transform:translateY(-50%);color:var(--bronze);font-size:13px;opacity:.8}
.mbtn::before{left:10px}.mbtn::after{right:10px}
.mbtn small{display:block;font-family:'IM Fell English',serif;font-style:italic;text-transform:none;letter-spacing:.04em;font-weight:400;font-size:13px;color:#a89070;margin-top:2px}
.mbtn:hover:not(:disabled){color:#fff4d0;background:linear-gradient(180deg,rgba(90,24,10,.95),rgba(30,8,4,.95));box-shadow:inset 0 0 0 1px #2a2014,inset 0 0 0 2px var(--gold),inset 0 0 0 3px #14100a,0 0 24px rgba(255,60,20,.45)}
.mbtn.accent{color:var(--gold2)}
.mbtn.small{font-size:13px;padding:8px 20px;opacity:.85}
.mbtn.locked,.mbtn:disabled{opacity:.4;cursor:not-allowed}
#version{position:absolute;right:16px;bottom:12px;font-family:'Cinzel',serif;font-size:13px;color:#8a7458;letter-spacing:.15em}
#f12tip{position:absolute;left:16px;bottom:12px;font-family:'Cinzel',serif;font-size:12px;color:#5a4a38;letter-spacing:.2em}
.ctrls{display:grid;grid-template-columns:1fr;gap:4px;background:var(--panel);padding:14px 18px;box-shadow:inset 0 0 0 1px var(--bronze)}
.ctrls div{display:flex;justify-content:space-between;gap:24px;font-size:16px}
kbd{font-family:'Cinzel',serif;font-size:13px;color:var(--gold2);background:#1a120c;border:1px solid var(--bronze);padding:1px 8px;border-radius:2px}
.optform{background:var(--panel);padding:12px 16px;box-shadow:inset 0 0 0 1px var(--bronze);display:flex;flex-direction:column;gap:6px}
.orow{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:15px}
.orow .sl{display:flex;align-items:center;gap:8px}.orow output{width:38px;text-align:right;color:var(--gold2);font-family:'Cinzel',serif;font-size:13px}
.stats{background:var(--panel);padding:16px 26px;box-shadow:inset 0 0 0 1px var(--bronze);font-size:20px}
.stats .lvname{font-family:'Cinzel Decorative',serif;color:var(--gold2);text-align:center;font-size:24px;margin-bottom:10px}
.stats div{display:flex;justify-content:space-between}.stats b{font-family:'Cinzel',serif;color:#fff0c8}
.vtext{max-width:520px;text-align:center;font-size:19px;font-style:italic;color:#d8c8a0;line-height:1.5}
input[type=range]{accent-color:#c8902c;width:150px}
input[type=checkbox]{accent-color:#c8402c}
select{background:#1a120c;color:#e8d8b0;border:1px solid var(--bronze);font-family:inherit;padding:2px 6px}

/* ---------- debug panel ---------- */
#debug{position:fixed;top:0;right:0;bottom:0;width:340px;z-index:20;background:rgba(10,7,5,.9);border-left:2px solid var(--bronze);
  box-shadow:-8px 0 30px rgba(0,0,0,.7);overflow-y:auto;padding:0 0 20px;font-family:Consolas,'Courier New',monospace;font-size:12px;color:#d8ccb0;
  transform:translateX(105%);transition:transform .18s ease-out;user-select:none}
#debug.open{transform:none}
#debug::-webkit-scrollbar{width:8px}#debug::-webkit-scrollbar-thumb{background:#4a3a26}
.dhead{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(180deg,#2a1a10,#140c08);border-bottom:1px solid var(--bronze)}
.dhead b{font-family:'Cinzel',serif;letter-spacing:.25em;color:var(--gold2);font-size:14px}.dhead span{color:#8a7458}
.dhint{padding:6px 12px;color:#8a7458;font-style:italic;font-size:11px}
#debug details{border-bottom:1px solid #2a1e14;padding:2px 12px 8px}
#debug summary{cursor:pointer;padding:8px 0 6px;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;font-size:12px;list-style:none}
#debug summary::before{content:'▸ ';color:#a03018}#debug details[open] summary::before{content:'▾ '}
.drow{display:grid;grid-template-columns:118px 1fr 46px;align-items:center;gap:6px;margin:3px 0}
.drow label{color:#b8a888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow input[type=range]{width:100%}.drow output{text-align:right;color:var(--gold2)}
.drow select{grid-column:2/4}
.dchk{display:flex;align-items:center;gap:6px;margin:3px 0;cursor:pointer;color:#c8b898}
.dbtns{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.dbtns button{flex:1 1 auto;font-family:inherit;font-size:11px;color:#e8d8b0;background:#1e140e;border:1px solid #5a4630;padding:5px 7px;cursor:pointer}
.dbtns button:hover{background:#4a160c;border-color:var(--gold);color:#fff}
.fpsg{width:100%;height:40px;display:block;margin:4px 0;image-rendering:pixelated;border:1px solid #2a1e14}
.dstats div{display:flex;justify-content:space-between;border-bottom:1px dotted #2a1e14;padding:1px 0}.dstats b{color:var(--gold2);font-weight:400}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-family:'Cinzel',serif;letter-spacing:.3em;color:var(--gold)}
.ring{width:46px;height:46px;border:3px solid #3a1a0a;border-top-color:var(--ember);border-radius:50%;animation:spin2 1s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}