:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400;color:#e8f8ff;background-color:#050510;--safe-bottom: env(safe-area-inset-bottom, 0px);--action-bar-height: 140px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#050510;touch-action:none;overscroll-behavior:none}canvas{display:block;position:fixed;top:0;left:0;width:100%!important;height:calc(100% - var(--action-bar-height) - var(--safe-bottom))!important;background:#050510;touch-action:none}.action-bar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--action-bar-height) + var(--safe-bottom));padding:8px 12px;padding-bottom:calc(8px + var(--safe-bottom));z-index:20;background:#050914eb;border-top:1px solid rgba(127,235,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:6px}.action-bar-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:28px}.action-bar-info{display:flex;align-items:center;gap:10px;font-size:11px;color:#aac8dd;white-space:nowrap;overflow:hidden}.action-bar-info .planet-name{color:#f0f;font-weight:600}.action-bar-info .location-name{color:#0fa;font-weight:500}.action-bar-info .loop-info{color:#888}.action-bar-main{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1}.joystick-zone{width:100px;height:100px;position:relative;flex-shrink:0}.joystick-base{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:#7febff14;border:2px solid rgba(127,235,255,.2)}.joystick-thumb{position:absolute;width:40px;height:40px;border-radius:50%;background:#00ffaa59;border:2px solid rgba(0,255,170,.6);top:50%;left:50%;transform:translate(-50%,-50%);transition:none;pointer-events:none}.tool-buttons{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.tool-btn{min-width:72px;min-height:44px;border:1px solid rgba(126,180,255,.45);background:#071226bf;color:#d9f4ff;border-radius:10px;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .1s ease,transform 80ms ease,border-color .1s ease;text-align:center}.tool-btn:active{transform:scale(.93);background:#122440f2}.tool-btn.active{border-color:#f0f;background:#3c145099;color:#fff;box-shadow:0 0 12px #f0f3}.nav-buttons{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;flex-shrink:0}.nav-row{display:flex;gap:4px}.nav-btn{min-width:44px;min-height:44px;border:1px solid rgba(126,180,255,.35);background:#071226a6;color:#d9f4ff;border-radius:8px;padding:4px 8px;font-size:11px;cursor:pointer;transition:background-color .1s ease,transform 80ms ease;display:flex;align-items:center;justify-content:center;text-align:center}.nav-btn:active{transform:scale(.92);background:#122440e6}.nav-btn .arrow{font-size:16px}.nav-btn .label{font-size:9px;opacity:.7}.settings-row{display:flex;gap:6px;justify-content:center}.settings-btn{min-height:32px;border:1px solid rgba(126,180,255,.25);background:#07122680;color:#89a;border-radius:6px;padding:4px 10px;font-size:10px;cursor:pointer;transition:background-color .1s ease,transform 80ms ease}.settings-btn:active{transform:scale(.93);background:#122440cc}.hint-toast{position:fixed;left:12px;right:12px;bottom:calc(var(--action-bar-height) + var(--safe-bottom) + 10px);z-index:30;padding:10px 14px;border-radius:10px;border:1px solid rgba(120,250,255,.35);background:#050510e6;color:#c9f7ff;font-size:13px;text-align:center;pointer-events:none;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.ending-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#02040cd1;display:grid;place-items:center;padding:16px}.ending-modal .card{width:min(420px,92vw);background:#080e1ef2;border:1px solid rgba(120,250,255,.28);border-radius:14px;padding:20px}.ending-modal h2{margin:0 0 10px;font-size:20px}.ending-modal p{margin:0 0 12px;opacity:.9;font-size:14px}.ending-modal .row{display:flex;gap:8px;flex-wrap:wrap}.ending-modal button{min-height:44px;border:1px solid rgba(126,180,255,.45);background:#071226bf;color:#d9f4ff;border-radius:10px;padding:8px 16px;font-size:14px;cursor:pointer;flex:1}.ending-modal button:active{transform:scale(.95);background:#122440f2}.endings-panel{position:fixed;bottom:calc(var(--action-bar-height) + var(--safe-bottom) + 8px);left:12px;right:12px;z-index:25;background:#080e1ef2;border:1px solid rgba(255,0,255,.3);border-radius:12px;padding:12px}.endings-panel-title{font-size:12px;color:#f0f;font-weight:600;margin-bottom:8px}.endings-panel .row{display:flex;gap:6px;flex-wrap:wrap}.endings-panel button{min-height:44px;border:1px solid rgba(255,0,255,.4);background:#3c145080;color:#d9f4ff;border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;flex:1}.endings-panel button:active{transform:scale(.95);background:#501e64cc}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#02040cd9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;animation:fadeIn .4s ease-out}.tutorial-card{max-width:340px;width:100%;text-align:center}.tutorial-card h2{font-size:22px;margin:0 0 16px;color:#0fa}.tutorial-item{display:flex;align-items:center;gap:12px;margin-bottom:14px;text-align:left}.tutorial-icon{font-size:28px;flex-shrink:0;width:40px;text-align:center}.tutorial-text{font-size:14px;color:#c9f7ff;line-height:1.4}.tutorial-dismiss{margin-top:20px;min-height:48px;min-width:160px;border:1px solid rgba(0,255,170,.5);background:#00ffaa26;color:#0fa;border-radius:12px;padding:10px 24px;font-size:16px;font-weight:600;cursor:pointer}.tutorial-dismiss:active{transform:scale(.95);background:#00ffaa4d}.more-menu{position:fixed;bottom:calc(var(--action-bar-height) + var(--safe-bottom) + 8px);right:12px;z-index:25;background:#080e1ef2;border:1px solid rgba(127,235,255,.22);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:140px;animation:fadeIn .15s ease-out}.more-menu button{min-height:40px;border:1px solid rgba(126,180,255,.3);background:#071226a6;color:#d9f4ff;border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;text-align:left}.more-menu button:active{transform:scale(.95);background:#122440e6}@media(max-height:600px){:root{--action-bar-height: 120px}}