/* Keyboard zones stay in the same left-to-right order as a real keyboard. */
.pilot-guide{--pilot-key-size:31px;--pilot-key-gap:5px;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;color:#dce8eb;text-align:left}
.pilot-keyzone{--pilot-color:#c6f88c;--pilot-line:#6b8d60;--pilot-fill:rgba(198,248,140,.08);padding:16px;border:1px solid #53724866;border-top:2px solid var(--pilot-color);border-radius:8px;background:linear-gradient(135deg,var(--pilot-fill),transparent 80%),#0b1825}
.pilot-keyzone-p2{--pilot-color:#facf83;--pilot-line:#a98c57;--pilot-fill:rgba(250,207,131,.07);border-color:#94754e66;border-top-color:var(--pilot-color)}
.pilot-guide-heading{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.pilot-guide-ship{width:30px;height:34px;flex:none;color:var(--pilot-color);fill:#203c3c;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.pilot-keyzone-p2 .pilot-guide-ship{fill:#41382b}
.pilot-guide-window{fill:var(--pilot-color);stroke:none}
.pilot-guide-flame{fill:none;stroke-linecap:round;opacity:.65}
.pilot-guide-heading strong{display:block;color:var(--pilot-color);font:750 15px ui-monospace,monospace;letter-spacing:.2px}
.pilot-guide-heading strong span{font:600 12px "Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;color:#d4e0e5;margin-left:8px;letter-spacing:0}
.pilot-guide-heading small{display:block;font-size:10px;color:#91a8b7;margin-top:5px}
.pilot-key-layout{display:grid;grid-template-rows:var(--pilot-key-size) var(--pilot-key-size) auto;gap:var(--pilot-key-gap);width:max-content;margin:0 auto}
.pilot-key-layout-p1{grid-template-columns:repeat(5,var(--pilot-key-size))}
.pilot-key-layout-p2{grid-template-columns:var(--pilot-key-size) var(--pilot-key-size) 10px repeat(3,var(--pilot-key-size))}
.pilot-key{display:inline-grid;place-items:center;min-width:var(--pilot-key-size);height:var(--pilot-key-size);padding:0;border:1px solid var(--pilot-line,#6b8d60);border-bottom:3px solid var(--pilot-line,#6b8d60);border-radius:5px;background:linear-gradient(#243b45,#172d38);color:#e4f2e3;font:650 15px ui-monospace,monospace;box-shadow:0 2px 0 #0004;transition:background .1s,box-shadow .1s,transform .1s;user-select:none}
.pilot-keyzone-p2 .pilot-key{background:linear-gradient(#3a3836,#292c2d);color:#ffdf9f}
.pilot-key.held{background:var(--pilot-color,#c6f88c);border-color:var(--pilot-color,#c6f88c);color:#152315;box-shadow:0 0 16px color-mix(in srgb,var(--pilot-color,#c6f88c) 30%,transparent);transform:translateY(2px)}
.pilot-keyzone-p1 .pilot-key-up{grid-area:1/2}
.pilot-keyzone-p1 .pilot-key-left{grid-area:2/1}
.pilot-keyzone-p1 .pilot-key-down{grid-area:2/2}
.pilot-keyzone-p1 .pilot-key-right{grid-area:2/3}
.pilot-keyzone-p1 .pilot-key-missile{grid-area:2/4}
.pilot-keyzone-p1 .pilot-key-hyper{grid-area:2/5}
.pilot-keyzone-p2 .pilot-key-up{grid-area:1/5}
.pilot-keyzone-p2 .pilot-key-left{grid-area:2/4}
.pilot-keyzone-p2 .pilot-key-down{grid-area:2/5}
.pilot-keyzone-p2 .pilot-key-right{grid-area:2/6}
.pilot-keyzone-p2 .pilot-key-missile{grid-area:2/1}
.pilot-keyzone-p2 .pilot-key-hyper{grid-area:2/2}
.pilot-key.pilot-key-punctuation{font-size:24px;padding-bottom:6px}
.pilot-key-caption{font-size:9px;line-height:1.4;white-space:nowrap;text-align:center;color:#abc0cb;padding-top:2px}
.pilot-keyzone-p1 .pilot-move-caption{grid-area:3/1/4/4}
.pilot-keyzone-p1 .pilot-missile-caption{grid-area:3/4}
.pilot-keyzone-p1 .pilot-hyper-caption{grid-area:3/5}
.pilot-keyzone-p2 .pilot-move-caption{grid-area:3/4/4/7}
.pilot-keyzone-p2 .pilot-missile-caption{grid-area:3/1}
.pilot-keyzone-p2 .pilot-hyper-caption{grid-area:3/2}
.modal .pilot-guide-note,.pilot-guide-note{font-size:9px;line-height:1.5;color:#809aa9;text-align:center;margin:12px 0 0}
.pilot-guide-support{display:flex;flex-direction:column;justify-content:center;padding:18px;border:1px solid #34505f;border-radius:8px;background:#0c1b29}
.pilot-guide-support>strong{color:#cae8da;font-size:12px;font-weight:650;line-height:1.6}
.pilot-guide-support>strong>span{font-size:16px;color:#94b5b3;margin-right:5px}
.modal .pilot-guide-support>p,.pilot-guide-support>p{font-size:11px;line-height:1.8;color:#9bb1bd;margin:8px 0 12px;word-break:keep-all}
.pilot-guide-orders{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pilot-guide-orders>span{display:flex;gap:5px;align-items:center;font-size:10px;white-space:nowrap;color:#bbced4}
.pilot-guide-orders .pilot-key{min-width:23px;height:25px;font-size:11px;border-color:#486275;background:#17303c}
.pilot-guide-compact{--pilot-key-size:28px;--pilot-key-gap:4px;gap:10px;margin:10px 0}
.pilot-guide-compact .pilot-keyzone{padding:11px 13px}
.pilot-guide-compact .pilot-guide-heading{margin-bottom:8px;gap:8px}
.pilot-guide-compact .pilot-guide-heading strong{font-size:13px}
.pilot-guide-compact .pilot-guide-heading strong span{font-size:11px}
.pilot-guide-compact .pilot-guide-heading small{font-size:9px;margin-top:3px}
.pilot-guide-compact .pilot-guide-ship{width:25px;height:29px}
.pilot-guide-compact .pilot-guide-note{margin-top:8px;font-size:8px}
.pilot-guide-compact .pilot-guide-support{padding:12px 15px}
.pilot-guide-compact .pilot-guide-support>p{font-size:10px;margin:5px 0 8px}
.pilot-guide-compact .pilot-guide-support>strong{font-size:11px}
.pilot-panel.p2 .pilot-label b,.pilot-panel.p2 .ability kbd{color:#facf83}
.pilot-panel.p2 .ability kbd{border-color:#9a7a4d}
.ability.held{border-color:#c6f88c;background:#304b32;box-shadow:0 0 16px #c6f88c22;transform:translateY(1px)}
.pilot-panel.p2 .ability.held{border-color:#facf83;background:#483d2c;box-shadow:0 0 16px #facf8322}

/* Flight school uses the real game beneath a small top/bottom instruction frame. */
#flight-school.flight-school{position:fixed;inset:78px 0 0;z-index:25;pointer-events:none;overflow:hidden}
.school-header{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 40px));padding:16px 24px 14px;border:1px solid #79a69766;border-radius:9px;background:linear-gradient(120deg,#16312ded,#102131f5);box-shadow:0 9px 35px #02091040;backdrop-filter:blur(15px);text-align:center;pointer-events:auto}
.school-kicker{display:flex;align-items:center;justify-content:center;gap:13px;color:#c6f88c;font-size:10px;font-weight:650;letter-spacing:.5px}
#school-progress{display:inline-flex;align-items:center;padding:4px 8px;background:#bddf9510;border:1px solid #a9c88d33;border-radius:20px;font-size:10px;color:#b4c7bd;letter-spacing:0}
#school-title{margin:8px 0 6px;font-size:24px;letter-spacing:-.6px;line-height:1.3;color:#f1f8ee;word-break:keep-all}
#school-instruction{font-size:14px;line-height:1.65;color:#d1e4e3;margin:0;word-break:keep-all}
#school-instruction b,#school-instruction strong{color:#c6f88c}
#school-tip{font-size:11px;line-height:1.6;color:#98b5bf;margin:6px 0 0;word-break:keep-all}
.school-checks{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.school-checks>*{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:25px;padding:4px 10px;border:1px solid #47606b;border-radius:20px;font-size:10px;line-height:1.3;color:#b1c6cf;background:#0a1b27}
.school-checks>.done,.school-checks .done{background:#c6f88c13;border-color:#8bb16e;color:#d7f4b9}

.school-bottom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(900px,calc(100% - 40px));pointer-events:auto}
#school-controls .pilot-guide{margin:0;gap:12px;grid-template-columns:1fr 1fr}
#school-controls .pilot-keyzone,#school-controls .pilot-guide-support{background-color:#0c1927ef;backdrop-filter:blur(12px)}
#school-controls .pilot-keyzone{padding:11px 20px}
#school-controls .pilot-guide-heading{float:left;width:48%;margin:7px 0 0;gap:9px}
#school-controls .pilot-guide-heading strong span{display:block;margin:4px 0 0;font-size:11px}
#school-controls .pilot-guide-heading small{font-size:9px;max-width:115px;line-height:1.5}
#school-controls .pilot-key-layout{margin-left:auto;margin-right:0}
#school-controls .pilot-guide-note{display:none}
#school-controls .pilot-guide-support{padding:14px 20px}
#school-controls .pilot-guide-support>p{margin:5px 0 8px;font-size:10px}
#school-controls .pilot-guide-support>p br{display:none}
.school-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 0}
.school-actions .secondary{padding:11px 17px;background:#152a39ee;font-size:12px;min-height:43px}
.school-actions .primary{min-width:200px;min-height:43px;justify-content:center;padding:11px 20px;font-size:13px;gap:14px;box-shadow:0 3px 18px #06101a70}
.school-actions .primary:disabled{opacity:1;background:#29403b;color:#9bb3a6;border:1px solid #547063;box-shadow:none}
#school-feedback{flex:1;color:#c1dbc9;font-size:11px;line-height:1.5;text-align:center;word-break:keep-all;text-shadow:0 1px 5px #03111f}
.school-orders{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.school-orders>span{display:flex;align-items:center;font-size:10px;color:#adc8ba;padding:0 5px;text-shadow:0 1px 5px #03111f}
.school-orders button{display:flex;gap:8px;align-items:center;justify-content:center;min-height:36px;min-width:105px;padding:7px 12px;border:1px solid #456373;background:#142d3d;border-radius:5px;color:#d1e3e9;font-size:11px;pointer-events:auto}
.school-orders button kbd{display:inline-grid;place-items:center;min-width:22px;height:21px;border:1px solid #627e77;border-bottom-width:2px;border-radius:3px;color:#c6f88c;font:11px ui-monospace,monospace}
.school-orders button.active,.school-orders button.done{border-color:#9fc678;background:#2b4030;color:#e1f5ca}
.training-screen #hud,.training-screen .route,.training-screen .save-label{display:none!important}
.training-screen .vignette{background:linear-gradient(0deg,#05101a77,transparent 30%,transparent 65%,#05101a33)}
#flight-school:is([data-kind="move"],[data-kind="movement"]) .pilot-key:is(.pilot-key-up,.pilot-key-left,.pilot-key-down,.pilot-key-right),#flight-school[data-kind="missile"] .pilot-key-missile,#flight-school:is([data-kind="hyper"],[data-kind="warp"]) .pilot-key-hyper{outline:2px solid var(--pilot-color,#c6f88c);outline-offset:2px;box-shadow:0 0 15px #9bbdaa19}
#flight-school[data-kind="orders"] .school-orders button{box-shadow:0 0 0 1px #9fca7655}

@media(max-width:1100px){
  .school-bottom{width:min(820px,calc(100% - 32px))}
  #school-controls .pilot-keyzone{padding:10px 13px}
  #school-controls .pilot-guide-heading{width:42%;gap:5px}
  #school-controls .pilot-guide-heading small{font-size:8px;max-width:96px}
  #school-controls .pilot-guide-ship{width:21px}
}
@media(max-height:820px) and (min-width:701px){
  .school-header{top:9px;padding:12px 20px 10px}
  #school-title{font-size:21px;margin:6px 0 4px}
  #school-instruction{font-size:12px;line-height:1.55}
  #school-tip{font-size:10px;margin-top:4px}
  .school-checks{margin-top:7px;gap:6px}
  .school-checks>*{font-size:9px;min-height:23px;padding:3px 9px}
  .school-bottom{bottom:10px}
  #school-controls .pilot-guide{--pilot-key-size:26px;--pilot-key-gap:4px}
  #school-controls .pilot-keyzone{padding-top:9px;padding-bottom:9px}
  #school-controls .pilot-guide-support{padding:10px 17px}
  .school-actions{padding-top:8px}
  .school-actions .primary,.school-actions .secondary{min-height:38px;padding-top:9px;padding-bottom:9px;font-size:12px}
  .school-orders{margin-top:7px}
  .school-orders button{min-height:31px;padding:5px 10px}
}
@media(max-width:700px){
  .pilot-guide{--pilot-key-size:30px;grid-template-columns:1fr;gap:10px;margin:15px 0}
  .pilot-keyzone{padding:14px 16px}
  .pilot-guide-heading{margin-bottom:10px}
  .pilot-guide-heading strong span{font-size:12px}
  .pilot-key-layout-p2{grid-template-columns:var(--pilot-key-size) var(--pilot-key-size) 15px repeat(3,var(--pilot-key-size))}
  .pilot-guide-support{padding:14px 16px}
  .pilot-guide-support>p br{display:none}
  .pilot-guide-compact{--pilot-key-size:28px}
  #flight-school.flight-school{inset:60px 0 0}
  .school-header{top:8px;width:calc(100% - 20px);padding:12px 13px}
  .school-kicker{font-size:9px;gap:8px}
  #school-progress{font-size:9px}
  #school-title{font-size:19px;margin:7px 0 5px}
  #school-instruction{font-size:12px;line-height:1.6}
  #school-tip{font-size:10px;margin-top:5px}
  .school-checks{gap:6px;margin-top:8px}
  .school-checks>*{font-size:9px;padding:4px 8px;min-height:23px}
  .school-bottom{bottom:10px;width:calc(100% - 20px)}
  #school-controls{max-height:30dvh;overflow:auto;border-radius:7px;scrollbar-width:thin}
  #school-controls .pilot-guide{--pilot-key-size:26px;--pilot-key-gap:4px;grid-template-columns:1fr;gap:7px}
  #school-controls .pilot-keyzone{padding:9px 13px}
  #school-controls .pilot-guide-heading{width:44%;margin-top:5px;gap:6px}
  #school-controls .pilot-guide-heading strong span{font-size:10px}
  #school-controls .pilot-guide-heading small{max-width:100px;font-size:8px}
  #school-controls .pilot-guide-ship{width:24px}
  #school-controls .pilot-guide-support{padding:10px 13px}
  #school-controls .pilot-guide-support>p{display:none}
  #school-controls .pilot-guide-orders{margin-top:7px;gap:14px}
  .school-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px}
  #school-feedback{grid-column:1/-1;grid-row:1;font-size:10px;line-height:1.4}
  #school-exit{grid-column:1;grid-row:2}
  #school-next{grid-column:2;grid-row:2}
  .school-actions .primary{min-width:0;flex:1;font-size:11px;padding:11px 10px;min-height:40px}
  .school-actions .secondary{font-size:11px;padding:10px 12px;min-height:40px}
  .school-orders{gap:5px;margin-top:8px}
  .school-orders button{min-width:87px;min-height:31px;font-size:10px;padding:5px 8px;gap:6px}
}
@media(max-height:620px){
  .school-header{padding-top:8px;padding-bottom:8px}
  #school-tip{display:none}
  #school-title{font-size:17px;margin:4px 0}
  #school-instruction{font-size:11px}
  .school-checks{margin-top:5px}
  #school-controls .pilot-guide-heading small{display:none}
  #school-controls .pilot-guide{--pilot-key-size:22px;--pilot-key-gap:3px}
  #school-controls .pilot-key{font-size:12px}
  #school-controls .pilot-key-punctuation{font-size:20px}
  #school-controls .pilot-keyzone{padding:7px 12px}
  #school-controls .pilot-key-caption{font-size:8px}
  #school-controls .pilot-guide-support>p{display:none}
  #school-controls .pilot-guide-support{padding:8px 14px}
  #school-controls .pilot-guide-orders{margin-top:7px}
}

@media(max-width:400px){
  #school-controls .pilot-guide-heading{width:32%;margin-top:8px}
  #school-controls .pilot-guide-heading .pilot-guide-ship{display:none}
  #school-controls .pilot-guide-heading small{display:none}
  #school-controls .pilot-keyzone{padding:9px 10px}
  #school-controls .pilot-guide-heading strong span{font-size:9px}
  #school-controls .pilot-guide{--pilot-key-size:24px;--pilot-key-gap:4px}
  #school-controls .pilot-key-caption{font-size:8px}
  #school-controls{max-height:32dvh}
}