/* «Грати разом» — екран вибору режиму (js/razom.js). Підключається в dytyna.html після spilne.css. */
.rz { position: fixed; inset: 0; z-index: 140; background: rgba(12,11,16,.72); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(6px); }
@media (min-width: 700px) { .rz { align-items: center; } }
.rz-card { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; background: #fff; color: #1B1F3B; border-radius: 28px 28px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); animation: rzIn .28s ease-out; }
@media (min-width: 700px) { .rz-card { border-radius: 28px; } }
@keyframes rzIn { from { transform: translateY(40px); opacity: 0; } }
.rz-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #F1EEF8; cursor: pointer; font: 700 22px "Golos Text", sans-serif; color: #1B1F3B; }
.rz-h { margin: 0 56px 4px 0; font: 800 22px Unbounded, sans-serif; }
.rz-sub { margin: 0 0 14px; font: 500 15px/1.45 "Golos Text", sans-serif; color: #555B7A; }
.rz-big { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px; padding: 12px 14px; border: 3px solid #ECE8F5; border-radius: 22px; background: #fff; color: inherit; text-align: left; font: inherit; cursor: pointer; min-height: 76px; transition: transform .12s, border-color .12s; }
.rz-big:hover { border-color: #8B6CFF; transform: translateY(-2px); }
.rz-big:active { transform: translateY(2px); }
.rz-ico { flex: none; width: 48px; height: 48px; }
.rz-ico svg { width: 48px; height: 48px; display: block; }
.rz-t b { display: block; font: 800 16px Unbounded, sans-serif; }
.rz-t small { display: block; margin-top: 3px; font: 500 13px/1.35 "Golos Text", sans-serif; color: #555B7A; }
.rz-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.rz-who-l { font: 700 14px "Golos Text", sans-serif; color: #555B7A; margin-right: 4px; }
/* 09.11: на телефоні кнопка «Тато» сама переходила на другий рядок; підпис — окремим рядком, кнопки разом під ним */
@media (max-width: 420px) { .rz-who-l { flex: 1 1 100%; } }
.rz-who-b { --c: #8B6CFF; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 14px 4px 6px; border: 3px solid #ECE8F5; border-radius: 99px; background: #fff; color: #1B1F3B; font: 800 15px "Golos Text", sans-serif; cursor: pointer; }
.rz-who-b.rz-who-s { padding: 4px 16px; }
.rz-who-b.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.rz-who-i { width: 36px; height: 36px; border-radius: 50%; display: block; }
.rz-note { margin: 6px 0 0; font: 500 12px/1.45 "Golos Text", sans-serif; color: #8A8FAA; text-align: center; }
.rz-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.rz-row .btn { flex: 1 1 180px; }
.rz-back { display: block; margin: 6px auto 0; padding: 10px 18px; min-height: 44px; border: 0; border-radius: 14px; background: #F1EEF8; color: #1B1F3B; font: 700 15px "Golos Text", sans-serif; cursor: pointer; }
.rz-code { margin: 10px 0 12px; padding: 18px 10px; border-radius: 22px; background: #1B1F3B; color: #C8F545; text-align: center; font: 800 44px/1 Unbounded, sans-serif; letter-spacing: .12em; user-select: all; }
.rz-wait { margin: 0 0 10px; min-height: 22px; text-align: center; font: 700 15px "Golos Text", sans-serif; color: #555B7A; }
.rz-wait.err { color: #B4232A; }
.rz-input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 14px; border: 3px solid #ECE8F5; border-radius: 18px; text-align: center; font: 800 32px Unbounded, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #1B1F3B; }
.rz-input:focus { border-color: #8B6CFF; }
.rz-card > .btn { width: 100%; margin-bottom: 10px; box-sizing: border-box; }