:root{--color-mars-red: #c1440e;--color-mars-orange: #e85d04;--color-mars-dust: #d4a373;--color-space-dark: #1a1a2e;--color-space-mid: #16213e;--color-space-accent: #0f3460;--color-kimchi-red: #e63946;--color-kimchi-glow: #ff6b6b;--color-tech-blue: #00d4ff;--color-tech-green: #00ff88;--color-warning: #ffbe0b;--color-danger: #ff006e;--color-success: #06d6a0;--color-text: #f8f9fa;--color-text-dim: #adb5bd;--color-ui-bg: rgba(22, 33, 62, .95);--color-ui-border: rgba(255, 255, 255, .1);--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--font-korean: "Noto Sans KR", var(--font-primary);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--z-canvas: 0;--z-hud: 100;--z-panel: 200;--z-modal: 300;--z-loading: 1000;--z-spotlight: 7000;--z-spotlight-target: 7500;--z-tutorial-goal: 8000;--z-tutorial-speech: 8500;--z-tutorial-modal: 9000;--z-settings-modal: 9500;--z-fps-monitor: 9999}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden;font-family:var(--font-korean);background-color:var(--color-space-dark);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--color-space-dark) 0%,var(--color-space-mid) 100%);display:flex;align-items:center;justify-content:center;z-index:var(--z-loading);transition:opacity var(--transition-slow),visibility var(--transition-slow)}#loading-screen.hidden{opacity:0;visibility:hidden}.loading-content{text-align:center;max-width:400px;padding:var(--spacing-xl)}.loading-title{font-size:2.5rem;font-weight:700;color:var(--color-kimchi-red);text-shadow:0 0 20px var(--color-kimchi-glow);margin-bottom:var(--spacing-sm);letter-spacing:.1em}.loading-subtitle{font-size:1rem;color:var(--color-text-dim);margin-bottom:var(--spacing-xl);font-style:italic}.loading-bar{width:100%;height:4px;background:var(--color-ui-border);border-radius:2px;overflow:hidden;margin-bottom:var(--spacing-md)}.loading-progress{height:100%;width:0%;background:linear-gradient(90deg,var(--color-kimchi-red),var(--color-mars-orange));transition:width var(--transition-normal)}.loading-status{font-size:.875rem;color:var(--color-text-dim);font-family:var(--font-mono)}#app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr auto;height:100vh;width:100vw}#game-container{position:relative;grid-column:1 / -1;grid-row:2;overflow:hidden;background:var(--color-space-dark)}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-canvas)}#hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-hud)}#hud>*{pointer-events:auto}#resource-bar{position:absolute;top:var(--spacing-md);left:var(--spacing-md);right:var(--spacing-md);display:flex;gap:var(--spacing-md);flex-wrap:wrap}#toolbar{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-sm);background:var(--color-ui-bg);padding:var(--spacing-sm);border-radius:12px;border:1px solid var(--color-ui-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#side-panel{position:fixed;top:60px;right:0;width:320px;height:calc(100vh - 60px);background:var(--color-ui-bg);border-left:1px solid var(--color-ui-border);z-index:var(--z-panel);transform:translate(0);transition:transform var(--transition-normal);overflow-y:auto}#side-panel.hidden{transform:translate(100%)}#modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#modal-container.hidden{display:none}.unsupported-message{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-space-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--spacing-xl)}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:768px){.loading-title{font-size:1.75rem}#side-panel{width:100%}#toolbar{width:calc(100% - var(--spacing-md) * 2);justify-content:center}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--color-kimchi-glow)}50%{box-shadow:0 0 20px var(--color-kimchi-glow)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.tutorial-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-tutorial-modal, 9000);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease}.tutorial-modal.hidden{opacity:0;pointer-events:none}.tutorial-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c}.tutorial-modal-content{position:relative;max-width:600px;width:90%;max-height:80vh;background:linear-gradient(135deg,#1f2937,#111827);border:2px solid var(--color-kimchi-red, #d32f2f);border-radius:16px;box-shadow:0 20px 60px #00000080;overflow:hidden;animation:modalSlideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes modalSlideIn{0%{transform:translateY(-50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.tutorial-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#d32f2f1a;border-bottom:1px solid rgba(211,47,47,.3)}.tutorial-modal-header h2{margin:0;font-size:1.75rem;font-weight:700;color:var(--color-kimchi-red, #d32f2f);text-shadow:0 0 10px rgba(211,47,47,.5)}.tutorial-skip-btn{padding:.5rem 1rem;background:#ffffff1a;color:#ffffffb3;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:.875rem;transition:all .2s}.tutorial-skip-btn:hover{background:#ffffff26;color:#fff;border-color:#fff6}.tutorial-modal-body{padding:2rem;max-height:50vh;overflow-y:auto;color:#e5e7eb;line-height:1.6}.tutorial-modal-footer{padding:1rem 1.5rem;background:#0000004d;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:flex-end;gap:1rem}.btn-primary{padding:.75rem 2rem;background:var(--color-kimchi-red, #d32f2f);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #d32f2f4d}.btn-primary:hover{background:#b71c1c;box-shadow:0 6px 16px #d32f2f80;transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.tutorial-prologue,.tutorial-epilogue{text-align:center}.prologue-animation{margin-bottom:2rem;height:200px;position:relative;overflow:hidden;background:linear-gradient(180deg,#0a0e27,#4a1a1a);border-radius:8px}.mars-landing{position:relative;width:100%;height:100%}.stars{position:absolute;top:0;left:0;width:100%;height:60%;background-image:radial-gradient(2px 2px at 20% 30%,white,transparent),radial-gradient(2px 2px at 60% 70%,white,transparent),radial-gradient(1px 1px at 50% 50%,white,transparent);background-size:200px 200px;background-position:0 0,40px 60px,130px 270px}.rocket{position:absolute;top:20%;left:50%;transform:translate(-50%);font-size:3rem;animation:rocketLanding 3s ease-in-out infinite}@keyframes rocketLanding{0%,to{transform:translate(-50%) translateY(-10px)}50%{transform:translate(-50%) translateY(10px)}}.mars-surface{position:absolute;bottom:0;left:0;width:100%;height:40%;background:linear-gradient(180deg,#8b4513,#654321);border-top:2px solid #a0522d}.prologue-text p,.epilogue-text p{margin-bottom:1rem;font-size:1rem;color:#d1d5db}.epilogue-icon{font-size:4rem;margin-bottom:1rem;animation:celebrate 1s ease-in-out infinite}@keyframes celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.epilogue-rewards{margin-top:1.5rem;padding:1rem;background:#d32f2f1a;border:1px solid rgba(211,47,47,.3);border-radius:8px}.epilogue-rewards h4{margin-bottom:.5rem;color:var(--color-kimchi-red, #d32f2f)}.epilogue-rewards ul{list-style:none;padding:0;margin:0}.epilogue-rewards li{padding:.5rem 0;font-size:1.1rem}.tutorial-goal-panel{position:fixed;top:80px;right:20px;width:320px;background:linear-gradient(135deg,#1f2937,#111827);border:2px solid var(--color-kimchi-red, #d32f2f);border-radius:12px;padding:1rem;z-index:var(--z-tutorial-goal, 8000);box-shadow:0 10px 40px #00000080;transition:all .3s ease}.tutorial-goal-panel.hidden{transform:translate(400px);opacity:0;pointer-events:none}.tutorial-goal-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tutorial-goal-icon{font-size:1.5rem}.tutorial-goal-header h3{margin:0;font-size:1.25rem;font-weight:700;color:var(--color-kimchi-red, #d32f2f)}#tutorial-goal-description{margin-bottom:1rem;font-size:.875rem;color:#9ca3af;line-height:1.5}#tutorial-goal-objectives{display:flex;flex-direction:column;gap:.75rem}.tutorial-objective{background:#0000004d;padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.objective-label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem;color:#e5e7eb}.objective-counter{color:var(--color-kimchi-red, #d32f2f);font-weight:600}.objective-progress{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden}.objective-progress-bar{height:100%;background:linear-gradient(90deg,var(--color-kimchi-red, #d32f2f),#ff6b6b);border-radius:4px;transition:width .3s ease}.tutorial-speech-bubble{position:fixed;bottom:100px;left:50%;transform:translate(-50%);max-width:500px;background:#1f2937fa;border:2px solid var(--color-kimchi-red, #d32f2f);border-radius:16px;padding:1rem;display:flex;gap:1rem;z-index:var(--z-tutorial-speech, 8500);box-shadow:0 10px 40px #00000080;animation:bubbleSlideUp .4s cubic-bezier(.34,1.56,.64,1)}.tutorial-speech-bubble.hidden{display:none}@keyframes bubbleSlideUp{0%{transform:translate(-50%) translateY(50px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.speech-bubble-avatar{flex-shrink:0}.speech-bubble-avatar img{width:60px;height:60px;border-radius:50%;border:2px solid var(--color-kimchi-red, #d32f2f)}.speech-bubble-content{flex:1}.speech-bubble-name{font-weight:700;color:var(--color-kimchi-red, #d32f2f);margin-bottom:.5rem}.speech-bubble-text{color:#e5e7eb;line-height:1.5;font-size:.95rem}.speech-bubble-close{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.875rem;transition:all .2s}.speech-bubble-close:hover{background:#fff3}.tutorial-spotlight{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-spotlight, 7000);pointer-events:none;transition:opacity .3s ease}.tutorial-spotlight.hidden{opacity:0}.tutorial-spotlight-target{position:relative;z-index:var(--z-spotlight-target, 7500);animation:spotlightPulse 1.5s ease-in-out infinite}@keyframes spotlightPulse{0%,to{box-shadow:0 0 #d32f2fb3}50%{box-shadow:0 0 0 15px #d32f2f00}}.tutorial-highlight{position:relative;z-index:var(--z-spotlight-target, 7500);animation:highlightPulse 1.5s ease-in-out infinite}@keyframes highlightPulse{0%,to{box-shadow:0 0 #d32f2fb3,inset 0 0 20px #d32f2f4d}50%{box-shadow:0 0 0 10px #d32f2f00,inset 0 0 30px #d32f2f80}}@media(max-width:768px){.tutorial-modal-content{max-width:95%}.tutorial-goal-panel{top:auto;bottom:80px;right:10px;left:10px;width:auto}.tutorial-speech-bubble{bottom:80px;left:10px;right:10px;max-width:none;transform:none}@keyframes bubbleSlideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}}.settings-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-settings-modal, 9500);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease}.settings-modal.hidden{opacity:0;pointer-events:none}.settings-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.settings-modal-content{position:relative;max-width:600px;width:90%;max-height:85vh;background:linear-gradient(135deg,#1f2937,#111827);border:2px solid var(--color-kimchi-red, #e63946);border-radius:16px;box-shadow:0 20px 60px #0009;overflow:hidden;animation:settingsSlideIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes settingsSlideIn{0%{transform:translateY(-50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.settings-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#e639461a;border-bottom:1px solid rgba(230,57,70,.3)}.settings-modal-header h2{margin:0;font-size:1.75rem;font-weight:700;color:var(--color-kimchi-red, #e63946);text-shadow:0 0 10px rgba(230,57,70,.5)}.settings-close-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;color:#ffffffb3;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:1.25rem;transition:all .2s}.settings-close-btn:hover{background:#ffffff26;color:#fff;border-color:#fff6;transform:scale(1.1)}.settings-modal-body{padding:2rem;max-height:calc(85vh - 100px);overflow-y:auto}.settings-modal-body::-webkit-scrollbar{width:8px}.settings-modal-body::-webkit-scrollbar-track{background:#0003;border-radius:4px}.settings-modal-body::-webkit-scrollbar-thumb{background:#e6394680;border-radius:4px}.settings-modal-body::-webkit-scrollbar-thumb:hover{background:#e63946b3}.settings-section{margin-bottom:2rem}.settings-section:last-child{margin-bottom:0}.settings-section-title{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:var(--color-tech-blue, #00d4ff);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid rgba(0,212,255,.3);padding-bottom:.5rem}.settings-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;gap:1rem}.settings-row:last-child{margin-bottom:0}.settings-label{display:flex;justify-content:space-between;align-items:center;flex:1;gap:.5rem;cursor:pointer}.settings-label-text{font-size:1rem;color:var(--color-text, #f8f9fa);font-weight:500}.settings-value{font-size:.875rem;color:var(--color-text-dim, #adb5bd);font-family:var(--font-mono, monospace);min-width:50px;text-align:right}.settings-slider-container{flex:1;max-width:200px}.settings-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-kimchi-red, #e63946);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #e6394680;transition:all .2s}.settings-slider::-webkit-slider-thumb:hover{background:var(--color-kimchi-glow, #ff6b6b);box-shadow:0 2px 12px #e63946cc;transform:scale(1.2)}.settings-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-kimchi-red, #e63946);border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #e6394680;transition:all .2s}.settings-slider::-moz-range-thumb:hover{background:var(--color-kimchi-glow, #ff6b6b);box-shadow:0 2px 12px #e63946cc;transform:scale(1.2)}.settings-slider::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--color-kimchi-red, #e63946) 0%,var(--color-kimchi-red, #e63946) var(--slider-progress, 50%),rgba(255,255,255,.1) var(--slider-progress, 50%),rgba(255,255,255,.1) 100%);border-radius:3px}.settings-slider::-moz-range-track{height:6px;background:#ffffff1a;border-radius:3px}.settings-slider::-moz-range-progress{height:6px;background:var(--color-kimchi-red, #e63946);border-radius:3px}.settings-button-group{display:flex;gap:.5rem;flex-wrap:wrap}.settings-btn{padding:.5rem 1rem;background:#ffffff0d;color:#ffffffb3;border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s;white-space:nowrap}.settings-btn:hover{background:#ffffff1a;color:#fff;border-color:#ffffff4d}.settings-btn-active{background:var(--color-kimchi-red, #e63946);color:#fff;border-color:var(--color-kimchi-red, #e63946);box-shadow:0 2px 8px #e6394666}.settings-btn-sm{padding:.375rem .75rem;font-size:.8125rem}.settings-toggle{position:relative;width:50px;height:26px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:13px;cursor:pointer;transition:all .3s;padding:0}.settings-toggle[aria-checked=true]{background:var(--color-kimchi-red, #e63946);border-color:var(--color-kimchi-red, #e63946)}.settings-toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px #0003}.settings-toggle[aria-checked=true] .settings-toggle-slider{transform:translate(24px)}.settings-toggle:hover{border-color:#fff6}.settings-action-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:#00d4ff1a;color:var(--color-tech-blue, #00d4ff);border:1px solid rgba(0,212,255,.3);border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s}.settings-action-btn:hover{background:#00d4ff33;border-color:#00d4ff80;transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff33}.settings-action-btn span:first-child{font-size:1.5rem}.settings-action-btn-danger{background:#ff006e1a;color:var(--color-danger, #ff006e);border-color:#ff006e4d}.settings-action-btn-danger:hover{background:#ff006e33;border-color:#ff006e80;box-shadow:0 4px 12px #ff006e4d}@media(max-width:640px){.settings-modal-content{width:95%;max-height:90vh}.settings-modal-header{padding:1rem}.settings-modal-header h2{font-size:1.5rem}.settings-modal-body{padding:1.25rem}.settings-section{margin-bottom:1.5rem}.settings-section-title{font-size:1rem}.settings-row{flex-direction:column;align-items:flex-start;gap:.75rem}.settings-label{width:100%}.settings-slider-container{width:100%;max-width:100%}.settings-button-group{width:100%}.settings-btn{flex:1;min-width:0}}.settings-slider:focus-visible,.settings-btn:focus-visible,.settings-toggle:focus-visible,.settings-action-btn:focus-visible{outline:3px solid var(--color-tech-blue, #00d4ff);outline-offset:2px}@media(prefers-reduced-motion:reduce){.settings-modal-content{animation:none}.settings-slider::-webkit-slider-thumb,.settings-slider::-moz-range-thumb,.settings-btn,.settings-toggle,.settings-action-btn{transition:none}}