:root{--primary: #e94560;--secondary: #0f3460;--background: #1a1a2e;--surface: #16213e;--text: #eaeaea;--text-muted: #a0a0a0}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background:var(--background);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text);touch-action:none;user-select:none;-webkit-user-select:none}#app{width:100%;height:100%;position:relative}canvas{display:block;touch-action:none}body{overscroll-behavior:none}@supports (padding: max(0px)){body{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right));padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}}#loading{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2e;color:#eaeaea;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;z-index:9999}#loading h1{font-size:2rem;margin-bottom:1rem;color:#e94560}.spinner{width:50px;height:50px;border:4px solid rgba(233,69,96,.3);border-top-color:#e94560;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.equipment-panel{background:var(--surface);border-radius:12px;padding:16px;width:420px;color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.equipment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}.equipment-header h3{margin:0;font-size:1.25rem;color:var(--primary)}.equipment-stats-summary{display:flex;gap:12px}.stat-bonus{font-size:.875rem;padding:4px 8px;background:#0003;border-radius:6px;color:#4caf50}.equipment-slots-grid{display:grid;grid-template-columns:1fr 120px 1fr;gap:12px;margin-bottom:16px}.equipment-column{display:flex;flex-direction:column;gap:8px}.equipment-column.character-preview{align-items:center;justify-content:center}.character-display{width:100px;height:140px;background:#0003;border-radius:8px;display:flex;align-items:center;justify-content:center}.character-sprite{font-size:3rem}.equipment-slot{background:#0000004d;border-radius:8px;padding:8px;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.equipment-slot:hover{background:#0006;border-color:var(--primary)}.equipment-slot.selected{border-color:var(--primary);box-shadow:0 0 10px #e945604d}.equipment-slot.broken{opacity:.6;filter:grayscale(100%)}.slot-label{font-size:.75rem;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase}.slot-content{min-height:40px;display:flex;align-items:center;justify-content:center}.empty-slot{color:var(--text-muted);font-size:1.5rem;opacity:.5}.equipped-item{width:100%;padding:4px;border:2px solid;border-radius:6px;display:flex;align-items:center;gap:8px}.item-icon{font-size:1.25rem}.item-name{font-size:.875rem;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.durability-bar{height:4px;background:#00000080;border-radius:2px;margin-top:6px;overflow:hidden}.durability-fill{height:100%;background:#4caf50;transition:width .3s ease}.equipment-item-details{background:#0003;border-radius:8px;padding:12px;min-height:120px}.empty-details{color:var(--text-muted);text-align:center;padding:20px;font-size:.875rem}.item-details h4{margin:0 0 4px;font-size:1rem}.item-rarity{font-size:.75rem;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase}.item-description{font-size:.875rem;margin-bottom:12px;line-height:1.4}.item-stats h5{margin:0 0 8px;font-size:.875rem;color:var(--text-muted)}.stat-line{font-size:.875rem;padding:2px 0;color:#4caf50}.item-durability,.item-level{font-size:.8rem;color:var(--text-muted);margin-top:4px}.item-actions{display:flex;gap:8px;margin-top:12px}.item-actions button{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:.875rem;cursor:pointer;transition:background .2s ease}.unequip-btn{background:#f44336;color:#fff}.unequip-btn:hover{background:#d32f2f}.repair-btn{background:#2196f3;color:#fff}.repair-btn:hover{background:#1976d2}.hint{color:var(--text-muted);font-size:.75rem;margin-top:8px}.time-display{background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:12px 16px;min-width:220px;color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.time-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.time-icon{font-size:1.5rem}.time-text{font-size:1.25rem;font-weight:600;font-family:monospace}.day-counter{font-size:.875rem;color:var(--text-muted);margin-left:auto}.time-progress-bar{height:8px;background:#ffffff1a;border-radius:4px;position:relative;overflow:hidden;margin-bottom:4px}.time-progress-fill{height:100%;border-radius:4px;transition:width .3s ease,background .3s ease}.time-markers{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none}.time-marker{position:absolute;width:2px;height:100%;background:#ffffff4d}.time-marker.dawn{left:20.83%}.time-marker.day{left:29.17%}.time-marker.dusk{left:70.83%}.time-marker.night{left:79.17%}.time-phase-indicator{text-align:center;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;padding-top:4px}.time-phase-indicator.day{color:#87ceeb}.time-phase-indicator.dawn{color:#e86a4c}.time-phase-indicator.dusk{color:#ff8c42}.time-phase-indicator.night{color:#6a6ad5}.time-phase-indicator.midnight{color:#3a3a7a}.volume-settings-panel{background:var(--surface);border-radius:12px;padding:16px;width:320px;color:var(--text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.volume-settings-panel h3{margin:0 0 16px;font-size:1.25rem;color:var(--primary)}.volume-control{margin-bottom:16px}.volume-control label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.875rem}.volume-icon{font-size:1.1rem}.volume-value{margin-left:auto;color:var(--text-muted);font-family:monospace}.volume-control input[type=range]{width:100%;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;transition:transform .1s ease}.volume-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.mute-control{margin-top:12px;text-align:center}.mute-control button{width:100%;padding:10px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:.875rem;cursor:pointer;transition:background .2s ease}.mute-control button:hover{background:#c73b52}.mute-control button.muted{background:#666}.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:10000;pointer-events:none}.tutorial-tooltip{position:fixed;background:var(--surface);border-radius:12px;padding:16px;max-width:300px;z-index:10001;box-shadow:0 8px 32px #00000080;border:2px solid var(--primary);animation:tooltipFadeIn .3s ease}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tutorial-tooltip h4{margin:0 0 8px;font-size:1rem;color:var(--primary)}.tutorial-tooltip p{margin:0 0 12px;font-size:.875rem;line-height:1.4}.tooltip-actions{display:flex;gap:8px;justify-content:flex-end}.tooltip-actions button{padding:6px 12px;border:none;border-radius:6px;font-size:.875rem;cursor:pointer;transition:background .2s ease}.tooltip-actions .skip-step{background:#ffffff1a;color:var(--text-muted)}.tooltip-actions .skip-step:hover{background:#ffffff26}.tooltip-actions .next-step{background:var(--primary);color:#fff}.tooltip-actions .next-step:hover{background:#c73b52}.tutorial-highlight{position:relative;z-index:10002;box-shadow:0 0 0 4px var(--primary);border-radius:8px;animation:highlightPulse 1.5s ease-in-out infinite}@keyframes highlightPulse{0%,to{box-shadow:0 0 0 4px var(--primary)}50%{box-shadow:0 0 0 8px #e9456080}}