:root{--bone:#d8c9b8;--dim:#8f8377;--blood:#b3261a;--ember:#ff8a3c;--ink:#080403b8;--u:clamp(12px, 1.5vh, 20px)}*{box-sizing:border-box}html,body{height:100%;color:var(--bone);-webkit-user-select:none;user-select:none;background:#000;margin:0;font-family:Georgia,Times New Roman,serif;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}img{-webkit-user-drag:none}#hud{pointer-events:none;font-size:var(--u);text-shadow:0 1px 3px #000;z-index:2;position:fixed;inset:0}#vitals{width:24vw;min-width:250px;position:absolute;bottom:3.2vh;left:2.2vw}.bar{align-items:center;gap:.5em;margin-top:.45em;display:flex}.bar img{opacity:.9;width:1.5em;height:1.5em}.track{background:var(--ink);border:1px solid #d8c9b847;flex:1;height:.8em;position:relative}.track .fill{width:100%;transition:width .12s linear;position:absolute;top:0;bottom:0;left:0}.track .cap{background:repeating-linear-gradient(45deg,#3a2a44,#3a2a44 3px,#1a1220 3px 6px);width:0;position:absolute;top:0;bottom:0;right:0}#hp .fill{background:linear-gradient(#c8362a,#7e1810)}#st .fill{background:linear-gradient(#9fb86a,#586b30)}#st .track{height:.55em}#flasks{align-items:center;gap:.4em;margin-top:.7em;font-size:1.15em;display:flex}#flasks img{filter:sepia()saturate(3)hue-rotate(-20deg);width:1.4em;height:1.4em}#flasks small,#ringui small{color:var(--dim);border:1px solid #8f837799;border-radius:2px;padding:0 .35em;font-size:.7em}#ringui{align-items:center;gap:.6em;width:17vw;min-width:190px;display:flex;position:absolute;bottom:3.2vh;right:2.2vw}#ringui .eye{flex:none;width:2.8em;height:2.8em;position:relative}#ringui .eye img{width:100%;height:100%;transition:opacity .25s,transform .25s;position:absolute;inset:0}#ringui .eye img:first-child{opacity:0;filter:drop-shadow(0 0 6px #ff3a1a);transform:scaleY(.1)}#ringui.worn .eye img:first-child{opacity:1;transform:none}#ringui.worn .eye .band{opacity:.25}#ringui.locked{opacity:.45}#ringui .fill{background:linear-gradient(90deg,#6d4bd0,#d03a2a);transition:none}#ringui .track i{background:#d8c9b88c;width:1px;position:absolute;top:-2px;bottom:-2px}#boss{text-align:center;width:46vw;position:absolute;top:4.5vh;left:50%;transform:translate(-50%)}#boss .name{letter-spacing:.25em;text-transform:uppercase;margin-bottom:.3em;font-size:1.05em}#boss .fill{background:linear-gradient(#d9a13a,#8a3c12)}#story{text-align:center;opacity:0;width:min(72vw,900px);font-size:1.5em;font-style:italic;line-height:1.5;transition:opacity 1.2s;position:absolute;top:15vh;left:50%;transform:translate(-50%)}#story.on{opacity:1}#prompt{text-align:center;background:var(--ink);opacity:0;white-space:nowrap;border:1px solid #d8c9b838;max-width:70vw;padding:.4em 1em;font-size:1.1em;transition:opacity .25s;position:absolute;bottom:17vh;left:50%;transform:translate(-50%)}#prompt.on{opacity:1}#toast{text-align:center;color:var(--ember);opacity:0;white-space:nowrap;font-size:1.15em;transition:opacity .5s;position:absolute;top:27vh;left:50%;transform:translate(-50%)}#toast.on{opacity:1}#lock{border:2px solid var(--bone);width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;position:absolute;transform:rotate(45deg);box-shadow:0 0 8px #000}#marks .m{width:2em;height:2em;margin:-1em 0 0 -1em;position:absolute}#marks .m img{opacity:.35;width:100%;height:100%;position:absolute;inset:0}#marks .m .f{position:absolute;inset:0;overflow:hidden}#marks .m .f img{opacity:1;filter:sepia()saturate(6)hue-rotate(5deg)brightness(1.3)}#marks .m.alert .f img{filter:sepia()saturate(9)hue-rotate(-28deg)brightness(1.2)}#fade{opacity:0;pointer-events:none;z-index:3;background:#000;transition:opacity .6s;position:fixed;inset:0}#fade.on{opacity:1}#fade .load{text-align:center;width:24vw;color:var(--dim);letter-spacing:.2em;opacity:0;font-size:.8em;transition:opacity .3s;position:absolute;bottom:12vh;left:50%;transform:translate(-50%)}#fade.loading .load{opacity:1}#fade .load .track{height:3px;margin-bottom:.8em}#fade .load .fill{background:var(--ember);transition:width .15s}#screens{z-index:4;pointer-events:none;position:fixed;inset:0}.screen{pointer-events:auto;text-align:center;background:radial-gradient(#0a040359,#050202e0);flex-direction:column;justify-content:center;align-items:center;font-size:clamp(14px,2vh,22px);display:flex;position:absolute;inset:0}.screen.clear{background:linear-gradient(#0502028c,#05020200 40%,#050202bf)}.screen.black{background:#000}.screen h1{letter-spacing:.12em;text-shadow:0 0 30px #ff5a1473,0 2px 4px #000;margin:0;font-size:4.2em;font-weight:400}.screen h2{letter-spacing:.5em;color:var(--dim);text-transform:uppercase;margin:.3em 0 2.2em;font-size:1.3em;font-weight:400}.screen h3{letter-spacing:.2em;margin:0 0 1em;font-size:2em;font-weight:400}.screen p{max-width:46em;margin:.5em 2em;font-style:italic;line-height:1.7}.screen button{min-width:16em;font:inherit;color:var(--bone);cursor:pointer;letter-spacing:.12em;background:#140907b3;border:1px solid #d8c9b84d;margin:.35em auto;padding:.55em 1.2em;display:block}.screen button:hover,.screen button:focus{border-color:var(--ember);color:#fff;background:#3c140abf;outline:none}.screen .row{justify-content:space-between;align-items:center;gap:1.5em;width:26em;margin:.4em auto;display:flex}.screen .row input[type=range]{width:12em;accent-color:var(--ember)}.screen .row select{font:inherit;color:var(--bone);background:#1a0c09;border:1px solid #d8c9b84d;padding:.2em .5em}.screen .keys{columns:2;text-align:left;color:var(--dim);column-gap:3em;margin:1.2em 0;font-size:.82em;line-height:1.7}.screen .keys b{color:var(--bone);min-width:8.5em;font-weight:400;display:inline-block}.screen .rank{color:var(--ember);text-shadow:0 0 40px #ff5a1499;margin:.1em 0 .2em;font-size:7em;line-height:1}.screen table{border-collapse:collapse;margin:0 auto 1.2em}.screen td{text-align:left;padding:.25em 1.2em}.screen td:last-child{text-align:right;color:#fff}.screen .foot{color:var(--dim);letter-spacing:.1em;font-size:.8em;position:absolute;bottom:3vh}#loading{z-index:9;background:#070302;flex-direction:column;justify-content:center;align-items:center;transition:opacity .6s;display:flex;position:fixed;inset:0}#loading.off{opacity:0;pointer-events:none}#loading .title{letter-spacing:.14em;font-size:3.2em}#loading .sub{letter-spacing:.5em;color:var(--dim);text-transform:uppercase;margin:.4em 0 2.4em}#loading .track{flex:none;width:30vw;height:4px}#loading .fill{background:var(--ember);transition:width .15s}#loading .msg{color:var(--dim);letter-spacing:.2em;margin-top:1em;font-size:.85em}#debug{z-index:8;color:#cfc;white-space:pre;pointer-events:none;text-shadow:0 1px 2px #000;font:11px/1.35 monospace;position:fixed;top:6px;left:8px}
