/* GRID review enhancements. One exception reaches ordinary games: the
   .grid-map-overlay rules, since every review's maps draw the shared
   structure layer through that element (2026-10-01). */
/* Keep cooldown badges beneath the map panel when it slides over the board. */
.gi-board:has(.grid-row) { isolation: isolate; }
.map-container.grid-map .gi-pit { display: none; }
/* Every review: the map stays a true square in a short pane (it shrinks to
   160px, then the panel scrolls) so the background, the SVG structure layer
   and the champion pins stay registered. An ordinary review used to let the
   flex column squash the box, which cropped the background under the pins. */
.map-container { flex: none; }
.grid-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.grid-map-overlay text { font-size: max(26px, calc(10px / var(--gi-map-scale, .32))); }
.grid-map-ward [data-ward-lifetime] { visibility: hidden; pointer-events: none; }
.grid-map-overlay .grid-map-ward:hover [data-ward-lifetime],
.grid-map-ward.grid-ward-hover [data-ward-lifetime] { visibility: visible; }
.grid-import { line-height: 1.5; }
.grid-import > button { width: 100%; margin: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-import progress:not([hidden]) { display: block; width: 100%; accent-color: var(--accent); }
.grid-import-status { color: var(--muted); overflow-wrap: anywhere; }

/* Items ⇄ abilities lives on the Game Info tab itself (Icon Strip design):
   hovering the tab reveals the chip, clicking the active tab (or the chip)
   switches modes. The chip is a child of the tab so it shares its hover. */
.notes-tabs .tab[data-tab="info"] { position: relative; }
.grid-mode-chip { display: none; }
.notes-tabs .tab:hover .grid-mode-chip:not([hidden]) { display: flex; }
.grid-mode-chip {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px; z-index: 5;
  align-items: center; gap: 6px; height: 20px; padding: 0 8px;
  background: var(--surface-raised); border: 1px solid var(--accent-border); border-top: none;
  box-shadow: var(--shadow-menu, 0 8px 24px rgba(0, 0, 0, .5));
  font: 400 9px/1 var(--font-mono, monospace); letter-spacing: .04em; white-space: nowrap; color: var(--text-faint); cursor: pointer;
}
.grid-mode-chip .on { color: var(--text); font-weight: 600; }
.grid-mode-chip .grid-mode-sep { color: var(--text-faint); }

/* Only the ten live map pins need compositor layers. No CSS transition:
   playback, seeks and jumps must land at the exact current GRID position. */
.grid-map .map-pin { left: 0; top: 0; will-change: transform; }

/* Items mode keeps its small badges exactly as before. */
.gi-abilities { display: none; }
.grid-row .gi-spell, .grid-row .gi-slot { position: relative; }
.grid-cd, .grid-stock, .grid-key { position: absolute; pointer-events: none; font: 600 10px/1 monospace; text-shadow: 0 1px 2px #000, 1px 0 2px #000; }
.grid-cd { inset: 0; display: grid; place-items: center; color: #fff; z-index: 1; }
.grid-cooling { box-shadow: inset 0 0 0 40px #0008; }
.grid-stock { bottom: -3px; right: -3px; padding: 1px 2px; background: #171925; color: #fff; z-index: 2; }
.grid-stock:empty { display: none; }
.grid-key { display: none; }
.grid-bar { display: none; }
.grid-unlearned { filter: grayscale(1); box-shadow: inset 0 0 0 60px #11131d99; }
.grid-row .gi-spell .grid-cd { font-size: 8px; }
.grid-row .gi-slot .grid-cd { font-size: 9px; }
.gi-role { display: none; font: 400 10px/1 var(--font-mono, monospace); color: var(--text-faint); white-space: nowrap; }

/* Abilities mode — the Icon Strip design (handoff 2, 2026-09-21): a 48px row of
   30px tiles — portrait · Q/W/E/R · divider · D/F · trinket · role. Cooling art
   dims to ~55% grayscale beneath a 12px count and a 2px hairline that drains
   from the run's peak (accent for abilities, gold for summoners + trinket). */
.gi-board[data-mode="abilities"] .gi-items,
.gi-board[data-mode="abilities"] .gi-stat,
.gi-board[data-mode="abilities"] .gi-runes,
.gi-board[data-mode="abilities"] .gi-recall,
.gi-board[data-mode="abilities"] .gi-name { display: none; }
.gi-board[data-mode="abilities"] .gi-abilities { display: flex; gap: 4px; }
.gi-board[data-mode="abilities"] .gi-role { display: block; }
.gi-board[data-mode="abilities"] .gi-row {
  --hud-tile: 30px;
  grid-template-columns: 34px auto auto auto var(--hud-tile) minmax(8px, 1fr);
  column-gap: 8px; box-sizing: border-box; height: 48px; padding: 0 8px;
}
.gi-board[data-mode="abilities"] .gi-row:not(.you):hover { background: var(--surface-hover); }
.gi-board[data-mode="abilities"] .gi-row > * { grid-row: 1; }
.gi-board[data-mode="abilities"] .gi-row > .gi-portwrap { grid-column: 1; }
.gi-board[data-mode="abilities"] .gi-row > .gi-mid { grid-column: 2; margin-left: 6px; }
.gi-board[data-mode="abilities"] .gi-row > .gi-idiv { grid-column: 3; display: block; width: 1px; height: 22px; margin: 0 2px; background: var(--border); }
.gi-board[data-mode="abilities"] .gi-row > .gi-spells { grid-column: 4; flex-direction: row; gap: 4px; }
.gi-board[data-mode="abilities"] .gi-row > .gi-trinket { grid-column: 5; }
.gi-board[data-mode="abilities"] .gi-row > .gi-role { grid-column: 6; justify-self: end; }
.gi-ability { position: relative; box-sizing: border-box; background: #000 center/cover; border: 1px solid var(--border); overflow: hidden; }
.gi-board[data-mode="abilities"] .gi-row :is(.gi-ability, .gi-spell, .gi-trinket) {
  width: var(--hud-tile); height: var(--hud-tile); flex: none; overflow: hidden;
  border-color: var(--border); background-color: #000; opacity: 1;
}
.gi-board[data-mode="abilities"] .gi-row .gi-trinket { border-color: var(--gold); }
.gi-board[data-mode="abilities"] .gi-row .grid-key { display: block; left: 2px; top: 1px; font: 600 8px/1 var(--font-mono, monospace); color: rgba(231, 233, 242, .85); text-shadow: 0 1px 1px #000; z-index: 2; }
.gi-board[data-mode="abilities"] .gi-row .grid-cd { font: 700 12px/1 var(--font-mono, monospace); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
/* Dim the ART only: a backdrop layer under the count, never a filter on the tile,
   so the count and the hairline keep their full strength. */
.gi-board[data-mode="abilities"] .gi-row .grid-cooling { box-shadow: none; border-color: var(--border); }
/* After the cooling rule: the trinket keeps its gold outline while it cools. */
.gi-board[data-mode="abilities"] .gi-row .gi-trinket.grid-cooling { border-color: var(--gold); }
.gi-board[data-mode="abilities"] .gi-row .grid-cooling::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); }
.gi-board[data-mode="abilities"] .gi-row .grid-cooling .grid-bar { display: block; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); z-index: 2; }
.gi-board[data-mode="abilities"] .gi-row :is(.gi-spell, .gi-trinket).grid-cooling .grid-bar { background: var(--gold); }
.gi-board[data-mode="abilities"] .gi-row :is(.gi-ability, .gi-spell) .grid-stock { display: none; }
.gi-board[data-mode="abilities"] .gi-row .gi-trinket .grid-stock { right: 0; bottom: 0; padding: 0 2px; border: none; background: rgba(0, 0, 0, .8); font: 400 8px/1.4 var(--font-mono, monospace); color: var(--text); text-shadow: none; }