/* Request 57 / OB-122: dark cards, role accents, no filled role artwork or frames. */
.card {
  --accent: var(--violet-hot); --accent-deep: var(--violet-deep); --s: 1;
  --paper: #fff8ef; --paper-2: #e3dce9; --muted: #bdb4c8;
  --st-signal: #a9caff; --st-context: #d5baff; --st-decision: #f2d28a; --st-delivery: #ffb5a9; --st-retro: #a9e5bf;
  position: relative; width: calc(var(--card-w) * var(--s)); height: calc(var(--card-h) * var(--s));
  display: grid; grid-template-rows: auto minmax(calc(48px * var(--s)), 1fr) auto auto auto;
  font-size: calc(11px * var(--s)); color: var(--paper); border: 0; outline: 0;
  border-radius: calc(3px * var(--s)) calc(3px * var(--s)) calc(9px * var(--s)) calc(9px * var(--s));
  background: #120f1b;
  box-shadow: 0 calc(18px * var(--s)) calc(28px * var(--s)) calc(-16px * var(--s)) #000d;
  overflow: hidden; transform-style: preserve-3d;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid), opacity var(--t-fast), filter var(--t-mid);
}
.card::before { content: none; }
.card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-mid); background: radial-gradient(ellipse at var(--mx,50%) var(--my,25%), #ffffff0c, transparent 62%); }
.card:hover::after, .card.lift::after { opacity: 1; }
.card.kind-action { --accent: var(--paper-2); --accent-deep: #20202a; }
.card.kind-status { --accent: #c4bbc8; --accent-deep: #17151c; --stc: #c4bbc8; }
.card.kind-crisis { --accent: #ff8b91; --accent-deep: #631e33; }
.card.rarity-signature .name { color: color-mix(in srgb, var(--hc) 35%, var(--paper)); }
.card .hd { position: relative; display: flex; align-items: center; gap: calc(7px * var(--s)); padding: calc(10px * var(--s)) calc(10px * var(--s)) calc(5px * var(--s)); min-width: 0; }
.card .cost { flex: none; min-width: calc(20px * var(--s)); display: flex; justify-content: center; align-items: center; gap: calc(2px * var(--s)); font: 800 calc(20px * var(--s))/1 var(--brand); color: var(--paper); }
.card .cost::before { content: '◆'; font-size: calc(7px * var(--s)); color: var(--role-ink, var(--paper-2)); }
.card .cost.free { color: #8cdde9; }
.card .name { min-width: 0; font: 700 calc(13.5px * var(--s) * var(--fs-card))/1.13 var(--brand); letter-spacing: -.025em; text-transform: lowercase; overflow-wrap: anywhere; text-wrap: balance; }
.card .name .plus { color: var(--role-ink, var(--violet-hot)); font-size: .75em; margin-left: 1px; }
.card .lvl { margin-left: auto; flex: none; font-size: calc(7px * var(--s)); letter-spacing: .3px; color: var(--muted); }
.card .lvl.l2 { color: var(--violet-hot); }
.card .lvl.l3, .card .lvl.sig { color: var(--hc, var(--role-ink, var(--paper))); }
.card .lvl.sig { font-size: calc(11px * var(--s)); }
.card .rar { margin-left: auto; color: var(--accent); font-size: calc(10px * var(--s)); }
.card .art { position: relative; margin: 0; border: 0; outline: 0; box-shadow: none; overflow: hidden; display: grid; place-items: center; background: none; }
.card .art pre { margin: 0; font: calc(7px * var(--s))/1 var(--mono); letter-spacing: 0; color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 28%, transparent); }
.card .art pre .a1 { color: color-mix(in srgb, var(--role-ink, var(--stc, var(--accent))) 60%, transparent); }
.card .art pre .a2 { color: var(--role-ink, var(--stc, var(--accent))); }
.card .art pre .a3 { color: var(--paper); font-weight: 700; text-shadow: 0 0 calc(7px * var(--s)) var(--role-ink, var(--stc, var(--accent))); }
.card .type { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3px * var(--s)) calc(6px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) 0; color: var(--muted); font-size: calc(8px * var(--s)); line-height: 1.15; }
.card .type .kw { font-size: calc(7.5px * var(--s)); color: var(--paper-2); }
.card .card-station { margin-left: auto; color: var(--stc, var(--muted)); font-size: calc(8px * var(--s)); }
.card .text { padding: calc(5px * var(--s)) calc(10px * var(--s)) calc(3px * var(--s)); color: var(--paper); font-size: calc(11.5px * var(--s) * var(--fs-card)); line-height: 1.3; text-wrap: pretty; }
.card .stats { display: flex; align-items: center; gap: calc(5px * var(--s)); padding: calc(4px * var(--s)) calc(10px * var(--s)) calc(7px * var(--s)); min-height: calc(24px * var(--s)); font-size: calc(10px * var(--s)); border: 0; }
.card .stat { display: inline-flex; align-items: baseline; gap: calc(3px * var(--s)); color: var(--paper-2); font-size: calc(8.5px * var(--s)); letter-spacing: -.025em; }
.card .stat b { font-size: calc(17px * var(--s)); font-weight: 800; color: var(--role-ink, var(--paper)); }
.card .stat.pow b { color: var(--role-ink, #532590); }
.card:not(.kind-crisis) .tx-energy { color: #ffb6a2; }
.card:not(.kind-crisis) .tx-trust { color: #d9c0ff; }
.card .stat.life { margin-left: auto; flex: none; }
.card .pips { display: inline-flex; gap: calc(2px * var(--s)); }
.card .pips i { width: calc(3px * var(--s)); height: calc(7px * var(--s)); background: var(--paper-2); opacity: .7; }
.card .pips i.off { opacity: .15; }
.card .stats .mini-ring { flex: none; width: calc(30px * var(--s)); height: calc(14px * var(--s)); }
.card .stats .aff { font-size: calc(8px * var(--s)); color: var(--paper-2); }
.mini-ring ellipse { fill: none; stroke: #f4f4ef38; stroke-width: 1; }
.mini-ring circle { fill: #f4f4ef40; }
.mini-ring circle.on { fill: var(--stc, var(--paper)); }
.mini-ring circle.st-signal { fill: var(--st-signal); }
.mini-ring circle.st-context { fill: var(--st-context); }
.mini-ring circle.st-decision { fill: var(--st-decision); }
.mini-ring circle.st-delivery { fill: var(--st-delivery); }
.mini-ring circle.st-retro { fill: var(--st-retro); }
.card .zoom, .card .crisis-choice { position: absolute; right: calc(7px * var(--s)); top: calc(100% + 3px * var(--s)); z-index: 6; width: calc(22px * var(--s)); height: calc(22px * var(--s)); padding: 0; display: grid; place-items: center; font: calc(14px * var(--s))/1 var(--mono); color: var(--paper); background: #100b19b8; border: 0; border-radius: 50%; cursor: zoom-in; opacity: 0; transition: opacity var(--t-fast); }
.card:hover .zoom, .card:focus-within .zoom, .card.selected .zoom, .card .crisis-choice { opacity: 1; }
.card .zoom:hover, .card .crisis-choice:hover { color: var(--cyan); background: #292039; }
.card .zoom:focus-visible, .card .crisis-choice:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.card .crisis-choice { cursor: crosshair; color: var(--cyan); }
@media (hover:none), (pointer:coarse) { .card .zoom { opacity: 1; min-width: 32px; min-height: 32px; } .card .crisis-choice { min-width: 32px; min-height: 32px; } }
/* Keyboard focus remains explicit. Selected cards lift and brighten without a new frame. */
.card.disabled { filter: saturate(.3) brightness(.65); }
.card.unaffordable .cost { color: var(--muted); }
.card.selected { transform: translateY(-26px) scale(1.04); filter: brightness(1.16); box-shadow: 0 24px 36px -16px #000; }
.card:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.card.unseen { filter: saturate(.3) brightness(.78); }
.card.unseen:hover { filter: none; }
/* Availability fades the illustration while rule text keeps its measured contrast. */
.card:not(.kind-crisis):is(.disabled,.unseen) { filter: none; }
.card:not(.kind-crisis):is(.disabled,.unseen) .art { opacity: .55; filter: saturate(.3); }
.card:not(.kind-crisis).unseen:hover .art { opacity: 1; filter: none; }
/* Request 57, orchestrator review 16.10: restore the 0.5.7 anatomy without a perimeter frame. */
.card[data-role]:not(.kind-crisis)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(4px * var(--s)); background: var(--role-ink); z-index: 2; pointer-events: none; box-shadow: none; }
.card:not(.kind-crisis) .cost { width: calc(24px * var(--s)); height: calc(24px * var(--s)); min-width: calc(24px * var(--s)); display: grid; place-items: center; font-size: calc(16px * var(--s)); color: #050407; background: color-mix(in srgb, var(--role-ink, #c4bbc8) 80%, #fff8ef); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.card:not(.kind-crisis) .cost::before { content: none; }
.card.kind-action .cost { clip-path: circle(50%); }
.card:not(.kind-crisis) .art { margin: 0 calc(7px * var(--s)); background: #09070f; border: 1px dotted color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art pre { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 75%, transparent); }
.card:not(.kind-crisis) .art pre .a1 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 60%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a2 { color: color-mix(in srgb, var(--role-ink, #c4bbc8) 25%, #fff8ef); }
.card:not(.kind-crisis) .art pre .a3 { color: #fff8ef; text-shadow: 0 0 calc(4px * var(--s)) color-mix(in srgb, var(--role-ink, #c4bbc8) 45%, transparent); }
.card:not(.kind-crisis) .art .card-station { position: absolute; left: calc(3px * var(--s)); bottom: calc(3px * var(--s)); margin: 0; padding: 0 calc(3px * var(--s)); font-size: calc(8px * var(--s)); line-height: 1.15; color: var(--stc, var(--role-ink)); background: #09070f; }
.card:not(.kind-crisis) .type { color: var(--role-ink); font-size: calc(9px * var(--s)); letter-spacing: .035em; }
.card:not(.kind-crisis) .type .kind { font-weight: 700; text-transform: uppercase; }
.card:not(.kind-crisis) .type .kw { color: var(--role-ink); }
.card:not(.kind-crisis) .type .kw.sig { flex-basis: 100%; font-weight: 700; text-transform: uppercase; }
/* A crisis floats as a threat mark, timer and consequence. */
.card.kind-crisis { --paper: #fff4ec; --paper-2: #ffcec2; --muted: #ffa8a0; --role-ink: #ff413c; --st-signal: #a5d7ff; --st-context: #e6c5ff; --st-decision: #ffd4a9; --st-delivery: #ffb9a9; --st-retro: #c8f6d3; isolation: isolate; background: radial-gradient(ellipse at 42% 42%, #e41937a6, #a30b2738 55%, transparent 78%); border-radius: 0; box-shadow: none; grid-template-rows: auto minmax(calc(32px * var(--s)),1fr) auto auto auto; overflow: visible; }
.card.kind-crisis::before { content: ''; position: absolute; z-index: -1; inset: calc(8px * var(--s)) calc(-5px * var(--s)); background: linear-gradient(145deg, #ff342b45, #be112a80 45%, #ff40302b); clip-path: polygon(5% 9%, 76% 0, 69% 14%, 100% 38%, 89% 48%, 100% 88%, 30% 100%, 36% 88%, 0 65%, 11% 54%); }
.card.kind-crisis::after { content: none; }
.card.kind-crisis .hd { padding-right: calc(34px * var(--s)); }
.card.kind-crisis .zoom, .card.kind-crisis .crisis-choice { top: calc(5px * var(--s)); right: calc(6px * var(--s)); }
.card.kind-crisis .name { color: #fff0ef; font-size: calc(14px * var(--s) * var(--fs-card)); }
.card.kind-crisis .rar { display: none; }
.card.kind-crisis .art { background: none; overflow: hidden; justify-items: start; padding-left: calc(4px * var(--s)); }
.card.kind-crisis .art pre { font-size: calc(6.4px * var(--s)); opacity: 1; transform: translateX(calc(-4px * var(--s))); }
.card.kind-crisis .art pre .a1 { color: #ff4e4b; }.card.kind-crisis .art pre .a2 { color: #ff7770; }.card.kind-crisis .art pre .a3 { color: #ffd1bd; text-shadow: 0 0 10px #ff2b3c; }
.card.kind-crisis .threat-mark { position: absolute; z-index: 2; left: calc(27px * var(--s)); top: 50%; transform: translateY(-50%); height: calc(43px * var(--s)); max-height: 100%; color: #ffefdf; filter: drop-shadow(0 0 14px #ff1f35); }
.card.kind-crisis .threat-mark .pi { width: calc(38px * var(--s)); height: 100%; color: inherit; }
.card.kind-crisis .type { gap: calc(4px * var(--s)); padding-top: 0; font-size: calc(9px * var(--s)); }
.card.kind-crisis .type .mini-ring { width: calc(27px * var(--s)); height: calc(14px * var(--s)); }
.card.kind-crisis .crisis-station { color: #ffd1bf; }
.card.kind-crisis .type .kw { margin-left: auto; font-size: calc(7px * var(--s)); color: var(--muted); }
.card.kind-crisis .text { font-size: calc(11.3px * var(--s) * var(--fs-card)); line-height: 1.3; text-shadow: 0 1px 5px #000; }
.card.kind-crisis .stats { position: static; padding-top: calc(4px * var(--s)); flex-wrap: wrap; }
.card.kind-crisis .hp { order: 2; flex-basis: 100%; height: calc(2px * var(--s)); margin-top: calc(3px * var(--s)); position: relative; background: #f4f4ef15; }
.card.kind-crisis .hp i { position: absolute; inset: 0 auto 0 0; background: #ffa2a5; transition: width .4s var(--ease); }
.card.kind-crisis .hp-n { margin-left: auto; gap: calc(4px * var(--s)); align-items: center; }
.card.kind-crisis .hp-n b { font-size: calc(17px * var(--s)); color: #ffc1c1; }
.card.kind-crisis .hp-n small { color: var(--muted); font-size: calc(9px * var(--s)); }
.card.kind-crisis .hp-n .pi { width: calc(12px * var(--s)); height: calc(12px * var(--s)); color: #ffa2a5; }
.card.kind-crisis .timer { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: calc(12px * var(--s)); display: inline-flex; align-items: center; gap: calc(3px * var(--s)); font: 800 calc(32px * var(--s))/1 var(--brand); color: var(--paper); }
.card.kind-crisis .timer .pi { width: calc(13px * var(--s)); height: calc(16px * var(--s)); color: #d7b0c2; }
.card.kind-crisis .timer.hot { color: #ff929b; animation: threat-tick 1.6s ease-in-out infinite; }
@keyframes threat-tick { 50% { opacity: .65; } }
@media (prefers-reduced-motion:reduce) { .card.kind-crisis .timer.hot { animation: none; } }