:root{color-scheme:dark;--ink:#f6edff;--muted:#c4b5d4;--violet:#bb8cf5;--panel:rgba(17,13,35,.91);--line:rgba(221,191,255,.24)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#100d22;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;color:var(--ink)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #e5bdff;outline-offset:3px}#game{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#140e26}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}#effects{z-index:2}#world{z-index:1}#vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 44%,rgba(6,5,16,.35) 100%);box-shadow:inset 0 0 100px #05041040}#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;z-index:7;pointer-events:none;padding:calc(env(safe-area-inset-top,0px) + 17px) calc(env(safe-area-inset-right,0px) + 20px) 0 calc(env(safe-area-inset-left,0px) + 19px)}.hud-main{width:min(245px,58vw);filter:drop-shadow(0 2px 10px #100b21)}.hud-label{display:flex;align-items:center;gap:6px;color:#e8dafd;font-size:10px;letter-spacing:.16em;font-weight:800;text-shadow:0 2px 4px #100d22}.diamond{font-size:17px;line-height:1;color:#dfb8ff}.hud-label #mp-text{margin-left:auto;font-variant-numeric:tabular-nums;font-size:10px;letter-spacing:.03em;color:#fdf5ff}.mp-track{margin-top:7px;overflow:hidden;width:100%;height:13px;padding:2px;background:#241e40;border:1px solid #746095;border-radius:4px;box-shadow:0 3px #0a0718a8}#mp-fill{height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,#8967ff,#c690fa 68%,#f5d2ff);box-shadow:0 0 9px #bb8bff;transition:width .08s linear}.mp-track.low #mp-fill{background:linear-gradient(90deg,#ae546d,#f1a2aa);box-shadow:0 0 8px #f393b9}.hud-stats{display:flex;align-items:center;gap:10px;margin-top:10px;color:#e4dcf4;font-size:12px;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 5px #080715}.hud-stats b{font-size:15px;color:#fff;font-variant-numeric:tabular-nums}.stat-separator{opacity:.35}.icon-button{pointer-events:auto;min-width:50px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:#17122ccc;color:#f0dffd;box-shadow:0 4px 18px #08051188;display:flex;align-items:center;justify-content:center;gap:6px;font-size:20px}.icon-button small{font-size:12px;font-weight:800;white-space:nowrap}#mp-warning{position:absolute;z-index:12;left:50%;top:calc(env(safe-area-inset-top,0px) + 78px);transform:translate(-50%,-10px);opacity:0;pointer-events:none;color:#ffe0e6;font-size:13px;font-weight:800;text-shadow:0 2px 5px #25101c;transition:transform .15s,opacity .15s;white-space:nowrap}#mp-warning.show{opacity:1;transform:translate(-50%)}#touch-controls{position:absolute;z-index:6;inset:0;pointer-events:none}#joystick{position:absolute;pointer-events:auto;left:calc(env(safe-area-inset-left,0px) + 21px);bottom:calc(env(safe-area-inset-bottom,0px) + 25px);width:118px;height:122px;touch-action:none;display:flex;align-items:center;justify-content:center}.stick-ring{position:absolute;top:1px;left:2px;width:110px;height:110px;border:1.5px solid rgba(197,153,254,.52);border-radius:50%;background:radial-gradient(circle,#432c6354,#160e2aa6);box-shadow:inset 0 0 0 10px #1e163552,0 6px 20px #05031259}.stick-ring:after{content:"";position:absolute;inset:17px;border:1px dashed rgba(200,169,244,.14);border-radius:50%}#stick-knob{position:absolute;top:34px;left:34px;width:42px;height:42px;border:2px solid #d4bcf8;border-radius:50%;background:linear-gradient(135deg,#8562b1,#4e366f);box-shadow:inset 0 2px 3px #f4dcff66,0 5px 12px #090719a8;transform:translate(0);transition:transform .06s ease-out}.joy-label{position:absolute;bottom:0;left:30px;font-size:9px;font-weight:800;letter-spacing:.22em;color:#c6b1e5;opacity:.75}.spell-area{position:absolute;pointer-events:none;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);right:calc(env(safe-area-inset-right,0px) + 19px);display:flex;align-items:flex-end;flex-direction:column;gap:7px}.spell-caption{font-size:9px;letter-spacing:.2em;font-weight:800;color:#e6d4fe;text-shadow:0 1px 7px #100d22}.spell-caption span{font-size:9px;letter-spacing:0;font-weight:600;margin-left:7px;opacity:.65}.spell-grid{pointer-events:auto;display:grid;grid-template-columns:repeat(2,67px);grid-template-rows:repeat(2,67px);gap:10px}.spell-button{position:relative;border:1px solid color-mix(in srgb,var(--spell-color),transparent 39%);border-radius:13px;background:linear-gradient(145deg,#2d2047e3,#17112bed);box-shadow:inset 0 1px #ffffff1f,0 5px #0806179e,0 7px 20px #06040f61;color:var(--spell-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .1s,opacity .15s}.spell-button:active,.spell-button.pressed{transform:translateY(3px);box-shadow:inset 0 0 12px #ffffff1f,0 2px #080716}.spell-button.insufficient{opacity:.45;filter:saturate(.6)}.spell-icon{font-size:29px;line-height:1;text-shadow:0 0 9px color-mix(in srgb,var(--spell-color),transparent 38%)}.spell-name{font-size:10px;font-weight:900;line-height:1.1;letter-spacing:.04em;color:#f9eefc}.spell-cost{position:absolute;top:3px;right:4px;font-size:9px;font-weight:900;font-variant-numeric:tabular-nums;color:#ead0ff;background:#211932a8;border-radius:5px;padding:1px 3px}.spell-key{position:absolute;top:4px;left:5px;font-size:9px;color:#b3a0cb}.scene-overlay{position:absolute;z-index:15;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 15px calc(20px + env(safe-area-inset-bottom,0px));background:radial-gradient(ellipse at 48% 42%,#321955b0,#080614f0);text-align:center;overflow-y:auto}.hidden{display:none!important}.intro-content,.result-content{width:min(560px,100%);margin:auto;position:relative}.intro-mark{font-size:12px;letter-spacing:.45em;color:#e6c8ff;font-weight:700;margin-bottom:15px}.intro-hero{height:128px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:9px;filter:drop-shadow(0 0 19px #ad68f266)}.intro-hero img{height:100%;width:auto;object-fit:contain;image-rendering:pixelated}.intro-kicker,.result-top{font-size:11px;letter-spacing:.22em;color:#cab5e9;font-weight:800}h1,h2,p{margin:0}h1{font-family:Georgia,serif;font-size:clamp(53px,10vw,84px);line-height:.88;letter-spacing:.02em;color:#f5e8ff;text-shadow:0 7px 28px #aa67de66;margin:13px 0 23px;font-weight:900}h1 span{color:#bc8fe7;letter-spacing:.12em}.intro-rule{font-size:17px;font-weight:900;color:#f8eefc;margin-bottom:8px}.intro-content p{color:#c9b5d7;font-size:12px;margin-bottom:23px}.primary-button{border:1px solid #f7d4ff;border-radius:12px;min-height:53px;padding:0 24px;background:linear-gradient(135deg,#d5a6ff,#a878eb 55%,#8864da);color:#21132e;box-shadow:0 6px #503775,0 12px 29px #07041880;font-size:15px;font-weight:950;letter-spacing:.05em;display:inline-flex;align-items:center;justify-content:center;gap:14px}.primary-button:active{transform:translateY(4px);box-shadow:0 2px #503775,0 6px 18px #07041880}.primary-button span{font-size:20px}.intro-help{margin-top:26px;font-size:10px;line-height:1.8;color:#a793c3;letter-spacing:.02em}.result-top{color:#caa3d7}.result-content h2{font-family:Georgia,serif;color:#f3ddff;font-size:clamp(39px,9vw,72px);letter-spacing:.05em;margin:10px 0 20px}.result-value{display:flex;align-items:baseline;justify-content:center;gap:12px}.result-value b{font-size:clamp(65px,17vw,105px);font-weight:950;color:#efc6ff;line-height:1;font-variant-numeric:tabular-nums}.result-value span{font-size:20px;color:#ccb5df;font-weight:900}.result-content p{color:#e1ceee;font-size:14px;margin:10px 0}.best-label{color:#d9b9ed;font-size:12px;font-weight:900;letter-spacing:.1em;margin:25px 0}.best-label span{font-size:19px;color:#f6d5f9}.result-content .primary-button{margin-bottom:25px}.text-button{display:block;margin:auto;background:none;border:0;color:#c6aedb;padding:9px 19px;text-decoration:underline;text-underline-offset:5px}#drawer-backdrop{position:absolute;z-index:20;inset:0;background:#04030ead;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.drawer{position:absolute;z-index:21;top:0;bottom:0;right:0;width:min(392px,100vw);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:linear-gradient(165deg,#221833,#110f22 63%,#16102c);border-left:1px solid #806497;box-shadow:-15px 0 48px #080415aa;padding:calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-right,0px) + 21px) calc(env(safe-area-inset-bottom,0px) + 21px) 22px;animation:open-drawer .22s ease-out}@keyframes open-drawer{0%{transform:translate(40%);opacity:.6}to{transform:translate(0);opacity:1}}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.drawer-head .icon-button{min-width:40px;min-height:40px}.drawer-eyebrow{color:#bea0e3;font-size:10px;letter-spacing:.23em;font-weight:900}.drawer-head h2{margin:7px 0 0;font-size:23px;letter-spacing:.02em;color:#faf0ff}.drawer-guide{font-size:11px;line-height:1.75;color:#cdbbd9;margin:15px 0 21px}.slot-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.slot-option{height:70px;padding:5px;border:1px solid #655378;border-radius:10px;background:#221b38;color:#ece3fc;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.slot-option.active{border-color:#d6a8ff;background:#34234e;box-shadow:inset 0 0 0 1px #c59ef399}.slot-option .slot-name{font-size:10px;white-space:nowrap;font-weight:800}.slot-option .slot-number{font-size:9px;color:#b49acb}.drawer-divider{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #5e4b74;margin-top:24px;padding:18px 1px 12px;font-size:11px;letter-spacing:.08em;color:#e2c9f7;font-weight:900}.drawer-divider span:last-child{color:#8671a9;font-size:10px}.spell-catalog{display:flex;flex-direction:column;gap:7px}.catalog-spell{width:100%;display:flex;align-items:center;text-align:left;gap:11px;min-height:66px;padding:9px 10px;background:#211930;border:1px solid #55456c;border-radius:10px;color:#f2eafd;transition:background .12s,border-color .12s}.catalog-spell.active{background:#382450;border-color:#caa2ed}.catalog-spell:active{background:#4c2d65}.catalog-icon{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:8px;background:#100e25;color:var(--spell-color);font-size:27px;text-shadow:0 0 8px var(--spell-color)}.catalog-text{flex:1;min-width:0}.catalog-title{font-weight:900;font-size:13px}.catalog-detail{font-size:10px;color:#bca8cd;line-height:1.4;margin-top:4px}.catalog-cost{align-self:flex-start;color:#eccaff;font-size:11px;font-weight:900;white-space:nowrap;margin-top:4px}.drawer-done{width:100%;margin-top:18px;margin-bottom:10px}@media(min-width:900px){#joystick{left:34px;bottom:29px}.spell-area{right:33px;bottom:30px}.spell-grid{grid-template-columns:repeat(2,76px);grid-template-rows:repeat(2,76px);gap:10px}.spell-icon{font-size:32px}.stick-ring{width:123px;height:123px}#joystick{width:135px;height:139px}.stick-ring #stick-knob{top:39px;left:39px;width:45px;height:45px}}@media(max-height:600px){#hud{padding-top:calc(env(safe-area-inset-top,0px) + 11px)}.scene-overlay{padding-top:15px;padding-bottom:15px}.intro-hero{height:66px}.intro-mark{margin-bottom:5px}.intro-kicker{font-size:9px}h1{font-size:clamp(39px,9vw,61px);margin:8px 0 12px}.intro-rule{font-size:14px}.intro-content p{margin-bottom:12px}.primary-button{min-height:42px}.intro-help{margin-top:13px}.spell-grid{grid-template-columns:repeat(2,57px);grid-template-rows:repeat(2,57px);gap:7px}.spell-icon{font-size:24px}#joystick{transform:scale(.85);transform-origin:bottom left}.spell-area{bottom:12px}.drawer{padding-top:13px}.drawer-head h2{font-size:20px}.drawer-guide{margin:8px 0 13px}.slot-option{height:57px}.catalog-spell{min-height:56px}}@media(max-width:355px){#joystick{transform:scale(.86);transform-origin:bottom left;left:10px}.spell-area{right:11px}.spell-grid{grid-template-columns:repeat(2,60px);grid-template-rows:repeat(2,60px);gap:6px}.spell-icon{font-size:25px}.intro-help{font-size:9px}#hud{padding-left:12px;padding-right:12px}}@media(prefers-reduced-motion:reduce){.drawer,.primary-button,.spell-button,#mp-fill{animation:none;transition:none}}.on-title #hud,.on-title #touch-controls,.on-dead #hud,.on-dead #touch-controls{opacity:0;pointer-events:none}