500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#c5a66a;--pale:#e8dfca;--muted:#9b9a91;--panel:rgba(8,13,16,.78);--red:#a73c35}*{box-sizing:border-box}html,body,#game-root{width:100%;height:100%;margin:0;overflow:hidden;background:#080d11}body{font-family:Inter,system-ui,sans-serif;color:var(--pale);touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}#game-root{position:relative}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(9,16,19,.78),rgba(2,5,7,.96));backdrop-filter:blur(5px)}.loading-card{text-align:center;padding:34px 26px;max-width:560px;width:calc(100% - 36px);border:1px solid rgba(197,166,106,.28);background:linear-gradient(145deg,rgba(21,29,31,.92),rgba(7,12,15,.96));box-shadow:0 25px 90px #0009}.rune{font-family:serif;color:var(--gold);font-size:52px;text-shadow:0 0 28px #c5a66a77}.loading-card h1,.chapter-card h2{font-family:Cinzel,serif;letter-spacing:.12em}.loading-card h1{font-size:clamp(20px,4vw,34px);margin:12px 0;color:#eee5d2}.loading-card p{color:#b9b6aa;line-height:1.7}.loading-track,.health-track,.boss-track{height:4px;background:#ffffff20;overflow:hidden}.loading-track{max-width:240px;margin:24px auto 0}.loading-track span{display:block;height:100%;width:45%;background:var(--gold);animation:load 1.1s ease-in-out infinite alternate}@keyframes load{to{width:100%}}.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 28px;background:linear-gradient(#05090bd9,transparent);pointer-events:none}.brand{display:flex;gap:12px;align-items:center}.brand-mark{font-family:serif;color:var(--gold);font-size:30px}.brand strong,.brand small,.objective small,.objective strong{display:block}.brand strong{font-family:Cinzel,serif;font-size:13px;letter-spacing:.16em}.brand small,.objective small{font-size:9px;letter-spacing:.17em;color:#aaa99d;margin-top:5px}.objective{text-align:right;padding:8px 12px;border-right:2px solid var(--gold);background:linear-gradient(90deg,transparent,#0a1114aa)}.objective strong{font-family:Cinzel,serif;font-size:13px;margin-top:5px}.status-panel{position:absolute;left:28px;top:105px;width:min(290px,42vw);padding:12px 14px;background:var(--panel);border:1px solid #c5a66a38}.status-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;color:#c9c3b2}.status-label b{color:#f2e9d6}.health-track{height:7px;margin-top:9px}.health-track span,.boss-track span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#78302c,#d15b4c);transition:width .2s}.status-hint{font-size:9px;color:#96978f;margin-top:9px;line-height:1.5}.toast{position:absolute;top:24%;left:50%;transform:translate(-50%,-10px);font-family:Cinzel,serif;letter-spacing:.12em;text-align:center;color:#ead6a7;text-shadow:0 2px 12px #000;padding:10px 18px;background:#070c10a8;border-top:1px solid #c5a66a77;border-bottom:1px solid #c5a66a77;opacity:0;transition:.35s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.center-prompt{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.1em;color:#f1e4c5;text-shadow:0 2px 5px #000;background:#070c10b8;padding:10px 14px}.boss-panel{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:min(390px,70vw);text-align:center}.boss-name{font-family:Cinzel,serif;font-size:11px;letter-spacing:.22em;margin-bottom:8px;text-shadow:0 2px 6px #000}.boss-track{height:8px;border:1px solid #c5a66a55;background:#160c0b}.boss-track span{background:linear-gradient(90deg,#6e1718,#d44d3d)}.bottom-left{position:absolute;left:28px;bottom:25px;font-size:9px;letter-spacing:.13em;color:#c8c4b7;text-shadow:0 2px 5px #000}.keycap{display:inline-grid;place-items:center;min-width:22px;height:22px;border:1px solid #c5a66a77;color:#ead8ae;margin-right:5px;background:#0a1114b8}.separator{color:var(--gold);padding:0 8px}.chapter-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,86vw);text-align:center;padding:22px 24px;background:linear-gradient(90deg,transparent,#081014df 18%,#081014df 82%,transparent);pointer-events:none;transition:opacity 1s}.chapter-card span{font-size:9px;letter-spacing:.25em;color:var(--gold)}.chapter-card h2{font-size:clamp(19px,3vw,28px);font-weight:500;margin:12px 0}.chapter-card p{font-size:12px;color:#c2c0b4;line-height:1.6}.main-button{margin-top:16px;padding:13px 22px;border:1px solid var(--gold);background:#a1844c;color:#100f0b;font-family:Cinzel,serif;letter-spacing:.12em;font-weight:700;cursor:pointer}.error-message{position:absolute;inset:auto 12px 12px;padding:12px;background:#511c1c;color:white;z-index:40;font-size:12px}.touch-controls{display:none;position:absolute;inset:auto 14px 18px;justify-content:space-between;align-items:end;pointer-events:none}.touch-controls button{pointer-events:auto;border:1px solid #d4bd8b77;background:#081014b8;color:#f1e4c5;border-radius:50%;width:44px;height:44px;font-weight:700;backdrop-filter:blur(5px)}.dpad>button{display:block;margin:0 auto 4px}.dpad div{display:flex;gap:4px}.touch-actions{display:flex;gap:7px;align-items:end}.touch-actions button{width:60px;height:60px;border-radius:50%;font-size:9px;letter-spacing:.04em}.touch-actions #attack-button{width:72px;height:72px;background:#56231fc9;border-color:#d36c5b}.touch-actions #interact-button{width:48px;height:48px}@media(max-width:700px){.topbar{padding:14px}.brand strong{font-size:10px}.brand small{font-size:7px}.brand-mark{font-size:24px}.objective{padding:5px 8px}.objective small{font-size:7px}.objective strong{font-size:10px;max-width:130px}.status-panel{top:80px;left:14px;width:190px;padding:9px}.status-hint{font-size:8px}.bottom-left{display:none}.touch-controls{display:flex}.chapter-card{top:44%}.boss-panel{top:18%}}@media(hover:none){.status-hint{display:none}}