/* ===== Triple7 flight-deck landing ===== */
.deck {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(220px, 38fr) 62fr;
  background: #06070b;
  overflow: hidden;
}

/* --- Windshield --- */
.windshield {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #04050a 0%, #070b16 55%, #0b1322 78%, #131b2b 100%);
  border-bottom: 14px solid #14161c;
}
.windshield::before, .windshield::after {
  content: "";
  position: absolute; top: -6%; bottom: -2%;
  width: clamp(38px, 6vw, 90px);
  background: linear-gradient(90deg, #101218, #1a1d25 55%, #0c0e13);
  z-index: 3;
}
.windshield::before { left: -12px; transform: skewX(7deg); box-shadow: 6px 0 18px rgba(0,0,0,.65); }
.windshield::after { right: -12px; transform: skewX(-7deg); box-shadow: -6px 0 18px rgba(0,0,0,.65); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#world:active { cursor: grabbing; }

.ws-brand { font: 700 12px/1 var(--mono); letter-spacing: .34em; color: var(--gold); margin-bottom: 14px; }

/* start card (dismisses when the visitor takes controls) */
.start-card {
  position: absolute; z-index: 4; left: clamp(28px, 6vw, 80px); top: 50%; transform: translateY(-50%);
  max-width: 430px; pointer-events: none;
  padding: 20px 26px 22px; border-radius: 12px;
  /* light scrim: keeps the copy legible over the bright daytime runway without hiding the view */
  background: linear-gradient(100deg, rgba(6,9,14,.62) 0%, rgba(6,9,14,.34) 70%, rgba(6,9,14,0) 100%);
  backdrop-filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease;
}
.start-card.hide { opacity: 0; transform: translateY(-58%); }
.start-card h1 {
  font-size: clamp(24px, 2.9vw, 36px); line-height: 1.12; letter-spacing: -.01em;
  color: #eef1f7; text-shadow: 0 2px 24px rgba(0,0,0,.85); margin: 0;
}
.start-card p { margin: 12px 0 0; color: #b6bdcc; font-size: clamp(14px, 1.3vw, 16.5px); max-width: 52ch; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.start-keys {
  margin-top: 16px; display: block; max-width: 100%;
  font: 600 10.5px/1.7 var(--mono); letter-spacing: .08em; color: #7ee3a1;
  border: 1px solid rgba(126,227,161,.35); border-radius: 6px; padding: 7px 12px;
  background: rgba(8, 24, 15, .55);
}

.start-btn { color: #7ee3a1; border-color: rgba(126,227,161,.55); }
.start-btn.on { color: #ffd23e; border-color: rgba(255,210,62,.6); box-shadow: 0 0 10px rgba(255,210,62,.25); }
.start-hint {
  position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 700 11px/1.5 var(--mono); letter-spacing: .08em; color: #ffd23e; text-align: center;
  background: rgba(6,9,14,.72); border: 1px solid rgba(255,210,62,.4); border-radius: 7px;
  padding: 8px 14px; opacity: 0; transition: opacity .4s ease; pointer-events: none; max-width: 90%;
}
.start-hint.show { opacity: 1; }

/* HUD objectives */
.hud { position: absolute; z-index: 4; top: 16px; right: clamp(56px, 8vw, 120px); pointer-events: none; }
.hud-obj { list-style: none; margin: 0; padding: 10px 14px; background: rgba(5,8,12,.55); border: 1px solid rgba(126,227,161,.25); border-radius: 8px; }
.hud-obj li { font: 600 11px/1.9 var(--mono); letter-spacing: .1em; color: #93a0b5; }
.hud-obj li.ok { color: #7ee3a1; }

/* mission complete banner */
.mission-banner {
  position: absolute; z-index: 5; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.94);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: rgba(7, 10, 16, .88); border: 1px solid var(--gold); border-radius: 12px;
  padding: 26px 34px; opacity: 0; pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
}
.mission-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.mission-banner strong { font-size: 22px; color: #eef1f7; }
.mission-banner span { color: #aeb6c6; font-size: 14.5px; max-width: 40ch; }
.mission-banner .btn { margin-top: 8px; }

.ws-skip { position: absolute; right: clamp(56px, 8vw, 120px); bottom: 14px; z-index: 4; font-size: 12.5px; color: #8d96a8; }
.ws-skip a { color: #aeb6c6; }

/* --- Glareshield + panel --- */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, #23262d 0, #17191f 22px, #101216 60px, #0c0e12 100%);
  border-top: 3px solid #2c2f37;
  padding: clamp(12px, 1.6vw, 22px) clamp(12px, 2vw, 28px) clamp(16px, 2vw, 26px);
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 84px 0.95fr 1.05fr;
  gap: clamp(10px, 1.4vw, 20px);
  align-items: stretch;
}

/* --- pedestal: throttle + systems --- */
.pedestal {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #23262d, #17191f);
  border: 2px solid #2e3138; border-radius: 10px; padding: 12px 8px;
}
.ped-block { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 120px; }
.ped-tag { font: 700 9.5px/1 var(--mono); letter-spacing: .2em; color: #8d96a8; }
#throttle {
  writing-mode: vertical-lr; direction: rtl;
  width: 30px; flex: 1; accent-color: var(--gold);
  background: transparent; border: none; padding: 0; cursor: grab;
}
.ped-val { font: 700 11px/1 var(--mono); color: var(--gold-2); }
.ped-btn {
  width: 62px; padding: 8px 0; cursor: pointer;
  font: 700 9.5px/1 var(--mono); letter-spacing: .08em;
  color: #c8cdd8; background: linear-gradient(180deg, #3a3d45, #232529);
  border: 1px solid #4a4d55; border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.ped-btn.on { color: #7ee3a1; border-color: rgba(126,227,161,.6); box-shadow: 0 0 10px rgba(126,227,161,.25), inset 0 1px 0 rgba(255,255,255,.09); }
.ped-btn:active { transform: translateY(1px); }


.instr {
  background: #050607;
  border: 2px solid #26282f;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #0d0e11, inset 0 0 26px rgba(0,0,0,.9), 0 3px 10px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.instr canvas { display: block; width: 100%; height: 100%; }
.instr-tag {
  position: absolute; top: 6px; left: 10px; z-index: 2;
  font: 700 9.5px/1 var(--mono); letter-spacing: .22em; color: #56617a;
}

/* --- DU (data unit / weather) --- */
.du-screen {
  height: 100%; padding: 26px 14px 12px;
  font: 12.5px/1.75 var(--mono);
  color: #35e06e;
  text-shadow: 0 0 6px rgba(53,224,110,.55);
  white-space: pre-wrap; overflow: hidden;
}
.du-screen .amber { color: #ffb648; text-shadow: 0 0 6px rgba(255,182,72,.5); }
.du-screen .cyan { color: #5fd7e8; text-shadow: 0 0 6px rgba(95,215,232,.5); }

/* --- MCDU --- */
.mcdu {
  background: linear-gradient(180deg, #2a2d34, #1b1d23 70%, #14161b);
  border: 2px solid #34373f; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.55);
  padding: 10px 10px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 300px;
}
/* screen + keys share one grid so every LSK sits exactly on its line */
.mcdu-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  grid-template-rows: auto repeat(6, minmax(30px, 1fr)) auto;
  column-gap: 7px; row-gap: 0;
  align-items: stretch;
}
.lsk {
  align-self: center; justify-self: center;
  width: 34px; height: 24px; cursor: pointer;
  background: linear-gradient(180deg, #3a3d45, #232529);
  border: 1px solid #4a4d55; border-radius: 4px;
  color: #c8cdd8; font: 700 10px/1 var(--mono);
  box-shadow: 0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
}
.lsk:hover { border-color: var(--gold); color: var(--gold-2); }
.lsk:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(0,0,0,.5); }
/* middle-column cells stack into one continuous phosphor screen */
.mcdu-cell {
  background: #071208;
  border-left: 2px solid #101511; border-right: 2px solid #101511;
  padding: 0 10px;
  font: 11.5px/1 var(--mono);
  color: #39e070;
}
.mcdu-title {
  border-top: 2px solid #101511; border-radius: 6px 6px 0 0;
  text-align: center; font-size: 11px; letter-spacing: .16em; color: #e8edf2;
  padding-top: 9px;
}
.mcdu-subtitle {
  display: flex; justify-content: space-between;
  font-size: 8.5px; color: #4f9a68; letter-spacing: .1em;
  padding: 8px 0 4px;
}
.mcdu-line { display: flex; justify-content: space-between; align-items: center; }
.mcdu-l, .mcdu-r { color: #39e070; text-shadow: 0 0 5px rgba(57,224,112,.5); white-space: nowrap; }
.mcdu-r { color: #5fd7e8; text-shadow: 0 0 5px rgba(95,215,232,.5); }
.mcdu-scratch {
  border-bottom: 2px solid #101511; border-radius: 0 0 6px 6px;
  color: #ffb648; min-height: 26px; font-size: 11px; letter-spacing: .1em;
  text-shadow: 0 0 6px rgba(255,182,72,.5);
  display: flex; align-items: center;
  box-shadow: inset 0 8px 10px -10px rgba(0,0,0,.9);
}
.mcdu-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mcdu-key {
  height: 20px; border-radius: 3px; border: 1px solid #43464e;
  background: linear-gradient(180deg, #36393f, #232529);
  color: #9aa1af; font: 700 8px/1 var(--mono); letter-spacing: .05em;
  display: flex; align-items: center; justify-content: center;
}

/* --- annunciators over panel --- */
.annunc {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.annunc a {
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-decoration: none;
  color: #dfe5ee; background: #1b1e24; border: 1px solid #33363e; border-bottom: none;
  border-radius: 0 0 6px 6px; padding: 7px 14px 8px;
}
.annunc a:hover { color: var(--gold-2); border-color: var(--gold); }
.annunc a.lit { color: #7ee3a1; box-shadow: inset 0 -12px 18px -14px rgba(126,227,161,.8); }

/* --- responsive collapse --- */
@media (max-width: 1080px) {
  .panel { grid-template-columns: 1fr 1fr 84px; }
  #du-box { grid-column: 1 / 3; }
}
@media (max-width: 900px) {
  .deck { grid-template-rows: minmax(340px, 52dvh) auto; min-height: 0; }
  .panel { grid-template-columns: 1fr 84px; }
  #pfd-box, #nd-box { display: none; }
  #du-box { grid-column: 1 / 3; order: 3; }
  .mcdu { grid-column: 1; order: 1; }
  .pedestal { order: 2; }
  .start-card { left: 18px; right: auto; max-width: min(460px, calc(100% - 36px)); }
  .hud { top: auto; bottom: 12px; right: 12px; }
  .ws-skip { display: none; }
  .annunc { display: none; }
  .instr { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-hint { transition: none; }
}

/* ===== Rotary service selector (replaces the old weather screen) ===== */
/* The ND draws its own centre at 58% of its box height. The dial is pinned to the same
   fraction so both instrument centres sit on one line across the panel. */
#sel-box { position: relative; padding: 0; }
.dial-wrap {
  position: absolute; left: 10px; right: 10px; top: 58%;
  transform: translateY(-50%);
  display: grid; place-items: center;
}
.dial {
  position: relative; aspect-ratio: 1; width: min(100%, 268px);
  border-radius: 50%; cursor: grab; touch-action: none;
  background:
    /* dark track the labels sit on, so they always read */
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(6,9,13,.92) 47% 76%, transparent 77%),
    conic-gradient(from 180deg, #22262e, #171a20 25%, #22262e 50%, #171a20 75%, #22262e),
    radial-gradient(circle at 50% 35%, #2e333c 0%, #16191f 70%);
  border: 2px solid #454b57;
  box-shadow: inset 0 2px 12px rgba(255,255,255,.07), inset 0 -10px 24px rgba(0,0,0,.8),
              0 0 0 5px #0d0f13, 0 8px 22px rgba(0,0,0,.65);
}
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.dial-ticks, .dial-ring { position: absolute; inset: 0; border-radius: 50%; }
.dial-ring { transition: none; }
.dial-ticks { transition: transform .28s cubic-bezier(.2,.9,.3,1.15); }
.dial.dragging .dial-ticks { transition: none; }
.dial-ring b {                       /* one label per service, around the rim */
  position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -39px;
  width: 78px; text-align: center;
  font: 700 7.5px/1.1 var(--mono); letter-spacing: .04em; color: #79839a;
  text-transform: uppercase; pointer-events: none;
  transition: opacity .22s ease, color .22s ease, transform .28s cubic-bezier(.2,.9,.3,1.15);
}
.dial-ring b.on {
  color: #fff3d6; font-size: 8.5px; letter-spacing: .08em;
  text-shadow: 0 0 10px rgba(201,162,75,.9), 0 0 3px rgba(0,0,0,.9);
}
.dial-ticks i {
  position: absolute; left: 50%; top: 50%; width: 1.5px; height: 9px;
  margin-left: -.75px; background: #5d667a; border-radius: 1px; transform-origin: 50% 0;
}
.dial-ticks i.major { height: 14px; background: #8b95ab; width: 2px; margin-left: -1px; }
.dial-pointer {
  position: absolute; left: 50%; top: 2px; margin-left: -8px;
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 13px solid var(--gold);
  filter: drop-shadow(0 0 7px rgba(201,162,75,.85));
}
.dial-pointer::after {           /* index line down to the label track */
  content: ""; position: absolute; left: -1px; top: -2px; width: 2px; height: 22px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.dial-count {
  position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%);
  font: 700 8px/1 var(--mono); letter-spacing: .14em; color: #7c869b;
}
.dial-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 56%; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: radial-gradient(circle at 50% 35%, #12301c 0%, #08170e 70%);
  border: 2px solid #1d3a26; color: #39e070; padding: 6px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 0 6px rgba(0,0,0,.35);
}
.dial-hub:hover { border-color: var(--gold); }
.dial-hub:active { transform: translate(-50%,-50%) scale(.97); }
.hub-name {
  font: 700 11px/1.15 var(--mono); letter-spacing: .05em; text-align: center;
  text-shadow: 0 0 8px rgba(57,224,112,.5); word-break: break-word;
}
.hub-go { font: 700 6.5px/1 var(--mono); letter-spacing: .16em; color: #4f9a68; }
.dial-wx {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  font-size: 9.5px; line-height: 1.5; color: #4f9a68;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .dial { width: min(100%, 220px); } }

/* function-key row is interactive now (paging), so it needs button affordances */
.mcdu-keys button.mcdu-key { cursor: pointer; }
.mcdu-keys button.mcdu-key:hover { color: var(--gold-2); border-color: var(--gold); }
.mcdu-keys button.mcdu-key:active { transform: translateY(1px); }