/* v10 — 4:3 campaign board, global mantis schedule, incoming self-contact */
.game-board {
  width: min(calc(100vw - 16px), calc((100dvh - 16px) * 16 / 9), 1800px);
  aspect-ratio: 16 / 9;
  grid-template-rows: 8.5% 5.8% minmax(0, 1fr) 12.6%;
  gap: .52cqw;
  padding: .62cqw;
}
.game-board::before { top: 14.65%; }
.game-board::after { bottom: 13.25%; }

.topbar { padding: .62cqw .92cqw; }
.role-progress { gap: .42cqw; }
.role-segment { padding: .28cqw .48cqw; }
.scene { border-radius: .82cqw; }
.scene-background { object-fit: cover; object-position: center; }

.character-stage {
  left: 2.2%;
  bottom: 2.5%;
  width: 26.5%;
  height: 77%;
}
.character-sprite { max-height: 92%; }
.holo-console {
  top: 2.7%;
  right: 1.45%;
  width: 68%;
  height: 94.5%;
}
.console-grey { width: 68%; right: 1.45%; top: 2.7%; height: 94.5%; }
.console-oversoul { width: 70%; right: 1.45%; top: 3%; height: 94%; }

.incoming-contact-panel {
  position: absolute;
  z-index: 7;
  top: 2.8%;
  left: 1.7%;
  width: 27.5%;
  min-height: 18%;
  padding: .78cqw .85cqw .72cqw;
  opacity: 0;
  transform: translateY(-.7cqw) scale(.97);
  pointer-events: none;
  background:
    linear-gradient(rgba(0,5,15,.56), rgba(0,5,15,.68)),
    url("../../assets/hud/panel-card.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 .9cqw rgba(84,220,255,.38));
  transition: opacity .2s ease, transform .2s ease;
}
.incoming-contact-panel.visible { opacity: 1; transform: translateY(0) scale(1); }
.incoming-heading {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: .5cqw;
  align-items: center;
}
.incoming-heading img {
  width: 2.8cqw;
  height: 2.8cqw;
  min-width: 30px;
  min-height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 .45cqw rgba(82,225,255,.75));
}
.incoming-heading p {
  margin: 0;
  color: #b9f6ff;
  font-size: clamp(9px,.64cqw,13px);
  font-weight: 900;
  letter-spacing: .08em;
}
.incoming-heading strong {
  display: block;
  margin-top: .08cqw;
  color: #fff;
  font-size: clamp(14px,1.05cqw,20px);
}
.incoming-heading > span {
  padding: .25cqw .48cqw;
  border: 1px solid rgba(89,219,255,.54);
  border-radius: 999px;
  color: #dffaff;
  background: rgba(4,31,61,.82);
  font-size: clamp(9px,.62cqw,12px);
  font-weight: 900;
}
.incoming-heading > span.near { color: #ffe98a; border-color: rgba(255,220,75,.65); }
.incoming-heading > span.active { color: #a7ffd7; border-color: rgba(98,242,174,.72); box-shadow: 0 0 .65cqw rgba(98,242,174,.34); }
.incoming-contact-panel > p {
  margin: .48cqw 0 .52cqw;
  color: #e2f4f8;
  font-size: clamp(10px,.72cqw,14px);
  line-height: 1.25;
}
.incoming-progress {
  height: .52cqw;
  min-height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(92,171,204,.2);
  box-shadow: inset 0 0 .35cqw rgba(0,0,0,.8);
}
.incoming-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#43dcff,#62f2ae,#ffe56a);
  box-shadow: 0 0 .7cqw rgba(98,242,174,.62);
  transition: width .35s ease;
}
.incoming-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .35cqw;
  margin-top: .48cqw;
}
.incoming-metrics span {
  color: #bedde7;
  font-size: clamp(9px,.63cqw,12px);
  font-weight: 750;
  white-space: nowrap;
}
.incoming-metrics b { color: #fff; }

.global-timeline-shell {
  grid-template-rows: auto minmax(190px,1fr) auto auto;
  gap: .42cqw;
}
.global-timeline-shell .timeline-asset {
  display: none !important;
}
.global-readout {
  grid-template-columns: 1.45fr repeat(6,minmax(0,1fr));
  gap: .32cqw;
}
.global-readout > div { padding: .48cqw .58cqw !important; }
.global-readout span { font-size: clamp(9px,.62cqw,12px); }
.global-readout b { font-size: clamp(11px,.79cqw,15px); }
.global-timeline-shell .timeline-canvas-wrap { min-height: 190px; }
.booking-queue {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .38cqw;
}
.booking-card {
  min-width: 0;
  padding: .5cqw .62cqw;
  background:
    linear-gradient(rgba(0,5,15,.65),rgba(0,5,15,.72)),
    url("../../assets/hud/button-frame.png") center / 100% 100% no-repeat;
}
.booking-card span,
.booking-card b,
.booking-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.booking-card span { color: #cdbdff; font-size: clamp(9px,.61cqw,12px); font-weight: 900; letter-spacing: .06em; }
.booking-card b { margin-top: .1cqw; color: #fff; font-size: clamp(11px,.82cqw,16px); }
.booking-card small { margin-top: .08cqw; color: #d7ecf2; font-size: clamp(9px,.62cqw,12px); }
.booking-card.priority span { color: #ffe26a; }
.booking-card.empty { opacity: .58; }
.timeline-actions { min-height: 2.7cqw; }
.timeline-actions strong { font-size: clamp(11px,.78cqw,15px); }

.drawer-help {
  margin: 0 0 .65cqw;
  color: #d5edf3;
  font-size: var(--small);
  line-height: 1.35;
}
.global-schedule-drawer { display: grid; gap: .38cqw; }
.global-booking-row {
  display: grid;
  grid-template-columns: auto 1.15fr 1fr 1.2fr;
  align-items: center;
  gap: .5cqw;
  padding: .48cqw .58cqw;
  background: url("../../assets/hud/button-frame.png") center / 100% 100% no-repeat;
}
.global-booking-row > span {
  display: grid;
  place-items: center;
  width: 1.65cqw;
  height: 1.65cqw;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  color: #d8f8ff;
  background: rgba(36,133,178,.35);
  font-size: clamp(9px,.62cqw,12px);
  font-weight: 900;
}
.global-booking-row b { color: #fff; }
.global-booking-row small { color: #d9edf2; }
.global-booking-row em { color: #b9f4ff; font-style: normal; }
.global-booking-row.priority b,
.global-booking-row.priority em { color: #ffe36f; }

.result-dashboard .metric-row { grid-template-columns: repeat(4,minmax(0,1fr)); }

@container (max-width: 880px) {
  .incoming-contact-panel { width: 31%; }
  .holo-console, .console-grey, .console-oversoul { width: 67%; right: 1%; }
  .global-readout { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .global-readout > div:first-child { grid-column: 1 / -1; }
  .booking-queue { grid-template-columns: 1fr; }
  .booking-card:nth-child(1) { display: none; }
  .result-dashboard .metric-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.schedule-alert {
  grid-column: 2;
  color: #c7eff7 !important;
  font-size: clamp(9px,.63cqw,12px) !important;
  font-weight: 750 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* v11 — clear statistic direction arrows */
.effect-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .38cqw;
}
.stat-delta,
.effect-note {
  display: inline-flex;
  align-items: center;
  gap: .28cqw;
  min-height: 1.8em;
  padding: .22cqw .46cqw;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}
.stat-delta {
  border: 1px solid currentColor;
  background: rgba(1, 9, 20, .82);
  text-shadow: 0 1px 2px rgba(0,0,0,.92);
}
.stat-delta.up {
  color: #70ff9c;
  background: rgba(10, 72, 48, .78);
  box-shadow: 0 0 .65cqw rgba(57, 255, 139, .24), inset 0 0 .55cqw rgba(57, 255, 139, .12);
}
.stat-delta.down {
  color: #ff7771;
  background: rgba(84, 17, 28, .82);
  box-shadow: 0 0 .65cqw rgba(255, 76, 83, .22), inset 0 0 .55cqw rgba(255, 76, 83, .12);
}
.delta-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: currentColor;
  color: #03110c;
  font-size: 1.08em;
  font-weight: 1000;
  text-shadow: none;
}
.stat-delta.down .delta-arrow { color: #210307; }
.delta-label { color: #f3fdff; }
.stat-delta b { color: currentColor; font-size: 1.04em; }
.effect-note {
  border: 1px solid rgba(111, 220, 255, .34);
  background: rgba(2, 25, 48, .8);
  color: #d9f7ff;
}
.effect-toast {
  max-width: 78%;
  padding: .55cqw .7cqw;
}
.effect-toast.bad .stat-delta.up { opacity: .92; }
.decision-effects { margin-top: .34cqw; }
.decision-effects .effect-list { justify-content: flex-start; }
.decision-effects .stat-delta,
.decision-effects .effect-note { font-size: .92em; }
.metric-delta {
  display: inline-flex !important;
  align-items: center;
  gap: .28em;
  font-weight: 950;
}
.metric-delta.up { color: #70ff9c !important; }
.metric-delta.down { color: #ff7771 !important; }
.metric-delta span {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: currentColor;
  color: #03110c;
  line-height: 1;
}
.metric-delta.down span { color: #210307; }