/* Not Guess Who: face cards, mystery card backs and the game-night table, shared by the
   TV and the phones. A face card fills the width of its box; everything inside it is
   sized from the card's own width (cqw), the card's own box from its parent. */
.gwcard, .gwcard * { box-sizing: border-box; }
.gwcard {
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 100 / 124; container-type: inline-size;
  border-radius: 8% / 6.5%; overflow: hidden; background: #fffdf8; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px rgba(60,40,20,.12);
}
.gwcard .gw-art { display: block; width: 100%; height: auto; aspect-ratio: 1; flex: none; }
.gwcard .gw-nm {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
  font: 800 15cqw/1 "Avenir Next Rounded", "Avenir Next", "Nunito", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em; color: #1f1a17; background: #fffdf8; white-space: nowrap; overflow: hidden; padding: 0 3cqw;
  border-top: .9cqw solid rgba(60,40,20,.1);
}

/* The back of a mystery card: the board's colour, a big question mark. */
.gwback, .gwback * { box-sizing: border-box; }
.gwback {
  position: relative; width: 100%; aspect-ratio: 100 / 124; container-type: inline-size; border-radius: 8% / 6.5%; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 3cqw, transparent 3cqw 6cqw),
    radial-gradient(ellipse at 40% 25%, rgba(255,255,255,.3), transparent 60%),
    var(--gb, #d6342c);
  box-shadow: inset 0 0 0 3.5cqw rgba(255,255,255,.85), inset 0 0 0 5cqw rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
}
.gwback.s-blue { --gb: #1f63c9; }
.gwback i { font: 900 italic 62cqw/1 "Avenir Next", "Nunito", "Helvetica Neue", Arial, sans-serif; color: #fff; text-shadow: 2cqw 2.5cqw 0 rgba(0,0,0,.22); transform: rotate(-8deg); }

/* Plain-English traits for one person. */
.gw-explain { display: flex; flex-direction: column; gap: 4px; }
.gw-xname { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.gw-xabout { font-size: 15px; line-height: 1.3; color: var(--label-2, rgba(60,60,67,.64)); }
.gw-xtraits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gw-xtraits span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--fill, rgba(120,120,128,.14)); }

/* The table: a game night, the red side's glow on the left and the blue side's on the
   right. Dark is the evening; light is a sunny kitchen table. */
.tbl-guesswho {
  --tbl-edge: #0d0f17; --tbl-rim: #353a4f; --tbl-glow: rgba(255,240,200,.08);
  background:
    radial-gradient(ellipse 45% 70% at 0% 40%, rgba(214,52,44,.24), transparent 70%),
    radial-gradient(ellipse 45% 70% at 100% 40%, rgba(31,99,201,.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,214,120,.10), transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #232637 0%, #1a1c29 60%, #13151e 100%);
}
[data-theme="light"] .tbl-guesswho {
  --tbl-edge: #ffffff; --tbl-rim: #e4d8c2; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 45% 70% at 0% 40%, rgba(214,52,44,.12), transparent 70%),
    radial-gradient(ellipse 45% 70% at 100% 40%, rgba(31,99,201,.13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(150,110,60,.035) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #fbf6ec 0%, #f3ead9 100%);
}