/* SPAM Meta: the card view (site/js/dialogs.js; DESIGN.md "Card view"). A full-screen information view, not a popup: the
   page behind is blurred and darkened (the backdrop), and the content sits straight on it in an open layout, with no
   panel, border, radius or shadow around it. No printed title or section headings (the card face and the game dressing
   say what each part is). One narrow composition in the card's own proportions, centred with wide air above and below:
   the card on the left (the site's card tile, then its resistances and the owned toggle) and its kit beside it in a
   reading column that never stretches to the screen, in the game card's own dress, groups ruled apart by hairlines; then
   the Meta section and, for a card the last patch changed, the Modifications section, each under a hairline. Values from
   DESIGN.md's closed scales and its game-kit and view tokens. */

/* the native modal <dialog> stays (focus, inert page, Escape, the accessible name); it is the whole viewport, transparent */
dialog.card-dlg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
/* the backdrop is drawn at its final state (blur and shade) and only its opacity ever animates (cardmotion.js); the blur is
   functional: it takes the page out of focus, and no text is ever set on a blurred layer of its own */
dialog.card-dlg::backdrop { background: var(--view-shade); -webkit-backdrop-filter: blur(var(--view-blur)); backdrop-filter: blur(var(--view-blur)); }
/* a control brought into view by the keyboard never stops under the close control */
dialog.card-dlg .dlg-scroll { height: 100%; max-height: none; scroll-padding-block: 72px 24px; }
/* the composition: a 320px card column, 48px, a 480px reading column (848px in all, plus the 24px side insets), 96px of
   air above it and 144px below the last section */
.cd { display: grid; width: 100%; max-width: 896px; margin-inline: auto; padding: 96px 24px 144px; }

/* the close control: a plain round icon in the viewport's top-right corner (beside the scrollbar), never on the content
   column at 1440. Its quiet disc is the shade of the backdrop, so text scrolling under it on narrower screens never shows
   through, and it reads as part of the ground rather than a button on a frame. */
dialog.card-dlg .close { top: 16px; right: 24px; border: 0; background: var(--kit-shade); color: var(--ink-2); }
dialog.card-dlg .close:hover { background: var(--panel-hi); color: var(--ink); }
dialog.card-dlg .close:active { background: var(--socket); }

/* ---------------------------------------------------------------- open and close (site/js/cardmotion.js)
   The card dialog's enter and exit are Web Animations (opacity and transform only), not the .on transition of the other
   dialogs. The flying card is a ghost in the top layer, at the dialog card's final place: two faces back to back (the
   pressed tile, then the card as the dialog draws it), turned and moved by one transform. While it flies, the real card
   and the tile's art stay mounted but invisible. */
dialog.card-dlg, dialog.card-dlg.on { opacity: 1; transform: none; transition: none; }
#card-ghost { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; pointer-events: none; }
.cg-turn { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cg-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cg-back { transform: rotateY(180deg); }
/* a thumbnail (chip, mini card, tier icon) flies as its art on the card frame */
.cg-thumb { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--u) * 7); border: calc(var(--u) * 1.4) solid var(--card-edge); background: var(--card-edge); box-shadow: var(--shadow); }
.cg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* the back of the turning card: the game's own card back on the same frame (radius 7%, edge 1.4% of the card width) */
.cg-cardback { background: var(--panel); }
.cg-cardback img { object-position: center; }
.cg-away { visibility: hidden !important; }

/* ---------------------------------------------------------------- the card in hand (site/js/cardtilt.js)
   The view's big card, the hero of the 3D cards (the shared layers are in cards.css, "cards in hand"). The tile (.cell)
   takes the pointer and never moves, so the hit area is stable; the card itself takes no pointer events (it is a plain
   image of the card). While it is held (.tilt-on) its wrapper is a 3D context turned by one transform written each frame;
   at rest the class and the transform are gone and the card is drawn exactly as the tile draws it. Not attached with
   reduced motion. */
.cd-art .cell.ct { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cd-art .cell.ct .gc { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cd-art .cell.ct { cursor: grab; } }
.cd-art .cell.ct.ct-drag { cursor: grabbing; }
.ct-back { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.cw.tilt-on .ct-back { visibility: visible; }
/* in a turn every plane of the face hides its back, so the face is never seen mirrored through the S back */
.cw.tilt-on .gc-in > *, .cw.tilt-on .gc-in::before, .ct-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the card's back, facing the other way: the game's own back on the card frame, as in the open flight (cg-thumb). The card
   has no thickness (owner, 2026-10-18: "they must stay cards"): no slab, no edge, nothing between the face and the back. */
.ct-back { transform: rotateY(180deg); }

/* ---------------------------------------------------------------- the card: card left, kit right
   The card is the hero: a 320px column; the kit's narrow reading column starts level with the card's top. */
.cd-body { display: grid; grid-template-columns: 320px minmax(0, 480px); justify-content: center; gap: 48px; align-items: start; }
/* the card column stays in view while the kit scrolls past it (inside the view's own scroller): it rises 48px, then holds */
.cd-art { position: sticky; top: 48px; display: grid; gap: 16px; }
/* the six resistances hang under the card, clear of its rarity gem (which overhangs the tile's bottom padding); the owned
   toggle closes the column a step further down; both keep to the card frame's width (inside the tile's 6px padding) */
.cd-art > .ress { margin: 8px 6px 0; }
.cd-own { display: grid; gap: 4px; justify-items: stretch; margin: 8px 6px 0; }
.cd-hint { color: var(--muted); font: 600 14px/1.4 var(--text); text-align: center; }
.ress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.res { display: flex; align-items: center; gap: 8px; padding: 4px 12px; min-height: 36px; border-radius: 8px; background: var(--socket); box-shadow: var(--sunken); font: 400 16px/1 var(--display); white-space: nowrap; }
.res i { width: 20px; height: 20px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* ---------------------------------------------------------------- the kit, in the game card's own dress
   Read like a page, not stacked boxes: each entry is headed by a ribbon as the card face draws it (an ability on the
   client's ability banner with orb, name and cooldown sprite; a passive between the card's rarity wings, ">> NAME <<"),
   its text straight under it on the ground; entries sit 24px apart, and the groups (abilities, passives, talents) are
   ruled apart by a hairline with 32px either side. Ribbon names are capitals with the card's hard outline. */
/* the first ribbon's top lines up with the card frame's (the tile's 6px padding) */
.cd-kit { display: grid; gap: 32px; min-width: 0; padding-top: 6px; }
.cd-g { display: grid; gap: 16px; min-width: 0; }
.cd-g + .cd-g { padding-top: 32px; border-top: 1px solid var(--line); }
.cd-g-b { display: grid; gap: 24px; }
.cd-e { display: grid; gap: 8px; min-width: 0; }
/* the text lines up under the ribbon's name side, a step in from the banner's slanted ends */
.kit-e > :not(.kit-rib) { margin-inline: 16px; }

.kit-rib { position: relative; display: grid; align-items: center; min-height: 44px; }
.kit-rib h4 { min-width: 0; color: var(--ink); font: 400 18px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; text-shadow: var(--kit-ol); overflow-wrap: break-word; }
/* an ability: the client's ability banner (9-slice, so its slanted ends keep their shape at any width) */
.kit-ab { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; padding: 0 16px; }
.kit-ab::before { content: ""; position: absolute; inset: 0; border-style: solid; border-width: 0 24px;
  border-image: url("../assets/cards/kit/card_ability_active.webp") 0 40 fill / 0 24px stretch; opacity: var(--kit-banner); pointer-events: none; }
.kit-ab > * { position: relative; }
.kit-ab h4 { text-align: center; }
.kit-orb { width: 28px; height: 28px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.kit-cd { display: grid; place-items: center; width: 28px; height: 30px; background: url("../assets/cards/kit/card_cooldown.webp") center / contain no-repeat;
  color: var(--ink); font: 400 16px/1 var(--display); text-shadow: var(--kit-ol); }
/* a passive or a talent: the card's rarity wings either side of the name */
/* flex, not grid: the name keeps its words whole and the wings give way first (down to 16px each) */
.kit-wing { display: flex; justify-content: center; gap: 8px; }
.kit-wing h4 { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; max-width: calc(100% - 48px); text-align: center; }
.kit-w { flex: 0 1 88px; min-width: 16px; height: 22px; background-size: 100% 100%; background-repeat: no-repeat; }
.kit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.cd-e-d { color: var(--ink-2); white-space: pre-line; }
/* what the game text leaves out (cards.json `hidden`): one sentence per line under it, ruled on its left so it never
   reads as the game's own words; a choice lists its options one per row ("or" in Dusk Lavender); element words and
   statuses are drawn by the card-text renderer (cards.css, "Card text") */
.cd-e-x { display: grid; gap: 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-2); text-wrap: pretty; }
.hx-opts { display: grid; gap: 4px; }
.hx-opts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); }
.hx-or { color: var(--muted); }
.hx-st { font-weight: 700; color: var(--ink); }
.cd-e-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cd-e-t { color: var(--muted); font: 600 14px/1.4 var(--text); }
.cd-none { color: var(--muted); }

/* where the ruled lines come from: one quiet line under the abilities, with a sample of the rule */
.hx-note { display: flex; align-items: center; gap: 8px; margin-inline: 16px; color: var(--muted); font: 600 14px/1.4 var(--text); }
.hx-note-rule { flex: none; width: 2px; height: 16px; background: var(--line); }

/* ---------------------------------------------------------------- talent picker (DESIGN.md "Talent picker")
   Open on the ground like the rest of the view: the one rule, three talent tabs side by side (the controls keep their
   tiles), the selected one ringed in cyan, the suggested one tagged; under them, the selected talent's name and text as
   plain reading, in panes that share a grid cell, so the area keeps the longest text's height and nothing moves when the
   selection changes (200ms cross-fade). */
.tp { display: grid; gap: 8px; }
.tp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp-tab { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: center; gap: 4px 8px; min-height: 64px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: var(--kit-shade); color: var(--ink-2); text-align: left; cursor: pointer;
  transition: background-color var(--t-state) var(--curve), color var(--t-state) var(--curve); }
.tp-ico { grid-row: 1 / span 2; align-self: center; width: 24px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.tp-name { align-self: end; min-width: 0; font: 400 16px/1.15 var(--display); letter-spacing: .01em; overflow-wrap: break-word; }
.tp-rec { grid-column: 2; justify-self: start; align-self: start; }
.tp-tab:not(:has(.tp-rec)) .tp-name { grid-row: 1 / span 2; align-self: center; }
.tp-pc { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; }
.tp-name .mu { vertical-align: -2px; margin-top: 0; cursor: inherit; }      /* inside the name, after it: the tab is the control */
.mu-tag .ico { width: 14px; height: 14px; }
.tp-pc .pglyph { margin: 0; }
/* the suggested talent keeps its own mark whatever is selected: a 1px Field Edge inner edge (never cyan); hover lifts a
   tile to Panel Violet; the selected one is Panel Lifted with the 2px cyan inner ring */
.tp-tab.rec { box-shadow: inset 0 0 0 1px var(--edge); }
.tp-tab:hover { background: var(--panel); color: var(--ink); }
.tp-tab:active { background: var(--socket); }
.tp-tab[aria-selected="true"] { background: var(--panel-hi); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.tp-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.tp-tab.rec:focus-visible { box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.tp-tab[aria-selected="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.tp-detail { display: grid; padding: 8px 16px 0; }
/* the outgoing text goes at once and the new one fades in (200ms), so two texts never overlap */
.tp-pane { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; min-width: 0; opacity: 0; visibility: hidden; }
.tp-pane.on { opacity: 1; visibility: visible; transition: opacity var(--t-fade) var(--curve); }
.tp-pane-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tp-pane .cd-e-d { color: var(--ink); }

/* ---------------------------------------------------------------- the Meta section, under a hairline across the column */
.cd-meta { display: grid; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.cd-meta-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.cd-meta-h h3 { font-size: 22px; }
/* the data notice qualifies the numbers right under it */
.cd-meta > .dnote { margin-bottom: -8px; }
.cd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* with the card tier: three cells, the card's own tier first and widest (its caption holds the range and the place) */
.cd-stats.three { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.cd-stat { min-height: 104px; }
/* the card tier cell (dialogs.js cardTierCell), a stat as its neighbours: the tier chip beside the strength, the chip at the
   figure's height; a card with not enough data: a dash chip and the words in the body type */
.cd-ct-v { display: flex; align-items: center; gap: 8px; }
.cd-ct-v .ct-tchip { min-width: 36px; height: 28px; font-size: 18px; }
.cd-ct-few { color: var(--ink-2); font: 600 16px/1.3 var(--text); }

/* ---------------------------------------------------------------- Modifications: what the last patch changed, at the foot
   of the view under a hairline like the Meta section; the card-level tag, then what changed, one note per line */
.cd-mods { display: grid; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.cd-mods h3 { font-size: 22px; }
.cd-mods-l { display: grid; justify-items: start; gap: 8px; max-width: 68ch; color: var(--ink-2); text-wrap: pretty; }

/* "With and against": three lists side by side, ruled apart; each entry a card chip and its signed points */
.cm { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.cm-head h4 { font-size: 18px; }
.cm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 0 16px; border-left: 1px solid var(--line); }
.cm-col:first-child { padding-left: 0; border-left: 0; }
.cm-col:last-child { padding-right: 0; }
.cm-col-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cm-col-h h5 { margin: 0; color: var(--ink-2); font: 400 16px/1.15 var(--display); letter-spacing: .01em; }
.cm-col-h .tag { white-space: normal; }
/* one entry per line, strongest first; the points form one right-aligned column */
.cm-l { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 4px 12px; }
.cm-e { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-width: 0; }
.cm-e .cc { justify-self: start; min-width: 0; margin: 0; }
.cm-v { justify-self: end; font: 400 16px/1 var(--display); letter-spacing: .01em; white-space: nowrap; }
.cm-v.up { color: var(--win); }
.cm-v.down { color: var(--loss); }
.cm-u { color: var(--muted); font: 600 14px/1 var(--text); letter-spacing: 0; }
.cm-none { color: var(--muted); font: 600 14px/1.4 var(--text); }
.cm-foot { display: grid; justify-items: start; }
.cm-foot .tdisc { margin-left: -12px; }
.cm-how-l { display: grid; gap: 4px; padding: 4px 0 0; color: var(--muted); font: 600 14px/1.4 var(--text); max-width: 68ch; }
.cm-how-l b { color: var(--ink-2); }
.cm-skel { padding-top: 4px; }
.cm-err { display: grid; justify-items: start; gap: 12px; color: var(--ink-2); }

/* ---------------------------------------------------------------- tablet: the kit narrows, the lists stack */
@media (max-width: 900px) {
  .cd-body { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .cm-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cm-col, .cm-col:first-child, .cm-col:last-child { padding: 0; border-left: 0; }
  .cm-col + .cm-col { padding-top: 16px; border-top: 1px solid var(--line); }
  .cm-l { max-width: 360px; }
  /* the card tier across the row, the two deck counts side by side under it */
  .cd-stats.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-stats.three > :first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- phone: one column, in reading order */
@media (max-width: 760px) {
  /* the view fills the screen and scrolls as one page; it rises 24px as it opens. The card sits at the top at a reduced
     size, then everything flows below it in reading order. */
  .cd { padding: calc(24px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
  dialog.card-dlg .close { top: calc(8px + env(safe-area-inset-top)); right: 8px; }
  dialog.card-dlg .dlg-scroll { scroll-padding-block: calc(60px + env(safe-area-inset-top)) 16px; }
  .cd-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cd-kit { padding-top: 0; }
  .cd-art { position: static; justify-items: center; }
  /* the card leaves the corner to the close control: 56px kept free on each side of it */
  .cd-art > .cell { width: min(232px, calc(100% - 112px)); }
  /* under the centred card: the resistances and the toggle across the column */
  .cd-own, .cd-art > .ress { justify-self: stretch; margin-inline: 0; }
  .kit-e > :not(.kit-rib), .hx-note { margin-inline: 8px; }
  .tp-detail { padding-inline: 8px; }
  .kit-rib { min-height: 36px; }
  .kit-w { flex-basis: 56px; }
  /* still three side by side, as the game's draft lays them out: glyph over name over tag, centred */
  .tp-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 4px; min-height: 88px; padding: 8px 4px; text-align: center; }
  .tp-ico { grid-row: auto; }
  .tp-name, .tp-tab:not(:has(.tp-rec)) .tp-name { grid-row: auto; align-self: start; font-size: 14px; }
  .tp-rec { grid-column: auto; justify-self: center; }
  .tp-pc { top: 4px; right: 4px; }
  .tp-tab .mu { position: absolute; top: 4px; left: 4px; }      /* the patch mark's corner grammar, on the other side */
  .cd-meta, .cd-mods { margin-top: 32px; padding-top: 24px; }
  .cd-meta-h .cd-find { width: 100%; }
  .cd-stats, .cd-stats.three { grid-template-columns: minmax(0, 1fr); }
  .cd-stat { min-height: 0; }
}