:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#030303;color:#efefef}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#030303}#app{position:relative}#world{display:block;width:100%;height:100%;background:#030303;cursor:crosshair}#start{position:absolute;left:50%;bottom:clamp(32px,9vh,96px);transform:translate(-50%);min-width:156px;height:44px;border:1px solid rgba(242,242,242,.76);border-radius:6px;background:#050505c7;color:#f4f4f4;font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase;box-shadow:0 0 32px #bef0ff2e}#start:hover,#start:focus-visible{outline:none;border-color:#8ff7ff;color:#8ff7ff}#start.is-hidden{opacity:0;pointer-events:none}#hud{position:absolute;top:clamp(14px,3vw,28px);left:clamp(14px,3vw,28px);width:min(270px,calc(100vw - 28px));display:grid;gap:8px;pointer-events:none}.hud-title{display:grid;gap:2px;margin-bottom:2px;text-shadow:0 1px 16px rgba(0,0,0,.82)}.hud-title strong{color:#f8fcfaf0;font-size:18px;font-weight:780;letter-spacing:0;text-transform:uppercase}.hud-title span{color:#dcf6f5ad;font-size:11px;font-weight:680;letter-spacing:0;text-transform:uppercase}.hud-row{display:grid;grid-template-columns:1fr auto;align-items:center;min-height:28px;border-bottom:1px solid rgba(255,255,255,.16);color:#ebebebb8;font-size:11px;font-weight:650;letter-spacing:0;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.72)}#debug-panel{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);z-index:4;width:min(292px,calc(100vw - 28px));max-height:calc(100vh - 28px);padding:12px;overflow:auto;border:1px solid rgba(244,244,244,.2);border-radius:8px;background:#090a0ab3;box-shadow:0 18px 46px #00000042;color:#f3f3f3}.debug-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:10px}.debug-header strong{font-size:12px;font-weight:750;letter-spacing:0;text-transform:uppercase}#debug-toggle{height:30px;padding:0 9px;border:1px solid rgba(244,244,244,.28);border-radius:6px;background:#060707b8;color:#f3f3f3;font-size:11px;font-weight:750;letter-spacing:0;text-transform:uppercase}#debug-toggle:hover,#debug-toggle:focus-visible{outline:none;border-color:#8ff7ffb8;color:#dffcff}#debug-panel.is-collapsed{width:auto;padding:8px;overflow:visible}#debug-panel.is-collapsed .debug-header{display:block;margin:0}#debug-panel.is-collapsed .debug-header strong,#debug-panel.is-collapsed .debug-actions,#debug-panel.is-collapsed #debug-controls,#debug-panel.is-collapsed #fps-readout,#debug-panel.is-collapsed #debug-status{display:none}#debug-panel.is-collapsed #debug-toggle{min-width:56px}.debug-actions{display:flex;gap:6px}.debug-actions button{height:30px;padding:0 10px;border:1px solid rgba(143,247,255,.66);border-radius:6px;background:#071416bd;color:#dffcff;font-size:11px;font-weight:750;letter-spacing:0;text-transform:uppercase}.debug-actions button:hover,.debug-actions button:focus-visible{outline:none;background:#12363adb}#debug-controls{display:grid;gap:9px}.debug-control{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;color:#f2f2f2c7;font-size:11px;font-weight:650;letter-spacing:0}.debug-control output{min-width:42px;color:#fff;font-variant-numeric:tabular-nums;text-align:right}.debug-control input{grid-column:1 / -1;width:100%;accent-color:#8ff7ff}.debug-meter{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);color:#f2f2f28a;font-size:10px;font-weight:650;letter-spacing:0;text-transform:uppercase}.debug-meter strong{color:#dffcffbd;font-size:11px;font-variant-numeric:tabular-nums}.debug-meter strong:after{content:" FPS";color:#f2f2f261;font-size:9px;font-weight:650}#debug-status{min-height:16px;margin:8px 0 0;color:#dffcffc2;font-size:11px;font-weight:650}.hud-row strong{color:#f8f8f8;font-size:12px}#spell-panel{position:absolute;left:clamp(14px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:3;width:min(430px,calc(100vw - 28px));display:grid;gap:8px;pointer-events:none;color:#f0fcfcd6;text-shadow:0 1px 14px rgba(0,0,0,.78)}.spell-topline{display:grid;grid-template-columns:1fr auto;align-items:center;color:#f2f2f29e;font-size:11px;font-weight:760;letter-spacing:0;text-transform:uppercase}.spell-topline strong{color:#fff;font-variant-numeric:tabular-nums}.coherence-meter{height:5px;overflow:hidden;border-radius:999px;background:#ffffff1c;box-shadow:inset 0 0 14px #0000006b}#coherence-fill{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8ff7ff,#fff);box-shadow:0 0 18px #8ff7ff70;transform-origin:left center}#spell-slots{display:grid;grid-template-columns:repeat(5,minmax(76px,1fr));grid-auto-rows:64px;gap:6px}.spell-slot{display:grid;grid-template-rows:12px 24px 12px;align-content:center;height:64px;min-width:0;padding:7px 8px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--spell-color) 13%,rgba(9,11,11,.52)),#04050547);box-shadow:0 0 18px color-mix(in srgb,var(--spell-color) 12%,transparent);opacity:.78}.spell-slot.is-selected{border-color:color-mix(in srgb,var(--spell-color) 78%,#ffffff);box-shadow:0 0 22px color-mix(in srgb,var(--spell-color) 32%,transparent),inset 0 0 18px color-mix(in srgb,var(--spell-color) 12%,transparent);opacity:1}.spell-slot.is-locked{filter:grayscale(1);opacity:.38}.spell-slot.is-cooling{opacity:.54}.spell-key{display:block;min-width:0;overflow:hidden;color:color-mix(in srgb,var(--spell-color) 82%,#ffffff);font-size:10px;font-weight:820;line-height:12px;text-overflow:ellipsis;white-space:nowrap}.spell-name{display:block;margin-top:2px;min-width:0;overflow:hidden;color:#fff;font-size:11px;font-weight:780;line-height:12px;max-height:24px;text-overflow:ellipsis}.spell-meta{display:block;margin-top:4px;min-width:0;overflow:hidden;color:#ebf6f694;font-size:9px;font-weight:680;line-height:10px;text-overflow:ellipsis;white-space:nowrap}#spell-help{min-height:12px;max-width:100%;overflow:hidden;margin:0;color:#ebf6f68c;font-size:10px;font-weight:680;letter-spacing:0;line-height:12px;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}#reward-toast{--reward-color: #8ff7ff;position:absolute;left:50%;top:52%;z-index:3;display:grid;width:min(760px,calc(100vw - 34px));gap:8px;transform:translate(-50%,-42%) scale(.92);opacity:0;pointer-events:none;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.84),0 0 26px color-mix(in srgb,var(--reward-color) 46%,transparent),0 0 64px color-mix(in srgb,var(--reward-color) 28%,transparent);transition:opacity .9s ease,filter 1.2s ease,transform 1.3s cubic-bezier(.16,.9,.2,1);filter:blur(12px)}#reward-toast:before,#reward-toast:after{position:absolute;left:50%;z-index:-1;width:min(920px,calc(100vw - 20px));height:150px;transform:translate(-50%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--reward-color) 38%,transparent),transparent),linear-gradient(90deg,transparent 8%,rgba(255,255,255,.14),transparent 92%);filter:blur(22px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);opacity:0;content:""}#reward-toast:before{top:-68px}#reward-toast:after{bottom:-76px;height:180px;opacity:0}#reward-toast.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}#reward-toast.is-visible:before{opacity:.64;animation:reward-mist-drift 5.8s ease-out both}#reward-toast.is-visible:after{opacity:.42;animation:reward-mist-drift 6.4s .12s ease-out both reverse}#reward-kicker{color:color-mix(in srgb,var(--reward-color) 84%,#ffffff);font-size:clamp(13px,1.8vw,18px);font-style:normal;font-weight:760;letter-spacing:0;text-transform:uppercase}#reward-title{color:#fff;font-size:clamp(42px,8.4vw,92px);font-weight:860;letter-spacing:0;line-height:.96}#reward-detail{color:#f0fcfcc2;font-size:clamp(15px,2vw,22px);font-style:normal;font-weight:680;letter-spacing:0}@keyframes reward-mist-drift{0%{transform:translate(-50%) scaleX(.42);opacity:0}18%{opacity:.72}to{transform:translate(-50%) scaleX(1.22);opacity:0}}#reticle{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.32);border-radius:50%;pointer-events:none;box-shadow:0 0 18px #a0f5ff29,inset 0 0 10px #a0f5ff1a}#reticle:after{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;transform:translate(-50%,-50%);background:#fff9;content:""}@media(max-width:720px){#hud{width:min(210px,calc(100vw - 28px))}#spell-panel{width:min(350px,calc(100vw - 24px))}#spell-slots{grid-template-columns:repeat(3,minmax(76px,1fr));grid-auto-rows:64px}#debug-panel{top:auto;bottom:12px;right:12px;width:min(232px,calc(100vw - 24px));max-height:46vh;padding:10px}.hud-row{min-height:24px;font-size:10px}.hud-row strong{font-size:11px}#reward-toast{top:54%;width:min(360px,calc(100vw - 28px));gap:6px}#reward-title{font-size:clamp(34px,12vw,56px)}#reward-detail{font-size:13px}.debug-control{font-size:10px}}