/*
 * RoomPlay shared mode screen (#mode-screen .mode-cards): two cards, blob art on the left, title and
 * description on the right. Layout, sizes, states and motion are the same in every game; a game only
 * colours it through tokens in its *-theme.css (on :root, the game scope or one card, e.g. #mode-team):
 *   --mode-card-bg, --mode-card-ink, --mode-card-muted, --mode-card-border, --mode-card-accent (hover/focus),
 *   --mode-card-shadow, --mode-art-a (main blob), --mode-art-b (teammates / prop), --mode-art-ink (eyes),
 *   --mode-art-mouth.
 * Markup:  <div class="mode-cards"><div class="mode-card" id="mode-solo" role="button" tabindex="0">
 *            <div class="mode-card-icon"><span data-rp-mode-art="solo"></span></div>
 *            <div class="mode-card-title">…</div><div class="mode-card-desc">…</div></div>…</div>
 *   Art: solo | team | word | question from mode-art.js. Do not restyle these classes in a game.
 */
.mode-cards { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 16px 0; }
.mode-cards .mode-card {
  display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center;
  width: 100%; margin: 0; padding: 20px; border-radius: 20px;
  border: 2px solid var(--mode-card-border, transparent);
  background: var(--mode-card-bg, var(--bg-card));
  color: var(--mode-card-ink, var(--text-primary));
  box-shadow: var(--mode-card-shadow, none);
  font: inherit; text-align: left; cursor: pointer; appearance: none;
  transition: transform 160ms ease-out, border-color 160ms ease-out;
}
.mode-cards .mode-card:active { transform: scale(.98); }
.mode-cards .mode-card:focus-visible { outline: 3px solid var(--mode-card-accent, var(--game-accent, currentColor)); outline-offset: 3px; }
@media (hover: hover) { .mode-cards .mode-card:hover { transform: none; border-color: var(--mode-card-accent, var(--game-accent, currentColor)); box-shadow: var(--mode-card-shadow, none); } }
.mode-cards .mode-card-icon { grid-row: 1 / 3; width: 88px; height: 88px; margin: 0; font-size: 0; }
.mode-cards .mode-card-icon .mode-art { display: block; width: 88px; height: 88px; margin: 0; overflow: visible; }
.mode-cards .mode-card-title { align-self: end; margin: 0; font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--mode-card-ink, var(--text-primary)); overflow-wrap: anywhere; }
.mode-cards .mode-card-desc { align-self: start; margin: 4px 0 0; font-size: 16px; line-height: 1.4; color: var(--mode-card-muted, var(--text-secondary)); opacity: 1; }
.mode-card .mode-fill-a { fill: var(--mode-art-a, var(--game-accent, #7c3aed)); }
.mode-card .mode-fill-b { fill: var(--mode-art-b, var(--accent-blue, #3b82f6)); }
.mode-card .mode-pupil, .mode-card .mode-mouth-fill { fill: var(--mode-art-ink, #17191f); }
.mode-card .mode-mouth { stroke: var(--mode-art-mouth, var(--mode-art-ink, #17191f)); }
@media (max-width: 360px) {
  .mode-cards .mode-card { grid-template-columns: 64px 1fr; column-gap: 12px; padding: 16px; }
  .mode-cards .mode-card-icon, .mode-cards .mode-card-icon .mode-art { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Whole blob breathes, eyes included, from its feet; a prop (card, speech bubble) bobs beside it. */
  .mode-card .mode-blob { transform-box: fill-box; transform-origin: 50% 100%; animation: rp-mode-breathe 2.4s ease-in-out infinite; }
  .mode-card .mode-blob--late { animation-delay: -1.2s; }
  .mode-card .mode-blob--side { animation-delay: -.6s; }
  .mode-card .mode-prop { transform-box: fill-box; transform-origin: 0% 100%; animation: rp-mode-bob 2.4s ease-in-out -1.2s infinite; }
  .mode-card:active .mode-blob { animation: rp-mode-hop 320ms ease-out; }
  @keyframes rp-mode-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
  @keyframes rp-mode-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px) rotate(-4deg); } }
  @keyframes rp-mode-hop { 0% { transform: scale(1.08, .88); } 55% { transform: translateY(-8%) scale(.96, 1.06); } 100% { transform: none; } }
}