.approach-sections{max-width:1100px}.approach-panel{overflow:hidden}.approach-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.approach-heading h2{margin:.15rem 0}.approach-kicker{color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.approach-meta{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.approach-meta span,.approach-scorebar span{border:1px solid var(--line);border-radius:999px;padding:.45rem .7rem;font-weight:700}.approach-difficulties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:1rem 0}.approach-difficulties button{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}.approach-difficulties button[aria-selected="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:inset 0 0 0 1px var(--accent)}.approach-difficulties button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}.approach-difficulties span,.approach-difficulties strong,.approach-difficulties small{display:block}.approach-difficulties small{margin-top:.15rem;color:var(--muted);font-size:.7rem}.approach-difficulties em{padding:.25rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--line) 55%,transparent);color:var(--muted);font-size:.63rem;font-style:normal;font-weight:800}.approach-difficulties button[data-status="complete"] em{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.approach-difficulties button[data-status="playing"] em{color:var(--accent-2)}.approach-scorebar{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.approach-airspace{position:relative;min-height:490px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--panel)) 0 68%,color-mix(in srgb,var(--ink) 8%,var(--panel)) 68%)}.approach-lanes{display:grid;grid-template-columns:repeat(var(--lane-count,3),1fr);gap:clamp(.5rem,2vw,1.2rem);padding:1rem 1rem 150px}.approach-lane{position:relative;min-height:275px;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-bottom:0;border-radius:50% 50% 0 0/18% 18% 0 0;padding:.75rem}.approach-lane:nth-child(1){transform:rotate(4deg)}.approach-lane:nth-child(3){transform:rotate(-4deg)}.approach-lane-label{display:block;text-align:center;color:var(--muted);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.approach-queue{display:flex;flex-direction:column;gap:.55rem;margin-top:.65rem}.approach-aircraft{appearance:none;width:100%;min-height:62px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);display:grid;grid-template-columns:auto 1fr;align-items:center;text-align:left;gap:.65rem;padding:.55rem .7rem;box-shadow:0 8px 20px rgba(0,0,0,.08);touch-action:pan-x}.approach-aircraft:not(.is-front){opacity:.62;pointer-events:none;transform:scale(.92)}.approach-aircraft.is-front{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 22px rgba(0,0,0,.12);cursor:pointer}.approach-aircraft.is-selected{background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.approach-plane-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 15%,var(--panel));font-weight:900;text-transform:uppercase}.approach-aircraft[data-size="heavy"] .approach-plane-icon{font-size:1.1rem}.approach-aircraft-copy{display:grid;gap:.15rem}.approach-aircraft-copy strong{text-transform:capitalize}.approach-fuel{display:flex;gap:.22rem}.approach-fuel i{width:9px;height:15px;border-radius:3px;background:var(--accent)}.approach-fuel i.spent{background:var(--line)}.approach-preview{font-size:.68rem;color:var(--muted)}.approach-merge{position:absolute;left:50%;bottom:116px;width:42%;height:52px;transform:translateX(-50%);border-bottom:3px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:50%}.approach-runway-zone{position:absolute;left:0;right:0;bottom:0;height:128px;display:grid;grid-template-columns:1fr minmax(150px,35%) 1fr;align-items:center}.approach-wake{grid-column:1;text-align:center;font-weight:700}.approach-wake span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase}.approach-wake div{font-size:1.25rem;min-height:2rem}.approach-runway{grid-column:2;height:82px;background:#303638;border:5px solid #d4d8d6;display:flex;align-items:center;justify-content:space-around;transform:perspective(150px) rotateX(7deg)}.approach-runway i{height:28px;width:5px;background:#fff}.approach-status{min-height:1.7rem;margin:.8rem 0;color:var(--muted)}.approach-status.is-warning{color:#b06b27}.approach-actions{display:grid;grid-template-columns:1fr auto auto auto;gap:.55rem;align-items:center}.approach-actions>div{display:grid}.approach-actions>div span{font-size:.72rem;color:var(--muted);text-transform:uppercase}.approach-result-actions{display:flex;gap:.6rem;flex-wrap:wrap}.approach-share-preview{white-space:pre-wrap;border:1px solid var(--line);border-radius:14px;padding:1rem;margin-top:1rem}.approach-rules summary{cursor:pointer}.approach-rules summary span{display:flex;justify-content:space-between}.approach-rules-body{padding-top:1rem}.approach-tutorial{max-width:520px;border:1px solid var(--line);border-radius:22px;padding:1.4rem;background:var(--panel);color:var(--ink)}.approach-tutorial::backdrop{background:rgba(8,15,12,.7);backdrop-filter:blur(4px)}.approach-tutorial-scene{height:110px;display:flex;align-items:center;justify-content:space-around;border-radius:16px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));font-weight:900;font-size:1.4rem}.tutorial-clouds{letter-spacing:.2rem;animation:wake-fade 3s ease-in-out infinite}.tutorial-arrow{color:var(--accent);font-size:2rem}@keyframes wake-fade{0%,35%{opacity:1}65%,100%{opacity:.32}}
.approach-training-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:-.25rem 0 1rem;padding:.65rem .8rem;border:1px dashed var(--line);border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,var(--panel))}.approach-training-card div{display:grid;gap:.1rem}.approach-training-card small{color:var(--muted)}.approach-training-card button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
@media(max-width:700px){.approach-intro{margin-bottom:1rem}.approach-heading{display:block}.approach-meta{justify-content:flex-start}.approach-difficulties{gap:.35rem}.approach-difficulties button{display:grid;min-height:76px;align-content:space-between;padding:.5rem}.approach-difficulties em{width:max-content}.approach-airspace{min-height:460px}.approach-lanes{padding:.7rem .55rem 145px;gap:.35rem}.approach-lane{padding:.45rem;min-height:270px}.approach-aircraft{display:block;text-align:center;padding:.45rem .25rem;min-height:62px}.approach-aircraft-copy{font-size:.72rem}.approach-plane-icon{margin:auto;width:29px;height:29px}.approach-actions{grid-template-columns:1fr 1fr}.approach-actions>div{grid-column:1/-1}.approach-actions .button{width:100%}.approach-actions .quiet{grid-column:1/-1}.approach-runway-zone{grid-template-columns:1fr minmax(120px,42%) 1fr}.approach-wake div{font-size:1rem}.approach-panel{padding:1rem}.approach-tutorial{width:calc(100% - 2rem)}}
@media(prefers-reduced-motion:reduce){.tutorial-clouds{animation:none}}

@media(max-width:700px){
  .approach-panel{overflow:visible;padding-bottom:175px}
  .approach-actions{
    position:fixed;
    z-index:885;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    left:10px;
    max-width:660px;
    margin-inline:auto;
    padding:10px;
    border:1px solid var(--line);
    border-radius:15px;
    background:color-mix(in srgb,var(--panel-strong) 95%,transparent);
    box-shadow:0 16px 42px rgba(0,0,0,.26);
    backdrop-filter:blur(16px)
  }
}
.approach-queue{flex-direction:column-reverse;justify-content:flex-start;min-height:230px}.approach-aircraft{-webkit-touch-callout:none;user-select:none}

/* Supplied game-visual kit integration. */
.approach-airspace {
  min-height: 560px;
  border-color: var(--gv-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--gv-cyan) 10%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--gv-blue) 5%, var(--gv-bg)), var(--gv-bg));
  color: var(--gv-text);
}

.approach-board-label {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 18px;
  display: grid;
  color: var(--gv-text);
  font-size: .8rem;
  font-weight: 850;
}
.approach-board-label,
.approach-merge,
.approach-go-around-path,
.approach-runway-zone,
.approach-lane::before { pointer-events: none; }
.approach-board-label small { margin-top: 2px; color: var(--gv-muted); font-size: .62rem; font-weight: 650; }

.approach-priority-strip {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 2px solid var(--gv-red);
  border-radius: 10px;
  background: color-mix(in srgb, var(--gv-red) 16%, var(--gv-bg));
  color: var(--gv-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gv-red) 15%, transparent);
  animation: approach-priority-once 560ms ease-out 1;
}
.approach-priority-strip[hidden] { display: none; }
.approach-priority-strip strong { color: var(--gv-red); font: 900 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; }
.approach-priority-strip span { font-size: .7rem; font-weight: 750; text-align: right; }
.approach-airspace[data-priority-state="active"] .approach-board-label { display: none; }
.approach-airspace[data-priority-state="active"] .approach-lanes { padding-top: 82px; }
@keyframes approach-priority-once { from { opacity: .25; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.approach-lanes {
  position: relative;
  z-index: 2;
  min-height: 430px;
  padding: 62px 18px 145px;
  gap: clamp(3px, 1.6vw, 18px);
}

.approach-lane {
  position: relative;
  min-width: 0;
  min-height: 340px;
  padding: 8px;
  border: 0;
  transform: none !important;
}

.approach-lane::before {
  position: absolute;
  z-index: -1;
  top: 26px;
  bottom: -115px;
  left: 50%;
  width: 5px;
  border-radius: 999px;
  background: repeating-linear-gradient(to bottom, var(--gv-line) 0 9px, transparent 9px 18px);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--gv-line) 30%, transparent);
  content: "";
  transform-origin: 50% 100%;
}
.approach-lane:first-child::before { transform: rotate(-14deg); }
.approach-lane:last-child::before { transform: rotate(14deg); }
.approach-lane:only-child::before,
.approach-lane:nth-child(2):last-child::before { transform: rotate(10deg); }

.approach-lane-label { position: relative; z-index: 2; color: var(--gv-muted); }
.approach-queue { min-height: 275px; gap: 5px; margin-top: 4px; }

.approach-aircraft {
  position: relative;
  z-index: 2;
  width: min(100%, 150px);
  min-height: 78px;
  margin-inline: auto;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--gv-line) 76%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--gv-surface) 88%, transparent);
  color: var(--gv-text);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}
.approach-aircraft:not(.is-front) { opacity: .58; transform: scale(.88); }
.approach-aircraft.is-front {
  border-color: color-mix(in srgb, var(--gv-cyan) 65%, var(--gv-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gv-cyan) 36%, transparent), 0 10px 24px rgba(0, 0, 0, .24);
}
.approach-aircraft.is-selected { background: color-mix(in srgb, var(--gv-cyan) 9%, var(--gv-surface)); }
.approach-aircraft[data-priority="emergency"] { border-style: dashed; border-color: var(--gv-amber); opacity: .9; }
.approach-aircraft[data-priority="emergency"].is-front { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gv-red) 35%, transparent), 0 10px 24px rgba(0, 0, 0, .24); }
.approach-aircraft[data-locked="true"] { border-style: dotted; opacity: .34; filter: grayscale(.7); cursor: not-allowed; }
.approach-priority-badge { display: inline-grid; width: max-content; margin-top: 2px; padding: 2px 4px; border: 1px solid var(--gv-amber); border-radius: 4px; color: var(--gv-amber); font: 900 .48rem/1.05 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-align: center; }
.approach-aircraft:focus-visible { outline: 3px solid var(--gv-cyan); outline-offset: 2px; }

.approach-plane-icon {
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: transparent;
}
.approach-plane-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.approach-plane-shape { color: var(--gv-cyan); }
.approach-aircraft[data-size="heavy"] .approach-plane-shape { color: var(--gv-blue); }
.approach-aircraft[data-size="small"] .approach-plane-shape { color: var(--gv-green); }
.approach-aircraft .gv-state-ring,
.approach-state-icon { opacity: 0; transition: opacity 160ms ease; fill: none; }
.approach-aircraft.is-selected .gv-state-ring,
.approach-aircraft.is-selected .approach-state-icon { opacity: 1; }
.approach-aircraft[data-gv-state="safe"] .approach-state-icon { color: var(--gv-green); }
.approach-aircraft[data-gv-state="caution"] .approach-state-icon { color: var(--gv-amber); }
.approach-aircraft[data-gv-state="blocked"] .approach-state-icon { color: var(--gv-red); }

.approach-aircraft-copy { gap: 1px; }
.approach-aircraft-copy strong { color: var(--gv-text); font: 800 .74rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.approach-category { color: var(--gv-muted); font-size: .57rem; text-transform: uppercase; }
.approach-fuel i { width: 8px; height: 8px; border-radius: 50%; background: var(--gv-cyan); }
.approach-fuel i.spent { background: transparent; border: 1px solid var(--gv-muted); }

.approach-merge {
  z-index: 1;
  bottom: 105px;
  width: 48%;
  height: 95px;
  border-bottom: 4px solid var(--gv-line);
  border-radius: 50%;
}

.approach-go-around-path {
  position: absolute;
  z-index: 1;
  right: 17%;
  bottom: 102px;
  width: 115px;
  height: 105px;
  border: 4px dashed var(--gv-cyan);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: .62;
  transform: rotate(-18deg);
}
.approach-go-around-path::after { position: absolute; top: -7px; right: 11px; border: 8px solid transparent; border-left-color: var(--gv-cyan); content: ""; transform: rotate(28deg); }
.approach-go-around-path span { position: absolute; top: -24px; right: 0; color: var(--gv-cyan); font-size: .57rem; font-weight: 800; text-transform: uppercase; }

.approach-runway-zone { z-index: 4; height: 132px; grid-template-columns: 1fr minmax(95px, 22%) 1fr; }
.approach-runway { grid-column: 2; justify-self: center; width: 86px; height: 126px; object-fit: contain; background: transparent; border: 0; transform: none; }
.approach-wake { grid-column: 1; color: var(--gv-text); }
.approach-wake > span { color: var(--gv-muted); }
#approach-clouds { display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 0; }
.approach-wake-cloud { width: 38px; height: 38px; margin-inline: -5px; color: var(--gv-amber); overflow: visible; }
.approach-wake-clear { color: var(--gv-green); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.approach-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.approach-result > .gv-completion-badge { width: 190px; }
.approach-difficulties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.approach-result-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.approach-result-details div { padding: 10px; border: 1px solid var(--gv-line); border-radius: 10px; background: var(--gv-bg); }
.approach-result-details dt { color: var(--gv-muted); font-size: .7rem; text-transform: uppercase; }
.approach-result-details dd { margin: 4px 0 0; font-weight: 800; }
.approach-result-actions,
.approach-share-preview { grid-column: 1 / -1; }

.approach-tutorial-scene { color: var(--gv-text); background: var(--gv-bg); }
.tutorial-plane { width: 58px; height: 58px; color: var(--gv-cyan); overflow: visible; }
.tutorial-heavy { color: var(--gv-blue); }
.tutorial-small { color: var(--gv-green); }
.tutorial-priority-plane { display: grid; place-items: center; color: var(--gv-amber); font: 900 .48rem/1.05 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.tutorial-priority-plane b { padding: 2px 4px; border: 1px solid currentColor; border-radius: 4px; }
.tutorial-clouds { display: flex; gap: 0; color: var(--gv-amber); }
.tutorial-clouds svg { width: 34px; height: 34px; margin-inline: -6px; }
.tutorial-cloud-third { display: none; }
.tutorial-arrow { width: 40px; height: 40px; color: var(--gv-cyan); }
.approach-tutorial-scene { cursor: pointer; }
.approach-tutorial-scene .tutorial-clouds,
.approach-tutorial-scene .tutorial-priority-plane,
.approach-tutorial-scene .tutorial-arrow { opacity: .2; transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease; }
.approach-tutorial-scene[data-step="0"] .tutorial-heavy { filter: drop-shadow(0 0 7px var(--gv-green)); }
.approach-tutorial-scene .tutorial-clouds { opacity: 1; }
.approach-tutorial-scene:is([data-step="0"], [data-step="1"], [data-step="2"], [data-step="3"]) .tutorial-priority-plane { opacity: 1; }
.approach-tutorial-scene[data-step="0"] .tutorial-priority-plane { filter: drop-shadow(0 0 7px var(--gv-red)); }
.approach-tutorial-scene:is([data-step="3"], [data-step="4"]) .tutorial-arrow { opacity: 1; transform: rotate(18deg); }
.approach-tutorial-scene:is([data-step="3"], [data-step="4"]) .tutorial-priority-plane { filter: drop-shadow(0 0 8px var(--gv-green)); }
.approach-tutorial-scene[data-outcome="conflict"] .tutorial-priority-plane { filter: drop-shadow(0 0 9px var(--gv-red)); }
.approach-tutorial-scene[data-outcome="conflict"] .tutorial-clouds { color: var(--gv-red); }
.approach-tutorial-scene[data-outcome="conflict"] .tutorial-cloud-third { display: block; }
.approach-tutorial-scene[data-outcome="safe"] :is(.tutorial-cloud-second, .tutorial-cloud-third) { display: none; }
.approach-tutorial-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.approach-tutorial-choices[hidden] { display: none; }

@media (max-width: 700px) {
  .approach-airspace { min-height: 510px; }
  .approach-board-label small { display: none; }
  .approach-lanes { min-height: 390px; padding: 58px 5px 140px; }
  .approach-lane { min-height: 310px; padding-inline: 2px; }
  .approach-aircraft { display: grid; min-height: 70px; grid-template-columns: 44px minmax(0, 1fr); padding: 3px; text-align: left; }
  .approach-plane-icon { width: 44px; height: 44px; margin: 0; }
  .approach-aircraft-copy { font-size: .66rem; }
  .approach-go-around-path { right: 6%; transform: scale(.78) rotate(-18deg); }
  .approach-result { grid-template-columns: 1fr; }
  .approach-difficulties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach-result-details { grid-template-columns: 1fr 1fr; }
  .approach-result > .gv-completion-badge { width: min(220px, 100%); }
  .approach-training-card { align-items: stretch; }
  .approach-training-card .button { flex: 0 0 auto; }
  .approach-priority-strip { display: grid; gap: 2px; }
  .approach-priority-strip span { text-align: left; }
  .approach-airspace[data-priority-state="active"] .approach-lanes { padding-top: 105px; }
  .approach-lanes[data-lane-count="4"] .approach-aircraft {
    position: relative;
    min-height: 74px;
    grid-template-columns: minmax(30px, 43%) minmax(0, 1fr);
    gap: 2px;
    padding: 3px 3px 17px;
  }
  .approach-lanes[data-lane-count="4"] .approach-plane-icon {
    width: min(39px, 100%);
    height: 39px;
    justify-self: center;
  }
  .approach-lanes[data-lane-count="4"] .approach-aircraft-copy {
    min-width: 0;
    font-size: .58rem;
  }
  .approach-lanes[data-lane-count="4"] .approach-aircraft-copy strong { font-size: .68rem; }
  .approach-lanes[data-lane-count="4"] .approach-category {
    overflow: hidden;
    font-size: .49rem;
    text-overflow: clip;
    white-space: nowrap;
  }
  .approach-lanes[data-lane-count="4"] .approach-fuel {
    position: absolute;
    right: 4px;
    bottom: 5px;
    left: 4px;
    justify-content: center;
    gap: 2px;
  }
  .approach-lanes[data-lane-count="4"] .approach-fuel i {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
  }
}

@media (forced-colors: active) {
  .approach-lane::before,
  .approach-go-around-path { forced-color-adjust: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .approach-priority-strip { animation: none; }
}