*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05080f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e8f0ff;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}
#app{position:fixed;inset:0}
#gl,#hud{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#05080f;font-size:14px;letter-spacing:3px;color:#7aa0d0;z-index:50}
/* radio */
#radio{position:absolute;top:calc(8px + env(safe-area-inset-top));left:8px;width:min(440px,calc(100% - 16px));background:rgba(8,14,26,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(120,170,255,.25);border-radius:12px;padding:8px 10px;z-index:5}
#radioHead{display:flex;gap:8px;align-items:center;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:1px;color:#8fb3e8}
#freq{color:#ffd36b;font-size:13px}
#facility{color:#cfe0ff}
#atcTarget{margin-left:auto;color:#ff5edb;font-weight:700}
.led{width:8px;height:8px;border-radius:50%;background:#234;box-shadow:0 0 0 1px #345}
.led.on{background:#3f6;box-shadow:0 0 8px #3f6}
#msgs{margin-top:6px;font-size:13px;line-height:1.35;max-height:96px;overflow:hidden;display:flex;flex-direction:column;gap:3px}
.m{opacity:.55}.m:last-child,.m.new{opacity:1}
.m .who{font:700 10px ui-monospace,Menlo,monospace;color:#7fd1ff;margin-right:5px;letter-spacing:.5px}
.m.pilot .who{color:#ffd36b}
.m.pilot{color:#ffe9b0}
#resp{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
#resp:empty{display:none}
#resp button{background:linear-gradient(#2d6cf0,#1d4fc0);border:1px solid #5d8fff;border-radius:8px;padding:7px 12px;font-weight:700;font-size:13px;box-shadow:0 2px 10px rgba(40,100,255,.35);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(80,140,255,.35)}}
#nav{position:absolute;top:calc(8px + env(safe-area-inset-top));right:8px;width:96px;height:96px;border-radius:50%;background:rgba(6,12,22,.7);border:1px solid rgba(120,170,255,.3);z-index:4}
#alerts{position:absolute;top:38%;left:50%;transform:translateX(-50%);font:800 22px ui-monospace,Menlo,monospace;color:#ff3b3b;text-shadow:0 0 10px #000;letter-spacing:2px;z-index:4;text-align:center;pointer-events:none}
#alerts .amber{color:#ffb020}
/* throttle */
#throttle{position:absolute;left:10px;bottom:calc(14px + env(safe-area-inset-bottom));width:64px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px}
#throttle .lbl,#thrVal{font:700 11px ui-monospace,Menlo,monospace;color:#9fc0ef}
#thrTrack{position:relative;width:54px;height:190px;border-radius:12px;background:rgba(8,14,26,.7);border:1px solid rgba(120,170,255,.3);overflow:hidden;touch-action:none}
#thrFill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(60,140,255,.45),rgba(60,220,160,.35))}
#thrKnob{position:absolute;left:4px;right:4px;height:26px;border-radius:6px;background:linear-gradient(#e9eef7,#9aa7bb);box-shadow:0 2px 6px #000;transform:translateY(-50%)}
/* stick */
#stick{position:absolute;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(30,50,90,.45),rgba(8,14,26,.75));border:1px solid rgba(120,170,255,.35);z-index:5;touch-action:none}
#stickKnob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dfe8f7,#6e7d96);box-shadow:0 3px 10px #000}
.stickLbl{position:absolute;bottom:-16px;width:100%;text-align:center;font:600 9px ui-monospace,Menlo,monospace;color:#7d97c0}
#btns{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:84px;right:176px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;z-index:5;max-width:420px}
#btns button,#flapInd{background:rgba(8,14,26,.75);border:1px solid rgba(120,170,255,.3);border-radius:9px;padding:8px 2px;font:700 11px ui-monospace,Menlo,monospace;color:#cfe0ff;min-height:44px}
#flapInd{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#8fb3e8}
#flapInd b{font-size:16px;color:#3f6}
#btns button.on{border-color:#3f6;color:#3f6}
#btns button.warn{border-color:#ff5050;color:#ff6b6b}
#btns button:active,#btns button.act{background:rgba(60,110,220,.6)}
#keys{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:11px ui-monospace,Menlo,monospace;color:rgba(200,220,255,.55);white-space:nowrap;display:none}
@media (pointer:fine){#stick{display:none}#btns{right:auto;left:90px;grid-template-columns:repeat(8,auto);bottom:30px}#btns button,#flapInd{padding:8px 12px}#keys{display:block}#nav{width:190px;height:190px}#throttle{bottom:30px}}
/* menu */
#menu,#result{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top,rgba(30,60,120,.55),rgba(3,6,14,.9));overflow:auto;padding:calc(12px + env(safe-area-inset-top)) 12px 12px}
.mcard{width:min(640px,100%);background:rgba(10,18,34,.82);border:1px solid rgba(120,170,255,.25);border-radius:18px;padding:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto}
.brand{font:800 24px/1 -apple-system,"SF Pro Display",Inter,sans-serif;letter-spacing:4px;margin-bottom:14px}
.brand small{display:block;font-size:10px;letter-spacing:4px;color:#7fa6e0;margin-top:6px;font-weight:600}
.star{color:#ffd36b}
.sec{margin:10px 0}
.sec label{display:block;font:700 10px ui-monospace,Menlo,monospace;letter-spacing:2px;color:#7fa6e0;margin-bottom:6px;text-transform:uppercase}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 2px;text-align:center}
.ap b{display:block;font:800 16px ui-monospace,Menlo,monospace;letter-spacing:1px}
.ap span{font-size:10px;color:#9db3d6}
.ap.sel{background:rgba(45,108,240,.35);border-color:#5d8fff}
.ap.dis{opacity:.25;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:7px 12px;font-size:13px}
.chip.sel{background:rgba(45,108,240,.4);border-color:#5d8fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row2{grid-template-columns:1fr;gap:0}}
#brief{font:12px/1.5 ui-monospace,Menlo,monospace;color:#b9cdee;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 10px;margin:10px 0}
#start,#again{width:100%;padding:14px;border-radius:12px;border:0;background:linear-gradient(90deg,#2d6cf0,#33b4ff);font:800 16px -apple-system,sans-serif;letter-spacing:2px;box-shadow:0 6px 24px rgba(50,130,255,.45)}
.foot{text-align:center;font-size:11px;color:#6f88ad;margin-top:10px}
#result h2{margin:0 0 6px;font-size:22px}
#rGrade{font:900 64px/1 -apple-system,sans-serif;margin:8px 0;background:linear-gradient(90deg,#ffd36b,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
#rBody{font:13px/1.6 ui-monospace,Menlo,monospace;color:#cfe0ff;margin-bottom:14px}
#rBody .ln{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}

:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
#radio{left:calc(8px + var(--sal))}
#nav{right:calc(8px + var(--sar))}
#throttle{left:calc(10px + var(--sal))}
#stick{right:calc(14px + var(--sar))}
#attr{position:fixed;z-index:30;right:calc(14px + var(--sar));bottom:calc(178px + var(--sab));display:flex;align-items:center;gap:3px;font:500 9px/1.3 -apple-system,system-ui,sans-serif;color:rgba(255,255,255,.8);background:rgba(0,0,0,.45);padding:2px 6px 2px 2px;border-radius:10px;max-width:min(260px,70vw);pointer-events:auto}
#attrBtn{background:none;border:0;padding:0 2px;font-size:13px;line-height:1;color:#cfe0ff;min-width:20px;min-height:20px}
#attr .af{display:none}
#attr.open .af{display:inline}#attr.open .as{display:none}#attr.open{border-radius:6px;align-items:flex-start}
#attr a,.mattr a{color:inherit}
.mattr{margin-top:10px;font:500 10px/1.35 -apple-system,system-ui,sans-serif;color:rgba(220,230,255,.7)}
/* small phones */
@media (pointer:coarse) and (orientation:portrait){#nav{width:80px;height:80px}#radio{width:calc(100% - 112px - var(--sal) - var(--sar))}#msgs{font-size:12px;max-height:84px}}
@media (pointer:coarse) and (max-height:700px) and (orientation:portrait){#thrTrack{height:140px}#stick{width:130px;height:130px}#attr{bottom:calc(158px + var(--sab))}#btns{right:calc(152px + var(--sar))}}
@media (pointer:coarse) and (orientation:landscape){#radio{width:min(300px,36vw)}#msgs{max-height:54px;font-size:12px}#nav{width:76px;height:76px}#thrTrack{height:110px}
 #stick{width:112px;height:112px;bottom:calc(22px + var(--sab))}#attr{bottom:calc(150px + var(--sab))}
 #btns{grid-template-columns:repeat(8,1fr);left:calc(84px + var(--sal));right:calc(140px + var(--sar));max-width:none;bottom:calc(8px + var(--sab))}#btns button,#flapInd{min-height:40px;padding:4px 2px}}
@media (pointer:fine){#attr{right:6px;bottom:6px;max-width:min(520px,45vw)}}