:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0ede7;background:#101114}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center}
.stage{width:100%;max-width:calc(100dvh * 16 / 9);aspect-ratio:16/9;position:relative;overflow:hidden;background:#34392d}
canvas{width:100%;height:100%;display:block}.hud{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}.ready .hud{opacity:1}
.hero-panel{position:absolute;left:24px;top:43px;width:176px;border:1px solid #d7c49b38;border-radius:10px;background:#15191cba;padding:10px;box-shadow:0 3px 14px #0003;backdrop-filter:blur(8px)}
.hero-identity{display:flex;align-items:center;gap:9px;margin-bottom:9px}.hero-identity strong{display:block;font-family:Georgia,serif;font-size:17px;font-weight:500;letter-spacing:.3px}.hero-identity span:not(.hero-sigil){display:block;font-size:10px;color:#c5b78f;margin-top:2px}.hero-sigil{width:31px;height:34px;border:1px solid #ddca9c6b;display:grid;place-items:center;border-radius:7px;color:#e0c68b;font-family:Georgia,serif;font-size:23px;background:linear-gradient(150deg,#75614033,#181c1d)}
.resource{height:12px;position:relative;overflow:hidden;border-radius:3px;background:#060d0de0;border:1px solid #ffffff12}.resource+.resource{margin-top:5px}.resource>span{display:block;width:100%;height:100%;transition:width .16s linear}.health>span{background:linear-gradient(90deg,#843d43,#c06360)}.magic>span{background:linear-gradient(90deg,#444080,#7972b1)}.resource small{position:absolute;inset:0;text-align:center;font-size:8px;font-weight:600;line-height:10px;text-shadow:0 1px 2px #000}
.scene-name{position:absolute;top:17px;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 1px 3px #171a13,0 1px 8px #171a13}.scene-name strong{font-family:Georgia,serif;font-weight:500;letter-spacing:6px;font-size:19px;color:#f1e3bd}.scene-name span{display:block;font-size:10px;letter-spacing:.8px;margin-top:4px;color:#f2eee5}
.demo-label{position:absolute;right:19px;top:20px;font-size:9px;letter-spacing:.3px;border:1px solid #d4c38e3b;background:#15191b9c;border-radius:5px;padding:5px 8px;color:#e1d8c1}
.spells{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:6px;border:1px solid #dbc8993b;background:#16181cdf;border-radius:11px;box-shadow:0 4px 16px #0004}.spell{position:relative;display:flex;align-items:center;gap:7px;padding:3px 12px 3px 3px;overflow:hidden;border:1px solid #f5f1e312;border-radius:7px;min-width:139px;background:#26282d}
.spell-icon{display:grid;place-items:center;width:37px;height:37px;border-radius:6px;border:1px solid #eee3ca36}.bolt{background:radial-gradient(ellipse at 35% 30%,#8274b980,#373244)}.flame{background:radial-gradient(ellipse at 35% 30%,#bd895d80,#52382e)}.spell-icon svg{width:26px;height:26px;fill:#ebd9ff;filter:drop-shadow(0 1px 3px #100c21)}.flame svg{fill:#f5cd94}.spell strong{font-size:11px;font-weight:500;display:block;color:#ede4d4}.spell small{display:block;font-size:8px;color:#beb9ad;margin-top:3px}.cooldown{position:absolute;bottom:0;left:0;right:0;transform-origin:left;height:2px;background:#aa94d8;transform:scaleX(0)}#spell-flame .cooldown{background:#e2b974}.spell.casting{box-shadow:inset 0 0 0 1px #e9dab774;background:#3b3446}
.controls{position:absolute;right:17px;bottom:23px;display:flex;gap:6px;pointer-events:auto}.controls button{color:#e8ddc6;background:#15191cc9;border:1px solid #cdbb8b4f;border-radius:6px;font:inherit;font-size:10px;padding:7px 11px;cursor:pointer}.controls button:hover{border-color:#e7d29c}.controls button:focus-visible{outline:2px solid #64bbff;outline-offset:3px}.embedded .controls{display:none}
.loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:10px;background:#181d1de8;color:#ded3b9;font-size:13px}.loading[hidden]{display:none}.loading-ring{width:16px;height:16px;border:2px solid #cdbc962b;border-top-color:#dec28b;border-radius:50%;animation:loading-spin .8s linear infinite}@keyframes loading-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.hero-panel{top:31px;left:12px;width:130px;padding:7px}.hero-identity strong{font-size:13px}.hero-identity span:not(.hero-sigil){font-size:8px}.hero-sigil{width:26px;height:28px;font-size:18px}.hero-identity{gap:6px;margin-bottom:6px}.resource{height:10px}.resource small{font-size:7px;line-height:8px}.scene-name{top:9px}.scene-name strong{font-size:13px;letter-spacing:4px}.scene-name span{font-size:8px;margin-top:2px}.demo-label{top:10px;right:10px;font-size:7px;padding:4px 5px}.spells{bottom:9px;padding:4px;gap:5px}.spell{min-width:109px;gap:5px;padding-right:8px}.spell-icon{width:28px;height:28px}.spell-icon svg{width:21px;height:21px}.spell strong{font-size:9px}.spell small{font-size:6px;margin-top:2px}.controls{right:9px;bottom:58px}.controls button{font-size:8px;padding:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.loading-ring{animation:none}}