:root{
  /* Realistic panel palette */
  --panel-dark:#1a1d1f;
  --panel-mid:#2b3034;
  --panel-light:#3d4347;
  --metal:#5a6166;
  --metal-light:#8b9197;
  --instr-face:#0a0c0d;
  --instr-bezel:#0f1214;
  --ink:#e8ecef;
  --ink-dim:#a8b0b6;
  --ink-mute:#6e7780;
  --amber:#ffb84d;
  --amber-bright:#ffd07a;
  --green:#3ddb86;
  --red:#ff4d5a;
  --white-arc:#e8ecef;
  --green-arc:#3ddb86;
  --yellow-arc:#ffd35a;
  --red-arc:#ff4d5a;
  --sky-top:#3e7aa8;
  --sky-bot:#7eb5d6;
  --ground-top:#7a5028;
  --ground-bot:#3b2614;
  --runway:#2a2d30;
  --grass:#2d4a1e;
  --paint:#f0ebd8;
  --wood:#3a2418;
}
*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%;}
body{
  background:
    radial-gradient(ellipse at 50% 0%, #1f262b 0%, #0a0d0f 60%, #050708 100%);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:13px;
  touch-action:none;
}
button,input{font:inherit;}

/* ===== Main Layout ===== */
#app{
  width:100vw;height:100vh;
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-rows: 76px 1fr 200px;
  gap:8px;
  padding:8px;
}
.panel{
  background:linear-gradient(180deg, var(--panel-mid) 0%, var(--panel-dark) 100%);
  border:1px solid var(--panel-light);
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 4px 16px rgba(0,0,0,.5);
  overflow:hidden;
  position:relative;
}
.panel::before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.008) 3px,
      rgba(255,255,255,.008) 4px
    );
  pointer-events:none;
}

/* ===== Top Bar ===== */
#topbar{
  grid-column:1/4; grid-row:1;
  display:grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-items:center;
  padding:0 18px;
  gap:14px;
}
.brand{display:flex;flex-direction:column;}
.brand .title{
  font-family:'Oswald',sans-serif;
  font-size:20px;font-weight:700;letter-spacing:2px;
  color:var(--ink);
  text-transform:uppercase;
}
.brand .title em{font-style:normal;color:var(--amber);font-weight:500;}
.brand .sub{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--ink-mute);letter-spacing:1.5px;
  text-transform:uppercase;margin-top:2px;
}
.phasebox{
  text-align:center;
  border-left:1px solid var(--panel-light);
  border-right:1px solid var(--panel-light);
  padding:0 14px;
}
.phasebox .phase-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink-mute);letter-spacing:2px;text-transform:uppercase;
}
.phasebox .phase-name{
  font-family:'Oswald',sans-serif;
  font-size:22px;font-weight:600;letter-spacing:2px;
  color:var(--amber);
  text-transform:uppercase;
  line-height:1.1;
}
.phasebox .phase-obj{
  font-size:11px;color:var(--ink-dim);margin-top:2px;
  font-style:italic;
}
.top-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}
.btn{
  border:1px solid var(--metal);
  background:linear-gradient(180deg, var(--panel-light), var(--panel-mid));
  color:var(--ink);
  border-radius:6px;
  padding:7px 11px;
  cursor:pointer;
  font-size:11px;
  font-family:'Oswald',sans-serif;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:all .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.3);
}
.btn:hover{background:linear-gradient(180deg, #4a5054, var(--panel-light));border-color:var(--metal-light);}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.4);}
.btn.amber{border-color:var(--amber);color:var(--amber);}
.btn.green{border-color:var(--green);color:var(--green);}
.btn.red{border-color:var(--red);color:var(--red);}
.weather-select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:24px;
  background-image:
    linear-gradient(180deg, var(--panel-light), var(--panel-mid)),
    linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: 0 0, calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 100% 100%, 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.weather-select option{background:#1a1d22;color:var(--ink);}

/* ===== Left Panel — Checklist & V-Speeds ===== */
#left{
  grid-column:1; grid-row:2/4;
  display:flex;flex-direction:column;
  padding:10px;gap:10px;overflow:hidden;
}
.section-title{
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:2px;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:6px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,184,77,.25);
  display:flex;justify-content:space-between;align-items:baseline;
}
.section-title .meta{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink-mute);letter-spacing:1px;
}

#checklist-wrap{
  flex:1;
  overflow-y:auto;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(0,0,0,.5);
  border-radius:6px;
  padding:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--metal) transparent;
}
#checklist-wrap::-webkit-scrollbar{width:6px;}
#checklist-wrap::-webkit-scrollbar-thumb{background:var(--metal);border-radius:3px;}
.check-item{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:8px;
  padding:7px 6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px;
  align-items:start;
  cursor:pointer;
  transition:background .15s;
}
.check-item:hover{background:rgba(255,184,77,.05);}
.check-item:last-child{border-bottom:0;}
.check-item.done{opacity:.55;}
.check-item.done .check-label{text-decoration:line-through;color:var(--ink-mute);}
.check-item.current{
  background:rgba(255,184,77,.12);
  border-left:3px solid var(--amber);
  padding-left:3px;
  border-radius:3px;
}
.check-item.current .check-label{color:var(--amber-bright);font-weight:500;}
.check-icon{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--metal);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
  background:rgba(0,0,0,.4);
  color:var(--ink-mute);
  flex-shrink:0;
}
.check-item.done .check-icon{
  background:var(--green);color:#0a0c0d;border-color:var(--green);
}
.check-item.current .check-icon{
  border-color:var(--amber);color:var(--amber);
  animation:pulse-amber 1.2s ease-in-out infinite;
}
@keyframes pulse-amber{
  0%,100%{box-shadow:0 0 0 0 rgba(255,184,77,.6);}
  50%{box-shadow:0 0 0 6px rgba(255,184,77,0);}
}
.check-label{
  font-family:'Inter',sans-serif;
  line-height:1.35;
}
.check-target{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:var(--amber);
  background:rgba(255,184,77,.1);
  padding:1px 5px;
  border-radius:3px;
  margin-left:4px;
  white-space:nowrap;
}
.check-why{
  font-size:10.5px;
  color:var(--ink-mute);
  margin-top:3px;
  font-style:italic;
  line-height:1.35;
  display:none;
}
.check-item.show-why .check-why{display:block;}

/* V-speeds card */
#vspeeds{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;
  padding:8px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
}
.vrow{display:flex;justify-content:space-between;padding:2px 0;color:var(--ink-dim);}
.vrow b{color:var(--amber);font-weight:500;}
.vrow .val{color:var(--ink);font-weight:600;}

/* ===== Center: out-the-window + instruments ===== */
#center{
  grid-column:2; grid-row:2;
  display:grid;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
  gap:8px;
  padding:8px;
}
#view-outer{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--panel-light);
  box-shadow:inset 0 0 0 4px var(--panel-dark), inset 0 0 0 5px var(--metal);
}
#view-canvas{width:100%;height:100%;display:block;}
#view-frame{
  position:absolute;inset:0;
  pointer-events:none;
  /* Vignette + top dash shadow to simulate looking through a windshield */
  background:
    radial-gradient(ellipse 130% 120% at 50% 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 86%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 12%);
}
#view-fade{
  position:absolute;inset:0;
  background:#0a0d10;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;
  font-size:14px;letter-spacing:2px;text-transform:uppercase;
  color:var(--amber);
}
#view-fade.show{opacity:1;}

/* HUD overlay on out-the-window */
.hud{
  position:absolute;inset:0;
  pointer-events:none;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--amber-bright);
  text-shadow:0 0 4px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);
}
.hud-tl{position:absolute;top:8px;left:10px;}
.hud-tr{position:absolute;top:8px;right:10px;text-align:right;}
.hud-bl{position:absolute;bottom:8px;left:10px;}
.hud-br{position:absolute;bottom:8px;right:10px;text-align:right;}
.hud-line{display:block;margin:1px 0;font-size:11px;}
.hud-line b{color:var(--amber);}

/* Stall warning */
.stall-warn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,77,90,.85);
  color:#fff;
  padding:6px 14px;
  border-radius:4px;
  font-family:'Oswald',sans-serif;
  font-weight:700;font-size:14px;letter-spacing:2px;
  border:2px solid #fff;
  display:none;
  animation:flash 0.5s steps(1) infinite;
}
@keyframes flash{50%{opacity:.2;}}

/* Instrument panel — six-pack */
#instr-panel{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  padding:10px;
  background:
    linear-gradient(180deg, #2a2e31 0%, #1a1d1f 100%);
  border:1px solid var(--metal);
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.5);
}
.instrument{
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #1a1d1f 0%, #0a0c0d 60%, #050607 100%);
  border:4px solid #0a0c0d;
  box-shadow:
    0 0 0 1px var(--metal),
    inset 0 0 12px rgba(0,0,0,.9),
    0 4px 12px rgba(0,0,0,.6);
  position:relative;
  overflow:hidden;
}
.instrument svg{width:100%;height:100%;display:block;}
.instrument .ilabel{
  position:absolute;
  bottom:6px;left:50%;transform:translateX(-50%);
  font-family:'Oswald',sans-serif;
  font-size:8px;letter-spacing:1.5px;
  color:var(--ink-mute);
  text-transform:uppercase;
  pointer-events:none;
}

/* ===== Right Panel — Instructor / Switches / Yoke ===== */
#right{
  grid-column:3; grid-row:2/4;
  display:flex;flex-direction:column;
  padding:10px;gap:10px;overflow:hidden;
}
#instructor-box{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,184,77,.25);
  border-radius:6px;
  padding:10px;
  font-size:12px;
  line-height:1.5;
  min-height:90px;
  max-height:160px;
  overflow-y:auto;
}
#instructor-box .imsg-header{
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:1.5px;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:4px;
}
#instructor-box .imsg{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);}
#instructor-box .imsg:last-child{border-bottom:0;}
#instructor-box .imsg.warn .imsg-header{color:var(--amber);}
#instructor-box .imsg.good .imsg-header{color:var(--green);}
#instructor-box .imsg.bad .imsg-header{color:var(--red);}

/* Event card */
#event-box{}
.event-card{
  border:1px solid var(--amber);
  border-radius:6px;
  padding:10px;
  background:rgba(255,184,77,.08);
}
.event-card h4{
  margin:0 0 6px;
  font-family:'Oswald',sans-serif;
  font-size:13px;letter-spacing:1.5px;
  color:var(--amber);
  text-transform:uppercase;
}
.event-card .ebody{font-size:12px;color:var(--ink-dim);margin-bottom:8px;line-height:1.4;}
.choice{
  display:block;width:100%;text-align:left;
  margin-top:5px;
  border:1px solid var(--metal);
  background:rgba(0,0,0,.3);
  color:var(--ink);
  border-radius:4px;
  padding:7px 9px;
  cursor:pointer;
  font-size:11.5px;
  transition:all .15s;
  font-family:'Inter',sans-serif;
}
.choice:hover{background:rgba(255,184,77,.12);border-color:var(--amber);}

/* Switches */
#switches{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.sw{
  display:flex;flex-direction:column;align-items:center;
  border:1px solid var(--metal);
  background:linear-gradient(180deg, var(--panel-light), var(--panel-mid));
  border-radius:5px;
  padding:7px 4px;
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:10px;letter-spacing:1px;
  color:var(--ink-mute);
  text-transform:uppercase;
  position:relative;
  text-align:center;
  transition:all .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.sw .led{
  width:8px;height:8px;border-radius:50%;
  background:#2a2d30;border:1px solid #0a0c0d;
  margin-bottom:4px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.5);
}
.sw.on{color:var(--green);border-color:var(--green);background:linear-gradient(180deg, #2a3a30, #1a2a20);}
.sw.on .led{background:var(--green);box-shadow:0 0 8px var(--green), inset 0 1px 1px rgba(255,255,255,.3);}
.sw.warn{color:var(--amber);border-color:var(--amber);background:linear-gradient(180deg, #3a3220, #2a2410);}
.sw.warn .led{background:var(--amber);box-shadow:0 0 8px var(--amber);}
.sw.bad{color:var(--red);border-color:var(--red);background:linear-gradient(180deg, #3a2025, #2a1015);}
.sw.bad .led{background:var(--red);box-shadow:0 0 8px var(--red);}

/* Yoke area */
.yoke-area{
  position:relative;
  height:120px;
  border:1px solid var(--metal);
  border-radius:6px;
  background:
    radial-gradient(circle at center, #1a1d1f 0%, #0a0c0d 100%);
  overflow:hidden;
  box-shadow:inset 0 0 16px rgba(0,0,0,.7);
}
.yoke-area::before{
  content:"";
  position:absolute;inset:8px;
  border:1px dashed rgba(255,255,255,.08);
  border-radius:4px;
}
.yoke-center{
  position:absolute;left:50%;top:50%;
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:translate(-50%,-50%);
}
.yoke{
  position:absolute;left:50%;top:50%;
  width:64px;height:42px;
  border:4px solid var(--ink-dim);
  border-radius:30px 30px 12px 12px;
  margin-left:-32px;margin-top:-21px;
  cursor:grab;
  box-shadow:0 0 12px rgba(0,0,0,.6);
  background:rgba(0,0,0,.3);
}
.yoke::after{
  content:"";
  position:absolute;left:50%;top:30px;
  width:4px;height:24px;
  background:var(--ink-dim);
  margin-left:-2px;
}
.yoke-hint{
  position:absolute;
  left:50%;transform:translateX(-50%);
  font-family:'Oswald',sans-serif;
  font-size:8.5px;letter-spacing:1.2px;
  color:var(--ink-mute);
  text-align:center;
  pointer-events:none;
  line-height:1.2;
  text-transform:uppercase;
  opacity:.65;
}
.yoke-hint span{
  font-size:7.5px;
  color:var(--amber);
  letter-spacing:0.6px;
  text-transform:lowercase;
  font-style:italic;
}
.yoke-hint-top{top:4px;}
.yoke-hint-bottom{bottom:4px;}

.pedals{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:50px;}
.pedal{
  border:1px solid var(--metal);
  border-radius:5px;
  background:linear-gradient(180deg, var(--panel-light), var(--panel-mid));
  color:var(--ink-dim);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.5px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pedal.active{background:linear-gradient(180deg, #4a5b32, #2a3b22);color:var(--green);border-color:var(--green);}

/* ===== Bottom Panel — Levers & Engine Controls ===== */
#bottom{
  grid-column:2; grid-row:3;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
  padding:10px;
}
.lever-box{
  display:flex;flex-direction:column;
  border-radius:6px;
  background:linear-gradient(180deg, #1f2326 0%, #0f1214 100%);
  border:1px solid var(--panel-light);
  padding:8px;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.lever-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:6px;
}
.lever-name{
  font-family:'Oswald',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:1.5px;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.lever-val{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:600;
  color:var(--amber);
}
.lever-track{
  flex:1;
  position:relative;
  border:1px solid var(--metal);
  border-radius:8px;
  background:
    linear-gradient(180deg, #0a0c0d 0%, #1a1d1f 50%, #0a0c0d 100%);
  overflow:hidden;
  cursor:pointer;
  box-shadow:inset 0 0 8px rgba(0,0,0,.7);
  touch-action:none;
}
.lever-track::before{
  content:"";
  position:absolute;left:50%;top:8px;bottom:8px;
  width:2px;margin-left:-1px;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.15) 0,
    rgba(255,255,255,.15) 2px,
    transparent 2px,
    transparent 8px
  );
}
.lever-knob{
  position:absolute;left:50%;
  width:54px;height:22px;
  margin-left:-27px;
  border-radius:11px;
  cursor:grab;
  touch-action:none;
  background:linear-gradient(180deg, #4a5054 0%, #2a2e31 100%);
  border:1px solid #0a0c0d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 2px 4px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
.lever-knob::after{
  content:"";
  width:36px;height:3px;
  background:rgba(0,0,0,.5);
  border-radius:2px;
  box-shadow:0 4px 0 rgba(0,0,0,.5), 0 -4px 0 rgba(0,0,0,.5);
}
.lever-knob.throttle{background:linear-gradient(180deg, #2a2e31 0%, #0a0c0d 100%);}
.lever-knob.mixture{background:linear-gradient(180deg, #ff6677 0%, #aa2030 100%);border-color:#600810;}
.lever-knob.carb-heat{background:linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);}
.lever-knob.flaps{background:linear-gradient(180deg, #ffd35a 0%, #c8941a 100%);border-color:#604008;}
.lever-knob.trim{
  width:46px;height:46px;border-radius:50%;
  margin-left:-23px;
  background:
    radial-gradient(circle, #2a2e31 0%, #0a0c0d 70%),
    repeating-conic-gradient(rgba(255,255,255,.1) 0deg 12deg, transparent 12deg 24deg);
}
.lever-knob.trim::after{
  width:4px;height:18px;background:var(--amber);box-shadow:none;border-radius:2px;
}
.lever-marks{
  position:absolute;left:6px;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 0;
  pointer-events:none;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;color:var(--ink-mute);
}
.lever-marks-r{
  position:absolute;right:6px;top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 0;
  pointer-events:none;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;color:var(--ink-mute);
  text-align:right;
}

/* ===== Modal Overlay ===== */
#overlay, #endscreen{
  position:fixed;inset:0;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;
  z-index:50;padding:20px;
  backdrop-filter:blur(4px);
}
#endscreen{ z-index:55; }
#overlay.hidden, #endscreen.hidden{display:none;}
.hidden{display:none !important;}
.modal{
  max-width:780px;width:100%;
  background:linear-gradient(180deg, var(--panel-mid) 0%, var(--panel-dark) 100%);
  border:1px solid var(--metal);
  border-radius:12px;
  padding:24px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
  max-height:90vh;overflow-y:auto;
}
.modal h1{
  font-family:'Oswald',sans-serif;
  font-size:28px;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;
  margin:0 0 8px;
  color:var(--amber);
}
.modal h1 em{font-style:normal;color:var(--ink);font-weight:400;}
.modal h2{
  font-family:'Oswald',sans-serif;
  font-size:14px;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:14px 0 8px;
}
.modal p{color:var(--ink-dim);line-height:1.5;}
.modal-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;
}
.feature{
  border:1px solid rgba(255,184,77,.2);
  border-radius:6px;
  padding:10px 12px;
  background:rgba(255,184,77,.04);
  font-size:12px;
  line-height:1.45;
}
.feature b{color:var(--amber);display:block;margin-bottom:3px;font-family:'Oswald',sans-serif;letter-spacing:1px;}

/* Scenario picker */
.scenario-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;
}

/* Aircraft picker */
.aircraft-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;
}
.aircraft-card{
  display:flex;gap:14px;align-items:flex-start;text-align:left;
  background:#161c22;border:1px solid var(--metal);border-radius:10px;
  padding:14px 16px;cursor:pointer;transition:all .15s;color:var(--ink);
}
.aircraft-card:hover{border-color:var(--amber);transform:translateY(-2px);}
.aircraft-card.selected{border-color:var(--amber);box-shadow:0 0 0 2px rgba(255,184,77,.35) inset;background:#1b232b;}
.aircraft-card .ac-icon{font-size:34px;line-height:1;}
.aircraft-card .ac-name{font-family:'Oswald',sans-serif;font-size:18px;letter-spacing:1px;text-transform:uppercase;color:var(--amber);margin:0 0 2px;}
.aircraft-card .ac-tag{font-size:11px;color:var(--green);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;}
.aircraft-card .ac-blurb{font-size:12px;color:var(--ink-dim);line-height:1.4;}
@media (max-width:640px){ .aircraft-grid{grid-template-columns:1fr;} }

/* Crash screen */
.crash-modal{ border-color: rgba(255,77,90,.5) !important; }
.crash-mark{
  width:64px;height:64px;border-radius:50%;
  background:rgba(255,77,90,.15);
  border:2px solid var(--red);
  color:var(--red);
  font-size:36px;line-height:60px;text-align:center;
  margin:0 auto 10px;
  animation:crash-pulse 1.2s ease-in-out infinite;
}
@keyframes crash-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,77,90,.4);} 50%{ box-shadow:0 0 0 12px rgba(255,77,90,0);} }

/* Map picker */
.map-picker{
  display:flex;gap:10px;align-items:stretch;margin:12px 0 6px;flex-wrap:wrap;
}
.map-select{
  flex:1;min-width:200px;
  background:#1a2128;
  color:var(--ink);
  border:1px solid var(--metal);
  border-radius:7px;
  padding:11px 12px;
  font-family:'Inter',sans-serif;font-size:14px;
  cursor:pointer;
}
.map-select:hover{border-color:var(--amber);}
.map-upload-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg, rgba(255,184,77,.16), rgba(255,184,77,.06));
  color:var(--amber);
  border:1px solid rgba(255,184,77,.4);
  border-radius:7px;
  padding:11px 16px;
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.map-upload-btn:hover{
  background:linear-gradient(180deg, rgba(255,184,77,.28), rgba(255,184,77,.12));
  transform:translateY(-1px);
}
.map-desc{
  font-size:12px;color:var(--ink-dim);line-height:1.4;margin:2px 0 0;min-height:0;
}
.scenario-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-align:left;
  border:1px solid var(--metal);
  border-radius:8px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg, rgba(40,52,64,.5), rgba(24,30,38,.5));
  cursor:pointer;
  transition:all .15s;
  font-family:'Inter',sans-serif;
}
.scenario-card:hover{
  border-color:var(--green);
  background:linear-gradient(180deg, rgba(50,66,80,.6), rgba(30,40,48,.6));
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(61,219,134,.2);
}
.scenario-card .sc-icon{font-size:30px;line-height:1;}
.scenario-card .sc-title{
  font-family:'Oswald',sans-serif;
  font-size:16px;font-weight:600;letter-spacing:1px;
  color:var(--ink);text-transform:uppercase;
}
.scenario-card:hover .sc-title{color:var(--green);}
.scenario-card .sc-desc{
  font-size:12px;color:var(--ink-dim);line-height:1.4;
}
.beginner-check{
  display:flex;align-items:flex-start;gap:10px;
  margin:6px 0 4px;padding:10px 12px;
  border:1px dashed rgba(61,219,134,.3);
  border-radius:6px;
  background:rgba(61,219,134,.05);
  cursor:pointer;
  font-size:12.5px;line-height:1.45;color:var(--ink-dim);
}
.beginner-check input{
  width:18px;height:18px;margin-top:1px;flex-shrink:0;
  accent-color:var(--green);cursor:pointer;
}
.demo-step{
  padding:8px 12px;
  border-left:3px solid var(--amber);
  margin:6px 0;
  background:rgba(255,184,77,.06);
  border-radius:0 4px 4px 0;
  font-size:12.5px;
  line-height:1.45;
}
.demo-step b{color:var(--amber);}

/* Pause modal extras */
.status-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;margin:10px 0 4px;
}
.stat-cell{
  border:1px solid rgba(120,140,160,.18);
  background:rgba(20,28,36,.35);
  border-radius:6px;
  padding:8px 10px;
}
.stat-cell .lbl{
  font-family:'Oswald',sans-serif;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:3px;
}
.stat-cell .val{
  font-family:'JetBrains Mono',monospace;
  font-size:15px;color:var(--ink);
}
.stat-cell .val.amber{color:var(--amber);}
.kbd-list{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:6px 14px;margin:8px 0;
  font-size:12px;line-height:1.5;
  color:var(--ink-dim);
}
.kbd-list kbd{
  display:inline-block;min-width:18px;text-align:center;
  padding:1px 6px;margin-right:6px;
  border:1px solid var(--metal);
  border-radius:3px;
  background:rgba(40,52,64,.5);
  color:var(--amber);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
}
.sponsor-footer{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(120,140,160,.18);
  text-align:center;
  font-size:12px;color:var(--ink-mute);
  line-height:1.6;
}
.sponsor-footer a{
  color:var(--amber);
  text-decoration:none;
  font-weight:600;
  font-family:'Oswald',sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.sponsor-footer a:hover{text-decoration:underline;}
.sponsor-footer .heb{
  direction:rtl;unicode-bidi:isolate;
  font-family:'Inter',sans-serif;
  margin-right:6px;
  color:var(--ink-dim);
  font-weight:500;
  letter-spacing:0;
}

.ghost-hand{
  position:fixed;width:32px;height:32px;
  border:2px solid var(--amber);
  border-radius:50%;
  z-index:30;
  pointer-events:none;
  box-shadow:0 0 18px rgba(255,184,77,.7);
  background:rgba(255,184,77,.18);
  transform:translate(-50%,-50%);
  display:none;
  transition:left .4s cubic-bezier(.4,.0,.2,1), top .4s cubic-bezier(.4,.0,.2,1);
}
.ghost-hand::after{
  content:"";
  position:absolute;left:18px;top:20px;
  width:18px;height:3px;background:var(--amber);
  border-radius:2px;transform:rotate(45deg);
}
.highlight-control{
  outline:2px solid var(--amber)!important;
  outline-offset:2px;
  box-shadow:0 0 20px rgba(255,184,77,.5)!important;
  animation:highlight-pulse 1s ease-in-out infinite;
}
@keyframes highlight-pulse{
  0%,100%{outline-color:var(--amber);box-shadow:0 0 12px rgba(255,184,77,.3);}
  50%{outline-color:var(--amber-bright);box-shadow:0 0 24px rgba(255,184,77,.7);}
}

/* ===== Demo Banner ===== */
.demo-banner{
  position:fixed;
  top:14px;left:50%;transform:translateX(-50%);
  z-index:40;
  display:none;
  width:min(680px, calc(100vw - 32px));
  background:linear-gradient(180deg, rgba(34,42,52,.96) 0%, rgba(20,26,32,.96) 100%);
  border:1px solid var(--amber);
  border-radius:8px;
  padding:10px 14px 11px;
  box-shadow:0 12px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(255,184,77,.18);
  backdrop-filter:blur(6px);
  font-family:'Inter',sans-serif;
  pointer-events:auto;
}

/* ===== Beginner Coach ===== */
.coach-banner{
  position:fixed;
  bottom:14px;left:50%;transform:translateX(-50%);
  z-index:42;
  display:none;
  width:min(560px, calc(100vw - 32px));
  background:linear-gradient(180deg, rgba(36,46,58,.97) 0%, rgba(22,28,36,.97) 100%);
  border:1px solid var(--green);
  border-radius:8px;
  padding:9px 14px 10px;
  box-shadow:0 -8px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(61,219,134,.22);
  backdrop-filter:blur(6px);
  font-family:'Inter',sans-serif;
  pointer-events:auto;
}
.coach-banner.active{display:block;}
.coach-banner.dragged{left:auto;transform:none;}
.coach-banner .cb-row{
  display:flex;align-items:center;gap:10px;margin-bottom:4px;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.coach-banner .cb-row:active{cursor:grabbing;}
.coach-banner .cb-grip{
  color:var(--ink-mute);
  font-size:13px;
  letter-spacing:-1px;
  cursor:grab;
}
.coach-banner .cb-tag{
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:2px;
  background:var(--green);color:#102018;
  padding:2px 8px;border-radius:3px;
}
.coach-banner .cb-title{
  font-family:'Oswald',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:1.4px;
  color:var(--green);text-transform:uppercase;
  flex:1;
}
.coach-banner .cb-close{
  background:transparent;border:1px solid var(--metal);
  color:var(--ink-mute);
  width:24px;height:24px;border-radius:4px;
  font-size:13px;line-height:1;
  cursor:pointer;
}
.coach-banner .cb-close:hover{color:var(--ink);border-color:var(--ink-dim);}
.coach-banner .cb-body{
  font-size:13.5px;line-height:1.4;color:var(--ink);
}
.coach-arrow{
  position:fixed;
  z-index:43;
  font-size:32px;
  pointer-events:none;
  animation:coach-bounce .9s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
@keyframes coach-bounce{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(10px);}
}
.coach-arrow[style*="rotate(90deg)"]{
  animation:coach-bounce-v .9s ease-in-out infinite;
}
@keyframes coach-bounce-v{
  0%,100%{transform:rotate(90deg) translateX(0);}
  50%{transform:rotate(90deg) translateX(10px);}
}
.coach-arrowed{
  outline:3px solid var(--green)!important;
  outline-offset:3px;
  box-shadow:0 0 24px rgba(61,219,134,.6)!important;
  animation:coach-pulse 1s ease-in-out infinite;
}
@keyframes coach-pulse{
  0%,100%{outline-color:var(--green);box-shadow:0 0 14px rgba(61,219,134,.4);}
  50%{outline-color:#7cffb0;box-shadow:0 0 28px rgba(61,219,134,.8);}
}
.demo-banner.active{display:block;}
.demo-banner .db-row1{
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
  cursor:grab;user-select:none;touch-action:none;
}
.demo-banner .db-row1:active{cursor:grabbing;}
.demo-banner.dragged{left:auto;transform:none;}
.demo-banner .db-tag{
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:2px;
  background:var(--amber);color:#1a1d22;
  padding:2px 8px;border-radius:3px;
}
.demo-banner .db-phase{
  font-family:'Oswald',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:1.8px;
  color:var(--amber);text-transform:uppercase;
  flex:1;
}
.demo-banner .db-progress{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--ink-dim);
}
.demo-banner .db-stop{
  background:transparent;
  border:1px solid var(--red);
  color:var(--red);
  font-family:'Oswald',sans-serif;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 10px;border-radius:4px;
  cursor:pointer;
  transition:all .15s;
}
.demo-banner .db-stop:hover{
  background:var(--red);color:#1a1d22;
}
.demo-banner .db-action{
  font-size:14px;font-weight:600;color:var(--ink);
  line-height:1.35;
}
.demo-banner .db-why{
  font-size:11.5px;color:var(--ink-dim);
  line-height:1.4;margin-top:4px;
}
/* When the user takes over mid-demo, swap accent to green and reword the tag. */
.demo-banner.demo-handed-over{
  border-color:var(--green);
  box-shadow:0 12px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(61,219,134,.22);
}
.demo-banner.demo-handed-over .db-tag{
  background:var(--green);
  color:#102018;
}
.demo-banner.demo-handed-over .db-tag::after{
  content:" · YOU FLY";
}
.demo-banner.demo-handed-over .db-phase{
  color:var(--green);
}

/* ===== Info bubble / Learn modal ===== */
.has-info{cursor:help;}
.has-info::after{
  content:"ⓘ";
  display:inline-block;
  margin-left:5px;
  font-size:10px;
  color:var(--amber);
  opacity:.55;
  vertical-align:baseline;
  transition:opacity .15s;
  font-family:'Inter',sans-serif;
}
.has-info:hover::after{opacity:1;}
/* Make instrument labels usable as info triggers (they're absolute and pointer-events:none normally) */
.instrument .ilabel.has-info{
  pointer-events:auto;
  cursor:help;
  background:rgba(0,0,0,.35);
  padding:1px 5px;
  border-radius:3px;
  transition:background .15s, color .15s;
}
.instrument .ilabel.has-info:hover{
  background:rgba(255,184,77,.18);
  color:var(--amber);
}
/* Switch info hint */
.sw.has-info{position:relative;}
.sw.has-info::after{
  position:absolute;
  top:2px;right:4px;
  margin:0;
  font-size:8px;
}

/* Hint pill at top of bottom panel */
.info-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10.5px;
  color:var(--ink-mute);
  font-family:'Inter',sans-serif;
  letter-spacing:.3px;
  padding:4px 8px;
  border:1px dashed rgba(120,140,160,.25);
  border-radius:14px;
  background:rgba(20,28,36,.35);
  margin-bottom:6px;
}
.info-hint .pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);
  animation:hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse{
  0%,100%{opacity:.4;transform:scale(1);}
  50%{opacity:1;transform:scale(1.4);}
}
.info-hint.fade-out{
  opacity:0;transition:opacity .8s;
  pointer-events:none;
}

/* ===== Info Modal ===== */
#info-modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;justify-content:center;
  z-index:60;padding:20px;
  backdrop-filter:blur(6px);
}
#info-modal.active{display:flex;}
.info-modal-box{
  max-width:720px;width:100%;
  max-height:88vh;
  background:linear-gradient(180deg, var(--panel-mid) 0%, var(--panel-dark) 100%);
  border:1px solid var(--amber);
  border-radius:10px;
  padding:24px 28px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(255,184,77,.2);
  overflow-y:auto;
  font-family:'Inter',sans-serif;
}
.info-modal-box .im-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:6px;
}
.info-modal-box h2{
  font-family:'Oswald',sans-serif;
  font-size:26px;font-weight:600;letter-spacing:2px;
  color:var(--amber);
  text-transform:uppercase;
  margin:0;line-height:1.15;
}
.info-modal-box .im-sub{
  font-size:13px;color:var(--ink-dim);
  font-style:italic;
  margin:2px 0 14px;
}
.info-modal-box .im-close{
  background:transparent;
  color:var(--ink-dim);
  border:1px solid var(--metal);
  border-radius:4px;
  width:32px;height:32px;
  font-size:18px;line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:all .15s;
}
.info-modal-box .im-close:hover{
  color:var(--ink);
  border-color:var(--amber);
}
.info-modal-box .im-section{
  margin:14px 0;
}
.info-modal-box .im-section h3{
  font-family:'Oswald',sans-serif;
  font-size:13px;font-weight:500;letter-spacing:2px;
  color:var(--ink-dim);
  text-transform:uppercase;
  margin:0 0 6px;
}
.info-modal-box .im-section p{
  font-size:15px;
  color:var(--ink);
  line-height:1.55;
  margin:0 0 8px;
}
.info-modal-box .im-section p:last-child{margin-bottom:0;}
.info-modal-box .im-tip{
  border-left:3px solid var(--amber);
  background:rgba(255,184,77,.08);
  padding:10px 14px;
  border-radius:0 6px 6px 0;
  margin:14px 0 0;
}
.info-modal-box .im-tip h3{color:var(--amber);}
.info-modal-box .im-tip p{font-size:14.5px;}
.info-modal-box .im-video{
  margin-top:18px;
  border:1px dashed rgba(120,140,160,.3);
  border-radius:8px;
  padding:0;
  overflow:hidden;
  background:rgba(0,0,0,.3);
}
.info-modal-box .im-video.placeholder{
  padding:28px 20px;
  text-align:center;
  font-size:14px;
  color:var(--ink-mute);
}
.info-modal-box .im-video .yt-wrap{
  position:relative;width:100%;
  padding-top:56.25%;
}
.info-modal-box .im-video .yt-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}
@media (max-width:600px){
  .info-modal-box{padding:18px 18px 16px;}
  .info-modal-box h2{font-size:22px;}
  .info-modal-box .im-section p{font-size:14.5px;}
}

/* Mobile fallback */
@media (max-width: 1100px){
  #app{
    grid-template-columns:1fr;
    grid-template-rows:auto 50vh auto auto auto;
    overflow:auto;height:100dvh;
  }
  #topbar,#left,#center,#right,#bottom{grid-column:1;grid-row:auto;}
  #topbar{grid-template-columns:1fr;text-align:center;}
  .top-actions{justify-content:center;}
  body{overflow:auto;}
  #center{height:60vh;}
  #bottom{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 600px){
  #bottom{grid-template-columns:repeat(2,1fr);}
  .modal h1{font-size:22px;}
  .modal-grid{grid-template-columns:1fr;}
  .scenario-grid{grid-template-columns:1fr;}
}

/* ===== Player Name Entry & Leaderboard Styles ===== */
.name-entry-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 80; backdrop-filter: blur(8px);
}
.name-entry-box {
  background: linear-gradient(180deg, var(--panel-mid) 0%, var(--panel-dark) 100%);
  border: 1px solid var(--amber);
  border-radius: 14px;
  padding: 36px 40px;
  max-width: 480px; width: 100%;
  box-shadow: 0 24px 72px rgba(0,0,0,.8), 0 0 0 1px rgba(255,184,77,.25);
  text-align: center;
}
.name-entry-box .ne-logo {
  font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: 3px; color: var(--ink-mute);
  text-transform: uppercase; margin-bottom: 18px;
}
.name-entry-box h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 30px; font-weight: 700; letter-spacing: 2px;
  color: var(--amber); text-transform: uppercase;
  margin: 0 0 6px;
}
.name-entry-box p {
  font-size: 13px; color: var(--ink-dim); margin: 0 0 22px;
}
.name-entry-box input[type="text"] {
  width: 100%; padding: 12px 16px;
  background: rgba(0,0,0,.45);
  border: 1.5px solid var(--metal);
  border-radius: 8px;
  color: var(--ink); font-size: 18px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px; text-align: center;
  outline: none; transition: border-color .15s;
}
.name-entry-box input[type="text"]:focus { border-color: var(--amber); }
.name-entry-box input[type="text"]::placeholder { color: var(--ink-mute); font-size: 14px; }
.name-entry-box .ne-btn {
  margin-top: 16px; width: 100%; padding: 13px;
  background: linear-gradient(180deg, rgba(255,184,77,.22), rgba(255,184,77,.1));
  border: 1.5px solid var(--amber);
  color: var(--amber); border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer;
  transition: all .15s;
}
.name-entry-box .ne-btn:hover { background: linear-gradient(180deg, rgba(255,184,77,.36), rgba(255,184,77,.18)); transform: translateY(-1px); }
.name-entry-box .ne-btn:disabled { opacity: .45; cursor: default; transform: none; }
.name-entry-box .ne-error {
  margin-top: 10px; font-size: 12px; color: var(--red); min-height: 16px;
}

/* Leaderboard panel */
.lb-tab-row {
  display: flex; gap: 6px; margin-bottom: 12px;
}
.lb-tab {
  flex: 1; padding: 7px;
  background: rgba(0,0,0,.3); border: 1px solid var(--metal);
  color: var(--ink-dim); border-radius: 6px;
  font-family: 'Oswald', sans-serif; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
}
.lb-tab.active { background: rgba(255,184,77,.15); border-color: var(--amber); color: var(--amber); }
.lb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lb-table thead th {
  font-family: 'Oswald', sans-serif;
  font-size: 9px; letter-spacing: 2px;
  color: var(--ink-mute); text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 4px 6px 8px; text-align: left;
}
.lb-table tbody tr { border-bottom: 1px solid rgba(255,255,255,.04); }
.lb-table tbody tr:hover { background: rgba(255,184,77,.05); }
.lb-table tbody tr.me td { color: var(--amber); }
.lb-table tbody td { padding: 7px 6px; font-family: 'JetBrains Mono', monospace; }
.lb-table .rank { color: var(--ink-mute); width: 30px; }
.lb-table .lb-name { color: var(--ink); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-table .score-val { color: var(--green); font-weight: 700; text-align: right; }
.lb-table .lb-aircraft { color: var(--ink-mute); font-size: 10px; }
.lb-table .lb-weather { color: var(--ink-mute); font-size: 10px; }
.lb-table .lb-date { color: var(--ink-mute); font-size: 10px; text-align: right; }
.lb-medal { font-size: 14px; }
.lb-empty { text-align: center; padding: 20px; color: var(--ink-mute); font-size: 13px; font-style: italic; }
.lb-loading { text-align: center; padding: 20px; color: var(--ink-dim); font-size: 12px; }
.score-save-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.score-save-section p { color: var(--ink-dim); font-size: 12px; margin: 0 0 10px; }
.score-breakdown {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0;
}
.score-breakdown .sb-item {
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06);
  border-radius: 5px; padding: 6px 9px;
  display: flex; justify-content: space-between; align-items: center;
}
.score-breakdown .sb-label { font-size: 11px; color: var(--ink-mute); }
.score-breakdown .sb-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink); }
.score-breakdown .sb-val.pos { color: var(--green); }
.score-breakdown .sb-val.neg { color: var(--red); }
#score-hud {
  position: fixed; top: 86px; right: 18px; z-index: 20;
  background: rgba(10,12,13,.85);
  border: 1px solid rgba(255,184,77,.3);
  border-radius: 8px; padding: 7px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-dim);
  pointer-events: none;
  backdrop-filter: blur(4px);
  min-width: 100px;
}
#score-hud .sc-label { font-size: 9px; letter-spacing: 2px; color: var(--ink-mute); text-transform: uppercase; }
#score-hud .sc-value { font-size: 22px; font-weight: 700; color: var(--amber); line-height: 1.1; }
#score-hud .sc-player { font-size: 10px; color: var(--green); margin-top: 3px; letter-spacing: 1px; }
.score-toast {
  position: fixed; right: 130px; z-index: 25;
  font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: 1px; pointer-events: none;
  animation: toast-rise 1.8s ease-out forwards;
}
@keyframes toast-rise {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ===== Mission Menu & Result Styles ===== */
#mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}
.scenario-card .sc-difficulty {
  font-size: 11px; color: var(--amber);
  letter-spacing: 1px; margin-left: auto;
}
/* Mission result distance bar */
.miss-bar-wrap {
  margin: 12px 0;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  overflow: hidden;
  height: 10px;
  position: relative;
}
.miss-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .6s cubic-bezier(.4,.0,.2,1);
}
/* Cone HUD annotation */
#cone-hud {
  position: fixed;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,102,0,.18);
  border: 1px solid #ff6600;
  border-radius: 8px;
  padding: 5px 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px; letter-spacing: 2px;
  color: #ff9944;
  pointer-events: none;
  z-index: 22;
  backdrop-filter: blur(4px);
  display: none;
}
#cone-hud.visible { display: block; }

/* ═══════════════════════════════════════════════
   GPS MOVING MAP OVERLAY
   Sits over the 3D view, bottom-right corner.
   ═══════════════════════════════════════════════ */

/* Small "GPS" pill that opens the panel */
#gps-open-btn {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 30;
  background: rgba(10,14,18,.88);
  border: 1px solid #4a9e6a;
  border-radius: 5px;
  color: #4adb86;
  font-family: 'Oswald', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px;
  padding: 4px 9px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all .15s;
  pointer-events: all;
}
#gps-open-btn:hover { background: rgba(74,219,134,.15); }

/* Main GPS panel */
#gps-panel {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 30;
  width: 260px;
  background: rgba(6,10,13,.94);
  border: 1.5px solid #2a5a3a;
  border-radius: 8px;
  overflow: hidden;
  display: none;              /* shown by JS */
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.8), 0 0 0 1px rgba(74,180,110,.15);
  backdrop-filter: blur(6px);
  pointer-events: all;
}
#gps-panel.visible { display: flex; }

/* Top bar — mode label + zoom buttons */
#gps-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(74,180,110,.2);
}
#gps-mode-label {
  font-family: 'Oswald', sans-serif;
  font-size: 10px; letter-spacing: 2px;
  color: #4adb86; margin-right: 2px;
}
#gps-range-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #cce8d8;
  margin-right: auto;
}
#gps-topbar button {
  background: rgba(74,180,110,.12);
  border: 1px solid rgba(74,180,110,.3);
  border-radius: 4px;
  color: #4adb86;
  font-size: 13px; font-weight: 700;
  width: 24px; height: 22px;
  cursor: pointer; padding: 0;
  line-height: 1;
  transition: background .12s;
}
#gps-topbar button:hover { background: rgba(74,180,110,.28); }

/* The map canvas itself */
#gps-canvas {
  width: 260px;
  height: 200px;
  display: block;
  image-rendering: pixelated;
}

/* Data bar below the map */
#gps-databar {
  display: flex;
  gap: 0;
  padding: 5px 8px;
  background: rgba(0,0,0,.5);
  border-top: 1px solid rgba(74,180,110,.2);
  flex-wrap: wrap;
  row-gap: 3px;
}
.gps-field {
  display: flex; align-items: baseline;
  gap: 3px; margin-right: 10px;
}
.gps-lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 8px; letter-spacing: 1.5px;
  color: #4a7a5a; text-transform: uppercase;
}
.gps-field > span:not(.gps-lbl):not(.gps-unit) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #c8e8d0;
}
.gps-unit {
  font-family: 'Oswald', sans-serif;
  font-size: 9px; color: #4a7a5a;
}
/* Lat/lon fields are wider */
#gps-lat, #gps-lon { font-size: 10px; }