:root{--bg: #05060d;--panel: rgba(12, 14, 26, .72);--panel-strong: rgba(12, 14, 26, .92);--line: rgba(255, 255, 255, .08);--text: #e8ebff;--muted: #95a0c4;--accent: #a1b9ff;--accent-2: #ffd6a8;--danger: #ff8aa2;--ok: #9ce5b2;--shadow: 0 10px 40px rgba(0, 0, 0, .45)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Inter,Helvetica Neue,Arial,sans-serif;overflow:hidden;height:100%}#stage{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;cursor:grab}#stage:active{cursor:grabbing}.hidden{display:none!important}#landing{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#05060d00,#05060d8c 60%,#05060dd9);z-index:30;padding:24px}.landing-card{max-width:520px;width:100%;padding:28px 28px 22px;background:var(--panel-strong);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.landing-card h1{margin:0 0 6px;font-weight:600;font-size:28px;letter-spacing:.5px}.landing-card .tag{margin:0 0 22px;color:var(--muted);font-size:14px}.landing-card .row{display:flex;gap:10px;margin-bottom:12px}.landing-card .row input[type=text]{flex:1}.landing-card .footer{display:flex;gap:10px;margin-top:14px}.landing-card .hint{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.55}.landing-card .pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.pill{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);background:#ffffff0a;border:1px solid var(--line);padding:4px 8px;border-radius:999px}button,.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#ffffff0a;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.2px;transition:background .12s ease,transform 60ms ease}button:hover,.button:hover{background:#ffffff14}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(180deg,#a1b9ff40,#a1b9ff1a);border-color:#a1b9ff73;color:#f0f4ff}button.primary:hover{background:linear-gradient(180deg,#a1b9ff59,#a1b9ff2e)}input[type=text],textarea,select{background:#ffffff0d;border:1px solid var(--line);color:var(--text);padding:9px 11px;border-radius:10px;font-size:13px;font-family:inherit;outline:none}input[type=text]:focus,textarea:focus,select:focus{border-color:#a1b9ff8c}textarea{resize:vertical;min-height:60px}#hud{position:fixed;top:14px;left:14px;right:14px;display:flex;gap:10px;align-items:center;z-index:20;pointer-events:none}#hud>*{pointer-events:auto}.hud-group{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hud-group.title{font-weight:500;padding:8px 12px}.hud-group input[type=text]{background:transparent;border:none;padding:4px 6px;width:180px}.hud-spacer{flex:1}.hud-active{color:var(--muted);font-size:12px;padding:0 8px;min-width:120px;text-align:right}.hud-active strong{color:var(--text);font-weight:500}.engine-status{display:inline-block;margin-right:10px;color:#ffd6a8e6;font-size:10.5px;letter-spacing:.35px;text-transform:uppercase}.world-controls{position:fixed;left:50%;bottom:64px;transform:translate(-50%);z-index:18;display:flex;flex-wrap:wrap;gap:10px;max-width:calc(100vw - 24px);justify-content:center;align-items:center;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}.world-controls label{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;white-space:nowrap}.world-controls input[type=range]{width:94px;accent-color:var(--accent)}.world-controls input[type=checkbox]{accent-color:var(--accent-2)}.world-controls .toggle-control{color:var(--text)}.world-controls select{padding:6px 9px;font-size:12px;max-width:128px}.song-transport{position:fixed;left:50%;bottom:14px;transform:translate(-50%);z-index:19;display:flex;gap:10px;align-items:center;width:min(940px,calc(100vw - 28px));padding:8px 10px;background:var(--panel-strong);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}.song-transport button{padding:8px 12px;min-width:58px}.song-transport button.active{border-color:var(--accent-2);color:var(--text);background:#78dbff21}.song-transport input[type=range]{flex:1;min-width:120px;accent-color:var(--accent-2);height:10px;border-radius:999px;overflow:hidden}.transport-time{width:94px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}.transport-section{min-width:58px;color:var(--accent-2);font-size:11px;letter-spacing:.45px;text-transform:uppercase;text-align:right}.ship-controls{display:none}.ship-stick,.ship-throttle{pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none}.ship-stick{position:fixed;width:118px;height:118px;border-radius:999px;background:radial-gradient(circle at 50% 50%,#a1b9ff1a,#0c0e1ac7);border:1px solid rgba(161,185,255,.25);box-shadow:var(--shadow),inset 0 0 28px #a1b9ff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.ship-stick:before,.ship-stick:after{content:"";position:absolute;background:#ffffff1f;pointer-events:none}.ship-stick:before{left:50%;top:16px;bottom:16px;width:1px}.ship-stick:after{top:50%;left:16px;right:16px;height:1px}.ship-stick-thumb{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:999px;transform:translate(-50%,-50%);background:linear-gradient(180deg,#ffd6a8bd,#a1b9ff6b);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 22px #a1b9ff38}.ship-throttle{position:fixed;display:grid;gap:10px;width:96px}.ship-throttle-button{width:96px;min-height:52px;padding:0 8px;border-radius:12px;background:var(--panel-strong);border-color:#ffffff24;box-shadow:var(--shadow)}.ship-throttle-button.thrust,.ship-throttle-button.thrust:hover,.ship-throttle-button.thrust.pressed{background:linear-gradient(180deg,#a1b9ff4d,#a1b9ff1a)}.ship-throttle-button.reverse,.ship-throttle-button.reverse:hover,.ship-throttle-button.reverse.pressed{background:linear-gradient(180deg,#ffd6a842,#ffd6a814)}.ship-throttle-button.pressed{border-color:var(--accent-2);transform:translateY(1px)}.flight-menu-button{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:26;min-width:76px;min-height:42px;padding:9px 12px;border-radius:12px;background:#0c0e1ad1;border-color:#a1b9ff4d;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.flight-menu-button.collapsed{background:#0c0e1a9e}body.mobile-flight-option #stage{touch-action:none}body.mobile-flight-option .ship-controls:not(.hidden){display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;pointer-events:none}body.mobile-flight-option .ship-stick{left:max(18px,env(safe-area-inset-left));bottom:calc(148px + env(safe-area-inset-bottom))}body.mobile-flight-option .ship-throttle{right:max(18px,env(safe-area-inset-right));bottom:calc(148px + env(safe-area-inset-bottom))}body.mobile-flight-option.flight-ui-collapsed .ship-stick,body.mobile-flight-option.flight-ui-collapsed .ship-throttle{bottom:max(24px,env(safe-area-inset-bottom))}body.flight-ui-collapsed #hud,body.flight-ui-collapsed #world-controls,body.flight-ui-collapsed #song-transport,body.flight-ui-collapsed #detail,body.flight-ui-collapsed #labels{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}#detail{position:fixed;right:14px;bottom:14px;width:320px;background:var(--panel-strong);border:1px solid var(--line);border-radius:14px;padding:14px 16px;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}#detail-title{font-size:15px;font-weight:600;margin-bottom:4px}#detail-meta{color:var(--muted);font-size:12px;margin-bottom:10px}#detail-note{width:100%;background:#ffffff08;font-size:12px;color:var(--text);min-height:50px}#detail-relink{margin-top:10px;padding:8px 10px;border:1px dashed rgba(255,214,168,.45);color:var(--accent-2);border-radius:10px;font-size:11.5px}#labels{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:15}.song-label{position:absolute;pointer-events:auto;font-size:11.5px;color:var(--text);background:#080a128c;border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .12s,transform .12s,color .12s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none}.song-label .badge{margin-left:6px;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;padding:1px 6px;border-radius:999px}.song-label .badge.missing{background:#ff8aa22e;color:var(--danger)}.song-label .badge.ok{background:#9ce5b226;color:var(--ok)}.song-label.hovered{background:#ffd6a82e;color:var(--accent-2)}.song-label.selected{background:#a1b9ff40;color:#fff;border-color:#a1b9ff99}#progress{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,90vw);z-index:40;background:var(--panel-strong);border:1px solid var(--line);border-radius:14px;padding:18px 22px;box-shadow:var(--shadow)}#progress-text{color:var(--muted);font-size:12.5px;margin-bottom:10px}.progress-track{width:100%;height:6px;background:#ffffff0f;border-radius:999px;overflow:hidden}#progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s ease}#toast{position:fixed;bottom:14px;left:50%;transform:translate(-50%);background:var(--panel-strong);color:var(--text);border:1px solid var(--line);padding:10px 14px;border-radius:10px;font-size:12.5px;max-width:80vw;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:var(--shadow)}#toast.visible{opacity:1}input[type=file]{display:none}button.wide{flex:1}button.live{background:linear-gradient(180deg,#ff8aa24d,#ff8aa224);border-color:#ff8aa28c;color:#ffeaef}button.live:hover{background:linear-gradient(180deg,#ff8aa266,#ff8aa238)}.live-pill{display:inline-block;background:#ff8aa22e;color:var(--danger);border:1px solid rgba(255,138,162,.45);border-radius:999px;padding:1px 8px;font-size:10px;font-weight:600;letter-spacing:.6px;margin-right:8px;vertical-align:1px;animation:live-pulse 1.6s ease-in-out infinite}@keyframes live-pulse{0%,to{box-shadow:0 0 #ff8aa240}50%{box-shadow:0 0 10px 2px #ff8aa259}}@media (max-width: 820px){html,body{height:100dvh}button,.button,input[type=text],textarea,select{min-height:40px;font-size:14px;border-radius:10px}#landing{align-items:stretch;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom));overflow-y:auto}.landing-card{align-self:center;max-width:560px;padding:22px 18px 18px;border-radius:14px}.landing-card h1{font-size:26px;line-height:1.05}.landing-card .row,.landing-card .footer{display:grid;grid-template-columns:1fr}.landing-card .row input[type=text]{width:100%}.landing-card .hint{font-size:12px}#hud{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;gap:6px;align-items:flex-start;flex-wrap:wrap}.hud-group{gap:6px;padding:5px;border-radius:10px;max-width:100%;overflow-x:auto;scrollbar-width:none}.hud-group::-webkit-scrollbar{display:none}.hud-group.title{flex:1 1 44%;padding:5px 7px}.hud-group.title input[type=text]{width:100%;min-width:92px}.hud-group button{padding:8px 10px;white-space:nowrap}.hud-spacer{display:none}.hud-active{flex:1 1 100%;min-width:0;text-align:left;padding:3px 7px;border-radius:10px;background:#05060d5c}.engine-status{display:block;margin:0 0 2px}.world-controls{left:8px;right:8px;bottom:calc(86px + env(safe-area-inset-bottom));transform:none;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:7px;max-width:none;border-radius:12px;scrollbar-width:none}.world-controls::-webkit-scrollbar{display:none}.world-controls label{flex:0 0 auto;min-height:40px;padding:0 3px}.world-controls select{max-width:138px}.world-controls input[type=range]{width:118px}.song-transport{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px;border-radius:12px}.song-transport button{min-width:0;padding:8px 6px;text-align:center}.song-transport input[type=range]{grid-column:1 / -1;min-width:0;width:100%;height:14px}.transport-time,.transport-section{width:auto;min-width:0;text-align:center;align-self:center}.transport-time,.transport-section{grid-column:span 2}.ship-controls:not(.hidden){display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;pointer-events:none}.ship-stick{left:max(12px,env(safe-area-inset-left));bottom:calc(170px + env(safe-area-inset-bottom))}.ship-throttle{right:max(12px,env(safe-area-inset-right));bottom:calc(170px + env(safe-area-inset-bottom))}.ship-controls:not(.hidden)~#detail,.ship-controls:not(.hidden)~#toast{bottom:calc(302px + env(safe-area-inset-bottom))}#detail{left:8px;right:8px;bottom:calc(154px + env(safe-area-inset-bottom));width:auto;max-height:min(34dvh,260px);overflow:auto;padding:11px 12px;border-radius:12px}#detail-note{min-height:44px}.song-label{font-size:10.5px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;padding:3px 7px}.song-label .badge{display:none}#toast{bottom:calc(154px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}}@media (max-width: 520px){.hud-group:nth-of-type(2),.hud-group:nth-of-type(3){flex:1 1 100%}.hud-group button{padding-left:9px;padding-right:9px}.world-controls{bottom:calc(126px + env(safe-area-inset-bottom))}.song-transport{grid-template-columns:repeat(2,minmax(0,1fr))}.song-transport input[type=range],.transport-time,.transport-section{grid-column:1 / -1}#detail,#toast{bottom:calc(206px + env(safe-area-inset-bottom))}.ship-stick{width:108px;height:108px;bottom:calc(222px + env(safe-area-inset-bottom))}.ship-throttle{width:88px;bottom:calc(222px + env(safe-area-inset-bottom))}.ship-throttle-button{width:88px;min-height:50px}.ship-controls:not(.hidden)~#detail,.ship-controls:not(.hidden)~#toast{bottom:calc(340px + env(safe-area-inset-bottom))}}@media (hover: none) and (pointer: coarse){#stage{cursor:default}button:hover,.button:hover,button.primary:hover,button.live:hover{background:#ffffff0a}button.primary:hover{background:linear-gradient(180deg,#a1b9ff40,#a1b9ff1a)}}
