/* =========================================================
   Посиделки — версия 8: «Настольная игра»
   Плоские яркие цвета, толстый тёмный контур, жёсткая тень — как картонные фишки и наклейки.
   Этот файл идёт после styles.css и только перекрашивает и переставляет; логика не тронута.
   ========================================================= */
:root, body[data-screen="home"], .modal {
  --ink: #120e33; --night: #120e33; --navy: #231d75; --royal: #2f2896; --blue: #2b46d6; --sky: #b9c8ff;
  --gold: #ffd23f; --gold-hi: #fff0a8; --gold-lo: #d99a00; --amber: #ffb81f;
  --cream: #fff8e8; --paper: #fff1d6; --red: #ff5a4a; --rose: #ff9a8f; --green: #2ed3a0; --teal: #1fa98a;
  --text: #ffffff; --muted: rgba(230, 235, 255, .84); --dim: rgba(230, 235, 255, .62);
  --line: rgba(255, 255, 255, .22); --line-soft: rgba(255, 255, 255, .13);
  --bg: #2b46d6; --bg-lobby: #5b35d5; --bg-game: #241f8a; --overlay: rgba(26, 21, 100, .96);
  --card: #231d75; --card-2: #2f2896; --well: rgba(10, 7, 40, .42);
  --panel: var(--card); --panel-solid: var(--card);
  --hard: 0 .38rem 0 var(--ink); --hard-sm: 0 .22rem 0 var(--ink);
  --r-xl: 1.5rem; --r-lg: 1.15rem; --r-md: .9rem; --r-sm: .65rem;
  --font-d: "Dela Gothic One", "Nunito", system-ui, sans-serif;
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-s: "Dela Gothic One", "Nunito", system-ui, sans-serif;
}
:root { font-synthesis: none; }
h1, h2, h3, h4, b, strong { font-weight: 900; }
.logo, .btn.xl, .t-code, .ov-big, .ov-title, .final-title, .modal-head h3, .confirm h3, .h-card-h, .settings-title, .fam-code, .w-stamp { font-weight: 400; }
[style*="font-family"], .accent { font-style: normal; }

/* ---------- page ---------- */
body, body[data-screen="home"] {
  font-weight: 700;
  background:
    radial-gradient(circle at 1rem 1rem, rgba(255, 255, 255, .075) 0 .13rem, transparent .15rem) 0 0 / 2rem 2rem,
    var(--bg);
  background-attachment: fixed;
  transition: background-color .5s;
}
body[data-screen="lobby"] { background-color: var(--bg-lobby); }
body[data-screen="game"] { background-color: var(--bg-game); }

/* ---------- темы: выбираются в «Настройках», html[data-skin] ---------- */
html[data-skin="dark"], html[data-skin="dark"] body, html[data-skin="dark"] .modal {
  --ink: #000000; --night: #000000; --bg: #10101c; --bg-lobby: #16132e; --bg-game: #0b0b15; --overlay: rgba(10, 10, 22, .97);
  --card: #1c1c31; --card-2: #262645; --well: rgba(0, 0, 0, .42);
}
html[data-skin="berry"], html[data-skin="berry"] body, html[data-skin="berry"] .modal {
  --ink: #2a0622; --night: #2a0622; --bg: #d42a74; --bg-lobby: #a8238c; --bg-game: #74155a; --overlay: rgba(70, 14, 62, .97);
  --card: #4d1248; --card-2: #62195c; --well: rgba(40, 4, 32, .42);
}
html[data-skin="forest"], html[data-skin="forest"] body, html[data-skin="forest"] .modal {
  --ink: #06241d; --night: #06241d; --bg: #128556; --bg-lobby: #0f7a70; --bg-game: #0c5a47; --overlay: rgba(8, 52, 43, .97);
  --card: #0f4338; --card-2: #155548; --well: rgba(2, 26, 20, .42);
}
.skin-pref { display: grid !important; gap: .6rem; }
.skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.skins button { display: grid; justify-items: center; gap: .35rem; padding: .5rem .2rem; border-radius: 1rem; border: 3px solid var(--ink); background: var(--well); font-weight: 900; font-size: .86rem; color: var(--muted); }
.skins button i { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid var(--ink); background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50%); }
.skins button.sel { background: var(--gold); color: var(--ink); }
#bg, body[data-screen="home"] #bg { display: none; }
body[data-screen="game"]::before { display: none; }
::selection { background: rgba(255, 210, 63, .55); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.label { text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--muted); font-weight: 800; }
.accent { font-family: var(--font-d); font-weight: 400; color: var(--gold); }

/* ---------- cards ---------- */
.card, body[data-screen="home"] .card {
  background: var(--card); border: 3px solid var(--ink); box-shadow: var(--hard);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ---------- buttons ---------- */
.btn { border-radius: 1rem; border: 3px solid var(--ink); font-weight: 900; letter-spacing: 0; box-shadow: var(--hard-sm); text-shadow: none; }
.btn.xl { border-radius: 1.25rem; letter-spacing: 0; box-shadow: var(--hard); }
.btn.gold { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: var(--hard-sm); text-shadow: none; }
.btn.gold.xl { box-shadow: var(--hard); }
.btn.gold::after { display: none; }
.btn.navy, body[data-screen="home"] .btn.navy, .modal .btn.navy { background: var(--cream); color: var(--ink); border-color: var(--ink); box-shadow: var(--hard-sm); }
.btn.red { background: var(--red); color: #fff; border-color: var(--ink); box-shadow: var(--hard-sm); }
.btn:hover { filter: none; transform: translateY(-2px); }
.btn:active { transform: translateY(.2rem) !important; box-shadow: 0 0 0 var(--ink) !important; }
.btn:disabled { opacity: 1; filter: none; background: #c8c4e6; color: rgba(18, 14, 51, .55); box-shadow: none; }
.ib, body[data-screen="home"] .ib, .modal .ib {
  border-radius: .9rem; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard-sm);
}
.ib:hover { transform: translateY(-2px); }
.ib:active { transform: translateY(.15rem); box-shadow: none; }
.ib.leave { background: var(--red); color: #fff; }
.link-btn { color: var(--gold); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
@keyframes coachp { 50% { box-shadow: var(--hard), 0 0 0 .45rem rgba(255, 210, 63, .4); } }
@keyframes keysp { 50% { box-shadow: 0 0 0 .3rem rgba(255, 210, 63, .35); } }
@keyframes flash { 30% { box-shadow: var(--hard), 0 0 0 5px var(--gold); } }

/* ---------- inputs ---------- */
.input, body[data-screen="home"] .input, .modal .input, .nm-me .input {
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 1rem; font-weight: 800;
}
.input::placeholder, body[data-screen="home"] .input::placeholder { color: rgba(18, 14, 51, .42); font-weight: 700; }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 .28rem var(--gold); }
.switch, .modal .switch:not(.on) { background: var(--well); border: 3px solid var(--ink); width: 3.6rem; height: 2.1rem; }
.switch i { top: .12rem; left: .14rem; width: 1.5rem; height: 1.5rem; box-shadow: none; border: 2px solid var(--ink); }
.switch.on { background: var(--green); border-color: var(--ink); }
.switch.on i { transform: translateX(1.5rem); }
.seg, .modal .seg, .ava-tabs, body[data-screen="home"] .ava-tabs, .help-tabs, .modal .help-tabs, .acc-tabs, .modal .acc-tabs, .st-tabs {
  background: var(--well); border: 3px solid var(--ink); border-radius: 1rem;
}
.seg button, .ava-tabs button, .help-tabs button, .acc-tabs button, .st-tabs button { border-radius: .65rem; color: var(--muted); font-weight: 900; }
.seg button.sel, .ava-tabs button.sel, .help-tabs button.sel, .acc-tabs button.sel, .st-tabs button.sel { background: var(--gold); color: var(--ink); box-shadow: none; }
.pref input[type=range] { accent-color: var(--gold); }

/* ---------- avatars ---------- */
.ava, .ava.xl, .ava.xxl, .h-me .ava, .nm-me .ava, .acc-me .ava, .pd.p1 .ava,
.h-fam-p .ava, body[data-screen="home"] .h-fam-p .ava { box-shadow: 0 0 0 3px var(--ink); }
.ava.xl, .ava.xxl, .nm-me .ava, .acc-me .ava { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink); }
.pd.p1 .ava { box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px var(--ink); }
.h-fam-p.me .ava, body[data-screen="home"] .h-fam-p.me .ava { box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px var(--ink); }
.gp.turn .ava { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); animation: turnring 1.2s ease-in-out infinite; }
@keyframes turnring { 50% { box-shadow: 0 0 0 5px var(--gold), 0 0 0 7px var(--ink); } }
.ava-opt { border: 3px solid var(--ink); }
.ava-opt.sel { border-color: var(--ink); transform: scale(1.06); box-shadow: 0 0 0 4px var(--gold), 0 0 0 7px var(--ink); }

/* ---------- speech bubbles ---------- */
.bubble, .w-bubble { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard-sm); border-radius: 1.2rem; font-weight: 800; }
.bubble::before, .w-bubble::before {
  border: 0; width: .95rem; height: .95rem; margin: 0; background: #fff;
  border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg);
}
.bubble::before { left: -.62rem; bottom: 1.1rem; }
.w-bubble::before { left: -.62rem; top: 50%; margin-top: -.5rem; }
.w-host-name { text-transform: none; letter-spacing: 0; font-size: .78rem; color: #d2331f; font-weight: 900; }
@media (max-width: 820px) { .w-bubble { box-shadow: var(--hard-sm); } }

/* ---------- topbar ---------- */
.brand { color: #fff; }
.brand-badge { background: var(--gold); border: 3px solid var(--ink); box-shadow: var(--hard-sm); border-radius: .9rem; }
.brand-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; filter: none; font-weight: 400; text-shadow: 0 .14rem 0 var(--ink); letter-spacing: 0; }
.room-chip, .lvl-chip { background: var(--ink); border: 3px solid var(--ink); border-radius: .9rem; color: #fff; font-weight: 400; }
.lvl-chip .star { filter: none; }
.live { box-shadow: none; }

/* =========================================================
   HOME
   ========================================================= */
#screen-home { padding-bottom: calc(6.6rem + env(safe-area-inset-bottom)); scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.h-side { display: none; }
.h-main, .h-right { display: contents; }
body[data-screen="home"] .h-tabs { display: grid; }
body[data-screen="home"] #h-bonus, body[data-screen="home"] #h-stats { display: none; }

.h-card-h { font-size: 1.05rem; font-weight: 400; }
.h-card-h svg { filter: none; }

/* logo: big cardboard letters */
.h-logo { text-align: left; padding-top: 0; align-self: end; }
.h-logo .h-crown, .h-logo .bulb { display: none; }
.h-logo .logo, body[data-screen="home"] .h-logo .logo {
  font-family: var(--font-d); font-weight: 400; letter-spacing: -.01em; line-height: 1.05;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold);
  -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill;
  text-shadow: 0 .09em 0 var(--ink), 0 .16em 0 var(--ink);
  filter: none; transform: rotate(-2.5deg); transform-origin: 0 100%; padding: .1em 0 .2em;
}
.h-logo .logo-sub { margin-top: .2rem; font-family: var(--font); font-weight: 800; color: #fff; transform: none; font-size: clamp(1.02rem, 1.5vw, 1.3rem); }
.h-logo .heart { color: var(--red); }

/* the stage: Барбос in front of a slowly turning sun, the table and the guests */
.h-stage, body[data-screen="home"] .h-stage { width: 100%; max-width: 34rem; height: 24rem; margin: 0 auto; justify-self: center; }
.h-stage::before {
  content: ""; position: absolute; left: 50%; top: 0; height: calc(100% - 2.4rem); aspect-ratio: 1; margin-left: calc((100% - 2.4rem) * -.5); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffd23f 0 12deg, #ffbf24 12deg 24deg); border: 3px solid var(--ink); animation: spin 90s linear infinite;
}
.h-stage::before { height: 21.6rem; width: 21.6rem; margin-left: -10.8rem; aspect-ratio: auto; }
.h-glow, body[data-screen="home"] .h-glow { display: none; }
.h-table { left: 5%; right: 5%; height: 5.6rem; }
.h-table-top, body[data-screen="home"] .h-table-top {
  background:
    repeating-linear-gradient(90deg, rgba(255, 90, 74, .7) 0 .9rem, transparent .9rem 1.8rem),
    repeating-linear-gradient(0deg, rgba(255, 90, 74, .7) 0 .9rem, transparent .9rem 1.8rem),
    #fff8e8;
  border: 3px solid var(--ink); box-shadow: 0 .5rem 0 var(--ink);
}
.h-mini-wheel { left: 68%; top: -1.2rem; width: 4rem; height: 4rem; background: conic-gradient(#ff5a4a 0 12.5%, #ffd23f 0 25%, #2ed3a0 0 37.5%, #6a4bff 0 50%, #ff5a4a 0 62.5%, #ffd23f 0 75%, #2ed3a0 0 87.5%, #6a4bff 0); border: 3px solid var(--ink); box-shadow: 0 .3rem 0 var(--ink); }
.h-mini-wheel::after { background: #fff; box-shadow: 0 0 0 3px var(--ink); }
.h-stage .greet-dog, body[data-screen="home"] .h-stage .greet-dog { left: 50%; margin-left: -12.5rem; bottom: 1.2rem; width: 15.5rem; filter: none; }
.h-guest, body[data-screen="home"] .h-guest { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
body[data-screen="home"] .h-stage .h-guest { display: block; width: 4.4rem; height: 4.4rem; opacity: 1; }
body[data-screen="home"] .h-stage .h-guest.g0 { left: 1%; bottom: 6rem; width: 3.6rem; height: 3.6rem; }
body[data-screen="home"] .h-stage .h-guest.g1 { left: 59%; bottom: 8.6rem; }
body[data-screen="home"] .h-stage .h-guest.g2 { left: 84%; bottom: 5.6rem; }
body[data-screen="home"] .h-stage .h-guest.g3 { left: 74%; bottom: 11.4rem; width: 3.8rem; height: 3.8rem; }
body[data-screen="home"] .h-stage .h-guest.g4 { left: 91%; bottom: 10.8rem; width: 3rem; height: 3rem; }
body[data-screen="home"] .h-stage .h-guest.g5 { display: none; }
.h-stage .bubble, body[data-screen="home"] .h-stage .bubble { left: 46%; right: 0; top: .4rem; max-width: 17rem; font-size: .98rem; padding: .7rem .95rem; }

/* play */
.h-play { width: min(100%, 34rem); margin-top: 0; align-self: start; }
.h-cta { box-shadow: var(--hard) !important; min-height: 5.4rem; justify-content: flex-start; padding-left: 1.1rem !important; }
.h-play-ic { background: var(--ink); color: var(--gold); }
.h-cta-t b { font-weight: 400; }
.h-cta-t small { font-weight: 800; opacity: .8; }
.h-join .btn { min-width: 7rem; }

/* game modes: two big cardboard tiles, no frame around them */
.h-modes { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; gap: .9rem; align-content: start; }
.h-mode-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.h-mode, .h-mode.sel { border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--hard); padding: 1.1rem; flex-direction: column; align-items: flex-start; gap: .8rem; min-height: 11.5rem; }
.h-mode.m-wheel, body[data-screen="home"] .h-mode.m-wheel { background: var(--red); }
.h-mode.m-draw, body[data-screen="home"] .h-mode.m-draw { background: var(--green); }
.h-mode::after { display: none; }
.h-mode:hover { transform: translateY(-4px) rotate(-1deg); }
.h-mode-art .mp-ic { width: 4.2rem; height: 4.2rem; }
.h-mode-t b { font-size: 1.25rem; font-weight: 400; color: #fff; text-shadow: 0 .12rem 0 var(--ink); }
.h-mode.m-draw .h-mode-t b { color: var(--ink); text-shadow: none; }
.h-mode-t small { font-size: .92rem; font-weight: 800; color: #fff; line-height: 1.3; }
.h-mode.m-draw .h-mode-t small { color: var(--ink); }
.h-mode-go { position: absolute; right: .9rem; top: .9rem; background: var(--ink); color: #fff; box-shadow: none; padding: .4rem .9rem; font-size: .85rem; font-weight: 900; border-radius: .7rem; }
.wheel-ic, .draw-ic, .set-ic { border: 3px solid var(--ink) !important; box-shadow: var(--hard-sm); }
.wheel-ic { background: conic-gradient(#ffd23f 0 12.5%, #fff 0 25%, #6a4bff 0 37.5%, #2ed3a0 0 50%, #ffd23f 0 62.5%, #fff 0 75%, #6a4bff 0 87.5%, #2ed3a0 0); }
.wheel-ic::after { background: var(--ink); }
.draw-ic { background: radial-gradient(circle at 50% 50%, #fff 0 52%, transparent 53%), #ffd23f; }
.draw-ic::after { background: var(--red); }

/* family and profile */
.h-family { padding: 1.2rem; align-content: start; }
.h-fam-face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); margin-left: -.5rem; }
.h-fam-crowd { padding-left: .5rem; }
.h-fam-share, .h-fam-badge, .seat-tag, .gp-tag, .rec-banner { background: var(--gold); color: var(--ink); box-shadow: none; border: 2px solid var(--ink); }
.h-fam-p.add .plus, body[data-screen="home"] .h-fam-p.add .plus { color: #fff; background: var(--well); border: 3px dashed rgba(255, 255, 255, .55); }
.h-fam-text.hint, .h-pick-hint { color: var(--gold-hi); }
#h-family.picking { box-shadow: var(--hard), 0 0 0 4px var(--gold); }
.h-right .profile, .profile { padding: 1.2rem; align-content: start; }
.invite, .acc-intro, .wheel-rules, .w-coach, .fam-code { background: rgba(255, 210, 63, .14); border: 2px dashed rgba(255, 210, 63, .7); }
.h-nums > div, .st-tiles > div, .acc-p, .inst-app, .st-top li, .streak, .tv-ic { background: var(--well); border-color: var(--line-soft); }
.lvl-bar { background: var(--well); box-shadow: none; border: 2px solid var(--ink); height: .8rem; }
.lvl-bar i { background: var(--gold); box-shadow: none; }
.home-links { gap: .4rem 1.6rem; }

/* the menu: a dock at the bottom on every device */
.h-tabs, body[data-screen="home"] .h-tabs { background: var(--ink); border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 .4rem 0 rgba(0, 0, 0, .28); backdrop-filter: none; width: min(34rem, calc(100% - 1.2rem)); }
.h-tabs button { font-weight: 900; font-size: .76rem; border-radius: 1rem; }
.h-tabs button.sel { color: var(--ink); background: var(--gold); }
.h-tabs .h-tab-play svg, body[data-screen="home"] .h-tabs .h-tab-play svg { background: var(--red); color: #fff; border: 3px solid var(--ink); box-shadow: var(--hard-sm); }
.h-tabs .h-tab-play span { color: #fff; }
body[data-screen="home"] .h-tabs::before { display: none; }
.h-pill, body[data-screen="home"] .h-pill { background: var(--ink); border: 3px solid var(--ink); border-radius: 1.1rem; }

@media (min-width: 821px) {
  .home { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.6rem 1.8rem; align-items: stretch; max-width: 78rem; padding: 1rem 0 1rem; }
  .h-logo { grid-column: 1 / 7; grid-row: 1; }
  .h-play { grid-column: 1 / 7; grid-row: 2; }
  .h-stage { grid-column: 7 / 13; grid-row: 1 / 3; align-self: center; }
  .h-modes { grid-column: 1 / 8; grid-row: 3; margin-top: 1.4rem; }
  .h-family { grid-column: 1 / 8; grid-row: 4; }
  .h-right .profile { grid-column: 8 / 13; grid-row: 3 / 5; margin-top: 1.4rem; }
  .h-more { grid-column: 1 / 13; grid-row: 5; margin-top: .8rem; }
  .home-links { grid-column: 1 / 13; grid-row: 6; }
  .h-logo .logo { font-size: clamp(3rem, 5.6vw, 5.4rem); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .h-stage, body[data-screen="home"] .h-stage { height: 20rem; }
  .h-stage::before { width: 17.6rem; height: 17.6rem; margin-left: -8.8rem; }
  .h-stage .greet-dog, body[data-screen="home"] .h-stage .greet-dog { width: 12.5rem; margin-left: -10.5rem; }
  body[data-screen="home"] .h-stage .h-guest { width: 3.6rem; height: 3.6rem; }
  .h-stage .bubble, body[data-screen="home"] .h-stage .bubble { font-size: .88rem; }
  .h-mode { min-height: 10rem; }
}

@media (max-width: 820px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding-top: .3rem; }
  .h-logo { order: 1; text-align: center; }
  .h-stage { order: 2; }
  .h-play, .h-play.h-play { order: 3; }
  .h-modes { order: 4; margin-top: .4rem; }
  .h-more { order: 5; }
  .h-family, .h-family.has-fam, .h-family:not(.has-fam) { order: 6; }
  .h-right .profile { order: 7; }
  .home-links { order: 8; }
  .h-logo .logo, body[data-screen="home"] .h-logo .logo { font-size: min(10.6vw, 3.2rem); white-space: nowrap; transform: rotate(-2.5deg); transform-origin: 50% 100%; }
  .h-logo .logo-sub { font-size: .98rem; margin-top: 0; }
  .h-stage, body[data-screen="home"] .h-stage { height: 15.5rem; max-width: 24rem; }
  .h-stage::before { width: 13.4rem; height: 13.4rem; margin-left: -6.7rem; }
  .h-table { height: 3.9rem; left: 3%; right: 3%; }
  .h-mini-wheel { width: 2.6rem; height: 2.6rem; top: -1rem; left: 67%; margin-left: 0; }
  .h-stage .greet-dog, body[data-screen="home"] .h-stage .greet-dog { width: 10.4rem; left: 0; margin-left: -.4rem; bottom: .7rem; }
  body[data-screen="home"] .h-stage .h-guest { width: 3.1rem; height: 3.1rem; }
  body[data-screen="home"] .h-stage .h-guest.g0 { display: none; }
  body[data-screen="home"] .h-stage .h-guest.g1 { left: 49%; bottom: 4.2rem; }
  body[data-screen="home"] .h-stage .h-guest.g2 { left: 83%; bottom: 4.4rem; }
  body[data-screen="home"] .h-stage .h-guest.g3, body[data-screen="home"] .h-stage .h-guest.g4 { display: none; }
  .h-stage .bubble, body[data-screen="home"] .h-stage .bubble { left: 40%; right: 0; top: 0; max-width: none; font-size: .86rem; padding: .55rem .75rem; }
  .h-cta { min-height: 4.8rem; }
  .ava-pick { padding-block: .55rem .6rem; }
  .h-mode { min-height: 10.2rem; padding: .9rem; }
  .h-mode-art .mp-ic { width: 3.4rem; height: 3.4rem; }
  .h-mode-t b { font-size: 1.02rem; }
  .h-mode-t small { font-size: .82rem; }
  .h-mode-go { right: .7rem; top: .7rem; font-size: .78rem; padding: .3rem .7rem; }
}

/* =========================================================
   LOBBY
   ========================================================= */
.ticket, .studio .ticket { background: var(--gold); border: 3px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--hard-sm); color: var(--ink); }
.ticket .label { color: rgba(18, 14, 51, .7); }
.t-code { font-weight: 400; }
.t-code span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.ticket .btn.gold { background: var(--ink); color: #fff; box-shadow: none; }
.ticket .btn.navy { box-shadow: none; }
.seats-head { color: #fff; font-weight: 400; }
.seat { background: var(--well); border: 3px solid var(--ink); }
.seat.me { border-color: var(--gold); background: rgba(255, 210, 63, .14); }
.seat-me { color: var(--gold); }
.seat.add { border: 3px dashed rgba(255, 255, 255, .45); background: none; }
.seat.add .plus { border: 3px dashed rgba(255, 255, 255, .6); color: #fff; }
.seat.add:hover { background: rgba(255, 255, 255, .08); }
.lobby-wait { background: var(--well); border: 3px solid var(--ink); }
.lw-dog { filter: none; }
.tv-card { background: var(--well); border: 3px solid var(--ink); }
.tv-card.ok { background: rgba(46, 211, 160, .16); border-color: var(--green); }
.demo-note { background: var(--well); border: 2px dashed var(--line); }
.settings-title { color: #fff; font-weight: 400; }
.mode-pick button { background: var(--well); border: 3px solid var(--ink); }
.mode-pick button b { font-weight: 400; }
.mode-pick button.sel { background: var(--gold); border-color: var(--ink); box-shadow: var(--hard-sm); color: var(--ink); }
.mode-pick button.sel b { color: var(--ink); }
.mode-pick button.sel small { color: rgba(18, 14, 51, .75); }
.wait-note, .startbar .wait-note { background: var(--ink); border: 3px solid var(--ink); border-radius: 1.25rem; color: #fff; }
@media (max-width: 820px) {
  .set-btn { background: var(--well); border: 3px solid var(--ink); }
  .set-txt b { color: #fff; }
  .settings { background: var(--card); border: 3px solid var(--ink); border-bottom: 0; }
  .settings-title { background: var(--card); }
  .ticket { background: var(--gold); }
}

/* =========================================================
   GAME
   ========================================================= */
.g-round b, .chat-head { font-weight: 400; }
.gp { border: 2px solid transparent; }
.gp.turn { background: var(--gold); border-color: var(--ink); box-shadow: var(--hard-sm); color: var(--ink); }
.gp.turn .gp-score, .gp.turn .gp-score small { color: var(--ink); }
.gp.turn .ava { box-shadow: 0 0 0 3px var(--ink); animation: none; }
.gp.guessed { background: rgba(46, 211, 160, .2); border-color: var(--green); }
.gp.me { box-shadow: inset 5px 0 0 var(--red); }
.gp.turn.me { box-shadow: var(--hard-sm), inset 5px 0 0 var(--red); }
.gp-score { font-weight: 400; }
.gain { text-shadow: 0 .12rem 0 var(--ink); font-weight: 400; }
.gain.loss { text-shadow: 0 .12rem 0 var(--ink); }

/* the question card: paper */
.g-head, body.mode-wheel .g-head { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard); }
.g-label { color: #c8301e; text-transform: none; letter-spacing: 0; font-size: .86rem; }
.g-word .lt { border-bottom-color: rgba(18, 14, 51, .4); font-weight: 400; color: var(--ink); }
.g-word .lt.rev { color: #c8301e; border-color: #c8301e; }
.g-word .full { font-family: var(--font-d); font-style: normal; font-weight: 400; color: var(--ink); font-size: 1.7rem; }
.g-word .len { color: rgba(18, 14, 51, .55); }
.w-q { color: var(--ink); font-weight: 800; }
.timer .tr { stroke: rgba(18, 14, 51, .16); }
.timer .pr { stroke: #2b46d6; filter: none; }
.timer span { color: var(--ink); font-weight: 400; }
.timer.low span { color: #c8301e; }

/* chat */
.cm-name { color: var(--gold); }
.send { background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard-sm); border-radius: 1rem; }
.react-bar button { background: var(--well); border: 2px solid var(--ink); box-shadow: var(--hard-sm); border-radius: .8rem; }

/* drawing */
.board-wrap { box-shadow: 0 0 0 3px var(--ink), 0 .45rem 0 3px var(--ink); }
@media (max-width: 820px) { .board-wrap { box-shadow: 0 0 0 3px var(--ink), 0 .3rem 0 3px var(--ink); } }
.sw { box-shadow: 0 0 0 2px var(--ink); }
.sw.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); }
.tool.active { background: var(--gold); color: var(--ink); }
.sz.sel { background: rgba(255, 255, 255, .22); }

/* overlays */
.overlay { background: var(--overlay); backdrop-filter: none; }
.ov-label { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.ov-title { font-weight: 400; }
.ov-big { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold); filter: none; font-weight: 400; text-shadow: 0 .09em 0 var(--ink); }
.choice { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard); font-weight: 400; }
.choice:hover { border-color: var(--ink); }
.ov-count { background: var(--ink); border: 0; color: #fff; font-weight: 400; }
.gains > div { background: var(--well); }

/* host and the board */
.w-host-dog { background: var(--gold); border: 3px solid var(--ink); box-shadow: var(--hard-sm); }
.w-board-wrap { background: var(--ink); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--gold), 0 .5rem 0 3px var(--ink); margin: 3px 3px .5rem; }
.tile { background: #3d5cf5; border: 2px solid #8fa5ff; box-shadow: 0 .18rem 0 #05031c; color: rgba(255, 255, 255, .35); font-weight: 400; }
.tile.open { background: var(--cream); border-color: #fff; color: var(--ink); font-weight: 400; box-shadow: 0 .18rem 0 #05031c; text-shadow: none; }
@keyframes tileflip { 0% { transform: perspective(20rem) rotateX(-180deg) scale(1.1); background: #3d5cf5; color: transparent; } 45% { color: transparent; } 60% { box-shadow: 0 0 0 4px var(--gold); } 100% { transform: none; } }

/* panel, keys */
.w-status { font-weight: 900; }
.sec-chip { border: 3px solid var(--ink); border-radius: .8rem; font-weight: 400; background: #6a4bff; }
.sec-chip.s-x2 { background: var(--gold); color: var(--ink); }
.sec-chip.s-plus { background: var(--green); color: var(--ink); }
.sec-chip.s-prize { background: var(--red); color: #fff; }
.sec-chip.s-bank { background: #05031c; border-color: var(--red); }
.w3-result .sec-chip { box-shadow: var(--hard-sm); }
.key, .pin-pad button { background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 .2rem 0 var(--ink); font-weight: 400; }
.pin-pad button { border-width: 3px; border-radius: 1.2rem; }
.pin-pad button[data-k="⌫"] { background: var(--red); color: #fff; box-shadow: 0 .2rem 0 var(--ink); }
.pin-pad button:active { box-shadow: none; }
.w-keys.on .key:not(:disabled) { box-shadow: 0 .2rem 0 var(--ink), 0 0 0 2px var(--gold); }
.w-keys.on .key:not(:disabled):active { box-shadow: 0 0 0 var(--ink); }
.key.hit { background: var(--green); color: var(--ink); box-shadow: 0 .2rem 0 var(--ink); }
.key.miss { background: transparent; color: var(--rose); border-color: rgba(255, 154, 143, .55); box-shadow: none; }
.key.picked { background: #9fdcc9; color: var(--ink); box-shadow: 0 .2rem 0 var(--ink); }
.kword { background: var(--red); border: 2px solid var(--ink); box-shadow: 0 .2rem 0 var(--ink); font-weight: 400; }
.kword:active { box-shadow: none; }
@media (min-width: 821px) { .w-keys:not(.on) .key { box-shadow: 0 .14rem 0 var(--ink); } }
@media (max-width: 820px) {
  body[data-screen="game"] .card { background: var(--card); border-color: var(--ink); }
  body[data-screen="game"] .g-head, body.mode-wheel .g-head { background: var(--cream); border: 3px solid var(--ink); box-shadow: var(--hard-sm); }
  .gp { background: var(--ink); border: 2px solid var(--ink); }
  .gp.turn { background: var(--gold); }
  .w-keys .key { box-shadow: 0 .22rem 0 var(--ink); border-radius: .75rem; }
  .w-keys.on .key:not(:disabled) { box-shadow: 0 .22rem 0 var(--ink), 0 0 0 2px var(--gold); }
  .w-status { font-family: var(--font); font-weight: 900; font-size: 1.08rem; }
  .w-actions .btn, .w-actions .btn.gold { font-family: var(--font); font-weight: 900; font-size: 1.08rem; letter-spacing: 0; }
}
.w-spec { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--hard); }
.w-spec-name { font-weight: 400; }
.w-reel { background: var(--ink); border: 3px solid var(--ink); box-shadow: none; }
.rc { background: #6a4bff; font-weight: 400; }
.rc:nth-child(4n+2) { background: var(--red); }
.rc:nth-child(4n+3) { background: var(--teal); }
.rc:nth-child(4n) { background: #ff9d1f; }
.rc.rc-x2 { background: var(--gold) !important; color: var(--ink); }
.rc.rc-plus { background: var(--green) !important; }
.rc.rc-prize { background: var(--red) !important; color: #fff; }
.w-reel-mark { box-shadow: none; }
.w-stamp.bad { background: #fff; color: var(--red); text-shadow: none; box-shadow: var(--hard); }
.w-stamp.gold { background: var(--ink); color: var(--gold); text-shadow: none; box-shadow: 0 .38rem 0 rgba(0, 0, 0, .35); }
#mood { display: none; }

/* =========================================================
   FINAL, MODALS, TOASTS
   ========================================================= */
#final { background: var(--bg); backdrop-filter: none; }
#final::before { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .09) 0 6deg, transparent 6deg 18deg); }
.final-title { font-weight: 400; text-shadow: 0 .1em 0 var(--ink); }
.pd-block, .pd.p1 .pd-block, .pd.p2 .pd-block, .pd.p3 .pd-block { border: 3px solid var(--ink); box-shadow: none; color: var(--ink); font-weight: 400; border-radius: 1rem 1rem 0 0; }
.pd.p1 .pd-block { background: var(--gold); }
.pd.p2 .pd-block { background: #e6e9f6; }
.pd.p3 .pd-block { background: #ff9d6b; }
.pd-score { text-shadow: none; font-weight: 400; }
.final-rest > div, .aw { background: var(--ink); border: 0; }
.rec-banner { box-shadow: var(--hard-sm); border-width: 3px; border-radius: 1rem; }

.modal { background: rgba(12, 9, 45, .74); backdrop-filter: none; }
.modal-card, .namem { background: var(--card-2); border: 3px solid var(--ink); box-shadow: 0 .6rem 0 var(--ink); }
.modal-head h3, .confirm h3, .rc-card h3, .hs h4 { font-weight: 400; color: #fff; }
.pref, .modal .pref + .pref { border-color: var(--line-soft); }
.hs-art { background: var(--bg); border: 3px solid var(--ink); }
.hs-mini-board i { background: #3d5cf5; border: 2px solid #8fa5ff; color: var(--ink); font-weight: 400; }
.hs-mini-board i.o { background: var(--cream); }
.hs-mini-wheel { border: 4px solid var(--ink); box-shadow: var(--hard-sm); }
.hs-mini-wheel::after { background: #fff; box-shadow: 0 0 0 3px var(--ink); }
.hs-tv { background: #3d5cf5; box-shadow: 0 0 0 3px var(--gold); }
.hs-phone { box-shadow: 0 0 0 3px var(--gold); }
.help-foot .dots i.on { background: var(--gold); }
.pin-dots i { border: 3px solid #fff; }
.pin-dots i.on { background: var(--gold); border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold); }
.fam-code { color: var(--gold); font-weight: 400; }
.st-tabs { background: var(--ink); }
.st-tiles b, .h-nums b, .st-top b { font-weight: 400; }
.sa { background: rgba(255, 210, 63, .16); border: 2px solid var(--gold); }
.sa .aw-ic, .st-empty::before { filter: none; }
.sa.lock { background: var(--well); border: 2px dashed var(--line); }
.st-top li:first-child { background: rgba(255, 210, 63, .2); border-color: var(--gold); }
.voice-load, .rc-bar { background: var(--well); }
.voice-load i, .rc-bar i { background: var(--gold); }
#reconnect { background: rgba(12, 9, 45, .8); backdrop-filter: none; }

.toast { background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard-sm); border-radius: 1rem; font-weight: 900; }
.toast.err { background: #ffe1dd; color: #8a1023; }
.toast.ok { background: #d5fbeb; color: #0b5a34; }
.rx-n { background: #fff; color: var(--ink); border: 2px solid var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .h-stage::before, #final::before, .h-guest, .h-fam-face, .h-mini-wheel { animation: none !important; }
}
html.lite .h-stage::before { animation: none; }

/* =========================================================
   Ещё 10 игр на одном устройстве (js/minigames.js)
   ========================================================= */
.h-more { display: grid; gap: .7rem; min-width: 0; }
.h-more-sub { color: var(--muted); font-weight: 700; font-size: .95rem; margin-top: -.3rem; }
.mg-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.mg-tile { position: relative; display: grid; align-content: start; justify-items: start; gap: .25rem; padding: 1rem; min-height: 9.6rem; text-align: left; color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--hard); transition: transform .25s var(--spring); }
.mg-tile:hover { transform: translateY(-4px) rotate(-1deg); }
.mg-tile:active { transform: translateY(.2rem); box-shadow: none; }
.mg-tile.t0 { background: #ffd23f; } .mg-tile.t1 { background: #ff8a7a; } .mg-tile.t2 { background: #5fe0b8; } .mg-tile.t3 { background: #b3a4ff; } .mg-tile.t4 { background: #7fd0ff; }
.mg-ic { font-size: 2.2rem; line-height: 1; margin-bottom: .2rem; }
.mg-tile b { font-family: var(--font-d); font-weight: 400; font-size: 1.02rem; line-height: 1.15; }
.mg-tile small { font-size: .88rem; font-weight: 800; line-height: 1.25; }
.mg-tile i { font-style: normal; font-size: .76rem; font-weight: 900; margin-top: auto; padding: .15rem .55rem; border-radius: .6rem; background: var(--ink); color: #fff; }

/* ---- те же игры по сети (js/minigames-net.js) ---- */
.mgn-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 16rem)); gap: .8rem; }
.mgn-entry .btn { min-width: 0; white-space: normal; line-height: 1.1; padding-inline: .6rem; }
.mgn-sp { width: 3rem; flex-shrink: 0; }
.mgn-ps { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.mgn-ps > div { display: flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .25rem; border-radius: 2rem; background: var(--well); border: 3px solid var(--ink); font-weight: 900; font-size: .92rem; max-width: 100%; }
.mgn-ps > div > span:not(.mg-ava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 7.5rem; }
.mgn-ps .mg-ava { width: 1.9rem; height: 1.9rem; box-shadow: 0 0 0 2px var(--ink); }
.mgn-ps b { font-family: var(--font-d); font-weight: 400; font-variant-numeric: tabular-nums; }
.mgn-ps small { font-size: .74rem; font-weight: 900; opacity: .8; }
.mgn-ps > div.me { border-style: dashed; }
.mgn-ps > div.on { background: var(--gold); color: var(--ink); box-shadow: var(--hard-sm); }
.mgn-ps > div.off { opacity: .45; }
.mgn-code { font-family: var(--font-d); font-size: clamp(2.6rem, 14vw, 4rem); line-height: 1; letter-spacing: .14em; margin-right: -.14em; color: var(--gold); text-shadow: 0 .08em 0 var(--ink); }
.mgn-invite { margin-block: 0; gap: .6rem; }
.mgn-games { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .8rem; }
.mgn-games .mg-tile:disabled { filter: grayscale(.9); opacity: .5; transform: none; }
.mgn-gate .input, .mgn-form .input { width: 100%; text-align: center; }
.mgn-codeinp { font-family: var(--font-d); font-size: 1.6rem; letter-spacing: .3em; text-transform: uppercase; }
.mgn-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; width: 100%; }
.mgn-form .input { text-align: left; min-width: 0; }
.mgn-feed { list-style: none; display: grid; gap: .3rem; }
.mgn-feed li { padding: .4rem .8rem; border-radius: .9rem; background: var(--well); font-weight: 800; text-align: left; overflow-wrap: anywhere; }
.mgn-feed li.ok { background: var(--green); color: var(--ink); }
.mg-card .mgn-feed { width: 100%; }
.mgn-rank { list-style: none; display: grid; gap: .35rem; width: 100%; }
.mgn-rank li { display: grid; grid-template-columns: 2rem auto 1fr auto; align-items: center; gap: .6rem; padding: .35rem .8rem; border-radius: 1rem; background: var(--well); font-weight: 900; text-align: left; }
.mgn-rank li.me { box-shadow: 0 0 0 3px var(--gold); }
.mgn-rank i { font-style: normal; text-align: center; }
.mgn-rank span:not(.mg-ava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgn-rank b { font-family: var(--font-d); font-weight: 400; font-size: 1.2rem; }
.mgn-vote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mgn-vote button { display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem .4rem .4rem; border-radius: 1.1rem; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--hard-sm); font-weight: 900; min-width: 0; }
.mgn-vote button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgn-vote button.sel { background: var(--red); color: #fff; }
.mgn-host { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: auto; padding-top: .6rem; }
.mgn-host button { color: var(--muted); font-weight: 900; font-size: .9rem; text-decoration: underline; text-underline-offset: .2em; padding: .3rem; }
.mgn-lost { padding: .5rem .9rem; border-radius: 1rem; background: var(--red); color: #fff; border: 3px solid var(--ink); font-weight: 900; text-align: center; }
.mg-opts .btn.picked { background: var(--gold); color: var(--ink); }
.mg-simon.idle button { cursor: default; }
.mg-score > div > span:not(.mg-ava) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 820px) { .mgn-entry { grid-template-columns: 1fr 1fr; } }
.mgn-tvlink, .to-mini { justify-self: start; text-align: left; font-size: .95rem; }
.to-mini { display: block; margin: .2rem 0 .6rem; }
.to-mini[hidden] { display: none; }
.mgn-inv { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.mgn-qr { width: 7.5rem; height: 7.5rem; padding: .3rem; border-radius: .9rem; background: #fff; border: 3px solid var(--ink); flex-shrink: 0; }
.mgn-qr svg { width: 100%; height: 100%; display: block; }
.mgn-x { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; line-height: 1; margin-right: -.35rem; }
.mgn-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; }
.mgn-lvl { display: flex; align-items: center; gap: .6rem; font-weight: 900; font-size: .92rem; color: var(--muted); }
.mgn-lvl > div { display: flex; border: 3px solid var(--ink); border-radius: 1rem; overflow: hidden; background: var(--well); }
.mgn-lvl button { white-space: nowrap; padding: .4rem .8rem; font-weight: 900; color: var(--text); }
.mgn-lvl button.sel { background: var(--gold); color: var(--ink); }
#mgn { position: fixed; }
.mgn-rx { display: flex; justify-content: center; gap: .35rem; padding: .4rem 1rem calc(.5rem + env(safe-area-inset-bottom)); flex-shrink: 0; }
.mgn-rx[hidden] { display: none; }
.mgn-rx button { width: 2.7rem; height: 2.7rem; border-radius: 50%; font-size: 1.35rem; line-height: 1; background: var(--well); border: 3px solid var(--ink); transition: transform .15s var(--spring); }
.mgn-rx button:active { transform: scale(1.25); }
.mgn-fly { position: absolute; bottom: 4.5rem; display: grid; justify-items: center; pointer-events: none; z-index: 3; animation: mgnfly 2.4s ease-out forwards; }
.mgn-fly span { font-size: 2.6rem; line-height: 1; }
.mgn-fly small { padding: .05rem .5rem; border-radius: .6rem; background: var(--ink); color: #fff; font-weight: 900; font-size: .72rem; white-space: nowrap; }
@keyframes mgnfly { 0% { transform: translateY(0) scale(.4); opacity: 0; } 15% { transform: translateY(-2rem) scale(1.15); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-16rem) scale(1); opacity: 0; } }
/* «Слово из 5 букв» */
.w5-grid { display: grid; gap: .35rem; justify-content: center; width: auto !important; }
.w5-grid > div { display: grid; grid-template-columns: repeat(5, 3rem); gap: .35rem; }
.w5-grid span { height: 3rem; display: grid; place-items: center; border-radius: .7rem; background: var(--well); border: 3px solid var(--ink); font-family: var(--font-d); font-size: 1.5rem; text-transform: uppercase; color: var(--text); }
.w5-grid span.cur { background: var(--cream); color: var(--ink); animation: pop .2s var(--spring); }
.w5-grid span.m2, .w5-kb .key.m2 { background: #2ed3a0; color: var(--ink); }
.w5-grid span.m1, .w5-kb .key.m1 { background: #ffd23f; color: var(--ink); }
.w5-grid span.m0 { background: #4a4770; color: #fff; }
.w5-kb { display: grid; gap: .3rem; width: min(100%, 34rem) !important; }
.w5-kb > div { display: flex; justify-content: center; gap: .22rem; }
.w5-kb .key { flex: 1 1 0; min-width: 0; max-width: 2.6rem; height: 3rem; padding: 0; font-size: 1.05rem; border-radius: .55rem; opacity: 1 !important; }
.w5-kb .key.m0 { background: #4a4770; color: #a9a6cc; box-shadow: none; }
.w5-kb .key.wide { flex: 1.6 1 0; max-width: 4rem; font-size: 1.2rem; }
.w5-kb .key.del { background: var(--red); color: #fff; }
.w5-kb .key.ok { background: var(--gold); color: var(--ink); }
.w5-ps > div { padding-right: .45rem; }
.w5-mini { display: grid; gap: 1.5px; margin-left: .15rem; }
.w5-mini i { display: flex; gap: 1.5px; }
.w5-mini u { width: 4px; height: 4px; border-radius: 1.5px; background: rgba(255, 255, 255, .22); text-decoration: none; }
.w5-mini u.m2 { background: #2ed3a0; } .w5-mini u.m1 { background: #ffd23f; } .w5-mini u.m0 { background: #120e33; }
.mgn-ps > div.on .w5-mini u:not([class]) { background: rgba(18, 14, 51, .2); }
#mgn.tv .w5-kb { display: none; }
/* общий экран (телевизор): всё крупнее, кнопки не нужны */
@media (min-width: 900px) { #mgn.tv .mg-body { zoom: 1.5; } #mgn.tv .mg-body > * { width: min(100%, 40rem); } }
#mgn.tv .mg-body button { pointer-events: none; }
#mgn.tv .mg-abc, #mgn.tv .mg-pad { display: none; }

#mg, #mgn { z-index: 44; display: flex; flex-direction: column; place-items: stretch; padding: 0; color: var(--text);
  background: radial-gradient(circle at 1rem 1rem, rgba(255, 255, 255, .075) 0 .13rem, transparent .15rem) 0 0 / 2rem 2rem, var(--bg-lobby); animation: fadein .25s; }
.mg-top { display: flex; align-items: center; gap: .8rem; padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem; flex-shrink: 0; }
.mg-top h2 { flex: 1; min-width: 0; text-align: center; font-family: var(--font-d); font-weight: 400; font-size: clamp(1.1rem, 4.6vw, 1.6rem); text-shadow: 0 .12rem 0 var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-body { flex: 1; min-height: 0; overflow-y: auto; padding: .4rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.mg-body > * { width: min(100%, 32rem); flex-shrink: 0; }
.mg-card { display: grid; justify-items: center; gap: .9rem; padding: 1.4rem 1.2rem; text-align: center; background: var(--card); border: 3px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--hard); margin-block: auto; }
.mg-card.bad { background: #8f1f33; } .mg-card.hot { background: #a8431a; }
.mg-card h3 { font-family: var(--font-d); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.mg-card p { color: var(--muted); font-weight: 700; line-height: 1.45; max-width: 26rem; }
.mg-card .btn.xl { width: 100%; white-space: normal; height: auto; min-height: 3.9rem; padding-block: .5rem; line-height: 1.15; }
.mg-dog { width: 5.5rem; height: 5.5rem; border-radius: 50%; overflow: hidden; background: var(--gold); border: 3px solid var(--ink); box-shadow: var(--hard-sm); }
.mg-dog svg { width: 100%; height: 100%; stroke: none; display: block; }
.mg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: 100%; }
.mg-row .btn { min-width: 0; padding-inline: .5rem; white-space: normal; line-height: 1.1; }
.mg-big { font-family: var(--font-d); font-size: clamp(1.8rem, 9vw, 3.2rem); line-height: 1.1; color: var(--gold); text-shadow: 0 .09em 0 var(--ink); overflow-wrap: anywhere; text-transform: uppercase; }
.mg-timer { font-family: var(--font-d); font-size: 1.5rem; min-width: 4.6rem; padding: .2rem .9rem; border-radius: 1rem; background: var(--ink); color: #fff; font-variant-numeric: tabular-nums; }
.mg-note { text-align: center; color: var(--muted); font-weight: 800; line-height: 1.4; }
.mg-note b { color: var(--gold); }
.mg-score { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.mg-score > div { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .5rem .7rem; border-radius: 1.1rem; background: var(--well); border: 3px solid var(--ink); font-weight: 900; }
.mg-score > div.on { background: var(--gold); color: var(--ink); box-shadow: var(--hard-sm); }
.mg-score b { font-family: var(--font-d); font-weight: 400; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.mg-ava { width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px var(--ink); flex-shrink: 0; }
.mg-ava svg { width: 100%; height: 100%; stroke: none; display: block; }
.mg-step { display: flex; align-items: center; gap: 1.2rem; }
.mg-step b { font-family: var(--font-d); font-weight: 400; font-size: 2.4rem; min-width: 3rem; }
.mg-step .ib { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.mg-tag { padding: .2rem .9rem; border-radius: .8rem; background: var(--ink); font-weight: 900; }
.mg-task { font-size: 1.35rem; font-weight: 900; line-height: 1.35; }
.mg-q { font-family: var(--font) !important; font-weight: 900 !important; font-size: 1.3rem !important; line-height: 1.3 !important; }
.mg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: 100%; }
.mg-opts .btn { min-width: 0; height: auto; min-height: 3.6rem; padding: .4rem .5rem; white-space: normal; line-height: 1.15; font-size: 1.1rem; }
.mg-opts .btn.right { background: var(--green); }
.mg-opts .btn.wrong { background: var(--red); color: #fff; }

.mg-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.mg-mem button { aspect-ratio: 1; border-radius: 1.1rem; border: 3px solid var(--ink); background: #6a4bff; box-shadow: var(--hard-sm); display: grid; place-items: center; overflow: hidden; transition: transform .2s var(--spring); }
.mg-mem button i { font-style: normal; font-family: var(--font-d); font-size: 1.8rem; color: rgba(255, 255, 255, .6); }
.mg-mem button.up { background: #fff; animation: pop .3s var(--spring); }
.mg-mem button.ok { box-shadow: 0 0 0 4px var(--green); }
.mg-mem svg { width: 100%; height: 100%; stroke: none; display: block; }

.mg-ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; width: min(100%, 22rem) !important; }
.mg-ttt button { aspect-ratio: 1; border-radius: 1.2rem; border: 3px solid var(--ink); background: var(--cream); box-shadow: var(--hard-sm); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--ink); display: grid; place-items: center; }
.mg-ttt button.x { color: #d2331f; } .mg-ttt button.o { color: #2b46d6; }
.mg-ttt button.win { background: var(--gold); }

.mg-bones { display: flex; justify-content: center; gap: .3rem; font-size: 1.9rem; }
.mg-bones .gone { opacity: .22; filter: grayscale(1); }
.mg-word { display: flex; justify-content: center; gap: .35rem; flex-wrap: wrap; }
.mg-word span, .mg-code span { width: 2.3rem; height: 2.9rem; display: grid; place-items: center; border-radius: .6rem; background: #3d5cf5; border: 2px solid #8fa5ff; box-shadow: 0 .18rem 0 #05031c; font-family: var(--font-d); font-size: 1.5rem; text-transform: uppercase; color: var(--ink); }
.mg-word span.open, .mg-code span.on { background: var(--cream); border-color: #fff; }
.mg-word span.lost { background: #ffd0ca; }
.mg-abc { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; }
.mg-abc .key { height: 3rem; font-size: 1.25rem; opacity: 1 !important; }
.mg-code { display: flex; justify-content: center; gap: .5rem; }
.mg-code span { width: 3.2rem; height: 3.8rem; font-size: 2rem; }
.mg-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.mg-pad .key { height: 3.3rem; font-size: 1.4rem; opacity: 1 !important; }
.mg-pad .key:disabled { opacity: .35 !important; }
.mg-pad .key.del { grid-column: span 2; background: var(--red); color: #fff; }
.mg-pad .btn { grid-column: span 3; height: 3.3rem; }
.mg-hist { list-style: none; display: grid; gap: .35rem; }
.mg-hist li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .45rem .9rem; border-radius: .9rem; background: var(--well); font-weight: 900; }
.mg-hist b { font-family: var(--font-d); font-weight: 400; letter-spacing: .2em; font-size: 1.15rem; }

.mg-simon { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: min(100%, 22rem) !important; }
.mg-simon button { aspect-ratio: 1; border-radius: 1.6rem; border: 3px solid var(--ink); box-shadow: var(--hard); filter: brightness(.6) saturate(.8); transition: filter .12s, transform .12s; }
.mg-simon .c0 { background: var(--red); } .mg-simon .c1 { background: var(--gold); } .mg-simon .c2 { background: var(--green); } .mg-simon .c3 { background: #7fd0ff; }
.mg-simon button.on { filter: none; transform: scale(1.05); box-shadow: var(--hard), 0 0 0 5px #fff; }

@media (max-width: 1100px) { .mg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .mg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .mg-tile { min-height: 9rem; padding: .85rem; }
  .mg-tile b { font-size: .92rem; }
  .mg-tile small { font-size: .82rem; }
  .mg-abc { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 380px) { .mg-opts { grid-template-columns: 1fr; } }