/* Not Codenames: card faces and the briefing-room table, shared by the TV and the
   phones. A card fills the box it is put in; everything inside is sized from the
   card's own width (cqw), the card box itself is sized by its parent. */
:root { --cn-font: "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
.cncard, .cncard * { box-sizing: border-box; }
.cncard { position: relative; container-type: inline-size; width: 100%; height: 100%; min-width: 0; user-select: none; -webkit-user-select: none; font-family: var(--cn-font); }
.cncard .cn-in {
  position: absolute; inset: 0; border-radius: 6cqw; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 25% 15%, rgba(255,255,255,.6), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.04) 0 1px, transparent 1px 3px),
    linear-gradient(172deg, #f7efdc, #e8dab8);
  box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.3), inset 0 0 0 .7cqw rgba(255,255,255,.7), inset 0 0 0 1.5cqw rgba(140,105,50,.16);
  transition: box-shadow .2s, transform .2s;
}
/* the codename again, upside down, for whoever sits across the table */
.cncard .cn-echo { position: absolute; left: 18%; right: 6%; top: 9%; text-align: center; transform: rotate(180deg); font-size: min(10cqw, calc(95cqw / var(--len, 6))); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(84,60,26,.34); white-space: nowrap; overflow: hidden; line-height: 1.1; }
/* a thumbprint seal in the corner */
.cncard .cn-seal { position: absolute; left: 6cqw; top: 6.5cqw; width: 12cqw; height: 12cqw; border-radius: 50% 50% 46% 54%; background: repeating-radial-gradient(ellipse at 45% 60%, rgba(150,62,40,.34) 0 .55cqw, transparent .55cqw 1.35cqw); transform: rotate(-18deg); opacity: .9; }
.cncard .cn-band { position: absolute; left: 6%; right: 6%; bottom: 9%; height: 46%; border-radius: 3cqw; background: #fffdf7; box-shadow: inset 0 0 0 .5cqw rgba(120,90,40,.16), 0 .5cqw 1.2cqw rgba(80,60,20,.14); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 2.5cqw; }
.cncard .cn-w { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .025em; color: #1d1813; white-space: nowrap; line-height: 1; font-size: min(17cqw, calc(172cqw / var(--len, 6))); }

/* the key, as the spymasters see it (and everyone at the end) */
.cncard.key-red .cn-in { box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.3), inset 0 0 0 2.2cqw #d9412f; }
.cncard.key-red .cn-band { background: #d9412f; box-shadow: none; }
.cncard.key-blue .cn-in { box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.3), inset 0 0 0 2.2cqw #2d6fd6; }
.cncard.key-blue .cn-band { background: #2d6fd6; box-shadow: none; }
.cncard.key-red .cn-w, .cncard.key-blue .cn-w, .cncard.key-assassin .cn-w { color: #fff; }
.cncard.key-bystander .cn-in { box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.3), inset 0 0 0 2.2cqw #cdb889; }
.cncard.key-bystander .cn-band { background: #e6d6b0; box-shadow: none; }
.cncard.key-assassin .cn-in { background: radial-gradient(ellipse 90% 70% at 25% 15%, rgba(255,255,255,.08), transparent 60%), linear-gradient(172deg, #3a3a3f, #141416); box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.3), inset 0 0 0 2.2cqw #0b0b0c; }
.cncard.key-assassin .cn-band { background: #0b0b0c; box-shadow: inset 0 0 0 .6cqw #e5392b; }
.cncard.key-assassin .cn-echo { color: rgba(255,255,255,.28); }
.cncard.key-assassin .cn-seal { background: repeating-radial-gradient(ellipse at 45% 60%, rgba(229,57,43,.6) 0 .55cqw, transparent .55cqw 1.35cqw); }

/* revealed: agents, bystanders and the assassin */
.cncard[class*="is-"] .cn-in {
  background:
    radial-gradient(ellipse 70% 80% at 50% 30%, rgba(255,255,255,.2), transparent 65%),
    radial-gradient(circle, var(--dot) 22%, transparent 24%) 0 0 / 4.5cqw 4.5cqw,
    linear-gradient(165deg, var(--bg1), var(--bg2));
  box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.32), inset 0 0 0 .8cqw rgba(255,255,255,.22);
}
.cncard .cn-fig { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 104%; display: block; }
.cncard .cn-tag { position: absolute; right: 3.5cqw; bottom: 3.5cqw; max-width: 74%; background: rgba(8,8,12,.62); border-radius: 2.4cqw; padding: 1.4cqw 3cqw; display: flex; overflow: hidden; }
.cncard .cn-tag .cn-w { color: #fff; font-size: min(9.5cqw, calc(90cqw / var(--len, 6))); letter-spacing: .04em; }
.cncard.is-bystander .cn-tag { background: rgba(70,52,28,.72); }
.cncard.is-assassin .cn-tag { background: #e5392b; }
.cncard.is-assassin .cn-in { box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,.4), inset 0 0 0 .8cqw #e5392b; }

/* the moment a card is touched */
.cncard.cn-flip .cn-in { animation: cn-flip .65s cubic-bezier(.2,1.25,.4,1) both; }
@keyframes cn-flip { 0% { transform: perspective(700px) rotateX(85deg) scale(1.12); filter: brightness(1.6); } 60% { filter: none; } 100% { transform: none; } }
.cncard.is-assassin.cn-flip .cn-in { animation: cn-flip .65s cubic-bezier(.2,1.25,.4,1) both, cn-shake .5s .6s ease-in-out 2; }
@keyframes cn-shake { 25% { transform: translateX(-2.5cqw) rotate(-1.5deg); } 75% { transform: translateX(2.5cqw) rotate(1.5deg); } }
/* at the end, the words nobody touched show the key but stay quieter */
.cncard.cn-ghost .cn-in { opacity: .78; filter: saturate(.8); }

/* small agent tokens for the counters */
.cn-token { display: inline-block; position: relative; border-radius: 22%; overflow: hidden; background: radial-gradient(circle, var(--dot) 22%, transparent 24%) 0 0 / 22% 22%, linear-gradient(165deg, var(--bg1), var(--bg2)); box-shadow: 0 3px 8px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.22); flex: none; }
.cn-token svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
.cn-token.found { background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.14); }
.cn-token.found svg { opacity: .18; filter: grayscale(1); }

/* plain-English help for a card on the key */
.cn-explain { border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; background: var(--fill, rgba(120,120,128,.14)); color: var(--text); }
.cn-explain .cn-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.cn-explain.k-red .cn-xkind { color: #d9412f; }
.cn-explain.k-blue .cn-xkind { color: #2d6fd6; }
.cn-explain.k-assassin .cn-xkind { color: #e5392b; }
.cn-explain p { margin: 5px 0 0; }

/* The table: a briefing room, Red's glow on the left and Blue's on the right, a map
   grid under everything. Dark is the night-time briefing; light is daylight paper. */
.tbl-agency {
  --tbl-edge: #0a0d14; --tbl-rim: #2f384c; --tbl-glow: rgba(255,240,200,.08);
  background:
    radial-gradient(ellipse 42% 70% at 0% 50%, rgba(217,65,47,.22), transparent 70%),
    radial-gradient(ellipse 42% 70% at 100% 50%, rgba(45,111,214,.26), transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255,236,190,.09), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #1c2232 0%, #151a27 60%, #0f131d 100%);
}
[data-theme="light"] .tbl-agency {
  --tbl-edge: #ffffff; --tbl-rim: #d9ccb0; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 42% 70% at 0% 50%, rgba(217,65,47,.13), transparent 70%),
    radial-gradient(ellipse 42% 70% at 100% 50%, rgba(45,111,214,.15), transparent 70%),
    repeating-linear-gradient(0deg, rgba(90,70,30,.055) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(90,70,30,.055) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #f5f0e4 0%, #ece3cf 100%);
}