:root{--bg:#07040f;--panel:#120a20db;--panel-edge:#3b2566;--panel-hi:#6a4bb0;--text:#efe7ff;--muted:#a898c8;--gold:#ffd166;--accent:#b84dff;--pixel:"Press Start 2P", monospace;--pixel2:"Silkscreen", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--pixel2);-webkit-font-smoothing:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}canvas.pixel,img.pixel{image-rendering:pixelated}button{font:inherit;color:inherit}input{font-family:var(--pixel2)}.screen{position:fixed;inset:0;overflow:hidden}.backdrop,.game-canvas{image-rendering:pixelated;display:block;position:absolute;inset:0}.game-canvas{cursor:none}.letterbox{z-index:1;background:#000;height:9vh;position:absolute;left:0;right:0}.letterbox.top{animation:1.6s ease-out both bars-in;top:0}.letterbox.bottom{animation:1.6s ease-out both bars-in;bottom:0}@keyframes bars-in{0%{height:50vh}}.title-content{z-index:2;flex-direction:column;justify-content:flex-start;align-items:center;gap:7vh;padding-top:16vh;display:flex;position:absolute;inset:0}.logo{text-align:center;animation:2.4s ease-out .6s both logo-in}@keyframes logo-in{0%{opacity:0;filter:blur(6px);transform:translateY(-18px)scale(1.05)}}.logo-sub{font-family:var(--pixel2);letter-spacing:.3em;color:#d9c4ff;text-shadow:0 0 12px #b84dff;font-size:clamp(10px,1.4vw,16px)}.logo-main{font-family:var(--pixel);color:#fff;letter-spacing:.06em;text-shadow:0 4px #7c3aed,0 8px #3b1a78,0 0 40px #b84dffe6,0 0 90px #5ac8ff80;margin:18px 0 0;font-size:clamp(34px,7.5vw,104px);animation:5s ease-in-out infinite shimmer}@keyframes shimmer{50%{text-shadow:0 4px #7c3aed,0 8px #3b1a78,0 0 60px #b84dff,0 0 120px #5ac8ffb3}}.press-start{font-family:var(--pixel);color:var(--gold);text-shadow:0 0 10px #ffd166cc;font-size:clamp(12px,1.4vw,18px);animation:1s 2.4s both logo-in}.blink{animation:1s 2.4s both logo-in,1.2s steps(2,end) 3.4s infinite blink}@keyframes blink{50%{opacity:0}}.menu{flex-direction:column;align-items:center;gap:14px;display:flex}.menu-note{color:var(--muted)}.credits{text-align:center;z-index:3;color:#6f5f94;letter-spacing:.2em;width:100%;font-size:11px;position:absolute;bottom:3vh}.fade-in{animation:.6s ease-out both fade-in}.fade-in-slow{animation:2.4s ease-out .8s both fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}}.px-btn{font-family:var(--pixel);cursor:pointer;background:#1b1030;border:none;flex-direction:column;align-items:center;gap:8px;min-width:300px;padding:14px 26px;font-size:13px;transition:transform 80ms,filter .15s;display:flex;box-shadow:inset -3px -3px #0c0618,inset 3px 3px #4a3380,0 0 0 3px #0c0618}.px-btn small{font-family:var(--pixel2);color:var(--muted);font-size:12px}.px-btn:hover:not(:disabled){filter:brightness(1.25);transform:translateY(-2px)}.px-btn:active:not(:disabled){transform:translateY(1px)}.px-btn.primary{background:#5b2bb0;box-shadow:inset -3px -3px #2e1466,inset 3px 3px #9b6cff,0 0 0 3px #0c0618,0 0 24px #9b6cff80}.px-btn:disabled{opacity:.5;cursor:default}.link-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;margin-top:10px}.error{color:#ff7a8a;margin-top:6px;font-size:13px}.panel{background:var(--panel);box-shadow:inset -2px -2px 0 #0c0618, inset 2px 2px 0 var(--panel-edge), 0 0 0 2px #0c0618}.create-screen{justify-content:center;align-items:center;display:flex}.create-panel{z-index:2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0c0618d1;width:min(760px,94vw);max-height:94vh;padding:24px 28px;position:relative;overflow:auto;box-shadow:inset -3px -3px #0c0618,inset 3px 3px #3b2566,0 0 0 3px #0c0618,0 20px 80px #000000b3}.panel-title{font-family:var(--pixel);text-align:center;color:var(--gold);text-shadow:0 0 12px #ffd16699;margin:0 0 20px;font-size:18px}.schools{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.school-card{cursor:pointer;background:#140b26;border:none;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;font-size:12px;transition:transform .1s,box-shadow .2s;display:flex;box-shadow:inset -2px -2px #0c0618,inset 2px 2px #2c1c4d}.school-card:hover{transform:translateY(-2px)}.school-card.selected{box-shadow:inset -2px -2px 0 #0c0618, inset 2px 2px 0 var(--accent), 0 0 0 2px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);background:#221340}.school-detail{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);background:#0f081d;margin-top:18px;padding:14px 16px}.school-detail h3{font-family:var(--pixel);color:var(--accent);text-shadow:0 0 10px var(--accent);margin:0;font-size:16px}.school-title{color:var(--muted);margin-top:6px;font-size:12px}.lore{color:#d6ccef;font-size:13px;font-style:italic;line-height:1.6}.spell-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.spell-list li{align-items:center;gap:10px;font-size:12px;display:flex}.spell-list img{width:32px;height:32px}.spell-list b{color:#fff;display:block}.spell-list span{color:var(--muted)}.name-row{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.name-row input{color:#fff;background:#07040f;border:none;outline:none;flex:1;min-width:200px;padding:12px 14px;font-size:16px;box-shadow:inset 2px 2px #0c0618,inset -2px -2px #3b2566}.name-row input:focus{box-shadow:inset 2px 2px #0c0618,inset -2px -2px #9b6cff,0 0 0 2px #9b6cff}.name-row .px-btn{min-width:0}.loading{font-family:var(--pixel);color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.hud{pointer-events:none;opacity:0;transition:opacity 1.2s;position:absolute;inset:0}.hud.visible{opacity:1}.hud .panel,.hud .action-bar,.hud .help{pointer-events:auto}.player-frame{gap:12px;width:330px;padding:10px 12px;display:flex;position:absolute;top:14px;left:14px}.portrait{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), #0b0616 70%);place-items:center;width:56px;height:64px;display:grid;position:relative;box-shadow:inset 0 0 0 2px #0c0618}.portrait canvas{width:40px;height:56px}.portrait .lvl{font-family:var(--pixel);background:#5b2bb0;padding:4px 5px;font-size:10px;position:absolute;bottom:-6px;right:-6px;box-shadow:0 0 0 2px #0c0618}.frame-bars{flex-direction:column;flex:1;gap:5px;display:flex}.frame-name{font-size:13px}.frame-name small{color:var(--muted)}.bar{background:#0b0616;height:14px;position:relative;overflow:hidden;box-shadow:0 0 0 2px #0c0618}.bar-fill{height:100%;transition:width .2s linear;box-shadow:inset 0 3px #ffffff40,inset 0 -3px #00000040}.bar.hp .bar-fill{background:#d62d45}.bar.mana .bar-fill{background:#2f6fd8;transition:none}.bar.xp{height:10px}.bar.xp .bar-fill{background:#9b6cff}.bar-label{text-shadow:1px 1px #000,-1px -1px #000;place-items:center;font-size:10px;display:grid;position:absolute;inset:0}.target-frame{text-align:center;flex-direction:column;gap:6px;width:280px;padding:8px 12px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.target-frame.boss{width:420px;box-shadow:inset -2px -2px #0c0618,inset 2px 2px #ff9a2a,0 0 0 2px #0c0618,0 0 24px #ff9a2a66}.bar.enemy .bar-fill{background:#b8232f}.minimap-panel{pointer-events:auto;background:var(--panel);box-shadow:inset -2px -2px 0 #0c0618, inset 2px 2px 0 var(--panel-edge), 0 0 0 2px #0c0618;padding:6px;position:absolute;top:14px;right:14px}.minimap{width:150px;height:150px;display:block}.mini-info{color:var(--muted);text-align:center;flex-direction:column;gap:3px;margin-top:6px;font-size:11px;display:flex}.action-bar{background:var(--panel);box-shadow:inset -2px -2px 0 #0c0618, inset 2px 2px 0 var(--panel-edge), 0 0 0 2px #0c0618;gap:10px;padding:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.slot{width:56px;height:56px;position:relative;box-shadow:0 0 0 2px #0c0618}.slot img{width:100%;height:100%;display:block}.slot .cd{background:conic-gradient(#05020cc7 var(--cd), transparent 0);position:absolute;inset:0}.slot.oom img{filter:grayscale(.8)brightness(.6)}.slot .key{font-size:9px;font-family:var(--pixel2);white-space:nowrap;background:#0c0618;padding:1px 4px;position:absolute;top:-8px;left:50%;transform:translate(-50%)}.slot .cost{color:#8ab4ff;text-shadow:1px 1px #000;font-size:10px;position:absolute;bottom:1px;right:3px}.chat{background:#0c061899;width:360px;padding:8px;font-size:12px;position:absolute;bottom:14px;left:14px}.chat-log{scrollbar-width:thin;-webkit-user-select:text;user-select:text;flex-direction:column;gap:3px;height:150px;padding-right:4px;line-height:1.35;display:flex;overflow-y:auto}.chat-log .sys{color:#c9a7ff}.chat input{color:#fff;background:#05020ccc;border:none;outline:none;width:100%;margin-top:6px;padding:7px 8px;box-shadow:inset 0 0 0 2px #2c1c4d}.chat input:focus{box-shadow:inset 0 0 0 2px #9b6cff}.help{color:var(--muted);font-size:11px;position:absolute;bottom:14px;right:14px}.help-panel{color:var(--text);flex-direction:column;gap:5px;padding:12px 14px;display:flex}.help-panel b{font-family:var(--pixel);color:var(--gold);margin-bottom:4px;font-size:11px}.help-panel small{color:var(--muted);max-width:220px;margin-top:4px}.death-screen{z-index:5;background:radial-gradient(#3c001440,#0009);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.death-screen h1{font-family:var(--pixel);color:#ff4d6a;text-shadow:0 4px #5a0a1a,0 0 40px #ff2850cc;letter-spacing:.08em;margin:0;font-size:clamp(24px,5vw,60px)}.death-screen p{color:#d9c4d0;margin:0 0 12px}.setup{text-align:center;height:100%;font-family:var(--pixel2);place-content:center;gap:8px;padding:20px;display:grid}.setup h1{font-family:var(--pixel);color:#fff;text-shadow:0 0 30px #b84dff}.setup code{color:var(--gold);background:#1b1030;padding:2px 6px}@media (width<=760px){.schools{grid-template-columns:repeat(2,1fr)}.chat{width:240px}.chat-log{height:90px}.player-frame{width:260px}.minimap-panel{transform-origin:100% 0;transform:scale(.75)}.px-btn{min-width:0}}.dialogue{width:min(860px,92vw);box-shadow:inset -3px -3px 0 #0c0618, inset 3px 3px 0 color-mix(in srgb, var(--accent) 55%, #2c1c4d), 0 0 0 3px #0c0618, 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);z-index:6;cursor:pointer;background:#0a0514eb;gap:16px;padding:14px 18px;animation:.25s ease-out both dialogue-in;display:flex;position:absolute;bottom:calc(12vh + 18px);left:50%;transform:translate(-50%)}@keyframes dialogue-in{0%{opacity:0;transform:translate(-50%,10px)}}.dialogue-portrait{background:radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 45%, transparent), #07040f 75%);width:92px;height:92px;box-shadow:inset 0 0 0 2px #0c0618, 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);flex:none;place-items:end center;display:grid;overflow:hidden}.dialogue-portrait canvas{width:80px;height:auto}.dialogue.lillith .dialogue-portrait canvas{width:88px}.dialogue-body{flex:1;min-height:84px;position:relative}.dialogue-name{font-family:var(--pixel);color:var(--accent);text-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);font-size:13px}.dialogue-name small{font-family:var(--pixel2);color:var(--muted);text-shadow:none;margin-left:8px;font-size:11px}.dialogue-body p{color:#f4ecff;margin:10px 0 0;font-size:16px;line-height:1.5}.dialogue-next{color:var(--accent);font-size:11px;position:absolute;bottom:-4px;right:0}.dialogue-next.ready{animation:.9s steps(2,end) infinite blink}.objective{width:280px;padding:10px 12px;font-size:12px;animation:.5s ease-out both objective-in;position:absolute;top:118px;left:14px}@keyframes objective-in{0%{opacity:0;transform:translate(-20px);box-shadow:0 0 40px #ffd166}}.objective-head{font-family:var(--pixel);color:var(--gold);letter-spacing:.04em;margin-bottom:8px;font-size:9px}.objective-text{line-height:1.5}.objective-text .diamond,.objective-text b{color:var(--gold)}.objective-skip{color:var(--muted);margin-top:8px;font-size:11px}.link-btn.danger{color:#ff7a8a}.skill-point-btn{pointer-events:auto;font-family:var(--pixel2);cursor:pointer;color:var(--gold);background:#3a2400;border:none;padding:7px 14px;font-size:13px;animation:1.6s ease-in-out infinite pulse-gold;position:absolute;bottom:96px;left:50%;transform:translate(-50%);box-shadow:inset -2px -2px #1a1000,inset 2px 2px #c28a1e,0 0 0 2px #0c0618,0 0 18px #ffd16680}.skill-point-btn small{color:#c9a45a}@keyframes pulse-gold{50%{box-shadow:inset -2px -2px #1a1000,inset 2px 2px #c28a1e,0 0 0 2px #0c0618,0 0 32px #ffd166e6}}.skill-overlay{z-index:8;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#03010899;place-items:center;animation:.2s ease-out both fade-in;display:grid;position:absolute;inset:0}.skill-panel{background:#0c0618f5;width:min(720px,94vw);max-height:94vh;padding:18px 22px;overflow:auto}.skill-head{align-items:center;gap:16px;margin-bottom:14px;display:flex}.skill-head h2{font-family:var(--pixel);color:var(--accent);text-shadow:0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);margin:0;font-size:15px}.skill-head small{color:var(--muted)}.skill-head .points{font-family:var(--pixel);color:var(--muted);margin-left:auto;font-size:18px}.skill-head .points span{font-family:var(--pixel2);font-size:12px}.skill-head .points.has{color:var(--gold);text-shadow:0 0 12px #ffd166b3}.close-btn{cursor:pointer;color:var(--muted);background:0 0;border:none;font-size:18px}.skill-grid{grid-template-rows:auto repeat(4,76px) 90px;grid-template-columns:58px repeat(4,1fr);gap:0 8px;display:grid;position:relative}.col-head{text-align:center;color:var(--muted);border-bottom:2px solid #2c1c4d;grid-row:1;margin-bottom:8px;padding-bottom:8px;font-size:11px}.tier-row{grid-column:1;align-items:center;display:flex}.tier-label{color:#5a4a7a;font-size:10px}.tier-label.open{color:var(--gold)}.cell{place-items:center;display:grid;position:relative}.cell.linked:before{content:"";background:#2c1c4d;width:4px;height:24px;position:absolute;top:-22px;left:calc(50% - 2px)}.capstone-cell{border-top:2px dashed #2c1c4d;justify-content:center;gap:14px;margin-top:6px;display:flex}.skill-node{cursor:pointer;background:#0b0616;border:none;width:52px;height:52px;padding:0;transition:transform 80ms,box-shadow .15s,filter .15s;position:relative;box-shadow:0 0 0 2px #0c0618,0 0 0 4px #2c1c4d}.skill-node img{width:100%;height:100%;display:block}.skill-node.capstone{width:62px;height:62px}.skill-node.locked img{filter:grayscale()brightness(.45)}.skill-node.partial{box-shadow:0 0 0 2px #0c0618, 0 0 0 4px color-mix(in srgb, var(--accent) 60%, #2c1c4d)}.skill-node.learnable{box-shadow:0 0 0 2px #0c0618, 0 0 0 4px var(--gold), 0 0 16px #ffd16699}.skill-node.learnable:hover{transform:translateY(-2px)scale(1.05)}.skill-node.maxed{box-shadow:0 0 0 2px #0c0618, 0 0 0 4px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent)}.skill-node .rank{color:var(--text);background:#0c0618;padding:1px 4px;font-size:10px;position:absolute;bottom:-8px;right:-8px;box-shadow:0 0 0 1px #2c1c4d}.skill-node.maxed .rank{color:var(--accent)}.skill-info{background:#0b0616;min-height:74px;margin-top:16px;padding:10px 12px;font-size:13px;box-shadow:inset 0 0 0 2px #1f1438}.skill-info b{color:#fff}.skill-info b small{color:var(--muted);margin-left:8px}.skill-info p{color:#d6ccef;margin:6px 0 0;line-height:1.5}.skill-info em{color:#ff9a2a;margin-top:6px;font-style:normal;display:block}.muted{color:var(--muted)}.skill-foot{justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;display:flex}.skill-foot .link-btn{margin-top:0}@media (width<=760px){.dialogue-portrait{width:64px;height:64px}.dialogue-body p{font-size:13px}.objective{width:220px;top:auto;bottom:190px}.skill-node{width:40px;height:40px}.skill-grid{grid-template-rows:auto repeat(4,62px) 80px;grid-template-columns:40px repeat(4,1fr)}}