/* CogniBump card kit: the card look shared by every card game. Markup from cards.mjs (cardHTML / slotHTML).
   Size: set --cw (card width) on any ancestor; height follows (5:7). Felt: put .cb-felt on the table. */
:root {
  --cb-card-red: #c8283c;
  --cb-card-black: #1f2433;
  --cb-card-face: #fffdf8;
  --cb-card-edge: #d9d2c4;
  --cb-card-back-1: #2d63d8;
  --cb-card-back-2: #1d4bb0;
  --cb-card-sel: #f08a24;
  --cb-felt-1: #2f7a55;
  --cb-felt-2: #1f5a3e;
}
.cb-felt { background: radial-gradient(120% 90% at 50% 0%, var(--cb-felt-1), var(--cb-felt-2)); }

.cb-card, .cb-slot {
  --w: var(--cw, 64px);   /* set --cw on any ancestor */
  position: relative; box-sizing: border-box; flex: none;
  width: var(--w); height: calc(var(--w) * 1.4);
  border-radius: calc(var(--w) * .1);
  font-family: Nunito, system-ui, sans-serif; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cb-card {
  display: block; padding: 0; margin: 0; border: 0; text-align: left; cursor: pointer;
  background: var(--cb-card-face); color: var(--cb-card-black);
  box-shadow: 0 0 0 1px var(--cb-card-edge), 0 2px 4px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cb-card.red { color: var(--cb-card-red); }
.cb-card .cc-i { position: absolute; left: 7%; top: 4%; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.cb-card .cc-i b { font-weight: 900; font-size: calc(var(--w) * .27); letter-spacing: -.04em; }
.cb-card .cc-i i { font-style: normal; font-size: calc(var(--w) * .22); }
.cb-card .cc-b { left: auto; top: auto; right: 7%; bottom: 4%; transform: rotate(180deg); }
.cb-card .cc-c { position: absolute; inset: 0; display: grid; place-items: center; }
.cb-card .cc-c i { font-style: normal; font-size: calc(var(--w) * .52); line-height: 1; }
.cb-card.face .cc-c { inset: 22% 18%; border-radius: calc(var(--w) * .06); background: color-mix(in srgb, currentColor 9%, transparent); place-items: center; align-content: center; gap: 0; }
.cb-card.face .cc-c em { font: 900 calc(var(--w) * .36)/1 Fraunces, Georgia, serif; font-style: normal; }
.cb-card.face .cc-c i { font-size: calc(var(--w) * .24); }

.cb-card.down {
  cursor: default;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, var(--cb-card-back-1), var(--cb-card-back-2));
  box-shadow: inset 0 0 0 calc(var(--w) * .05) #fff, 0 0 0 1px var(--cb-card-edge), 0 2px 4px rgba(0, 0, 0, .18);
}

/* states */
.cb-card.sel { transform: translateY(-8%); box-shadow: 0 0 0 3px var(--cb-card-sel), 0 6px 14px rgba(0, 0, 0, .25); }
.cb-card.hint { box-shadow: 0 0 0 3px #ffd166, 0 0 16px rgba(255, 209, 102, .8); }
.cb-card.dim { filter: brightness(.82) saturate(.7); cursor: default; }
.cb-card:focus-visible { outline: 3px solid var(--cb-card-sel); outline-offset: 2px; }
@media (hover: hover) { .cb-card:not(.down):not(.dim):hover { box-shadow: 0 0 0 1px var(--cb-card-edge), 0 4px 10px rgba(0, 0, 0, .25); } }

.cb-slot {
  display: grid; place-items: center; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .6);
  font: 900 calc(var(--w) * .3) Nunito, sans-serif; border: 0; padding: 0;
}
.cb-slot.on-light { background: rgba(0, 0, 0, .04); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15); color: rgba(0, 0, 0, .35); }

/* a fanned hand: overlap cards horizontally; set --ov (overlap, default 55% of a card) */
.cb-hand { display: flex; justify-content: center; }
.cb-hand > .cb-card + .cb-card { margin-left: calc(var(--w) * var(--ov, -.55)); }

@media (prefers-reduced-motion: reduce) { .cb-card { transition: none; } }