/* The game card, built like the client builds it from its own sprites. All sizes use --u, 1% of the card width, kept by one
   ResizeObserver (js/cards.js). Card labels are outlined with stacked hard text-shadows, never a text stroke. */

/* ---------------------------------------------------------------- game card */
.gc { --u: 2.5px;
  --ol: calc(var(--u) * .6) 0 0 var(--card-outline), calc(var(--u) * -.6) 0 0 var(--card-outline), 0 calc(var(--u) * -.6) 0 var(--card-outline), calc(var(--u) * .6) calc(var(--u) * .6) 0 var(--card-outline), calc(var(--u) * -.6) calc(var(--u) * .6) 0 var(--card-outline), calc(var(--u) * .6) calc(var(--u) * -.6) 0 var(--card-outline), calc(var(--u) * -.6) calc(var(--u) * -.6) 0 var(--card-outline), 0 calc(var(--u) * 1.3) 0 var(--card-outline);
  --ol-sm: calc(var(--u) * .4) 0 0 var(--card-outline), calc(var(--u) * -.4) 0 0 var(--card-outline), 0 calc(var(--u) * -.4) 0 var(--card-outline), calc(var(--u) * .4) calc(var(--u) * .4) 0 var(--card-outline), calc(var(--u) * -.4) calc(var(--u) * .4) 0 var(--card-outline), calc(var(--u) * .4) calc(var(--u) * -.4) 0 var(--card-outline), calc(var(--u) * -.4) calc(var(--u) * -.4) 0 var(--card-outline), 0 calc(var(--u) * .8) 0 var(--card-outline);
  position: relative; display: block; width: 100%; aspect-ratio: 1432 / 2048; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: center; cursor: pointer; }
div.gc { cursor: default; }
.gc-face { 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);
  transition: box-shadow var(--t-state) var(--curve); }
.gc-face.noart { background: linear-gradient(180deg, var(--panel-hi), var(--socket)); }
button.gc:focus-visible { outline: none; }
button.gc:focus-visible .gc-face { box-shadow: var(--shadow), 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }
.gc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gc-art.broken { visibility: hidden; }
.gc-front { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 500 / 437; background-size: 100% 100%; background-repeat: no-repeat; }
.gc-name { position: absolute; top: calc(var(--u) * 4.5); left: calc(var(--u) * 17); right: calc(var(--u) * 17); font: 400 calc(var(--u) * 7) / 1.05 var(--display); text-transform: uppercase; text-shadow: var(--ol); }
.gc-name.long { font-size: calc(var(--u) * 5.8); }
.gc-abs { position: absolute; left: calc(var(--u) * 5); right: calc(var(--u) * 5); bottom: calc(var(--u) * 20); display: grid; gap: calc(var(--u) * 2); }
.gc-ab, .gc-pa { position: relative; height: calc(var(--u) * 11.5); display: grid; align-items: center; font: 400 calc(var(--u) * 5.6) / 1 var(--display); text-transform: uppercase; text-shadow: var(--ol-sm); }
.gc-ab { grid-template-columns: calc(var(--u) * 9) minmax(0, 1fr) calc(var(--u) * 9); gap: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * 2.5); }
.gc-ab::before { content: ""; position: absolute; inset: 0; background: url("../assets/cards/kit/card_ability_active.webp") center / 100% 100% no-repeat; opacity: .3; }
.gc-ab > * { position: relative; }
.gc-ab > i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); background-size: contain; background-repeat: no-repeat; background-position: center; }
.gc-abn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-cd { width: calc(var(--u) * 9); height: calc(var(--u) * 9); display: grid; place-items: center; background: url("../assets/cards/kit/card_cooldown.webp") center / contain no-repeat; }
.gc-pa { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(var(--u) * 1.5); }
.gc-pa > i { height: calc(var(--u) * 7); background-size: 100% 100%; background-repeat: no-repeat; }
.gc-pa .gc-abn { max-width: calc(var(--u) * 52); }
.gc-ab.long, .gc-pa.long { font-size: calc(var(--u) * 4.7); }
.gc-ab.xlong, .gc-pa.xlong { font-size: calc(var(--u) * 4); }
.gc-hp { position: absolute; left: calc(var(--u) * 9); right: calc(var(--u) * 9); bottom: calc(var(--u) * 9.5); height: calc(var(--u) * 7.5); border-radius: calc(var(--u) * 4); background: var(--hp);
  box-shadow: inset 0 calc(var(--u) * -.9) 0 rgba(0, 0, 0, .18), 0 0 0 calc(var(--u) * .6) rgba(13, 10, 26, .55); display: grid; place-items: center; font: 400 max(8.5px, calc(var(--u) * 5.4)) / 1 var(--display); text-shadow: var(--ol-sm); }
.gc-orb { position: absolute; left: calc(var(--u) * -4); top: calc(var(--u) * -4); width: calc(var(--u) * 22); height: calc(var(--u) * 22); background-size: contain; background-repeat: no-repeat; background-position: center; }
.gc-gold { position: absolute; right: calc(var(--u) * -2.5); top: calc(var(--u) * -2.5); width: calc(var(--u) * 16); height: calc(var(--u) * 18); display: grid; place-items: center;
  font: 400 calc(var(--u) * 7.5) / 1 var(--display); color: #4a3200; background: #2a1d00; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gc-gold::before { content: ""; position: absolute; inset: calc(var(--u) * 1.4); background: linear-gradient(180deg, #ffe27a, var(--gold)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gc-gold > span { position: relative; }
.gc-gem { position: absolute; left: 50%; bottom: calc(var(--u) * -5); width: calc(var(--u) * 22); aspect-ratio: 160 / 100; transform: translateX(-50%); background-size: contain; background-repeat: no-repeat; background-position: center; }
.gc-gem.sp-gem-common { width: calc(var(--u) * 15); bottom: calc(var(--u) * -4); }

/* list size: ability bars dropped, name on the banner above the HP bar, one outline only (the name) */
.gc.cp { --ol-cp: calc(var(--u) * .6) 0 0 var(--card-outline), calc(var(--u) * -.6) 0 0 var(--card-outline), 0 calc(var(--u) * -.6) 0 var(--card-outline), 0 calc(var(--u) * .6) 0 var(--card-outline), 0 calc(var(--u) * 1.3) 0 var(--card-outline); }
.gc.cp .gc-name { top: auto; bottom: calc(var(--u) * 19); left: calc(var(--u) * 4); right: calc(var(--u) * 4); font-size: max(12px, calc(var(--u) * 10)); line-height: 1.02; text-shadow: var(--ol-cp); }
.gc.cp .gc-name.long { font-size: max(11px, calc(var(--u) * 8.4)); }
.gc.cp .gc-hp { left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 7); height: calc(var(--u) * 9); font-size: max(10px, calc(var(--u) * 7)); text-shadow: var(--ol-cp); }
.gc.cp .gc-orb { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }

/* ---------------------------------------------------------------- cards in hand (site/js/cardtilt.js)
   The 3D hover of every game card that opens the card view and of the card view's big card (DESIGN.md "Card in hand"). A
   card keeps its box (the button a click lands on) and its layers sit in one inner layer, .gc-in, which takes no pointer
   events, so the hit area never moves. While a card is held, the turned element carries .tilt-on: a 3D context, and the
   depth variables the engine writes each frame (in % of the card width: --ax/--ay the sunk art, --fx/--fy the risen name,
   bars and HP, --oz the orb, gold hexagon and gem standing forward; --tx/--ty the tilt, --lx/--ly the pointer's side, --th
   the hover's strength, a fraction of it for the other cards of the hand). At rest none of it exists. The card stays a thin
   card: no edge or slab is drawn behind it, its depth is the light and the shadow. */
.gc-in { position: absolute; inset: 0; display: block; pointer-events: none; }
.tilt-on { transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.tilt-on .gc, .tilt-on .gc-in { transform-style: preserve-3d; }
/* the face is flat (clipped to its round corners), so the depths inside it are drawn as the shifts they would make */
.tilt-on .gc-art { transform: translate(calc(var(--ax) * var(--u)), calc(var(--ay) * var(--u))) scale(calc(1 + .03 * var(--th))); }
.tilt-on .gc-name, .tilt-on .gc-abs, .tilt-on .gc-hp { translate: calc(var(--fx) * var(--u)) calc(var(--fy) * var(--u)); }
.tilt-on .gc-orb, .tilt-on .gc-gold, .tilt-on .gc-gem { translate: 0 0 calc(var(--oz) * var(--u)); }
/* the light: a soft sheen of ink on the pointer's side of the face; the other cards of the hand catch only a trace of it */
.gc-face::after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--card-light), transparent 48%); }
.tilt-on .gc-face::after { opacity: calc(var(--th) * var(--th) * .8); translate: calc(var(--lx) * 25%) calc(var(--ly) * 25%); }
/* the depth: a soft shadow under the card that deepens with the hover and slips away from the pointer (opacity and
   translate only; the shadow itself is drawn once). Without the engine (reduced motion) a hover still deepens it.
   A box-shadow is never painted inside its own box, so that box must stay hidden under the face wherever the shadow
   slips: it sits 4u inside the face (radius 3u) and the spread gives the 4u back, so the shadow keeps the card's outline
   while the slip (3u at most) never uncovers the box's empty inside (owner, 2026-10-18: it read as a second, misplaced
   contour around a held card). */
.gc-in::before { content: ""; position: absolute; inset: calc(var(--u) * 4); border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 12) calc(var(--u) * 4) rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--curve); }
@media (hover: hover) { button.gc:hover .gc-in:not(.tilt-on)::before { opacity: 1; } }
.gc-in.tilt-on::before, .tilt-on .gc-in::before { opacity: var(--th); transition: none; translate: calc(var(--lx) * var(--th) * var(--u) * -3) calc(var(--ly) * var(--th) * var(--u) * -3); }
/* pressed: the card gives a little under the press (immediate, no transition), as a raised button drops */
button.gc:active .gc-in { scale: .98; }
/* the card under the pointer stands over its neighbours (their text and owned toggles) only while it is held */
.cell.tilt-hot, .slot.tilt-hot { z-index: 4; }

/* ---------------------------------------------------------------- mini card and card chip */
.mc { position: relative; display: block; flex: none; width: 48px; aspect-ratio: 1432 / 2048; padding: 0; border: 2px solid var(--card-edge); border-radius: 4px; background: var(--card-edge); cursor: pointer;
  transition: box-shadow var(--t-state) var(--curve); }
.mc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 4px; display: block; }
.mc-art.broken, .cc-art.broken { visibility: hidden; }
.mc.noart { background: linear-gradient(180deg, var(--panel-hi), var(--socket)); }
.mc-orb { position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; }
/* a small card answers the pointer as the big ones do, without a cyan border: a soft light across its art; pressed, it gives
   a little (immediate). Keyboard focus keeps the double ring. Shared by the mini card and the Card tier list icon. */
.mc::after, .ct-ic::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 30% 12%, var(--card-light), transparent 62%); transition: opacity var(--t-state) var(--curve); }
@media (hover: hover) { .mc:hover::after, .ct-ic:hover::after { opacity: .6; } }
.mc:active, .ct-ic:active { scale: .96; }
.mc:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--accent); }

.cc { display: inline-flex; align-items: center; gap: 8px; height: 28px; max-width: 100%; margin: 2px 0; padding: 0 8px 0 4px; border: 0; border-radius: 4px; vertical-align: middle; text-align: left;
  background: var(--socket); box-shadow: var(--sunken); color: var(--ink); font: 600 14px/1 var(--text); cursor: pointer;
  transition: background var(--t-state) var(--curve), box-shadow var(--t-state) var(--curve); }
.cc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-art { flex: none; width: 18px; height: 24px; border-radius: 4px; object-fit: cover; object-position: top; background: var(--card-edge); display: block; }
.cc:hover { background: var(--panel); box-shadow: var(--sunken), var(--ring); }
.cc:active { background: var(--night); }
.cc:focus-visible { outline: none; box-shadow: var(--sunken), 0 0 0 2px var(--accent); }
.cc { position: relative; }
.cc::after { content: ""; position: absolute; inset: -8px -2px; }
.panel .cc, .stat .cc { background: var(--socket); }

/* ---------------------------------------------------------------- Codex cell and the Owned toggle */
.cell { position: relative; padding: 6px 6px 8px; min-width: 0; }
.cell .cap { margin-top: 12px; }
.grid.has-owned .cell[data-owned="0"] .gc { opacity: .75; transition: opacity var(--t-state) var(--curve); }
.grid.has-owned .cell[data-owned="0"] .gc:hover, .grid.has-owned .cell[data-owned="0"] .gc:focus-visible { opacity: 1; }
.gc { transition: opacity var(--t-state) var(--curve); }

.cw { position: relative; }
.own { position: absolute; right: -9px; bottom: -9px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 2px solid var(--ink-2); background: rgba(16, 13, 36, .94); color: var(--ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: background var(--t-state) var(--curve), border-color var(--t-state) var(--curve), color var(--t-state) var(--curve); }
.own::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.own .ico { grid-area: 1 / 1; width: 18px; height: 18px; stroke-width: 2.2; transition: opacity var(--t-state) var(--curve), transform var(--t-state) var(--curve); }
.own[aria-pressed="false"] .ico:nth-child(2) { opacity: 0; transform: scale(.5); }
.own[aria-pressed="true"] .ico:nth-child(1) { opacity: 0; transform: scale(.5); }
.own:hover { border-color: var(--accent); color: var(--accent); }
.own:active { transform: translateY(1px); background: #000; }
.own[aria-pressed="true"] { background: var(--accent); border-color: var(--night); color: var(--accent-ink); }
.own[aria-pressed="true"]:hover { filter: brightness(1.08); color: var(--accent-ink); }
.own:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- client sprites (kit) */
.sp-el-fire { background-image: url("../assets/cards/kit/element_fire.webp"); }
.sp-el-water { background-image: url("../assets/cards/kit/element_water.webp"); }
.sp-el-earth { background-image: url("../assets/cards/kit/element_earth.webp"); }
.sp-el-nature { background-image: url("../assets/cards/kit/element_nature.webp"); }
.sp-el-light { background-image: url("../assets/cards/kit/element_light.webp"); }
.sp-el-shadow { background-image: url("../assets/cards/kit/element_shadow.webp"); }
.sp-el-divine { background-image: url("../assets/cards/kit/element_divine.webp"); }
.sp-front-fire { background-image: url("../assets/cards/kit/card_front_fire.webp"); }
.sp-front-water { background-image: url("../assets/cards/kit/card_front_water.webp"); }
.sp-front-earth { background-image: url("../assets/cards/kit/card_front_earth.webp"); }
.sp-front-nature { background-image: url("../assets/cards/kit/card_front_nature.webp"); }
.sp-front-light { background-image: url("../assets/cards/kit/card_front_light.webp"); }
.sp-front-shadow { background-image: url("../assets/cards/kit/card_front_shadow.webp"); }
.sp-front-divine { background-image: url("../assets/cards/kit/card_front_divine.webp"); }
.sp-gem-common { background-image: url("../assets/cards/kit/card_rarity_common.webp"); }
.sp-gem-rare { background-image: url("../assets/cards/kit/card_rarity_rare.webp"); }
.sp-gem-epic { background-image: url("../assets/cards/kit/card_rarity_epic.webp"); }
.sp-gem-legendary { background-image: url("../assets/cards/kit/card_rarity_legendary.webp"); }
.sp-gem-divine { background-image: url("../assets/cards/kit/card_rarity_divine.webp"); }
.sp-pl-common-l { background-image: url("../assets/cards/kit/card_ability_passive_line_common_left.webp"); }
.sp-pl-common-r { background-image: url("../assets/cards/kit/card_ability_passive_line_common_right.webp"); }
.sp-pl-rare-l { background-image: url("../assets/cards/kit/card_ability_passive_line_rare_left.webp"); }
.sp-pl-rare-r { background-image: url("../assets/cards/kit/card_ability_passive_line_rare_right.webp"); }
.sp-pl-epic-l { background-image: url("../assets/cards/kit/card_ability_passive_line_epic_left.webp"); }
.sp-pl-epic-r { background-image: url("../assets/cards/kit/card_ability_passive_line_epic_right.webp"); }
.sp-pl-legendary-l { background-image: url("../assets/cards/kit/card_ability_passive_line_legendary_left.webp"); }
.sp-pl-legendary-r { background-image: url("../assets/cards/kit/card_ability_passive_line_legendary_right.webp"); }
.ab-talent { background-image: url("../assets/cards/kit/card_talent_icon.webp"); }

/* ---------------------------------------------------------------- card text (js/cardtext.js; DESIGN.md "Card text")
   The one renderer of the card texts. An element word is the client's orb at the text's cap height and the word in its
   element colour. A keyword is the word in Cream Lavender 700; with a definition it is a button underlined with Field Edge
   dots, and under the pointer, open or focused it becomes a socket chip with the ring (the box is drawn by box-shadow, so
   nothing moves). No box at rest: a boxed word read as the stat tags under the text, and a dozen boxes cluttered a talent. */
/* the orb is the word's own background (not an inline box), so a line never breaks between it, the word and the
   punctuation around them ("Shadow Heart", "Nature,") */
.el { padding-left: 20px; background-size: 16px 16px; background-repeat: no-repeat; background-position: 0 55%; white-space: nowrap; font-weight: 700; }
.el-fire { color: var(--el-fire); }
.el-water { color: var(--el-water); }
.el-earth { color: var(--el-earth); }
.el-nature { color: var(--el-nature); }
.el-light { color: var(--el-light); }
.el-shadow { color: var(--el-shadow); }
.kw { color: var(--ink); font-weight: 700; white-space: nowrap; }
button.kw { position: relative; display: inline; margin: 0; padding: 0; border: 0; border-radius: 4px; background: none; font: inherit; font-weight: 700;
  line-height: inherit; vertical-align: baseline; cursor: pointer; text-decoration: underline dotted var(--edge) 1.5px; text-underline-offset: 4px;
  transition: background var(--t-state) var(--curve), box-shadow var(--t-state) var(--curve); }
/* a taller hit area than the line, without moving the text */
button.kw::after { content: ""; position: absolute; inset: -8px -4px; }
/* hover, open and focus: the socket chip (2px past the word) and the 2px ring, drawn outside the word by box-shadow */
button.kw:hover, button.kw.on, button.kw:focus-visible { outline: none; background: var(--socket); box-shadow: 0 0 0 2px var(--socket), 0 0 0 4px var(--accent); text-decoration-color: transparent; }
.kw mark, .el mark { color: inherit; }

/* the keyword tooltip: one for the page, Panel Lifted, opens in 120ms (fade and scale from .96 at the chip), closes in 100ms;
   it can be hovered and its text selected (WCAG 1.4.13). The definition a screen reader hears is the chip's own hidden
   description; this box is visual only. */
.kw-tip { position: fixed; left: 0; top: 0; z-index: 40; width: max-content; max-width: 320px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-hi); box-shadow: var(--shadow); color: var(--ink-2); font: 600 14px/1.4 var(--text); text-align: left; white-space: normal; pointer-events: none; cursor: default;
  opacity: 0; visibility: hidden; transform: scale(.96); transform-origin: 50% 100%;
  transition: opacity var(--t-press) var(--curve), transform var(--t-press) var(--curve), visibility 0s linear var(--t-press); }
.kw-tip.below { transform-origin: 50% 0; }
.kw-tip.on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--t-state) var(--curve), transform var(--t-state) var(--curve), visibility 0s; }
.kw-tip-h { display: block; margin-bottom: 4px; color: var(--ink); font: 400 16px/1.15 var(--display); letter-spacing: .01em; }
.kw-tip-d { display: block; }