/* 三维赛场仿真：独立页面，不改动比赛控制台的数据。 */
.sim-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 16px 18px 28px;
}

.sim-stage {
  align-self: start;
  min-width: 0;
  padding: 10px;
}

.sim-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid #22344d;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 35%, rgba(29, 65, 86, .45), transparent 58%),
    #03070b;
  aspect-ratio: 16 / 9;
  min-height: 380px;
}

#sim-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#sim-canvas:active { cursor: grabbing; }

.sim-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #cfe4ef;
  background: rgba(3, 7, 11, .72);
  font-size: 14px;
}

.sim-error strong { color: #ffb84d; font-size: 16px; }
.sim-error span { max-width: 430px; color: #9fb3c3; line-height: 1.6; }

.sim-scoreboard {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  min-width: min(600px, calc(100% - 24px));
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(4, 10, 15, .78);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.sim-team {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.sim-team.red { color: #ff7b86; }
.sim-team.blue { color: #73b8ff; }
.sim-team-name { font-size: 12px; letter-spacing: .08em; }
.sim-team strong {
  font: 700 36px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.04em;
}

.sim-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 170px;
}
.sim-clock span {
  color: #8ea4b5;
  font-size: 11px;
  letter-spacing: .08em;
}
.sim-clock strong {
  color: #f1f6f9;
  font: 700 28px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sim-clock small { color: #63798a; font-size: 10px; }

.sim-scoreboard.flash-red { animation: flash-red .7s ease-out; }
.sim-scoreboard.flash-blue { animation: flash-blue .7s ease-out; }

@keyframes flash-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 105, .8); }
  100% { box-shadow: 0 0 0 26px rgba(255, 90, 105, 0); }
}
@keyframes flash-blue {
  0% { box-shadow: 0 0 0 0 rgba(80, 160, 255, .8); }
  100% { box-shadow: 0 0 0 26px rgba(80, 160, 255, 0); }
}

.sim-legend {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(4, 10, 15, .66);
  color: #9fb3c3;
  font-size: 11px;
  pointer-events: none;
}
.sim-legend .hint { color: #657c8d; }
.sim-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: 1px;
}
.sim-legend .dot.ball { background: #ffd166; }
.sim-legend .dot.red { background: #ff5b69; }
.sim-legend .dot.blue { background: #4f9cff; }
.sim-legend .dot.sensor { background: #b894ff; box-shadow: 0 0 5px #b894ff; }

.sim-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding-top: 12px;
}

.sim-toolbar button { min-height: 34px; }
.sim-toolbar .primary { min-width: 76px; }

.sim-check {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: #c8d5df;
  font-size: 12px;
}
.sim-check input { accent-color: #38d996; }
.sim-bgm-toggle .hint {
  color: #63798a;
  font-size: 10px;
  line-height: 1;
}
#sim-bgm-state.on { color: #7bf0b8; }

.sim-speed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  color: #8ea4b5;
  font-size: 11px;
}
.sim-speed input { width: 100%; accent-color: #38d996; }
.sim-speed output { color: #e8eef3; font-family: ui-monospace, monospace; }

.sim-statusline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  color: #8ea4b5;
  font-size: 12px;
  line-height: 1.5;
}
.sim-statusline .hint { white-space: nowrap; }
.sim-syncline {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.sim-sync {
  color: #8ea4b5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.sim-sync.ok { color: #38d996; }
.sim-sync.bad { color: #ffb84d; }

.sim-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sim-side .panel { padding: 12px 14px; }
.sim-side h2 { font-size: 13px; }

.sim-views {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 8px;
}
.view-btn { min-height: 30px; }
.view-btn.active { border-color: #38d996; color: #b8ffe0; }

.sim-spec {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 0;
}
.sim-spec div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sim-spec dt { color: #8ea4b5; }
.sim-spec dd {
  margin: 0;
  color: #e8eef3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.sim-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow-y: auto;
  padding-top: 8px;
}

.sim-event {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #26333e;
  border-radius: 6px;
  background: #101820;
  font-size: 12px;
}
.sim-event b { color: #38d996; font-weight: 600; }
.sim-event.red b { color: #ff7b86; }
.sim-event.blue b { color: #73b8ff; }
.sim-event.warn b { color: #ffb84d; }
.sim-event .hint { white-space: nowrap; }

.sim-note p { margin: 6px 0 0; color: #b8c7d3; font-size: 12px; line-height: 1.65; }
.sim-note strong { color: #e8eef3; }

@media (max-width: 1050px) {
  .sim-shell { grid-template-columns: 1fr; }
  .sim-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .sim-side .sim-note { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .sim-shell { padding: 10px; }
  .sim-side { grid-template-columns: 1fr; }
  .sim-viewport { width: 100%; height: 280px; min-height: 0; aspect-ratio: auto; }
  .sim-scoreboard {
    top: 8px;
    gap: 8px;
    min-width: calc(100% - 16px);
    padding: 7px 9px;
  }
  .sim-team strong { font-size: 27px; }
  .sim-clock { min-width: 120px; }
  .sim-clock strong { font-size: 22px; }
  .sim-clock small { display: none; }
  .sim-legend { right: 8px; gap: 6px; font-size: 10px; }
  .sim-legend .hint { display: none; }
  .sim-toolbar label.sim-speed { flex: 1 1 130px; }
}

/* 手动操控、硬件注入与回放 */
.sim-mode {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: #8ea4b5;
  font-size: 11px;
}
.sim-mode select {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #33465d;
  border-radius: 6px;
  background: #0d1822;
  color: #e8eef3;
  font-size: 12px;
}

.sim-manual {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #24445a;
  border-radius: 8px;
  background: rgba(10, 32, 43, .72);
}
.sim-manual[hidden] { display: none; }
.sim-manual-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 170px;
}
.sim-manual-head strong { color: #b8ffe0; font-size: 13px; }
.sim-manual-head .hint { color: #7f9aab; font-size: 11px; }

.sim-drone-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sim-drone-picker button {
  min-width: 42px;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 11px;
}
.sim-drone-picker button.red { border-color: rgba(255, 78, 99, .45); color: #ff9ca7; }
.sim-drone-picker button.blue { border-color: rgba(63, 146, 255, .45); color: #9fcaff; }
.sim-drone-picker button.active {
  border-color: #ffd166;
  color: #ffe6a8;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .24);
}

.sim-pad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 30px);
  gap: 4px;
}
.sim-pad button {
  min-height: 0;
  padding: 0;
  font-size: 11px;
}
.sim-pad button[data-fly="up"] { grid-column: 2; grid-row: 1; }
.sim-pad button[data-fly="left"] { grid-column: 1; grid-row: 2; }
.sim-pad button[data-fly="forward"] { grid-column: 2; grid-row: 2; }
.sim-pad button[data-fly="right"] { grid-column: 3; grid-row: 2; }
.sim-pad button[data-fly="back"] { grid-column: 1; grid-row: 3; }
.sim-pad button[data-fly="down"] { grid-column: 2; grid-row: 3; }

.sim-rec {
  padding: 2px 5px;
  border-radius: 4px;
  background: #a4313c;
  color: #fff3f3;
  font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
.sim-rec[hidden] { display: none; }

.sim-inject-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.sim-inject-row button {
  min-height: 29px;
  padding: 4px 8px;
  font-size: 11px;
}
.sim-inject-row select {
  min-height: 29px;
  min-width: 132px;
  padding: 4px 7px;
  border: 1px solid #33465d;
  border-radius: 6px;
  background: #0d1822;
  color: #e8eef3;
  font-size: 11px;
}
.sim-hardware-result {
  margin: 9px 0 0;
  padding: 7px 9px;
  border: 1px solid #26333e;
  border-radius: 6px;
  background: #101820;
  color: #9fb3c3;
  font-size: 11px;
  line-height: 1.55;
}
.sim-hardware-result.ok { border-color: rgba(56, 217, 150, .45); color: #7bf0b8; }
.sim-hardware-result.warn { border-color: rgba(255, 184, 77, .45); color: #ffd18a; }

.sim-adv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 2px 0 4px;
}
.sim-adv-grid .sim-check {
  min-height: 28px;
  font-size: 11px;
}
.sim-adv-grid input:disabled { opacity: .42; }
#sim-adv-stats { margin-top: 7px; }
#sim-adv-stats::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #5d7181;
  vertical-align: 1px;
}
#sim-adv-stats.ok::before { background: #38d996; box-shadow: 0 0 5px rgba(56, 217, 150, .65); }

@media (max-width: 700px) {
  .sim-manual { align-items: flex-start; }
  .sim-manual-head { width: 100%; }
  .sim-drone-picker { flex: 1 1 auto; }
  .sim-pad {
    grid-template-columns: repeat(3, 38px);
    grid-template-rows: repeat(3, 32px);
  }
}

/* 全屏与庆祝动画 */
.sim-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: rgba(4, 10, 15, .74);
  color: #dcecf5;
  font-size: 11px;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}
.sim-fs-btn:hover { border-color: #38d996; color: #b8ffe0; }

.sim-viewport:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: #03070b;
}
.sim-viewport:fullscreen #sim-canvas { width: 100vw; height: 100vh; }
.sim-viewport:fullscreen .sim-scoreboard { top: 18px; }
.sim-viewport:fullscreen .sim-fs-btn { top: 18px; right: 18px; }

.sim-celebration {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.sim-celebration-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: min(420px, 78vw);
  padding: 22px 34px 20px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: rgba(4, 10, 15, .88);
  box-shadow: 0 20px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(56, 217, 150, .16);
  backdrop-filter: blur(14px);
  animation: sim-celebration-pop .55s cubic-bezier(.2, .9, .25, 1.25) both;
}
.sim-celebration-card span {
  color: #9fb3c3;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sim-celebration-card strong {
  color: #f3fbff;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.2;
  text-align: center;
}
.sim-celebration-card div {
  color: #fff;
  font: 800 clamp(48px, 8vw, 92px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.06em;
  text-shadow: 0 0 24px rgba(56, 217, 150, .25);
}
.sim-celebration[data-kind="start"] .sim-celebration-card div { color: #b8ffe0; }
.sim-celebration[data-kind="end"] .sim-celebration-card div { color: #ffd166; }
.sim-celebration[data-kind="end"] .sim-celebration-card {
  border-color: rgba(255, 209, 102, .35);
  box-shadow: 0 20px 90px rgba(0, 0, 0, .6), 0 0 70px rgba(255, 184, 77, .22);
}

.sim-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.sim-confetti span {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: sim-confetti-fall var(--d) cubic-bezier(.18, .7, .55, 1) var(--delay) forwards;
}
@keyframes sim-confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -10vh, 0) rotate(0deg); }
  8% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 112vh, 0) rotate(var(--spin)); }
}
@keyframes sim-celebration-pop {
  0% { opacity: 0; transform: scale(.72) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 仿真操作手调试 */
.sim-op-picker { margin-top: 4px; }
.sim-op-picker select { flex: 1; min-width: 0; }
.sim-operator-meta {
  min-height: 18px;
  margin: 5px 0 2px;
  color: #7f9aab;
  font-size: 11px;
  line-height: 1.5;
}
.sim-op-rows { display: grid; gap: 4px; margin: 4px 0 8px; }
.sim-op-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: #8ea4b5;
  font-size: 11px;
}
.sim-op-row input[type="range"] {
  width: 100%;
  accent-color: #38d996;
}
.sim-op-row output {
  color: #b8ffe0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 外围场景、天气和时间 */
.sim-env-panel .sim-mode {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  padding: 3px 0;
}
.sim-env-panel .sim-mode select { width: 100%; }
.sim-time {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  color: #8ea4b5;
  font-size: 11px;
}
.sim-time input {
  width: 100%;
  accent-color: #38d996;
}
.sim-time output {
  color: #e8eef3;
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}
.sim-env-panel .sim-check { min-height: 26px; font-size: 11px; }
.sim-env-panel #sim-env-note { margin-top: 6px; font-size: 10px; line-height: 1.55; }