:root { --panel: rgba(13,19,33,.82); --panel2: rgba(22,30,48,.86); --line: rgba(255,255,255,.1); --txt: #f2f5fb; --mut: #9aa6bd; --blue: #2b7bf3; --blue2: #1d63d6; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b1220; color: var(--txt); font: 15px/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 2px solid #7db4ff; outline-offset: 2px; }
#app { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: #0b1220; z-index: 50; transition: opacity .5s; }
#loading.done { opacity: 0; pointer-events: none; }
.spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #2b3d63; border-top-color: #7db4ff; animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
.glass { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }

#brand { position: absolute; left: 0; top: 0; display: flex; gap: 12px; align-items: center; padding: 12px 40px 14px 28px; border-radius: 0 0 40px 0; background: linear-gradient(90deg, rgba(8,12,22,.78), rgba(8,12,22,.55) 70%, rgba(8,12,22,0)); z-index: 5; pointer-events: none; }
#brand h1 { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.5px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
#brand p { margin: 4px 0 0; font-size: 18px; color: #e8edf7; }

#topnav { position: absolute; left: 50%; top: 15px; transform: translateX(-26%); display: flex; border-radius: 14px; z-index: 6; }
#topnav { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
#topnav button { display: flex; align-items: center; gap: 9px; padding: 0 20px; height: 54px; background: none; border: 0; border-right: 1px solid var(--line); font-size: 17px; white-space: nowrap; }
#topnav button:last-child { border-right: 0; } #topnav button:first-child { border-radius: 14px 0 0 14px; } #topnav button:last-child { border-radius: 0 14px 14px 0; }
#topnav button:hover, #topnav button.on { background: rgba(255,255,255,.09); }
#topnav svg { flex: none; }
#topright { position: absolute; right: 16px; top: 16px; display: flex; gap: 10px; z-index: 6; }
.btn-white { display: flex; align-items: center; gap: 10px; background: #fff; color: #10172a; border: 0; border-radius: 12px; height: 54px; padding: 0 22px; font-weight: 600; font-size: 17px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.btn-dark { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; height: 54px; padding: 0 20px; font-size: 17px; backdrop-filter: blur(10px); }
.btn-white:hover { background: #eaf1ff; } .btn-dark:hover { background: rgba(40,52,80,.9); }

#tools { position: absolute; left: 14px; top: 122px; display: flex; flex-direction: column; border-radius: 14px; padding: 8px 8px; gap: 2px; z-index: 6; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
#tools button { width: 86px; height: 82px; border-radius: 10px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14.5px; color: #e6ebf6; }
#tools button:hover { background: rgba(255,255,255,.08); }
#tools button.on { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(43,123,243,.5); }
#tools svg { width: 30px; height: 30px; }
#subbar { position: absolute; left: 116px; top: 126px; z-index: 6; border-radius: 14px; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 360px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
#subbar[hidden], #pop[hidden], #inspector[hidden] { display: none; }
#subbar .sb-title { width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
#subbar button, .chipb { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 14px; }
#subbar button.on, .chipb.on { background: var(--blue); border-color: transparent; }
#subbar label { display: flex; width: 100%; gap: 8px; align-items: center; font-size: 13px; color: #cfd8ea; }
#subbar input[type=range], #paneEdit input[type=range] { flex: 1; accent-color: #5b9bff; min-width: 90px; }
#subbar output, #paneEdit output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
#pop { position: absolute; left: 50%; top: 80px; transform: translateX(-26%); z-index: 8; min-width: 300px; max-width: 460px; border-radius: 14px; padding: 14px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
#pop h3 { margin: 0 0 10px; font-size: 15px; } #pop .row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; } #pop p { margin: 6px 0; color: var(--mut); font-size: 13px; }
#pop button.opt { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; text-align: left; }
#pop button.opt:hover, #pop button.opt.on { background: var(--blue); border-color: transparent; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); padding: 0; }
.sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--blue); }
.plist { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; font-size: 14px; align-items: center; }
#inspector { position: absolute; left: 116px; bottom: 250px; z-index: 7; padding: 12px; border-radius: 14px; min-width: 240px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
#inspector h4 { margin: 0 0 8px; font-size: 15px; } #inspector .row { display: flex; gap: 6px; margin: 6px 0; align-items: center; flex-wrap: wrap; font-size: 13px; }
#inspector button { background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
#inspector button.danger { background: #a33; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#labels .tag { position: absolute; transform: translate(-50%, -100%); background: rgba(10,16,30,.7); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }

#minimap { position: absolute; left: 12px; bottom: 14px; width: 232px; height: 232px; border-radius: 50%; z-index: 5; border: 3px solid rgba(190,210,255,.55); box-shadow: 0 6px 24px rgba(0,0,0,.5); overflow: hidden; background: #0b1b2b; }
#minimap canvas { width: 100%; height: 100%; display: block; }
#minimap .north { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font-weight: 700; font-size: 14px; text-shadow: 0 1px 4px #000; }
#flightHud { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); z-index: 5; display: flex; gap: 14px; align-items: center; padding: 6px 14px; border-radius: 20px; font-size: 13px; background: rgba(10,16,30,.62); border: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
#flightHud .bar { width: 90px; height: 8px; background: rgba(255,255,255,.18); border-radius: 4px; overflow: hidden; } #flightHud .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb54a, #6dd96a); }
#flightHud .warn { color: #ffb4a8; font-weight: 600; }
#actions { position: absolute; left: 50%; bottom: 12px; transform: translateX(-12%); display: flex; gap: 22px; z-index: 5; }
#actions button { width: 94px; height: 94px; border-radius: 22px; background: rgba(13,19,33,.78); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; backdrop-filter: blur(8px); }
#actions button b { font-weight: 600; font-size: 17px; }
#actions button[aria-pressed=true] { border: 3px solid #5bb4ff; box-shadow: 0 0 18px rgba(80,170,255,.65); }
#actions button:active { transform: scale(.96); }
#toast { position: absolute; left: 50%; top: 84px; transform: translate(-50%, -12px); opacity: 0; transition: .3s; background: rgba(10,16,30,.9); border: 1px solid var(--line); padding: 8px 16px; border-radius: 12px; z-index: 20; pointer-events: none; max-width: 80%; text-align: center; font-size: 14px; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

#chat { position: absolute; right: 8px; top: 106px; bottom: 18px; width: clamp(340px, 32.5vw, 545px); z-index: 6; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(11,16,29,.86); border: 1px solid var(--line); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
#tabs { display: flex; height: 66px; flex: none; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
#tabs button { background: none; border: 0; display: flex; align-items: center; gap: 12px; padding: 0 22px; font-size: 18px; color: #c8d1e4; border-bottom: 3px solid transparent; }
#tabs button.on { color: #fff; border-bottom-color: #5bb4ff; } #tabs button#tabEdit { flex: 1; } #tabs button#tabGear { padding: 0 24px; color: #fff; }
.av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: #2a3550; display: inline-block; } #tabs .av { width: 50px; height: 50px; }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; } .pane[hidden] { display: none; }
#log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.msg { display: flex; gap: 12px; align-items: flex-start; } .msg.user { justify-content: flex-end; }
.msg .ub { background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px 16px; max-width: 80%; font-size: 17px; }
.msg .ua { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; order: -1; }
.msg.user .ua { order: 0; } .msg.user { gap: 10px; flex-direction: row-reverse; justify-content: flex-start; }
.msg.user { flex-direction: row; } .msg.user .ub { order: 1; } .msg.user .ua { order: 0; }
.msg .ab { font-size: 18px; flex: 1; min-width: 0; } .msg .ab p { margin: 0 0 10px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 2px; } .thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #123; aspect-ratio: 4/3; }
.thumbs button.on, .thumbs button:hover { border-color: #4aa8ff; box-shadow: 0 0 10px rgba(74,168,255,.6); } .thumbs canvas, .thumbs img { width: 100%; height: 100%; display: block; object-fit: cover; }
.typing { display: inline-flex; gap: 5px; padding: 8px 0; } .typing i { width: 8px; height: 8px; border-radius: 50%; background: #9db3d9; animation: tp 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } @keyframes tp { 50% { transform: translateY(-5px); opacity: .5; } }
#form { display: flex; gap: 8px; padding: 14px 16px 6px; border-top: 1px solid var(--line); flex: none; }
#msg { flex: 1; min-width: 0; height: 60px; border-radius: 10px; border: 2px solid #2d73c9; background: rgba(8,12,22,.7); color: #fff; padding: 0 18px; font-size: 18px; }
#msg::placeholder { color: #8f9bb3; }
#send { width: 62px; height: 60px; border-radius: 10px; border: 0; background: var(--blue); display: grid; place-items: center; } #send:hover { background: var(--blue2); }
#chips { display: flex; gap: 8px; padding: 8px 16px 18px; flex-wrap: wrap; flex: none; }
#chips button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 11px 16px; font-size: 16px; } #chips button:hover { background: rgba(255,255,255,.14); }
#paneEdit, #paneGear { overflow-y: auto; padding: 16px 18px; gap: 12px; }
.sec { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.sec h4 { margin: 0 0 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #aebcd6; }
.sec .r { display: flex; gap: 10px; align-items: center; margin: 7px 0; font-size: 14px; } .sec .r label { width: 120px; color: #cfd8ea; flex: none; }
.sec .r input[type=range] { flex: 1; accent-color: #5b9bff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; } .grid2 b { font-variant-numeric: tabular-nums; float: right; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg button { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 14px; } .seg button.on { background: var(--blue); border-color: transparent; }
.chk { width: 100%; border-collapse: collapse; font-size: 12.5px; } .chk td, .chk th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); } .ok { color: #7bea8a; } .bad { color: #ff8d80; }
details.sci { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; } details.sci summary { cursor: pointer; font-weight: 600; } details.sci p, details.sci li { color: #cdd6e8; font-size: 13.5px; } details.sci code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.btnb { background: var(--blue); border: 0; border-radius: 9px; padding: 9px 14px; font-size: 14px; color: #fff; } .btnb.alt { background: rgba(255,255,255,.1); border: 1px solid var(--line); }

/* narrow layouts: stage on top (~60% of the height), chat panel underneath */
@media (max-width: 860px) {
  #subbar.hintonly { display: none; }
  #app { display: flex; flex-direction: column; }
  #stage { position: relative; inset: auto; height: 60%; flex: none; }
  #chat { position: relative; right: auto; top: auto; bottom: auto; width: 100%; flex: 1; min-height: 0; border-radius: 14px 14px 0 0; }
  #brand { padding: 6px 12px 8px 10px; gap: 8px; } #brand svg { width: 26px; height: 26px; } #brand h1 { font-size: 20px; } #brand p { display: none; }
  #topnav { left: 8px; right: 8px; top: 44px; transform: none; overflow-x: auto; border-radius: 10px; scrollbar-width: none; } #topnav button { height: 36px; padding: 0 11px; font-size: 13px; gap: 5px; } #topnav svg { width: 15px; height: 15px; }
  #topright { top: 5px; right: 6px; gap: 6px; } .btn-white, .btn-dark { height: 34px; padding: 0 10px; font-size: 13px; border-radius: 9px; } .btn-white svg, .btn-dark svg { width: 15px; height: 15px; } .btn-white span { display: none; }
  #tools { left: 6px; right: 6px; top: auto; bottom: 74px; flex-direction: row; padding: 3px; border-radius: 10px; overflow-x: auto; scrollbar-width: none; } #tools button { width: 50px; min-width: 50px; height: 46px; font-size: 10px; gap: 2px; } #tools svg { width: 20px; height: 20px; }
  #subbar { left: 6px; right: 6px; top: 88px; max-width: none; padding: 8px; } #subbar button { padding: 5px 9px; font-size: 12.5px; }
  #pop { left: 6px; right: 6px; top: 86px; transform: none; max-width: none; min-width: 0; max-height: 60%; overflow: auto; }
  #inspector { left: 6px; bottom: 126px; }
  #minimap { width: 78px; height: 78px; left: auto; right: 6px; top: 88px; bottom: auto; border-width: 2px; } #minimap .north { font-size: 9px; top: 0; }
  #flightHud { bottom: 128px; font-size: 10.5px; gap: 8px; padding: 3px 9px; } #flightHud .bar { width: 44px; }
  #actions { left: 50%; bottom: 6px; transform: translateX(-50%); gap: 12px; } #actions button { width: 60px; height: 60px; border-radius: 14px; } #actions button b { font-size: 11px; } #actions svg { width: 20px; height: 20px; }
  #tabs { height: 50px; } #tabs button { padding: 0 12px; font-size: 14px; gap: 7px; } .av, #tabs .av { width: 34px; height: 34px; } .msg .ua { width: 34px; height: 34px; } .msg .ab, .msg .ub { font-size: 14px; }
  #msg { height: 44px; font-size: 14px; } #send { height: 44px; width: 48px; } #chips button { padding: 7px 10px; font-size: 13px; } #chips { padding: 6px 12px 10px; }
  #toast { top: 128px; }
  #loading span { font-size: 14px; }
}
@media (max-width: 1280px) and (min-width: 861px) {
  #brand h1 { font-size: 34px; } #brand p { font-size: 14px; } #topnav button { padding: 0 13px; height: 48px; font-size: 15px; } #topnav { top: 12px; } .btn-white, .btn-dark { height: 48px; font-size: 15px; padding: 0 16px; }
  #tools button { width: 70px; height: 68px; font-size: 12.5px; } #tools { top: 96px; } #subbar { left: 96px; top: 100px; }
  #minimap { width: 190px; height: 190px; } #actions button { width: 80px; height: 80px; } #actions button b { font-size: 15px; } #flightHud { bottom: 106px; }
  #chat { top: 84px; } #tabs { height: 56px; } #tabs button { font-size: 16px; } .av, #tabs .av { width: 40px; height: 40px; } .msg .ab, .msg .ub { font-size: 15px; } #msg { height: 50px; font-size: 16px; } #send { height: 50px; } #chips button { font-size: 14px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
#app.play #chat, #app.play #subbar, #app.play #inspector, #app.play #pop { display: none; }
#camBtn { background: rgba(255,255,255,.12); border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; font-size: 12px; }

@media (max-width: 1500px) and (min-width: 861px) { #topnav { left: 292px; transform: none; } #topnav button { padding: 0 14px; } }
@media (max-width: 1280px) and (min-width: 861px) { #topnav button { padding: 0 11px; gap: 6px; font-size: 14.5px; } #topnav svg[width="16"] { display: none; } }