/* =================================================
   F-16C COCKPIT SIMULATOR — STYLES
   ================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(ellipse at 50% 30%, #1a1a1a 0%, #0a0a0a 60%, #000 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px;
  font-family: 'Courier New', 'Consolas', monospace;
  color: #00ff41;
  overflow-x: auto;
}

.title {
  letter-spacing: 5px;
  font-size: 12px;
  margin-bottom: 14px;
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0,255,65,0.5);
}

.cockpit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hint {
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  letter-spacing: 1px;
  text-align: center;
}
.hint kbd {
  color: #00ff41; background: #111;
  border: 1px solid #2a4a2a;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: inherit;
}
.hint .hi {
  color: #ffd966;
  text-shadow: 0 0 4px rgba(255,217,102,0.5);
}

/* =================================================
   COMMON: Screws
   ================================================= */
.screw {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #888, #2a2a2a 70%);
  box-shadow: inset 0 0 2px #000, 0 1px 1px rgba(255,255,255,0.05);
  z-index: 2;
}
.screw::before {
  content: '';
  position: absolute;
  inset: 3px;
  background: #1a1a1a;
  clip-path: polygon(45% 0, 55% 0, 55% 100%, 45% 100%);
  transform: rotate(35deg);
}
.screw.tl { top: 6px; left: 6px; }
.screw.tr { top: 6px; right: 6px; }
.screw.bl { bottom: 6px; left: 6px; }
.screw.br { bottom: 6px; right: 6px; }

/* =================================================
   ICP — INTEGRATED CONTROL PANEL
   ================================================= */
.icp {
  position: relative;
  width: 340px;
  background:
    linear-gradient(145deg, #2a2a2a 0%, #161616 50%, #232323 100%);
  border-radius: 10px;
  padding: 24px 18px 18px 18px;
  box-shadow:
    inset 0 0 0 2px #3a3a3a,
    inset 0 5px 12px rgba(0,0,0,0.6),
    inset 0 -5px 12px rgba(0,0,0,0.5),
    0 20px 40px rgba(0,0,0,0.85);
}

/* DED housing (the bezeled display unit at top) */
.ded-housing {
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #333;
  margin-bottom: 14px;
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.8),
    inset 0 0 18px rgba(0,255,65,0.05);
}
.ded {
  background: #060a04;
  padding: 10px 12px;
  border: 1px solid #1a2a1a;
  border-radius: 3px;
  font: 13px/1.5 'Courier New', monospace;
  color: #c0ff77;
  text-shadow: 0 0 5px rgba(192,255,119,0.6);
  letter-spacing: 1.5px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.ded-line {
  white-space: pre;
}
.ded .inv {
  background: #c0ff77;
  color: #060a04;
  text-shadow: none;
  padding: 0 2px;
}
.ded .cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #c0ff77;
  vertical-align: bottom;
  animation: blink 0.7s infinite step-end;
  text-shadow: 0 0 8px #c0ff77;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Round mode buttons (COM1 / COM2 / IFF / LIST / A-A / A-G) */
.icp-modes {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.icp-round {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #555, #1a1a1a 75%);
  border: 1px solid #2a2a2a;
  color: #00ff41;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.12),
    inset 0 -1px 2px rgba(0,0,0,0.5),
    0 2px 5px rgba(0,0,0,0.7);
  text-shadow: 0 0 4px rgba(0,255,65,0.6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all 0.1s;
}
.icp-round span { font-size: 9px; letter-spacing: 0.5px; }
.icp-round b    { font-size: 11px; }
.icp-round:hover { color: #aaffaa; }
.icp-round:active,
.icp-round.active {
  background: radial-gradient(circle at 30% 25%, #2a6e3a, #0a3018 75%);
  box-shadow: inset 0 0 8px rgba(0,255,65,0.5), 0 1px 3px rgba(0,0,0,0.7);
  color: #d0ffd0;
}

/* Keypad body */
.icp-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.icp-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  flex: 1;
}
.icp-key {
  background: linear-gradient(145deg, #4a4a4a 0%, #1f1f1f 100%);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  height: 44px;
  cursor: pointer;
  color: #00ff41;
  font-family: 'Courier New', monospace;
  position: relative;
  text-align: center;
  text-shadow: 0 0 4px rgba(0,255,65,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.6);
  padding: 4px 2px 2px;
  transition: all 0.07s;
}
.icp-key:hover { color: #d0ffd0; }
.icp-key:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.icp-key .lbl { display: block; font-size: 8px; letter-spacing: 0.5px; }
.icp-key b    { display: block; font-size: 16px; line-height: 1; margin-top: 2px;
                font-weight: normal; }
.icp-key i    { font-style: normal; font-size: 9px; vertical-align: super; opacity: 0.85; }
.icp-key.wide b { font-size: 11px; line-height: 44px; margin: 0; }

/* DCS switch */
.icp-dcs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  padding-top: 14px;
  position: relative;
}
.icp-dcs .dcs-label {
  position: absolute;
  font-size: 8px;
  color: #00ff41;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px rgba(0,255,65,0.5);
}
.icp-dcs .dcs-label.top  { top: 0; }
.icp-dcs .dcs-label.left { left: 0; top: 38px; }
.dcs-row {
  display: flex; gap: 4px;
  margin: 1px 0;
}
.dcs-btn {
  width: 22px; height: 22px;
  background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  color: #00ff41;
  cursor: pointer;
  font-size: 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.6);
  text-shadow: 0 0 3px rgba(0,255,65,0.5);
}
.dcs-btn:hover  { color: #d0ffd0; }
.dcs-btn:active { transform: translateY(1px); }

/* =================================================
   MFD FRAMES (3 displays)
   ================================================= */
.mfd-row {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.mfd-frame {
  position: relative;
  width: 470px; height: 470px;
  background:
    linear-gradient(145deg, #353535 0%, #1c1c1c 50%, #2a2a2a 100%);
  border-radius: 12px;
  padding: 65px;
  box-shadow:
    inset 0 0 0 2px #4a4a4a,
    inset 0 5px 12px rgba(0,0,0,0.6),
    inset 0 -5px 12px rgba(0,0,0,0.5),
    0 18px 36px rgba(0,0,0,0.85);
  transition: box-shadow 0.2s;
}

.mfd-frame.active {
  box-shadow:
    inset 0 0 0 2px #6a8a6a,
    inset 0 5px 12px rgba(0,0,0,0.6),
    inset 0 -5px 12px rgba(0,0,0,0.5),
    0 18px 36px rgba(0,0,0,0.85),
    0 0 25px rgba(0,255,65,0.18);
}

.mfd-name {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #666;
  letter-spacing: 3px;
  z-index: 2;
}
.mfd-frame.active .mfd-name {
  color: #00ff41;
  text-shadow: 0 0 4px rgba(0,255,65,0.6);
}

.mfd-screen {
  position: relative;
  width: 100%; height: 100%;
  background: #000308;
  border: 3px solid #060606;
  box-shadow:
    inset 0 0 20px rgba(0,255,65,0.13),
    inset 0 0 60px rgba(0,0,0,0.95),
    0 0 0 1px #222;
  overflow: hidden;
  border-radius: 4px;
}
.mfd-screen canvas {
  display: block;
  width: 100%; height: 100%;
}

/* OSB buttons */
.osb {
  position: absolute;
  background: linear-gradient(145deg, #404040 0%, #1a1a1a 100%);
  color: #00ff41;
  border: 1px solid #2a2a2a;
  font: bold 9px 'Courier New', monospace;
  letter-spacing: 0.8px;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.6);
  text-shadow: 0 0 4px rgba(0,255,65,0.5);
  user-select: none;
  transition: all 0.08s;
  z-index: 2;
}
.osb:hover {
  background: linear-gradient(145deg, #4a4a4a 0%, #252525 100%);
  color: #9fffaf;
}
.osb:active {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
  transform: translateY(1px);
}
.osb.active {
  background: linear-gradient(145deg, #006830 0%, #003015 100%);
  color: #d0ffd0;
  box-shadow:
    inset 0 0 8px rgba(0,255,65,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 10px rgba(0,255,65,0.3);
  text-shadow: 0 0 5px rgba(255,255,255,0.7);
}
/* not used on the current page: still physically present, just inert + dim */
.osb.disabled {
  color: rgba(0,255,65,0.18);
  cursor: default;
  background: linear-gradient(145deg, #2c2c2c 0%, #161616 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.6);
  text-shadow: none;
}
.osb.disabled:hover { color: rgba(0,255,65,0.18); background: linear-gradient(145deg, #2c2c2c 0%, #161616 100%); }
.osb.disabled:active { transform: none; }

/* OSB positions for 470x470 frame, 340x340 canvas (canvas at 65–405) */
.osb.top    { width: 60px; height: 24px; top: 25px; }
.osb.bottom { width: 60px; height: 24px; bottom: 25px; }
.osb.left   { width: 24px; height: 48px; left: 25px;
              writing-mode: vertical-rl; transform: rotate(180deg); }
.osb.right  { width: 24px; height: 48px; right: 25px;
              writing-mode: vertical-rl; }

/* Top/Bottom: 5 buttons of 60w + 10 gap, span 65–405 (canvas width) */
.mfd-frame .osb.top[data-osb="T1"]    { left:  65px; }
.mfd-frame .osb.top[data-osb="T2"]    { left: 135px; }
.mfd-frame .osb.top[data-osb="T3"]    { left: 205px; }
.mfd-frame .osb.top[data-osb="T4"]    { left: 275px; }
.mfd-frame .osb.top[data-osb="T5"]    { left: 345px; }
.mfd-frame .osb.bottom[data-osb="B1"] { left:  65px; }
.mfd-frame .osb.bottom[data-osb="B2"] { left: 135px; }
.mfd-frame .osb.bottom[data-osb="B3"] { left: 205px; }
.mfd-frame .osb.bottom[data-osb="B4"] { left: 275px; }
.mfd-frame .osb.bottom[data-osb="B5"] { left: 345px; }
/* Left/Right: 5 buttons of 48h + 25 gap, span 65–405 (canvas height) */
.mfd-frame .osb.left[data-osb="L1"]   { top:  65px; }
.mfd-frame .osb.left[data-osb="L2"]   { top: 138px; }
.mfd-frame .osb.left[data-osb="L3"]   { top: 211px; }
.mfd-frame .osb.left[data-osb="L4"]   { top: 284px; }
.mfd-frame .osb.left[data-osb="L5"]   { top: 357px; }
.mfd-frame .osb.right[data-osb="R1"]  { top:  65px; }
.mfd-frame .osb.right[data-osb="R2"]  { top: 138px; }
.mfd-frame .osb.right[data-osb="R3"]  { top: 211px; }
.mfd-frame .osb.right[data-osb="R4"]  { top: 284px; }
.mfd-frame .osb.right[data-osb="R5"]  { top: 357px; }

/* CRT effects */
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 3px
  );
  z-index: 10;
  mix-blend-mode: multiply;
}
.crt-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 11;
}
.flicker {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0,255,65,0.02);
  z-index: 12;
  animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}

/* =====================================================================
   GAME MENU / DEBRIEF / REPLAY UI
   ===================================================================== */
#game-ui{position:fixed;inset:0;z-index:80;pointer-events:none;font-family:"Courier New",monospace;color:#5bff9b}
.game-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 30%,rgba(11,38,20,.62),rgba(0,0,0,.78));pointer-events:auto}
.game-modal.show{display:flex}
.game-card{border:1px solid rgba(91,255,155,.65);background:rgba(0,14,7,.92);box-shadow:0 0 34px rgba(33,255,91,.22),inset 0 0 28px rgba(33,255,91,.08);border-radius:16px;padding:24px;max-width:min(1060px,92vw);max-height:88vh;overflow:auto;text-shadow:0 0 7px rgba(91,255,155,.55)}
.menu-card{width:560px;text-align:center}.small-card{width:460px;text-align:center}.debrief-card{width:920px}.browser-card{width:1080px}
.game-kicker{font-size:13px;letter-spacing:.24em;color:#a8ffc0;margin-bottom:10px}.game-card h1,.game-card h2{margin:4px 0 18px;letter-spacing:.18em;color:#d5ffe0}.menu-level{margin:8px 0 18px;color:#a8ffc0}.menu-level b{color:#ffd24d}
.menu-buttons{display:grid;gap:10px}.menu-buttons button,.game-card button,.replay-hud button{cursor:pointer;border:1px solid rgba(91,255,155,.78);border-radius:10px;background:rgba(8,34,16,.95);color:#d5ffe0;padding:11px 14px;font:bold 14px "Courier New",monospace;letter-spacing:.08em;box-shadow:inset 0 0 12px rgba(91,255,155,.12)}
.menu-buttons button:hover,.game-card button:hover,.replay-hud button:hover{background:rgba(31,83,44,.95);box-shadow:0 0 16px rgba(91,255,155,.18),inset 0 0 14px rgba(91,255,155,.18)}
.game-card button.secondary,.replay-hud button{border-color:rgba(168,255,192,.45);background:rgba(0,18,10,.86)}.game-card button:disabled{opacity:.5;cursor:wait}.menu-foot{margin-top:16px;font-size:12px;color:#8decae}.level-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.level-choice.active{color:#ffd24d;border-color:#ffd24d}
.debrief-grid{display:grid;grid-template-columns:minmax(280px,1fr) 320px;gap:24px}.score-total{font:bold 46px "Courier New",monospace;color:#ffd24d;text-align:center;margin-bottom:12px}#score-breakdown{width:100%;border-collapse:collapse;font-size:13px}#score-breakdown td{border-bottom:1px solid rgba(91,255,155,.16);padding:7px 5px}#score-breakdown td:last-child{text-align:right;color:#d5ffe0}.pilot-form{display:grid;gap:12px}.pilot-form label{display:grid;gap:7px;color:#d5ffe0;font-weight:bold}.pilot-form label span{font-size:11px;font-weight:normal;color:#8decae}.pilot-form input,.pilot-form select{width:100%;box-sizing:border-box;border:1px solid rgba(91,255,155,.6);border-radius:9px;background:#001006;color:#d5ffe0;padding:11px;font:bold 16px "Courier New",monospace;text-transform:uppercase;outline:none}.save-status{min-height:22px;color:#ffd24d;font-size:12px}.browser-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.replay-table-wrap{overflow:auto;max-height:64vh}.replay-table{width:100%;border-collapse:collapse;font-size:12px}.replay-table th,.replay-table td{border-bottom:1px solid rgba(91,255,155,.15);padding:9px 7px;text-align:left;white-space:nowrap}.replay-table th{color:#a8ffc0;letter-spacing:.08em}.replay-table td:nth-child(6){color:#ffd24d;font-weight:bold;text-align:right}.empty-replay{text-align:center;padding:32px;color:#8decae}.outcome-WIN{color:#ffd24d}.outcome-LOSS{color:#ff7b7b}
.replay-hud{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:18px;pointer-events:auto;border:1px solid rgba(91,255,155,.62);background:rgba(0,12,6,.86);border-radius:14px;padding:10px 12px;box-shadow:0 0 22px rgba(33,255,91,.18)}.replay-hud.show{display:flex}.replay-hud>div{display:flex;align-items:center;gap:10px}.replay-hud b{color:#ffd24d}.replay-hud span{color:#d5ffe0}
body[data-game-mode="ACTIVE_MISSION"] #game-ui,body[data-game-mode="FLIGHT_SCHOOL"] #game-ui{pointer-events:none}body[data-game-mode="ACTIVE_MISSION"] .game-modal,body[data-game-mode="FLIGHT_SCHOOL"] .game-modal{display:none!important}
@media (max-width:760px){.debrief-grid{grid-template-columns:1fr}.menu-card,.small-card{width:min(92vw,560px)}.game-card{padding:18px}.level-buttons{grid-template-columns:1fr}.replay-hud{left:8px;right:8px;transform:none;justify-content:space-between;flex-wrap:wrap}}


/* ---- F16 feature UI patch v2 ---- */
#game-ui{position:fixed;inset:0;z-index:80;pointer-events:none;font-family:"Courier New",monospace;color:#5bff9b}
#game-ui .game-modal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 28%,rgba(11,38,20,.66),rgba(0,0,0,.82));pointer-events:auto}
#game-ui .game-modal.show{display:flex}
#game-ui .game-card{border:1px solid rgba(91,255,155,.65);background:rgba(0,14,7,.94);box-shadow:0 0 34px rgba(33,255,91,.22),inset 0 0 28px rgba(33,255,91,.08);border-radius:16px;padding:24px;max-width:min(1060px,92vw);max-height:88vh;overflow:auto;text-shadow:0 0 7px rgba(91,255,155,.55)}
#game-ui .menu-card{width:560px;text-align:center}#game-ui .debrief-card{width:920px}#game-ui .browser-card{width:1080px}
#game-ui .game-kicker{font-size:13px;letter-spacing:.24em;color:#a8ffc0;margin-bottom:10px}#game-ui .game-card h1,#game-ui .game-card h2{margin:4px 0 18px;letter-spacing:.18em;color:#d5ffe0}
#game-ui .menu-level{margin:8px 0 18px;color:#a8ffc0}#game-ui .menu-level b{color:#ffd24d}
#game-ui .menu-buttons{display:grid;gap:10px}#game-ui .menu-buttons button,#game-ui .game-card button,#game-ui .replay-hud button{cursor:pointer;border:1px solid rgba(91,255,155,.78);border-radius:10px;background:rgba(8,34,16,.95);color:#d5ffe0;padding:11px 14px;font:bold 14px "Courier New",monospace;letter-spacing:.08em;box-shadow:inset 0 0 12px rgba(91,255,155,.12)}
#game-ui .menu-buttons button:hover,#game-ui .game-card button:hover,#game-ui .replay-hud button:hover{background:rgba(31,83,44,.95);box-shadow:0 0 16px rgba(91,255,155,.18),inset 0 0 14px rgba(91,255,155,.18)}
#game-ui .game-card button.secondary,#game-ui .replay-hud button{border-color:rgba(168,255,192,.45);background:rgba(0,18,10,.86)}#game-ui .game-card button:disabled{opacity:.5;cursor:wait}
#game-ui .menu-foot{margin-top:16px;font-size:12px;color:#8decae}.level-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.level-choice.active{color:#ffd24d;border-color:#ffd24d}
#game-ui .debrief-grid{display:grid;grid-template-columns:minmax(280px,1fr) 320px;gap:24px}#game-ui .score-total{font:bold 46px "Courier New",monospace;color:#ffd24d;text-align:center;margin-bottom:12px}
#game-ui #score-breakdown{width:100%;border-collapse:collapse;font-size:13px}#game-ui #score-breakdown td{border-bottom:1px solid rgba(91,255,155,.16);padding:7px 5px}#game-ui #score-breakdown td:last-child{text-align:right;color:#d5ffe0}
#game-ui .pilot-form{display:grid;gap:12px}#game-ui .pilot-form label{display:grid;gap:7px;color:#d5ffe0;font-weight:bold}#game-ui .pilot-form label span{font-size:11px;font-weight:normal;color:#8decae}
#game-ui .pilot-form input,#game-ui .pilot-form select{width:100%;box-sizing:border-box;border:1px solid rgba(91,255,155,.6);border-radius:9px;background:#001006;color:#d5ffe0;padding:11px;font:bold 16px "Courier New",monospace;text-transform:uppercase;outline:none}
#game-ui .save-status{min-height:22px;color:#ffd24d;font-size:12px}.browser-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.replay-table-wrap{overflow:auto;max-height:64vh}.replay-table{width:100%;border-collapse:collapse;font-size:12px}.replay-table th,.replay-table td{border-bottom:1px solid rgba(91,255,155,.15);padding:9px 7px;text-align:left;white-space:nowrap}.replay-table th{color:#a8ffc0;letter-spacing:.08em}.replay-table td:nth-child(6){color:#ffd24d;font-weight:bold;text-align:right}.empty-replay{text-align:center;padding:32px;color:#8decae}.outcome-WIN{color:#ffd24d}.outcome-LOSS{color:#ff7b7b}
#game-ui .replay-hud{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:18px;pointer-events:auto;border:1px solid rgba(91,255,155,.62);background:rgba(0,12,6,.86);border-radius:14px;padding:10px 12px;box-shadow:0 0 22px rgba(33,255,91,.18)}#game-ui .replay-hud.show{display:flex}#game-ui .replay-hud>div{display:flex;align-items:center;gap:10px}#game-ui .replay-hud b{color:#ffd24d}#game-ui .replay-hud span{color:#d5ffe0}
body[data-game-mode="ACTIVE_MISSION"] #game-ui,body[data-game-mode="FLIGHT_SCHOOL"] #game-ui{pointer-events:none}body[data-game-mode="ACTIVE_MISSION"] #game-ui .game-modal,body[data-game-mode="FLIGHT_SCHOOL"] #game-ui .game-modal{display:none!important}
@media (max-width:760px){#game-ui .debrief-grid{grid-template-columns:1fr}#game-ui .menu-card{width:min(92vw,560px)}#game-ui .game-card{padding:18px}.level-buttons{grid-template-columns:1fr}#game-ui .replay-hud{left:8px;right:8px;transform:none;justify-content:space-between;flex-wrap:wrap}}

/* ---- Replay playback widget patch: compact top-left radial control ---- */
#game-ui .replay-hud,
.replay-hud{
  position:fixed !important;
  top:14px !important;
  left:14px !important;
  right:auto !important;
  transform:none !important;
  width:218px !important;
  height:140px !important;
  display:none !important;
  pointer-events:auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
  z-index:95 !important;
  text-shadow:0 0 8px rgba(91,255,155,.7);
}
#game-ui .replay-hud.show,
.replay-hud.show{display:block !important;}

/* Circle is deliberately layered above the tabs. The buttons keep full borders and slide behind it. */
#game-ui .replay-core,
.replay-core{
  position:absolute;
  left:0;
  top:0;
  width:126px;
  height:126px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px solid rgba(91,255,155,.75);
  background:radial-gradient(circle at 42% 35%, rgba(12,52,24,.94), rgba(0,14,7,.90) 68%, rgba(0,0,0,.82));
  box-shadow:0 0 22px rgba(33,255,91,.24), inset 0 0 30px rgba(91,255,155,.12);
  z-index:4;
  pointer-events:auto;
}
#game-ui .replay-core:before,
.replay-core:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px dashed rgba(91,255,155,.32);
  border-radius:50%;
  pointer-events:none;
}
#game-ui .replay-tag,
.replay-tag{font:bold 10px "Courier New",monospace;letter-spacing:.18em;color:#a8ffc0;line-height:1;}
#game-ui .replay-alias,
.replay-alias{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:bold 14px "Courier New",monospace;color:#ffd24d;line-height:1.05;}
#game-ui .replay-countdown,
.replay-countdown{font:bold 16px "Courier New",monospace;color:#d5ffe0;line-height:1.05;}
#game-ui .replay-elapsed,
.replay-elapsed{font:bold 9px "Courier New",monospace;color:#8decae;line-height:1.05;}
#game-ui .replay-score,
.replay-score{font:bold 10px "Courier New",monospace;color:#ffd24d;line-height:1.05;}

#game-ui .replay-arch,
.replay-arch{
  position:absolute;
  left:90px;
  width:122px;
  min-width:0;
  height:33px;
  padding:0 12px 0 38px !important;
  text-align:center !important;
  border-radius:999px !important;
  border:1px solid rgba(91,255,155,.68) !important;
  background:linear-gradient(90deg, rgba(0,18,8,.82), rgba(8,44,21,.90) 48%, rgba(14,58,27,.88)) !important;
  color:#d5ffe0 !important;
  font:bold 10px "Courier New",monospace !important;
  letter-spacing:.09em !important;
  box-shadow:0 0 16px rgba(33,255,91,.14), inset 0 0 12px rgba(91,255,155,.10) !important;
  overflow:visible !important;
  z-index:1;
}
#game-ui .replay-arch:before,
.replay-arch:before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  border:1px solid rgba(168,255,192,.13);
  pointer-events:none;
}
#game-ui .replay-arch:hover,
.replay-arch:hover{
  color:#ffd24d !important;
  background:linear-gradient(90deg, rgba(0,24,10,.88), rgba(18,70,33,.95) 48%, rgba(28,96,45,.92)) !important;
}
#game-ui .replay-pause,
.replay-pause{top:7px;}
#game-ui .replay-restart,
.replay-restart{top:47px;}
#game-ui .replay-exit,
.replay-exit{top:87px;}

@media (max-width:760px){
  #game-ui .replay-hud,.replay-hud{top:8px !important;left:8px !important;right:auto !important;width:206px !important;height:128px !important;}
  #game-ui .replay-core,.replay-core{width:114px;height:114px;}
  #game-ui .replay-arch,.replay-arch{left:82px;width:116px;height:30px;padding:0 10px 0 38px !important;font-size:9px !important;}
  #game-ui .replay-pause,.replay-pause{top:6px;}
  #game-ui .replay-restart,.replay-restart{top:42px;}
  #game-ui .replay-exit,.replay-exit{top:78px;}
}

/* ---- polished mission/replay scrollbars ---- */
#game-ui .game-card,
#game-ui .replay-table-wrap,
#modal-browser .replay-table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#39ff6e rgba(0,18,8,.82);
}
#game-ui .game-card::-webkit-scrollbar,
#game-ui .replay-table-wrap::-webkit-scrollbar,
#modal-browser .replay-table-wrap::-webkit-scrollbar{width:11px;height:11px;}
#game-ui .game-card::-webkit-scrollbar-track,
#game-ui .replay-table-wrap::-webkit-scrollbar-track,
#modal-browser .replay-table-wrap::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(0,18,8,.95),rgba(0,9,4,.95));
  border:1px solid rgba(91,255,155,.18);
  border-radius:12px;
  box-shadow:inset 0 0 8px rgba(33,255,91,.08);
}
#game-ui .game-card::-webkit-scrollbar-thumb,
#game-ui .replay-table-wrap::-webkit-scrollbar-thumb,
#modal-browser .replay-table-wrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7cff9a,#1ba84d 48%,#0d5f2f);
  border:2px solid rgba(0,16,7,.96);
  border-radius:12px;
  box-shadow:0 0 10px rgba(57,255,110,.28),inset 0 0 8px rgba(230,255,236,.24);
}
#game-ui .game-card::-webkit-scrollbar-thumb:hover,
#game-ui .replay-table-wrap::-webkit-scrollbar-thumb:hover,
#modal-browser .replay-table-wrap::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#d5ffe0,#39ff6e 48%,#17843f);
}
#game-ui .game-card::-webkit-scrollbar-corner,
#game-ui .replay-table-wrap::-webkit-scrollbar-corner,
#modal-browser .replay-table-wrap::-webkit-scrollbar-corner{background:rgba(0,9,4,.95);}