/* ============================================================
   Собор / Gather — витражная тема
   Палитра построена на образе церковного витража:
   глубокая ночь-индиго + светящиеся цветные стёкла.
   ============================================================ */

:root {
    --night:        #14152e;   /* фон */
    --night-2:      #1c1e42;   /* карточки */
    --night-3:      #262a5a;   /* подложки/бордеры */
    --amber:        #f0a830;   /* янтарь — главный акцент */
    --amber-soft:   #f6c25f;
    --emerald:      #2f9e78;   /* изумруд */
    --ruby:         #d8556a;   /* рубин */
    --sky:          #5aa9e6;   /* небесно-синий */
    --ink:          #eef0ff;   /* основной текст */
    --ink-dim:      #a5a9d0;   /* приглушённый текст */
    --line:         rgba(255,255,255,.09);
    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       0 20px 50px -20px rgba(0,0,0,.6);
    --maxw:         1180px;
    --font-display: 'Manrope', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

/* ============================================================
   Светлая тема — включается через <html data-theme="light">.
   Витражные акценты сохраняются, но фон становится светлым,
   а текст тёмным. Акценты слегка притушены для контраста на белом.
   ============================================================ */
:root[data-theme="light"] {
    --night:        #f6f5fb;   /* фон */
    --night-2:      #ffffff;   /* карточки */
    --night-3:      #eceaf5;   /* подложки/бордеры */
    --amber:        #d98a12;   /* янтарь (темнее для контраста) */
    --amber-soft:   #b9740a;
    --emerald:      #1f8b64;   /* изумруд */
    --ruby:         #c23c53;   /* рубин */
    --sky:          #2f7fc4;   /* небесно-синий */
    --ink:          #1a1b33;   /* основной текст */
    --ink-dim:      #565a7a;   /* приглушённый текст */
    --line:         rgba(20,21,46,.12);
    --shadow:       0 20px 50px -24px rgba(40,42,90,.28);
}

/* В светлой теме фоновые «витражные» блики мягче */
:root[data-theme="light"] body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(217,138,18,.10), transparent 60%),
        radial-gradient(1000px 500px at 90% 0%, rgba(31,139,100,.09), transparent 55%),
        var(--night);
}

/* Кнопка-акцент в светлой теме — текст светлый для читаемости */
:root[data-theme="light"] .btn-primary { color: #fff; }
:root[data-theme="light"] .btn-emerald { color: #fff; }
:root[data-theme="light"] .btn-danger { color: #fff; }

/* Стеклянные плашки кода комнаты в светлой теме — с рамкой поярче */
:root[data-theme="light"] .glass-tile {
    border-color: rgba(20,21,46,.14);
    color: var(--ink);
}

/* Шапка/футер в светлой теме */
:root[data-theme="light"] .site-header {
    background: rgba(255,255,255,.82);
}
:root[data-theme="light"] .lang-switch a.active { color: #fff; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(240,168,48,.10), transparent 60%),
        radial-gradient(1000px 500px at 90% 0%, rgba(47,158,120,.10), transparent 55%),
        var(--night);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-soft); }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- Типографика ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
.lead { font-size: 1.15rem; color: var(--ink-dim); }
.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: .75rem;
}

/* ---------- Шапка ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(20,21,46,.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}
.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--ink);
    letter-spacing: -.02em;
}
.brand:hover { color: var(--ink); }
.brand-mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--amber), var(--ruby) 55%, var(--sky));
    box-shadow: 0 6px 20px -6px rgba(240,168,48,.6);
}
.brand-mark svg { width: 20px; height: 20px; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a.nav-link { color: var(--ink-dim); font-weight: 600; font-size: .95rem; }
.nav a.nav-link:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: .75rem; }

.lang-switch { display: flex; gap: .25rem; align-items: center; }
.lang-switch a {
    font-size: .8rem; font-weight: 700; color: var(--ink-dim);
    padding: .2rem .45rem; border-radius: 6px;
}
.lang-switch a.active { color: var(--night); background: var(--amber); }

/* Кнопка переключения темы */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-dim);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
    flex-shrink: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--amber); }
.theme-toggle svg { width: 18px; height: 18px; }
/* Показываем нужную иконку в зависимости от темы */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    padding: .7rem 1.3rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
    text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--amber), var(--amber-soft));
    color: #2a1c00;
    box-shadow: 0 10px 28px -10px rgba(240,168,48,.7);
}
.btn-primary:hover { color: #2a1c00; box-shadow: 0 14px 34px -10px rgba(240,168,48,.85); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: var(--amber); }
.btn-emerald { background: var(--emerald); color: #04231a; }
.btn-danger { background: var(--ruby); color: #2a0810; }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .8rem; font-size: .85rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero-grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
}
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .accent {
    background: linear-gradient(120deg, var(--amber), var(--ruby) 45%, var(--sky));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-cta { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

/* Сигнатурный элемент — «код комнаты» как витражные стёкла */
.room-demo {
    background: var(--night-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.room-demo .label { font-size: .8rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1rem; }
.room-code { display: flex; gap: .75rem; justify-content: center; }
.glass-tile {
    width: 64px; height: 80px;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 2.4rem;
    color: var(--ink);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    position: relative;
    animation: tileGlow 4s ease-in-out infinite;
}
.glass-tile:nth-child(1) { background: linear-gradient(160deg, rgba(240,168,48,.35), rgba(240,168,48,.08)); animation-delay: 0s; }
.glass-tile:nth-child(2) { background: linear-gradient(160deg, rgba(216,85,106,.35), rgba(216,85,106,.08)); animation-delay: .3s; }
.glass-tile:nth-child(3) { background: linear-gradient(160deg, rgba(47,158,120,.35), rgba(47,158,120,.08)); animation-delay: .6s; }
.glass-tile:nth-child(4) { background: linear-gradient(160deg, rgba(90,169,230,.35), rgba(90,169,230,.08)); animation-delay: .9s; }
@keyframes tileGlow {
    0%,100% { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { transform: translateY(-6px); box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); }
}
.room-demo .hint { text-align: center; color: var(--ink-dim); font-size: .9rem; margin-top: 1.4rem; }
.quick-room-join h2 { margin: 0 0 .55rem; }
.quick-room-join > p:not(.hint) { color: var(--ink-dim); margin-bottom: 1.2rem; }
.quick-join-form { display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
.quick-code-input {
    min-width: 0; width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--night); color: var(--ink);
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 800;
    letter-spacing: .2em; text-align: center; text-transform: uppercase;
}
.quick-code-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,168,48,.15); }

/* ---------- Секции ---------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-head { max-width: 640px; margin-bottom: 2.5rem; }

/* ---------- Карточки игр ---------- */
.games-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;
}
.game-card {
    background: var(--night-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
    display: flex; flex-direction: column;
}
.game-card:hover { transform: translateY(-4px); border-color: rgba(240,168,48,.4); }
.game-cover {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--night-3), var(--night-2));
    display: grid; place-items: center;
    position: relative;
    overflow: hidden;
}
.game-cover .glyph { font-size: 3rem; opacity: .85; }
.game-cover-image {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center;
    transition: transform .35s ease;
}
.game-card:hover .game-cover-image { transform: scale(1.035); }
.game-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; }
.game-body h3 { margin-bottom: .5rem; }
.game-body p { color: var(--ink-dim); font-size: .92rem; flex: 1; }
.game-meta { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .82rem; color: var(--ink-dim); }
.badge {
    display: inline-block; font-size: .72rem; font-weight: 700;
    padding: .2rem .6rem; border-radius: 999px;
}
.badge-soon { background: rgba(90,169,230,.16); color: var(--sky); }
.badge-live { background: rgba(47,158,120,.16); color: var(--emerald); }

/* ---------- Как это работает ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { background: var(--night-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.step .num {
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
    width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(240,168,48,.14); color: var(--amber); margin-bottom: 1rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--ink-dim); font-size: .92rem; }

/* ---------- Формы ---------- */
.auth-wrap { min-height: calc(100vh - 68px - 200px); display: grid; place-items: center; padding: 3rem 0; }
.card {
    background: var(--night-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
}
.card-narrow { width: 100%; max-width: 440px; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: var(--ink); }
.input, .textarea, .select {
    width: 100%; padding: .7rem .9rem; border-radius: var(--radius-sm);
    background: var(--night); border: 1px solid var(--line); color: var(--ink);
    font-family: var(--font-body); font-size: .95rem;
}
.input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,168,48,.15);
}
.textarea { resize: vertical; min-height: 90px; }
.form-hint { font-size: .82rem; color: var(--ink-dim); margin-top: .35rem; }
.form-foot { margin-top: 1.5rem; text-align: center; color: var(--ink-dim); font-size: .9rem; }

/* ---------- Уведомления ---------- */
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-size: .92rem; }
.alert-error { background: rgba(216,85,106,.15); border: 1px solid rgba(216,85,106,.4); color: #ffbcc7; }
.alert-success { background: rgba(47,158,120,.15); border: 1px solid rgba(47,158,120,.4); color: #a8f0d4; }

/* ---------- Футер ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0; margin-top: 3rem; color: var(--ink-dim); }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.footer-nav-groups { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:2.5rem; }
.footer-links { display: flex; flex-direction:column; align-items:flex-start; gap: .65rem; }
.footer-links b { color:var(--ink); font-size:.92rem; }
.footer-links a { color: var(--ink-dim); font-size: .9rem; }
.footer-links a:hover { color: var(--ink); }
.footer-link-button { padding:0; border:0; background:none; color:var(--ink-dim); font:inherit; font-size:.9rem; cursor:pointer; text-align:left; }
.footer-link-button:hover { color:var(--ink); }

/* ---------- Публичные страницы, правила и поддержка ---------- */
.content-page-section, .donate-hero, .game-detail-hero { padding:clamp(3.5rem,8vw,7rem) 0 2.5rem; }
.content-page-container { max-width:920px; }
.content-page-container > h1 { max-width:900px; margin:.65rem 0 1.75rem; font-size:clamp(2rem,5vw,4rem); line-height:1.08; }
.content-card { padding:clamp(1.35rem,4vw,3rem); background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.rich-content { color:var(--ink-dim); line-height:1.75; }
.rich-content h2 { color:var(--ink); margin:2rem 0 .7rem; font-size:clamp(1.25rem,3vw,1.75rem); }
.rich-content h2:first-child { margin-top:0; }
.rich-content h3 { color:var(--ink); margin:1.4rem 0 .55rem; }
.rich-content p + p { margin-top:1rem; }
.rich-content ul, .rich-content ol { padding-left:1.35rem; margin:.65rem 0 1.1rem; }
.rich-content li + li { margin-top:.42rem; }
.rich-content a { color:var(--amber); text-decoration:underline; text-underline-offset:3px; }

.donate-hero { text-align:center; padding-bottom:1rem; }
.donate-hero h1 { font-size:clamp(2.5rem,7vw,5rem); margin:.7rem 0 1.4rem; }
.donate-intro { max-width:900px; margin:0 auto; }
.donate-intro h2:first-child { display:none; }
.donate-section { padding-top:1.5rem; }
.donate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; max-width:1160px; margin:0 auto; }
.donate-card { min-width:0; padding:clamp(1rem,3vw,2rem); background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.donate-card-icon { font-size:2rem; margin-bottom:.5rem; }
.donate-card h2 { font-size:clamp(1.35rem,3vw,2rem); }
.donate-card > p { color:var(--ink-dim); margin:.55rem 0 1.2rem; min-height:3em; }
.donate-widget-wrap { width:100%; min-height:480px; overflow:hidden; border-radius:var(--radius-sm); background:#fff; }
.donate-widget-wrap iframe { display:block; width:100%; max-width:100%; border:0; }
.donate-note { max-width:900px; margin:1.5rem auto 0; padding:1.4rem; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:rgba(240,168,48,.07); }
.donate-note p { color:var(--ink-dim); margin-top:.4rem; }

.game-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.game-detail-copy h1 { margin:.55rem 0 1rem; font-size:clamp(3rem,8vw,6.5rem); line-height:.95; }
.game-detail-meta { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0; }
.game-detail-meta span { padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); background:var(--night-2); }
.game-detail-cover { aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; border-radius:calc(var(--radius) * 1.25); background:var(--night-2); border:1px solid var(--line); box-shadow:var(--shadow); font-size:6rem; }
.game-detail-cover img { width:100%; height:100%; object-fit:cover; }
.game-rules { scroll-margin-top:90px; }
.game-detail-bottom-cta { text-align:center; padding:clamp(2rem,6vw,4rem) 0 1rem; }
.game-detail-bottom-cta p { color:var(--ink-dim); margin:.55rem 0 1.25rem; }

/* ---------- Согласие на cookie ---------- */
.cookie-banner { position:fixed; z-index:1000; left:clamp(.75rem,2vw,1.5rem); bottom:clamp(.75rem,2vw,1.5rem); width:min(720px,calc(100vw - 1.5rem)); display:flex; align-items:center; gap:1rem; padding:1rem; background:var(--night-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 70px rgba(0,0,0,.28); opacity:0; transform:translateY(18px); transition:opacity .22s ease,transform .22s ease; }
.cookie-banner[hidden] { display:none; }
.cookie-banner.is-visible { opacity:1; transform:translateY(0); }
.cookie-banner-copy { display:grid; gap:.2rem; flex:1; font-size:.9rem; color:var(--ink-dim); line-height:1.45; }
.cookie-banner-copy strong { color:var(--ink); font-size:1rem; }
.cookie-banner-copy a { color:var(--emerald); }
.cookie-banner-actions { display:flex; gap:.55rem; flex-shrink:0; }

@media (max-width: 800px) {
    .donate-grid, .game-detail-grid { grid-template-columns:1fr; }
    .game-detail-cover { order:-1; }
    .footer-nav-groups { grid-template-columns:1fr; gap:1.5rem; width:100%; }
}
@media (max-width: 600px) {
    .cookie-banner { align-items:stretch; flex-direction:column; }
    .cookie-banner-actions { display:grid; grid-template-columns:1fr 1fr; }
    .cookie-banner-actions .btn { width:100%; white-space:normal; }
    .donate-widget-wrap { min-height:480px; }
}

/* ---------- Мобильное меню ---------- */
.menu-toggle {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 9px; width: 42px; height: 42px; padding: 0;
    color: var(--ink); cursor: pointer; flex-shrink: 0;
    align-items: center; justify-content: center;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-burger { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Правая часть шапки: навигация + действия аккаунта */
.header-collapsible {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .room-demo { order: -1; }
    .steps { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
    .room-demo.quick-room-join { padding: 1.25rem; }
    .quick-join-form { grid-template-columns: 1fr; }
    .quick-join-form .btn { width: 100%; }
}
@media (max-width: 760px) {
    .menu-toggle { display: inline-flex; }

    /* Сворачиваем ВСЮ правую часть (навигация + вход/выход/язык/тема) */
    .header-collapsible {
        display: none;
        position: absolute;
        top: 68px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--night-2);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
        padding: .5rem 0;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
    }
    .header-collapsible.open { display: flex; }

    .header-collapsible .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }
    .header-collapsible .nav a.nav-link {
        padding: .9rem 20px;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
    }

    .header-collapsible .nav-actions {
        flex-wrap: wrap;
        gap: .75rem;
        padding: 1rem 20px 1.2rem;
        width: 100%;
    }
    /* Вход/выход/регистрация растягиваем на всю ширину — удобно тапать */
    .header-collapsible .nav-actions .btn,
    .header-collapsible .nav-actions .inline-form {
        width: 100%;
    }
    .header-collapsible .nav-actions .inline-form .btn { width: 100%; }
    .header-collapsible .nav-actions .lang-switch { margin-right: auto; }

    .glass-tile { width: 52px; height: 66px; font-size: 1.9rem; }
}

/* Страховка от горизонтального скролла на любом устройстве */
html, body { max-width: 100%; overflow-x: hidden; }

/* Уважение к настройке уменьшенной анимации */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* Видимый фокус для доступности */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- Компоновка страницы ---------- */
body {
    display: flex;
    flex-direction: column;
}
body > main {
    flex: 1 0 auto;
}
.site-footer {
    flex-shrink: 0;
}

/* ---------- Личный кабинет ---------- */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.dashboard-stat {
    min-height: 126px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    background: var(--night-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.dashboard-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(240,168,48,.12);
    font-size: 1.35rem;
}
.dashboard-stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}
.dashboard-stat-value-text {
    font-size: 1.15rem;
    line-height: 1.25;
}
.dashboard-stat-label {
    margin-top: .45rem;
    color: var(--ink-dim);
    font-size: .86rem;
}
.dashboard-rooms,
.dashboard-quick {
    margin-top: 2rem;
}
.dashboard-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}
.dashboard-card-head p {
    margin-top: .35rem;
    color: var(--ink-dim);
    font-size: .88rem;
}
.room-list {
    border-top: 1px solid var(--line);
}
.room-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}
.room-list-row:last-child {
    border-bottom: 0;
}
.room-list-info {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    min-width: 0;
}
.room-list-info span {
    color: var(--ink-dim);
    font-size: .88rem;
    white-space: nowrap;
}
.room-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.btn-danger-outline {
    background: transparent;
    color: var(--ruby);
    border-color: rgba(216,85,106,.45);
}
.btn-danger-outline:hover {
    color: var(--ruby);
    border-color: var(--ruby);
    background: rgba(216,85,106,.08);
}
.dashboard-quick h3 {
    margin-bottom: 1rem;
}
.dashboard-quick-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Старт «Намалевали!» ---------- */
.draw-start-wrap {
    max-width: 840px;
}
.draw-start-lead {
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.draw-open-rooms {
    margin-bottom: 1.5rem;
}
.room-auto-close-note {
    margin-top: .7rem;
    color: var(--ink-dim);
    font-size: .82rem;
}
.draw-start-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.draw-start-grid .card {
    display: flex;
    flex-direction: column;
}
.draw-start-grid .card h3 {
    margin-bottom: .6rem;
}
.draw-start-grid .card > p {
    color: var(--ink-dim);
    font-size: .92rem;
    margin-bottom: 1.2rem;
    flex: 1;
}

@media (max-width: 900px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: .8rem;
    }
    .dashboard-stat {
        min-height: 96px;
        padding: 1rem;
    }
    .room-list-row {
        align-items: stretch;
        flex-direction: column;
    }
    .room-list-info {
        justify-content: space-between;
    }
    .room-list-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .room-list-actions .btn,
    .room-list-actions .inline-form,
    .room-list-actions .inline-form .btn {
        width: 100%;
    }
    .draw-start-grid {
        grid-template-columns: 1fr;
    }
}
/* Быстрое включение полноэкранного режима на игровых экранах */
.game-fullscreen-toggle {
    position: relative;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--night-2) 92%, transparent);
    color: var(--ink);
    box-shadow: 0 10px 30px rgba(20,21,46,.14);
    font: 700 .78rem/1 var(--font-body);
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.game-fullscreen-toggle:hover, .game-fullscreen-toggle:focus-visible { transform:scale(1.04); border-color: var(--amber); outline: none; }
.game-fullscreen-toggle.is-active { background: var(--amber); color: #14152e; border-color: var(--amber); }
.game-fullscreen-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.game-fullscreen-toggle::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    transform: translateY(-8px);
    width: 245px;
    padding: .7rem .85rem;
    border-radius: var(--radius-sm);
    background: #14152e;
    color: #fff;
    box-shadow: 0 10px 30px rgba(20,21,46,.22);
    font: 600 .78rem/1.4 var(--font-body);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.game-fullscreen-toggle:hover::after, .game-fullscreen-toggle:focus-visible::after, .game-fullscreen-toggle.show-hint::after { opacity: 1; visibility: visible; transform:translateY(0); }
.game-fullscreen-slot { display:flex; align-items:center; gap:.7rem; }
@media (max-width: 700px) {
    .game-fullscreen-toggle { padding:.65rem; }
    .game-fullscreen-toggle span { display: none; }
    .game-fullscreen-toggle::after { width: min(225px, calc(100vw - 75px)); }
}
@media print { .game-fullscreen-toggle { display: none !important; } }

/* Вход гостя в комнату без регистрации */
.guest-join-lead { text-align:center; color:var(--ink-dim); margin-bottom:1.5rem; }
.guest-room-code { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1.2rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--night-3); }
.guest-room-code small { color:var(--ink-dim); font-weight:600; }
.guest-room-code strong { font-family:var(--font-display); color:var(--amber); font-size:1.5rem; letter-spacing:.18em; }
.guest-name-input { font-size:1.15rem; font-weight:700; text-align:center; }
.guest-host-note { margin:1rem 0 0; color:var(--ink-dim); text-align:center; font-size:.78rem; line-height:1.45; }
.guest-avatar-maker { display:grid; justify-items:center; gap:.8rem; margin:1rem 0 1.25rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--night); }
.guest-avatar-title { display:grid; gap:.2rem; text-align:center; }
.guest-avatar-title span { color:var(--ink-dim); font-size:.78rem; }
.guest-avatar-maker canvas { width:min(240px,70vw); height:min(240px,70vw); border:2px solid var(--line); border-radius:24px; background:#fff; touch-action:none; cursor:crosshair; box-shadow:var(--shadow); }
.guest-avatar-palette, .guest-avatar-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; }
.avatar-color { width:34px; height:34px; border:3px solid var(--night-2); border-radius:50%; background:var(--avatar-color); box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.avatar-color.active { box-shadow:0 0 0 3px var(--night-2),0 0 0 5px var(--amber); }

/* Личные задания организатора */
.custom-prompts-page { min-height:70vh; }
.custom-prompts-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:2rem; }
.custom-prompts-head h1 { font-size:clamp(2.2rem,6vw,4rem); }
.custom-prompts-head .lead { max-width:760px; }
.custom-prompts-layout { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:1.25rem; align-items:start; }
.custom-prompts-add, .custom-prompts-list-card { padding:clamp(1.1rem,3vw,1.7rem); }
.custom-prompts-add > p, .custom-prompts-list-head p { color:var(--ink-dim); margin:.4rem 0 1rem; line-height:1.5; }
.custom-prompts-add textarea { min-height:280px; margin-bottom:1rem; }
.custom-prompts-list-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.custom-prompts-list { display:grid; gap:.55rem; list-style-position:inside; max-height:620px; overflow:auto; padding-right:.25rem; }
.custom-prompts-list li { display:flex; align-items:center; gap:.8rem; padding:.75rem .85rem; border-radius:var(--radius-sm); background:var(--night); }
.custom-prompts-list li > span { flex:1; overflow-wrap:anywhere; line-height:1.4; }
.custom-prompts-list li button { width:32px; height:32px; border:0; border-radius:50%; background:rgba(194,60,83,.12); color:var(--ruby); font-size:1.25rem; cursor:pointer; }
.custom-prompts-empty { padding:2rem 1rem; border:1px dashed var(--line); border-radius:var(--radius-sm); color:var(--ink-dim); text-align:center; line-height:1.55; }
@media(max-width:800px){.custom-prompts-head{align-items:flex-start;flex-direction:column}.custom-prompts-layout{grid-template-columns:1fr}}

/* Звук входа игрока на общем экране */
.room-join-sound-toggle { position:fixed; left:12px; bottom:12px; z-index:1190; display:grid; grid-template-columns:auto auto; align-items:center; column-gap:.45rem; padding:.55rem .75rem; min-height:44px; color:var(--ink); background:color-mix(in srgb,var(--night-2) 94%,transparent); border:1px solid var(--line); border-radius:999px; box-shadow:0 10px 30px rgba(20,21,46,.14); cursor:pointer; backdrop-filter:blur(10px); }
.room-join-sound-toggle > span { grid-row:1 / 3; font-size:1rem; }
.room-join-sound-toggle b { font:700 .72rem/1.1 var(--font-body); }
.room-join-sound-toggle small { color:var(--emerald); font:600 .64rem/1.1 var(--font-body); text-align:left; }
.room-join-sound-toggle.needs-unlock { border-color:var(--amber); }
.room-join-sound-toggle.needs-unlock small { color:var(--amber); }
.room-join-sound-toggle.is-off { opacity:.72; }
.room-join-sound-toggle.is-off small { color:var(--ink-dim); }
.room-join-sound-toggle.join-pulse { animation:joinSoundPulse .65s ease; }
.room-join-toast { position:fixed; left:50%; bottom:24px; z-index:1195; transform:translate(-50%,16px); padding:.75rem 1.1rem; border-radius:999px; background:#14152e; color:#fff; font-weight:700; box-shadow:0 12px 35px rgba(20,21,46,.25); opacity:0; visibility:hidden; pointer-events:none; transition:.22s ease; }
.room-join-toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
@keyframes joinSoundPulse { 50% { transform:scale(1.08); box-shadow:0 0 0 9px rgba(240,168,48,.13); } }
@media (max-width:700px) { .room-join-sound-toggle { left:6px; bottom:6px; } .room-join-sound-toggle b { display:none; } .room-join-toast { max-width:calc(100vw - 30px); width:max-content; text-align:center; } }

/* Поддержка и человекопонятная проверка форм */
.bot-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.captcha-box{padding:.85rem 1rem;border:1px solid rgba(240,168,48,.35);border-radius:var(--radius-sm);background:rgba(240,168,48,.08)}
.support-page{min-height:70vh}.support-head{max-width:820px;margin-bottom:2rem}.support-head h1{font-size:clamp(2.7rem,7vw,5.5rem);margin:.35rem 0 .7rem}.support-head p{color:var(--ink-dim);font-size:1.08rem;line-height:1.7}.support-layout{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start}.support-form-card{padding:clamp(1.2rem,3vw,2rem)}.support-form-card h2,.support-ticket-column h2{margin-bottom:1rem}.support-note{padding:2rem}.support-note ol{margin:1rem 0 1rem 1.25rem;display:grid;gap:.8rem}.support-note p,.support-empty{color:var(--ink-dim)}.support-ticket-list{display:grid;gap:.75rem}.support-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;color:var(--ink);transition:.2s ease}.support-ticket-row:hover{transform:translateY(-2px);border-color:var(--amber)}.support-ticket-row>div{display:grid;gap:.25rem}.support-ticket-row span{font-size:.78rem;color:var(--ink-dim)}.support-ticket-row i{display:grid;place-items:center;min-width:25px;height:25px;border-radius:50%;background:var(--ruby);color:#fff;font-style:normal;font-weight:800}.support-status{display:inline-flex!important;width:max-content;padding:.3rem .65rem;border-radius:999px;background:var(--night-3);color:var(--ink-dim)!important;font-size:.75rem;font-weight:700}.status-waiting_user{background:rgba(240,168,48,.15);color:var(--amber)!important}.status-waiting_admin,.status-open{background:rgba(47,158,120,.13);color:var(--emerald)!important}.support-thread-wrap{max-width:980px}.support-thread-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1rem 0 2rem}.support-thread-head h1{font-size:clamp(2rem,5vw,3.8rem);margin:.35rem 0}.support-thread-head p{color:var(--ink-dim)}.support-thread{display:grid;gap:1rem;margin-bottom:1.2rem}.support-message{max-width:82%;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:20px;background:var(--night-2);box-shadow:var(--shadow)}.support-message.from-admin{justify-self:start;border-bottom-left-radius:5px}.support-message.from-user{justify-self:end;border-bottom-right-radius:5px;background:rgba(240,168,48,.09);border-color:rgba(240,168,48,.25)}.support-message p{margin:.5rem 0;line-height:1.65;overflow-wrap:anywhere}.support-message time{font-size:.72rem;color:var(--ink-dim)}.support-reply{display:grid;gap:.75rem;padding:1.1rem}.support-reply textarea{min-height:130px}.support-reply .btn{justify-self:end}.support-state-card{text-align:center;margin:8vh auto;padding:3rem}.support-state-card p{margin-top:1rem;color:var(--ink-dim);line-height:1.6}
@media(max-width:800px){.support-layout{grid-template-columns:1fr}.support-thread-head{align-items:flex-start;flex-direction:column}.support-message{max-width:94%}.support-ticket-row{align-items:flex-start;flex-wrap:wrap}}

/* Мобильная точка входа и webview-оболочка */
.mobile-app-shell main{min-height:100dvh}.mobile-app-shell .game-fullscreen-toggle{display:none!important}.mobile-launch-page{min-height:100vh;padding:clamp(1rem,4vw,2.5rem);background:radial-gradient(circle at 20% 0%,rgba(240,168,48,.12),transparent 34%),radial-gradient(circle at 100% 30%,rgba(90,169,230,.12),transparent 34%),var(--night)}.mobile-launch-inner{width:min(760px,100%);margin:auto}.mobile-launch-brand{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.3rem;font:800 1.4rem var(--font-display)}.mobile-code-panel{padding:clamp(1.25rem,5vw,2.5rem);border:1px solid var(--line);border-radius:28px;background:var(--night-2);box-shadow:var(--shadow);text-align:center}.mobile-code-panel h1{font-size:clamp(2rem,8vw,3.6rem);margin:.45rem 0}.mobile-code-panel>p{color:var(--ink-dim);margin-bottom:1.25rem}.mobile-code-panel form{display:grid;gap:.8rem;max-width:440px;margin:auto}.mobile-code-input{width:100%;height:84px;border:2px solid var(--line);border-radius:20px;background:var(--night);color:var(--ink);text-align:center;text-transform:uppercase;font:800 clamp(2rem,10vw,3.4rem)/1 var(--font-display);letter-spacing:.24em;padding-left:.24em;outline:none}.mobile-code-input:focus{border-color:var(--amber);box-shadow:0 0 0 5px rgba(240,168,48,.12)}.mobile-qr-placeholder{display:flex;align-items:center;justify-content:center;gap:.65rem;margin:1rem auto 0;color:var(--ink-dim);font-size:.8rem}.mobile-qr-placeholder span{font-size:1.3rem}.mobile-solo-section{margin:2rem 0}.mobile-solo-section>div:first-child{margin-bottom:1rem}.mobile-solo-section h2{font-size:clamp(1.7rem,6vw,2.6rem);margin:.35rem 0}.mobile-solo-list{display:grid;gap:.8rem}.mobile-solo-card{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.8rem;color:var(--ink)}.mobile-solo-card>div{width:76px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--night-3);display:grid;place-items:center;font-size:1.8rem}.mobile-solo-card img{width:100%;height:100%;object-fit:cover}.mobile-solo-card section{min-width:0}.mobile-solo-card b{font:800 1.1rem var(--font-display)}.mobile-solo-card p{margin:.25rem 0 0;color:var(--ink-dim);font-size:.8rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mobile-solo-card i{font-size:1.5rem;color:var(--amber);font-style:normal}.mobile-launch-links{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;font-size:.78rem}.mobile-launch-links a{color:var(--ink-dim)}
@media(max-width:520px){.mobile-launch-page{padding:.8rem}.mobile-code-panel{border-radius:22px}.mobile-code-input{height:72px}.mobile-solo-card{grid-template-columns:64px minmax(0,1fr) auto}.mobile-solo-card>div{width:64px}}