:root{--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;--color-cyan: #86ded9;--color-cyan-glow: rgba(134, 222, 217, .4);--color-gold: #e3b574;--color-gold-glow: rgba(227, 181, 116, .4);--color-crimson: #e65575;--color-crimson-glow: rgba(230, 85, 117, .4);--color-purple: #a855f7;--color-purple-glow: rgba(168, 85, 247, .4);--color-green: #5ed6a6;--color-dark-bg: rgba(10, 16, 26, .88);--color-panel-border: rgba(134, 222, 217, .28);--panel-radius: 8px}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}.chronos-viewport{position:relative;width:100%;height:100%;overflow:hidden;background-color:#060b12;font-family:var(--font-main);font-size:13px;line-height:1.4;color:#e2e8f0;touch-action:none}.chronos-canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;display:block;z-index:1;outline:none}.hud-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:hidden}.hud-layer button,.hud-layer .interactive{pointer-events:auto}.hud-top-left{position:absolute;width:380px;top:16px;left:16px;display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,#080e18eb,#101a2ad1);border:1px solid var(--color-panel-border);border-left:3px solid var(--color-cyan);padding:12px 16px;border-radius:var(--panel-radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #00000080;max-width:380px}.kai-portrait-wrap{position:relative;width:54px;height:54px;flex-shrink:0}.kai-portrait-ring{position:absolute;inset:-3px;border-radius:50%;border:2px dashed var(--color-cyan);animation:spinSlow 20s linear infinite}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.kai-portrait{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#1e3a5f,#0c1829);border:2px solid var(--color-cyan);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 10px #86ded966}.kai-portrait-canvas{width:100%;height:100%;display:block;border-radius:50%}.player-status-bars{flex:1;display:flex;flex-direction:column;gap:6px}.player-meta-row{display:flex;align-items:baseline;justify-content:space-between}.player-name{font-size:14px;font-weight:700;letter-spacing:1px;color:#fff}.player-level-badge{font-size:12px;font-weight:600;color:var(--color-gold);background:#e3b57426;padding:1px 6px;border-radius:4px;border:1px solid rgba(227,181,116,.3)}.stat-bar-group{display:flex;flex-direction:column;gap:3px}.stat-bar-row{display:flex;align-items:center;gap:6px}.stat-label{width:36px;font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.5px}.bar-track{flex:1;height:8px;background:#0f172acc;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1);position:relative}.bar-fill{height:100%;border-radius:3px;transition:width .15s ease-out}.bar-fill.hp{background:linear-gradient(90deg,#10b981,#5ed6a6);box-shadow:0 0 8px #5ed6a680}.bar-fill.ether{background:linear-gradient(90deg,#06b6d4,#86ded9);box-shadow:0 0 8px #86ded980}.bar-fill.tcs{background:linear-gradient(90deg,#f59e0b,#e3b574);box-shadow:0 0 8px #e3b57480}.bar-fill.xp{background:linear-gradient(90deg,#8b5cf6,#c084fc)}.stat-values{font-size:11px;font-variant-numeric:tabular-nums;color:#cbd5e1;width:56px;text-align:right}.hud-top-right{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.minimap-container{position:relative;width:160px;height:160px;background:#080e18e6;border:1px solid var(--color-panel-border);border-radius:var(--panel-radius);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #00000080}.minimap-canvas{width:100%;height:100%;display:block}.minimap-label{position:absolute;bottom:4px;right:6px;font-size:10px;color:#94a3b8;background:#0009;padding:1px 4px;border-radius:3px;border:1px solid rgba(255,255,255,.1)}.objective-panel{background:linear-gradient(135deg,#080e18eb,#101a2ad1);border:1px solid var(--color-panel-border);border-right:3px solid var(--color-gold);padding:10px 14px;border-radius:var(--panel-radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 20px #00000080;max-width:320px;text-align:right}.objective-sector{font-size:11px;font-weight:700;color:var(--color-gold);letter-spacing:.5px;margin-bottom:2px}.objective-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}.objective-hint{font-size:12px;color:#cbd5e1;line-height:1.4;margin-bottom:4px}.objective-action-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;color:var(--color-cyan)}.objective-distance{color:#94a3b8;font-variant-numeric:tabular-nums}.boss-hud{position:absolute;top:24px;left:50%;transform:translate(-50%);width:90%;max-width:600px;display:flex;flex-direction:column;gap:6px;background:#0e080ed9;border:1px solid rgba(230,85,117,.4);padding:8px 16px;border-radius:6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 25px #e655754d;transition:opacity .3s ease}.boss-hud-header{display:flex;justify-content:space-between;align-items:center}.boss-name{font-size:13px;font-weight:800;letter-spacing:1.5px;color:#fff;text-shadow:0 0 8px var(--color-crimson-glow)}.boss-phase-badge{font-size:11px;font-weight:700;color:var(--color-crimson);background:#e6557533;padding:1px 6px;border-radius:4px;border:1px solid rgba(230,85,117,.4)}.boss-bar-track{width:100%;height:10px;background:#1e0a0fcc;border-radius:4px;overflow:hidden;border:1px solid rgba(230,85,117,.3)}.boss-bar-fill{height:100%;background:linear-gradient(90deg,#e65575,#ff7597);box-shadow:0 0 10px #e65575b3;transition:width .15s ease-out}.hud-bottom-left{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;gap:10px}.skills-container{display:flex;align-items:center;gap:10px}.skill-slot{position:relative;width:58px;height:58px;background:linear-gradient(135deg,#080e18f2,#101a2ae0);border:1px solid var(--color-panel-border);border-radius:var(--panel-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 15px #0006;transition:transform .1s ease,border-color .15s ease}.skill-slot:active{transform:scale(.95)}.skill-slot.ready{border-color:var(--color-cyan);box-shadow:0 0 12px var(--color-cyan-glow)}.skill-slot.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}.skill-slot.resource-depleted{opacity:.75;cursor:not-allowed;border-color:#f43f5e99;background:linear-gradient(135deg,#1e0a0fe6,#140c12d9)}.skill-slot.resource-depleted .skill-cost{color:#fb7185;font-weight:800;text-shadow:0 0 4px rgba(244,63,94,.4)}.skill-icon{font-size:18px;margin-bottom:2px}.skill-key{position:absolute;top:3px;left:4px;font-size:10px;font-weight:800;color:var(--color-cyan);background:#0009;padding:0 3px;border-radius:3px}.skill-cost{position:absolute;top:3px;right:4px;font-size:9px;font-weight:700;color:#94a3b8}.skill-name{font-size:9px;font-weight:600;color:#e2e8f0;text-align:center;line-height:1.1;padding:0 2px}.skill-cooldown-overlay{position:absolute;bottom:0;left:0;width:100%;background:#000000b3;border-top:1px solid rgba(255,255,255,.3);transition:height .05s linear;pointer-events:none}.skill-cooldown-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;text-shadow:0 0 6px #000;pointer-events:none}.aux-abilities-row{display:flex;align-items:center;gap:8px}.aux-badge{display:flex;align-items:center;gap:4px;background:#080e18d9;border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:4px;font-size:11px;color:#cbd5e1}.aux-key{font-weight:800;color:var(--color-gold);background:#e3b57426;padding:0 4px;border-radius:2px}.hud-bottom-right{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.echo-comm-box{background:linear-gradient(135deg,#080e18eb,#101a2ad1);border:1px solid var(--color-panel-border);border-right:3px solid var(--color-cyan);padding:8px 12px;border-radius:var(--panel-radius);max-width:320px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 15px #0006}.echo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.echo-title{font-size:11px;font-weight:700;color:var(--color-cyan);letter-spacing:.5px}.echo-signal{font-size:10px;color:var(--color-green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.echo-text{font-size:12px;color:#e2e8f0;line-height:1.35}.items-container{display:flex;align-items:center;gap:8px}.item-slot{position:relative;width:52px;height:52px;background:linear-gradient(135deg,#080e18eb,#101a2ad1);border:1px solid var(--color-panel-border);border-radius:var(--panel-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 15px #0006;transition:transform .1s ease,border-color .15s ease}.item-slot:active{transform:scale(.95)}.item-slot.available{border-color:var(--color-gold)}.item-slot.empty{opacity:.4;cursor:default}.item-key{position:absolute;top:2px;left:4px;font-size:10px;font-weight:800;color:var(--color-gold)}.item-count{position:absolute;bottom:2px;right:4px;font-size:11px;font-weight:700;color:#fff;background:#0009;padding:0 3px;border-radius:2px}.item-icon{font-size:16px}.audio-toggle-btn{background:#080e18d9;border:1px solid rgba(255,255,255,.15);color:#94a3b8;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}.audio-toggle-btn:hover{background:#101a2af2;color:#fff}.touch-controls{position:absolute;inset:0;pointer-events:none;z-index:15;display:none}.touch-controls.active{display:flex}.touch-joystick-zone{position:absolute;bottom:24px;left:24px;width:140px;height:140px;border-radius:50%;background:#86ded914;border:2px solid rgba(134,222,217,.25);pointer-events:auto;touch-action:none}.touch-joystick-knob{position:absolute;top:50%;left:50%;width:50px;height:50px;border-radius:50%;background:var(--color-cyan);box-shadow:0 0 15px var(--color-cyan-glow);transform:translate(-50%,-50%);pointer-events:none}.touch-action-pad{position:absolute;bottom:24px;right:24px;display:grid;grid-template-columns:repeat(3,56px);gap:10px;pointer-events:auto}.touch-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#101a2ae6,#080e18f2);border:1px solid var(--color-panel-border);color:#fff;font-size:13px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 10px #0006}.touch-btn:active{transform:scale(.92);background:var(--color-cyan);color:#0c1420}.touch-btn.attack{background:linear-gradient(135deg,#e65575,#c026d3);border-color:#ff7597}.touch-btn.jump{background:linear-gradient(135deg,#0ea5e9,#06b6d4);border-color:#38bdf8}.modal-backdrop{position:absolute;inset:0;background:#04070cc7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-window{width:100%;max-width:640px;max-height:90vh;overflow-y:auto;background:linear-gradient(135deg,#0b1320,#080d16);border:1px solid var(--color-panel-border);border-radius:12px;padding:24px;box-shadow:0 10px 40px #000c,0 0 20px #86ded926;display:flex;flex-direction:column;gap:20px}.modal-window::-webkit-scrollbar{width:6px}.modal-window::-webkit-scrollbar-thumb{background:#86ded94d;border-radius:3px}.modal-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:1px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}.modal-title span.accent{color:var(--color-cyan);text-shadow:0 0 10px var(--color-cyan-glow)}.modal-body{font-size:13px;line-height:1.6;color:#cbd5e1;display:flex;flex-direction:column;gap:14px}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.btn{padding:10px 20px;border-radius:6px;font-size:13px;font-weight:700;letter-spacing:.5px;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .15s ease}.btn-primary{background:linear-gradient(135deg,#0284c7,#06b6d4);color:#fff;border:1px solid var(--color-cyan);box-shadow:0 0 15px var(--color-cyan-glow)}.btn-primary:hover{background:linear-gradient(135deg,#0369a1,#0891b2);box-shadow:0 0 20px var(--color-cyan-glow)}.btn-secondary{background:#101a2ad9;color:#e2e8f0;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:#1e293bf2;color:#fff}.btn-crimson{background:linear-gradient(135deg,#e11d48,#e65575);color:#fff;border:1px solid #ff7597;box-shadow:0 0 15px var(--color-crimson-glow)}.btn-crimson:hover{background:linear-gradient(135deg,#be123c,#f43f5e)}.btn-gold{background:linear-gradient(135deg,#d97706,#e3b574);color:#1e1302;border:1px solid #fbbf24;box-shadow:0 0 15px var(--color-gold-glow)}.btn-gold:hover{background:linear-gradient(135deg,#b45309,#f59e0b)}.dialogue-box{position:absolute;bottom:24px;left:50%;transform:translate(-50%);width:90%;max-width:780px;background:linear-gradient(135deg,#080e18f5,#101a2aeb);border:1px solid var(--color-cyan);border-radius:10px;padding:16px 22px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px #000000b3,0 0 20px var(--color-cyan-glow);z-index:60;display:flex;flex-direction:column;gap:10px;pointer-events:auto}.dialogue-speaker{font-size:14px;font-weight:800;color:var(--color-gold);letter-spacing:1px}.dialogue-text{font-size:14px;line-height:1.6;color:#fff;min-height:44px}.dialogue-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px}.dialogue-hint{font-size:12px;color:#94a3b8}.menu-header{text-align:center;margin-bottom:10px}.menu-title-main{font-size:26px;font-weight:900;letter-spacing:2px;color:#fff;text-shadow:0 0 15px var(--color-cyan-glow)}.menu-title-sub{font-size:13px;font-weight:600;color:var(--color-gold);letter-spacing:4px;margin-top:4px}.save-slots-list{display:flex;flex-direction:column;gap:10px}.save-slot-card{background:#101a2ad9;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s ease}.save-slot-card:hover{border-color:var(--color-cyan);background:#16243af2;transform:translate(4px)}.save-slot-card.active{border-color:var(--color-cyan);box-shadow:0 0 12px var(--color-cyan-glow)}.slot-info{display:flex;flex-direction:column;gap:4px}.slot-header{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#fff}.slot-detail{font-size:11px;color:#94a3b8}.gear-upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}.gear-card{background:#101a2ad9;border:1px solid var(--color-panel-border);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}.gear-title{font-size:13px;font-weight:700;color:#fff}.gear-level{font-size:16px;font-weight:800;color:var(--color-gold)}.gear-desc{font-size:11px;color:#94a3b8;line-height:1.3}.ending-choice-container{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}.ending-card{background:#101a2ad9;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;transition:all .2s ease}.ending-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #0009}.ending-card.restart{border-color:var(--color-cyan)}.ending-card.fix{border-color:var(--color-gold)}@media(max-width:860px){.hud-layer{padding:10px}.hud-top-left{width:280px;max-width:280px;padding:8px 10px}.kai-portrait-wrap{width:44px;height:44px}.minimap-container{width:120px;height:120px}.objective-panel{max-width:240px;padding:8px 10px}.ending-choice-container,.gear-upgrade-grid{grid-template-columns:1fr}}@media(max-width:600px){.hud-top-left{left:10px;top:10px;width:calc(100% - 150px);gap:0}.hud-top-left .kai-portrait-wrap{display:none}.hud-top-left .player-name{font-size:12px}.hud-top-right{top:10px;right:10px}}@media(max-height:500px){.hud-layer{padding:8px}.hud-top-left{padding:6px 10px;max-width:260px}.minimap-container{width:100px;height:100px}.skill-slot{width:48px;height:48px}.item-slot{width:44px;height:44px}.echo-comm-box{display:none}}
