/* 🃏 Nurse Tina's Card Games (cards.js). Needs games.css for the cabinet (.gm) and the cards (.sc). */

/* ── the host stands BIG beside the board ("a big size icon beside the game board", the Boss 2026-10-29) ──
   phone: a strip under the board (picture + speech); wide screens: a tall picture on the left, speech above it */
.gm.cg:not(.tbl) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
.gm.cg > .gm-top { grid-row: 1; }
.gm.cg > .gm-board { grid-row: 2; min-height: 0; }
.gm.cg > .gm-cast { grid-row: 3; position: relative; height: auto; padding: 4px 2px 0; }
.gm.cg > .gm-foot { grid-row: 4; }
.gm.cg .gm-tina { position: relative; left: auto; bottom: auto; display: flex; align-items: flex-end; gap: 10px; }
.gm.cg .gm-tina img { flex: none; width: clamp(78px, 24vw, 104px); height: auto; aspect-ratio: 3 / 4; border-radius: 18px; object-fit: cover; object-position: 50% 12%;
  border: 3px solid var(--edge, #ffd84a); box-shadow: 0 0 18px var(--glow, #ffd84a88); background: #fff; }
.gm.cg .gm-say { max-width: none; flex: 1; margin-bottom: 8px; font-size: 14px; }
@media (min-width: 900px) and (min-height: 560px) {
  .gm.cg:not(.tbl) { grid-template-columns: minmax(220px, 25vw) minmax(0, 1fr) minmax(0, 6vw); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; }
  .gm.cg > .gm-top { grid-column: 1 / -1; }
  .gm.cg > .gm-board { grid-column: 2; }
  .gm.cg > .gm-foot { grid-column: 2; grid-row: 3; }
  .gm.cg > .gm-cast { grid-column: 1; grid-row: 2 / 4; align-self: end; padding: 0 0 12px; }
  .gm.cg .gm-tina { flex-direction: column-reverse; align-items: stretch; }
  .gm.cg .gm-tina img { width: 100%; max-height: 66vh; aspect-ratio: 3 / 4.4; border-radius: 26px; }
  .gm.cg .gm-say { border-radius: 16px 16px 16px 4px; font-size: 16px; padding: 10px 14px; margin: 0 0 10px; }
}
.gm .sc { isolation: isolate; }   /* a card's name banner stays inside its own card */
/* a deck's own banner across the top of the game (the Boss's art), in place of the title text */
.gm.has-banner .gm-top { display: block; position: relative; text-align: center; }
.gm-banner { display: block; width: auto; max-width: 100%; max-height: 24vh; margin: 0 auto; border-radius: 16px; box-shadow: 0 6px 20px #0008; }
.gm.has-banner .gm-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gm.has-banner .gm-x { position: absolute; left: 6px; top: 6px; z-index: 2; background: #000b; }
.gm.has-banner .gm-hud { margin-top: 8px; }
/* phones: the back button sits ON the banner, so just a round ← in the corner (keeps the banner's title clear; the words stay for screen readers) */
@media (max-width: 899px), (max-height: 559px) {
  .gm.has-banner .gm-x { width: 40px; padding: 0; font-size: 0; border: 2px solid #fffc; }
  .gm.has-banner .gm-x::before { content: '←'; font: 900 22px/1 system-ui, sans-serif; }
}
/* big screens: the banner takes height the long piles need, so a slightly shorter banner + cards sized by the height left */
@media (min-width: 700px) and (min-height: 600px) {
  .gm-banner { max-height: 18vh; }
  .gm.has-banner .sol { --cw: min(10vw, 9vh, 96px); }
}
@media (min-width: 700px) and (min-height: 600px) and (max-height: 760px) {   /* short laptop screens */
  .gm-banner { max-height: 14vh; }
  .gm.has-banner .sol { --cw: min(10vw, 8vh, 96px); }
}

/* ── the six decks: each its own colours, card backs, badge and paper ──
   badge = the round picture in the middle of a card back */
.gm.deck-janette { --edge: #ffd84a; --glow: #b46cff99; background: radial-gradient(circle at 50% 25%, #5d2d93, #1a0b33 75%); }
.gm.deck-janette .sc.down { border-color: #ffd84a; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd84a' fill-opacity='.22' d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") 0 0 / 34% auto,
    linear-gradient(135deg, #8a46d6, #3d1a7a); }
.gm.deck-janette .sc-paw { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237d3cc4' d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E") center / 66% no-repeat; }
.gm.deck-janette .sc.pip { box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff, inset 0 0 0 3px #c9a2ff; }

.gm.deck-bat { --edge: #ff8fc0; --glow: #ff6fa577; background: radial-gradient(circle at 50% 20%, #23305e, #070a1c 75%); }
.gm.deck-bat .sc.down { border-color: #ff8fc0; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.2' d='M12 9c-.8 0-1.4.5-1.6 1.1L9.6 8.6 9.3 10C7.8 8.6 5.2 7.9 2 8.4c1.6 1 2.4 2.4 2.5 4 1.2-.7 2.6-.6 3.6.3.5-1 1.3-1.5 2.1-1.5.4 1.3 1 2.2 1.8 2.6.8-.4 1.4-1.3 1.8-2.6.8 0 1.6.5 2.1 1.5 1-.9 2.4-1 3.6-.3.1-1.6.9-3 2.5-4-3.2-.5-5.8.2-7.3 1.6l-.3-1.4-.8 1.5C13.4 9.5 12.8 9 12 9z'/%3E%3C/svg%3E") 0 0 / 46% auto,
    radial-gradient(circle at 70% 25%, #fff6c8 0 6%, #0000 7%), linear-gradient(160deg, #2b2f6e, #0d0f2b); }
.gm.deck-bat .sc-paw { background: #1d1f46 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff8fc0' d='M12 9c-.8 0-1.4.5-1.6 1.1L9.6 8.6 9.3 10C7.8 8.6 5.2 7.9 2 8.4c1.6 1 2.4 2.4 2.5 4 1.2-.7 2.6-.6 3.6.3.5-1 1.3-1.5 2.1-1.5.4 1.3 1 2.2 1.8 2.6.8-.4 1.4-1.3 1.8-2.6.8 0 1.6.5 2.1 1.5 1-.9 2.4-1 3.6-.3.1-1.6.9-3 2.5-4-3.2-.5-5.8.2-7.3 1.6l-.3-1.4-.8 1.5C13.4 9.5 12.8 9 12 9z'/%3E%3C/svg%3E") center / 86% no-repeat; border-color: #ff8fc0; }
.gm.deck-bat .sc.pip { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a4a8a' fill-opacity='.13' d='M12 9c-.8 0-1.4.5-1.6 1.1L9.6 8.6 9.3 10C7.8 8.6 5.2 7.9 2 8.4c1.6 1 2.4 2.4 2.5 4 1.2-.7 2.6-.6 3.6.3.5-1 1.3-1.5 2.1-1.5.4 1.3 1 2.2 1.8 2.6.8-.4 1.4-1.3 1.8-2.6.8 0 1.6.5 2.1 1.5 1-.9 2.4-1 3.6-.3.1-1.6.9-3 2.5-4-3.2-.5-5.8.2-7.3 1.6l-.3-1.4-.8 1.5C13.4 9.5 12.8 9 12 9z'/%3E%3C/svg%3E") 30% 70% / 60% auto no-repeat, #f6f2ff;
  box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff, inset 0 0 0 3px #b9a8ff; }

.gm.deck-mindy { --edge: #ffd84a; --glow: #ffd84a77; background: radial-gradient(circle at 50% 22%, #3a2a14, #0b0806 75%); }
.gm.deck-mindy .sc.down { border-color: #ffd84a; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd84a' fill-opacity='.28' d='M3 17h18l-1.5-10-4.5 4-3-7-3 7-4.5-4zM3 18.5h18v2H3z'/%3E%3C/svg%3E") 0 0 / 38% auto,
    linear-gradient(135deg, #2a2116, #050403); }
.gm.deck-mindy .sc-paw { background: #120d07 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd84a' d='M3 17h18l-1.5-10-4.5 4-3-7-3 7-4.5-4zM3 18.5h18v2H3z'/%3E%3C/svg%3E") center / 66% no-repeat; }
.gm.deck-mindy .sc.pip { box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff, inset 0 0 0 3px #e6c45a; }

.gm.deck-tina { --edge: #ff8fc0; --glow: #ff6fa599; background: radial-gradient(circle at 50% 25%, #6b2252, #1c0718 75%); }
.gm.deck-tina .sc.down { border-color: #fff; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.24' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.6 4.5c2.1 0 3.6 1.2 5.4 3.2 1.8-2 3.3-3.2 5.4-3.2 3.6 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") 0 0 / 34% auto,
    linear-gradient(135deg, #ff7eb3, #d6266f); }
.gm.deck-tina .sc-paw { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8336f' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.6 4.5c2.1 0 3.6 1.2 5.4 3.2 1.8-2 3.3-3.2 5.4-3.2 3.6 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / 62% no-repeat; }

.gm.deck-brett { --edge: #9fd8ff; --glow: #4aa8ff88; background: radial-gradient(circle at 50% 25%, #1d4a7a, #07142a 75%); }
.gm.deck-brett .sc.down { border-color: #fff; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff' fill-opacity='.18'%3E%3Cellipse cx='12' cy='16' rx='5' ry='4.2'/%3E%3Cellipse cx='5.6' cy='10' rx='2.1' ry='2.7'/%3E%3Cellipse cx='9.4' cy='6' rx='2.1' ry='2.8'/%3E%3Cellipse cx='14.6' cy='6' rx='2.1' ry='2.8'/%3E%3Cellipse cx='18.4' cy='10' rx='2.1' ry='2.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40% auto,
    linear-gradient(135deg, #4aa8ff, #1b4f9a); }
.gm.deck-brett .sc-paw { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%232f7fd8'%3E%3Cellipse cx='12' cy='16' rx='5' ry='4.2'/%3E%3Cellipse cx='5.6' cy='10' rx='2.1' ry='2.7'/%3E%3Cellipse cx='9.4' cy='6' rx='2.1' ry='2.8'/%3E%3Cellipse cx='14.6' cy='6' rx='2.1' ry='2.8'/%3E%3Cellipse cx='18.4' cy='10' rx='2.1' ry='2.7'/%3E%3C/g%3E%3C/svg%3E") center / 64% no-repeat; border-color: #9fd8ff; }
.gm.deck-brett .sc.pip { background: #f7fbff; box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff, inset 0 0 0 3px #9fd0ff; }

.gm.deck-mystery { --edge: #7cf6ff; --glow: #7cf6ff77; background: radial-gradient(circle at 50% 20%, #24124a, #04020c 75%); }
.gm.deck-mystery .sc.down { border-color: #7cf6ff; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='18' font-family='Georgia,serif' font-size='18' font-weight='700' text-anchor='middle' fill='%237cf6ff' fill-opacity='.22'%3E%3F%3C/text%3E%3C/svg%3E") 0 0 / 34% auto,
    linear-gradient(135deg, #3b1d78, #0c0620); }
.gm.deck-mystery .sc-paw { background: #0c0620 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='19' font-family='Georgia,serif' font-size='20' font-weight='700' text-anchor='middle' fill='%237cf6ff'%3E%3F%3C/text%3E%3C/svg%3E") center / 80% no-repeat; border-color: #7cf6ff; }
.gm.deck-mystery .sc.pip { box-shadow: 0 2px 4px #0007, inset 0 0 0 2px #fff, inset 0 0 0 3px #8be9ff; }
.gm.cg .sc.art { border-color: var(--edge, #ffd84a); }
.cg-next { flex: none !important; }

/* ── 🎨 each game sits IN the Boss's banner (the Boss, 2026-10-29: "each game needs its banner as its background and the avatar
   big beside the cards … it looks so plain"): the banner fills the screen behind everything, darkened so the cards stay easy to
   read, and the piles sit on a glass table edged in the deck's colour. The team games sit in his Card Games banner.
   Computers: the banner IS the table now, so the strip on top goes, the deck's name becomes a glowing sign, the cards grow ── */
.gm.deck-janette { --deck-bg: url("img/deckbg-janette.webp"); }
.gm.deck-bat { --deck-bg: url("img/deckbg-bat.webp"); }
.gm.deck-mindy { --deck-bg: url("img/deckbg-mindy.webp"); }
.gm.deck-tina { --deck-bg: url("img/deckbg-tina.webp"); }
.gm.deck-brett { --deck-bg: url("img/deckbg-brett.webp"); }
.gm.deck-mystery { --deck-bg: url("img/deckbg-mystery.webp"); }
.gm.cg.tbl { --deck-bg: url("img/deckbg-table.webp"); --edge: #ff8fc0; --glow: #ff6fa577; }
.gm.cg { background: radial-gradient(ellipse at 50% 50%, #0a061a40, #0a061ad0 90%), linear-gradient(#0a061a26, #0a061a8c), var(--deck-bg, none) center / cover no-repeat, #0b0820; }
.gm.cg:not(.tbl) .gm-board { align-content: start; }   /* the piles start at the top of the table and grow down into it */
.gm.cg .gm-board.sol { position: relative; box-sizing: border-box; padding-inline: 14px; max-width: calc(var(--cw) * 7 + 120px); }
.gm.cg .sol::before { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;   /* inside the board: it scrolls, so it clips */
  background: radial-gradient(ellipse at 50% 0%, #ffffff1f, #0000 60%), #0a061aad; border: 2px solid var(--edge, #ffd84a);
  box-shadow: 0 0 30px var(--glow, #ffd84a55), inset 0 0 40px #0008; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gm.tbl .cg-seat, .gm.tbl .cg-mine { background: #0a061ab8; }   /* no blur here: it would trap the speech bubbles under the cards */
@media (min-width: 900px) and (min-height: 560px) {
  .gm.cg:not(.tbl) { grid-template-columns: minmax(240px, 26vw) minmax(0, 1fr) minmax(0, 4vw); }
  .gm.cg .gm-tina img { max-height: 76vh; box-shadow: 0 0 0 5px #0006, 0 0 44px var(--glow, #ffd84a88); }
  .gm.cg.has-poster .gm-tina img { aspect-ratio: auto; height: auto; object-fit: contain; background: none; border-radius: 24px; }   /* the Boss's posters, shown whole */
  .gm.cg.has-banner .gm-banner { display: none; }
  .gm.cg.has-banner .gm-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    padding: 6px 170px 0; font-size: clamp(22px, 2.3vw, 38px); text-shadow: 0 0 14px var(--glow, #ffb84a), 0 2px 6px #000; }
  .gm.cg.has-banner .sol { --cw: min(calc((70vw - 200px) / 7), 11vh, 150px); max-width: calc(var(--cw) * 7 + 110px); }
}
@media (min-width: 900px) and (min-height: 560px) and (max-height: 800px) {   /* short laptop screens: the longest pile (18 cards) still fits */
  .gm.cg.has-banner .sol { --cw: min(calc((70vw - 200px) / 7), 9.4vh, 150px); }
}

/* ── the table: the team across the top, the piles in the middle, you and your hand below ── */
.gm.tbl .gm-board { display: flex; flex-direction: column; gap: 6px; place-content: initial; min-height: 0; width: 100%; max-width: 980px; margin: 0 auto;
  --cw: min(14vw, 76px); --ch: calc(var(--cw) * 1.4); }
.cg-seats { display: flex; justify-content: center; gap: 10px; padding-top: 4px; }
.cg-seat { position: relative; flex: 0 1 170px; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 18px;
  background: #ffffff10; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.cg-seat.on { border-color: #ffd84a; box-shadow: 0 0 16px #ffd84a77; }
.cg-seat.ask { cursor: pointer; border-color: #5cffb0; box-shadow: 0 0 16px #5cffb088; animation: cgask 1s ease-in-out infinite alternate; }
@keyframes cgask { to { transform: translateY(-3px); } }
.cg-face { width: clamp(70px, 22vw, 132px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 14px var(--glow, #7cf6ff88); background: #fff; }
.cg-seats.n3 .cg-face { width: clamp(60px, 19vw, 120px); }
.cg-seat.talk .cg-face { animation: bob .5s ease-in-out infinite alternate; }
.cg-nm { font: 800 14px system-ui, sans-serif; text-align: center; }
.cg-count, .cg-extra { font: 700 12px system-ui, sans-serif; color: #e8dcff; text-align: center; }
.cg-show { display: block; max-width: 30vw; font-size: 11px; color: #ffd84a; }
.cg-bub { position: absolute; z-index: 6; top: calc(100% - 4px); left: 50%; width: max-content; max-width: min(46vw, 260px); padding: 7px 10px; border-radius: 4px 14px 14px 14px;
  background: #fff; color: #3a2440; font: 700 13px/1.3 system-ui, sans-serif; box-shadow: 0 4px 12px #0006; pointer-events: none;
  opacity: 0; transform: translate(-50%, 0) scale(.8); transform-origin: 50% 0; transition: opacity .2s, transform .2s; }
.cg-seat.talk .cg-bub { opacity: 1; transform: translate(-50%, 0); }
/* three at the table: each bubble stays under its own seat (they ran into each other and off the screen) */
.cg-seats.n3 .cg-bub { left: 2px; right: 2px; width: auto; max-width: none; text-align: center; border-radius: 14px; transform: scale(.8); }
.cg-seats.n3 .cg-seat.talk .cg-bub { transform: none; }
.cg-mid { flex: 1; min-height: calc(var(--ch) + 34px); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cg-pile { display: grid; justify-items: center; gap: 4px; font: 700 12px system-ui, sans-serif; color: #e8dcff; }
.cg-pile .sc { position: relative; cursor: pointer; }
.cg-pile .sc-spot { display: block; }
.cg-n { position: absolute; z-index: 2; right: 3px; top: 3px; padding: 1px 6px; border-radius: 8px; background: #000b; color: #fff; font: 800 11px system-ui, sans-serif; }
.cg-suit { font-size: 15px; color: #fff; } .cg-suit.r { color: #ff8fb0; }
.cg-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cg-acts:empty { display: none; }
.cg-acts .big2 { flex: none; padding: 12px 18px; }
.cg-knock { background: #3fbf7f !important; box-shadow: 0 4px 0 #2a8a5a !important; }
.cg-msg { min-height: 1.4em; margin: 0; text-align: center; font: 700 14px/1.35 system-ui, sans-serif; color: #fff; }
.cg-mine { display: flex; align-items: flex-end; gap: 10px; padding: 6px 8px; border-radius: 18px; border: 2px solid transparent; transition: border-color .2s; }
.cg-mine.on { border-color: #ffd84a; box-shadow: 0 0 16px #ffd84a55; }
.cg-me { flex: none; display: grid; justify-items: center; gap: 2px; font: 800 13px system-ui, sans-serif; }
.cg-av { width: clamp(54px, 15vw, 92px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #ffffff1c; border: 3px solid #fff; font-size: clamp(32px, 9vw, 56px); line-height: 1; }
.cg-hand { flex: 1; min-width: 0; display: flex; padding-top: 20px; --cw: min(16vw, 86px); --ch: calc(var(--cw) * 1.4); }
.cg-hand .sc { flex: none; position: relative; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cg-hand .sc.can { box-shadow: 0 0 0 3px #5cffb0, 0 0 14px #5cffb0; }
.cg-hand .sc.sel { transform: translateY(-18px); box-shadow: 0 0 0 3px #ffd84a, 0 0 16px #ffd84a; }
.cg-hand .sc.meld::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 4px; background: #3fbf7f; z-index: 3; }
.sc.can.cg-stock, .sc.can.cg-top { box-shadow: 0 0 0 3px #5cffb0, 0 0 16px #5cffb0; }
.gm.tbl .gm-foot .big2 { flex: none; }
/* computers: the team games get bigger faces, bigger cards and a wider table (after the rules above, so it wins) */
@media (min-width: 900px) and (min-height: 560px) {
  .gm.tbl .gm-board { max-width: 1240px; --cw: min(8vw, 12vh, 118px); }
  .gm.tbl .cg-hand { --cw: min(9vw, 15vh, 132px); }
  .gm.tbl .cg-seats .cg-face { width: min(15vh, 150px); max-width: none; }
  .gm.tbl .cg-seat { flex-basis: 230px; }
  .gm.tbl .gm-title { font-size: clamp(22px, 2.3vw, 38px); }
}

/* Crazy Eights: pick the new suit */
.cg-pick-suit { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px; border-radius: 20px; background: #fff; color: #3a2440;
  box-shadow: 0 10px 40px #000a; text-align: center; font: 800 16px system-ui, sans-serif; }
.cg-pick-suit p { margin: 0 0 10px; }
.cg-pick-suit button { width: 60px; height: 60px; margin: 4px; border: 3px solid #3a2440; border-radius: 14px; background: #fffaf2; font-size: 34px; color: #1c1c2e; cursor: pointer; }
.cg-pick-suit button.r { color: #d6264f; }

/* Gin Rummy: the hand-end showdown */
.cg-result { width: 100%; display: grid; gap: 8px; justify-items: center; padding-top: 44px; }   /* room for the team's speech bubble above */
.cg-res-line { margin: 0; font: 800 16px system-ui, sans-serif; color: #ffd84a; text-align: center; }
.cg-res-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.cg-res-row > b { width: 100%; text-align: center; font: 800 13px system-ui, sans-serif; }
.cg-set { display: inline-flex; padding: 3px; border-radius: 8px; background: #3fbf7f44; }
.cg-set.dead { background: #ff6fa533; }
.sc.mini { --cw: 34px; --ch: 48px; display: inline-block; position: relative; }
.sc.mini + .sc.mini { margin-left: -12px; }
.sc.mini .sc-name, .sc.mini img { display: none; }

/* ── who's playing ── */
.cg-choose { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: #0b0820c4; }
.cg-ch-in { position: relative; width: min(100%, 560px); max-height: 100%; overflow: auto; padding: 24px 20px 20px; border-radius: 26px; background: #fff7ec; color: #3a2440;
  font-family: system-ui, sans-serif; text-align: center; box-shadow: 0 20px 60px #000a; }
.cg-ch-in h2 { margin: 0 40px 4px; font-size: 24px; }
.cg-ch-in p { margin: 6px 0 12px; font-weight: 600; }
.cg-ch-x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #3a24401a; color: #3a2440; font-size: 18px; cursor: pointer; }
.cg-ch-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-ch-team button { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 3px solid #3a244022; border-radius: 20px; background: #fff; color: #3a2440; font: 800 15px system-ui, sans-serif; cursor: pointer; }
.cg-ch-team button:hover, .cg-ch-team button:focus-visible { border-color: #ff6fa5; }
.cg-ch-team img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #ff8fc0; }
.cg-three { display: flex; } .cg-three img { width: 52px; height: 52px; margin: 16px -8px 16px 0; }
.cg-ch-av { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cg-ch-av button { width: 48px; height: 48px; border: 3px solid transparent; border-radius: 50%; background: #3a24400f; font-size: 26px; cursor: pointer; }
.cg-ch-av button[aria-pressed="true"] { border-color: #ff6fa5; background: #ff6fa522; }

/* ── the room ── */
.cg-row { margin-top: clamp(40px, 6vw, 80px); }
.cg-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cg-row-head h2 { font-size: var(--step-lead, 28px); line-height: 1.1; }
.cg-story, .cg-games { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.cg-story { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cg-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cg-deck > button, .cg-game > button { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 14px; border: 0; border-radius: 22px; text-align: left;
  background: var(--surface, #1b1240); color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 3px var(--tile, #ffd84a); transition: transform .15s; }
.cg-deck > button:hover, .cg-game > button:hover { transform: translateY(-3px); }
.cg-deck b, .cg-game b { font-size: 18px; line-height: 1.15; }
.cg-blurb { font-size: 14px; line-height: 1.35; opacity: .85; }
.cg-best { margin-top: auto; font-weight: 700; color: var(--accent, #ffd84a); }
.cg-pic { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--tilebg, #2a1a5a); }
.cg-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.cg-num { position: absolute; left: 8px; top: 8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #000a; color: #fff; font: 800 15px system-ui, sans-serif; }
.d-janette { --tile: #b46cff; --tilebg: #3d1a7a; } .d-bat { --tile: #ff8fc0; --tilebg: #0d0f2b; } .d-mindy { --tile: #ffd84a; --tilebg: #050403; }
.d-tina { --tile: #ff6fa5; --tilebg: #d6266f; } .d-brett { --tile: #4aa8ff; --tilebg: #1b4f9a; } .d-mystery { --tile: #7cf6ff; --tilebg: #0c0620; }
.cg-deck.locked > button { box-shadow: inset 0 0 0 3px #ffffff33; cursor: not-allowed; }
.cg-deck.locked .cg-pic img { filter: grayscale(1) brightness(.45) blur(1px); }
.cg-deck.locked b { opacity: .7; }
.cg-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(34px, 4vw, 54px); filter: drop-shadow(0 4px 8px #000); }
.cg-deck.nope > button { animation: pbno .35s; }
.cg-deck.myst .cg-pic { background: radial-gradient(circle at 50% 40%, #3b1d78, #04020c 80%); }
.cg-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(54px, 7vw, 90px); animation: cgq 1.6s ease-in-out infinite alternate; }
@keyframes cgq { from { transform: rotate(-8deg) scale(.95); opacity: .7; } to { transform: rotate(8deg) scale(1.05); opacity: 1; } }
.cg-deck.myst .cg-lock { place-items: end center; padding-bottom: 10px; font-size: 30px; }
/* 🔓 unlocked but not opened yet: the mystery tile glows, waiting for a tap */
.cg-deck.myst.lit button { animation: cglit 1.6s ease-in-out infinite; }
.cg-deck.myst.lit .cg-pic { background: radial-gradient(circle at 50% 40%, #8a4dff, #1a0b3a 80%); }
.cg-deck.myst.lit .cg-q { filter: drop-shadow(0 0 14px #ffd84a); }
@keyframes cglit { 0%, 100% { box-shadow: 0 0 0 3px #ffd84a, 0 0 16px #ffd84a88; } 50% { box-shadow: 0 0 0 3px #fff3b0, 0 0 38px #ffd84aee; } }
/* the reveal: the Boss's unlocked banner flashes on, then the real game fades in over it */
.cg-reveal { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #3b1d78, #04020c 75%); color: #fff; text-align: center; overflow-y: auto; }
.cg-rv-stage { display: grid; place-items: center; width: min(94vw, 1100px, 150vh); }   /* both banners in one spot: the real one can be tall */
.cg-rv-a { grid-area: 1 / 1; display: block; width: 100%; transition: opacity 1.4s ease; height: auto; border-radius: 18px; box-shadow: 0 0 44px #b07cffaa; animation: cgunlock 1.6s ease-out; }
@keyframes cgunlock { 0% { transform: scale(.9) rotate(-1deg); filter: brightness(.35) saturate(.4); } 30% { transform: scale(.95) rotate(1deg); } 65% { transform: scale(1.03); filter: brightness(1.5) saturate(1.2); } 100% { transform: none; filter: none; } }
.cg-rv-b { grid-area: 1 / 1; display: block; width: auto; max-width: 100%; height: auto; max-height: min(66vh, 900px); border-radius: 18px; box-shadow: 0 0 44px #7cf6ff88; opacity: 0; transition: opacity 1.4s ease; }
.cg-reveal.real .cg-rv-b { opacity: 1; } .cg-reveal.real .cg-rv-a { opacity: 0; }
.cg-rv-card { width: 100%; aspect-ratio: 1100 / 466; max-height: none; display: flex; align-items: center; justify-content: center; gap: 4%; background: radial-gradient(circle at 30% 50%, #2c1660, #04020c 80%); box-shadow: inset 0 0 0 3px #7cf6ff; }
.cg-rv-card img { height: 92%; width: auto; }
.cg-rv-card b { font: 900 clamp(20px, 5vw, 48px) system-ui, sans-serif; color: #7cf6ff; text-shadow: 0 0 18px #7cf6ff; letter-spacing: 2px; }
.cg-rv-say { max-width: 640px; margin: 0; min-height: 2.6em; font: 700 clamp(16px, 4vw, 20px) system-ui, sans-serif; }
.cg-rv-go { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 12px; align-items: center; visibility: hidden; opacity: 0; transition: opacity .5s; }
.cg-reveal.ready .cg-rv-go { visibility: visible; opacity: 1; }
.cg-rv-go .big2 { flex: none; padding: 14px 26px; font-size: 19px; }
.cg-rv-later { min-height: 44px; padding: 0 12px; border: 0; background: none; color: #fff; font: 600 15px system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cg-deck.myst.lit button, .cg-rv-a { animation: none; } .cg-rv-a, .cg-rv-b, .cg-rv-go { transition: none; } }
.cg-gem { font-size: 46px; line-height: 1; }
.cg-faces { display: flex; } .cg-faces img { width: 46px; height: 46px; margin-right: -8px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface, #1b1240); }
.g-c8 { --tile: #ffd84a; } .g-fish { --tile: #7cf6ff; } .g-gin { --tile: #5cffb0; }
@media (max-width: 1100px) { .cg-story { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* phones: the six decks stay ONE row (the Boss: "the whole top line will be solitaire games"), swiped sideways */
@media (max-width: 700px) {
  .cg-story { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; overscroll-behavior-x: contain; }
  .cg-deck { scroll-snap-align: start; }
  .cg-games { grid-template-columns: 1fr; }
}
/* Story Mode / Single Player: the switch, the Boss's banner for the mode, ✓ marks, the end boss */
.cg-modes { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: #ffffff14; }
.cg-modes button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.cg-modes button[aria-pressed="true"] { background: #ffd84a; color: #2a1a00; }
.cg-sol-banner { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: clamp(14px, 2vw, 26px); box-shadow: 0 10px 30px #0007; }
.cg-mode-note { margin: 14px 0 0; font-weight: 600; }
.cg-check { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #3fbf7f; color: #fff;
  font: 900 24px/1 system-ui, sans-serif; border: 3px solid #fff; box-shadow: 0 2px 8px #0008; }
.cg-deck.done > button { box-shadow: inset 0 0 0 3px #3fbf7f; }
.cg-crown { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #000b; color: #ffd84a; font: 900 12px system-ui, sans-serif; letter-spacing: 1px; white-space: nowrap; }
.cg-deck.boss > button { box-shadow: inset 0 0 0 3px #ffd84a, 0 0 22px #ffd84a66; }
.cg-boss-wins { font-size: 22px; letter-spacing: 2px; color: #ffd84a; }
@media (prefers-reduced-motion: reduce) { .cg-q, .cg-seat.ask, .cg-seat.talk .cg-face { animation: none; } }

/* ── 🏆 the Ultimate Boss Challenge: boss trading cards (our own design until the Boss's card art comes) + the Badge of Honor ── */
.cg-ub-banner { display: block; width: 100%; max-width: 520px; height: auto; margin: 6px auto 8px; border-radius: 18px; box-shadow: 0 10px 30px #0008; }
.cg-cardset { margin-top: 20px; }
.cg-cardset h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; }
.cg-set-n { padding: 2px 10px; border-radius: 999px; background: #ffffff1c; font-size: 14px; }
.cg-set-how { margin: 4px 0 10px; font-size: 14px; opacity: .85; }
.cg-cards { display: flex; gap: 14px; margin: 0; padding: 6px 4px 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.cg-cards > li { flex: none; scroll-snap-align: start; }
.bc { position: relative; display: flex; flex-direction: column; width: 150px; aspect-ratio: 5 / 7; padding: 7px; border-radius: 14px; overflow: hidden; color: #2a1a3a;
  background: linear-gradient(160deg, #fff, #f1e9ff); box-shadow: 0 0 0 3px var(--tile, #ffd84a), 0 8px 18px #0007; font: 600 10px/1.25 system-ui, sans-serif; text-align: left; }
.bc.s-story { background: linear-gradient(160deg, #fff8d6, #ffe48a 55%, #fff3c4); box-shadow: 0 0 0 3px #ffd84a, 0 0 18px #ffd84a99, 0 8px 18px #0007; }
.bc.s-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffffff88 50%, transparent 65%); background-size: 260% 100%; animation: bcshine 3.5s linear infinite; pointer-events: none; }
@keyframes bcshine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.bc-top { display: block; text-align: center; }
.bc-top b { display: block; overflow: hidden; font: 900 13px/1.1 system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.bc-tag { position: absolute; left: 4px; top: 4px; padding: 2px 5px; border-radius: 6px; background: var(--tilebg, #7d3cc4); color: #fff; font: 900 8px system-ui, sans-serif; }
.bc.s-story .bc-tag { background: #9a6a00; }
.bc-tag { font-style: normal; box-shadow: 0 1px 3px #0006; }
.bc-pic { position: relative; flex: 1; min-height: 0; margin: 5px 0 4px; overflow: hidden; border-radius: 9px; background: var(--tilebg, #7d3cc4); box-shadow: inset 0 0 0 2px var(--tile, #ffd84a); }
.bc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.bc-role { color: var(--tilebg, #7d3cc4); font: 800 9px system-ui, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.bc.d-mindy .bc-role, .bc.d-bat .bc-role { color: #5a3a8a; }
.bc-pow { margin-top: 3px; padding: 4px 5px; border-radius: 7px; background: #ffffffb8; }
.bc-pow b { display: block; font: 900 11px system-ui, sans-serif; }
.bc-foot { margin-top: 4px; font: 700 8px system-ui, sans-serif; text-align: right; opacity: .75; }
.bc.art { padding: 0; } .bc.art img { width: 100%; height: 100%; object-fit: cover; }
.bc.no { justify-content: center; align-items: center; gap: 6px; color: #fff; text-align: center; background: repeating-linear-gradient(45deg, #241448 0 10px, #2c1a58 10px 20px); box-shadow: 0 0 0 2px #ffffff33; }
.bc-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: grayscale(1); }
.bc-q { position: relative; font-size: 34px; }
.bc-how { position: relative; padding: 0 6px; font: 700 11px/1.3 system-ui, sans-serif; }
.cg-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.cg-badge-lock { flex: 1; min-width: 180px; margin: 0; font-size: 14px; opacity: .85; }
.cg-badge-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 220px; }
.cg-badge-acts .btn { flex: 1 1 140px; min-height: 46px; padding: 8px 14px; border: 0; border-radius: 999px; background: #ffd84a; color: #2a1a3a; font: 800 15px system-ui, sans-serif; cursor: pointer; }
.cg-badge-acts .btn:hover { background: #fff0a8; }
.bdg { position: relative; flex: none; width: 150px; height: 188px; }
.bdg-rib { position: absolute; left: 50%; top: 0; width: 72px; height: 72px; transform: translateX(-50%); background: linear-gradient(90deg, #2f7fd8 0 33%, #fff 33% 66%, #2f7fd8 66%); clip-path: polygon(0 0, 100% 0, 80% 100%, 50% 80%, 20% 100%); }
.bdg.s-story .bdg-rib { background: linear-gradient(90deg, #b31d4b 0 33%, #ffd84a 33% 66%, #b31d4b 66%); }
.bdg-medal { position: absolute; left: 0; right: 0; bottom: 0; display: grid; place-items: center; height: 150px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #fff6c2, #ffd84a 55%, #b8860b); box-shadow: 0 0 0 5px #fff3b0, 0 0 26px #ffd84aaa, 0 8px 18px #0008; }
.bdg-in { display: grid; place-content: center; justify-items: center; width: 122px; height: 122px; border: 2px solid #8a5a00; border-radius: 50%; color: #5a3a00; text-align: center; }
.bdg-in i { font-size: 28px; font-style: normal; line-height: 1; }
.bdg-in b { margin-top: 3px; font: 900 12px system-ui, sans-serif; letter-spacing: .5px; }
.bdg-in small { max-width: 104px; font: 800 9px/1.15 system-ui, sans-serif; }
.bdg-in em { margin-top: 2px; font: italic 700 9px system-ui, sans-serif; }
.bdg.no { filter: grayscale(1) brightness(.55); opacity: .7; }
.cg-newcard { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%; margin: 2px 0 6px; }
.cg-newcard p { width: 100%; margin: 0; color: #ffd84a; font: 900 17px system-ui, sans-serif; text-align: center; }
.cg-newcard .bc { width: 150px; animation: bcpop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes bcpop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.cg-badge-pop { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(circle at 50% 35%, #4b2a8c, #04020c 75%); color: #fff; text-align: center; }
.cg-bp-in { position: relative; display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 520px; }
.cg-bp-in .bdg { animation: bcpop .9s cubic-bezier(.2, 1.5, .4, 1) both; }
.cg-bp-in .gm-star { pointer-events: none; }   /* the celebration stars never catch a tap */
.cg-bp-say { margin: 0; font: 800 clamp(17px, 4.4vw, 22px) system-ui, sans-serif; }
.cg-bp-in .cg-badge-acts { width: 100%; }
.cg-print { display: none; }
@media print {
  html.cg-printing body > *:not(.cg-print) { display: none !important; }
  html.cg-printing body { background: #fff !important; }
  html.cg-printing .cg-print { display: block; color: #2a1a3a; font: 600 14px system-ui, sans-serif; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cg-print .bdg { margin: 8px auto 12px; }
  .cg-pr-top { margin: 0 0 8px; font: 900 26px system-ui, sans-serif; }
  .cg-pr-to { margin: 10px 0 4px; font-size: 20px; } .cg-pr-line { display: inline-block; width: 260px; border-bottom: 2px solid #2a1a3a; }
  .cg-pr-for { margin: 0 0 14px; font-size: 16px; }
  .cg-pr-cards { display: grid; grid-template-columns: repeat(3, 150px); justify-content: center; gap: 14px; }
  .cg-print .bc::after { display: none; }
  .cg-pr-date { margin-top: 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bc.s-story::after, .cg-newcard .bc, .cg-bp-in .bdg { animation: none; } }

/* the page around the room */
.brag { width: min(94vw, 34rem); max-height: 92svh; overflow-y: auto; }
.brag .chal-q { margin: 16px 0 8px; font-weight: 600; }
.brag .chal-gap { margin-top: 18px; } .brag .chal-opt { font-weight: 400; }
.brag .chal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.brag .chal-chips button { min-height: 44px; padding: 0 16px; border: 2px solid var(--paper-ink); border-radius: 999px; background: none; color: var(--paper-ink); font: inherit; cursor: pointer; }
.brag .chal-chips button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.brag .dare-row + label { margin-top: 14px; }
.cg-back { margin-bottom: 16px; font-weight: 600; }
.cg-hero { padding: clamp(24px, 4vw, 56px) 0 0; }
.cg-banner { display: block; width: 100%; height: auto; border-radius: clamp(16px, 2.4vw, 32px); box-shadow: 0 12px 40px #0008; }
.cg-lead { max-width: 40ch; margin-top: 20px; }