/* ——— Cards (deckbuilder spec §12) ———
   A card is a small ink painting: a dark sheet lit faintly from its centre, a brush-stroke frame
   that says its class (src/ui/frames.js), its illustration feathered into the sheet with a radial
   mask and `screen` so the painting's black disappears, and a few lines of text. Warmth is kept
   for what matters now: the cost of a card that can be played, a lit (Tänd) card, a rare frame's
   ember, and the word a shattered card missed. */

/* Flex, not grid: a row that is not full (a shattered card, a short hand) stays centred. */
.hand {
  --hand-gap: clamp(0.55rem, 1.4vw, 1rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hand-gap);
  padding: 0.5rem 0 0.9rem;
}

.card {
  --tone: var(--fog);
  --accent: var(--fog);
  /* The sheet's ink, also read by the snap (src/ui/shatter.js) to paint the card. */
  --sheet-top: #181b21; --sheet-mid: #101216; --sheet-bottom: #0a0b0e;
  position: relative; isolation: isolate; flex: 0 1 176px; min-width: 132px; aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.95rem 0.9rem 0.85rem;
  text-align: center; color: var(--bone); border: none; border-radius: 9px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 42%, color-mix(in srgb, var(--tone) 13%, transparent), transparent 74%),
    radial-gradient(ellipse 120% 30% at 50% 100%, color-mix(in srgb, var(--tone) 7%, transparent), transparent 70%),
    linear-gradient(176deg, var(--sheet-top) 0%, var(--sheet-mid) 52%, var(--sheet-bottom) 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.45);
  transform: perspective(720px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg));
  /* The deal moves `translate`, so it never fights the tilt and lift on `transform`. */
  opacity: 0; animation: deal 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; animation-delay: calc(var(--n) * 70ms);
  transition: transform 0.18s ease-out, filter 0.35s ease, box-shadow 0.3s ease;
}
@keyframes deal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }

/* Class = frame and tone. The label keeps the colours players already know for each class. */
.frame-verb { --tone: #d4c8bb; --accent: var(--rust); }
/* Skydd is heavy ink: a dark slate grey, not the pale blue of a metal bar. */
.frame-noun { --tone: #75818b; --accent: var(--slate); }
.frame-adj { --tone: #dbc9a8; --accent: var(--ember); }
.frame-adv { --tone: #b6afcd; --accent: #a99bd0; }
.frame-wild { --tone: var(--fog); --accent: var(--fog); }
/* Memory and support cards are "not of the fight": a colder, moonlit sheet. */
.frame-memory { --tone: #cfd6e4; --accent: #cfd6e4; --sheet-top: #191d25; --sheet-mid: #10131a; --sheet-bottom: #0a0c10; }

.card-frame { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.card-frame-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.frame-ink { fill: var(--tone); fill-opacity: 0.88; }
.frame-line { stroke: var(--tone); }
.frame-faint { opacity: 0.42; }
.frame-haze { opacity: 0.16; }
.frame-fog { opacity: 0.8; }
/* Glimt's frame is only fog: a soft inner edge keeps the card a card against the dark. */
.frame-wild { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(142, 152, 163, 0.16), inset 0 0 22px rgba(142, 152, 163, 0.09); }
.frame-ember { fill: var(--ember); filter: drop-shadow(0 0 2px var(--ember-glow)); }
.rarity-rare { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 18px rgba(230, 165, 90, 0.09); }

.card-art-wrap { position: relative; z-index: 0; }
.card-head, .card-word, .card-effect, .card-class, .card-task { position: relative; z-index: 1; }
.card .ink-crack-mark { z-index: 2; }

/* Top row: the energy pip (a hand-drawn ring), the glöd slot beside it when the card costs glöd,
   the name, and the key that plays it. */
.card-head { display: flex; align-items: center; gap: 0.4em; min-height: 1.9em; text-align: left; }
.card-cost { display: inline-flex; align-items: center; gap: 0.2em; flex: none; }
.cost-energy {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; flex: none;
  border: 1.5px solid var(--fog-dim); border-radius: 52% 48% 50% 46% / 47% 53% 45% 55%;
  /* Spectral's lining figures: IM Fell's old-style 1 reads as a Roman I. */
  font-family: var(--text); font-variant-numeric: lining-nums; font-size: 0.9rem; font-weight: 600; line-height: 1; color: var(--bone-dim);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.card.playable .cost-energy, .card.ghost .cost-energy {
  border-color: var(--ember); color: #f2d2a6;
  box-shadow: 0 0 10px var(--ember-glow), inset 0 0 6px rgba(230, 165, 90, 0.22);
}
.cost-embers {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(230, 165, 90, 0.22);
  font-family: var(--text); font-variant-numeric: lining-nums; font-size: 0.74rem; font-weight: 600; line-height: 1; color: var(--ember);
}
.card-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display); font-size: 1.14rem; line-height: 1.15; color: var(--bone); letter-spacing: 0.01em;
}
.card-key { flex: none; font-size: 0.72rem; color: var(--fog-dim); font-variant-numeric: tabular-nums; }
.card.playable .card-key { color: var(--fog); }

/* The illustration bleeds past the text column and fades out on every side. */
.card-art-wrap { flex: 1 1 auto; min-height: 0; margin: 0.1rem -7% 0; }
.card-art {
  /* The motifs are small in a lot of black, so the painting is drawn larger than its box. */
  position: absolute; left: -9%; top: -14%; width: 118%; height: 128%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0.94;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  transition: opacity 0.35s ease;
}

/* The word line: dots in hand (the word is dealt on play), the missed word as the card shatters. */
.card-word {
  min-height: 1.1em; margin-top: -0.45em; font-family: var(--display); font-style: italic;
  font-size: 0.85rem; line-height: 1.2; letter-spacing: 0.24em; color: var(--fog-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-word.known { font-size: 1rem; letter-spacing: 0.01em; color: var(--ember); text-shadow: 0 0 14px var(--ember-glow); }
/* What the card does, the number a player chooses by: large, in the serif, warm bone. */
/* Spectral with lining figures: IM Fell's old-style numerals dip and shrink ("5 skydd"). */
.card-effect {
  font-family: var(--text); font-variant-numeric: lining-nums; font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: 0.01em; color: #eadcc4;
  text-shadow: 0 0 10px rgba(11, 13, 16, 0.9); text-wrap: balance;
}
.frame-wild .card-effect { font-style: italic; font-weight: 400; font-size: 0.86rem; color: var(--bone-dim); }
.card.unaffordable .card-effect { color: var(--bone-dim); }

.card-class { padding-top: 0.3em; font-size: 0.7rem; font-variant: small-caps; letter-spacing: 0.14em; line-height: 1.2; color: var(--accent); }
/* A thin brushed rule above the class, fading out at both ends. */
.card-class::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; opacity: 0.35;
  background: linear-gradient(90deg, transparent, var(--tone) 30%, var(--tone) 70%, transparent);
}
/* Inline, not flex: a rule text that wraps keeps its icon at the start of its first line. */
.card-task {
  display: block; min-height: 1.3em; text-wrap: balance;
  font-size: 0.8rem; font-style: italic; line-height: 1.2; color: var(--bone-dim);
}
.task-icon-wrap { display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.3em; vertical-align: -0.15em; color: var(--tone); opacity: 0.85; }
.task-icon { display: block; }
.task-icon { width: 100%; height: 100%; }

/* Feel: a playable card lifts and leans towards the pointer (src/ui/tilt.js) and a faint light
   follows it; one that costs more than the energy left sinks into the dark. */
.card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 38%), rgba(232, 226, 212, 0.1), transparent 58%);
  opacity: 0; transition: opacity 0.3s ease;
}
.card.playable:hover, .card.playable:focus-visible {
  transform: perspective(720px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) translateY(-8px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(230, 165, 90, 0.1);
}
.card.playable:hover::before, .card.playable:focus-visible::before { opacity: 1; }
.card:focus-visible { outline-offset: 5px; }
.card.playable:hover .card-art, .card.playable:focus-visible .card-art { opacity: 1; }
.card.unaffordable { filter: grayscale(0.75) brightness(0.52); }
/* A finished fight: nothing can be played, but nothing is too dear either. */
.card:disabled:not(.unaffordable):not(.ghost) { filter: grayscale(0.4) brightness(0.78); }

/* Tänd: the frame warms towards the ember and a glow breathes around the card. */
.card.lit { --tone: color-mix(in srgb, var(--ember) 55%, #e8e2d4); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--ember-glow), inset 0 0 18px rgba(230, 165, 90, 0.1); }
.card.lit::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 24px var(--ember-glow); opacity: 0.4; animation: ember-breathe 2.6s ease-in-out infinite;
}

/* The snap's ghost (src/ui/shatter.js) is the card as it was, already dealt. */
.card.ghost { pointer-events: none; opacity: 1; animation: none; filter: none; }

/* Help taken on the card's word: dimmed, with a thin crack across it (src/ui/ink-fx.js). */
.card.degraded .card-art-wrap, .card.degraded .card-name, .card.degraded .card-effect, .card.degraded .card-task { opacity: 0.6; }
.card .ink-crack-mark path { opacity: 0.4; }

/* Reduced motion and "Minska rörelse": no lean, no lift, no moving light. */
.still .card, .still .card:hover, .still .card:focus-visible { transform: none !important; }
.still .card::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  /* No deal-in either: the card starts at opacity 0 only for that animation. */
  .card { opacity: 1; }
  .card, .card:hover, .card:focus-visible { transform: none !important; }
  .card::before { display: none; }
}

/* Phone: five cards in two rows of three and two (deckbuilder spec §12), no keys to press. */
@media (max-width: 480px) {
  .hand { --hand-gap: 0.45rem; }
  .card { flex-basis: calc((100% - 2 * var(--hand-gap)) / 3); min-width: 0; padding: 0.6rem 0.5rem 0.55rem; border-radius: 7px; }
  .card-head { gap: 0.3em; min-height: 1.7em; }
  .cost-energy { font-size: 0.8rem; }
  .card-name { font-size: 0.95rem; }
  .card-key { display: none; }
  .card-word { font-size: 0.75rem; }
  .card-word.known { font-size: 0.85rem; }
  .card-effect { font-size: 0.84rem; }
  .frame-wild .card-effect { font-size: 0.7rem; }
  .card-class { font-size: 0.64rem; letter-spacing: 0.1em; }
  .card-task { font-size: 0.72rem; }
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }