:root{--bg-color: #050508;--primary-color: #00ffff;--accent-color: #ff0055;--text-main: #eeeeee;--text-dim: #8899aa;--panel-bg: rgba(6, 12, 16, .95);--border-color: rgba(0, 255, 255, .2);--font-stack: "Courier New", Courier, monospace}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-stack);height:100vh;width:100vw;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}#gameCanvas,#bgCanvas{position:absolute;top:0;left:0;display:block;image-rendering:-webkit-optimize-contrast}#gameCanvas{z-index:50}#bgCanvas{z-index:10}.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#fff0,#fff0 50%,#00000026 50%,#00000026);background-size:100% 3px;pointer-events:none;z-index:999}.hidden{display:none!important}@keyframes glitch-skew{0%{transform:skew(0)}20%{transform:skew(-2deg)}40%{transform:skew(2deg)}60%{transform:skew(-1deg)}80%{transform:skew(1deg)}to{transform:skew(0)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#startScreen{position:absolute;top:0;left:0;width:100%;height:100%;background:#020202;display:flex;flex-direction:column;justify-content:space-between;z-index:200}.art-layer{position:absolute;top:0;left:0;width:100%;height:60%;background:radial-gradient(circle at 80% 20%,#1a2a3a,#000 70%);z-index:0}.void-shape{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;clip-path:polygon(0 0,40% 0,60% 100%,0 100%);z-index:1}.void-detail{position:absolute;top:10%;left:-10%;width:60%;height:80%;border-right:2px solid var(--primary-color);opacity:.3;transform:skew(-10deg);z-index:2}.title-area{position:relative;z-index:10;padding:40px 20px;text-align:right;margin-top:10%}.main-title{font-size:3.5rem;line-height:.9;color:var(--primary-color);text-shadow:3px 3px 0 var(--accent-color);animation:glitch-skew 3s infinite}.sub-title{font-size:.9rem;letter-spacing:3px;color:#666;margin-top:10px}.start-footer{z-index:10;padding:0 0 30px;background:linear-gradient(to top,#000 80%,transparent)}.start-btn{display:block;width:80%;margin:0 auto 30px;padding:18px;font-size:1.5rem;color:#000;background:var(--primary-color);border:none;font-family:inherit;font-weight:700;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);cursor:pointer;text-align:center;box-shadow:0 0 20px #0ff6;animation:fade-in-up .5s ease-out}.start-btn:active{transform:scale(.98);background:#fff}.nav-icons{display:flex;justify-content:space-evenly;padding-bottom:20px}.icon-box{color:#555;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;gap:5px}.icon-text{font-size:.6rem;text-transform:uppercase}.icon-box.active{color:var(--primary-color);text-shadow:0 0 8px var(--primary-color)}#selectionScreen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;background:#08080a;z-index:200}.header-bar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #222;background:#000c}.back-btn{font-size:1.5rem;color:#fff;padding:10px;cursor:pointer}.resources{font-size:.9rem;color:gold;font-weight:700;display:flex;gap:15px}.res-item span{color:var(--primary-color);margin-right:4px}.info-display{flex:0 0 auto;padding:10px 15px;background:linear-gradient(180deg,rgba(0,40,40,.3) 0%,transparent 100%),repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,255,255,.03) 2px);border-bottom:1px solid var(--primary-color);position:relative}.char-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}.char-name{font-size:1.5rem;color:#fff;text-shadow:0 0 10px rgba(0,255,255,.5);margin:0}.char-class-label{font-size:.7rem;color:var(--primary-color);border:1px solid var(--primary-color);padding:1px 4px;border-radius:2px}.blueprint-box{margin-bottom:8px;position:relative;padding-left:10px;border-left:2px solid #333}.blueprint-box.active{border-left-color:var(--primary-color)}.box-label{font-size:.65rem;color:var(--text-dim);margin-bottom:2px;display:block;text-transform:uppercase}.box-content{font-size:.8rem;color:var(--text-main);line-height:1.3}.highlight{color:var(--primary-color)}.highlight-red{color:var(--accent-color)}.scroll-area{flex:1;overflow-y:auto;padding:10px 15px;background:#050508}.grid-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-bottom:80px}.grid-item{aspect-ratio:1;background:#111;border:1px solid #333;border-radius:4px;display:flex;justify-content:center;align-items:center;cursor:pointer;position:relative;transition:all .1s;overflow:hidden}.grid-item img{width:80%;height:80%;object-fit:contain;transition:all .2s}.grid-item.selected{background:#0ff3;border:2px solid var(--primary-color);box-shadow:0 0 20px #00ffff80 inset,0 0 10px var(--primary-color)}.grid-item.selected img{opacity:1;transform:scale(1.15)}.grid-item.locked{opacity:.3;background:#000;cursor:not-allowed}.grid-item.locked:after{content:"🔒";position:absolute;font-size:.8rem;bottom:2px;right:2px;color:#fff}.action-footer{position:absolute;bottom:0;left:0;width:100%;padding:15px 20px;background:linear-gradient(to top,#000 90%,transparent);pointer-events:none}.confirm-btn{pointer-events:auto;width:100%;padding:15px;background:var(--text-main);color:#000;border:none;font-size:1.2rem;font-weight:700;font-family:inherit;clip-path:polygon(15px 0,100% 0,100% 100%,0 100%,0 15px);text-transform:uppercase;letter-spacing:2px;cursor:pointer}.confirm-btn:active{background:var(--primary-color)}#game-hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50}.exp-bar-container{position:absolute;top:0;left:0;width:100%;height:10px;background-color:#1e1e1ecc;border-bottom:1px solid #333;z-index:52}.exp-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary-color),#2ecc71);box-shadow:0 0 8px #0ff9;transition:width .2s ease-out}.top-info-row{position:absolute;top:15px;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:0 20px;box-sizing:border-box;z-index:51}.hud-left{display:flex;flex-direction:column;gap:5px;pointer-events:none}.level-badge{display:flex;align-items:baseline;gap:5px;text-shadow:2px 2px 2px #000}.level-badge .lvl-label{font-size:14px;color:var(--primary-color);font-weight:700}#levelValue{font-size:28px;font-weight:800;color:#fff}.kill-counter{font-size:16px;color:#ddd;text-shadow:1px 1px 2px #000;opacity:.9;background:#0000004d;padding:2px 8px;border-radius:4px}.hud-center{position:absolute;left:50%;transform:translate(-50%);top:20px;pointer-events:none}#timerValue{font-family:var(--font-stack);font-size:24px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,1);background:#0006;padding:4px 12px;border-radius:6px}.hud-right{pointer-events:auto!important;z-index:100}.hud-icon-btn{background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:24px;cursor:pointer;padding:8px 12px;transition:all .1s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.hud-icon-btn:hover{background:#fff3;transform:scale(1.05)}.hud-icon-btn:active{transform:scale(.95)}#bossHealthUIContainer{position:absolute;bottom:40px;left:50%;transform:translate(-50%);width:60%;max-width:600px;pointer-events:none;z-index:40}.boss-hp-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}.boss-hp-label{color:var(--accent-color);font-weight:700;font-size:16px;margin-bottom:4px;text-shadow:2px 2px 0 #000}.boss-hp-track{width:100%;height:16px;background:#200;border:2px solid #550000;border-radius:8px;overflow:hidden;box-shadow:0 0 10px #000c}#bossHealthBarFill{height:100%;width:100%;background:linear-gradient(90deg,var(--accent-color),#cc0000);transition:width .2s}#bossHealthValueText{font-size:12px;color:#fff;text-shadow:1px 1px 2px black;margin-top:4px}.overlay-panel{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:200;opacity:1;transition:opacity .2s}.overlay-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#111;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;z-index:300}.panel-content{background:#0a0f14f2;border:1px solid var(--border-color);border-radius:16px;padding:30px;width:85%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 0 30px #00ffff26;text-align:center;color:#eee;display:flex;flex-direction:column}.level-up-content{margin-top:-10vh}.panel-header h2{margin:0 0 10px;font-size:32px;letter-spacing:4px;color:var(--primary-color);text-shadow:0 0 10px rgba(0,255,255,.5)}.header-decoration{width:60px;height:4px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);margin:0 auto 25px}.summary-info{display:flex;justify-content:space-between;font-size:13px;color:#aaa;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);background:#0003;padding:10px;border-radius:8px}.summary-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;text-align:left;margin-bottom:25px;font-size:13px;background:#0003;padding:15px;border-radius:8px}.stat-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:4px}.stat-label{color:#bbb;display:flex;align-items:center;gap:8px}.stat-val{color:#2ecc71;font-weight:700;font-family:monospace}.inventory-section{margin-bottom:25px}.inv-row{display:flex;align-items:center;margin-bottom:10px;background:#0000004d;padding:8px 12px;border-radius:8px;min-height:40px}.inv-label{width:60px;font-size:12px;color:#aaa;text-align:left;font-weight:700}.inv-slots{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1}.item-slot{width:36px;height:36px;background:#2d2d2d;border:1px solid #444;border-radius:6px;display:flex;justify-content:center;align-items:center;font-size:20px;position:relative;box-shadow:inset 0 0 5px #00000080}.item-lvl{position:absolute;bottom:-4px;right:-4px;background:#222;color:#f1c40f;font-size:10px;font-weight:700;padding:1px 4px;border-radius:4px;border:1px solid #444}.main-action-btn{background:linear-gradient(135deg,#e0e0e0,#bdbdbd);color:#222;border:none;padding:14px 40px;font-size:18px;font-weight:800;border-radius:30px;cursor:pointer;transition:transform .1s,box-shadow .2s;width:auto;margin:0 auto;display:inline-block;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 15px #0000004d}.main-action-btn:hover{background:#fff;box-shadow:0 0 20px #fff6;transform:translateY(-2px)}.main-action-btn:active{transform:scale(.95) translateY(0)}.upgrade-list{display:flex;flex-direction:column;gap:12px}.upgrade-card{background:#1e2328cc;border:1px solid rgba(255,255,255,.1);color:#fff;padding:15px;border-radius:10px;text-align:left;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;transition:all .2s;box-shadow:0 4px 6px #0003;position:relative;overflow:hidden;gap:15px}.upgrade-card:hover{background:#28323ce6;border-color:var(--primary-color);transform:translate(5px);box-shadow:0 0 15px #0ff3}.upgrade-card.selected{border:2px solid var(--primary-color);background:#00282899;box-shadow:0 0 15px #00ffff4d inset}.icon-container{flex:0 0 64px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:transparent}.icon-container img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,255,255,.6))}.meta-container{flex:0 0 120px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}.upgrade-name{font-size:18px;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.5);line-height:1.2}.upgrade-level{font-size:14px;color:var(--primary-color);background:#00ffff1a;padding:2px 8px;border-radius:4px;border:1px solid rgba(0,255,255,.3);font-weight:700;box-shadow:0 0 5px #0ff3}.upgrade-level.new-item{color:gold;border-color:gold;background:#ffd7001a;box-shadow:0 0 5px #ffd70033}.desc-container{flex:1;text-align:left;font-size:14px;color:#ccc;line-height:1.4;padding-left:15px;border-left:1px solid rgba(255,255,255,.1);display:flex;align-items:center;min-height:50px}.mastery-option{display:flex;flex-direction:column;align-items:center;padding:20px;margin:10px;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);width:220px;text-align:center;background:#141419e6;position:relative;overflow:hidden}.mastery-option:hover{transform:translateY(-8px) scale(1.02);z-index:10}.mastery-option img{transition:transform .3s}.mastery-option:hover img{transform:scale(1.1) rotate(5deg)}.mastery-option h3{font-family:var(--font-stack);letter-spacing:1px;text-transform:uppercase;margin-top:15px;font-size:1.1rem}.mastery-option p{line-height:1.5;margin-bottom:15px}.mastery-confirm-btn{margin-top:auto;padding:8px 20px;color:#000;font-weight:700;border-radius:20px;font-size:.9em;text-transform:uppercase;letter-spacing:1px;box-shadow:0 4px 10px #0000004d;transition:all .2s}.mastery-option:hover .mastery-confirm-btn{transform:scale(1.1);box-shadow:0 0 15px currentColor}#upgradeOptions{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}#bossWarning{position:absolute;top:20%;left:50%;transform:translate(-50%);font-size:3em;color:var(--accent-color);text-shadow:0 0 20px #000;z-index:150;display:none;font-weight:900;animation:pulse .8s infinite alternate}@keyframes pulse{0%{transform:translate(-50%) scale(1);text-shadow:0 0 10px red}to{transform:translate(-50%) scale(1.1);text-shadow:0 0 30px red}}.damageNumber{position:absolute;pointer-events:none;font-weight:900;text-shadow:2px 2px 0 #000;z-index:20}@media (max-width: 600px){.stats-grid{grid-template-columns:1fr;gap:8px}.panel-content{padding:20px;width:95%}.summary-info{font-size:12px}.grid-selector{grid-template-columns:repeat(5,1fr);gap:6px}.mastery-option{width:100%;flex-direction:row;text-align:left;padding:15px}.mastery-option img{width:48px!important;height:48px!important;margin-right:15px;margin-bottom:0!important}.mastery-option div{flex:1}.mastery-confirm-btn{display:none}.upgrade-card{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;gap:4px 12px;padding:12px;align-items:start}.icon-container{grid-row:1 / 3;grid-column:1;width:54px;height:54px;align-self:center}.meta-container{grid-row:1;grid-column:2;width:100%;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:4px}.upgrade-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.upgrade-level{font-size:12px;padding:1px 6px;flex-shrink:0}.desc-container{grid-row:2;grid-column:2;border-left:none;border-top:none;padding-left:0;padding-top:0;width:100%;font-size:12px;line-height:1.3;color:#bbb;min-height:0}}.settings-content{max-width:450px}.settings-section{margin:20px 0 30px;background:#0000004d;border-radius:12px;padding:10px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:15px 10px;border-bottom:1px solid rgba(255,255,255,.05);transition:all .2s}.setting-item:last-child{border-bottom:none}.setting-item.disabled{opacity:.4;cursor:not-allowed}.setting-label{display:flex;align-items:center;gap:12px}.setting-icon{font-size:20px}.setting-name{font-size:16px;color:#eee;font-weight:500}.toggle-switch{position:relative;display:inline-block;width:60px;height:30px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#64646480;border:2px solid rgba(150,150,150,.5);transition:.3s;border-radius:30px}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:2px;bottom:2px;background-color:#888;transition:.3s;border-radius:50%;box-shadow:0 2px 5px #0000004d}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#00ffff4d,#00c8ff4d);border-color:#0ffc;box-shadow:0 0 10px #0ff6}.toggle-switch input:checked+.toggle-slider:before{transform:translate(30px);background:linear-gradient(135deg,#0ff,#0cf);box-shadow:0 0 10px #0ff9}.toggle-switch input:disabled+.toggle-slider{cursor:not-allowed;opacity:.5}@media (max-width: 600px){.settings-content,.setting-item{padding:15px}.setting-name{font-size:16px}.setting-icon{font-size:20px;width:35px;height:35px}.toggle-switch{width:50px;height:26px}.toggle-slider:before{height:18px;width:18px}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}}.bgm-viz-container{display:flex;gap:4px;height:40px;align-items:center;justify-content:center;margin-bottom:20px;opacity:.8}.bgm-bar{width:4px;background:#52525b;height:4px;border-radius:2px;transition:height .1s ease,background .5s;box-shadow:0 0 5px #52525a80}.bgm-bar.bgm-bar-active{background:#22d3ee;box-shadow:0 0 10px #22d3ee}