/* lowkey party games: deck engine. Only deck- classes; shared look lives in party.css. */

.deck-play, .deck-end { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.deck-center { text-align: center; }
.deck-note { text-align: center; background: var(--box, #e1e7da); border-radius: 14px; padding: .5rem .9rem; }

/* top row: progress, tally, small buttons */
.deck-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.deck-top .party-meta { margin: 0; }
.deck-top-btns { display: flex; gap: .4rem; flex-wrap: wrap; }
.deck-tally strong { color: var(--ink, #1d1d1f); font-variant-numeric: tabular-nums; }

.deck-card { min-height: 14rem; }
.deck-kicker { font-size: 1.05rem; }

/* would you rather: two big options */
/* option A is teal, option B is brick; the mustard "or" sits on the seam */
.deck-wyr { display: flex; flex-direction: column; gap: .6rem; text-align: center; }
.deck-wyr .party-card-kicker { font-size: 1.15rem; color: var(--ink-2, #2f3d37); margin-top: .2rem; }
.deck-option {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 7.6rem;
  padding: 1.1rem 2.7rem; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--teal, #1d6b66); color: var(--cream, #fff6e6);
  font-family: var(--display, inherit); text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.deck-or ~ .deck-option { background: var(--brick, #ad4930); }
.deck-option::before { content: "A"; position: absolute; top: .6rem; inset-inline-start: .7rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .22); font: 700 1rem/1 var(--body, inherit); }
.deck-or ~ .deck-option::before { content: "B"; }
html[lang="ar"] .deck-option::before { content: "أ"; }
html[lang="ar"] .deck-or ~ .deck-option::before { content: "ب"; }
.deck-option.is-static { cursor: default; }
.deck-option:active { transform: scale(.99); }
.deck-option.is-on { box-shadow: 0 0 0 4px var(--tray, #c5cfbd), 0 0 0 8px var(--ink, #1c2925); }
.deck-option.is-on::after { content: "✓"; position: absolute; top: .6rem; inset-inline-end: .7rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--cream, #fff6e6); color: var(--ink, #1c2925); font: 800 1.1rem/1 var(--body, inherit); }
.deck-option-text { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
html[lang="ar"] .deck-option-text { letter-spacing: 0; line-height: 1.5; }
.deck-or { position: relative; z-index: 1; align-self: center; display: grid; place-items: center; width: 3rem; height: 3rem; margin: -1.15rem 0; border-radius: 50%; background: var(--mustard, #e3b04b); color: var(--mustard-ink, #2a2110); font: 800 1rem/1 var(--display, inherit); text-transform: uppercase; box-shadow: 0 0 0 5px var(--tray, #c5cfbd); }
html[lang="ar"] .deck-or { font-size: 1.15rem; }

/* name chips: never have I ever, most likely to */
.deck-who { display: flex; flex-direction: column; gap: .6rem; }
.deck-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.deck-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  min-height: 60px; min-width: 6.5rem; padding: .45rem 1.1rem; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--box, #e1e7da); color: var(--ink, #1c2925);
  box-shadow: inset 0 0 0 1.5px var(--line, #b3bfac);
  font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.deck-chip-name { font-weight: 700; font-size: 1.15rem; }
.deck-chip-n { font-size: .85rem; color: var(--muted, #5e5e63); font-variant-numeric: tabular-nums; }
.deck-chip.is-on { background: var(--ink, #1c2925); color: var(--cream, #fff6e6); box-shadow: none; }
.deck-chip.is-on .deck-chip-n { color: #c9d6c6; }
.deck-chip.is-out:not(.is-on) { opacity: .45; cursor: not-allowed; }
.deck-chip.is-out .deck-chip-name { text-decoration: line-through; }

/* vote countdown */
.deck-count { text-align: center; font-family: var(--display, inherit); font-size: clamp(4rem, 3rem + 8vw, 7rem); font-weight: 800; line-height: 1; min-height: 0; font-variant-numeric: tabular-nums; }
.deck-count:empty { display: none; }
.deck-count.is-go { color: var(--good, #1a7f4b); font-size: clamp(2.6rem, 2rem + 4vw, 4rem); }

/* truth or dare buttons */
.deck-tod { display: flex; gap: .6rem; }
.deck-tod > .deck-tod-btn { flex: 1 1 0; min-height: 110px; border-radius: 22px; font: 800 1.7rem/1.1 var(--display, inherit); color: var(--cream, #fff6e6); }
.deck-tod-btn.is-truth { background: var(--ocean, #28608e); box-shadow: 0 4px 0 #1b4365; }
.deck-tod-btn.is-dare { background: var(--brick, #ad4930); box-shadow: 0 4px 0 #7a3120; }

/* end screens */
.deck-end { align-items: stretch; }
.deck-end-head { font-family: var(--display, inherit); font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; text-align: center; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
html[lang="ar"] .deck-end-head { letter-spacing: 0; line-height: 1.5; }
.deck-board { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.deck-board li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--box, #f5f5f7); border-radius: 14px; padding: .7rem 1rem; font-size: 1.1rem; }
.deck-board li.is-top { background: var(--mustard, #e3b04b); color: var(--mustard-ink, #2a2110); font-weight: 700; }
.deck-board b { font-variant-numeric: tabular-nums; }
.deck-summary { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: .45rem; font-size: 1rem; max-height: 22rem; overflow-y: auto; }
.deck-summary strong { color: var(--ink, #1d1d1f); }
.deck-end-actions > .party-btn.is-big { flex-basis: 100%; }

@media (prefers-reduced-motion: reduce) { .deck-option:active { transform: none; } }