:root{--bg-panel: rgba(12, 16, 28, .88);--bg-panel-light: rgba(28, 36, 56, .9);--border: rgba(110, 160, 255, .25);--border-strong: rgba(110, 160, 255, .55);--text: #dce6f5;--text-dim: #8fa0bd;--accent: #5b8def;--accent-ice: #7ad8ff;--gold: #ffd24a;--hp: #22c55e;--hp-low: #ef4444;--xp: #a78bfa;font-size:15px}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:#0a0e18;font-family:Segoe UI,system-ui,sans-serif;color:var(--text);user-select:none}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#ui-root{position:absolute;inset:0;pointer-events:none}#ui-root>*{pointer-events:auto}#ui-root>.hud,#ui-root>.dmg-layer{pointer-events:none}button{font-family:inherit;cursor:pointer;border:1px solid var(--border-strong);background:var(--bg-panel-light);color:var(--text);border-radius:8px;padding:8px 14px;font-size:.95rem;transition:all .12s}button:hover:not(:disabled){background:#4664aaa6;border-color:var(--accent-ice);transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:linear-gradient(160deg,#2a5add,#1a3a9d);border-color:var(--accent-ice);font-weight:600}button.danger{border-color:#ff646480}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 30%,#141e3c8c,#050810eb);z-index:50}.screen.transparent{background:radial-gradient(ellipse at 50% 30%,#0a0f1e59,#050810bf)}.game-title{font-size:3.6rem;font-weight:800;letter-spacing:.06em;background:linear-gradient(180deg,#fff,#7ad8ff 55%,#3a6aff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(122,216,255,.35);text-align:center}.game-subtitle{font-size:1.15rem;color:var(--text-dim);margin-top:-10px;letter-spacing:.2em;text-transform:uppercase}.menu-buttons{display:flex;flex-direction:column;gap:10px;min-width:280px;margin-top:16px}.menu-buttons button{padding:13px 22px;font-size:1.05rem}.volume-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:12px 18px;display:flex;flex-direction:column;gap:10px;min-width:320px}.vol-row{display:flex;align-items:center;gap:10px}.vol-label{width:150px;font-size:.9rem;color:var(--text-dim)}.vol-value{width:44px;text-align:right;font-size:.85rem;color:var(--gold)}.volume-panel input[type=range]{flex:1;appearance:none;height:6px;border-radius:3px;background:#ffffff24;outline:none;cursor:pointer}.volume-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-ice);border:2px solid #fff;box-shadow:0 0 8px #7ad8ff99}.volume-panel input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-ice);border:2px solid #fff}.jukebox-btn{position:absolute;right:26px;bottom:26px;width:64px;height:64px;border-radius:50%;font-size:2rem;display:flex;align-items:center;justify-content:center;background:var(--bg-panel);border:1px solid var(--border-strong);box-shadow:0 6px 22px #00000073,0 0 18px #7ad8ff26;padding:0}.jukebox-btn:hover{transform:scale(1.08)!important}.jukebox-btn.spinning{animation:disc-spin 2.4s linear infinite}@keyframes disc-spin{0%{rotate:0deg}to{rotate:360deg}}.jukebox-list{display:flex;flex-direction:column;gap:6px;min-width:380px}.jukebox-row{display:flex;align-items:center;gap:12px;background:var(--bg-panel-light);border:1px solid var(--border);border-radius:10px;padding:8px 12px}.jukebox-row.playing{border-color:var(--gold);box-shadow:0 0 12px #ffd24a40;background:#3c462859}.jukebox-row .jb-play{width:42px;height:42px;font-size:1.1rem;padding:0;border-radius:50%}.jukebox-row .jb-info{flex:1}.jukebox-row .jb-title{font-weight:600;font-size:.95rem}.jukebox-row.playing .jb-title{color:var(--gold)}.jukebox-row .jb-sub{font-size:.76rem;color:var(--text-dim)}.jukebox-row .jb-part{font-size:.8rem;color:var(--accent-ice);min-width:76px;text-align:right}.screen h2{font-size:1.8rem;color:var(--accent-ice)}.screen .panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:22px 28px;max-width:min(720px,92vw);max-height:78vh;overflow-y:auto}.results-grid{display:grid;grid-template-columns:auto auto;gap:8px 26px;font-size:1.1rem;margin:12px 0}.results-grid .value{color:var(--gold);font-weight:700;text-align:right}.xp-bar-wrap{width:100%;height:14px;background:#ffffff14;border-radius:7px;overflow:hidden;margin:10px 0}.xp-bar{height:100%;background:linear-gradient(90deg,#7c5ce0,#a78bfa);border-radius:7px;transition:width .6s ease-out}.hud{position:absolute;inset:0;pointer-events:none}.hud>*{pointer-events:auto}.hud-top{position:absolute;top:10px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.battle-info{background:var(--bg-panel);border:1px solid var(--border);padding:5px 18px;border-radius:20px;font-size:.95rem;letter-spacing:.03em;white-space:nowrap}.battle-info .zone-name{color:var(--accent-ice);font-weight:600}.turn-order{display:flex;gap:5px}.turn-chip{width:40px;height:46px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.15rem;position:relative;opacity:.75}.turn-chip.active{border-color:var(--gold);opacity:1;box-shadow:0 0 12px #ffd24a66;transform:scale(1.1)}.turn-chip.dead{opacity:.25;filter:grayscale(1)}.turn-chip .mini-hp{width:80%;height:3px;background:#ffffff26;border-radius:2px;margin-top:3px}.turn-chip .mini-hp>div{height:100%;background:var(--hp);border-radius:2px}.turn-chip.enemy .mini-hp>div{background:var(--hp-low)}.hud-corner-tr{position:absolute;top:10px;right:12px;display:flex;gap:6px}.hud-corner-tr button{padding:6px 10px;font-size:1rem}.hero-card{position:absolute;left:12px;top:12px;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;width:240px}.hero-card .name{font-weight:700;font-size:1.1rem;color:var(--accent-ice);display:flex;justify-content:space-between}.hero-card .name .level{color:var(--gold)}.bar-wrap{width:100%;height:16px;background:#ffffff14;border-radius:8px;overflow:hidden;margin-top:6px;position:relative}.bar-wrap .bar{height:100%;border-radius:8px;transition:width .3s}.bar-wrap .bar.hp{background:linear-gradient(90deg,#16a34a,#4ade80)}.bar-wrap .bar.hp.low{background:linear-gradient(90deg,#dc2626,#f87171)}.bar-wrap .bar.xp{background:linear-gradient(90deg,#7c5ce0,#a78bfa)}.bar-wrap .bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}.hero-card .conditions{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.cond-chip{font-size:.78rem;padding:2px 7px;border-radius:10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);cursor:help}.hero-card .gold-line{margin-top:8px;color:var(--gold);font-size:.92rem}.enemy-inspect{position:absolute;left:12px;top:215px;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;width:270px;display:none;max-height:46vh;overflow-y:auto}.enemy-inspect.visible{display:block}.enemy-inspect .e-name{font-weight:700;color:#ff9a9a;font-size:1.02rem}.enemy-inspect .e-stats{display:flex;gap:12px;margin:6px 0;font-size:.88rem;color:var(--text-dim)}.enemy-inspect .e-adj{margin-top:6px;padding:6px 8px;background:#7ad8ff12;border-left:3px solid var(--accent-ice);border-radius:4px;font-size:.84rem}.enemy-inspect .e-adj b{color:var(--accent-ice)}.enemy-inspect .e-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.enemy-inspect .tag{font-size:.74rem;padding:1px 7px;border-radius:9px;background:#ffffff14}.tag.resist{color:#9ad8ff}.tag.vuln{color:#ffb09a}.tag.immune{color:#d8b6ff}.combat-log{position:absolute;right:12px;top:64px;width:300px;max-height:38vh;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:10px 12px;overflow-y:auto;font-size:.84rem;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin}.combat-log .log-line{line-height:1.35}.log-line.title{color:var(--gold);font-weight:700}.log-line.hit{color:#ffd8a8}.log-line.crit{color:#ff8787;font-weight:700}.log-line.miss{color:var(--text-dim)}.log-line.damage{color:#ffa8a8}.log-line.heal{color:#8ce99a}.log-line.death{color:#ff6b6b;font-weight:600}.log-line.condition{color:#d0bfff}.log-line.special{color:#99e9f2}.log-line.ability{color:#74c0fc;font-weight:600}.log-line.roll{color:#6a7a96;font-size:.78rem}.log-line.info{color:var(--text-dim)}.action-dock{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;align-items:flex-end;gap:10px}.action-bar,.potion-bar{display:flex;gap:6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:14px;padding:8px}.ability-btn{width:58px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;position:relative;font-size:1.45rem;padding:2px}.ability-btn .ab-label{font-size:.56rem;line-height:1.05;text-align:center;color:var(--text-dim)}.ability-btn .hotkey{position:absolute;top:2px;left:5px;font-size:.62rem;color:var(--text-dim)}.ability-btn .cd-badge{position:absolute;top:2px;right:4px;font-size:.7rem;font-weight:700;color:var(--gold)}.ability-btn.selected{border-color:var(--gold);box-shadow:0 0 14px #ffd24a73;background:#5a461480}.ability-btn.oncooldown{opacity:.38}.potion-btn{width:50px;height:64px;font-size:1.3rem;position:relative}.potion-btn .count{position:absolute;bottom:2px;right:5px;font-size:.72rem;font-weight:700;color:var(--gold)}.end-turn-btn{height:80px;padding:0 18px;font-size:1rem;font-weight:700;border-radius:14px}.action-hint{position:absolute;bottom:104px;left:50%;transform:translate(-50%);background:var(--bg-panel);border:1px solid var(--border);padding:5px 16px;border-radius:16px;font-size:.9rem;color:var(--accent-ice);white-space:nowrap}.attack-preview{position:absolute;background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:10px;padding:7px 12px;font-size:.86rem;pointer-events:none;z-index:30;white-space:nowrap}.attack-preview .hitchance{color:var(--gold);font-weight:700}.dmg-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:20}.dmg-number{position:absolute;font-weight:800;font-size:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.5);animation:dmg-float 1.25s ease-out forwards;transform:translate(-50%);white-space:nowrap}.dmg-number.big{font-size:2.3rem}.dmg-number.crit{animation:dmg-crit 1.25s ease-out forwards}.dmg-number.heal{color:#4ade80}.dmg-number.miss,.dmg-number.dodge{color:#aab4cc;font-size:1.1rem;font-style:italic}.dmg-number.condition{font-size:1rem;color:#d0bfff}.dmg-number.rage{color:#ff6b6b;font-size:1.2rem}.dmg-number.ability-name{color:#74c0fc;font-size:1.05rem}@keyframes dmg-float{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}12%{opacity:1;transform:translate(-50%) scale(1.15)}25%{transform:translate(-50%,-8px) scale(1)}to{opacity:0;transform:translate(-50%,-64px) scale(.92)}}@keyframes dmg-crit{0%{opacity:0;transform:translate(-50%,10px) scale(.5) rotate(-6deg)}14%{opacity:1;transform:translate(-50%,-4px) scale(1.5) rotate(3deg)}30%{transform:translate(-50%,-12px) scale(1.2) rotate(0)}to{opacity:0;transform:translate(-50%,-80px) scale(1)}}.modal-backdrop{position:absolute;inset:0;background:#04060cb8;display:flex;align-items:center;justify-content:center;z-index:60}.modal{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:16px;padding:24px 28px;max-width:min(640px,92vw);max-height:84vh;overflow-y:auto;box-shadow:0 18px 60px #0009}.modal h3{color:var(--accent-ice);font-size:1.4rem;margin-bottom:12px}.modal .modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}.levelup-banner{font-size:2rem;font-weight:800;text-align:center;background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}.unlock-item{margin:8px 0;padding:9px 12px;background:#ffd24a14;border-left:3px solid var(--gold);border-radius:6px;font-size:.94rem}.unlock-item b{color:var(--gold)}.asi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.asi-grid button{padding:10px 6px;font-size:.92rem}.asi-grid button.picked{border-color:var(--gold);background:#785a1466}.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.shop-item{display:flex;align-items:center;gap:10px;background:var(--bg-panel-light);border:1px solid var(--border);border-radius:10px;padding:10px}.shop-item .icon{font-size:1.6rem}.shop-item .info{flex:1}.shop-item .info .title{font-weight:600;font-size:.92rem}.shop-item .info .desc{font-size:.78rem;color:var(--text-dim)}.shop-item button{padding:6px 10px;font-size:.84rem;white-space:nowrap}.shop-item .owned{font-size:.76rem;color:var(--accent-ice)}.bestiary-tabs{display:flex;gap:8px;margin-bottom:12px}.bestiary-body{display:flex;gap:14px;align-items:flex-start}.bestiary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;flex:1;max-height:56vh;overflow-y:auto;scrollbar-width:thin;padding-right:4px}.bestiary-viewer{width:292px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;align-items:center;position:sticky;top:0}.bv-canvas{width:280px;height:320px;border:1px solid var(--border-strong);border-radius:12px;background:radial-gradient(ellipse at 50% 30%,#28375a80,#080c16cc)}.bv-caption{font-size:.9rem;color:var(--accent-ice);text-align:center;min-height:1.2em}.bestiary-card.viewable{cursor:pointer;transition:border-color .12s,transform .12s}.bestiary-card.viewable:hover{border-color:var(--accent-ice);transform:translateY(-1px)}.bestiary-card.selected{border-color:var(--gold);box-shadow:0 0 10px #ffd24a4d}@media(max-width:860px){.bestiary-body{flex-direction:column}.bestiary-viewer{width:100%}}.bestiary-card{background:var(--bg-panel-light);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:.82rem}.bestiary-card.locked{opacity:.35}.bestiary-card .b-name{font-weight:600;color:var(--accent-ice)}.bestiary-card .b-sub{color:var(--text-dim);font-size:.74rem}.bestiary-counter{color:var(--gold);font-size:.95rem;margin-bottom:8px}.help-section{margin:10px 0;font-size:.92rem;line-height:1.5}.help-section b{color:var(--accent-ice)}.kbd{display:inline-block;padding:1px 7px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);border-radius:5px;font-size:.8rem;font-family:monospace}.toast-wrap{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:70;display:flex;flex-direction:column;gap:6px;pointer-events:none}.toast{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:10px;padding:9px 20px;font-size:.95rem;animation:toast-in .25s ease-out,toast-out .4s ease-in 2.4s forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}@media(max-width:860px){:root{font-size:13px}.combat-log{width:220px;max-height:26vh}.hero-card{width:200px}.enemy-inspect{width:220px;top:190px}.ability-btn{width:48px;height:56px;font-size:1.2rem}}.fade-in{animation:fadein .35s ease-out}@keyframes fadein{0%{opacity:0}}