/* Not Exploding Kittens: card faces (TV and phones) and the table surface. Size a card
   with --cw. The card is its own container: its own box is sized from --cw, its insides
   from cqw. Cards look the same in light and dark, like real cards. */
.kcard, .kcard * { box-sizing: border-box; }
.kcard {
  --kc: #888; --kt: #eee;
  width: var(--cw, 100px); aspect-ratio: 63 / 88; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .075); background: #fffaf0; padding: calc(var(--cw, 100px) * .045);
  box-shadow: 0 0 0 calc(var(--cw, 100px) * .014) #1b1b1b, 0 calc(var(--cw, 100px) * .03) calc(var(--cw, 100px) * .08) rgba(0,0,0,.32);
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; color: #1b1b1b; user-select: none; -webkit-user-select: none;
}
.kcard .kc-in { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 2.6cqw; }
.kcard .kc-head { display: flex; align-items: center; gap: 2cqw; background: var(--kc); border: 1.5cqw solid #1b1b1b; border-radius: 4.5cqw; padding: 1.4cqw 2.6cqw 1.4cqw 2cqw; min-height: 18cqw; flex: none; }
.kcard .kc-ic { width: 11cqw; height: 11cqw; flex: none; display: block; }
.kcard .kc-ic svg { width: 100%; height: 100%; display: block; }
.kcard .kc-name {
  font-weight: 800; font-size: 10.4cqw; line-height: .95; text-transform: uppercase; letter-spacing: -.01em; color: #fff; min-width: 0;
  text-shadow: .7cqw .7cqw 0 #1b1b1b, -.7cqw .7cqw 0 #1b1b1b, .7cqw -.7cqw 0 #1b1b1b, -.7cqw -.7cqw 0 #1b1b1b, 0 1cqw 0 #1b1b1b, 1cqw 0 0 #1b1b1b, -1cqw 0 0 #1b1b1b, 0 -1cqw 0 #1b1b1b, .8cqw 1.6cqw 0 #1b1b1b;
}
.kcard .kc-head.long .kc-name { font-size: 8.4cqw; }
.kcard .kc-head.xlong .kc-name { font-size: 7cqw; line-height: .9; }
.kcard .kc-art {
  position: relative; flex: none; height: 82cqw; border: 1.5cqw solid #1b1b1b; border-radius: 5.5cqw; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, rgba(255,255,255,.75), transparent 62%), repeating-conic-gradient(from 4deg at 50% 58%, var(--kt) 0 10deg, color-mix(in srgb, var(--kt) 55%, #fff) 10deg 20deg);
}
.kcard .kc-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kcard .kc-text { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 6.5cqw; line-height: 1.16; font-weight: 700; padding: 0 1.5cqw; overflow: hidden; }
.kcard .kc-text.flavour { font-style: italic; font-weight: 600; color: #4a4038; }
/* small cards: the art carries it */
@container (max-width: 122px) {
  .kcard .kc-text { display: none; }
  .kcard .kc-art { flex: 1; height: auto; }
  .kcard .kc-head { min-height: 20cqw; }
  .kcard .kc-head.long .kc-name, .kcard .kc-head.xlong .kc-name { font-size: 8.6cqw; }
}
@container (max-width: 74px) {
  .kcard .kc-ic { display: none; }
  .kcard .kc-head { padding: 1.4cqw; justify-content: center; }
  .kcard .kc-name { font-size: 9.4cqw !important; text-align: center; }
}
/* the Exploding Kitten is a black card on fire */
.kcard.t-kitten { background: #201c22; }
.kcard.t-kitten .kc-head { background: #ff5a1f; }
.kcard.t-kitten .kc-art { background: radial-gradient(circle at 50% 60%, #ffe27a 0 18%, #ff9a2e 38%, #d9361c 62%, #5a1712 100%); }
.kcard.t-kitten .kc-text { color: #ffd23f; }
/* the Rainbow cat gets a rainbow band */
.kcard.t-rainbow .kc-head { background: linear-gradient(90deg, #ff4d4d, #ff9f1c 20%, #ffd23f 40%, #5bd16a 60%, #3fa7ff 80%, #8c6cff); }
.kcard.dim { filter: saturate(.35) brightness(.86); }

/* the back: a fire burst and a bomb-shaped cat */
.kcard.k-back { background: #2a1a1c; padding: calc(var(--cw, 100px) * .04); }
.kcard .kb-in { position: relative; width: 100%; height: 100%; border-radius: 5cqw; overflow: hidden; box-shadow: inset 0 0 0 1.4cqw #1b1b1b; }
.kcard .kb-in > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kcard .kb-logo { position: absolute; left: 0; right: 0; bottom: 6cqw; display: flex; flex-direction: column; align-items: center; line-height: .9; transform: rotate(-4deg); }
.kcard .kb-logo small { font-size: 8cqw; font-weight: 800; letter-spacing: .3em; margin-left: .3em; color: #ffd23f; text-shadow: 0 .8cqw 0 #1b1b1b; }
.kcard .kb-logo b { font-size: 13.4cqw; font-weight: 800; color: #fff; letter-spacing: -.01em; text-shadow: .8cqw .8cqw 0 #1b1b1b, -.8cqw .8cqw 0 #1b1b1b, .8cqw -.8cqw 0 #1b1b1b, -.8cqw -.8cqw 0 #1b1b1b, 0 1.8cqw 0 #c4161c; }
@container (max-width: 74px) { .kcard .kb-logo { display: none; } }

/* plain-English help under a big card */
.kc-explain { background: var(--fill, rgba(120,120,128,.14)); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text); }
.kc-explain .kc-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.kc-explain p { margin: 5px 0 0; }

/* The table: a comic-book halftone in ember tones. Dark: a smoky den with a glow under
   the pile. Light (default): warm paper with orange dots. */
.tbl-kittens {
  --tbl-edge: #160d0b; --tbl-rim: #7a2e1a; --tbl-glow: rgba(255,120,40,.18);
  background:
    radial-gradient(ellipse 55% 48% at 50% 50%, rgba(255,110,30,.20), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 8%, rgba(255,60,40,.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 92%, rgba(255,180,40,.08), transparent 70%),
    radial-gradient(circle, rgba(255,190,140,.06) 1.3px, transparent 1.8px) 0 0 / 15px 15px,
    linear-gradient(180deg, #2a1c1a 0%, #211615 60%, #180f0e 100%);
}
[data-theme="light"] .tbl-kittens {
  --tbl-edge: #fffaf2; --tbl-rim: #f0b48b; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 55% 48% at 50% 50%, rgba(255,150,60,.20), transparent 70%),
    radial-gradient(ellipse 40% 30% at 10% 8%, rgba(255,90,60,.10), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 92%, rgba(255,190,60,.12), transparent 70%),
    radial-gradient(circle, rgba(214,90,40,.11) 1.3px, transparent 1.8px) 0 0 / 15px 15px,
    linear-gradient(180deg, #fff4e4 0%, #ffead3 100%);
}