:root{
  --bone:#d6cdb8;
  --bone-dim:rgba(214,205,184,.55);
  --blood:#7a1712;
  --amber:#e3a44c;
  --serif:"Cormorant Garamond", "Times New Roman", Georgia, serif;
  --hand:"Caveat", "Segoe Print", "Comic Sans MS", cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;color:var(--bone);font-family:var(--serif)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}
button{font-family:inherit}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top,0) 24px env(safe-area-inset-bottom,0);
  background:radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,.15), rgba(0,0,0,.88) 75%, #000 100%);z-index:10}
.menu-inner{width:min(980px,100%);display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:end}
.title{font-weight:300;font-size:clamp(64px,11vw,148px);line-height:.86;letter-spacing:-.02em;
  text-shadow:0 0 40px rgba(122,23,18,.35);animation:buzz 7s infinite steps(1)}
.title small{display:block;font-size:.2em;font-style:italic;font-weight:400;letter-spacing:0;color:var(--bone-dim);margin-top:1em;line-height:1.4;max-width:34ch}
@keyframes buzz{0%,100%{opacity:1}31%{opacity:.4}31.6%{opacity:1}32.4%{opacity:.25}33%{opacity:1}78%{opacity:.7}78.5%{opacity:1}}
@media (prefers-reduced-motion:reduce){.title{animation:none}}
.actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
button.go{font-size:24px;font-weight:500;color:var(--bone);background:transparent;
  border:1px solid rgba(214,205,184,.45);padding:11px 30px;cursor:pointer;transition:background .25s,border-color .25s}
button.go:hover,button.go:focus-visible{background:rgba(122,23,18,.35);border-color:var(--blood);outline:none}
button.go:focus-visible{box-shadow:0 0 0 2px var(--bone)}
button.go.ghost{border-color:rgba(214,205,184,.2);color:var(--bone-dim)}
button.go.ghost:hover{color:var(--bone)}
button.go:disabled{opacity:.4;cursor:wait}
button.link{background:none;border:0;color:var(--bone-dim);font-size:19px;font-style:italic;cursor:pointer;margin-top:22px;text-decoration:underline;text-underline-offset:4px}
button.link:hover,button.link:focus-visible{color:var(--bone);outline:none}
.hint{font-style:italic;color:var(--bone-dim);font-size:19px;margin-top:14px}
.actions .hint{margin-top:0}
.sens{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--bone-dim);font-size:18px}
.sens input{accent-color:var(--blood);width:160px}

.card{background:#d9cfb6;color:#2a2018;padding:26px 28px 22px;transform:rotate(1.6deg);
  box-shadow:0 18px 50px rgba(0,0,0,.7);font-family:var(--hand);font-size:24px;line-height:1.25;
  background-image:repeating-linear-gradient(transparent 0 29px, rgba(70,90,120,.18) 29px 30px),
    radial-gradient(circle at 80% 15%, rgba(110,70,20,.25), transparent 40%),
    radial-gradient(circle at 15% 90%, rgba(90,40,10,.22), transparent 35%)}
.card h3{font-weight:700;font-size:30px;margin-bottom:8px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 16px}
.card dt{font-weight:700}
.card .scrawl{margin-top:12px;color:var(--blood);font-weight:700;transform:rotate(-2deg)}

/* online panels */
.panel{width:min(520px,100%)}
.panel h2{font-weight:300;font-size:clamp(44px,7vw,72px);line-height:1}
.panel .sub{font-style:italic;color:var(--bone-dim);font-size:20px;margin-top:10px;max-width:40ch}
.field{display:flex;flex-direction:column;gap:6px;margin-top:26px;font-size:19px;color:var(--bone-dim)}
.field input{font-family:var(--serif);font-size:26px;color:var(--bone);background:rgba(0,0,0,.4);border:0;border-bottom:1px solid rgba(214,205,184,.4);padding:6px 2px;outline:none;width:100%}
.field input:focus{border-bottom-color:var(--bone)}
#codeInput{text-transform:uppercase;letter-spacing:.3em;width:7em}
.join{display:flex;align-items:flex-end;gap:16px;margin-top:10px}
.join .field{flex:0 0 auto}
.status{min-height:1.4em;margin-top:18px;font-style:italic;color:#e0a090;font-size:19px}
.code{font-size:clamp(72px,14vw,132px);font-weight:300;letter-spacing:.18em;line-height:1;margin:4px 0 6px}
.roster{list-style:none;margin-top:16px;font-size:24px;line-height:1.5}
.roster em{color:var(--bone-dim)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#fuses{position:absolute;left:32px;top:calc(26px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:14px;font-size:20px;color:var(--bone-dim);font-style:italic}
#fuseIcons{display:flex;gap:7px}
#fuseIcons i{width:9px;height:22px;border:1px solid rgba(214,205,184,.4);display:block;transition:background .6s,box-shadow .6s}
#fuseIcons i.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 12px rgba(227,164,76,.8)}
#battery{position:absolute;left:32px;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;font-size:19px;font-style:italic;color:var(--bone-dim)}
#batBars{display:flex;gap:4px;padding:3px;border:1px solid rgba(214,205,184,.35)}
#batBars i{width:12px;height:12px;background:var(--bone);opacity:.8;display:block}
#batBars i.off{opacity:.08}
#batBars.low i{background:var(--blood);opacity:1}
#stamina{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom,0px));width:180px;height:2px;margin-left:-90px;background:rgba(214,205,184,.12);transition:opacity .5s}
#staminaFill{height:100%;background:var(--bone);width:100%}
#stamina.tired #staminaFill{background:var(--blood)}
#cross{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(214,205,184,.45);transition:transform .15s,background .15s}
#cross.focus{transform:scale(2.4);background:var(--bone)}
#prompt{position:absolute;left:0;right:0;top:calc(50% + 30px);text-align:center;font-size:22px;text-shadow:0 0 8px #000;opacity:0;transition:opacity .2s}
#prompt.show{opacity:1}
#prompt b{font-weight:700;border:1px solid var(--bone-dim);padding:0 7px;margin-right:8px;font-size:18px}
#toast{position:fixed;left:0;right:0;bottom:calc(110px + env(safe-area-inset-bottom,0px));text-align:center;font-size:26px;font-style:italic;text-shadow:0 0 12px #000,0 0 3px #000;opacity:0;transition:opacity .8s;padding:0 20px;pointer-events:none;z-index:12}
#toast.show{opacity:1}
#watch{position:fixed;left:0;right:0;top:calc(28px + env(safe-area-inset-top,0px));text-align:center;font-size:22px;font-style:italic;color:var(--bone-dim);text-shadow:0 0 8px #000;z-index:6;pointer-events:none}

/* ---------- note ---------- */
#note{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);z-index:8}
#note .card{width:min(520px,90vw);font-size:28px;transform:rotate(-1.2deg)}
#note .close{margin-top:18px;font-size:20px;opacity:.7}

/* ---------- end screens ---------- */
.end{flex-direction:column;text-align:center;gap:10px}
.end h2{font-weight:300;font-size:clamp(52px,9vw,112px);line-height:.95}
.end p{font-style:italic;font-size:22px;color:var(--bone-dim);max-width:38ch}
.end .actions{justify-content:center;margin-top:28px}
.end .roster{text-align:center}
#death{background:radial-gradient(ellipse at center, rgba(60,0,0,.75), #000 75%)}
#death h2{color:#c9b9a6;text-shadow:0 0 30px rgba(160,20,10,.6)}
#win{background:radial-gradient(ellipse at center, rgba(40,50,60,.6), #000 80%)}
#pause p{color:var(--bone)}

#fade{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s;z-index:9}
#fade.on{opacity:1}
#err{position:fixed;left:0;right:0;bottom:24px;text-align:center;font-style:italic;font-size:20px;z-index:30;text-shadow:0 0 8px #000;padding:0 20px}

/* ---------- debug ---------- */
#debug{position:fixed;right:16px;top:16px;bottom:16px;width:300px;overflow-y:auto;z-index:20;
  background:rgba(12,13,14,.92);border:1px solid rgba(214,205,184,.18);padding:14px 16px;font-size:16px;color:var(--bone)}
#debug header{display:flex;justify-content:space-between;align-items:baseline}
#debug header strong{font-size:22px;font-weight:500}
#debug header .link{margin:0;font-size:15px}
#debug fieldset{border:0;border-top:1px solid rgba(214,205,184,.15);margin-top:12px;padding-top:8px}
#debug legend{font-style:italic;color:var(--bone-dim);padding-right:8px;font-size:15px}
#debug label{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
#debug input[type=checkbox]{accent-color:var(--blood);width:16px;height:16px}
#debug label.slider input{flex:1;accent-color:var(--blood)}
#debug kbd,#debug .muted kbd{margin-left:auto;font-family:var(--serif);font-size:13px;border:1px solid rgba(214,205,184,.3);padding:0 5px;color:var(--bone-dim)}
.muted{color:var(--bone-dim);font-size:14px;font-style:italic;margin-top:8px}
#debug button:not(.link),#viewerUI button{background:rgba(214,205,184,.06);border:1px solid rgba(214,205,184,.25);color:var(--bone);font-size:15px;padding:6px 8px;cursor:pointer}
#debug button:not(.link):hover,#viewerUI button:hover{background:rgba(122,23,18,.4)}
#debug button:disabled{opacity:.35;cursor:default}
#debug .row,#viewerUI .row{display:flex;gap:6px;margin:6px 0}
#debug .row button{flex:1}
#debug .wide{width:100%;margin:6px 0}
.seg{display:flex;margin:6px 0}
.seg button{flex:1;border-right-width:0 !important}
.seg button:last-child{border-right-width:1px !important}
.seg button.on{background:rgba(122,23,18,.55) !important;border-color:var(--blood) !important}
#minimap{position:fixed;left:16px;top:70px;width:220px;height:220px;z-index:7;border:1px solid rgba(214,205,184,.2);pointer-events:none}
#fps{position:fixed;right:16px;bottom:12px;z-index:21;font-size:15px;color:var(--bone-dim)}
#viewerUI{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;background:rgba(12,13,14,.9);border:1px solid rgba(214,205,184,.18);padding:10px 14px;min-width:360px;text-align:center}
#viewerUI .muted{margin:0 0 4px}

@media (max-width:760px){
  .menu-inner{grid-template-columns:1fr;gap:32px}
  .card{font-size:21px}
  #fuses,#battery{left:18px}
}