/* © 2026 Luxembourg Institute of Science and Technology (LIST). All Rights Reserved.
   Third-party components are not covered by this notice; see THIRD-PARTY-NOTICES.txt. */
/* =========================================================================
   Optimize This!
   Single source of truth for colour, spacing and layout.
   Every accent colour is declared once, as an RGB triplet, so that
   rgba() usage can never drift away from the named variable again.
   ========================================================================= */

:root {
  /* Surfaces */
  --bg-color: #0f1117;
  --panel-bg: #1e212b;
  --panel-bg-soft: rgba(30, 33, 43, 0.85);
  --inset-bg: rgba(0, 0, 0, 0.25);
  --border-color: #2d313f;

  /* Accent triplets — use via rgb()/rgba() */
  --rgb-blue: 59, 130, 246;
  --rgb-orange: 249, 115, 22;
  --rgb-green: 16, 185, 129;
  --rgb-yellow: 245, 158, 11;
  --rgb-purple: 139, 92, 246;

  --accent-blue: rgb(var(--rgb-blue));
  --accent-orange: rgb(var(--rgb-orange));
  --accent-green: rgb(var(--rgb-green));
  --accent-yellow: rgb(var(--rgb-yellow));
  --accent-purple: rgb(var(--rgb-purple));

  /* Legacy alias: the AI colour has always been orange, despite the name. */
  --accent-red: var(--accent-orange);

  --text-main: #f8fafc;
  --text-dim: #94a3b8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

/* ---------------------------------------------------- packaged-app tweaks */

html {
  /* Stops the whole document rubber-banding when a scroll hits its end, which
     reads as a broken page rather than a native app. */
  overscroll-behavior: none;
  background: var(--bg-color);
}

body {
  /* Roboto on Android, San Francisco on iOS: both are fine, so a missing
     Inter (no network in a packaged app) degrades rather than breaks. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
  /* viewport-fit=cover lets the layout run under the status bar and any notch;
     these put the padding back. Falls back to the plain value off-device. */
  padding: 15px;
  padding-top: calc(15px + env(safe-area-inset-top));
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
  padding-left: calc(15px + env(safe-area-inset-left));
  padding-right: calc(15px + env(safe-area-inset-right));
  /* A long press on a game control should not raise a text selection handle
     or an image callout. Inputs opt back in below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}

input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Anything the player may genuinely want to copy stays selectable. */
#seed-value,
.bo-modal-body,
.end-story-box {
  -webkit-user-select: text;
  user-select: text;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.5px;
}

h1 {
  color: var(--text-main);
  font-size: clamp(22px, 4vw, 32px);
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  transition: opacity 0.45s ease;
}

a {
  color: var(--accent-blue);
}

#app-container {
  max-width: 1200px;
  width: 100%;
}

.hidden {
  display: none !important;
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font-family: inherit;
  font-weight: 700;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 12px rgba(var(--rgb-blue), 0.4);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 13px;
}

.btn-red {
  background: var(--accent-orange);
}

.btn-red:hover:not(:disabled) {
  box-shadow: 0 6px 12px rgba(var(--rgb-orange), 0.4);
}

.btn-green {
  background: var(--accent-green);
}

.btn-green:hover:not(:disabled) {
  box-shadow: 0 6px 12px rgba(var(--rgb-green), 0.4);
}

.btn-yellow {
  background: var(--accent-yellow);
  color: #1a1a1a;
}

.btn-yellow:hover:not(:disabled) {
  box-shadow: 0 6px 12px rgba(var(--rgb-yellow), 0.4);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.btn-cost {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 10px;
}

.seed-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  padding: 4px 9px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.seed-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-main);
}

:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- panels */

.panel {
  background: var(--panel-bg);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
  box-shadow: var(--shadow-panel);
}

/* ====================================================== INTRO SCREEN ==== */

#screen-intro {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px 18px;
}

#hero-canvas-wrap {
  position: relative;
  width: calc(100% + 30px);
  margin: 0 -15px 6px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

#hero-canvas {
  display: block;
  width: 100%;
  height: 80px;
}

.intro-header {
  text-align: center;
}

.intro-characters {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 6px;
  width: 100%;
  max-width: 620px;
}

.character-box {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.character-name {
  font-size: 12px;
  display: block;
  margin-top: 3px;
}

.character-name.is-human {
  color: var(--accent-blue);
}

.character-name.is-ai {
  color: var(--accent-orange);
}

.vs-mark {
  font-style: italic;
  color: var(--text-dim);
  font-size: 18px;
  font-weight: 800;
  padding-bottom: 22px;
}

.avatar {
  font-size: 34px;
  display: inline-block;
  line-height: 1.1;
}

.speech-bubble {
  background: #262b38;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-main);
  position: relative;
  margin-bottom: 12px;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #262b38;
}

.bobble-a {
  animation: bobble 2.5s 0s ease-in-out infinite;
}

.bobble-b {
  animation: bobble 2.5s 1.2s ease-in-out infinite;
}

@keyframes bobble {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* Condensed briefing pills */
.brief-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 4px 0 14px;
}

.brief-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid;
  white-space: nowrap;
}

.brief-pill .pill-key {
  color: var(--text-dim);
}

/* Mission line inside the intro pill box: role + objective in one sentence,
   so the narrative is visible without opening the briefing panel. */
.brief-mission {
  flex-basis: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.4;
  white-space: normal;
}

.brief-mission b {
  color: var(--text-main, #fff);
}

/* Active state for the leaderboard "This landscape" filter. */
.seed-btn[aria-pressed="true"] {
  border-color: var(--accent-green, #4ade80);
  color: var(--accent-green, #4ade80);
}

/* In-game audio toggles (top bar). */
.topbar-audio {
  display: flex;
  gap: 6px;
}

.tb-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.tb-icon-btn[aria-pressed="false"] {
  opacity: 0.45;
  filter: grayscale(1);
}

  50% { transform: scale(1.15); }
}

.brief-pill.is-cost {
  background: rgba(var(--rgb-orange), 0.12);
  border-color: rgba(var(--rgb-orange), 0.35);
}

.brief-pill.is-cost b {
  color: var(--accent-orange);
}

.brief-pill.is-time {
  background: rgba(var(--rgb-yellow), 0.12);
  border-color: rgba(var(--rgb-yellow), 0.35);
}

.brief-pill.is-time b {
  color: var(--accent-yellow);
}

.brief-pill.is-target {
  background: rgba(var(--rgb-green), 0.12);
  border-color: rgba(var(--rgb-green), 0.35);
}

.brief-pill.is-target b {
  color: var(--accent-green);
}

.brief-pill.is-param {
  background: rgba(var(--rgb-blue), 0.12);
  border-color: rgba(var(--rgb-blue), 0.35);
}

.brief-pill.is-param b {
  color: var(--accent-blue);
}

.brief-pill.is-z {
  background: rgba(var(--rgb-purple), 0.12);
  border-color: rgba(var(--rgb-purple), 0.35);
}

.brief-pill.is-z b {
  color: var(--accent-purple);
}

.game-menu-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 620px;
}

.intro-start-btn {
  font-size: 18px;
  padding: 16px;
  background: linear-gradient(135deg, var(--accent-green), #059669);
}

.pulse-glow-btn {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.5);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(var(--rgb-green), 0);
  }
}

/* Seed bar */
.seed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 7px 12px;
}

.seed-bar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

#seed-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 1px;
}

/* Custom seed entry. Sits directly under the seed bar and matches its
   pill geometry, so revealing it reads as the bar growing a row rather than
   a new control appearing from nowhere. */
.seed-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -2px;
}

.seed-custom-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 160px;
  max-width: 100%;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.seed-custom-row input::placeholder {
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: none;
  font-weight: 600;
}

.seed-custom-row input:focus {
  border-color: var(--accent-purple);
  outline: none;
}

.seed-custom-row input.is-invalid {
  border-color: var(--accent-orange);
}

.seed-btn-go {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--text-main);
}

.seed-btn-go:hover {
  background: rgba(139, 92, 246, 0.38);
}

.seed-custom-msg {
  margin: -2px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--accent-orange);
}

.seed-custom-msg.is-ok {
  color: var(--accent-green);
}

.seed-hint {
  margin: -4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

/* Collapsible menus */
.intro-details-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}

.intro-explain-details {
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.intro-explain-details summary {
  cursor: pointer;
  padding: 11px 12px;
  font-weight: 700;
  font-size: 14px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  transition: background 0.15s;
}

.intro-explain-details summary::-webkit-details-marker {
  display: none;
}

.intro-explain-details summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.intro-explain-details[open] summary {
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
}

.summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.summary-pill {
  background: var(--accent-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.intro-explain-inner {
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intro-explain-inner p {
  margin: 0;
}

.intro-explain-inner b,
.intro-explain-inner strong {
  color: var(--text-main);
}

.highlight-green {
  color: var(--accent-green) !important;
  font-weight: 700;
}

.mission-head {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mission-head p {
  margin: 0;
}

.intro-explain-inner .brief-pills {
  margin: 4px 0 6px;
  justify-content: flex-start;
}

.mono-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-main);
}

.copyright-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  line-height: 1.5;
}

/* Option rows (checkbox + radio share one look) */
.toggle-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.toggle-label.stacked,
.radio-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.toggle-label:hover,
.radio-label:hover {
  background: rgba(255, 255, 255, 0.1);
}

.toggle-label.active,
.radio-label.active {
  background: rgba(var(--rgb-purple), 0.15);
  border-color: rgba(var(--rgb-purple), 0.5);
  color: var(--text-main);
}

.opt-desc {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.5;
}

.audio-toggle-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

.field-value {
  color: var(--text-main);
  text-transform: none;
  letter-spacing: 0;
}

input[type=range] {
  width: 100%;
  accent-color: var(--accent-blue);
  display: block;
  cursor: pointer;
}

input[type=range].range-purple {
  accent-color: var(--accent-purple);
}

/* Tooltip */
.tooltip {
  position: relative;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: 240px;
  background: #0b0d13;
  color: var(--text-main);
  text-align: left;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  position: absolute;
  z-index: 60;
  bottom: 135%;
  left: 50%;
  margin-left: -120px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  transition: opacity 0.2s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--border-color);
}

.tooltip:hover .tooltiptext,
.tooltip:focus-visible .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* ======================================================= GAME SCREEN ==== */

.game-topbar {
  padding: 10px 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#phase-title {
  font-size: clamp(15px, 2.2vw, 20px);
}

#phase-title.is-human {
  color: var(--accent-blue);
}

#phase-title.is-ai {
  color: var(--accent-orange);
}

.topbar-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mode-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(var(--rgb-purple), 0.15);
  border: 1px solid rgba(var(--rgb-purple), 0.4);
  color: var(--accent-purple);
}

.target-chip {
  font-weight: 700;
  color: var(--accent-green);
  background: rgba(var(--rgb-green), 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  white-space: nowrap;
}

.game-layout {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr;
  gap: 15px;
  align-items: stretch;
}

.surface-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dashboard-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  min-width: 0;
}

.canvas-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 8px 24px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

#gridCanvas {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1;
  background: #13151c;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: manipulation;
}

#gridCanvas.blind-mode {
  filter: blur(6px) grayscale(0.85);
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* Spans the whole container: JS positions each label from the canvas's own
   offset, so this must share the container's coordinate space. */
#floating-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.2s;
}

/* Grid zoom. The outer box clips, the inner box is transformed. touch-action
   none hands every touch to the gesture handler in game-engine.js; without
   it the browser would consume the pinch as page zoom (or ignore it). */
#grid-zoom {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  touch-action: none;
}

#grid-zoom-inner {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}

#grid-zoom-reset {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
}

/* In-game volume popover. */
.topbar-audio {
  position: relative;
}

.tb-audio-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 200px;
  padding: 10px 12px;
  background: var(--panel-bg, #161a24);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.tb-audio-pop input[type="range"] {
  width: 100%;
  margin-bottom: 8px;
}

.axes-label {
  position: absolute;
  /* Above #grid-zoom, which is positioned and later in the DOM; the rotated
     y-label's box overlaps the grid edge and was painted underneath it. */
  z-index: 3;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.y-label {
  /* Centred on a fixed x: with left + rotate about the centre, a long name
     ("Temperature") swung its middle into the plot and covered the data. */
  left: 12px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
}

.x-label {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.shake {
  animation: shake 0.25s;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

.floating-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 15px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  animation: floatUp 1s ease-out forwards;
  pointer-events: none;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -140%) scale(1);
  }
}

.slider-container {
  display: none;
  width: 100%;
  max-width: 520px;
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 14px;
}

.slider-container.visible {
  display: block;
}

.legend-row {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  flex-wrap: wrap;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-item.hidden {
  display: none;
}

.legend-dot-human {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-blue);
}

.legend-dot-ai {
  width: 10px;
  height: 10px;
  background: var(--accent-orange);
  transform: rotate(45deg);
}

.legend-dot-faded {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  opacity: 0.35;
}

.legend-swatch-yield,
.legend-swatch-purity {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-green));
}

.legend-slash {
  opacity: 0.5;
}

.legend-dot-queued {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px dashed var(--accent-green);
}

.surface-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

/* Batch tray */
.batch-tray {
  width: 100%;
  max-width: 520px;
  background: var(--inset-bg);
  border: 1px dashed rgba(var(--rgb-green), 0.4);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.batch-tray-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.batch-tray-head b {
  color: var(--accent-green);
}

.batch-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 24px;
}

.batch-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: rgba(var(--rgb-green), 0.12);
  border: 1px solid rgba(var(--rgb-green), 0.4);
  color: var(--text-main);
  border-radius: 20px;
  padding: 3px 9px;
}

.batch-chip.empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-color);
  color: var(--text-dim);
}

/* Scoreboard */
.scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-card {
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  transition: border-color 0.25s, box-shadow 0.25s, opacity 0.25s;
  min-width: 0;
}

/* Player identity is carried by the coloured label and run count, so the
   cards need no accent bar. */
.score-card.is-human .score-who {
  color: var(--accent-blue);
}

.score-card.is-ai .score-who {
  color: var(--accent-orange);
}

.score-card.dimmed {
  opacity: 0.45;
}

.score-card.active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 18px rgba(255, 255, 255, 0.06);
}

.score-card.is-human.active {
  border-color: rgba(var(--rgb-blue), 0.7);
}

.score-card.is-ai.active {
  border-color: rgba(var(--rgb-orange), 0.7);
}

.score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.score-who {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.score-turn {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-main);
  animation: softPulse 1.6s ease-in-out infinite;
}

@keyframes softPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

.score-runs {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.score-card.is-human .score-runs {
  color: var(--accent-blue);
}

.score-card.is-ai .score-runs {
  color: var(--accent-orange);
}

.score-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-sub.dim {
  color: var(--text-dim);
  font-weight: 400;
}

/* Progress */
.progress-wrapper {
  position: relative;
}

.progress-bar {
  position: relative;
  height: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
  border-radius: 7px;
}

.progress-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Manual entry */
#manual-input-panel {
  display: none;
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
}

#manual-input-panel.visible {
  display: block;
}

.manual-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 8px 0;
}

.manual-field {
  flex: 1;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.manual-field label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.manual-field input[type=number] {
  font-family: inherit;
  width: 100%;
  padding: 9px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.manual-field input[type=number]:focus {
  border-color: var(--accent-blue);
  outline: none;
}

.manual-submit-btn {
  font-family: inherit;
  background: var(--accent-green);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter 0.15s;
}

.manual-submit-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.manual-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.manual-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  min-height: 1em;
}

/* Status */
#status-panel {
  border-radius: 8px;
  transition: box-shadow 0.3s;
}

.status-text {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.5;
}

.ai-thinking {
  animation: aiPulse 1.1s ease-in-out infinite;
}

@keyframes aiPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0);
  }

  50% {
    box-shadow: 0 0 14px 2px rgba(var(--rgb-orange), 0.35);
  }
}

.flash-in {
  animation: flashIn 0.4s ease-out;
}

@keyframes flashIn {
  from {
    transform: scale(1.15);
    filter: brightness(2);
  }

  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Speed pills */
.gp-source-row {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  padding: 3px;
}

.spill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 5px 11px;
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.spill:hover {
  color: var(--text-main);
}

.spill.active {
  background: var(--accent-purple);
  color: #fff;
}

/* Mission log */
.log-label {
  margin-bottom: -6px;
}

.history-container-scroll {
  /* Fixed height on purpose: the log should never push the rest of the
     dashboard around as runs accumulate — it scrolls instead. */
  flex: 0 0 auto;
  height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.batch-hint {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

.history-container-scroll::-webkit-scrollbar {
  width: 8px;
}

.history-container-scroll::-webkit-scrollbar-track {
  background: var(--bg-color);
}

.history-container-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

#history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

#history-table th {
  position: sticky;
  top: 0;
  background: #191c25;
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  /* Long parameter names truncate visually but stay readable on hover */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#history-table th.col-num {
  width: 52px;
}

#history-table td.col-num {
  color: var(--text-dim);
}

.run-glyph {
  font-size: 9px;
  margin-right: 4px;
  vertical-align: middle;
}

tr.src-human .run-glyph {
  color: var(--accent-blue);
}

tr.src-bo .run-glyph {
  color: var(--accent-orange);
}

#history-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#history-table tbody tr {
  transition: background-color 0.2s, transform 0.1s;
}


#history-table tbody tr.is-highlighted {
  background: rgba(255, 255, 255, 0.13);
  transform: scale(1.01);
}

#history-table tbody tr.is-hint {
  color: var(--accent-purple);
  font-style: italic;
}

/* Alternating turns: the Optimizer's results are withheld until the match is
   decided, so the player cannot simply follow it uphill. */
.sealed-cell {
  color: var(--text-dim);
  letter-spacing: 2px;
  opacity: 0.5;
}

/* Separates one plate from the next in batch mode. */
#history-table tbody tr.plate-edge td {
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}

#history-table tbody tr.log-empty td {
  text-align: center;
  color: var(--text-dim);
  padding: 26px 10px;
  line-height: 1.6;
  white-space: normal;
}

#history-table tbody tr.just-revealed {
  animation: sealBreak 0.7s ease-out;
}

@keyframes sealBreak {
  0% {
    background: rgba(var(--rgb-orange), 0.35);
  }

  100% {
    background: transparent;
  }
}

.score-card.is-sealed .score-sub:first-of-type {
  color: var(--text-dim);
  font-style: italic;
}

.yield-good {
  color: var(--accent-green);
  font-weight: 700;
}

.yield-mid {
  color: var(--accent-yellow);
  font-weight: 700;
}

.yield-low {
  color: var(--text-dim);
  font-weight: 700;
}

.is-highlighted .yield-text {
  animation: highlightYieldPulse 0.8s ease-in-out infinite;
}

@keyframes highlightYieldPulse {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.6);
  }
}

.action-row {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.action-row .btn {
  flex: 1;
}

/* ======================================================== END SCREEN ==== */

#screen-end {
  width: 100%;
}

.end-panel-compact {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#results-hero {
  position: relative;
  text-align: center;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border-color);
}

#result-title-text {
  font-size: clamp(20px, 4vw, 36px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  animation: titleSlam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes titleSlam {
  from {
    transform: scale(1.5);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

#result-subtitle {
  color: var(--text-dim);
  font-size: 14px;
  margin: 4px 0 0;
}

.result-tag {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
}

.end-grid-compact {
  display: grid;
  /* The visual column carries four side-by-side maps, so it gets the edge. */
  grid-template-columns: 1fr 1.15fr;
  gap: 18px;
  align-items: stretch;
  min-height: 0;
}

.end-left-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.compact-box {
  background: var(--panel-bg-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.end-actions-box {
  margin-top: auto;
  gap: 10px;
}

.winner-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.winner-box {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 0;
}

.winner-box.is-human {
  background: rgba(var(--rgb-blue), 0.1);
  border: 1px solid rgba(var(--rgb-blue), 0.3);
}

.winner-box.is-ai {
  background: rgba(var(--rgb-orange), 0.1);
  border: 1px solid rgba(var(--rgb-orange), 0.3);
}

.winner-box.is-winner.is-human {
  border-color: var(--accent-blue);
  box-shadow: 0 0 20px rgba(var(--rgb-blue), 0.6), inset 0 0 10px rgba(var(--rgb-blue), 0.3);
  animation: winnerPulse 1.5s ease-in-out infinite;
}

.winner-box.is-winner.is-ai {
  border-color: var(--accent-orange);
  box-shadow: 0 0 20px rgba(var(--rgb-orange), 0.6), inset 0 0 10px rgba(var(--rgb-orange), 0.3);
  animation: winnerPulseOrange 1.5s ease-in-out infinite;
}

.winner-box.is-loser {
  opacity: 0.4;
}

.winner-box.is-tied {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

@keyframes winnerPulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(var(--rgb-blue), 0.35);
  }

  50% {
    box-shadow: 0 0 18px rgba(var(--rgb-blue), 0.65);
  }
}

@keyframes winnerPulseOrange {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(var(--rgb-orange), 0.35);
  }

  50% {
    box-shadow: 0 0 18px rgba(var(--rgb-orange), 0.65);
  }
}

.winner-label {
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.winner-box.is-human .winner-label {
  color: var(--accent-blue);
}

.winner-box.is-ai .winner-label {
  color: var(--accent-orange);
}

.winner-value {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.winner-detail {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
}

.winner-vs {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-dim);
  opacity: 0.5;
}

.winner-crown {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  animation: crownDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes crownDrop {
  from {
    transform: translate(-50%, -40px) rotate(-25deg);
    opacity: 0;
  }

  to {
    transform: translate(-50%, 0) rotate(0);
    opacity: 1;
  }
}

.end-story-box {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}

.end-story-box p {
  margin: 0 0 8px;
}

.end-story-box p:last-child {
  margin-bottom: 0;
}

.end-story-box b {
  color: var(--text-main);
}

.role-para {
  font-size: 11px;
  opacity: 0.85;
}

.result-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.kpi-card {
  background: var(--inset-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
  animation: kpiSlideUp 0.4s ease both;
  min-width: 0;
}

.kpi-card:nth-child(1) {
  animation-delay: 0.05s;
}

.kpi-card:nth-child(2) {
  animation-delay: 0.12s;
}

.kpi-card:nth-child(3) {
  animation-delay: 0.19s;
}

.kpi-card:nth-child(4) {
  animation-delay: 0.26s;
}

@keyframes kpiSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kpi-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.kpi-value.is-green {
  color: var(--accent-green);
}

.kpi-value.is-yellow {
  color: var(--accent-yellow);
}

.kpi-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.kpi-sub.is-human {
  color: var(--accent-blue);
}

.kpi-sub.is-ai {
  color: var(--accent-orange);
}

.lb-inline-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-green);
  margin-bottom: 6px;
}

.lb-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.lb-input-row input {
  flex: 2;
  min-width: 0;
  font-family: inherit;
  padding: 9px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-color);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 1px;
}

.lb-input-row input:focus {
  border-color: var(--accent-green);
  outline: none;
}

.lb-input-row .btn {
  flex: 1;
}

.end-action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.end-action-row {
  display: flex;
  gap: 8px;
}

.end-action-row .btn {
  flex: 1;
}

.carousel-col {
  padding: 12px;
  gap: 10px;
}

.carousel-pill-bar {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: 3px;
  flex-shrink: 0;
  overflow-x: auto;
}

.cpill {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.cpill:hover:not(:disabled) {
  color: var(--text-main);
}

.cpill.active {
  background: var(--accent-blue);
  color: #fff;
}

.cpill:disabled {
  opacity: 0.4;
  cursor: wait;
}

.carousel-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.map-wrapper {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  margin: auto;
  background: #13151c;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

#replayCanvas,
#paretoCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

#plot3d {
  width: 100%;
  height: 100%;
}

.z-ctrl {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.z-ctrl input[type=range] {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
}

.z-ctrl-val {
  color: var(--accent-blue);
  font-weight: 700;
  margin-left: 6px;
}

/* GP posterior explorer */
.gp-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.gp-source-row {
  align-self: flex-start;
}

.gp-play-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gp-legend-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* The posterior explorer is content-led rather than a single centred image,
   so it starts at the top of the pane instead of floating in the middle. */
#carousel-gp {
  justify-content: flex-start;
}

/* Four maps that are meant to be read against each other, so on a wide screen
   they go in one row — a 2x2 grid pushed the bottom pair off the panel and
   made you scroll to compare them. */
.gp-maps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.gp-fig {
  margin: 0;
  min-width: 0;
}

.gp-fig canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
  background: #13151c;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.gp-fig figcaption {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  line-height: 1.3;
  /* Keeps the colour bars on one line when a label wraps to two. */
  min-height: 38px;
}

.gp-scale {
  flex: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
}

.gp-scale-mean {
  background: linear-gradient(90deg, #440154, #21918c, #fde725);
}

.gp-scale-var {
  background: linear-gradient(90deg, #0b1020, #3b3f6b, #cbd5ff);
}

.gp-scale-acq {
  background: linear-gradient(90deg, #1a1005, #a3540d, #fbbf24);
}

.noise-line {
  color: var(--accent-yellow);
  font-variant-numeric: tabular-nums;
}

.pareto-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  text-align: center;
  flex-shrink: 0;
}

.pareto-note b {
  color: var(--text-main);
}

/* ============================================================ MODALS ==== */

#lb-fab {
  position: fixed;
  /* Fixed elements ignore the body padding, so the gesture bar would sit on
     top of this button without its own inset. */
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-yellow);
  border: none;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 500;
  transition: transform 0.2s;
}

#lb-fab:hover {
  transform: scale(1.1);
}

#lb-modal-overlay,
#bo-modal-overlay,
#coach-overlay {
  display: none;
  position: fixed;
  inset: 0;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#lb-modal-overlay.open,
#bo-modal-overlay.open,
#coach-overlay.open {
  display: flex;
}

#lb-modal,
#bo-modal,
#coach-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 22px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

#lb-modal {
  max-width: 720px;
}

#bo-modal {
  max-width: 620px;
}

#coach-card {
  max-width: 400px;
  text-align: center;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
}

.modal-title {
  color: var(--accent-yellow);
  font-size: 20px;
}

.modal-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover {
  color: #fff;
}

.bo-close {
  position: absolute;
  top: 14px;
  right: 18px;
}

.lb-scroll {
  overflow-x: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lb-table th {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.lb-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lb-name {
  color: #fff;
  font-weight: 700;
}

.lb-mode {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.lb-score {
  color: var(--accent-green);
  font-weight: 700;
}

.lb-vs-win {
  color: var(--accent-green);
  font-weight: 700;
}

.lb-vs-loss {
  color: var(--accent-orange);
}

.lb-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 20px 6px;
  line-height: 1.6;
}

.lb-foot {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin: 12px 0 0;
}

.del-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
}

.del-btn:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.bo-modal-title {
  color: var(--text-main);
  font-size: 22px;
  margin: 0 30px 14px 0;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.bo-modal-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-main);
}

.bo-modal-body h3 {
  color: var(--accent-blue);
  font-size: 16px;
  margin-top: 20px;
}

.bo-modal-body ul {
  margin: 5px 0 15px;
  color: var(--text-dim);
  padding-left: 20px;
}

.bo-modal-body li {
  margin-bottom: 8px;
}

.bo-callout {
  background: rgba(var(--rgb-purple), 0.12);
  border: 1px solid rgba(var(--rgb-purple), 0.35);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
}

.bo-modal-foot {
  margin-top: 22px;
  text-align: center;
}

.bo-modal-foot .btn {
  width: auto;
  min-width: 140px;
}

/* Coach mark */
.coach-icon {
  font-size: 34px;
  margin-bottom: 6px;
}

#coach-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

#coach-card p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 0 10px;
}

#coach-card b {
  color: var(--text-main);
}

.coach-tip {
  font-size: 12px !important;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

#coach-card .btn {
  margin-top: 6px;
}

/* ======================================================== RESPONSIVE ==== */

/* Tablet / small laptop: stack the two game columns. */
@media (max-width: 980px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .end-grid-compact {
    grid-template-columns: 1fr;
  }

  .intro-details-row {
    grid-template-columns: 1fr;
  }

  .carousel-col {
    order: -1;
  }
}

/* Phone portrait — the game is fully playable here; no rotate wall. */
@media (max-width: 620px) {
  body {
    padding: 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }

  .panel {
    padding: 12px;
  }

  .dashboard-panel {
    padding: 12px;
  }

  .canvas-container {
    padding: 10px 6px 22px 24px;
  }

  .intro-characters {
    gap: 8px;
  }

  .speech-bubble {
    font-size: 11px;
    padding: 7px 8px;
  }

  .avatar {
    font-size: 28px;
  }

  .vs-mark {
    font-size: 14px;
    padding-bottom: 18px;
  }

  .result-kpi-bar {
    grid-template-columns: 1fr 1fr;
  }

  .gp-maps {
    grid-template-columns: 1fr 1fr;
  }

  .end-action-row {
    flex-direction: column;
  }

  .action-row {
    flex-direction: column;
  }

  .game-topbar {
    justify-content: center;
    text-align: center;
  }

  .history-container-scroll {
    height: 220px;
  }

  #lb-fab {
    width: 46px;
    height: 46px;
    font-size: 22px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: calc(14px + env(safe-area-inset-right));
  }

}

@media (max-width: 359px) {
  .scoreboard {
    grid-template-columns: 1fr;
  }

  .winner-row {
    flex-direction: column;
  }

  .winner-crown {
    top: -32px;
    font-size: 32px;
  }

  .gp-maps {
    grid-template-columns: 1fr;
  }
}

/* Short landscape phones: keep the grid from pushing everything off-screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .canvas-container {
    max-width: 300px;
  }

  #hero-canvas {
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}