/* ──────── STRATAGEMS FEATURE ──────── */

  /* The ⚡ button replacing VS in the sticky summary strip */
  .summary-strats-btn {
    align-self:center;
    width:44px; height:44px; border-radius:50%;
    background:linear-gradient(135deg, rgba(224,188,92,0.18), rgba(224,188,92,0.05));
    border:1px solid var(--gold);
    color:var(--gold); font-size:22px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; cursor:pointer; flex-shrink:0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-shadow:0 0 12px rgba(224,188,92,0.15);
  }
  .summary-strats-btn:hover { background:var(--gold); color:#000; box-shadow:0 0 18px rgba(224,188,92,0.4); }
  .summary-strats-btn:active { transform:scale(0.94); }

  /* Stratagems library view */
  #view-strats { padding: 1rem; }
  .strats-header { margin-bottom:1.2rem; }
  .strats-header h1 {
    font-family:'Cinzel',serif; font-size:1.6rem; color:var(--gold);
    letter-spacing:0.06em; font-weight:700; margin-bottom:0.2rem;
  }
  .strats-subtitle { color:var(--text-muted); font-size:0.88rem; }
  .strats-faction-filter {
    display:flex; gap:6px;
    /* Single-row horizontal scroll instead of multi-row wrap — keeps the toolbar
       at a consistent height so the controls beside it line up. Above the
       dropdown threshold the faction filter is replaced anyway, so scroll only
       comes into play when there are 3-6 factions — usually fits without it. */
    flex-wrap:nowrap; overflow-x:auto;
    margin-bottom:1rem;
    -webkit-overflow-scrolling:touch;
    /* Hide the horizontal scrollbar — pills already have a min-height so a visible
       scrollbar would push the container taller than the adjacent controls.
       On WebKit + Firefox the scrollbar can be hidden cleanly; the row remains
       scrollable via touch or wheel. */
    scrollbar-width:none;
  }
  .strats-faction-filter::-webkit-scrollbar { display:none; }
  .strats-filter-pill {
    padding:6px 12px; border-radius:999px;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text-muted); font-family:'Rajdhani',sans-serif;
    font-size:0.78rem; font-weight:500; letter-spacing:0.04em;
    cursor:pointer; white-space:nowrap; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Match the height of the sort dropdown and more-filters button so the toolbar
       lines up neatly when pills and controls share a row */
    min-height:36px;
    display:inline-flex; align-items:center;
  }
  .strats-filter-pill:hover { color:var(--text); border-color:var(--border-bright); }
  .strats-filter-pill.active {
    color:#000; background:var(--gold); border-color:var(--gold);
    font-weight:600;
  }
  .strats-filter-pill .pill-icon { display:inline-flex; vertical-align:middle; margin-right:4px; }
  .strats-filter-pill .pill-icon svg { width:14px; height:14px; }
  /* Active pill flips text to black on gold — the icon's inline color style would otherwise
     keep the faction's group hue (red/blue/green) and vanish on gold. Force black. */
  .strats-filter-pill.active .pill-icon > span { color:#000 !important; }

  .strats-section { margin-bottom:1.4rem; }
  .strats-section-header {
    display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem;
  }
  .strats-section-header h3 {
    font-family:'Cinzel',serif; font-size:1rem; color:var(--text);
    letter-spacing:0.05em; font-weight:600;
  }
  .strats-add-btn {
    padding:6px 12px; border-radius:4px;
    background:transparent; border:1px solid var(--gold); color:var(--gold);
    font-family:'Cinzel',serif; font-size:0.75rem; font-weight:600;
    letter-spacing:0.08em; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition:all 0.15s;
  }
  .strats-add-btn:hover { background:var(--gold); color:#000; }

  .strats-detachments-list { display:flex; flex-direction:column; gap:6px; }
  .strats-detachment-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 12px; background:var(--surface); border:1px solid var(--border);
    border-radius:5px;
  }
  .strats-detachment-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
  .strats-detachment-icon { width:22px; height:22px; flex-shrink:0; }
  .strats-detachment-icon svg { width:22px; height:22px; }
  .strats-detachment-name { font-family:'Rajdhani',sans-serif; font-weight:500; color:var(--text); }
  .strats-detachment-faction { font-size:0.72rem; color:var(--text-dim); }
  .strats-row-edit {
    background:transparent; border:1px solid var(--border-bright); color:var(--text-muted);
    padding:4px 10px; border-radius:4px; cursor:pointer; font-size:0.72rem;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .strats-row-edit:hover { color:var(--gold); border-color:var(--gold); }

  .strats-group { margin-bottom:0.9rem; }
  .strats-group-label {
    font-family:'Cinzel',serif; font-size:0.78rem; color:var(--text-muted);
    letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
    /* No bottom margin or horizontal padding — the parent .strats-group-header
       (flex with align-items:center) controls spacing. Internal margin here
       offsets the label's box from the toggle chevron beside it. */
    display:flex; align-items:center; gap:8px;
  }
  /* Faction or core icon next to the group label */
  .strats-group-icon {
    flex-shrink:0; width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .strats-group-icon svg { width:20px; height:20px; }
  .strats-group-icon-core {
    color:var(--gold); font-size:1.15rem; line-height:1;
  }
  .strats-group-label-text {
    /* Allow truncation on narrow viewports without disturbing the icon or count */
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .strats-cards-list { display:flex; flex-direction:column; gap:8px; }

  /* Cards tile inside their group — 1 col on phone, auto-fit 2 col when there's room.
     The 320px minmax floor means cards stay readable at any column count. */
  .strats-card-grid {
    display:grid;
    /* `auto-fill` keeps the grid tracks at their min-max width even when empty.
       `auto-fit` would collapse empty tracks and stretch a single card across the
       full row, which looks wrong when a filter narrows the group to one card. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:10px;
  }

  /* Codex-style card. Relative positioning anchors the floating hex cost badge. */
  .strats-card {
    position:relative;
    background:var(--surface); border:1px solid var(--border); border-radius:5px;
    padding:11px 12px 11px 56px; /* extra left padding makes room for the cost hex */
    transition:border-color 0.15s;
    display:flex; flex-direction:column;
  }
  .strats-card.spent { opacity:0.5; }
  .strats-card:hover { border-color:var(--border-bright); }

  /* When the card has no cost badge (enhancement, detachment rule), reclaim the left padding */
  .strats-card.no-cost { padding-left:12px; }

  /* Hexagonal cost badge, floating top-left like the codex */
  .strats-card-cost {
    position:absolute; top:10px; left:8px;
    display:flex; align-items:center; justify-content:center;
  }
  .strats-card-cost-hex {
    width:40px; height:46px;
    background: linear-gradient(135deg, rgba(224,188,92,0.18), rgba(224,188,92,0.05));
    border: 1.5px solid var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    color:var(--gold); font-family:'Cinzel',serif; font-weight:700;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    line-height:1;
    text-align:center;
  }
  .strats-card-cost-hex .cost-num { font-size:1.05rem; }
  .strats-card-cost-hex .cost-unit { font-size:0.55rem; font-weight:500; opacity:0.85; margin-top:1px; }

  /* Header row: small category icon + name + sublabel */
  .strats-card-header {
    display:flex; align-items:flex-start; gap:8px;
    padding-bottom:7px; margin-bottom:7px;
    border-bottom:1px solid var(--border);
  }
  .strats-card-icon {
    flex-shrink:0;
    font-size:1.05rem; line-height:1.2;
    color:var(--gold);
    margin-top:1px;
  }
  .strats-card-titles { flex:1; min-width:0; }
  .strats-card-name {
    font-family:'Cinzel',serif; font-size:0.98rem; color:var(--text);
    font-weight:700; letter-spacing:0.04em;
    line-height:1.2; margin-bottom:3px;
    word-break:break-word;
    text-transform:uppercase;
  }
  .strats-card-sublabel {
    font-family:'Rajdhani',sans-serif; font-size:0.7rem;
    color:var(--text-muted); letter-spacing:0.08em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  }
  .strats-card-once-badge {
    display:inline-block;
    padding:1px 6px;
    background:rgba(224,188,92,0.1); border:1px solid var(--gold);
    color:var(--gold); border-radius:3px;
    font-size:0.62rem; font-weight:600; letter-spacing:0.05em;
  }

  /* Body — flavour and structured fields */
  .strats-card-body {
    flex:1;
    font-family:'Rajdhani',sans-serif; font-size:0.86rem; line-height:1.45;
    color:var(--text);
  }
  .strats-card-flavour {
    font-style:italic;
    color:var(--text-muted);
    margin-bottom:8px;
    font-size:0.82rem;
    line-height:1.4;
  }
  .strats-field { margin-bottom:6px; }
  .strats-field:last-child { margin-bottom:0; }
  .strats-field-label {
    font-family:'Cinzel',serif;
    font-weight:700; font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--gold);
    text-transform:uppercase;
    margin-right:3px;
  }
  .strats-field-text { color:var(--text); }

  .strats-card-actions {
    display:flex; gap:6px; margin-top:10px; padding-top:8px;
    border-top:1px dashed var(--border);
  }
  .strats-card-actions button {
    flex:1; background:transparent; border:1px solid var(--border-bright); color:var(--text-muted);
    padding:5px 8px; border-radius:4px; cursor:pointer; font-size:0.72rem;
    font-family:'Cinzel',serif; letter-spacing:0.06em;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition:all 0.15s;
  }
  .strats-card-actions button:hover { color:var(--gold); border-color:var(--gold); }

  /* Search input row */
  .strats-search-row { margin-bottom:10px; }
  .strats-search-input {
    width:100%; padding:9px 12px;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text); font-family:'Rajdhani',sans-serif;
    font-size:0.92rem; letter-spacing:0.02em;
    border-radius:5px;
    transition:border-color 0.15s;
  }
  .strats-search-input::placeholder { color:var(--text-dim); }
  .strats-search-input:focus { outline:none; border-color:var(--gold); }

  /* Form label hint inline next to label text */
  .form-label-hint {
    font-family:'Rajdhani',sans-serif; font-weight:400;
    font-size:0.7rem; color:var(--text-dim);
    text-transform:none; letter-spacing:0.02em;
    margin-left:5px;
  }

  /* In-game sheet flavour + field rendering */
  .sheet-strat-flavour {
    font-style:italic; color:var(--text-muted);
    font-size:0.8rem; margin-bottom:7px; line-height:1.4;
  }
  .sheet-strat-field { margin-bottom:5px; font-size:0.82rem; line-height:1.4; color:var(--text); }
  .sheet-strat-field:last-child { margin-bottom:0; }


  .strats-empty {
    background:var(--surface); border:1px dashed var(--border-bright); border-radius:5px;
    padding:1.6rem 1rem; text-align:center; color:var(--text-muted); font-size:0.88rem;
    line-height:1.5;
  }
  .strats-empty strong { color:var(--text); display:block; margin-bottom:6px; font-family:'Cinzel',serif; font-size:1rem; letter-spacing:0.04em; }
  .strats-empty-cta {
    display:inline-block; margin-top:14px;
    padding:10px 20px; border-radius:5px;
    background:var(--gold); color:#000; border:none;
    font-family:'Cinzel',serif; font-size:0.86rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    cursor:pointer; transition:all 0.2s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .strats-empty-cta:hover { background:var(--gold-light); box-shadow:0 4px 14px rgba(224,188,92,0.35); }
  [data-theme="contrast"] .strats-empty-cta { color:#000; }

  /* Editor modal form fields */
  .form-row { margin-bottom:0.85rem; text-align:left; }
  .form-label {
    display:block; font-family:'Cinzel',serif; font-size:0.78rem;
    color:var(--text-muted); letter-spacing:0.08em; margin-bottom:6px;
    text-transform:uppercase; font-weight:600;
  }
  .form-label.form-check {
    display:flex; align-items:center; gap:8px; text-transform:none;
    font-size:0.85rem; color:var(--text); letter-spacing:0.02em;
  }
  .form-label.form-check input { width:18px; height:18px; }
  .form-input {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    padding:8px 10px; border-radius:4px;
    font-family:'Rajdhani',sans-serif; font-size:0.92rem; color:var(--text);
    letter-spacing:0.02em; transition:border-color 0.15s;
  }
  .form-input:focus { outline:none; border-color:var(--gold); }
  .form-input::placeholder { color:var(--text-dim); }
  textarea.form-input { resize:vertical; min-height:90px; font-family:'Rajdhani',sans-serif; }

  .segmented {
    display:flex; gap:0; border:1px solid var(--border); border-radius:4px; overflow:hidden;
  }
  .seg-btn {
    flex:1; background:var(--surface2); border:none; padding:8px 6px;
    font-family:'Cinzel',serif; font-size:0.72rem; font-weight:600;
    color:var(--text-muted); letter-spacing:0.06em; cursor:pointer;
    transition:all 0.15s; min-height:36px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    border-right:1px solid var(--border);
  }
  .seg-btn:last-child { border-right:none; }
  .seg-btn.active { background:var(--gold); color:#000; }
  .seg-btn:not(.active):hover { color:var(--text); background:var(--surface); }

  .stepper {
    display:flex; align-items:center; gap:0; border:1px solid var(--border-bright);
    border-radius:4px; overflow:hidden; width:fit-content;
  }
  .stepper-btn {
    width:36px; height:36px; background:var(--surface2); border:none;
    color:var(--text); font-size:18px; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .stepper-btn:hover { background:var(--surface); color:var(--gold); }
  .stepper-val {
    min-width:40px; padding:0 12px; height:36px; display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel',serif; font-weight:700; color:var(--text); font-size:1rem;
    background:var(--surface); border-left:1px solid var(--border); border-right:1px solid var(--border);
  }

  .form-actions {
    display:flex; gap:8px; margin-top:1rem;
  }
  .form-actions .welcome-secondary,
  .form-actions .welcome-cta { margin-top:0; flex:1; }
  .form-error {
    color:var(--red-light); font-size:0.82rem; margin-bottom:0.5rem;
    padding:7px 10px; background:rgba(212,63,46,0.08); border:1px solid var(--red);
    border-radius:4px;
  }
  .form-delete {
    width:100%; margin-top:0.8rem; padding:8px;
    background:transparent; border:1px solid var(--red); color:var(--red-light);
    border-radius:4px; font-family:'Cinzel',serif; font-size:0.78rem;
    letter-spacing:0.08em; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .form-delete:hover { background:rgba(212,63,46,0.1); }

  /* Bottom sheet for in-game stratagems */
  .sheet-backdrop {
    position:fixed; inset:0; z-index:400;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(2px);
    display:none; align-items:flex-end; justify-content:center;
    /* Backdrop swallows touches — taps on the dim area do not scroll the page */
    touch-action:none;
    overscroll-behavior:contain;
  }
  .sheet-backdrop.show { display:flex; }
  .bottom-sheet {
    width:100%; max-width:560px; max-height:80vh;
    background:var(--surface); border:1px solid var(--gold); border-bottom:none;
    border-radius:14px 14px 0 0;
    padding:0; display:flex; flex-direction:column;
    overflow:hidden;
    box-shadow:0 -8px 32px rgba(0,0,0,0.5);
    /* Locks touches on the sheet's own area; children opt back in where needed */
    touch-action:none;
    /* No CSS animation on the sheet itself — opening + closing are JS-driven so they
       can't fight with the drag transform during a swipe-to-dismiss */
    transform: translateY(100%);
  }
  /* Open state */
  .bottom-sheet.open { transform: translateY(0); transition: transform 0.28s ease-out; }
  /* While the user is actively dragging, no transition — finger tracking is 1:1 */
  .bottom-sheet.dragging { transition: none !important; }
  /* Snap-back-to-open and slide-down-to-close animations are both `transition` based
     so JS can listen for transitionend deterministically */
  .bottom-sheet.snapping { transition: transform 0.22s ease-out; }
  .bottom-sheet.closing { transition: transform 0.28s ease-in; }

  /* Drag-eligible regions — handle bar + header + controls. We disable native
     scrolling/zoom here so iOS routes the touch to our pointer handlers instead
     of trying to scroll the page or rubber-band */
  .sheet-handle-grip,
  .sheet-header,
  .sheet-controls {
    touch-action:none;
  }
  /* But interactive children inside those regions (buttons, selects) get pan-y back
     so a tap on them isn't intercepted as a swipe attempt — they take the touch via
     their own event handlers and our drag handler bails out on them */
  .sheet-header button,
  .sheet-controls button,
  .sheet-controls select,
  .sheet-controls input {
    touch-action:manipulation;
  }
  /* Handle bar — visual cue at the top */
  .sheet-handle-grip {
    padding:8px 0 4px;
    display:flex; justify-content:center;
    cursor:grab;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    flex-shrink:0;
  }
  .sheet-handle-grip:active { cursor:grabbing; }
  .sheet-handle {
    width:40px; height:4px; background:var(--border-bright); border-radius:2px;
    pointer-events:none;
  }
  .sheet-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 14px 6px;
  }
  .sheet-title {
    font-family:'Cinzel',serif; font-size:1.05rem; color:var(--gold);
    letter-spacing:0.08em; font-weight:700;
  }
  .sheet-close {
    width:32px; height:32px; border-radius:50%; background:var(--surface2);
    border:1px solid var(--border); color:var(--text-muted);
    font-size:22px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .sheet-close:hover { color:var(--text); border-color:var(--border-bright); }
  .sheet-controls {
    padding: 6px 14px 10px; border-bottom:1px solid var(--border);
  }
  .sheet-player-toggle {
    display:flex; gap:6px; margin-bottom:10px;
  }
  .sheet-side-btn {
    flex:1; background:transparent; border:1px solid var(--border); border-radius:5px;
    padding:7px 10px; cursor:pointer; min-height:46px;
    display:flex; flex-direction:column; align-items:flex-start; gap:1px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition:all 0.15s;
  }
  .sheet-side-btn .sheet-side-name {
    font-family:'Cinzel',serif; font-size:0.78rem; color:var(--text-muted);
    letter-spacing:0.04em; font-weight:600;
    max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sheet-side-btn .sheet-side-cp {
    font-family:'Rajdhani',sans-serif; font-size:0.72rem; color:var(--text-dim);
  }
  .sheet-side-btn.p1.active { border-color:var(--red); background:rgba(212,63,46,0.08); }
  .sheet-side-btn.p1.active .sheet-side-name { color:var(--red-light); }
  .sheet-side-btn.p2.active { border-color:var(--blue); background:rgba(32,128,203,0.08); }
  .sheet-side-btn.p2.active .sheet-side-name { color:var(--blue-light); }
  .sheet-scope-filter {
    display:flex; gap:5px; margin-bottom:6px;
  }
  .sheet-scope-filter .scope-pill {
    flex:1; padding:6px 10px; border-radius:5px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.06em; font-weight:600;
    text-transform:uppercase;
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .sheet-scope-filter .scope-pill.active { background:var(--gold); color:#000; border-color:var(--gold); }
  .sheet-scope-filter .scope-pill:not(.active):hover { color:var(--text); border-color:var(--border-bright); }
  .sheet-scope-filter .scope-pill:disabled { opacity:0.4; cursor:not-allowed; }
  .sheet-phase-filter {
    display:flex; gap:5px; overflow-x:auto; padding-bottom:2px;
  }
  .phase-pill {
    flex-shrink:0; padding:5px 10px; border-radius:999px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    font-family:'Rajdhani',sans-serif; font-size:0.74rem; letter-spacing:0.04em;
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .phase-pill.active { background:var(--gold); color:#000; border-color:var(--gold); font-weight:600; }
  .phase-pill:not(.active):hover { color:var(--text); }

  .sheet-body {
    overflow-y:auto; padding:10px 14px 14px;
    flex:1; min-height:0;
    /* iOS quirk: when a scroll container hits its top or bottom, the gesture would
       normally chain up to the next scrollable ancestor — that's the page. Contain
       stops that from happening. */
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    /* Explicit pan-y so iOS knows this region scrolls vertically and shouldn't
       route the gesture to the page or to our custom swipe-down handler */
    touch-action:pan-y;
  }
  .sheet-strat-card {
    background:var(--surface2); border:1px solid var(--border); border-radius:5px;
    margin-bottom:8px; padding:0; overflow:hidden;
    transition:all 0.15s;
  }
  .sheet-strat-card.unavailable { opacity:0.4; }
  .sheet-strat-card.spent .sheet-strat-name { text-decoration:line-through; }
  .sheet-strat-row {
    display:flex; align-items:center; gap:10px; padding:11px 12px;
  }
  .sheet-strat-main { flex:1; min-width:0; }
  .sheet-strat-name {
    font-family:'Cinzel',serif; font-size:0.92rem; color:var(--text);
    font-weight:600; letter-spacing:0.03em; margin-bottom:2px;
    word-break:break-word;
  }
  .sheet-strat-meta {
    display:flex; gap:5px; font-family:'Rajdhani',sans-serif;
    font-size:0.68rem; letter-spacing:0.05em; color:var(--text-muted);
    text-transform:uppercase;
  }
  .sheet-strat-meta .meta-once { color:var(--gold); }
  .sheet-strat-tap {
    flex-shrink:0; min-width:60px; height:40px; padding:0 10px;
    border-radius:5px;
    background:linear-gradient(135deg, rgba(224,188,92,0.22), rgba(224,188,92,0.06));
    border:1px solid var(--gold); color:var(--gold);
    font-family:'Cinzel',serif; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:3px;
    font-size:0.88rem;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition:all 0.15s;
  }
  .sheet-strat-tap:hover { background:var(--gold); color:#000; }
  .sheet-strat-tap:disabled,
  .sheet-strat-tap.unavailable { opacity:0.4; cursor:not-allowed; }
  .sheet-strat-tap .tap-unit { font-size:0.62rem; font-weight:500; opacity:0.8; }
  .sheet-strat-desc {
    padding:0 12px 11px;
    font-size:0.82rem; color:var(--text-muted); line-height:1.4;
    white-space:pre-wrap; word-break:break-word;
    display:none;
  }
  .sheet-strat-card.expanded .sheet-strat-desc { display:block; }
  .sheet-empty {
    padding:1.5rem 1rem; text-align:center; color:var(--text-muted); font-size:0.88rem;
    background:var(--surface2); border:1px dashed var(--border-bright); border-radius:5px;
  }
  .sheet-empty button {
    margin-top:10px; padding:7px 14px; background:transparent; border:1px solid var(--gold);
    color:var(--gold); border-radius:4px; font-family:'Cinzel',serif;
    font-size:0.78rem; letter-spacing:0.08em; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .sheet-empty button:hover { background:var(--gold); color:#000; }

  /* CP indicator gold-flash when stratagem is spent */
  @keyframes cp-spent-flash {
    0% { background-color: rgba(224,188,92,0); }
    25% { background-color: rgba(224,188,92,0.4); }
    100% { background-color: rgba(224,188,92,0); }
  }
  .cp-spent-flash { animation: cp-spent-flash 0.6s ease-out; }

  [data-theme="contrast"] .summary-strats-btn { color:var(--gold); }
  [data-theme="contrast"] .sheet-strat-tap { color:var(--gold); }

  /* Strats header row — title and action buttons side by side */
  .strats-header-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    margin-bottom:4px;
  }
  .strats-header-row h1 { flex:1; min-width:0; }
  .strats-header-actions {
    flex-shrink:0;
    display:flex; align-items:center; gap:6px;
    flex-wrap:wrap; justify-content:flex-end;
  }
  .strats-header-action {
    background:transparent; border:1px solid var(--border-bright); color:var(--text-muted);
    padding:6px 10px; border-radius:4px; cursor:pointer;
    font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; font-weight:600;
    transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    white-space:nowrap;
  }
  .strats-header-action:hover { color:var(--gold); border-color:var(--gold); }

  /* Import/Export modal — tabs */
  .io-tabs {
    display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1rem;
  }
  .io-tab {
    flex:1; background:transparent; border:none; border-bottom:2px solid transparent;
    padding:9px 10px; cursor:pointer;
    font-family:'Cinzel',serif; font-size:0.82rem; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-muted); transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .io-tab:hover { color:var(--text); }
  .io-tab.active { color:var(--gold); border-bottom-color:var(--gold); }

  .io-pane { text-align:left; }
  .io-help {
    font-family:'Rajdhani',sans-serif; font-size:0.85rem;
    color:var(--text-muted); line-height:1.45; margin-bottom:0.8rem;
  }
  .io-help strong { color:var(--text); }

  .io-textarea {
    width: 100%;
    min-height: 140px;
    max-height: 260px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .io-meta {
    font-family:'Rajdhani',sans-serif; font-size:0.78rem;
    color:var(--text-dim); margin-top:6px; min-height:1.2em;
  }

  .io-meta.ok { color:var(--gold); }
  .io-actions {
    display:flex; gap:8px; margin-top:1rem; flex-wrap:wrap;
  }
  .io-actions button { flex:1; min-width:120px; margin-top:0; }

  /* Import mode toggle + file picker */
  .io-mode-row {
    display:flex; gap:14px; margin-bottom:0.7rem;
    font-family:'Rajdhani',sans-serif; font-size:0.9rem; color:var(--text);
  }
  .io-mode-label {
    display:flex; align-items:center; gap:6px; cursor:pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .io-mode-label input { accent-color: var(--gold); }
  .io-file-row {
    display:flex; align-items:center; gap:8px; margin-bottom:0.7rem; flex-wrap:wrap;
  }
  .io-file-label {
    display:inline-block; padding:7px 12px; border-radius:4px;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text-muted); font-family:'Cinzel',serif;
    font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .io-file-label:hover { color:var(--text); border-color:var(--border-bright); }
  .io-file-label input[type="file"] {
    /* Hide the native input but keep it functional */
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .io-file-name {
    font-family:'Rajdhani',sans-serif; font-size:0.82rem;
    color:var(--text-muted); flex:1; min-width:0;
    text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  }
  .io-help code {
    background:var(--surface2); border:1px solid var(--border);
    padding:1px 6px; border-radius:3px;
    font-family:'SF Mono', Menlo, Consolas, monospace;
    font-size:0.82em; color:var(--text);
  }
  .io-link {
    color:var(--gold); text-decoration:underline; text-underline-offset:2px;
  }
  .io-link:hover { color:var(--gold-light); }

  /* Wahapedia preview summary */
  .io-waha-summary {
    margin-top:1rem; padding:10px 12px;
    background:rgba(224,188,92,0.08); border:1px solid var(--gold); border-radius:5px;
    font-family:'Rajdhani',sans-serif; font-size:0.88rem; color:var(--text);
    line-height:1.5;
  }
  .io-waha-summary strong { color:var(--gold); }

  .io-waha-faction-list {
    margin-top:10px; max-height:280px; overflow-y:auto;
    border:1px solid var(--border); border-radius:5px; padding:8px;
    background:var(--surface);
  }
  .io-waha-faction-row {
    display:flex; align-items:center; gap:8px;
    padding:7px 6px; border-bottom:1px dashed var(--border);
  }
  .io-waha-faction-row:last-child { border-bottom:none; }
  .io-waha-faction-row input[type="checkbox"] {
    width:18px; height:18px; flex-shrink:0; accent-color:var(--gold);
  }
  .io-waha-faction-row label {
    flex:1; font-family:'Rajdhani',sans-serif; font-size:0.9rem;
    color:var(--text); cursor:pointer;
    display:flex; align-items:center; gap:8px;
  }
  .io-waha-faction-row .io-waha-count {
    font-size:0.75rem; color:var(--text-muted);
    font-family:'Cinzel',serif; letter-spacing:0.04em;
  }
  .io-waha-faction-row .io-waha-target {
    font-size:0.75rem; color:var(--text-muted);
    flex:1; text-align:right;
    font-style:italic;
  }
  .io-waha-faction-row.unmatched .io-waha-target { color:var(--red-light); }
  .io-waha-faction-row select {
    font-family:'Rajdhani',sans-serif; font-size:0.82rem;
    background:var(--surface2); border:1px solid var(--border);
    color:var(--text); padding:4px 8px; border-radius:4px;
    flex:0 0 auto; max-width:55%;
  }

  /* ──────── STRATS TOOLBAR (toolbar, advanced filters, collapsible groups) ──────── */
  .strats-toolbar {
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center;
  }
  /* Pill row variant fills available width; pills inside scroll horizontally
     when they don't fit, so the container itself can shrink to any width */
  .strats-toolbar .strats-faction-filter { flex:1 1 0; min-width:0; margin-bottom:0; }
  .strats-faction-dropdown-wrap { flex:1 1 0; min-width:140px; }
  .strats-faction-dropdown { width:100%; }
  .strats-toolbar-controls {
    display:flex; gap:6px; align-items:center; flex-wrap:nowrap;
    /* Controls fit their natural width — the faction filter beside them flexes
       to take whatever room is left. Letting the controls shrink would cause the
       sort dropdown and more-filters button to clip awkwardly. */
    flex-shrink:0;
  }
  .strats-toolbar-controls .strats-sort {
    min-width:170px; padding-right:30px;
  }
  .strats-more-btn {
    padding:7px 12px; border-radius:4px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    font-family:'Cinzel',serif; font-size:0.74rem; letter-spacing:0.06em; font-weight:600;
    text-transform:uppercase;
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    min-height:36px;
  }
  .strats-more-btn:hover { color:var(--text); border-color:var(--border-bright); }
  .strats-more-btn[aria-expanded="true"] {
    color:var(--gold); border-color:var(--gold); background:rgba(224,188,92,0.08);
  }
  .strats-more-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--gold); color:#000;
    font-family:'Cinzel',serif; font-size:0.66rem; font-weight:700;
  }
  /* The HTML `hidden` attribute normally maps to display:none, but our explicit
     `display:inline-flex` above wins by specificity. Restore the hide behaviour. */
  .strats-more-badge[hidden] { display:none; }
  .strats-section-actions {
    display:flex; align-items:center; gap:6px;
  }
  .strats-collapse-btn {
    width:36px; height:36px; border-radius:4px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-size:1.1rem; line-height:1;
    flex-shrink:0;
  }
  .strats-collapse-btn:hover { color:var(--gold); border-color:var(--gold); }

  /* Advanced-filter panel — slides down on expand */
  .strats-more-panel {
    background:var(--surface); border:1px solid var(--border); border-radius:6px;
    padding:10px 12px; margin-bottom:10px;
    animation: strats-more-slide 0.18s ease-out;
  }
  @keyframes strats-more-slide {
    from { opacity:0; transform:translateY(-4px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .strats-more-row {
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:8px;
  }
  .strats-more-row:last-of-type { margin-bottom:0; }
  .strats-more-label {
    flex-shrink:0; min-width:62px;
    font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.1em;
    color:var(--text-muted); text-transform:uppercase; font-weight:600;
    padding-top:4px;
  }
  .strats-chip-group {
    display:flex; gap:5px; flex-wrap:wrap; flex:1;
  }
  .strats-chip {
    padding:4px 11px; border-radius:999px;
    background:var(--surface2); border:1px solid var(--border); color:var(--text-muted);
    font-family:'Rajdhani',sans-serif; font-size:0.78rem; letter-spacing:0.04em;
    cursor:pointer; transition:all 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    min-height:28px;
  }
  .strats-chip:hover { color:var(--text); border-color:var(--border-bright); }
  .strats-chip.active {
    color:#000; background:var(--gold); border-color:var(--gold); font-weight:600;
  }
  .strats-more-actions {
    margin-top:10px; display:flex; justify-content:flex-end;
  }
  .strats-more-reset {
    background:transparent; border:none; color:var(--text-muted);
    font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:0.06em;
    text-transform:uppercase; cursor:pointer; padding:4px 8px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .strats-more-reset:hover { color:var(--gold); }

  /* Section-level card counter, e.g. "My Cards · 47" */
  .strats-section-count {
    font-family:'Rajdhani',sans-serif; font-size:0.78rem;
    color:var(--text-muted); font-weight:400;
    letter-spacing:0.04em; margin-left:6px;
  }

  /* Collapsible group header — when group is collapsed, the grid is hidden */
  .strats-group-header {
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; user-select:none;
    padding:4px 4px 4px 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .strats-group-header:hover .strats-group-label { color:var(--text); }
  .strats-group-toggle {
    flex-shrink:0;
    width:24px; height:24px; display:inline-flex;
    align-items:center; justify-content:center;
    color:var(--text-muted); transition:transform 0.2s;
    font-size:0.7rem;
  }
  .strats-group.collapsed .strats-group-toggle { transform:rotate(-90deg); }
  .strats-group.collapsed .strats-card-grid { display:none; }
  .strats-group-count {
    /* Match the label's font properties so the baseline is identical, then dim
       the colour and give a clear separator gap. Without these the count's
       slightly different size and spacing causes a subtle offset that reads as
       misalignment. */
    font-family:'Cinzel',serif; font-size:0.78rem;
    letter-spacing:0.1em; font-weight:400;
    color:var(--text-dim);
    margin-left:8px;
  }

  /* Compact mode — when the library is large enough that we auto-collapse groups by default */
  .strats-cards-list.compact .strats-group { margin-bottom:0.7rem; }
  .strats-cards-list.compact .strats-group-header { padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:5px; }
  .strats-cards-list.compact .strats-group:not(.collapsed) .strats-group-header { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
  .strats-cards-list.compact .strats-group:not(.collapsed) .strats-card-grid {
    padding:10px; border:1px solid var(--border); border-top:none; border-radius:0 0 5px 5px;
    background:var(--bg);
  }

  /* ──────── END STRATS TOOLBAR ──────── */

  /* ──────── END STRATAGEMS FEATURE ──────── */

  .players { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1rem; }
  .player-card { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; position:relative; transition:border-color 0.3s,box-shadow 0.3s; overflow:hidden; }
  .player-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; transition:opacity 0.3s; opacity:0; }
  .player-card.p1::before { background:linear-gradient(90deg,transparent,var(--red-light),transparent); }
  .player-card.p2::before { background:linear-gradient(90deg,transparent,var(--blue-light),transparent); }
  .player-card.leading { border-color:var(--border-bright); }
  .player-card.leading::before { opacity:1; }
  .player-card.p1.leading { box-shadow:0 0 30px var(--red-glow); }
  .player-card.p2.leading { box-shadow:0 0 30px var(--blue-glow); }
  .player-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .player-color-bar { width:4px; height:22px; border-radius:2px; flex-shrink:0; }
  .p1 .player-color-bar { background:var(--red-light); }
  .p2 .player-color-bar { background:var(--blue-light); }
  .player-name-input { background:transparent; border:none; outline:none; font-family:'Cinzel',serif; font-size:1rem; font-weight:600; color:var(--text); width:100%; letter-spacing:0.04em; min-width:0; }
  .player-name-input::placeholder { color:var(--text-dim); }
  .player-name-input:focus { outline:1px dashed var(--border-bright); outline-offset:2px; border-radius:2px; }

  /* Faction selector */
  .faction-selector { position:relative; margin-bottom:11px; }
  .faction-trigger {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    padding:7px 26px 7px 10px; cursor:pointer; display:flex; align-items:center; gap:8px;
    font-family:'Rajdhani',sans-serif; font-size:0.82rem; color:var(--text);
    letter-spacing:0.05em; transition:all 0.2s; text-align:left; min-height:36px;
    border-radius:4px; position:relative; font-weight:500;
  }
  .faction-trigger:hover, .faction-trigger.open { border-color:var(--border-bright); background:var(--surface); }
  .faction-trigger .f-icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .faction-trigger .f-icon svg { width:22px; height:22px; }
  .faction-trigger .f-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .faction-trigger::after { content:'▾'; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-muted); pointer-events:none; }
  .faction-trigger.placeholder .f-name { color:var(--text-muted); font-style:italic; }

  /* Detachment selector sits below the faction selector when a faction is chosen. */
  .detachment-row {
    margin-top:6px;
  }
  .detachment-select {
    width:100%; background:var(--surface2); border:1px solid var(--border);
    padding:7px 26px 7px 10px; cursor:pointer;
    font-family:'Rajdhani',sans-serif; font-size:0.82rem; color:var(--text);
    letter-spacing:0.05em; transition:all 0.2s; min-height:36px;
    border-radius:4px; font-weight:500;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23B8B2A4' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .detachment-select:hover { border-color:var(--border-bright); background-color:var(--surface); }
  .detachment-select:focus { outline:none; border-color:var(--gold); }
  .detachment-select option { background:var(--surface); color:var(--text); }
  .detachment-select option:disabled { color:var(--text-dim); }

  .faction-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
    background:var(--surface); border:1px solid var(--border-bright); border-radius:4px;
    max-height:340px; overflow-y:auto; box-shadow:0 8px 32px var(--shadow-color);
    -webkit-overflow-scrolling:touch;
  }
  .faction-selector.open .faction-dropdown { display:block; }
  .faction-search {
    width:100%; padding:9px 10px; background:var(--surface2); border:none;
    border-bottom:1px solid var(--border); color:var(--text); font-size:0.85rem;
    outline:none; font-family:'Rajdhani',sans-serif; position:sticky; top:0; z-index:2;
    font-weight:500;
  }
  .faction-search::placeholder { color:var(--text-dim); }
  .faction-search:focus { background:var(--surface); }
  .faction-group-label {
    font-family:'Cinzel',serif; font-size:0.6rem; letter-spacing:0.18em;
    text-transform:uppercase; padding:8px 12px 4px;
    background:var(--surface); font-weight:700;
  }
  .faction-group-label.imp { color:var(--gold); }
  .faction-group-label.cha { color:var(--red-light); }
  .faction-group-label.xen { color:var(--green-light); }
  .faction-option {
    display:flex; align-items:center; gap:10px; padding:9px 12px;
    cursor:pointer; transition:background 0.12s; font-size:0.86rem; color:var(--text);
    font-weight:500;
  }
  .faction-option:hover, .faction-option.selected { background:var(--surface2); }
  .faction-option.selected { color:var(--gold); }
  .faction-option .f-icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .faction-option .f-icon svg { width:22px; height:22px; }
  .faction-option .f-name { flex:1; }
  .faction-option.no-results { color:var(--text-muted); font-style:italic; cursor:default; }
  .faction-option.no-results:hover { background:transparent; }

  /* Score display */
  .score-total-label { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-top:10px; margin-bottom:6px; font-family:'Cinzel',serif; font-weight:700; text-align:center; }
  .score-display { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:10px; }
  .score-btn { width:44px; height:44px; border-radius:5px; border:1px solid var(--border-bright); background:var(--surface2); font-size:22px; color:var(--text); display:flex; align-items:center; justify-content:center; transition:all 0.15s; font-weight:600; }
  .score-btn:hover { background:var(--surface); }
  .p1 .score-btn:active { background:rgba(212,63,46,0.25); border-color:var(--red); color:var(--red-light); }
  .p2 .score-btn:active { background:rgba(32,128,203,0.25); border-color:var(--blue); color:var(--blue-light); }
  .score-btn:disabled, .cat-btn:disabled {
    opacity:0.3; cursor:not-allowed; pointer-events:none;
  }
  .score-num { font-family:'Cinzel',serif; font-size:3rem; font-weight:700; line-height:1; min-width:70px; text-align:center; }
  .p1 .score-num { color:var(--red-light); text-shadow:0 0 20px var(--red-glow); }
  .p2 .score-num { color:var(--blue-light); text-shadow:0 0 20px var(--blue-glow); }

  /* CP section */
  .cp-section { background:var(--surface2); border-radius:5px; padding:9px 12px; margin-bottom:12px; border:1px solid var(--border); }
  .cp-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .cp-label { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); font-family:'Cinzel',serif; flex:1; min-width:70px; font-weight:700; }
  .cp-controls { display:flex; align-items:center; gap:6px; }
  .cp-btn { width:36px; height:36px; border-radius:4px; border:1px solid var(--border-bright); background:transparent; font-size:18px; color:var(--text); display:flex; align-items:center; justify-content:center; transition:all 0.15s; -webkit-tap-highlight-color: rgba(0,0,0,0); }
  .cp-btn:active { color:var(--green-light); border-color:var(--green); background:rgba(44,183,102,0.15); }
  .cp-num { font-family:'Cinzel',serif; font-size:1.2rem; font-weight:700; min-width:24px; text-align:center; color:var(--green-light); text-shadow:0 0 10px rgba(44,183,102,0.3); }
  .cp-pips { display:flex; flex-wrap:wrap; gap:3px; max-width:60px; }
  .cp-pip { width:7px; height:7px; border-radius:50%; border:1px solid var(--border-bright); }
  .cp-pip.filled { background:var(--green-light); border-color:var(--green); box-shadow:0 0 4px rgba(44,183,102,0.5); }

  .divider { border:none; border-top:1px solid var(--border); margin:10px 0; }
  .cat-label { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; font-family:'Cinzel',serif; font-weight:700; }
  .cat-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
  .cat-name { font-size:0.82rem; color:var(--text); flex:1; min-width:0; font-weight:500; }
  .cat-btns { display:flex; align-items:center; gap:6px; }
  .cat-btn { width:36px; height:36px; border-radius:4px; border:1px solid var(--border-bright); background:transparent; font-size:17px; color:var(--text); display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color: rgba(0,0,0,0); }
  .cat-btn:active { background:var(--surface2); }
  .cat-val { font-size:0.9rem; font-weight:700; min-width:22px; text-align:center; color:var(--text); font-family:'Cinzel',serif; }
  .cat-name-wrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .cat-meta {
    font-size:0.66rem; color:var(--text-muted);
    letter-spacing:0.04em; font-family:'Rajdhani',sans-serif;
  }

  /* Battle ready toggle */
  .br-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:7px 10px; border-radius:4px; background:var(--surface2); border:1px solid var(--border); }
  .br-label { flex:1; font-size:0.82rem; color:var(--text); font-weight:500; }
  .br-info { font-size:0.66rem; color:var(--text-muted); display:block; margin-top:1px; font-style:italic; }
  .br-toggle { width:42px; height:24px; background:var(--surface); border:1px solid var(--border-bright); border-radius:12px; position:relative; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
  .br-toggle.on { background:var(--gold); border-color:var(--gold); }
  .br-toggle::after { content:''; position:absolute; width:18px; height:18px; background:var(--text-muted); border-radius:50%; top:2px; left:2px; transition:all 0.2s; }
  .br-toggle.on::after { left:21px; background:#000; }

  /* Round nav near scores */
  .round-nav { display:flex; gap:8px; align-items:stretch; justify-content:center; margin-bottom:0.6rem; flex-wrap:wrap; }
  .round-nav-btn {
    flex:1; max-width:200px; padding:10px 14px; border-radius:5px;
    border:1px solid var(--border-bright); background:var(--surface);
    font-family:'Cinzel',serif; font-size:0.78rem; letter-spacing:0.08em;
    color:var(--text); text-transform:uppercase; transition:all 0.2s; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .round-nav-btn:hover:not(:disabled) { background:var(--surface2); border-color:var(--gold); color:var(--gold); }
  .round-nav-btn:disabled { opacity:0.3; cursor:not-allowed; }
  .round-nav-btn.finish { border-color:var(--gold); color:var(--gold); background:rgba(224,188,92,0.08); }
  .round-nav-btn.finish:hover { background:var(--gold); color:#000; }

  /* Chart */
  .chart-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; margin-bottom:1rem; }
  .chart-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; flex-wrap:wrap; }
  .chart-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
  .chart-tabs { display:flex; gap:5px; flex-wrap:wrap; }
  .chart-tab { padding:5px 12px; border-radius:3px; border:1px solid var(--border); background:transparent; font-family:'Rajdhani',sans-serif; font-size:0.74rem; letter-spacing:0.05em; color:var(--text); text-transform:uppercase; transition:all 0.2s; font-weight:600; }
  .chart-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(224,188,92,0.1); }
  .chart-wrap { position:relative; height:180px; }
  .score-canvas { display:block; width:100%; height:180px; }
  .chart-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.85rem; font-style:italic; text-align:center; padding:0 1rem; }
  .chart-legend { display:flex; gap:14px; margin-top:8px; justify-content:center; flex-wrap:wrap; }
  .legend-item { display:flex; align-items:center; gap:5px; font-size:0.78rem; color:var(--text); font-weight:500; }
  .legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

  /* History */
  .history-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; margin-bottom:1rem; overflow-x:auto; }
  .history-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:9px; font-weight:700; }
  .history-table { width:100%; border-collapse:collapse; font-size:0.85rem; min-width:340px; }
  .history-table th { color:var(--text-muted); font-weight:600; padding:4px 6px; text-align:center; letter-spacing:0.06em; text-transform:uppercase; font-size:0.65rem; }
  .history-table th:first-child { text-align:left; }
  .history-table td { padding:6px 6px; text-align:center; border-top:1px solid var(--border); color:var(--text); }
  .history-table td:first-child { text-align:left; color:var(--text); font-size:0.78rem; letter-spacing:0.08em; font-weight:600; }
  .cp-cell { color:var(--green-light); font-size:0.8rem; font-weight:600; }
  .empty-row { color:var(--text-muted)!important; font-style:italic; }
  .badge { font-size:0.65rem; padding:3px 7px; border-radius:3px; border:1px solid; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; }
  .badge-p1 { color:var(--red-light); border-color:var(--red); background:rgba(212,63,46,0.1); }
  .badge-p2 { color:var(--blue-light); border-color:var(--blue); background:rgba(32,128,203,0.1); }
  .badge-draw { color:var(--text); border-color:var(--border-bright); }

  /* Bottom actions (finish/reset) */
  .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:0.8rem; }
  .action-btn { flex:1; min-width:120px; padding:11px; border-radius:4px; border:1px solid var(--border-bright); background:var(--surface); font-family:'Cinzel',serif; font-size:0.74rem; letter-spacing:0.08em; color:var(--text); text-transform:uppercase; transition:all 0.2s; font-weight:600; }
  .action-btn:hover { background:var(--surface2); }
  .action-btn.danger { border-color:rgba(212,63,46,0.5); color:var(--text-muted); }
  .action-btn.danger:hover { background:rgba(212,63,46,0.1); border-color:var(--red); color:var(--red-light); }

  /* ══ PROBABILITY ══ */
  .prob-header { text-align:center; margin-bottom:1.4rem; }
  .prob-header h1 { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:700; letter-spacing:0.1em; color:var(--purple-light); text-shadow:0 0 30px rgba(197,128,224,0.3); }
  .prob-header p { font-size:0.78rem; color:var(--text-muted); letter-spacing:0.13em; text-transform:uppercase; margin-top:0.25rem; font-weight:500; }

  .prob-grid { display:grid; grid-template-columns:340px 1fr; gap:1rem; align-items:stretch; margin-bottom:1rem; }

  .prob-controls, .prob-results { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1.1rem; }
  .prob-controls-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; padding-bottom:6px; border-bottom:1px solid var(--border); gap:8px; }
  .prob-section-title { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
  .prob-reset-btn {
    background:transparent; border:1px solid var(--border-bright); border-radius:3px;
    padding:4px 10px; font-family:'Rajdhani',sans-serif; font-size:0.7rem; color:var(--text);
    letter-spacing:0.06em; text-transform:uppercase; transition:all 0.2s; font-weight:600;
    cursor:pointer;
  }
  .prob-reset-btn:hover { color:var(--purple-light); border-color:var(--purple-light); }

  .prob-field { margin-bottom:13px; }
  .prob-field label { display:block; font-size:0.74rem; color:var(--text-muted); letter-spacing:0.07em; text-transform:uppercase; margin-bottom:6px; font-weight:600; }

  .stepper { display:flex; align-items:center; gap:8px; }
  .stepper-btn { width:34px; height:34px; border-radius:4px; border:1px solid var(--border-bright); background:var(--surface2); font-size:16px; color:var(--text); display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; font-weight:600; }
  .stepper-btn:hover { background:var(--surface); }
  .stepper-btn:active { border-color:var(--purple-light); background:rgba(165,87,199,0.15); }
  .stepper-val { font-family:'Cinzel',serif; font-size:1.3rem; font-weight:700; color:var(--purple-light); min-width:36px; text-align:center; text-shadow:0 0 10px rgba(165,87,199,0.25); }
  .stepper-label { font-size:0.78rem; color:var(--text-muted); font-weight:500; }

  .pill-group { display:flex; flex-wrap:wrap; gap:5px; }
  .pill { padding:7px 11px; border-radius:3px; border:1px solid var(--border-bright); background:transparent; font-family:'Rajdhani',sans-serif; font-size:0.82rem; color:var(--text); transition:all 0.15s; font-weight:500; }
  .pill:hover { background:var(--surface2); }
  .pill.active { border-color:var(--purple-light); color:var(--purple-light); background:rgba(165,87,199,0.12); font-weight:600; }

  .toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 0; }
  .toggle { width:40px; height:22px; background:var(--surface2); border:1px solid var(--border-bright); border-radius:11px; position:relative; transition:all 0.2s; flex-shrink:0; }
  .toggle.on { background:rgba(165,87,199,0.4); border-color:var(--purple-light); }
  .toggle::after { content:''; position:absolute; width:16px; height:16px; background:var(--text-muted); border-radius:50%; top:2px; left:2px; transition:all 0.2s; }
  .toggle.on::after { left:20px; background:var(--purple-light); }
  .toggle-label { font-size:0.82rem; color:var(--text); font-weight:500; }

  .result-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
  .stat-box { background:var(--surface2); border-radius:4px; padding:11px 8px; border:1px solid var(--border); text-align:center; }
  .stat-box .stat-label { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); font-family:'Cinzel',serif; margin-bottom:4px; font-weight:700; }
  .stat-box .stat-val { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:700; color:var(--purple-light); text-shadow:0 0 16px rgba(197,128,224,0.35); line-height:1; }
  .stat-box .stat-sub { font-size:0.7rem; color:var(--text-muted); margin-top:4px; font-weight:500; }
  .stat-box.highlight { border-color:rgba(165,87,199,0.5); }

  .prob-bar-wrap { margin-bottom:14px; }
  .prob-bar-label { display:flex; justify-content:space-between; font-size:0.78rem; color:var(--text); margin-bottom:5px; font-weight:500; }
  .prob-bar-track { height:8px; background:var(--surface2); border-radius:4px; border:1px solid var(--border); overflow:hidden; }
  .prob-bar-fill { height:100%; border-radius:4px; transition:width 0.4s ease; background:linear-gradient(90deg, rgba(165,87,199,0.8), var(--purple-light)); }

  .phase-list { display:flex; flex-direction:column; gap:6px; }
  .phase-row { display:flex; align-items:center; gap:8px; font-size:0.8rem; }
  .phase-name { color:var(--text); width:90px; flex-shrink:0; font-weight:500; }
  .phase-track { flex:1; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
  .phase-fill { height:100%; border-radius:3px; transition:width 0.3s; }
  .phase-val { color:var(--text); font-weight:700; min-width:42px; text-align:right; font-size:0.78rem; font-family:'Cinzel',serif; }

  .prob-right-col { display:flex; flex-direction:column; gap:1rem; min-width:0; min-height:100%; }

  /* Bellcurve */
  .bellcurve-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; flex:1 1 auto; display:flex; flex-direction:column; min-height:240px; }
  .bellcurve-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; font-weight:700; }
  .bellcurve-subtitle { font-size:0.74rem; color:var(--text-muted); margin-bottom:10px; }
  .bellcurve-wrap { position:relative; flex:1 1 auto; min-height:170px; }
  .bellcurve-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; cursor:crosshair; }
  .bellcurve-highlight {
    position:absolute; pointer-events:none; opacity:0;
    background:rgba(255,255,255,0.08); border:1px solid var(--purple-light);
    border-radius:2px; transition:opacity 0.12s;
    box-shadow:0 0 12px rgba(197,128,224,0.4);
  }
  [data-theme="light"] .bellcurve-highlight { background:rgba(78,37,98,0.08); }
  [data-theme="contrast"] .bellcurve-highlight { background:rgba(255,102,255,0.12); border-width:2px; box-shadow:0 0 0 2px var(--purple-light); }
  .bellcurve-highlight.show { opacity:1; }
  .bellcurve-tooltip {
    position:absolute; pointer-events:none;
    background:var(--surface); border:1px solid var(--border-bright); border-radius:4px;
    padding:7px 10px; font-family:'Rajdhani',sans-serif; font-size:0.78rem;
    color:var(--text); white-space:nowrap; z-index:5;
    opacity:0; transition:opacity 0.12s;
    box-shadow:0 4px 16px var(--shadow-color);
    line-height:1.3; font-weight:500;
  }
  .bellcurve-tooltip.show { opacity:1; }
  .bellcurve-tooltip .tt-dmg { font-family:'Cinzel',serif; font-weight:700; color:var(--purple-light); }
  .bellcurve-tooltip .tt-pct { font-family:'Cinzel',serif; font-weight:700; color:var(--gold); }
  .bellcurve-tooltip .tt-row { display:flex; align-items:baseline; gap:6px; }
  .bellcurve-tooltip .tt-label { color:var(--text-muted); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600; }

  /* Heatmap */
  .heatmap-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1.1rem; margin-bottom:1rem; }
  .heatmap-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; font-weight:700; }
  .heatmap-subtitle { font-size:0.74rem; color:var(--text-muted); margin-bottom:14px; font-style:italic; }
  .heatmap-table { width:100%; border-collapse:separate; border-spacing:2px; table-layout:fixed; font-size:0.74rem; }
  .heatmap-table th { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.06em; color:var(--text); font-weight:600; padding:4px 2px; text-align:center; white-space:nowrap; }
  .heatmap-table th.row-head { text-align:right; padding-right:8px; width:42px; }
  .heatmap-table td { padding:0; }
  .heatmap-cell { width:100%; aspect-ratio:1.4 / 1; min-height:30px; display:flex; align-items:center; justify-content:center; font-size:0.76rem; font-weight:700; transition:transform 0.15s, box-shadow 0.15s; border-radius:3px; cursor:pointer; }
  .heatmap-cell:hover { transform:scale(1.05); z-index:2; position:relative; box-shadow:0 0 0 2px var(--text); }
  .heatmap-legend { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:0.72rem; color:var(--text-muted); flex-wrap:wrap; }
  .hm-grad { height:8px; flex:1; min-width:80px; border-radius:3px; background:linear-gradient(90deg,#2c1654,#6b21a8,#a855f7,#f59e0b,#22c55e); }

  /* ══ GAME HISTORY ══ */
  .games-header { text-align:center; margin-bottom:1.4rem; }
  .games-header h1 { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:700; letter-spacing:0.1em; color:var(--gold); text-shadow:0 0 30px rgba(224,188,92,0.25); }
  .games-header p { font-size:0.78rem; color:var(--text-muted); letter-spacing:0.13em; text-transform:uppercase; margin-top:0.25rem; font-weight:500; }

  .games-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:1rem; }
  .games-stat { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:14px 8px; text-align:center; }
  .games-stat-label { font-size:0.6rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-muted); font-family:'Cinzel',serif; margin-bottom:4px; font-weight:700; }
  .games-stat-val { font-family:'Cinzel',serif; font-size:1.4rem; font-weight:700; color:var(--gold); }

  .games-empty { background:var(--surface); border:1px dashed var(--border-bright); border-radius:5px; padding:2.5rem 1rem; text-align:center; color:var(--text-muted); font-style:italic; font-size:0.9rem; }
  .games-empty span { display:block; font-size:30px; margin-bottom:8px; opacity:0.6; }

  .game-card { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:1rem; margin-bottom:0.7rem; transition:border-color 0.2s; }
  .game-card.expanded { border-color:var(--gold); }
  .game-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; flex-wrap:wrap; }
  .game-date { font-size:0.74rem; color:var(--text); letter-spacing:0.08em; text-transform:uppercase; font-family:'Cinzel',serif; font-weight:600; }
  .game-rounds { font-size:0.7rem; color:var(--text-muted); font-weight:500; }
  .game-players { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
  .game-player { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .game-player.right { text-align:right; align-items:flex-end; }
  .game-player-row { display:flex; align-items:center; gap:8px; min-width:0; }
  .game-player.right .game-player-row { flex-direction:row-reverse; }
  .game-player-icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .game-player-icon svg { width:22px; height:22px; }
  .game-player-name { font-family:'Cinzel',serif; font-size:1rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .game-player-faction { font-size:0.74rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
  .game-vs { font-family:'Cinzel',serif; font-size:0.72rem; color:var(--text-muted); letter-spacing:0.1em; font-weight:600; }
  .game-score { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); justify-content:center; font-family:'Cinzel',serif; font-size:1.4rem; font-weight:700; }
  .game-score .s1 { color:var(--red-light); }
  .game-score .s2 { color:var(--blue-light); }
  .game-score .sep { color:var(--text-muted); font-size:1rem; }
  .game-result { text-align:center; margin-top:6px; }
  .game-actions { display:flex; gap:6px; margin-top:10px; }
  .game-mini-btn { flex:1; padding:7px 8px; font-size:0.72rem; background:transparent; border:1px solid var(--border-bright); border-radius:3px; color:var(--text); font-family:'Rajdhani',sans-serif; letter-spacing:0.06em; text-transform:uppercase; transition:all 0.2s; cursor:pointer; font-weight:600; }
  .game-mini-btn:hover { background:var(--surface2); }
  .game-mini-btn.active { color:var(--gold); border-color:var(--gold); background:rgba(224,188,92,0.1); }
  .game-mini-btn.danger:hover { color:var(--red-light); border-color:var(--red); background:rgba(212,63,46,0.1); }
  .game-details { overflow:hidden; max-height:0; transition:max-height 0.4s ease; }
  .game-card.expanded .game-details { max-height:2200px; }
  .game-details-inner { padding-top:1rem; margin-top:1rem; border-top:1px solid var(--border); }

  /* ══ FACTION METRICS ══ */
  .metrics-header { text-align:center; margin-bottom:1.4rem; }
  .metrics-header h1 { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:700; letter-spacing:0.1em; color:var(--green-light); text-shadow:0 0 30px rgba(82,224,138,0.25); }
  .metrics-header p { font-size:0.78rem; color:var(--text-muted); letter-spacing:0.13em; text-transform:uppercase; margin-top:0.25rem; font-weight:500; }

  .metrics-controls { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; margin-bottom:1rem; }
  .metrics-controls-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .metrics-controls-row + .metrics-controls-row { margin-top:10px; }
  .metrics-controls label { font-size:0.7rem; color:var(--text-muted); letter-spacing:0.07em; text-transform:uppercase; font-weight:600; }
  .metrics-limited-note {
    background:rgba(224,188,92,0.08); border:1px solid var(--gold);
    border-radius:5px; padding:8px 12px; margin-bottom:1rem;
    color:var(--gold); font-size:0.82rem; font-family:'Rajdhani',sans-serif;
  }

  .metrics-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin-bottom:1rem; }
  .metric-card { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:14px 12px; text-align:center; }
  .metric-card .metric-label { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; font-weight:700; }
  .metric-card .metric-val { font-family:'Cinzel',serif; font-size:1.7rem; font-weight:700; color:var(--green-light); line-height:1; }
  .metric-card .metric-sub { font-size:0.72rem; color:var(--text-muted); margin-top:4px; font-weight:500; }

  .metrics-table-section { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1rem; margin-bottom:1rem; overflow-x:auto; }
  .metrics-section-title { font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); margin-bottom:9px; font-weight:700; }
  .metrics-table { width:100%; border-collapse:collapse; font-size:0.85rem; min-width:520px; }
  .metrics-table th { color:var(--text-muted); font-weight:600; padding:6px 8px; text-align:left; letter-spacing:0.06em; text-transform:uppercase; font-size:0.66rem; border-bottom:1px solid var(--border); }
  .metrics-table th.num { text-align:center; }
  .metrics-table td { padding:8px; border-top:1px solid var(--border); color:var(--text); }
  .metrics-table td.num { text-align:center; font-family:'Cinzel',serif; font-weight:600; }
  .metrics-faction { display:flex; align-items:center; gap:8px; }
  .metrics-faction .f-icon { width:22px; height:22px; flex-shrink:0; }
  .metrics-faction .f-icon svg { width:20px; height:20px; }
  .metrics-table.by-round { table-layout:fixed; min-width:480px; }
  .metrics-table.by-round col.col-opp { width:36%; }
  .metrics-table.by-round col.col-round { width:12.8%; }
  .winrate-bar { display:inline-block; width:60px; height:6px; background:var(--surface2); border-radius:3px; vertical-align:middle; margin-right:6px; overflow:hidden; }
  .winrate-fill { display:block; height:100%; background:var(--green-light); border-radius:3px; }

  /* W/L/D stacked bar */
  .wld-bar { display:inline-flex; height:18px; min-width:100px; max-width:140px; width:100%; border-radius:3px; overflow:hidden; border:1px solid var(--border); background:var(--surface2); }
  .wld-seg { display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:0.65rem; font-weight:700; color:#000; min-width:18px; }
  .wld-seg.wld-w { background:var(--green-light); }
  .wld-seg.wld-l { background:var(--red-light); }
  .wld-seg.wld-d { background:var(--gold); }
  [data-theme="contrast"] .wld-seg { color:#000; }

  /* VP gauge — opposing horizontal bars */
  .vp-gauge { display:inline-flex; flex-direction:column; gap:3px; min-width:120px; max-width:160px; width:100%; }
  .vp-gauge-row { display:flex; align-items:center; gap:6px; }
  .vp-gauge-track { display:block; flex:1; height:8px; background:var(--surface2); border-radius:2px; overflow:hidden; border:1px solid var(--border); }
  .vp-gauge-fill { display:block; height:100%; border-radius:2px; transition:width 0.4s ease; }
  .vp-gauge-fill.vp-gauge-mine { background:linear-gradient(90deg, var(--green), var(--green-light)); }
  .vp-gauge-fill.vp-gauge-opp { background:linear-gradient(90deg, var(--red), var(--red-light)); }
  .vp-gauge-num { font-family:'Cinzel',serif; font-size:0.75rem; font-weight:700; min-width:32px; text-align:right; }
  .vp-gauge-num.mine { color:var(--green-light); }
  .vp-gauge-num.opp { color:var(--red-light); }

  /* Overall summary chart */
  .overall-summary {
    display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:center;
    background:var(--surface); border:1px solid var(--border); border-radius:6px;
    padding:1rem 1.2rem; margin-bottom:1rem;
  }
  .summary-donut { display:flex; align-items:center; gap:1rem; }
  .donut-svg { display:block; flex-shrink:0; }
  .donut-svg .donut-pct { font-family:'Cinzel',serif; font-size:22px; font-weight:700; fill:var(--gold); text-anchor:middle; dominant-baseline:middle; }
  .donut-svg .donut-label { font-family:'Rajdhani',sans-serif; font-size:9px; font-weight:600; fill:var(--text-muted); text-anchor:middle; letter-spacing:0.1em; text-transform:uppercase; }
  .summary-legend { display:flex; flex-direction:column; gap:6px; font-size:0.85rem; }
  .leg-row { display:flex; align-items:center; gap:8px; color:var(--text); font-weight:500; }
  .leg-row .leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .leg-row strong { font-family:'Cinzel',serif; font-weight:700; margin-left:auto; min-width:20px; text-align:right; }

  .summary-vp { display:flex; flex-direction:column; gap:8px; min-width:0; }
  .summary-vp-title { font-family:'Cinzel',serif; font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
  .big-vp { display:flex; flex-direction:column; gap:6px; }
  .big-vp-row { display:flex; align-items:center; gap:10px; }
  .big-vp-label { font-family:'Cinzel',serif; font-size:0.7rem; font-weight:700; color:var(--text-muted); width:34px; letter-spacing:0.1em; text-transform:uppercase; }
  .big-vp-track { flex:1; height:14px; background:var(--surface2); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
  .big-vp-fill { height:100%; border-radius:3px; transition:width 0.4s ease; }
  .big-vp-fill.mine { background:linear-gradient(90deg, var(--green), var(--green-light)); }
  .big-vp-fill.opp { background:linear-gradient(90deg, var(--red), var(--red-light)); }
  .big-vp-num { font-family:'Cinzel',serif; font-size:1rem; font-weight:700; min-width:46px; text-align:right; }
  .big-vp-num.mine { color:var(--green-light); }
  .big-vp-num.opp { color:var(--red-light); }
  .big-vp-diff { font-family:'Rajdhani',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.05em; margin-top:4px; text-align:right; }

  @media (max-width:600px) {
    .overall-summary { grid-template-columns:1fr; gap:1rem; }
    .summary-donut { justify-content:center; }
    .vp-gauge { min-width:100px; }
    .wld-bar { min-width:80px; }
  }

  /* Diagnostic scatter — Primary vs Secondary per game */
.scatter-section { padding:1rem 1.2rem; }
.scatter-help {
  font-size:0.78rem; color:var(--text-muted); margin-bottom:10px;
  line-height:1.4;
}
.scatter-layout {
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start;
}
.scatter-canvas-wrap {
  width:100%; max-width:320px; aspect-ratio:1/1; flex-shrink:0;
}
.scatter-svg {
  display:block; width:100%; height:auto;
  font-family:'Rajdhani',sans-serif;
}

.scatter-bg { fill:var(--surface2); stroke:var(--border); stroke-width:1; }
.scatter-grid { stroke:var(--grid-line, rgba(255,255,255,0.08)); stroke-width:1; }
.scatter-tick {
  font-size:9px; font-weight:600;
  fill:var(--grid-text, var(--text-muted));
  letter-spacing:0.04em;
}
.scatter-axis-label {
  font-family:'Cinzel',serif;
  font-size:9px; font-weight:700;
  fill:var(--text-muted);
  letter-spacing:0.12em; text-transform:uppercase;
}
.scatter-diagonal {
  stroke:var(--gold); stroke-width:1; stroke-dasharray:3 4; opacity:0.35;
}
.scatter-target { fill:none; stroke:var(--gold); stroke-width:1.5; opacity:0.7; }
.scatter-target-dot { fill:var(--gold); opacity:0.9; }

.scatter-dot {
  stroke:var(--canvas-bg, #0D0D0F);
  stroke-width:1.2;
  cursor:default;
  transition:r 0.15s, opacity 0.15s;
}
.scatter-dot:hover { r:7; }
.scatter-dot-W { fill:var(--green-light); }
.scatter-dot-L { fill:var(--red-light); }
.scatter-dot-D { fill:var(--gold); }

.scatter-side {
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}
.scatter-counts {
  display:flex; flex-direction:column; gap:6px;
  font-size:0.85rem;
}
.scatter-count {
  display:flex; align-items:center; gap:8px;
  color:var(--text); font-weight:500;
}
.scatter-count .leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.scatter-count strong {
  font-family:'Cinzel',serif; font-weight:700;
  margin-left:auto; min-width:20px; text-align:right;
}
.scatter-insight {
  font-size:0.82rem; color:var(--text); line-height:1.45;
  padding:10px 12px; border-left:2px solid var(--gold);
  background:rgba(224,188,92,0.06); border-radius:0 3px 3px 0;
}
.scatter-insight strong { color:var(--gold); font-weight:700; }
.scatter-note {
  font-size:0.72rem; color:var(--text-muted); font-style:italic;
}
.scatter-empty {
  font-size:0.85rem; color:var(--text-muted); font-style:italic;
  padding:1rem; text-align:center;
}

@media (max-width:600px) {
  .scatter-layout { grid-template-columns:1fr; gap:1rem; }
  .scatter-canvas-wrap { max-width:100%; margin:0 auto; }
}

  /* ══ MOBILE RESPONSIVE ══ */
  @media (max-width: 720px) {
    .prob-grid { grid-template-columns:1fr; }
  }
  @media (max-width: 600px) {
    .app { padding:1rem 0.75rem; }
    .menu-brand { padding: 0 8px; font-size:0.72rem; }
    .tracker-header h1, .prob-header h1, .games-header h1, .metrics-header h1 { font-size:1.3rem; }
    .players { grid-template-columns:1fr; gap:0.7rem; }
    .player-card { padding:0.9rem; }
    .score-num { font-size:2.6rem; min-width:60px; }
    .score-btn { width:48px; height:48px; font-size:24px; }
    .score-display { gap:18px; }
    .cp-btn { width:40px; height:40px; font-size:19px; }
    .cat-btn { width:40px; height:40px; font-size:18px; }
    .cat-row { padding:4px 0; }
    .cat-btns { gap:8px; }
    /* Stratagems toolbar: stack the controls row below the faction filter so they don't crowd */
    .strats-toolbar { gap:6px; }
    .strats-toolbar .strats-faction-filter,
    .strats-faction-dropdown-wrap { width:100%; flex-basis:100%; }
    .strats-toolbar-controls { width:100%; flex-wrap:nowrap; }
    .strats-toolbar-controls .strats-sort { flex:1 1 0; min-width:0; }
    .strats-more-btn { flex:0 0 auto; }
    /* Advanced-filter rows go column-direction on phone so labels sit above chip rows */
    .strats-more-row { flex-direction:column; gap:5px; }
    .strats-more-label { padding-top:0; }
    .round-selector { padding:0.5rem; gap:5px; flex-wrap:nowrap; }
    .round-selector-label { display:none; }
    .round-pill { padding:8px 6px; min-width:0; flex:1; font-size:0.88rem; min-height:48px; }
    .round-pill .pill-meta { font-size:0.62rem; }
    .leader-badge { font-size:0.66rem; padding:4px 10px; }
    .games-stats { grid-template-columns:repeat(2,1fr); }
    .heatmap-table { font-size:0.65rem; }
    .heatmap-cell { font-size:0.65rem; min-height:26px; }
    .heatmap-table th { font-size:0.58rem; }
    .heatmap-table th.row-head { width:32px; padding-right:4px; }
    .stat-box .stat-val { font-size:1.3rem; }
    .chart-header { flex-direction:column; align-items:flex-start; }
    .chart-tabs { width:100%; justify-content:flex-start; gap:6px; }
    .chart-tab { flex:1; text-align:center; min-height:40px; padding:10px 12px; font-size:0.82rem; display:flex; align-items:center; justify-content:center; }
    .theme-toggle .label { display:none; }
    .theme-toggle { padding: 0 10px; min-width:44px; }
    .round-nav-btn { min-height:48px; font-size:0.82rem; }
    .action-btn { min-height:48px; font-size:0.78rem; }
    .game-mini-btn { min-height:40px; font-size:0.74rem; }
    .stepper-btn { width:40px; height:40px; }
    .pill { padding:9px 12px; min-height:40px; }
    .faction-trigger { min-height:44px; padding:8px 26px 8px 12px; }
    .faction-option { padding:11px 14px; min-height:44px; }
    .br-toggle { width:48px; height:28px; }
    .br-toggle::after { width:22px; height:22px; }
    .br-toggle.on::after { left:23px; }
  }
  @media (max-width: 380px) {
    .menu-brand { display:none; }
    .player-card { padding:0.8rem; }
    .score-num { font-size:2.2rem; }
    .games-stats { grid-template-columns:1fr 1fr; }
    .heatmap-table { font-size:0.6rem; }
    .heatmap-cell { font-size:0.6rem; min-height:24px; }
    .heatmap-table th.row-head { width:28px; }
  }

/* iOS Safari auto-zooms any input/textarea whose computed font-size is < 16px
   on focus, and doesn't zoom back out. Force 16px on touch devices so the
   page stays at its natural width when the user taps into a field. Desktop
   appearance is unchanged. */
  @media (hover: none) and (pointer: coarse) {
    .io-textarea,
    .form-input,
    textarea.form-input,
    .strats-search-input {
    font-size: 16px;
    }
  }
/* Library accordion overflow fix (iPhone 12 etc.) */
.strats-group-label {
  flex: 1;
  min-width: 0;
}
.strats-group-label-text {
  flex: 1;
  min-width: 0;
}
.strats-group-count {
  flex-shrink: 0;
}
.strats-card-name,
.strats-card-sublabel,
.strats-card-flavour,
.strats-field-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Family dividers above each batch of groups */
.strats-family-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.strats-cards-list > .strats-family-divider:first-child {
  margin-top: 0;
}
.strats-family-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-bright), transparent);
}
.strats-family-divider .strats-family-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-transform: none;
}