:root{--gold: #d8c08a;--gold-dim: #8a7a55;--ink: #0b0a0d;--hp: #b3262b;--hp-lag: #e8c9a0;--st: #c9b98c;--sp: #4fb6ff;--boss: #8d1f2a;--stun: #c8a24a;--purple: #a86bff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;overflow:hidden;color:#eee;font-family:Cormorant Garamond,Georgia,serif;user-select:none;-webkit-user-select:none}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%;outline:none}.hidden{display:none!important}#hud{position:fixed;inset:0;pointer-events:none}#player-bars{position:absolute;left:42px;bottom:40px;width:340px}.bar{position:relative;height:9px;margin-bottom:7px;background:#08060a9e;border:1px solid rgba(216,192,138,.35);box-shadow:0 0 14px #0009;overflow:hidden}.bar .fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left center}.bar.hp{height:11px}.bar.hp .fill{background:linear-gradient(180deg,#d8434a,var(--hp) 55%,#6d1418)}.bar.hp .fill.lag,.bar.boss .fill.lag{background:var(--hp-lag);opacity:.85;transition:width .6s ease-out .35s}.bar.st{width:78%;height:6px}.bar.st .fill{background:linear-gradient(180deg,#efe2b8,var(--st))}.bar.sp{width:64%;height:7px;border-color:#78beff73}.bar.sp .fill{background:linear-gradient(90deg,#1b5fae,var(--sp),#bfe8ff);box-shadow:0 0 12px #4fb6ff}.bar.sp .pips{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(33.33% - 1px),rgba(0,0,0,.85) calc(33.33% - 1px),rgba(0,0,0,.85) 33.33%)}.bar.sp.full{animation:spPulse 1.2s ease-in-out infinite}@keyframes spPulse{50%{box-shadow:0 0 18px #4fb6ffe6}}#element-indicator{font-family:Cinzel,serif;font-size:13px;letter-spacing:2px;color:var(--gold);text-shadow:0 0 8px #000;margin-top:4px;min-height:18px}#boss-bar{position:absolute;left:50%;top:30px;width:min(760px,62vw);transform:translate(-50%);text-align:center}#boss-bar .boss-name{font-family:Cinzel,serif;font-size:21px;letter-spacing:3px;color:#efe6d2;text-shadow:0 2px 10px #000,0 0 2px #000;margin-bottom:6px}.bar.boss{height:12px}.bar.boss .fill{background:linear-gradient(180deg,#c23a46,var(--boss) 60%,#4c0d13)}.bar.stun{height:4px;width:100%;border-color:#d8c08a33}.bar.stun .fill{background:var(--stun)}#lock-reticle{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,240,210,.9);border-radius:50%;box-shadow:0 0 10px #ffd296cc;transform:rotate(45deg)}#lock-reticle:after{content:"";position:absolute;inset:4px;background:#fff0d2e6;border-radius:50%}#crosshair{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#ffffff59;opacity:0;transition:opacity .2s}#crosshair.on{opacity:1}#prompt{position:absolute;left:50%;bottom:22%;transform:translate(-50%);font-family:Cinzel,serif;font-size:18px;letter-spacing:2px;padding:10px 22px;background:radial-gradient(ellipse at center,#000000b3,#0000);color:#f3e8cf;text-shadow:0 0 8px #000}#prompt kbd{display:inline-block;min-width:26px;padding:2px 7px;margin:0 6px;border:1px solid var(--gold);border-radius:4px;font-family:Cinzel,serif;font-size:15px;color:#fff;background:#1e1912cc}#toast{position:absolute;right:40px;top:108px;text-align:right;font-family:Cinzel,serif;font-size:15px;letter-spacing:1px;color:var(--gold);text-shadow:0 0 8px #000}#toast .t{opacity:0;animation:toast 3.2s ease forwards;margin-bottom:4px}@keyframes toast{10%{opacity:1;transform:translateY(0)}80%{opacity:1}to{opacity:0}0%{transform:translateY(-6px)}}#area-title{position:fixed;left:50%;top:26%;transform:translate(-50%);display:flex;align-items:center;gap:22px;pointer-events:none;animation:areaIn 5.5s ease forwards}#area-title .text{font-family:Cinzel,serif;font-size:42px;letter-spacing:8px;color:#f0e6cf;text-shadow:0 0 22px rgba(0,0,0,.9),0 0 2px #000;white-space:nowrap}#area-title .line{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}@keyframes areaIn{0%{opacity:0;letter-spacing:2px}18%{opacity:1}78%{opacity:1}to{opacity:0}}#banner{position:fixed;left:0;right:0;top:42%;text-align:center;font-family:Cinzel,serif;font-size:64px;letter-spacing:10px;pointer-events:none;color:#e8d39b;text-shadow:0 0 30px rgba(255,200,120,.4),0 0 3px #000;background:linear-gradient(90deg,transparent,rgba(0,0,0,.65) 30%,rgba(0,0,0,.65) 70%,transparent);padding:18px 0;animation:bannerIn 4.5s ease forwards}@keyframes bannerIn{0%{opacity:0;transform:scale(1.06)}15%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0}}#fade{position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;transition:opacity 1.2s ease}#letterbox .top,#letterbox .bottom{position:fixed;left:0;right:0;height:0;background:#000;transition:height .9s ease;pointer-events:none;z-index:5}#letterbox .top{top:0}#letterbox .bottom{bottom:0}#letterbox.on .top,#letterbox.on .bottom{height:11vh}#title-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 60%,#281c308c,#000000f0 70%);z-index:10;transition:opacity 1.5s ease}#title-screen.gone{opacity:0;pointer-events:none}.title-inner{text-align:center}.game-title{font-family:Cinzel,serif;font-weight:800;font-size:clamp(34px,6.4vw,112px);letter-spacing:.22em;white-space:nowrap;color:#e9dcc0;text-shadow:0 0 40px rgba(168,107,255,.35),0 4px 18px #000}.subtitle{font-style:italic;font-size:20px;color:#a99f8c;margin-top:-4px;letter-spacing:2px}#load-progress{width:360px;height:2px;margin:46px auto 12px;background:#ffffff1a}#load-progress .fill{height:100%;width:0;background:linear-gradient(90deg,#7b5cff,#e9dcc0);box-shadow:0 0 10px #a86bff;transition:width .3s}#load-text{font-size:17px;color:#9d927d;min-height:24px}#start-btn{margin-top:26px;font-family:Cinzel,serif;font-size:22px;letter-spacing:6px;padding:12px 54px;color:#f2e7cd;background:#140e1899;border:1px solid var(--gold-dim);cursor:pointer;transition:all .25s}#start-btn:hover{border-color:var(--gold);box-shadow:0 0 24px #d8c08a59;background:#281e32b3}.hint{margin-top:18px;font-size:14px;color:#6f675a;letter-spacing:1px}#pause{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b8;backdrop-filter:blur(6px);z-index:20}.pause-inner{width:min(980px,94vw);max-height:92vh;overflow:auto;padding:26px 34px;border:1px solid rgba(216,192,138,.25);background:#0a080cd9}.pause-title{font-family:Cinzel,serif;font-size:34px;letter-spacing:8px;text-align:center;color:var(--gold);margin-bottom:14px}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 26px;font-size:16px}.controls-grid .sec{grid-column:1 / -1;font-family:Cinzel,serif;color:var(--gold);letter-spacing:3px;margin-top:10px;border-bottom:1px solid rgba(216,192,138,.2)}.controls-grid .row{display:flex;justify-content:space-between;gap:8px;color:#d8d0c0}.controls-grid .row kbd{font-family:Cinzel,serif;font-size:13px;color:#fff;border:1px solid #6c6048;border-radius:3px;padding:0 5px;background:#1c1812;white-space:nowrap}.pause-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:18px 0 10px;font-size:16px;color:#cfc6b4}.pause-row select,.pause-row input{margin-left:8px;vertical-align:middle}#resume-btn{display:block;margin:8px auto 0;font-family:Cinzel,serif;font-size:18px;letter-spacing:4px;padding:8px 40px;color:#f2e7cd;background:transparent;border:1px solid var(--gold-dim);cursor:pointer}@media(max-height:820px){.pause-inner{padding:12px 26px}.pause-title{font-size:24px;letter-spacing:6px;margin-bottom:4px}.controls-grid{gap:1px 22px;font-size:13px}.controls-grid .sec{margin-top:5px;font-size:13px}.controls-grid .row kbd{font-size:11px}.pause-row{margin:8px 0 4px;font-size:13px}#resume-btn{font-size:15px;padding:5px 34px}}#death-screen,#victory-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#28000059,#000c);z-index:15;animation:deathIn 2.5s ease forwards}#victory-screen{background:radial-gradient(ellipse at center,#3c2d0a4d,#000000bf)}.death-text{font-family:Cinzel,serif;font-size:96px;letter-spacing:18px;color:#a0141e;text-shadow:0 0 40px rgba(160,20,30,.6)}.victory-text{font-family:Cinzel,serif;font-size:72px;letter-spacing:12px;color:#ead48f;text-shadow:0 0 40px rgba(255,210,120,.5);text-align:center}.death-sub{margin-top:12px;font-size:22px;color:#bdb3a0}@keyframes deathIn{0%{opacity:0}to{opacity:1}}#flask-count{font-family:Cinzel,serif;font-size:12px;letter-spacing:2px;color:#bfb39a;text-shadow:0 0 6px #000;margin-top:2px}#element-indicator.el-fire{color:#ffb070}#element-indicator.el-frost{color:#9fdcff}#element-indicator.el-storm{color:#d6d8ff}#element-indicator.el-void{color:#c79bff}.bar.st.blink{animation:stBlink .5s ease 2}@keyframes stBlink{50%{border-color:#ff5a3c;box-shadow:0 0 12px #ff5a3c}}.bar.sp.pulse{animation:spPop .6s ease}@keyframes spPop{30%{box-shadow:0 0 26px #8fd6ff;border-color:#cfeeff}}#dmg-overlay{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:3;background:radial-gradient(ellipse at center,transparent 45%,rgba(150,0,10,.75) 100%)}#dmg-overlay.low{animation:lowHp 1.1s ease-in-out infinite}@keyframes lowHp{50%{opacity:.45}}#vig-overlay{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:3;mix-blend-mode:multiply}#menu-panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(4px);z-index:18}#menu-panel .menu-inner{width:min(860px,94vw);max-height:88vh;overflow:auto;padding:22px 30px;border:1px solid rgba(216,192,138,.3);background:#0a080ce6}#menu-panel .tabs{display:flex;gap:22px;justify-content:center;margin-bottom:16px;font-family:Cinzel,serif;letter-spacing:2px;color:#8a7a55}#menu-panel .tabs .on{color:var(--gold);border-bottom:1px solid var(--gold)}#menu-panel kbd{font-size:11px;border:1px solid #6c6048;border-radius:3px;padding:0 4px;color:#ddd}#menu-panel .inv{display:grid;gap:10px}#menu-panel .item{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:10px 12px;border:1px solid rgba(216,192,138,.12);background:#ffffff05;font-size:17px;color:#d8d0c0}#menu-panel .item b{font-family:Cinzel,serif;font-weight:600;color:#efe2c4;font-size:15px;letter-spacing:1px}#menu-panel canvas{display:block;margin:0 auto;max-width:100%;border:1px solid rgba(216,192,138,.2)}#menu-panel .hint{text-align:center;margin-top:12px;color:#6f675a;font-size:14px}#skip-hint{position:fixed;right:30px;bottom:14vh;font-family:Cinzel,serif;font-size:13px;letter-spacing:2px;color:#e6dcc899;z-index:6;pointer-events:none}#qte{position:absolute;left:50%;top:60%;display:flex;gap:30px;align-items:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .12s ease,transform .16s cubic-bezier(.2,1.6,.4,1);--k: 1}#qte.on{opacity:1;transform:translate(-50%,-50%) scale(1)}#qte .opt{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:Cinzel,serif;font-size:14px;letter-spacing:4px;text-transform:uppercase;color:#e6eeff;text-shadow:0 0 14px rgba(110,170,255,.9),0 0 2px #000;transition:opacity .15s}#qte .opt.off{opacity:.28}#qte .key{position:relative;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font:700 15px/1 system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:radial-gradient(circle,#121c3ce0 56%,#121c3c00 58%);box-shadow:0 0 26px #5a96ff73}#qte .key:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#a9d4ff calc(var(--k) * 360deg),#ffffff1f 0);-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%)}#qte .sep{width:1px;height:54px;background:linear-gradient(transparent,rgba(190,215,255,.55),transparent)}#slowmo-overlay{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#3c6ec800 42%,#325fbe38 74%,#101c509e)}#flourish{position:absolute;left:50%;top:38%;transform:translate(-50%);font-family:Cinzel,serif;font-size:30px;letter-spacing:9px;text-transform:uppercase;color:#cfe4ff;text-shadow:0 0 24px rgba(110,170,255,.95),0 0 3px #000;opacity:0;pointer-events:none;white-space:nowrap}#flourish.go{animation:flourishIn 1.1s ease forwards}@keyframes flourishIn{0%{opacity:0;transform:translate(-50%) scale(1.25);letter-spacing:16px}15%{opacity:1;transform:translate(-50%) scale(1);letter-spacing:9px}70%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-10px)}}