:root{
  --bg:#0f1419; --panel:#1a212b; --panel2:#222c38; --line:#33414f;
  --text:#e8edf2; --muted:#8a99a8; --accent:#3b82f6; --accent2:#2563eb;
  --ok:#22c55e; --danger:#ef4444; --warn:#f59e0b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);}
.hidden{display:none !important;}
.subtle{color:var(--muted);}
.hint{color:var(--muted);font-weight:400;font-size:.78em;}
.err{color:var(--danger);font-size:.85rem;margin:.4rem 0 0;}

/* ---------- SQUAWK GATE ---------- */
.squawk-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:18px;background:radial-gradient(circle at 50% 35%,#16242f 0%,#0a0f14 70%);}
.squawk-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:32px 28px;text-align:center;box-shadow:0 0 60px rgba(59,130,246,.08);}
.squawk-icon{font-size:2.6rem;margin-bottom:6px;filter:drop-shadow(0 0 12px rgba(59,130,246,.5));}
.squawk-card h1{margin:0 0 2px;font-size:1.6rem;letter-spacing:.5px;}
.squawk-label{display:block;margin-top:22px;font-size:.8rem;color:var(--muted);letter-spacing:2px;font-weight:700;}
.squawk-input{width:100%;margin-top:10px;background:#0c1116;border:1px solid var(--line);
  border-radius:12px;padding:16px;color:var(--accent);font-size:2rem;font-weight:700;
  letter-spacing:14px;text-align:center;font-family:ui-monospace,monospace;}
.squawk-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.25);}
.squawk-card .err{margin-top:12px;font-weight:700;letter-spacing:1px;}
.squawk-card .primary-btn{margin-top:18px;}
.join-body{display:flex;align-items:center;justify-content:center;padding:18px;}
.join-card{width:100%;max-width:430px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:24px;}
.join-card h1{margin:0 0 2px;font-size:1.6rem;letter-spacing:.5px;}
.role-grid{display:grid;gap:12px;margin-top:18px;}
.role-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;color:var(--text);cursor:pointer;transition:.15s;text-align:left;}
.role-btn:hover{border-color:var(--accent);transform:translateY(-1px);}
.role-title{font-size:1.15rem;font-weight:700;}
.role-sub{font-size:.85rem;color:var(--muted);}
.back-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.link-btn{background:none;border:none;color:var(--accent);font-size:1rem;cursor:pointer;padding:0;}
.role-pill{background:var(--accent2);padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:1px;}
#detailStep label{display:block;font-size:.85rem;color:var(--muted);margin-top:14px;font-weight:600;}
#detailStep input{width:100%;margin-top:6px;background:#0c1116;border:1px solid var(--line);
  border-radius:10px;padding:12px;color:var(--text);font-size:1rem;}
#detailStep input:focus{outline:none;border-color:var(--accent);}
.callsign-input{letter-spacing:5px;font-weight:700;text-transform:uppercase;text-align:center;font-size:1.3rem !important;}
.color-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.swatch-outline{border-color:#5a6776;}
#detailStep .field-label{display:block;font-size:.85rem;color:var(--muted);margin-top:14px;font-weight:600;}
.formation-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.formation-opt{background:#0c1116;border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;color:var(--text);font-size:.9rem;cursor:pointer;}
.formation-opt:hover{border-color:var(--accent);}
.formation-opt.selected{border-color:var(--accent);background:var(--accent2);color:#fff;font-weight:600;}
.check-row{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:.9rem;font-weight:400;cursor:pointer;}
.check-row input{width:auto;margin:3px 0 0;flex:0 0 auto;}
.check-row .hint{display:block;margin-top:2px;}
.swatch.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--accent);}
.freq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.freq-preview{display:inline-block;margin-top:6px;font-family:ui-monospace,monospace;color:var(--accent);font-size:.95rem;}
.primary-btn{width:100%;margin-top:20px;background:var(--accent2);border:none;border-radius:12px;
  padding:14px;color:#fff;font-size:1.05rem;font-weight:700;cursor:pointer;}
.primary-btn:hover{background:var(--accent);}

/* ---------- CONTROLLER ---------- */
.ctrl-body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;user-select:none;}
.ctrl-layout{flex:1;display:flex;min-height:0;}
.formation-pane{display:none;}
.controls-pane{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px;min-height:0;min-width:0;}
.view-toggle{display:none;margin-left:auto;background:var(--panel2);border:1px solid var(--line);
  color:var(--muted);border-radius:8px;padding:4px 10px;font-size:.75rem;cursor:pointer;}

.ctrl-header{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;flex-wrap:wrap;}
.color-chip{width:20px;height:20px;border-radius:5px;flex:0 0 auto;}
.hdr-name{font-weight:700;font-size:1rem;}
.hdr-call{background:var(--panel2);padding:2px 8px;border-radius:6px;font-size:.75rem;letter-spacing:2px;font-weight:700;color:var(--accent);}
.hdr-freq{margin-left:auto;font-family:ui-monospace,monospace;color:var(--muted);font-size:.9rem;}
.status-row{display:flex;gap:8px;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;}
.stat{font-size:.72rem;color:var(--muted);letter-spacing:1px;}
.stat b{color:var(--text);font-size:1rem;margin-left:3px;}

.play-area{flex:1;display:grid;gap:10px;min-height:0;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;}
.play-area .dpad{grid-column:1;grid-row:1;}
.play-area .rightpad{grid-column:2;grid-row:1;}
.action-buttons{grid-column:1 / span 2;grid-row:2;display:flex;flex-direction:column;gap:8px;}
.action-buttons button{margin:0;}
.cluster{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:0;}
button.pad,button.rbtn{border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  color:var(--text);font-weight:700;font-size:1rem;cursor:pointer;line-height:1.05;
  display:flex;align-items:center;justify-content:center;text-align:center;}
button.pressed{background:var(--accent2);border-color:var(--accent);transform:scale(.97);}

/* D-pad as a 3x3 grid */
.dpad{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:8px;}
.pad.up{grid-column:2;grid-row:1;}
.pad.left{grid-column:1;grid-row:2;}
.pad.center{grid-column:2;grid-row:2;background:var(--warn);color:#1a1207;}
.pad.right{grid-column:3;grid-row:2;}
.pad.down{grid-column:2;grid-row:3;}

/* right cluster: throttle on top row, yaw on bottom */
.rightpad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;}
.rbtn.faster{grid-column:1 / span 2;}
.rbtn.slower{grid-column:1 / span 2;}
.rbtn.faster{background:#16341f;}
.rbtn.slower{background:#341a16;}

.pause-btn{margin-top:2px;background:var(--danger);border:none;border-radius:12px;color:#fff;
  font-weight:800;letter-spacing:.5px;padding:14px;font-size:1rem;cursor:pointer;}
.pause-btn.active{background:#7f1d1d;outline:3px solid var(--warn);}

.recenter-btn{margin-top:2px;background:var(--panel2);border:1px solid var(--accent);border-radius:12px;
  color:var(--accent);font-weight:700;letter-spacing:1px;padding:11px;font-size:.95rem;cursor:pointer;}
.recenter-btn.pressed{background:var(--accent2);color:#fff;transform:scale(.99);}
.runway-btn{margin-top:2px;background:var(--panel2);border:1px solid var(--ok);border-radius:12px;
  color:var(--ok);font-weight:700;letter-spacing:1px;padding:11px;font-size:.95rem;cursor:pointer;}
.runway-btn:active{background:#0f2a1a;}
.end-btn{margin-top:2px;background:transparent;border:1px solid var(--danger);border-radius:12px;
  color:var(--danger);font-weight:700;letter-spacing:.5px;padding:11px;font-size:.85rem;cursor:pointer;}
.end-btn:active{background:rgba(239,68,68,.15);}

.paused-banner{position:fixed;top:0;left:0;right:0;background:var(--danger);color:#fff;
  text-align:center;font-weight:800;letter-spacing:3px;padding:6px;z-index:50;}

/* Lead re-form panel (covers the frozen controls while paused) */
.reform-panel{position:fixed;inset:0;z-index:70;background:rgba(8,12,16,.94);
  display:flex;align-items:center;justify-content:center;padding:16px;}
.reform-card{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:20px;text-align:center;}
.reform-card h3{margin:0 0 4px;font-size:1.2rem;}
.reform-picker{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.reform-opt{background:#0c1116;border:1px solid var(--line);border-radius:12px;
  padding:14px;color:var(--text);font-size:1rem;font-weight:600;cursor:pointer;}
.reform-opt:hover{border-color:var(--accent);}
.reform-opt.selected{border-color:var(--accent);background:var(--accent2);color:#fff;}
.resume-btn{width:100%;background:var(--ok);border:none;border-radius:12px;color:#06210f;
  font-weight:800;letter-spacing:.5px;padding:14px;font-size:1.05rem;cursor:pointer;}
.resume-btn:hover{filter:brightness(1.07);}

/* overlays */
.overlay{position:fixed;inset:0;background:rgba(8,12,16,.92);display:flex;align-items:center;justify-content:center;z-index:60;}
.overlay-card{text-align:center;padding:28px;}
.spinner{width:42px;height:42px;border:4px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 16px;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- DISPLAY ---------- */
.display-body{margin:0;overflow:hidden;background:#000;}
#scene{display:block;width:100vw;height:100vh;}
.hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;
  padding:10px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:10;pointer-events:none;}
.hud-call{font-weight:800;letter-spacing:3px;color:#fff;font-size:1.1rem;}
.hud-count{color:#cfd8e3;font-size:1rem;}
.hud-paused{margin-left:auto;background:var(--danger);color:#fff;font-weight:800;letter-spacing:2px;padding:4px 14px;border-radius:6px;}

.terminate-display-btn{position:fixed;top:12px;right:14px;z-index:20;
  background:rgba(40,12,12,.7);border:1px solid var(--danger);color:#ff6b6b;
  font-weight:800;letter-spacing:1.5px;padding:8px 16px;border-radius:8px;cursor:pointer;
  font-size:.8rem;opacity:.5;transition:opacity .15s;}
.terminate-display-btn:hover{opacity:1;background:var(--danger);color:#fff;}

/* ---------- RESPONSIVE (placed last so they win the cascade) ---------- */

/* On laptops/tablets (wide AND tall enough), show the formation view beside the controls. */
@media (min-width:900px) and (min-height:600px){
  .formation-pane{display:block;flex:1;min-width:0;background:#000;position:relative;}
  #miniScene{display:block;width:100%;height:100%;}
  .controls-pane{flex:0 0 460px;max-width:460px;border-left:1px solid var(--line);}
  .view-toggle{display:inline-block;}
  body.view-hidden .formation-pane{display:none;}
  body.view-hidden .controls-pane{flex:1;max-width:none;border-left:none;}
  /* Re-form panel covers only the controls column, so the formation view stays
     visible while Lead picks a new shape. */
  .reform-panel{left:auto;width:460px;}
}

/* Phone in landscape (short): action buttons move into a center column between
   the two control clusters so the full D-pad and throttle/yaw stay at the thumbs. */
@media (orientation:landscape) and (max-height:599px){
  .controls-pane{padding:6px;gap:6px;}
  .ctrl-header{padding:4px 8px;}
  .status-row{padding:3px 8px;}
  .play-area{grid-template-columns:1fr auto 1fr;grid-template-rows:1fr;}
  .play-area .dpad{grid-column:1;grid-row:1;}
  .play-area .action-buttons{grid-column:2;grid-row:1;display:flex;flex-direction:column;
    justify-content:center;min-width:120px;max-width:150px;}
  .play-area .rightpad{grid-column:3;grid-row:1;}
  .action-buttons button{padding:10px 8px;font-size:.8rem;letter-spacing:.3px;}
}