/* Not Clue, shared by the TV and the phones: clue cards (size with --cw), the card
   back, help text, board animations and the table surface (.tbl-mansion), dark
   oxblood damask by default and warm ivory in the light theme. */

/* ---- clue cards ---- */
.clcard, .clcard * { box-sizing: border-box; }
.clcard {
  --tint: #7a2430;
  width: var(--cw, 100px); aspect-ratio: 5 / 7.4; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 100px) * .075); padding: calc(var(--cw, 100px) * .045);
  background: linear-gradient(160deg, #f8f0dc, #eadbb8);
  box-shadow: 0 calc(var(--cw, 100px) * .025) calc(var(--cw, 100px) * .08) rgba(0,0,0,.38), inset 0 0 0 calc(var(--cw, 100px) * .008) rgba(80,50,10,.25);
  user-select: none; -webkit-user-select: none; color: #3b2416;
}
.clcard .cl-in { position: relative; width: 100%; height: 100%; border-radius: 5cqw; border: 1.1cqw solid #b08d48; box-shadow: inset 0 0 0 1.6cqw #f8f0dc, inset 0 0 0 2.2cqw #b08d48; display: flex; flex-direction: column; overflow: hidden; background: #fbf5e6; }
.clcard .cl-kind { margin: 3.2cqw 3.2cqw 0; padding: 1.8cqw 0 1.5cqw; border-radius: 2.4cqw 2.4cqw 0 0; background: var(--tint); color: #fff; text-align: center; font: 800 7.6cqw/1 "Inter", "Helvetica Neue", Arial, sans-serif; letter-spacing: .28em; text-transform: uppercase; text-indent: .28em; }
.clcard.c-whitecaps .cl-kind { background: #1f2a44; }
.clcard.c-canola .cl-kind { color: #2a1d00; }
.clcard .cl-art { position: relative; flex: 1; min-height: 0; margin: 0 3.2cqw; border: 1cqw solid var(--tint); border-top: none; border-radius: 0 0 40cqw 40cqw / 0 0 22cqw 22cqw; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tint) 22%, #fff9ec), color-mix(in srgb, var(--tint) 45%, #f0e2c2)); }
.clcard.c-whitecaps .cl-art { border-color: #1f2a44; background: radial-gradient(ellipse at 50% 30%, #f4f8ff, #cfdcef); }
.clcard.k-weapon .cl-art { background: radial-gradient(ellipse at 50% 35%, #f4f1ea, #c9d0d6); }
.clcard .cl-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.clcard.k-weapon .cl-art svg { inset: 6cqw; width: calc(100% - 12cqw); height: calc(100% - 12cqw); }
.clcard .cl-name { padding: 2.6cqw 3cqw 4cqw; text-align: center; font: 400 11.5cqw/1.02 "IM Fell English SC", Georgia, "Times New Roman", serif; color: #3b2416; letter-spacing: .01em; }
.clcard.k-room .cl-name { font-size: 10.8cqw; }
.clcard.c-blackberry .cl-name { font-size: 10cqw; }
.clcard.k-back .cl-in { background: #6e1a25; border-color: #c9a54a; box-shadow: inset 0 0 0 1.6cqw #6e1a25, inset 0 0 0 2.2cqw #c9a54a; }
.clcard .cl-lattice { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(233,207,138,.22) 0 1.2cqw, transparent 1.2cqw 9cqw), repeating-linear-gradient(-45deg, rgba(233,207,138,.22) 0 1.2cqw, transparent 1.2cqw 9cqw), radial-gradient(circle at 50% 45%, #8e2433, #4a0f17 80%); }
.clcard .cl-seal { position: absolute; left: 50%; top: 50%; width: 64cqw; height: 64cqw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8e2433, #5a121c); border: 2cqw solid #c9a54a; box-shadow: 0 0 0 1.4cqw #6e1a25, 0 0 0 2.2cqw rgba(233,207,138,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #f3dc9c; line-height: .9; }
.clcard .cl-seal svg { width: 26cqw; height: 26cqw; margin-bottom: 1cqw; }
.clcard .cl-seal small { font: 800 6.5cqw/1 "Inter", Arial, sans-serif; letter-spacing: .3em; text-indent: .3em; }
.clcard .cl-seal b { font: 400 15cqw/1 "IM Fell English SC", Georgia, serif; letter-spacing: .04em; }
/* Store edition: WHODUNIT fits the seal. */
.clcard .cl-seal b.st { font-size: 8.6cqw; letter-spacing: .02em; }
.clcard.dim { filter: saturate(.4) brightness(.8); }

.cl-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); }
.cl-explain .cl-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.cl-explain p { margin: 5px 0 0; }
.cl-mini { display: block; flex: none; }

/* ---- board ---- */
.clb { display: block; }
.clb .clb-turnring { animation: clb-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes clb-pulse { 50% { opacity: .35; transform: scale(1.18); } }
.clb .clb-bob { animation: clb-bob 1.1s ease-in-out infinite; }
@keyframes clb-bob { 50% { transform: translateY(-9px); } }
.clb .clb-hl rect { animation: clb-glow 1.2s ease-in-out infinite; }
.clb .clb-hl.sel rect { animation: none; }
@keyframes clb-glow { 50% { opacity: .55; } }
.clb .clb-hlroom { animation: clb-glow 1.4s ease-in-out infinite; }
.clb .clb-hlroom.sel { animation: none; }
.clb .clb-pawn.fresh { animation: clb-land .5s cubic-bezier(.2,1.5,.4,1) .55s both; transform-box: fill-box; transform-origin: center; }
@keyframes clb-land { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---- the table: an oxblood study by lamplight, or ivory damask in daylight ---- */
.tbl-mansion {
  --tbl-edge: #12060a; --tbl-rim: #8a6a2a; --tbl-glow: rgba(255,196,120,.10);
  background:
    radial-gradient(ellipse 60% 50% at 32% 42%, rgba(255,190,110,.12), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(233,207,138,.05) 0 14px, transparent 15px) 0 0 / 56px 56px,
    radial-gradient(circle at 50% 50%, rgba(233,207,138,.04) 0 6px, transparent 7px) 28px 28px / 56px 56px,
    repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #3a1219 0%, #2a0d13 55%, #1d090d 100%);
}
[data-theme="light"] .tbl-mansion {
  --tbl-edge: #fffaf0; --tbl-rim: #b08d48; --tbl-glow: rgba(255,255,255,.35);
  background:
    radial-gradient(ellipse 60% 50% at 32% 42%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(176,141,72,.10) 0 14px, transparent 15px) 0 0 / 56px 56px,
    radial-gradient(circle at 50% 50%, rgba(176,141,72,.08) 0 6px, transparent 7px) 28px 28px / 56px 56px,
    repeating-linear-gradient(45deg, rgba(176,141,72,.07) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(-45deg, rgba(176,141,72,.07) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, #f7efdf 0%, #f0e4cc 100%);
}