/* Commander Goldfish Simulator (casual). Reuses the .goldfish-* component
   library from cedh-goldfish-simulator.css wherever the markup matches
   (import panel, settings grid, segmented control, progress bar, bar
   meters, chart shell, more-detail/advanced disclosures). Only genuinely
   new components get a `.cgs-` prefixed rule here: the 5-option test
   selector, the post-import deck summary strip, the 6-tile metric grid,
   the comparison-delta banner, the development-timeline legend, and the
   layout/visual-system overrides that make this page read as one
   workspace surface instead of the cEDH tool's stacked tool-cards.

   Everything below is scoped so it only ever touches this page: either a
   `.cgs-` prefixed class that's unique to this template, or `.cgs-page-shell`
   as an ancestor guard around a shared `.goldfish-*` class name. The cEDH
   simulator (`.goldfish-page-shell` without `.cgs-page-shell`) never
   matches these selectors. */

/* ---------- Safety net ----------
   The cEDH page's outer wrapper carries `.goldfish-tool-shell`, which ships
   a blanket `[hidden] { display: none !important }` rule so JS-toggled
   result states never render two panels at once. This page's outer wrapper
   is `.cgs-tool-shell` instead, so that protection needs its own copy. */
.cgs-tool-shell [hidden] {
  display: none !important;
}

/* ---------- Semantic color system ----------
   A frontend-only presentation layer. These do not introduce new rating
   thresholds -- they colorize the four bands `consistencyBand`/`riskBand`
   already compute in commander-goldfish-simulator-tool.js (is-very-consistent
   / is-consistent / is-swingy / is-inconsistent), reusing the exact same
   85 / 70 / 50 breakpoints that were already shipping. Orange is reserved
   for the separate "why games failed" severity scale, which is its own,
   independently-documented visual threshold (see that section below). */
.cgs-page-shell {
  --cgs-green: #4ade80;
  --cgs-green-bg: rgba(74, 222, 128, 0.1);
  --cgs-lime: #a3e635;
  --cgs-lime-bg: rgba(163, 230, 53, 0.1);
  --cgs-amber: var(--accent-soft);
  --cgs-amber-bg: rgba(201, 168, 76, 0.1);
  --cgs-orange: #fb923c;
  --cgs-orange-bg: rgba(251, 146, 60, 0.1);
  --cgs-red: var(--red-text);
  --cgs-red-bg: rgba(232, 112, 112, 0.1);
  --cgs-blue: #60a5fa;
  --cgs-blue-bg: rgba(96, 165, 250, 0.1);
  --cgs-neutral-bg: rgba(255, 255, 255, 0.03);
}

.cgs-icon-green { color: var(--cgs-green); }
.cgs-icon-lime { color: var(--cgs-lime); }
.cgs-icon-amber { color: var(--cgs-amber); }
.cgs-icon-orange { color: var(--cgs-orange); }
.cgs-icon-red { color: var(--cgs-red); }
.cgs-icon-blue { color: var(--cgs-blue); }

/* Status classes: applied by JS (data-status) to bind an already-computed
   band onto a foreground/background pair. Never used as the only signal --
   every status-bearing element still carries an icon and a text label. */
[data-status="green"] { --status-fg: var(--cgs-green); --status-bg: var(--cgs-green-bg); }
[data-status="lime"] { --status-fg: var(--cgs-lime); --status-bg: var(--cgs-lime-bg); }
[data-status="amber"] { --status-fg: var(--cgs-amber); --status-bg: var(--cgs-amber-bg); }
[data-status="orange"] { --status-fg: var(--cgs-orange); --status-bg: var(--cgs-orange-bg); }
[data-status="red"] { --status-fg: var(--cgs-red); --status-bg: var(--cgs-red-bg); }
[data-status="blue"] { --status-fg: var(--cgs-blue); --status-bg: var(--cgs-blue-bg); }
[data-status="neutral"] { --status-fg: var(--text-2); --status-bg: var(--cgs-neutral-bg); }

/* Icon sizing scale used across this page's dc-icon instances. */
.cgs-icon-14 { width: 14px; height: 14px; }
.cgs-icon-16 { width: 16px; height: 16px; }
.cgs-icon-18 { width: 18px; height: 18px; }
.cgs-icon-22 { width: 22px; height: 22px; }
.cgs-icon-28 { width: 28px; height: 28px; }

/* ---------- Hero ---------- */

.cgs-hero {
  padding: 32px clamp(20px, 4vw, 40px) 36px;
}

.cgs-hero .page-title {
  margin-top: 8px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.cgs-hero .page-intro {
  margin: 12px 0 0;
  max-width: 720px;
}

.cgs-hero-note {
  margin: 6px 0 0;
  max-width: 720px;
  color: var(--text-3);
  font-size: 0.8rem;
}

@media (min-width: 900px) {
  .cgs-hero .page-title {
    max-width: 55%;
  }
}

/* ---------- Import bar: input is dominant, Clear is tertiary ---------- */

.cgs-import-panel {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}

.cgs-import-panel.is-collapsed .goldfish-import-row > *:not(#commander-goldfish-import-pill) {
  display: none;
}

.cgs-import-panel.is-collapsed {
  padding: 10px 16px;
}

.cgs-import-panel .goldfish-import-url {
  flex: 7 1 260px;
}

.cgs-import-cta {
  flex: 1.6 1 148px;
}

.cgs-import-panel .goldfish-file-label {
  flex: 1.3 1 132px;
  justify-content: center;
}

.cgs-import-panel #commander-goldfish-sample {
  flex: 1.3 1 156px;
}

.cgs-import-panel .goldfish-btn-primary,
.cgs-import-panel .goldfish-btn-secondary {
  gap: 8px;
}

.cgs-import-pill {
  align-self: center;
}

.goldfish-btn-tertiary {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.goldfish-btn-tertiary:hover,
.goldfish-btn-tertiary:focus-visible {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.goldfish-btn-tertiary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---------- Deck summary strip ----------
   Desktop: identity ~42% / stats ~43% / action ~15%, via a 3-column grid
   whose middle track absorbs the remaining space. */

.cgs-deck-summary {
  margin-bottom: 16px;
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.cgs-deck-summary[hidden] {
  display: none;
}

.cgs-deck-summary-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cgs-deck-summary-icon svg {
  display: block;
}

.cgs-deck-summary-identity-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.goldfish-deck-summary-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.cgs-deck-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}

.cgs-deck-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cgs-deck-stat-icon {
  color: var(--text-2);
}

.cgs-deck-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cgs-deck-stat-text strong {
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 750;
}

.cgs-deck-stat-text span {
  color: var(--text-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cgs-deck-stat-warn .cgs-deck-stat-text strong,
.cgs-deck-stat-warn .cgs-deck-stat-text span {
  color: var(--cgs-orange);
}

.cgs-deck-stat-warn[hidden] {
  display: none;
}

.cgs-deck-summary-action {
  justify-self: end;
}

@media (min-width: 860px) {
  .cgs-deck-summary {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto;
  }
}

/* ---------- Main workspace: config + results as one surface ---------- */

.goldfish-configure-panel,
.goldfish-results-panel {
  padding: 20px;
}

.goldfish-results-panel {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  min-height: 460px;
}

@media (min-width: 1024px) {
  /* Own the whole desktop grid here rather than inheriting the shared cEDH
     12-column layout, which pins the config and results panels to explicit
     grid rows. That shared layout assumes a `.goldfish-decklist-panel` in
     row 2; this page moves the decklist above the grid, so the injected
     "Current Deck" workspace banner would otherwise auto-place into row 1
     and overlap the config/results panels. A simple two-column grid with the
     banner on its own full-width row keeps everything from colliding. */
  .cgs-page-shell .goldfish-main-grid {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    align-items: start;
  }

  .cgs-page-shell .goldfish-main-grid > .deck-workspace {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cgs-page-shell .goldfish-configure-panel {
    grid-column: 1;
    grid-row: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding-right: 24px;
    /* The whole form stays visible -- no internal scroll box -- so every
       option and its description is readable without a scrollbar. */
  }

  .cgs-page-shell .goldfish-results-panel {
    grid-column: 2;
    grid-row: auto;
    padding-left: 24px;
    min-height: 540px;
  }
}

.cgs-results-heading {
  margin: 0 0 14px;
}

/* Run button pinned to the top of the config form. */
.cgs-run-top {
  margin: 0 0 18px;
}

.cgs-run-top .goldfish-run-cta {
  margin-top: 0;
}

.cgs-advanced-settings {
  margin-top: 4px;
}

/* ---------- Section-heading icons ---------- */

.goldfish-panel-heading > svg.dc-icon {
  flex-shrink: 0;
  color: var(--text-2);
}

.goldfish-step {
  font-variant-numeric: tabular-nums;
}

/* ---------- Test selector ---------- */

.cgs-test-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.cgs-test-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid transparent;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.cgs-test-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  transition: color var(--transition), background var(--transition);
}

.cgs-test-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.cgs-test-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: transparent;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.cgs-test-option strong {
  color: inherit;
  font-size: 0.88rem;
  font-weight: 700;
}

.cgs-test-copy span {
  color: var(--text-3);
  font-size: 0.78rem;
  line-height: 1.35;
}

.cgs-test-option:hover {
  border-color: rgba(201, 168, 76, 0.28);
  transform: translateY(-1px);
}

.cgs-test-option:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

.cgs-test-option.is-active {
  border-color: rgba(201, 168, 76, 0.5);
  border-left-color: var(--accent);
  background: rgba(201, 168, 76, 0.08);
  color: var(--text-1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.cgs-test-option.is-active .cgs-test-icon {
  background: rgba(201, 168, 76, 0.16);
  color: var(--accent-soft);
}

.cgs-test-option.is-active .cgs-test-copy span {
  color: var(--accent-soft);
}

.cgs-test-option.is-active .cgs-test-check {
  border-color: var(--accent);
  background: var(--accent);
  color: #171719;
}

.cgs-test-select-mobile {
  display: none;
}

/* ---------- Settings field cards ---------- */

.cgs-setting-field {
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.cgs-setting-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cgs-setting-label .dc-icon {
  color: var(--text-2);
}

/* ---------- Mulligan preset row ---------- */

.cgs-mulligan-field {
  margin-top: 4px;
}

.cgs-mulligan-segmented {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.cgs-mulligan-option {
  height: auto;
  min-height: 58px;
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  border-radius: 8px;
}

.cgs-mulligan-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
}

.cgs-mulligan-option.is-active .cgs-mulligan-icon {
  background: rgba(17, 17, 17, 0.14);
  color: #171719;
}

.cgs-mulligan-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cgs-mulligan-copy strong {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-1);
}

.cgs-mulligan-option:not(.is-active) .cgs-mulligan-copy strong {
  color: var(--text-2);
}

.cgs-mulligan-copy span {
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-3);
}

.cgs-mulligan-option.is-active .cgs-mulligan-copy span {
  color: rgba(17, 17, 17, 0.7);
}

.cgs-mulligan-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.14);
  color: #171719;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cgs-mulligan-option:not(.is-active) .cgs-mulligan-badge {
  background: rgba(201, 168, 76, 0.16);
  color: var(--accent-soft);
}

/* ---------- Advanced settings ---------- */

.cgs-advanced-body {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cgs-active-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cgs-amber-bg);
  color: var(--accent-soft);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cgs-checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.cgs-checkbox-field input {
  width: 20px;
  height: 20px;
}

/* ---------- Results: empty state ---------- */

.cgs-empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 420px;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  text-align: center;
}

.cgs-empty-icon {
  color: var(--text-3);
  margin-bottom: 4px;
}

.cgs-empty-title {
  margin: 0;
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 700;
}

.cgs-empty-body {
  margin: 0;
  max-width: 360px;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.cgs-empty-steps {
  counter-reset: cgs-step;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}

.cgs-empty-steps li {
  counter-increment: cgs-step;
  position: relative;
  padding-left: 24px;
  color: var(--text-3);
  font-size: 0.8rem;
  text-align: left;
}

.cgs-empty-steps li::before {
  content: counter(cgs-step);
  position: absolute;
  left: 0;
  top: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  font-size: 0.66rem;
  font-weight: 700;
}

/* ---------- Results: complete ---------- */

.cgs-results-complete[hidden] {
  display: none;
}

.cgs-results-complete {
  display: grid;
  gap: 20px;
}

.cgs-compare-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  font-size: 0.86rem;
}

.cgs-compare-banner[hidden] {
  display: none;
}

.cgs-compare-banner strong {
  color: var(--accent-soft);
}

.cgs-result-hero-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cgs-result-lead {
  margin: 0;
  color: var(--text-1);
  font-size: 1.3rem;
  font-weight: 750;
  line-height: 1.35;
}

.cgs-result-support {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 0.92rem;
}

.cgs-result-hero-meta {
  margin: 10px 0 0;
  color: var(--text-3);
  font-size: 0.78rem;
}

/* ---------- Result hero: lead copy + score ring ---------- */

.cgs-result-hero {
  display: grid;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--status-bg, rgba(255, 255, 255, 0.02));
}

.cgs-result-hero-copy {
  min-width: 0;
}

.cgs-result-hero-score {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
}

.cgs-score-ring {
  transform: rotate(-90deg);
}

.cgs-score-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.cgs-score-ring-fill {
  fill: none;
  stroke: var(--status-fg, var(--accent));
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cgs-result-hero-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.cgs-result-hero-score-text strong {
  color: var(--text-1);
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.cgs-result-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--status-fg, var(--text-2));
}

.cgs-result-hero-status svg {
  color: var(--status-fg, var(--text-2));
}

.cgs-result-hero-status span {
  font-size: 0.78rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .cgs-result-hero {
    grid-template-columns: minmax(0, 65%) minmax(0, 35%);
  }
}

/* ---------- Primary metrics (3 cards) ---------- */

.cgs-metric-section-title {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cgs-metric-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cgs-metric-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 128px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--status-bg, rgba(255, 255, 255, 0.025));
}

.cgs-metric-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 0.76rem;
}

.cgs-metric-label .dc-icon {
  color: var(--status-fg, var(--text-2));
}

.cgs-metric-value {
  color: var(--text-1);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.cgs-metric-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--status-fg, var(--text-2));
  font-size: 0.8rem;
  font-weight: 700;
}

.cgs-metric-band::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.cgs-metric-progress-track {
  display: block;
  height: 7px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cgs-metric-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--status-fg, var(--accent));
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cgs-metric-detail {
  color: var(--text-3);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* ---------- Secondary metrics (compact) ---------- */

.cgs-metric-grid-secondary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cgs-metric-tile-secondary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--status-bg, rgba(255, 255, 255, 0.02));
}

.cgs-metric-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--status-fg, var(--text-3));
}

.cgs-metric-value-secondary {
  color: var(--text-1);
  font-size: 1.3rem;
  font-weight: 750;
  line-height: 1.1;
}

.cgs-metric-label-secondary {
  color: var(--text-3);
  font-size: 0.72rem;
}

/* ---------- Development timeline ---------- */

.cgs-chart-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.cgs-chart-card-head svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cgs-blue);
}

.cgs-chart-card-head .goldfish-subheading {
  margin: 0;
}

.cgs-chart-card-head .goldfish-note {
  margin-top: 2px;
}

.cgs-timeline-chart {
  min-height: 260px;
}

.goldfish-chart {
  height: 260px;
}

.cgs-chart-gridline {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

.cgs-chart-line-land {
  fill: none;
  stroke: var(--cgs-blue);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
}

.cgs-chart-line-mana {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cgs-chart-markers-land circle {
  fill: var(--cgs-blue);
}

.cgs-chart-markers-mana circle {
  fill: var(--accent);
}

.cgs-chart-markers-land circle,
.cgs-chart-markers-mana circle {
  cursor: pointer;
}

.cgs-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-2);
}

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

.cgs-timeline-legend-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.cgs-legend-mana::before {
  background: var(--accent);
}

.cgs-legend-land::before {
  background: var(--cgs-blue);
}

/* ---------- Turn snapshots ---------- */

.cgs-turn-snapshots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.cgs-turn-snapshot {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--status-bg, rgba(255, 255, 255, 0.02));
  border-top: 2px solid var(--status-fg, var(--text-3));
}

.cgs-turn-snapshot-turn {
  color: var(--text-3);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cgs-turn-snapshot-pct {
  color: var(--text-1);
  font-size: 1.2rem;
  font-weight: 750;
}

.cgs-turn-snapshot-label {
  color: var(--status-fg, var(--text-2));
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* ---------- Why games failed ---------- */

.cgs-failure-reasons {
  display: grid;
  gap: 8px;
}

.cgs-failure-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(80px, 140px) 52px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--status-bg, rgba(255, 255, 255, 0.02));
}

.cgs-failure-row svg {
  color: var(--status-fg, var(--text-2));
}

.cgs-failure-label {
  color: var(--text-2);
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cgs-failure-track {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.cgs-failure-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--status-fg, var(--text-2));
}

.cgs-failure-value {
  text-align: right;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* ---------- Interpretation panel ---------- */

.cgs-interpretation-panel {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--status-bg, rgba(255, 255, 255, 0.02));
}

.cgs-interpretation-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.cgs-interpretation-head svg {
  color: var(--status-fg, var(--text-2));
}

.cgs-interpretation-head strong {
  color: var(--text-1);
  font-size: 0.98rem;
  font-weight: 750;
}

.cgs-recommendations {
  display: grid;
  gap: 10px;
}

.cgs-recommendations[hidden] {
  display: none;
}

.cgs-recommendation {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.cgs-recommendation a {
  color: var(--accent-soft);
}

/* ---------- Stale results banner ---------- */

.cgs-stale-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--cgs-amber-bg);
  color: var(--text-1);
  font-size: 0.86rem;
}

.cgs-stale-banner[hidden] {
  display: none;
}

.cgs-stale-banner svg {
  flex-shrink: 0;
  color: var(--accent-soft);
}

.cgs-results-complete.is-stale > *:not(.cgs-stale-banner) {
  opacity: 0.55;
}

/* ---------- Error state ---------- */

.cgs-error-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 300px;
  align-content: center;
  padding: 24px;
  border-radius: 12px;
  background: var(--status-bg, var(--cgs-red-bg));
  text-align: center;
}

.cgs-error-state[hidden] {
  display: none;
}

.cgs-error-state svg {
  color: var(--status-fg, var(--cgs-red));
}

.cgs-error-title {
  margin: 0;
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 700;
}

.cgs-error-body {
  margin: 0;
  max-width: 380px;
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.cgs-error-retry {
  margin-top: 6px;
}

/* ---------- Decklist: moved below the workspace, summary/editor split ---------- */

.cgs-decklist-section {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
}

.cgs-decklist-grid {
  display: grid;
  gap: 20px;
}

.cgs-decklist-summary {
  display: grid;
  align-content: start;
  gap: 10px;
}

.cgs-decklist-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cgs-decklist-editor-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--accent-soft);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  list-style: none;
}

.cgs-decklist-editor-summary::-webkit-details-marker {
  display: none;
}

.cgs-decklist-editor-summary::before {
  content: "\25B8";
  transition: transform var(--transition);
}

.cgs-decklist-editor[open] .cgs-decklist-editor-summary::before {
  transform: rotate(90deg);
}

@media (min-width: 900px) {
  .cgs-decklist-grid {
    grid-template-columns: minmax(200px, 30%) minmax(0, 1fr);
  }
}

/* ---------- Educational content: shared surface, two-column grid ---------- */

.cgs-education {
  padding: 28px clamp(20px, 4vw, 36px);
}

.cgs-education-intro {
  max-width: 900px;
}

.cgs-education-grid {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 28px 32px;
}

.cgs-education-item h2 {
  margin-top: 0;
}

@media (min-width: 860px) {
  .cgs-education-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1279px) and (min-width: 1024px) {
  .cgs-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgs-metric-grid .cgs-metric-tile:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .cgs-mulligan-segmented {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .cgs-metric-grid {
    grid-template-columns: 1fr;
  }

  .cgs-metric-grid-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgs-test-select {
    display: none;
  }

  .cgs-test-select-mobile {
    display: grid;
  }

  .cgs-decklist-stats {
    grid-template-columns: 1fr 1fr;
  }

  .cgs-result-hero {
    text-align: center;
  }

  .cgs-result-hero-score {
    margin-top: 4px;
  }

  .cgs-failure-row {
    grid-template-columns: 18px minmax(0, 1fr) 44px;
  }

  .cgs-failure-track {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1039px) {
  .cgs-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cgs-metric-grid .cgs-metric-tile:first-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cgs-test-option,
  .goldfish-btn-tertiary,
  .cgs-decklist-editor-summary::before,
  .cgs-score-ring-fill,
  .cgs-metric-progress-fill {
    transition: none;
  }
}