:root {
    --surface: #F5F1E8;
    --panel: #FFFDF8;
    --ink: #2A241C;
    --muted: #6A5F4D; /* 5.5:1 on --surface, 6.2:1 on --panel (WCAG AA) */
    --line: #DDD5C4;
    --terrain-lo: #EAE3D4;
    --terrain-hi: #4E4436;
    --accent: #0891B2;
    --target: #B45309;
    --click-left: #0891B2;
    --click-mid: #7C3AED;
    --click-right: #DB2777;
    --heat-ok: #2563EB;
    --heat-none: #EA580C;
    --btn-font-size: 12px;
    --btn-pad: 3px 10px;
    --btn-radius: 4px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --surface: #16130F;
      --panel: #211D16;
      --ink: #E9E2D4;
      --muted: #9C917C;
      --line: #3A342A;
      --terrain-lo: #1E1A14;
      --terrain-hi: #C2B291;
      --accent: #0891B2;
      --target: #D97706;
      --click-left: #22B8D4;
      --click-mid: #A78BFA;
      --click-right: #F472B6;
      --heat-ok: #60A5FA;
      --heat-none: #FB923C;
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font: 13px/1.4 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
  }
  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }
  .toolbar .brand { font-weight: 650; font-size: 13px; margin-right: 2px; }
  #map-select {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
  }
  .btn {
    font: inherit;
    font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    font-size: var(--btn-font-size);
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    padding: var(--btn-pad);
    cursor: pointer;
  }
  .btn:hover { border-color: var(--muted); }
  .btn.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
  .btn:disabled { opacity: 0.45; cursor: default; }
  #controls {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 158px;
  }
  #controls .card {
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px;
  }
  #controls summary {
    display: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 11.5px;
    user-select: none;
  }
  #controls .card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  #controls .btn, #controls select {
    --btn-pad: 4px 8px;
    width: 100%;
    text-align: left;
  }
  #controls select {
    font: inherit;
    font-size: 12px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
  }
  :is(button, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  #status { color: var(--muted); }
  #tip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 11px;
    line-height: 1.5;
    z-index: 5;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  #tip b.left { color: var(--click-left); }
  #tip b.mid { color: var(--click-mid); }
  #tip b.right { color: var(--click-right); }
  #tip .cmd2 { font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted); }
  #readout {
    margin-left: auto;
    font-family: ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 11.5px;
    white-space: nowrap;
  }
  .stage { position: relative; flex: 1; min-height: 320px; overflow: hidden; }
  /* Headless lineup-preview capture: a clean full-viewport render with no
     chrome, so an automated screenshot shows only what the player would see. */
  body.preview-mode .toolbar,
  body.preview-mode #controls,
  body.preview-mode .key,
  body.preview-mode .panel,
  body.preview-mode footer { display: none; }
  body.preview-mode .stage { position: fixed; inset: 0; }
  .preview-crosshair {
    display: none;
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 40;
  }
  body.preview-mode .preview-crosshair { display: block; }
  .preview-crosshair span {
    position: absolute;
    background: #00ff00;
    box-shadow: 0 0 1px #000;
  }
  /* Two bars forming a "+", each centered on the viewport midpoint. */
  .preview-crosshair span:first-child { left: -8px; top: -1px; width: 16px; height: 2px; }
  .preview-crosshair span:last-child { left: -1px; top: -8px; width: 2px; height: 16px; }
  canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
  canvas.panning { cursor: grabbing; }
  canvas.picking { cursor: crosshair; }
  #stage3d canvas { cursor: grab; }
  #stage3d canvas.looking, #stage3d canvas.panning { cursor: grabbing; }
  .key {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px 10px;
  }
  .key .key-group { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  #key-heat { display: none; }
  .key.heat #key-markers { display: none; }
  .key.heat #key-heat { display: flex; }
  .key .swatch { width: 10px; height: 10px; display: inline-block; vertical-align: -1px; }
  .key .swatch.ok { background: var(--heat-ok); opacity: 0.75; }
  .key .swatch.raw { background: var(--heat-ok); opacity: 0.18; outline: 1px solid var(--line); }
  .key .swatch.none { border: 2px solid var(--heat-none); }
  .key .cross { color: var(--target); font-weight: 700; }
  .key .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--panel); display: inline-block; }
  .key .dot.left { background: var(--click-left); }
  .key .dot.mid { background: var(--click-mid); }
  .key .dot.right { background: var(--click-right); }
  .key .shape { color: var(--muted); font-weight: 700; }
  :is(.lineup .row1, .lineup-option) b.left { color: var(--click-left); }
  :is(.lineup .row1, .lineup-option) b.mid { color: var(--click-mid); }
  :is(.lineup .row1, .lineup-option) b.right { color: var(--click-right); }
  .panel {
    position: absolute;
    right: 10px;
    top: 10px;
    width: min(320px, calc(100% - 20px));
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
    max-height: calc(100% - 20px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 7px;
    padding: 9px 10px;
  }
  .paste { display: flex; gap: 5px; }
  .paste input {
    flex: 1;
    font: 10.5px ui-monospace, Menlo, monospace;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 6px;
  }
  .paste .btn { --btn-font-size: 11px; --btn-pad: 2px 8px; }
  details.setup summary { cursor: pointer; color: var(--muted); font-size: 11.5px; user-select: none; }
  .cmd {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 7px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
    margin-top: 5px;
  }
  .cmd .btn {
    position: absolute;
    top: 3px;
    right: 3px;
    --btn-font-size: 10px;
    --btn-pad: 0 6px;
    --btn-radius: 3px;
    color: var(--muted);
  }
  #lineup-list { display: grid; gap: 6px; }
  #lineup-list:empty { display: none; }
  .lineup {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 7px;
    cursor: pointer;
  }
  .lineup:hover, .lineup.selected { border-color: var(--accent); }
  .lineup .row1 {
    display: flex;
    gap: 7px;
    align-items: baseline;
    font-family: ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
  }
  .lineup .row1 b { font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
  .lineup .row1 .pct { margin-left: auto; color: var(--muted); }
  .lineup .cmd { margin-top: 4px; }
  .preview-thumb {
    margin-top: 6px;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
  }
  .preview-thumb:has(img) { cursor: zoom-in; }
  .preview-thumb.loading { animation: preview-pulse 1.2s ease-in-out infinite; }
  @keyframes preview-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
  .preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lineup-actions { display: flex; gap: 5px; margin-top: 6px; }
  .lineup-actions .btn { flex: 1; --btn-pad: 3px 6px; }
  .lineup-actions .remove-btn:hover { border-color: var(--click-right); color: var(--click-right); }
  .lineup-actions .fav-btn:hover { border-color: var(--target); color: var(--target); }
  .preview-modal {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.75);
    display: flex; align-items: center; justify-content: center;
  }
  .preview-modal[hidden] { display: none; }
  .preview-modal-inner { position: relative; max-width: 92vw; max-height: 92vh; }
  .preview-modal-inner img { max-width: 92vw; max-height: 92vh; display: block; border-radius: 6px; }
  .preview-modal-inner #preview-close {
    position: absolute; top: -14px; right: -14px;
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    line-height: 1; font-size: 16px;
  }
  .list-note { color: var(--muted); font-size: 11px; }
  .lineup-options { display: grid; gap: 4px; }
  .lineup-option {
    display: flex;
    gap: 6px;
    align-items: baseline;
    width: 100%;
    text-align: left;
    font-family: ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 7px;
    cursor: pointer;
  }
  .lineup-option:hover, .lineup-option.selected { border-color: var(--accent); }
  .lineup-option b { font-size: 12px; font-family: ui-sans-serif, system-ui, sans-serif; }
  .lineup-option .pct { margin-left: auto; color: var(--muted); }
  .ref { font-size: 10px; border-radius: 3px; padding: 0 3px; white-space: nowrap; }
  .lineup-option b, .lineup-option span:not(.pct) { white-space: nowrap; }
  .ref.sky { background: var(--heat-none); color: var(--panel); font-weight: 700; }
  .ref.flat { color: var(--muted); border: 1px solid var(--line); }
  .ref.edge { color: var(--accent); border: 1px solid var(--accent); }
  .ref.fav { color: var(--target); border: none; padding: 0; }
  footer {
    padding: 4px 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 10.5px;
    display: flex;
    gap: 12px;
  }
  @media (max-width: 640px) {
    #controls { width: 148px; }
    #controls summary { display: list-item; }
    #controls details[open] > .card-body { margin-top: 6px; }
    .key { left: auto; right: 10px; top: 10px; bottom: auto; max-width: calc(100% - 178px); }
    .panel {
      left: 0;
      right: 0;
      top: auto;
      bottom: 0;
      width: 100%;
      max-height: 45%;
      border-radius: 8px 8px 0 0;
      border-left: none;
      border-right: none;
      border-bottom: none;
    }
  }