/* lowkey party games: roles engine (imposter, mafia). Only roles- classes; the rest is party.css. */

.roles-resume { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-radius: 18px; background: var(--box, #f5f5f7); box-shadow: inset 0 0 0 1px var(--box-edge, rgb(0 0 0 / .06)); }
.roles-check { cursor: pointer; }
.roles-check input { width: 22px; height: 22px; accent-color: var(--blue-btn, #0068d6); margin: 0; }
.party-settings label.roles-check { min-height: 44px; }

/* role count steppers */
.roles-steps { display: grid; gap: .45rem; }
.roles-step { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .35rem .5rem .35rem 1rem; border-radius: 18px; background: var(--box, #e1e7da); box-shadow: inset 0 0 0 1px var(--edge, rgb(28 41 37 / .12)); }
[dir="rtl"] .roles-step { padding: .35rem 1rem .35rem .5rem; }
.roles-step-label { flex: 1; font-weight: 600; }
.roles-step-val { min-width: 2ch; text-align: center; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.roles-step-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--bg, #d5dcce); color: var(--ink, #1d1d1f); font-family: inherit; font-weight: 600; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px var(--box-edge, rgb(0 0 0 / .08)); touch-action: manipulation; }
.roles-step-btn:active { transform: scale(.96); }

/* secret card */
.roles-secret { min-height: 16rem; }
.roles-secret.is-imp, .roles-secret.is-mafia { background: var(--bad-soft, #fbe9e7); }
.roles-secret.is-doctor { background: var(--good-soft, #e6f4ec); }
.roles-secret.is-detective { background: var(--blue-soft, #dbe8fb); }

/* headings, centred text */
.roles-head { display: flex; flex-direction: column; gap: .35rem; text-align: center; }
.roles-q { font-family: var(--display, inherit); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 0; }
html[lang="ar"] .roles-q { letter-spacing: 0; line-height: 1.6; }
.roles-mid { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); }
.roles-center { text-align: center; }
.roles-word { min-height: 0; }
.roles-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.roles-top .party-progress { text-align: start; }
.roles-top:has(> :only-child) { justify-content: center; }

/* pick a player */
.roles-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.roles-pick-btn { min-height: 60px; padding: .5rem .8rem; border-radius: 18px; border: 0; background: var(--box, #e1e7da); color: var(--ink, #1c2925); font-family: inherit; font-weight: 700; font-size: 1.15rem; line-height: 1.25; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line, #b3bfac); overflow-wrap: anywhere; touch-action: manipulation; }
.roles-pick-btn.is-on { background: var(--ink, #1c2925); color: var(--cream, #fff6e6); box-shadow: none; }
.roles-pick-btn:active { transform: scale(.98); }

/* narrator script */
.roles-script { min-height: 15rem; }
.roles-script .party-card-text { font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.5rem); }
.roles-script.is-night { background: var(--indigo, #3c4c92); color: var(--cream, #fff6e6); box-shadow: 0 4px 0 #2a3668; }
.roles-script.is-night .party-card-kicker, .roles-script.is-night .party-card-sub, .roles-script.is-night .party-muted { color: inherit; }

/* final roles list */
.roles-reveal { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.roles-reveal li { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; border-radius: 14px; background: var(--box, #e1e7da); box-shadow: inset 0 0 0 1px var(--edge, rgb(28 41 37 / .12)); }
.roles-reveal li.is-mafia { background: var(--bad-soft, #fbe9e7); }
.roles-reveal li.is-out > span { text-decoration: line-through; color: var(--muted, #5e5e63); }
.roles-reveal b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .roles-step-btn:active, .roles-pick-btn:active { transform: none; } }