/* =========================================================
   Посиделки — «Вечернее ТВ-шоу»
   Layout: stage background → topbar → screens (home / lobby / game) → layers (final, modals, reconnect)
   ========================================================= */
:root {
  --ink: #0b0618; --night: #120b26; --navy: #2a1856; --royal: #3d2378; --blue: #6b45c9; --sky: #b9a7ff;
  --gold: #f7c948; --gold-hi: #fff1b8; --gold-lo: #c98a12; --amber: #e9a320;
  --cream: #fff8ea; --paper: #f3ead3; --red: #e5394d; --rose: #ff7a90; --green: #2fd18b; --teal: #3aa68a;
  --text: #f5f0ff; --muted: rgba(232, 226, 255, .74); --dim: rgba(232, 226, 255, .5);
  --line: rgba(178, 150, 255, .3); --line-soft: rgba(255, 255, 255, .1);
  --panel: linear-gradient(180deg, rgba(58, 36, 118, .66), rgba(18, 12, 40, .86));
  --panel-solid: linear-gradient(180deg, #3a2370, #1a0f36);
  --r-xl: 1.6rem; --r-lg: 1.25rem; --r-md: 1rem; --r-sm: .75rem;
  --font-d: "Unbounded", "Manrope", system-ui, sans-serif;
  --font: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-s: "Playfair Display", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html.big { font-size: 18.5px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.45; font-weight: 600;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
input, textarea { font: inherit; color: inherit; }
svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: currentColor; flex-shrink: 0; }
.ava svg, .dog svg, .art svg { width: 100%; height: 100%; stroke: none; display: block; }
[hidden] { display: none !important; }
::selection { background: rgba(247, 201, 72, .45); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- stage ---------- */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#bg.fallback { background: radial-gradient(ellipse at 50% 0%, #4b2c8f 0%, transparent 60%), linear-gradient(90deg, #2a0f5a 0 6%, transparent 14% 86%, #2a0f5a 94%), #120b26; }
#app { position: relative; z-index: 2; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
main { position: relative; flex: 1; min-height: 0; }

/* ---------- type ---------- */
.label { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-weight: 800; }
.label .muted { text-transform: none; letter-spacing: 0; font-weight: 600; }
.label.center { text-align: center; }
.accent { font-family: var(--font-s); font-style: italic; font-weight: 800; color: var(--gold); }

/* ---------- panels ---------- */
.card {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: 0 1.8rem 4rem -1.8rem rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .03);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 3rem; padding: 0 1.3rem; border-radius: 999px; font-weight: 800; font-size: 1rem; letter-spacing: .01em; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .2s, opacity .2s;
  user-select: none; -webkit-user-select: none;
}
.btn span { position: relative; z-index: 1; }
.btn.sm { height: 2.4rem; padding: 0 1rem; font-size: .92rem; }
.btn.lg { height: 3.4rem; font-size: 1.05rem; }
.btn.xl { height: 3.9rem; padding: 0 2rem; font-size: 1.2rem; font-family: var(--font-d); font-weight: 800; letter-spacing: .01em; }
.btn.gold {
  background: linear-gradient(180deg, #fff3b9 0%, #f9cf55 36%, #e8a51f 100%); color: #3b2300; border: 1px solid #ffe9a2;
  box-shadow: 0 .3rem 0 #a4660a, 0 .8rem 1.6rem -.5rem rgba(247, 201, 72, .7), inset 0 2px 0 rgba(255, 255, 255, .75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.btn.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat; animation: sheen 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.btn.navy { background: linear-gradient(180deg, #6a48cc, #3c2486); color: var(--cream); border: 1px solid rgba(247, 201, 72, .5); box-shadow: 0 .3rem 0 #1b0e42, inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.red { background: linear-gradient(180deg, #ff6b7d, #c8203a); color: #fff; border: 1px solid #ff9aa8; box-shadow: 0 .3rem 0 #7a0d1d, inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(.22rem) !important; box-shadow: 0 .06rem 0 rgba(0, 0, 0, .4) !important; }
.btn:disabled { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.btn.loading span { opacity: .35; }
.btn.loading::before { content: ""; position: absolute; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; z-index: 2; }
@keyframes spin { to { transform: rotate(360deg); } }
.ib {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--cream);
  background: linear-gradient(180deg, rgba(98, 68, 196, .85), rgba(42, 28, 98, .9)); border: 1px solid rgba(247, 201, 72, .45);
  box-shadow: 0 .18rem 0 #160b30, inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .2s var(--spring);
}
.ib:hover { transform: scale(1.06); }
.ib:active { transform: scale(.92); }
.ib svg { width: 1.3rem; height: 1.3rem; }
.ib.leave { color: #ffc2cb; }
#btn-sound .ic-off { display: none; }
#btn-sound.muted .ic-on { display: none; }
#btn-sound.muted .ic-off { display: block; }
.link-btn { display: inline-flex; align-items: center; gap: .45rem; color: var(--gold); font-weight: 800; padding: .5rem .25rem; align-self: center; }
.link-btn svg { width: 1.3rem; height: 1.3rem; }

/* ---------- inputs ---------- */
.input {
  width: 100%; height: 3.3rem; padding: 0 1.1rem; border-radius: var(--r-md); font-size: 1.12rem; font-weight: 700;
  background: rgba(16, 10, 36, .55); border: 2px solid rgba(247, 201, 72, .28); outline: none; color: var(--cream);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: rgba(232, 226, 255, .38); font-weight: 600; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 .3rem rgba(247, 201, 72, .2); }
.input.code { text-transform: uppercase; letter-spacing: .35em; text-align: center; font-family: var(--font-d); font-size: 1.3rem; }
.input.code::placeholder { letter-spacing: .25em; }
.input.area { height: 5.5rem; padding: .8rem 1rem; resize: none; font-size: 1rem; line-height: 1.45; }
.switch { width: 3.4rem; height: 2rem; border-radius: 999px; background: rgba(255, 255, 255, .15); position: relative; transition: background .3s; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .12); }
.switch i { position: absolute; top: .18rem; left: .2rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .4s var(--spring); }
.switch.on { background: linear-gradient(90deg, #e8a51f, #f9cf55); border-color: #ffe9a2; }
.switch.on i { transform: translateX(1.38rem); }
.seg { display: flex; padding: .25rem; border-radius: var(--r-md); background: rgba(16, 10, 36, .5); border: 1px solid var(--line-soft); }
.seg button { flex: 1; height: 2.6rem; border-radius: .7rem; font-weight: 800; color: var(--muted); transition: all .25s var(--ease); }
.seg button.sel { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; box-shadow: 0 .15rem 0 #a4660a; }

/* ---------- topbar ---------- */
.topbar { height: 4.5rem; padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--gold); }
.brand-badge { width: 2.7rem; height: 2.7rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #5b3db0, #2a1856); border: 2px solid var(--gold); box-shadow: 0 0 1.2rem rgba(247, 201, 72, .45); }
.brand-badge svg { width: 100%; height: 100%; stroke: none; }
.brand-name { font-family: var(--font-d); font-weight: 900; font-size: 1.35rem; letter-spacing: -.01em; background: linear-gradient(180deg, #fff6c9, #f7c948 55%, #e09b1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(120, 70, 5, .8)); }
.top-actions { display: flex; align-items: center; gap: .6rem; }
.room-chip { display: flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: rgba(16, 10, 36, .6); border: 1px solid var(--line); font-family: var(--font-d); letter-spacing: .14em; font-size: .95rem; color: var(--cream); }
.live { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .7rem var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; padding: .5rem 1.75rem 1.5rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .22s ease-out, transform .3s var(--ease), visibility 0s .22s; }
/* the old screen is gone before the new one fades in: no two screens on top of each other */
.screen.active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .18s, transform .6s var(--ease) .18s, visibility 0s 0s; }

/* =========================================================
   HOME
   ========================================================= */
#screen-home { overflow-y: auto; justify-content: safe center; }
.home { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; max-width: 76rem; width: 100%; margin: 0 auto; }
.home-hero { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.marquee { position: relative; padding: 1.6rem 2.6rem 1.4rem; border-radius: 2rem; text-align: center;
  background: linear-gradient(180deg, rgba(46, 22, 104, .75), rgba(22, 10, 54, .85)); border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(120, 70, 5, .45), 0 0 3rem rgba(247, 201, 72, .35), inset 0 0 2rem rgba(0, 0, 0, .6); }
.marquee .bulb { position: absolute; width: .7rem; height: .7rem; margin: -.35rem; border-radius: 50%; background: #fff6d0; box-shadow: 0 0 .5rem #ffd76a, 0 0 1rem rgba(255, 200, 80, .7); animation: bulb 1.2s steps(1) infinite; }
.marquee .bulb:nth-child(2n) { animation-delay: .6s; }
@keyframes bulb { 0%, 49% { background: #fff6d0; box-shadow: 0 0 .5rem #ffd76a, 0 0 1rem rgba(255, 200, 80, .7); } 50%, 100% { background: #8a6420; box-shadow: none; } }
.logo { font-family: var(--font-d); font-weight: 900; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe07a 38%, #f2b42a 62%, #ffe9a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #7a4606) drop-shadow(0 .6rem 1.2rem rgba(0, 0, 0, .55)); }
.logo-sub { margin-top: .55rem; font-family: var(--font-s); font-style: italic; font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--gold-hi); }
.greet { display: flex; align-items: flex-end; gap: .4rem; }
.greet-dog { width: 12.5rem; aspect-ratio: 220 / 260; filter: drop-shadow(0 1.4rem 1.6rem rgba(0, 0, 0, .55)); }
.bubble { position: relative; max-width: 19rem; margin-bottom: 7.5rem; padding: 1rem 1.2rem; border-radius: 1.3rem 1.3rem 1.3rem .3rem; background: var(--cream); color: #3a1a10; font-weight: 700; font-size: 1.05rem; line-height: 1.4; box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .7); min-height: 3.4rem; }
.bubble::before { content: ""; position: absolute; left: -.6rem; bottom: .4rem; border: .6rem solid transparent; border-right-color: var(--cream); border-left: 0; }
.home-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; max-width: 40rem; }
.mcard { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: var(--r-lg); background: rgba(22, 14, 48, .6); border: 1px solid var(--line); }
.mcard b { display: block; font-family: var(--font-d); font-size: .98rem; color: var(--gold); margin-bottom: .15rem; }
.mcard span { font-size: .88rem; color: var(--muted); font-weight: 600; line-height: 1.35; }
.mcard-ic, .mp-ic { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; }
.wheel-ic { background: conic-gradient(#e5394d 0 12.5%, #f7c948 0 25%, #6b45c9 0 37.5%, #3aa68a 0 50%, #e5394d 0 62.5%, #f7c948 0 75%, #6b45c9 0 87.5%, #3aa68a 0); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #7a4606, inset 0 0 0 .7rem transparent; position: relative; }
.wheel-ic::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b9, #e8a51f); }
.draw-ic { background: radial-gradient(circle at 50% 50%, #fff 0 52%, transparent 53%), linear-gradient(135deg, #ff7a90, #f7c948 50%, #3aa68a); border: 3px solid var(--gold); position: relative; }
.draw-ic::after { content: ""; position: absolute; left: 28%; top: 50%; width: 46%; height: 12%; border-radius: 99px; background: #3d2378; transform: rotate(-35deg); }

.profile { padding: 1.7rem; display: flex; flex-direction: column; gap: 1.1rem; }
.invite { padding: .8rem 1rem; border-radius: var(--r-md); background: linear-gradient(100deg, rgba(247, 201, 72, .22), rgba(247, 201, 72, .08)); border: 1px solid var(--line); font-weight: 700; }
.invite b { font-family: var(--font-d); letter-spacing: .12em; color: var(--gold); }
.prof-row { display: flex; align-items: center; gap: 1.1rem; }
.prof-name { flex: 1; min-width: 0; display: grid; gap: .45rem; }
.ava { --s: 2.6rem; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; background: #fff;
  box-shadow: 0 0 0 2px rgba(247, 201, 72, .85), 0 .4rem .9rem -.3rem rgba(0, 0, 0, .7); }
.ava.sm { --s: 2.1rem; } .ava.lg { --s: 3.6rem; } .ava.xl { --s: 5.6rem; box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(247, 201, 72, .18), 0 1rem 2rem -.6rem rgba(0, 0, 0, .8); }
.ava.xxl { --s: 7rem; box-shadow: 0 0 0 4px var(--gold), 0 0 2.5rem rgba(247, 201, 72, .45); }
.ava.off { filter: grayscale(1) brightness(.75); }
.ava.off::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .25) 6px 9px); }
#ava-preview { animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-.35rem) rotate(-3deg); } }
.ava-tabs { display: flex; gap: .4rem; padding: .25rem; border-radius: 999px; background: rgba(16, 10, 36, .5); border: 1px solid var(--line-soft); align-self: flex-start; }
.ava-tabs button { padding: .45rem 1.1rem; border-radius: 999px; font-weight: 800; color: var(--muted); }
.ava-tabs button.sel { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; }
.ava-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.ava-opt { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid transparent; transition: transform .25s var(--spring), border-color .2s; background: #fff; }
.ava-opt svg { width: 100%; height: 100%; display: block; stroke: none; }
.ava-opt:hover { transform: scale(1.07); }
.ava-opt.sel { border-color: var(--gold); transform: scale(1.08); box-shadow: 0 0 1rem rgba(247, 201, 72, .6); }
.or { display: flex; align-items: center; gap: .8rem; color: var(--dim); font-size: .9rem; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
.join-row .input { height: 3.4rem; }

/* =========================================================
   LOBBY
   ========================================================= */
#screen-lobby { justify-content: safe center; }
.lobby { display: grid; grid-template-columns: 1fr 26rem; gap: 1.5rem; max-width: 76rem; width: 100%; margin: 0 auto; min-height: 0; }
.studio { padding: 1.6rem; display: flex; flex-direction: column; min-height: 32rem; }
.ticket { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.1rem 1.3rem; border-radius: var(--r-lg);
  background: linear-gradient(100deg, rgba(247, 201, 72, .18), rgba(247, 201, 72, .05)); border: 2px dashed rgba(247, 201, 72, .55); }
.t-code { font-family: var(--font-d); font-weight: 900; font-size: 3rem; letter-spacing: .14em; line-height: 1.1; display: flex; }
.t-code span { display: inline-block; background: linear-gradient(180deg, #fffbe6, #f7c948 60%, #e09b1a); -webkit-background-clip: text; background-clip: text; color: transparent; animation: rise .7s var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(.8rem); } }
.invite-row { display: flex; gap: .6rem; }
.seats-head { display: flex; justify-content: space-between; margin: 1.3rem 0 .8rem; font-family: var(--font-d); font-size: 1rem; color: var(--gold); }
.seats-head .count { color: var(--dim); font-family: var(--font); font-weight: 700; }
.seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .8rem; align-content: start; overflow-y: auto; flex: 1; min-height: 0; }
.seat { position: relative; display: grid; justify-items: center; gap: .55rem; padding: 1.1rem .6rem .9rem; border-radius: var(--r-lg); background: rgba(16, 10, 36, .35); border: 1px solid var(--line-soft); animation: pop .5s var(--spring) backwards; text-align: center; }
.seat .ava { --s: 4rem; }
.seat.me { border-color: rgba(247, 201, 72, .6); background: rgba(247, 201, 72, .08); }
.seat-me { font-size: .72rem; color: var(--gold); font-weight: 800; margin-top: -.35rem; }
.seat-name { font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-tag { position: absolute; top: .45rem; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap; max-width: calc(100% - .4rem); text-transform: none; font-size: .68rem; font-weight: 800; padding: .12rem .45rem; border-radius: 99px; background: var(--gold); color: #3b2300; }
.seat-kick { position: absolute; top: .35rem; right: .35rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; color: var(--dim); }
.seat-kick:hover { background: rgba(229, 57, 77, .25); color: #fff; }
.seat-kick svg { width: .9rem; height: .9rem; }
.seat.add { border-style: dashed; border-color: rgba(247, 201, 72, .4); color: var(--muted); cursor: pointer; align-content: center; }
.seat.add .plus { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 400; border: 2px dashed rgba(247, 201, 72, .55); color: var(--gold); }
.seat.add:hover { background: rgba(247, 201, 72, .08); }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(.5rem); } }
.set-btn { display: none; }
.demo-note { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--r-md); font-size: .9rem; color: var(--muted); background: rgba(185, 167, 255, .1); border: 1px solid rgba(185, 167, 255, .3); }

.settings { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.15rem; overflow-y: auto; }
.settings-title { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-d); font-size: 1.35rem; color: var(--gold); }
.sheet-close { display: none; }
.settings.readonly .seg, .settings.readonly .switch, .settings.readonly textarea, .settings.readonly .mode-pick { pointer-events: none; }
.settings.readonly .mode-pick button:not(.sel) { opacity: .4; }
.mode-pick { display: grid; gap: .6rem; }
.mode-pick button { display: flex; align-items: center; gap: .9rem; padding: .8rem; border-radius: var(--r-lg); background: rgba(16, 10, 36, .4); border: 2px solid var(--line-soft); text-align: left; transition: all .25s var(--ease); }
.mode-pick button b { display: block; font-family: var(--font-d); font-size: 1rem; }
.mode-pick button small { color: var(--muted); font-size: .85rem; font-weight: 600; }
.mode-pick button.sel { border-color: var(--gold); background: linear-gradient(100deg, rgba(247, 201, 72, .2), rgba(247, 201, 72, .05)); box-shadow: 0 0 1.4rem -.3rem rgba(247, 201, 72, .6); }
.mode-pick button.sel b { color: var(--gold); }
.set-row { display: grid; gap: .5rem; }
.set-row.inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.set-name { font-weight: 800; font-size: 1.02rem; }
.set-desc { color: var(--dim); font-size: .86rem; font-weight: 600; }
.wheel-rules { font-size: .9rem; color: var(--muted); padding: .8rem 1rem; border-radius: var(--r-md); background: rgba(247, 201, 72, .07); border: 1px solid rgba(247, 201, 72, .22); font-weight: 600; }
.startbar { max-width: 76rem; width: 100%; margin: 1.1rem auto 0; display: flex; justify-content: flex-end; }
.startbar .btn { min-width: 22rem; }
.wait-note { display: flex; align-items: center; justify-content: center; gap: .7rem; color: var(--muted); font-weight: 700; height: 3.9rem; padding: 0 1.5rem; border-radius: 999px; background: rgba(16, 10, 36, .55); border: 1px solid var(--line-soft); }
.spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid var(--gold); border-right-color: transparent; animation: spin .8s linear infinite; flex-shrink: 0; }
.backdrop { display: none; }

/* =========================================================
   GAME (shared)
   ========================================================= */
#screen-game { padding-top: 0; }
.game { display: grid; grid-template-columns: 16.5rem 1fr 20rem; gap: 1.1rem; height: 100%; min-height: 0; }
.g-players, .g-chat { padding: 1rem; display: flex; flex-direction: column; min-height: 0; }
.g-round { font-size: .9rem; font-weight: 700; color: var(--muted); padding: .1rem .3rem .8rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .6rem; display: flex; justify-content: space-between; }
.g-round b { color: var(--gold); font-family: var(--font-d); font-weight: 700; }
.g-plist { display: grid; gap: .45rem; overflow-y: auto; align-content: start; }
.gp { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--r-md); border: 1px solid transparent; transition: background .3s, border-color .3s; }
.gp.turn { background: linear-gradient(100deg, rgba(247, 201, 72, .25), rgba(247, 201, 72, .06)); border-color: rgba(247, 201, 72, .6); box-shadow: 0 0 1.4rem -.5rem rgba(247, 201, 72, .7); }
.gp.guessed { background: rgba(47, 209, 139, .12); border-color: rgba(47, 209, 139, .4); }
.gp.out { opacity: .45; }
.gp .ava { --s: 2.6rem; }
.gp-info { flex: 1; min-width: 0; }
.gp-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp.me { box-shadow: inset 4px 0 0 var(--gold); }
.gp-score { font-family: var(--font-d); font-weight: 700; font-size: .9rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.gp-score small { font-family: var(--font); font-size: .75rem; color: var(--dim); font-weight: 700; margin-left: .3rem; }
.gp-tag { font-size: .68rem; font-weight: 800; padding: .15rem .45rem; border-radius: 99px; background: var(--gold); color: #3b2300; white-space: nowrap; }
.gp-tag.off { background: #6a6280; color: #fff; }
.gain { position: absolute; right: .5rem; top: -.2rem; font-family: var(--font-d); font-weight: 800; color: var(--green); pointer-events: none; animation: gain 1.6s var(--ease) forwards; text-shadow: 0 0 1rem rgba(47, 209, 139, .9); }
@keyframes gain { 0% { opacity: 0; transform: translateY(.6rem) scale(.6); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-1.5rem); } }

.g-center { display: flex; flex-direction: column; gap: .9rem; min-width: 0; min-height: 0; }
.g-head { min-height: 4.6rem; border-radius: var(--r-lg); padding: .7rem .8rem .7rem 1.3rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; flex-shrink: 0; }
.g-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--gold); max-width: 7rem; line-height: 1.25; }
.g-word { display: flex; gap: .35rem; align-items: center; justify-content: center; min-height: 2.6rem; flex-wrap: wrap; }
.g-word .lt { width: 1.8rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; font-family: var(--font-d); border-bottom: 3px solid rgba(255, 255, 255, .4); text-transform: uppercase; }
.g-word .lt.sp { border-color: transparent; width: .9rem; }
.g-word .lt.rev { animation: flipin .7s var(--spring); color: var(--gold); border-color: var(--gold); }
@keyframes flipin { from { transform: rotateX(90deg) scale(1.3); opacity: 0; } }
.g-word .full { font-family: var(--font-s); font-style: italic; font-weight: 800; font-size: 2.1rem; line-height: 1.05; color: var(--gold); }
.g-word .len { margin-left: .5rem; font-size: .8rem; color: var(--dim); font-weight: 800; }
.w-q { font-size: 1.22rem; font-weight: 700; line-height: 1.35; text-align: center; text-wrap: balance; color: var(--cream); }
.timer { position: relative; width: 3.3rem; height: 3.3rem; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.timer .tr { stroke: rgba(255, 255, 255, .14); stroke-width: 4; }
.timer .pr { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 125.66; transition: stroke .3s; filter: drop-shadow(0 0 4px rgba(247, 201, 72, .7)); }
.timer span { font-family: var(--font-d); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.timer.low .pr { stroke: var(--red); }
.timer.low span { color: var(--rose); animation: beat 1s infinite; }
.timer.idle svg { opacity: .25; }
@keyframes beat { 15% { transform: scale(1.25); } 30% { transform: none; } }

/* chat */
.chat-head { font-family: var(--font-d); color: var(--gold); padding: .1rem .3rem .8rem; border-bottom: 1px solid var(--line-soft); }
.chat-list { flex: 1; overflow-y: auto; padding: .7rem .1rem; display: flex; flex-direction: column; gap: .25rem; overscroll-behavior: contain; }
.cm { display: flex; gap: .6rem; padding: .35rem .45rem; border-radius: var(--r-sm); animation: msg .4s var(--ease) backwards; }
@keyframes msg { from { opacity: 0; transform: translateY(.5rem); } }
.cm .ava { --s: 2rem; }
.cm-body { min-width: 0; overflow-wrap: anywhere; }
.cm-name { font-weight: 800; font-size: .82rem; color: var(--gold); }
.cm-text { font-weight: 600; }
.cm.secret { background: rgba(47, 209, 139, .1); }
.cs { text-align: center; font-size: .86rem; font-weight: 800; padding: .45rem .6rem; border-radius: var(--r-sm); margin: .1rem 0; animation: msg .4s var(--ease) backwards; color: var(--dim); }
.cs.ok { color: var(--green); background: rgba(47, 209, 139, .12); }
.cs.close { color: var(--gold); background: rgba(247, 201, 72, .12); }
.cs.join { color: var(--sky); }
.cs.leave { color: var(--rose); }
.cs.reveal { color: var(--cream); background: rgba(255, 255, 255, .08); }
.cs.turn { color: var(--gold); }
.chat-form { display: flex; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line-soft); }
.chat-form .input { height: 3rem; font-size: 1rem; }
.send { width: 3rem; height: 3rem; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(180deg, #fff3b9, #e8a51f); color: #3b2300; box-shadow: 0 .2rem 0 #a4660a; }
.send:active { transform: translateY(.15rem); box-shadow: none; }

/* draw mode */
.stage { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.board-wrap { position: relative; width: min(100cqw, 100cqh * 1.6); aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: #fff;
  box-shadow: 0 0 0 4px var(--gold), 0 0 0 8px rgba(120, 70, 5, .5), 0 2rem 4rem -1rem rgba(0, 0, 0, .9); }
#board { width: 100%; height: 100%; display: block; touch-action: none; }
.board-wrap.can-draw #board { cursor: none; }
.board-wrap.can-draw.fill #board { cursor: crosshair; }
.brush-cursor { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); opacity: 0; transform: translate(-50%, -50%); }
.board-wrap.can-draw:not(.fill):hover .brush-cursor { opacity: 1; }
.toolbar { border-radius: var(--r-lg); padding: .6rem .9rem; display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; flex-shrink: 0; }
.toolbar.off { display: none; }
.tb-group { display: flex; align-items: center; gap: .3rem; }
.colors { gap: .35rem; }
.sw { width: 1.7rem; height: 1.7rem; border-radius: .5rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .25s var(--spring); flex-shrink: 0; }
.sw.sel { transform: scale(1.18); border-radius: 50%; box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--gold); }
.sw-custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.sw-custom input { position: absolute; inset: -10px; opacity: 0; cursor: pointer; }
.sz, .tool { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: grid; place-items: center; color: var(--muted); transition: background .2s; }
.sz i { display: block; border-radius: 50%; background: #fff; }
.sz.sel { background: rgba(255, 255, 255, .18); }
.tool.active { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; }
.tool:active { transform: scale(.9); }

/* overlays inside game */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.6rem; z-index: 6;
  background: radial-gradient(ellipse at 50% 20%, rgba(120, 80, 230, .35), transparent 60%), rgba(16, 10, 36, .88); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.overlay.show { opacity: 1; visibility: visible; transition-delay: 0s; }
.ov { display: grid; gap: .9rem; justify-items: center; animation: rise .7s var(--ease) both; max-width: 32rem; width: 100%; }
.ov-label { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 800; }
.ov-title { font-family: var(--font-d); font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.ov-sub { color: var(--muted); font-weight: 700; }
.ov-big { --ow: 46vw; font-family: var(--font-d); font-weight: 900; font-size: clamp(1.1rem, min(6vw, calc(var(--ow) / var(--len, 8) / .92)), 3.6rem); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; max-width: 100%; min-width: 0;
  background: linear-gradient(180deg, #fffbe6, #f7c948 60%, #e09b1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #7a4606); }
.ov-dog { width: 8rem; aspect-ratio: 220 / 260; }
.choices { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.choice { min-width: 11rem; padding: 1.1rem 1.4rem; border-radius: var(--r-lg); font-family: var(--font-d); font-weight: 700; font-size: 1.3rem; background: var(--panel-solid); border: 2px solid var(--line); transition: transform .3s var(--spring); animation: pop .5s var(--spring) backwards; }
.choice:hover { transform: translateY(-4px); border-color: var(--gold); }
.ov-count { font-size: .9rem; color: var(--dim); font-weight: 700; }
.dots::after { content: ""; animation: dots 1.4s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.gains { display: grid; gap: .35rem; width: 100%; max-width: 22rem; }
.gains > div { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .07); animation: pop .45s var(--spring) backwards; }
.gains > div span { flex: 1; text-align: left; font-weight: 700; }
.gains > div b { font-family: var(--font-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.gains .muted { color: var(--dim); font-size: .8rem; }

/* =========================================================
   ПОЛЕ ЧУДЕС
   ========================================================= */
.w-area { display: none; }
body.mode-wheel .stage, body.mode-wheel .toolbar { display: none !important; }
body.mode-wheel .w-area { display: grid; grid-template-rows: auto auto 1fr; gap: .9rem; flex: 1; min-height: 0; position: relative; }

/* host */
.w-host { display: flex; align-items: center; gap: .7rem; min-height: 4.4rem; }
.w-host-dog { width: 4.4rem; height: 4.4rem; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #5b3db0, #2a1856 70%); border: 3px solid var(--gold); box-shadow: 0 0 1.3rem rgba(247, 201, 72, .4); position: relative; }
.w-host-dog .dog { position: absolute; left: -24%; top: -10%; width: 148%; }
.w-bubble { position: relative; flex: 1; min-width: 0; padding: .6rem 1.1rem .7rem; border-radius: 1.2rem; background: var(--cream); color: #3a1a10; box-shadow: 0 .8rem 1.6rem -1rem rgba(0, 0, 0, .8); }
.w-bubble::before { content: ""; position: absolute; left: -.55rem; top: 50%; margin-top: -.55rem; border: .55rem solid transparent; border-right-color: var(--cream); border-left: 0; }
.w-host-name { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: #b2730c; font-weight: 800; }
.w-host-text { font-size: 1.1rem; font-weight: 800; line-height: 1.3; min-height: 1.4em; }
.w-host.pop .w-bubble { animation: bubble .45s var(--spring); }
@keyframes bubble { 0% { transform: scale(.94); } }

/* board (табло) */
.w-board-wrap { position: relative; padding: 1.1rem .9rem; border-radius: var(--r-lg); background: radial-gradient(ellipse at 50% 0%, rgba(80, 160, 255, .22), transparent 70%), linear-gradient(180deg, #0d1640, #060a22); border: 3px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(120, 70, 5, .45), inset 0 0 2rem rgba(0, 0, 0, .7), 0 1.2rem 2.4rem -1.4rem rgba(0, 0, 0, .9); }
.w-board-wrap::before, .w-board-wrap::after { content: ""; position: absolute; left: 1rem; right: 1rem; height: 4px; border-radius: 4px;
  background: radial-gradient(circle, #fff6d0 0 2px, transparent 2.5px) 0 0 / 14px 4px repeat-x; animation: chase 1s linear infinite; opacity: .9; }
.w-board-wrap::before { top: 4px; } .w-board-wrap::after { bottom: 4px; animation-direction: reverse; }
@keyframes chase { to { background-position: 14px 0; } }
.w-board { display: grid; gap: .45rem; justify-items: center; container-type: inline-size; }
.w-row { display: flex; gap: .35rem; justify-content: center; width: 100%; }
.tile {
  --tw: min(3.6rem, calc((100cqw - (var(--n) - 1) * .35rem) / var(--n)));
  width: var(--tw); height: calc(var(--tw) * 1.2); border-radius: calc(var(--tw) * .14); display: grid; place-items: center; position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0 46%, transparent 50%), radial-gradient(ellipse at 50% 120%, #3fa8ff 0%, #1b5fd6 45%, #0b2a7a 100%);
  border: 2px solid #8fd0ff;
  box-shadow: 0 0 0 2px #0a1c4e, 0 0 .9rem rgba(80, 170, 255, .55), inset 0 0 .7rem rgba(160, 220, 255, .45), 0 .35rem .8rem -.3rem rgba(0, 0, 0, .8);
  color: rgba(200, 232, 255, .3); font-family: var(--font-d); font-weight: 700; font-size: calc(var(--tw) * .26); transition: transform .3s var(--spring);
  transform-style: preserve-3d;
}
.tile.open { background: linear-gradient(180deg, #ffffff 0%, #f6f1e2 55%, #e2d6b4 100%); border-color: #ffe08a; color: #142a6e; font-size: calc(var(--tw) * .6); font-weight: 900;
  box-shadow: 0 0 0 2px #7a4606, 0 0 1.6rem -.1rem rgba(255, 220, 120, .8), inset 0 -.25rem .5rem rgba(0, 0, 0, .12); text-shadow: 0 1px 0 #fff; }
.tile.flip { animation: tileflip .9s var(--spring) both; }
@keyframes tileflip { 0% { transform: perspective(20rem) rotateX(-180deg) scale(1.1); background: #1b5fd6; color: transparent; } 45% { color: transparent; } 60% { box-shadow: 0 0 0 2px #7a4606, 0 0 2.8rem .2rem rgba(255, 233, 160, 1); } 100% { transform: none; } }
.tile.pick { cursor: pointer; border-color: var(--green); animation: pickpulse 1.1s ease-in-out infinite; }
.tile.pick:hover { transform: translateY(-.3rem) scale(1.06); }
@keyframes pickpulse { 50% { box-shadow: 0 0 0 .3rem rgba(47, 209, 139, .35), 0 0 1.6rem rgba(47, 209, 139, .7); } }

/* main row: wheel + panel */
.w-main { min-height: 0; display: grid; grid-template-columns: 1.2fr .95fr; gap: 1rem; align-items: stretch; }
.w-spec { display: none; }
.w-wheel-col { position: relative; min-height: 0; container-type: size; display: grid; place-items: center; }

/* ---- 3D wheel ---- */
.wheel3d { --W: min(100cqw, calc(100cqh * 1.28)); position: relative; width: var(--W); height: calc(var(--W) * .78); perspective: calc(var(--W) * 2.4); perspective-origin: 50% -10%; touch-action: none; user-select: none; -webkit-user-select: none; }
.w3-floor { position: absolute; left: 6%; right: 6%; top: 52%; height: 40%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 210, 120, .28), rgba(0, 0, 0, .55) 55%, transparent 72%); filter: blur(6px); }
.w3-tilt { position: absolute; left: 6%; width: 88%; aspect-ratio: 1; top: calc(var(--W) * -.17); transform: rotateX(57deg); transform-style: preserve-3d; }
.w3-rim, .w3-rim i { position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d; }
.w3-rim i { background: radial-gradient(circle, transparent 60%, #6e4208 61%, #c98a12 75%, #ffd76a 88%, #7a4606 100%); }
.w3-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; transform: translateZ(0); will-change: transform; }
.w3-face.fast { filter: blur(1.4px); }
.w3-gloss { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(1px); pointer-events: none;
  background: radial-gradient(ellipse 60% 30% at 50% 80%, rgba(255, 255, 255, .32), transparent 70%), conic-gradient(from 200deg, transparent 0 20%, rgba(255, 255, 255, .12) 26%, transparent 32% 70%, rgba(255, 255, 255, .08) 76%, transparent 82%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, .3) 100%); }
.w3-bulbs { position: absolute; inset: 0; transform: translateZ(2px); pointer-events: none; }
.w3-bulbs i { position: absolute; width: 2.8%; height: 2.8%; margin: -1.4%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fff3c4 40%, #ffc94a); box-shadow: 0 0 6px #ffd76a, 0 0 18px rgba(255, 190, 70, .95); animation: bulb3 1.2s ease-in-out infinite; }
@keyframes bulb3 { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .35; filter: saturate(.6); } }
.wheel3d.spinning .w3-bulbs i { animation-duration: .25s; }
.w3-hub { position: absolute; left: 39%; top: 39%; width: 22%; height: 22%; border-radius: 50%; transform: translateZ(5px); background: radial-gradient(circle at 40% 35%, #fff6cf, #f7c948 40%, #b77a0d 75%, #6e4208);
  box-shadow: 0 0 0 4px #6e4208, 0 6px 14px rgba(0, 0, 0, .6); display: grid; place-items: center; }
.w3-hub-in { width: 78%; height: 78%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #5b3db0, #2a1856); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
.w3-hub-in svg { width: 100%; height: 100%; stroke: none; }
.w3-pointer { position: absolute; left: 50%; top: 69%; width: 9%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.w3-pointer svg { width: 100%; height: auto; stroke: none; display: block; transform-origin: 50% 82%; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.wheel3d.spinning .w3-pointer svg { transition: none; }
.wheel3d.ready { cursor: grab; }
.wheel3d.ready .w3-floor { background: radial-gradient(ellipse at 50% 50%, rgba(255, 220, 130, .5), rgba(0, 0, 0, .5) 55%, transparent 72%); animation: glowp 1.6s ease-in-out infinite; }
@keyframes glowp { 50% { opacity: .65; } }

/* panel */
.w-panel { padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; min-height: 0; overflow-y: auto; }
.w-status { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 2.2rem; line-height: 1.3; }
.w-status b, .offer { color: var(--gold); }
.sec-chip { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 .9rem; border-radius: 999px; font-family: var(--font-d); font-weight: 800; font-size: 1rem; background: linear-gradient(180deg, #5741c4, #33268f); border: 2px solid var(--gold); color: #fff; }
.sec-chip.s-bank { background: #0a0a12; color: var(--rose); border-color: var(--red); }
.sec-chip.s-zero { background: #6b5a50; }
.sec-chip.s-x2 { background: linear-gradient(180deg, #fff3b9, #e8a51f); color: #3b2300; }
.sec-chip.s-plus { background: linear-gradient(180deg, #4ade80, #15803d); }
.sec-chip.s-prize { background: linear-gradient(180deg, #ff5a6e, #a10f26); color: #ffe08a; }
.w-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.w-actions:empty { display: none; }
.w-actions .btn { flex: 1 1 auto; }
.w-word-form { display: flex; gap: .6rem; width: 100%; flex-wrap: wrap; }
.w-word-form .input { flex: 1 1 12rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-d); }
.w-keys { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: minmax(2.9rem, 3.8rem); align-content: end; gap: .4rem; margin-top: auto; flex: 1 1 auto; min-height: 0; }
.w-keys .key, .w-keys .kword { height: 100%; }
.key { height: 2.9rem; min-width: 0; border-radius: .7rem; font-family: var(--font-d); font-weight: 800; font-size: clamp(1.15rem, 1.3vw, 1.4rem); color: #3a1a10;
  background: linear-gradient(180deg, #fffdf6, #ece2c8); box-shadow: 0 .22rem 0 #a99a72, inset 0 1px 0 #fff; transition: transform .15s, opacity .2s; }
.key small { font-size: .55em; opacity: .5; margin-left: 1px; vertical-align: super; }
.key:disabled { cursor: default; }
.w-keys:not(.on) .key:not(.hit):not(.miss):not(.picked) { opacity: .45; }
.w-keys.on .key:not(:disabled) { box-shadow: 0 .22rem 0 #a99a72, 0 0 0 2px var(--gold), 0 0 1rem rgba(247, 201, 72, .35); }
.w-keys.on .key:not(:disabled):hover { transform: translateY(-2px); }
.w-keys.on .key:not(:disabled):active { transform: translateY(.18rem); box-shadow: 0 .04rem 0 #a99a72; }
.kword { grid-column: span 2; border: 2px solid var(--gold); border-radius: .8rem; background: linear-gradient(180deg, #5a3ab8, #34207a); color: #fff; font: 800 .95rem/1.1 var(--font-d); letter-spacing: .01em; box-shadow: 0 .22rem 0 #1b0e42, 0 0 1rem rgba(247, 201, 72, .25); cursor: pointer; transition: transform .12s, box-shadow .12s; padding: .2rem .3rem; height: 2.9rem; min-width: 0; }
.kword:hover { transform: translateY(-2px); }
.kword:active { transform: translateY(.18rem); box-shadow: 0 .04rem 0 #1b0e42; }
.key.hit { background: linear-gradient(180deg, #5ef0a8, #1fae6c); color: #063b22; box-shadow: 0 .22rem 0 #0f6b40; }
.key.miss { background: rgba(229, 57, 77, .14); color: #ff8a9a; box-shadow: inset 0 0 0 2px rgba(255, 138, 154, .45); text-decoration: line-through; opacity: .85; }
.key.picked { background: linear-gradient(180deg, #9fdcc9, #2f8f7a); color: #fff; box-shadow: 0 .22rem 0 #1d5a4c; }

/* spectator */
.w-spec { flex-direction: column; justify-content: center; gap: 1.1rem; padding: 1.2rem; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--line); }
.w-spec-top { display: flex; align-items: center; gap: 1rem; }
.w-spec-txt { min-width: 0; }
.w-spec-name { font-family: var(--font-d); font-size: 1.3rem; font-weight: 800; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-spec-st { font-size: 1.1rem; color: var(--cream); line-height: 1.35; font-weight: 700; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.w-reel { position: relative; height: 4.8rem; border-radius: var(--r-lg); overflow: hidden; background: #0d0822; border: 2px solid var(--gold);
  box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, .8); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.w-reel-strip { position: absolute; left: 0; top: .55rem; display: flex; will-change: transform; }
.rc { flex: 0 0 82px; height: 3.5rem; margin: 0 2px; border-radius: .8rem; display: grid; place-items: center; font-family: var(--font-d); font-weight: 800; font-size: 1.15rem; color: #fff; background: linear-gradient(180deg, #5741c4, #33268f); }
.rc:nth-child(4n+2) { background: linear-gradient(180deg, #ff5a6e, #b2203a); }
.rc:nth-child(4n+3) { background: linear-gradient(180deg, #3aa68a, #1f6b55); }
.rc:nth-child(4n) { background: linear-gradient(180deg, #ffb03b, #c76f0b); }
.rc.rc-bank { background: #050507 !important; color: var(--rose); font-size: .8rem; }
.rc.rc-zero { background: #6b5a50 !important; }
.rc.rc-x2 { background: linear-gradient(180deg, #fff3b9, #e8a51f) !important; color: #3b2300; }
.rc.rc-plus { background: linear-gradient(180deg, #4ade80, #15803d) !important; font-size: 1.6rem; }
.rc.rc-prize { background: linear-gradient(180deg, #ff4d4d, #a10f1f) !important; color: #ffe08a; font-size: .9rem; }
.w-reel-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 88px; transform: translateX(-50%); border-radius: .9rem; border: 3px solid var(--gold); box-shadow: 0 0 1.4rem rgba(247, 201, 72, .7), inset 0 0 1rem rgba(247, 201, 72, .3); pointer-events: none; }
.w-spec.spinning .w-reel-mark { animation: markp .25s ease-in-out infinite alternate; }
@keyframes markp { to { box-shadow: 0 0 2.2rem rgba(247, 201, 72, 1), inset 0 0 1.4rem rgba(247, 201, 72, .45); } }

/* wheel overlays */
.w-ov { border-radius: var(--r-xl); }
.wboxes { display: flex; gap: 1.6rem; margin-top: .4rem; }
.wbox { position: relative; width: 9rem; height: 8rem; transition: transform .4s var(--spring); animation: pop .6s var(--spring) backwards; }
.wbox:nth-child(2) { animation-delay: .1s; }
.wbox:not(:disabled):hover { transform: translateY(-.5rem) rotate(-2deg) scale(1.04); }
.wbox:disabled { cursor: default; }
.wbox-body { position: absolute; inset: 2.2rem 0 0; border-radius: .4rem .4rem 1rem 1rem; background: linear-gradient(180deg, #8b1d2c, #4a0d17); border: 2px solid var(--gold); box-shadow: inset 0 0 0 .3rem rgba(247, 201, 72, .25), 0 1.2rem 2.4rem -.6rem rgba(0, 0, 0, .8); }
.wbox-lid { position: absolute; left: -.4rem; right: -.4rem; top: .6rem; height: 2rem; border-radius: .7rem; z-index: 2; background: linear-gradient(180deg, #b0283b, #6e1422); border: 2px solid var(--gold); transform-origin: 10% 100%; transition: transform .7s var(--spring); }
.wbox-lid::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.1rem; height: .9rem; transform: translateX(-50%); background: var(--gold); border-radius: 0 0 .4rem .4rem; }
.wbox-in { position: absolute; inset: 2.8rem .5rem .5rem; z-index: 1; display: grid; place-items: center; font-family: var(--font-d); font-weight: 900; font-size: 1.3rem; color: #fff; opacity: 0; transition: opacity .4s .3s; }
.wbox.won .wbox-lid, .wbox.empty .wbox-lid { transform: rotate(-38deg) translateY(-.6rem); }
.wbox.won .wbox-in { opacity: 1; color: var(--gold-hi); text-shadow: 0 0 1.2rem rgba(255, 224, 138, .9); }
.wbox.empty .wbox-in { opacity: 1; color: var(--dim); font-size: 1rem; font-weight: 700; }
.wbox.chosen { transform: translateY(-.4rem) scale(1.06); }
/* lacquered boxes with gold corners, softly bobbing and glowing until one is chosen */
.wbox-body { background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(180deg, #a3243a, #5a0f1c 70%, #3a0812);
  box-shadow: inset 0 0 0 .3rem rgba(247, 201, 72, .3), inset 0 -1rem 1.4rem rgba(0, 0, 0, .35), 0 1.4rem 2.4rem -.6rem rgba(0, 0, 0, .85), 0 0 2rem -.4rem rgba(247, 201, 72, .5); }
.wbox-body::before, .wbox-body::after { content: ""; position: absolute; bottom: .4rem; width: 1rem; height: 1rem; border: 3px solid var(--gold); }
.wbox-body::before { left: .4rem; border-right: 0; border-top: 0; border-radius: 0 0 0 .3rem; }
.wbox-body::after { right: .4rem; border-left: 0; border-top: 0; border-radius: 0 0 .3rem 0; }
.wbox-lid { background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .3), transparent 70%), linear-gradient(180deg, #c8304a, #7a1626); }
.wbox:not(:disabled) { animation: pop .6s var(--spring) backwards, boxbob 2.4s ease-in-out .6s infinite; }
.wbox:nth-child(2):not(:disabled) { animation-delay: .1s, 1.8s; }
@keyframes boxbob { 50% { transform: translateY(-.35rem) rotate(1.5deg); } }

/* =========================================================
   FINAL / LAYERS / MODALS
   ========================================================= */
.layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1.2rem; }
#final { background: radial-gradient(ellipse at 50% 0%, rgba(130, 90, 235, .45), transparent 60%), rgba(12, 8, 30, .86); backdrop-filter: blur(16px); animation: fadein .7s var(--ease); }
@keyframes fadein { from { opacity: 0; } }
.final-inner { display: grid; justify-items: center; gap: .7rem; max-width: 46rem; width: 100%; }
.final-dog { width: 8.5rem; aspect-ratio: 220 / 260; animation: rise .8s var(--ease) both; }
.final-title { font-family: var(--font-d); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; text-align: center; margin-bottom: 1.2rem; animation: rise .9s var(--ease) both; }
.final-title .accent { font-size: 1.15em; }
.podium { display: flex; align-items: flex-end; gap: .9rem; }
.pd { display: grid; justify-items: center; gap: .55rem; animation: rise 1s var(--ease) both; }
.pd .ava { --s: 4.4rem; } .pd.p1 .ava { --s: 5.6rem; }
.pd-name { font-weight: 800; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-score { font-family: var(--font-d); color: var(--gold); font-size: .95rem; margin-top: -.35rem; }
.pd-block { width: 9rem; border-radius: 1rem 1rem .3rem .3rem; display: grid; place-items: start center; padding-top: .9rem; font-family: var(--font-d); font-weight: 900; font-size: 2.2rem; color: #3b2300;
  background: linear-gradient(180deg, #fff3b9, #e8a51f); border: 2px solid #ffe9a2; transform-origin: bottom; animation: grow 1s var(--ease) both; box-shadow: 0 0 2rem rgba(247, 201, 72, .4); }
.pd.p1 .pd-block { height: 11rem; } .pd.p2 .pd-block { height: 8rem; background: linear-gradient(180deg, #f5f0ff, #d8b99a); border-color: #fff; color: #3d2378; } .pd.p3 .pd-block { height: 5.6rem; background: linear-gradient(180deg, #ffd2a8, #c8742d); border-color: #ffe0c2; }
.pd.p1, .pd.p1 .pd-block { animation-delay: .45s; } .pd.p2, .pd.p2 .pd-block { animation-delay: .2s; }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } }
.pd.p1 .ava { animation: floaty 3s ease-in-out infinite; }
.final-rest { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0 .4rem; }
.final-rest > div { display: flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border-radius: 99px; background: rgba(255, 255, 255, .08); font-weight: 700; }
.final-rest b { color: var(--dim); }
.final-actions { margin-top: .8rem; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(10, 6, 26, .72); backdrop-filter: blur(8px); animation: fadein .3s; }
.modal-card { width: min(34rem, 100%); max-height: 100%; overflow-y: auto; border-radius: var(--r-xl); background: linear-gradient(180deg, #33205f, #170d30); border: 2px solid var(--line); padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .8); animation: pop .4s var(--spring); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-head h3, .confirm h3 { font-family: var(--font-d); color: var(--gold); font-size: 1.3rem; }
.confirm p { color: var(--muted); font-weight: 600; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); }
.pref-l b { display: block; font-size: 1.05rem; }
.pref-l span { color: var(--dim); font-size: .88rem; font-weight: 600; }
.pref input[type=range] { width: 9rem; accent-color: var(--gold); height: 2rem; }
.help { width: min(40rem, 100%); }
.help-tabs { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: rgba(16, 10, 36, .5); }
.help-tabs button { padding: .45rem 1rem; border-radius: 999px; font-weight: 800; color: var(--muted); font-size: .92rem; }
.help-tabs button.sel { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; }
.help-slides { position: relative; min-height: 20rem; }
.hs { display: none; flex-direction: column; align-items: center; text-align: center; gap: .9rem; animation: rise .45s var(--ease); }
.hs.on { display: flex; }
.hs-art { width: 100%; height: 11rem; border-radius: var(--r-lg); background: radial-gradient(ellipse at 50% 30%, #4a2f9a, #140c30); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.hs h4 { font-family: var(--font-d); font-size: 1.25rem; color: var(--gold); }
.hs p { font-size: 1.08rem; color: var(--cream); font-weight: 600; line-height: 1.5; max-width: 30rem; }
.help-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.help-foot .dots { display: flex; gap: .4rem; }
.help-foot .dots::after { content: none; }
.help-foot .dots i { width: .6rem; height: .6rem; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.help-foot .dots i.on { background: var(--gold); width: 1.4rem; border-radius: 99px; }
.hs-mini-board { display: flex; gap: .3rem; }
.hs-mini-board i { width: 2.2rem; height: 2.7rem; border-radius: .4rem; background: linear-gradient(180deg, #5741c4, #1f1760); border: 2px solid rgba(247, 201, 72, .6); display: grid; place-items: center; font-style: normal; font-family: var(--font-d); font-weight: 900; color: #2a1856; }
.hs-mini-board i.o { background: linear-gradient(180deg, #fff, #efe6cf); }
.hs-mini-wheel { width: 9rem; height: 9rem; border-radius: 50%; background: conic-gradient(#5741c4 0 8.33%, #e5394d 0 16.66%, #3aa68a 0 25%, #ffb03b 0 33.33%, #050507 0 41.66%, #5741c4 0 50%, #f7c948 0 58.33%, #e5394d 0 66.66%, #3aa68a 0 75%, #4ade80 0 83.33%, #7d6b5f 0 91.66%, #ffb03b 0); border: 5px solid var(--gold); box-shadow: 0 0 2rem rgba(247, 201, 72, .4); animation: spin 6s linear infinite; position: relative; }
.hs-mini-wheel::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6cf, #e8a51f); }
.hs-keys { display: grid; grid-template-columns: repeat(6, 2.4rem); gap: .3rem; }
.hs-keys .key { min-height: 0; height: 2.4rem; font-size: 1rem; }
.hs-chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: .6rem; }
.hs-dog { position: absolute; right: .4rem; bottom: -1.2rem; width: 5.4rem; aspect-ratio: 220 / 260; }

/* reconnect */
#reconnect { z-index: 45; background: rgba(12, 8, 30, .78); backdrop-filter: blur(8px); animation: fadein .4s; }
.rc-card { width: min(26rem, 100%); padding: 1.6rem; display: grid; justify-items: center; gap: .8rem; text-align: center; }
.rc-dog { width: 7rem; aspect-ratio: 220 / 260; }
.rc-card h3 { font-family: var(--font-d); color: var(--gold); font-size: 1.3rem; }
.rc-card p { color: var(--cream); font-weight: 600; }
.rc-bar { width: 100%; height: .5rem; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.rc-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e8a51f, #fff3b9); animation: load 1.3s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* toasts & confetti */
#toasts { position: fixed; top: calc(5rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: .5rem; justify-items: center; pointer-events: none; width: min(30rem, calc(100% - 2rem)); }
.toast { padding: .8rem 1.3rem; border-radius: 999px; background: var(--cream); color: #3a1a10; font-weight: 800; box-shadow: 0 1rem 2.4rem -.6rem rgba(0, 0, 0, .7); animation: toastin .5s var(--spring); transition: opacity .4s, transform .4s var(--ease); text-align: center; }
.toast.err { background: #ffdfe3; color: #8a1023; }
.toast.ok { background: #d8ffe9; color: #0b5a34; }
.toast.out { opacity: 0; transform: translateY(-.6rem) scale(.96); }
@keyframes toastin { from { opacity: 0; transform: translateY(-1rem) scale(.9); } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- dog animations ---------- */
.dog { aspect-ratio: 220 / 260; }
.dog svg { overflow: visible; }
.dog .d-mouth > * { display: none; }
.dog[data-m="smile"] .m-smile, .dog[data-m="open"] .m-open, .dog[data-m="happy"] .m-happy, .dog[data-m="sad"] .m-sad, .dog[data-m="wow"] .m-wow { display: inline; }
.dog .d-spark { display: none; }
.dog[data-mood="happy"] .d-spark { display: inline; animation: twinkle .8s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .3; } }
/* the tail wags from its root behind the back; sad — it hangs down */
.dog .d-tail { transform-origin: 54px 258px; animation: wag 1.3s ease-in-out infinite; }
.dog[data-mood="happy"] .d-tail { animation-duration: .32s; }
.dog[data-mood="sad"] .d-tail { animation: none; transform: rotate(-20deg); }
@keyframes wag { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
/* calm host: the head only breathes; joy is a soft bounce, not shaking */
.dog .d-head { transform-origin: 110px 176px; animation: bob 5.5s ease-in-out infinite; }
.dog[data-mood="happy"] .d-head { animation: hop 1.1s ease-in-out infinite; }
.dog[data-mood="sad"] .d-head { animation: none; transform: rotate(-3deg) translateY(3px); }
.dog[data-mood="wow"] .d-head { animation: none; transform: translateY(-3px) scale(1.02); }
@keyframes bob { 50% { transform: rotate(1deg) translateY(-1px); } }
@keyframes hop { 50% { transform: translateY(-2.5px); } }
.dog .d-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.dog .d-ear-l { transform-origin: 70px 84px; } .dog .d-ear-r { transform-origin: 150px 84px; }
.dog[data-mood="happy"] .d-ear-l { animation: earl .5s ease-in-out infinite; } .dog[data-mood="happy"] .d-ear-r { animation: earr .5s ease-in-out infinite; }
.dog[data-mood="sad"] .d-ear-l { transform: rotate(12deg); } .dog[data-mood="sad"] .d-ear-r { transform: rotate(-12deg); }
.dog[data-mood="wow"] .d-ear-l { transform: rotate(-14deg); } .dog[data-mood="wow"] .d-ear-r { transform: rotate(14deg); }
@keyframes earl { 50% { transform: rotate(-10deg); } } @keyframes earr { 50% { transform: rotate(10deg); } }
.dog .d-brows { transition: transform .3s; transform-box: fill-box; transform-origin: center; }
.dog[data-mood="wow"] .d-brows { transform: translateY(-5px); }
.dog[data-mood="sad"] .d-brow-l { transform: rotate(-12deg) translateY(2px); transform-box: fill-box; transform-origin: center; }
.dog[data-mood="sad"] .d-brow-r { transform: rotate(12deg) translateY(2px); transform-box: fill-box; transform-origin: center; }
.dog .d-arm { transform-origin: 150px 206px; }
.dog[data-mood="happy"] .d-arm { animation: armup .5s ease-in-out infinite; }
@keyframes armup { 50% { transform: rotate(-4deg); } }

/* talking: head nods with the words, the hand with the microphone gestures */
.dog.talking[data-mood="talk"] .d-head, .dog.talking[data-mood="wow"] .d-head { animation: talknod .7s ease-in-out infinite alternate; }
.dog.talking:not([data-mood="happy"]) .d-arm { animation: gesture 1.1s ease-in-out infinite; }
@keyframes talknod { from { transform: rotate(-.4deg); } to { transform: rotate(.6deg) translateY(1px); } }
@keyframes gesture { 50% { transform: rotate(-8deg); } }
/* little idle actions and reactions (data-act is set from DogLife) */
.dog .d-eye, .dog .d-brows, .dog .d-head, .dog .d-hat, .dog .d-ear-l, .dog .d-ear-r, .dog .d-arm { transition: translate .3s var(--ease), rotate .35s var(--ease), scale .15s; }
.dog[data-act="look-l"] .d-eye { translate: -3.5px 1px; }
.dog[data-act="look-r"] .d-eye { translate: 3.5px 1px; }
.dog[data-act="look-up"] .d-eye, .dog[data-act="look-up"] .d-brows { translate: 0 -3px; }
.dog[data-act="tilt"] .d-head { rotate: -3deg; }
.dog[data-act="nod"] .d-head { translate: 0 2px; }
.dog[data-act="wink"] .d-eye + .d-eye { scale: 1 .12; }
.dog[data-act="hat"] .d-hat { translate: 0 -9px; }
.dog[data-act="ear"] .d-ear-r { rotate: -18deg; }
.dog[data-act="shock"] { animation: shock .55s var(--spring); }
.dog[data-act="shock"] .d-ear-l { rotate: -24deg; } .dog[data-act="shock"] .d-ear-r { rotate: 24deg; }
.dog[data-act="shock"] .d-hat { translate: 0 -16px; }
.dog[data-act="shock"] .d-eye { scale: 1.2; }
.dog[data-act="cheer"] .d-arm { rotate: -16deg; }
.dog[data-act="cheer"] .d-head { translate: 0 -4px; }
.dog[data-act="droop"] .d-head { rotate: 2.5deg; translate: 0 2px; }
.dog[data-act="droop"] .d-ear-l { rotate: 12deg; } .dog[data-act="droop"] .d-ear-r { rotate: -12deg; }
.dog[data-act="dance"] { animation: dance .8s ease-in-out infinite; }
@keyframes shock { 30% { transform: translateY(-4%) scale(1.03); } }
@keyframes dance { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-2%); } }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1180px) and (min-width: 821px) {
  .game { grid-template-columns: 13.5rem 1fr 16rem; gap: .8rem; }
  .home { gap: 1.8rem; }
  .w-main { grid-template-columns: 1fr 1fr; }
  .w-keys { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* =========================================================
   PHONE — portrait (one locked screen)
   ========================================================= */
@media (max-width: 820px) {
  html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  #app { position: fixed; left: 0; right: 0; top: 0; height: var(--app-h, 100dvh); transform: translateY(var(--app-top, 0px)); }
  .screen { padding: .25rem .75rem calc(.75rem + env(safe-area-inset-bottom)); overflow: hidden !important; }
  .topbar { height: calc(3.6rem + env(safe-area-inset-top)); padding: env(safe-area-inset-top) .75rem 0; }
  .brand-badge { width: 2.3rem; height: 2.3rem; }
  .brand-name { font-size: 1.1rem; }
  .top-actions { gap: .4rem; }
  .ib { width: 2.45rem; height: 2.45rem; }
  .ib svg { width: 1.15rem; height: 1.15rem; }
  .room-chip { height: 2.45rem; padding: 0 .7rem; font-size: .82rem; }
  body[data-screen="game"] .brand-name { display: none; }
  .card { border-radius: var(--r-lg); }
  .btn.xl { height: 3.6rem; font-size: 1.1rem; }

  /* home */
  #screen-home { justify-content: flex-start; }
  .home { grid-template-columns: 1fr; gap: .8rem; }
  .home-hero { gap: .5rem; }
  .marquee { padding: .8rem 1.4rem .7rem; border-radius: 1.3rem; border-width: 2px; }
  .marquee .bulb { width: .5rem; height: .5rem; margin: -.25rem; }
  .logo { font-size: 2.1rem; }
  .logo-sub { font-size: .95rem; margin-top: .25rem; }
  .greet, .home-modes { display: none; }
  .profile { padding: 1rem; gap: .8rem; }
  .ava.xl { --s: 4.6rem; }
  .ava-pick { display: flex; overflow-x: auto; gap: .5rem; margin: 0 -1rem; padding: .25rem 1rem .4rem; scrollbar-width: none; overscroll-behavior: contain; }
  .ava-pick::-webkit-scrollbar { display: none; }
  .ava-opt { flex: 0 0 3.5rem; height: 3.5rem; }
  .join-row .input, .join-row .btn { height: 3.4rem; }
  body.kb-open .home-hero { display: none; }

  /* lobby */
  #screen-lobby { justify-content: flex-start; padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .lobby { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .studio { flex: 1; min-height: 0; padding: 1rem; }
  .ticket { flex-direction: column; align-items: stretch; gap: .7rem; padding: .8rem; }
  .ticket-l { display: flex; justify-content: space-between; align-items: center; }
  .t-code { font-size: 2.1rem; }
  .invite-row .btn:first-child { flex: 1; }
  .seats-head { margin: .9rem 0 .5rem; }
  .seats { grid-template-columns: repeat(4, 1fr); gap: .45rem; overflow: hidden; }
  .seat { padding: .6rem .2rem .5rem; gap: .3rem; border-radius: var(--r-md); }
  .seat .ava { --s: 2.9rem; }
  .seat-name { font-size: .8rem; }
  .seat-tag { font-size: .58rem; padding: .05rem .35rem; top: .2rem; }
  .seat-kick { top: 0; right: 0; }
  .seat.add .plus { width: 2.9rem; height: 2.9rem; font-size: 1.5rem; }
  .seat.add small { font-size: .7rem; }
  .set-btn { display: flex; align-items: center; gap: .8rem; width: 100%; margin-top: .8rem; padding: .7rem .9rem; border-radius: var(--r-lg); text-align: left; background: rgba(16, 10, 36, .45); border: 1px solid var(--line); flex-shrink: 0; }
  .set-ic { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#e5394d 0 25%, #f7c948 0 50%, #6b45c9 0 75%, #3aa68a 0); border: 3px solid var(--gold); }
  .set-txt { flex: 1; min-width: 0; display: grid; }
  .set-txt b { font-size: 1rem; color: var(--gold); }
  .set-txt span { font-size: .86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chev { color: var(--gold); }
  .demo-note { display: none !important; }
  .settings { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; border-radius: 1.6rem 1.6rem 0 0; padding: 1.2rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #33205f, #170d30); transform: translateY(105%); transition: transform .45s var(--ease); backdrop-filter: none; }
  body.settings-open .settings { transform: none; }
  .settings-title { position: sticky; top: -1.2rem; z-index: 2; margin: -1.2rem -1.1rem 0; padding: 1.1rem 1.1rem .8rem; background: #33205f; }
  .sheet-close { display: inline-flex; }
  .backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .35s; }
  body.settings-open .backdrop { opacity: 1; pointer-events: auto; }
  .startbar { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); margin: 0; z-index: 30; }
  .startbar .btn, .startbar .wait-note { width: 100%; min-width: 0; }
  .startbar .wait-note { height: 3.6rem; font-size: .92rem; padding: 0 1rem; background: rgba(22, 14, 48, .92); }
  body:not([data-screen="lobby"]) .startbar { display: none; }

  /* game common */
  #screen-game { padding: 0 .6rem calc(.5rem + env(safe-area-inset-bottom)); }
  .game { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
  .g-players { padding: .35rem; border-radius: var(--r-md); flex-shrink: 0; }
  .g-round { display: none; }
  .g-plist { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; }
  .g-plist::-webkit-scrollbar { display: none; }
  .gp { flex: 0 0 auto; padding: .25rem .6rem .25rem .25rem; gap: .45rem; border-radius: 999px; }
  .gp .ava { --s: 2.1rem; }
  .gp-name { font-size: .8rem; max-width: 5.2rem; }
  .gp.me .gp-name::after { content: ""; }
  .gp-score { font-size: .75rem; }
  .gp-score small, .gp-tag { display: none; }
  .gain { top: -.6rem; right: 0; font-size: .85rem; }
  .g-center { flex: 1; min-height: 0; gap: .5rem; }
  .g-head { min-height: 3.4rem; padding: .4rem .4rem .4rem .8rem; gap: .5rem; border-radius: var(--r-md); }
  .g-label { font-size: .62rem; max-width: 4.6rem; }
  .g-word .lt { width: 1.1rem; height: 1.8rem; font-size: 1rem; border-bottom-width: 2px; }
  .g-word .lt.sp { width: .5rem; }
  .g-word .full { font-size: 1.6rem; }
  .timer { width: 2.7rem; height: 2.7rem; }
  .timer span { font-size: .9rem; }

  /* draw */
  body:not(.mode-wheel) .g-center { flex: none; }
  .stage { flex: none; container-type: normal; display: block; }
  .board-wrap { width: 100%; border-radius: var(--r-md); box-shadow: 0 0 0 3px var(--gold), 0 1rem 2rem -1rem rgba(0, 0, 0, .9); }
  .toolbar { padding: .4rem; gap: .3rem; border-radius: var(--r-md); }
  .toolbar .colors { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding: .35rem; scrollbar-width: none; }
  .toolbar .colors::-webkit-scrollbar { display: none; }
  .toolbar .sz:first-child { display: none; }
  .sz, .tool { width: 2.3rem; height: 2.3rem; }
  .g-chat { flex: 1; min-height: 6.5rem; padding: .5rem; border-radius: var(--r-md); }
  .chat-head { display: none; }
  .chat-form .input { height: 3.1rem; font-size: 1.05rem; }
  .send { width: 3.1rem; height: 3.1rem; }
  body.kb-open .g-players, body.kb-open .toolbar { display: none; }
  body.kb-open:not(.mode-wheel) .board-wrap { width: min(100%, calc(var(--app-h, 600px) * .3 * 1.6)); margin: 0 auto; }

  /* full-screen sheets for overlays */
  .overlay { position: fixed !important; inset: 0 !important; z-index: 40; border-radius: 0 !important; padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); }
  .choices { flex-direction: column; width: 100%; }
  .choice { width: 100%; min-height: 4rem; font-size: 1.35rem; }
  .ov-dog { width: 6.5rem; }

  /* wheel: zones */
  body.mode-wheel .g-chat { display: none; }
  body.mode-wheel .g-head { grid-template-columns: 1fr auto; padding: .45rem .45rem .45rem .8rem; }
  body.mode-wheel .g-label { display: none; }
  body.mode-wheel .g-word { justify-content: flex-start; }
  .w-q { font-size: 1rem; text-align: left; }
  body.mode-wheel .w-area { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; }
  .w-host { min-height: 0; gap: .5rem; }
  .w-host-dog { width: 3rem; height: 3rem; border-width: 2px; }
  .w-bubble { padding: .4rem .8rem .5rem; border-radius: 1rem; }
  .w-host-name { display: none; }
  .w-host-text { font-size: 1rem; }
  .w-board-wrap { padding: .65rem .45rem; border-radius: var(--r-md); }
  .w-row { gap: .25rem; }
  .tile { --tw: min(3rem, calc((100cqw - (var(--n) - 1) * .25rem) / var(--n))); height: calc(var(--tw) * 1.14); }
  .w-main { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: .5rem; }
  .w-wheel-col { flex: 1; min-height: 7rem; }
  /* those waiting their turn always see the same drum (it spins for everyone); the strip is not needed */
  .w-main.spectate .w-panel { display: none !important; }
  .w-main.spectate .w-wheel-col { display: grid !important; flex: 1; min-height: 11rem; }
  .w-main.spectate .w-spec { display: flex; flex: none; min-height: 0; order: 2; }
  .w-main.spectate .w-reel { display: none; }
  .w-main.mine:not(.show-wheel) .w-wheel-col { display: none !important; }
  .w-main.mine .w-panel { flex: 1; }
  .w-main.mine.show-wheel .w-panel { flex: none; padding: .2rem 0 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .w-main.show-wheel .w-status { display: none; }
  .w-panel { padding: .8rem; gap: .65rem; overflow: hidden; }
  .w-panel > * { flex-shrink: 0; }
  .w-status { font-size: 1.12rem; min-height: 0; }
  .w-status:empty { display: none; }
  .w-actions { gap: .5rem; }
  .w-actions .btn { flex: 1 1 0; min-width: 0; height: 3.5rem; font-size: 1.05rem; padding: 0 .6rem; }
  .w-actions [data-prize="play"], .w-actions [data-prize="money"] { flex: 1 1 100%; }
  .w-actions [data-prize="box"], .w-actions [data-prize="more"] { flex: 1 1 40%; }
  .w-main.word-open .w-keys { display: none !important; }
  .kword { font-size: .88rem; height: auto; min-height: 1.9rem; max-height: 3.4rem; }
  .w-word-form { flex-direction: column; }
  .w-word-form .input, .w-word-form .btn { flex: none !important; width: 100%; height: 3.5rem; }
  .w-keys:not(.on) { display: none; }
  .w-keys { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; flex: 1 !important; min-height: 0; grid-auto-rows: minmax(1.9rem, 1fr); align-content: stretch; margin-top: 0; }
  .w-keys .key { aspect-ratio: auto; height: auto; min-height: 1.9rem; max-height: 3.4rem; font-size: 1.25rem; }
  .w-spec { padding: 1rem .9rem; gap: 1rem; border-radius: var(--r-lg); }
  .w-spec-top .ava { --s: 4.2rem; }
  .w-spec-name { font-size: 1.15rem; }
  .w-spec-st { font-size: 1.05rem; }
  .w-ov { position: fixed !important; }
  .wbox { width: 8rem; height: 7.4rem; }
  .gains:has(> div:nth-child(5)) { grid-template-columns: 1fr 1fr; max-width: 100%; gap: .3rem; }
  .gains:has(> div:nth-child(5)) > div { padding: .3rem .5rem; gap: .4rem; font-size: .9rem; }
  body.kb-open .w-host, body.kb-open .w-status, body.kb-open #w-word-cancel { display: none !important; }
  body.kb-open .g-head { min-height: 0; padding-block: .25rem; }
  body.kb-open .w-q { font-size: .9rem; }

  /* final & modals */
  .final-dog { width: 6rem; }
  .podium { gap: .4rem; }
  .pd-block { width: 6.2rem; font-size: 1.6rem; }
  .pd.p1 .pd-block { height: 8rem; } .pd.p2 .pd-block { height: 5.8rem; } .pd.p3 .pd-block { height: 4.2rem; }
  .pd .ava { --s: 3.4rem; } .pd.p1 .ava { --s: 4.4rem; }
  .pd-name { font-size: .85rem; max-width: 6.2rem; }
  .modal { padding: .6rem; align-items: end; }
  .modal-card { border-radius: 1.4rem; padding: 1.1rem; }
  .help-slides { min-height: 19rem; }
  .hs-art { height: 9.5rem; }
  .hs p { font-size: 1rem; }
  .help-foot .btn { padding: 0 1rem; }
}
@media (max-width: 820px) and (max-height: 690px) {
  .logo { font-size: 1.7rem; } .logo-sub { display: none; }
  .ava.xl { --s: 3.8rem; }
  .profile { gap: .6rem; }
  .w-host-text { font-size: .92rem; }
  .w-q { font-size: .92rem; }
  .gp .ava { --s: 1.8rem; }
  .seats { grid-template-columns: repeat(5, 1fr); }
  .seat .ava { --s: 2.4rem; }
  .seat-tag { display: none; }
  .board-wrap { width: min(100%, calc(32vh * 1.6)); margin: 0 auto; }
  .w-actions .btn { height: 3.2rem; font-size: .98rem; }
}

/* =========================================================
   PHONE — landscape
   ========================================================= */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  #app { position: fixed; left: 0; right: 0; top: 0; height: var(--app-h, 100dvh); }
  html { font-size: 14px; } html.big { font-size: 16px; }
  .topbar { height: 3rem; padding: 0 calc(.8rem + env(safe-area-inset-right)) 0 calc(.8rem + env(safe-area-inset-left)); }
  .brand-badge { width: 2rem; height: 2rem; } .brand-name { font-size: 1rem; }
  .ib { width: 2.2rem; height: 2.2rem; } .room-chip { height: 2.2rem; }
  .screen { padding: 0 calc(.8rem + env(safe-area-inset-right)) .5rem calc(.8rem + env(safe-area-inset-left)); overflow: hidden !important; }
  .card { border-radius: var(--r-lg); }
  /* home */
  #screen-home { justify-content: center; }
  .home { grid-template-columns: .8fr 1.2fr; gap: 1rem; }
  .greet, .home-modes { display: none; }
  .marquee { padding: .8rem 1.2rem; } .logo { font-size: 2rem; } .logo-sub { font-size: .9rem; }
  .profile { padding: .8rem 1rem; gap: .55rem; }
  .ava.xl { --s: 3.4rem; }
  .ava-pick { display: flex; overflow-x: auto; gap: .4rem; scrollbar-width: none; }
  .ava-opt { flex: 0 0 2.8rem; height: 2.8rem; }
  .btn.xl { height: 3rem; font-size: 1rem; }
  .join-row .input, .join-row .btn { height: 2.8rem; }
  .link-btn { display: none; }
  /* lobby */
  #screen-lobby { padding-bottom: .5rem; }
  .lobby { grid-template-columns: 1fr 15rem; gap: .7rem; flex: 1; min-height: 0; }
  .studio { min-height: 0; padding: .8rem; }
  .ticket { padding: .5rem .8rem; } .t-code { font-size: 1.6rem; }
  .seats-head { margin: .5rem 0 .4rem; }
  .seats { grid-template-columns: repeat(6, 1fr); gap: .35rem; overflow: hidden; }
  .seat { padding: .4rem .2rem; gap: .2rem; } .seat .ava { --s: 2.4rem; } .seat-name { font-size: .75rem; }
  .seat.add .plus { width: 2.4rem; height: 2.4rem; }
  .settings { position: fixed; inset: 0 0 0 auto; width: min(24rem, 70%); z-index: 60; border-radius: 1.4rem 0 0 1.4rem; transform: translateX(105%); transition: transform .45s var(--ease); overflow-y: auto; }
  body.settings-open .settings { transform: none; }
  .sheet-close { display: inline-flex; }
  .backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .35s; }
  body.settings-open .backdrop { opacity: 1; pointer-events: auto; }
  .set-btn { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--r-md); text-align: left; background: rgba(16, 10, 36, .45); border: 1px solid var(--line); }
  .set-ic { width: 2rem; height: 2rem; border-radius: 50%; background: conic-gradient(#e5394d 0 25%, #f7c948 0 50%, #6b45c9 0 75%, #3aa68a 0); border: 2px solid var(--gold); }
  .set-txt { flex: 1; display: grid; } .set-txt span { font-size: .8rem; color: var(--muted); }
  .demo-note { display: none !important; }
  .lobby { grid-template-columns: 1fr; }
  .startbar { position: fixed; right: calc(.8rem + env(safe-area-inset-right)); bottom: .6rem; width: 16rem; margin: 0; z-index: 30; }
  .startbar .btn, .startbar .wait-note { width: 100%; min-width: 0; height: 3rem; font-size: .9rem; }
  .studio { padding-bottom: 4rem; }
  body:not([data-screen="lobby"]) .startbar { display: none; }
  /* game */
  #screen-game { padding-top: 0; }
  .game { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .45rem; height: 100%; }
  .g-players { padding: .3rem; border-radius: var(--r-md); }
  .g-round { display: none; }
  .g-plist { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; }
  .gp { flex: 0 0 auto; padding: .2rem .55rem .2rem .2rem; border-radius: 999px; gap: .4rem; }
  .gp .ava { --s: 1.8rem; } .gp-name { font-size: .78rem; max-width: 5rem; } .gp-score { font-size: .72rem; } .gp-score small, .gp-tag { display: none; }
  .g-head { min-height: 2.8rem; padding: .3rem .4rem .3rem .8rem; border-radius: var(--r-md); }
  .g-label { font-size: .6rem; } .timer { width: 2.4rem; height: 2.4rem; }
  .w-q { font-size: .95rem; }
  /* draw landscape: board left, chat right */
  body:not(.mode-wheel) .game { grid-template-columns: 1fr 15rem; grid-template-rows: auto 1fr; }
  body:not(.mode-wheel) .g-players { grid-column: 1 / -1; }
  body:not(.mode-wheel) .g-chat { grid-column: 2; grid-row: 2; padding: .4rem; }
  .chat-head { display: none; }
  .toolbar { padding: .3rem; gap: .3rem; }
  .sw { width: 1.4rem; height: 1.4rem; } .sz, .tool { width: 2rem; height: 2rem; }
  .overlay { position: fixed !important; inset: 0 !important; z-index: 40; border-radius: 0 !important; }
  /* wheel landscape: wheel left, info right */
  body.mode-wheel .g-chat { display: none; }
  body.mode-wheel .g-label { display: none; }
  body.mode-wheel .g-head { grid-template-columns: 1fr auto; }
  body.mode-wheel .w-area { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "wheel host" "wheel board" "wheel panel"; gap: .45rem .7rem; }
  .w-main { display: contents; }
  .w-spec, .w-wheel-col { grid-area: wheel; }
  .w-host { grid-area: host; } .w-board-wrap { grid-area: board; } .w-panel { grid-area: panel; }
  .w-main.spectate .w-wheel-col { display: grid !important; }
  .w-main.spectate .w-spec { display: flex; grid-area: panel; }
  .w-main.spectate .w-reel { display: none; }
  .w-main.mine .w-spec { display: none; }
  .w-host-dog { width: 2.6rem; height: 2.6rem; } .w-host-name { display: none; } .w-bubble { padding: .35rem .7rem; } .w-host-text { font-size: .92rem; }
  .w-board-wrap { padding: .45rem; } .tile { --tw: min(2.5rem, calc((100cqw - (var(--n) - 1) * .25rem) / var(--n))); height: calc(var(--tw) * 1.1); }
  .w-panel { padding: .55rem; gap: .45rem; overflow: hidden; }
  .w-status { font-size: .98rem; min-height: 0; }
  .w-actions .btn { height: 2.8rem; font-size: .95rem; }
  .w-keys:not(.on) { display: none; }
  .w-keys { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .25rem; flex: 1; min-height: 0; grid-auto-rows: minmax(1.6rem, 1fr); }
  .kword { grid-column: span 3; min-height: 1.6rem; font-size: .8rem; }
  .w-keys .key { aspect-ratio: auto; min-height: 1.6rem; font-size: 1rem; }
  .w-word-form .input, .w-word-form .btn { height: 2.8rem; }
  .w-spec { padding: .7rem; gap: .6rem; } .w-spec-top .ava { --s: 3rem; } .w-reel { height: 4rem; } .rc { height: 2.9rem; }
  .w-ov { position: fixed !important; inset: 0 !important; z-index: 40; border-radius: 0; padding: .8rem 1.2rem; }
  .w-ov .ov { gap: .45rem; max-width: 48rem; }
  .w-ov .ov:has(.gains) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 1.8rem; align-items: center; }
  .w-ov .ov:has(.gains) > * { grid-column: 1; }
  .w-ov .ov:has(.gains) > .gains { grid-column: 2; grid-row: 1 / span 6; }
  .w-ov .ov-dog { width: 4.4rem; }
  .w-ov .ov-big { --ow: 40vw; font-size: clamp(1.1rem, calc(var(--ow) / var(--len, 8) / .92), 2.3rem); }
  .w-ov .ov-title { font-size: 1.25rem; }
  .w-ov .gains > div { padding: .3rem .7rem; }
  .w-ov .gains .ava { --s: 1.9rem; }
  .wbox { width: 7rem; height: 6.4rem; }
  #final .final-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem 2rem; max-width: 52rem; }
  #final .final-dog { grid-column: 1; grid-row: 1; width: 4.4rem; }
  #final .final-inner > .label { grid-column: 1; grid-row: 2; }
  #final .final-title { grid-column: 1; grid-row: 3; margin: 0; font-size: 1.55rem; }
  #final .final-actions { grid-column: 1; grid-row: 4; margin-top: .5rem; }
  #final .final-actions .btn { height: 3rem; }
  #final .podium { grid-column: 2; grid-row: 1 / 5; gap: .4rem; }
  #final .final-rest { grid-column: 2; grid-row: 5; margin: .2rem 0 0; font-size: .85rem; }
  #final .pd-block { width: 5.6rem; font-size: 1.4rem; padding-top: .5rem; }
  #final .pd.p1 .pd-block { height: 5.6rem; } #final .pd.p2 .pd-block { height: 4.2rem; } #final .pd.p3 .pd-block { height: 3.1rem; }
  #final .pd .ava { --s: 2.9rem; } #final .pd.p1 .ava { --s: 3.6rem; }
  #final .pd { gap: .35rem; } #final .pd-name { font-size: .8rem; max-width: 5.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.home > *, .lobby > *, .game > *, .g-center > *, .w-area > *, .w-main > * { min-width: 0; }

/* ---- phone refinements ---- */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  body:not([data-screen="home"]) .brand-name { display: none; }
}
@media (max-width: 370px) {
  .ib { width: 2.2rem; height: 2.2rem; } .top-actions { gap: .3rem; } .room-chip { padding: 0 .55rem; letter-spacing: .08em; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  #screen-home { justify-content: center; }
  .home { align-items: center; }
  .profile { gap: .45rem; padding: .7rem .9rem; }
  .prof-name .label, .or, .invite { display: none; }
  .ava.xl { --s: 2.9rem; }
  .ava-tabs button { padding: .3rem .8rem; }
  .ava-opt { flex: 0 0 2.6rem; height: 2.6rem; }
  .input { height: 2.7rem; font-size: 1rem; }
  .btn.xl { height: 2.8rem; }
  .join-row .input, .join-row .btn { height: 2.7rem; }
  /* lobby: right column for start */
  .lobby { padding-right: 16.5rem; }
  .studio { padding: .7rem .8rem; }
  .ticket { flex-direction: row; align-items: center; padding: .45rem .7rem; gap: .6rem; }
  .ticket-l { display: flex; align-items: center; gap: .6rem; }
  .t-code { font-size: 1.5rem; }
  .invite-row .btn { height: 2.5rem; font-size: .9rem; }
  .startbar { left: auto; right: calc(.8rem + env(safe-area-inset-right)); bottom: .6rem; top: 3.6rem; width: 15.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
  .startbar .btn, .startbar .wait-note { height: 3.2rem; }
  /* wheel: your letter turn uses the whole left side */
  .w-main.mine:not(.show-wheel) .w-wheel-col { display: none !important; }
  .w-main.mine:not(.show-wheel) .w-panel { grid-column: 1; grid-row: 1 / 4; }
  .w-main.mine.show-wheel .w-panel { grid-area: panel; background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; justify-content: flex-end; }
  .w-main.show-wheel .w-status { display: none; }
  .g-players { display: none; }
  body.mode-wheel .game, body:not(.mode-wheel) .game { grid-template-rows: 1fr; }
  body:not(.mode-wheel) .g-chat { grid-row: 1; }
}

/* ---- adaptive lobby seats on phones (sizes set by Client.fitSeats) ---- */
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .seats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: max-content; gap: 6px; overflow: hidden; align-content: start; }
  .seat { padding: .35rem .2rem; gap: .2rem; min-height: 0; min-width: 0; }
  .seat .ava { --s: var(--seat-s, 2.9rem); }
  .seat.add .plus { width: var(--seat-s, 2.9rem); height: var(--seat-s, 2.9rem); font-size: calc(var(--seat-s, 2.9rem) * .5); }
  .seat-name { font-size: .78rem; line-height: 1.2; }
  .seat-me { font-size: .66rem; margin-top: 0; line-height: 1.1; }
  .seat.add small { font-size: .66rem; line-height: 1.15; }
  .seats.tight .seat-name, .seats.tight .seat-me, .seats.tight .seat.add small, .seats.tight .seat-tag { display: none; }
  .seats.tight .seat { padding: .25rem; }
  .ov-big { --ow: 86vw; }
  .gains { grid-template-columns: minmax(0, 1fr); }
  .gains:has(> div:nth-child(5)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gains > div span { min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.15; }
  .gains:has(> div:nth-child(5)) .ava { --s: 1.9rem; grid-row: 1 / 3; }
  .gains:has(> div:nth-child(5)) > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; row-gap: 0; padding: .3rem .5rem; text-align: left; }
  .gains:has(> div:nth-child(5)) > div span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; hyphens: none; font-size: .85rem; }
  .gains:has(> div:nth-child(5)) > div b { font-size: .82rem; grid-column: 2; line-height: 1.1; }
  .ov:has(.gains > div:nth-child(7)) .ov-dog { display: none; }
  .ov-label { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .w-ov .ov-big { --ow: 40vw; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) and (max-width: 720px) {
  .lobby { padding-right: 12.6rem; }
  .startbar { width: 11.6rem; }
  .ticket .label { display: none; }
  .ticket { gap: .45rem; padding: .4rem .55rem; }
  .t-code { font-size: 1.3rem; }
  .invite-row { gap: .4rem; }
  .invite-row .btn { padding: 0 .75rem; font-size: .85rem; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .w-ov .ov:has(.gains > div:nth-child(5)) { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  body:not(.mode-wheel) .game { grid-template-columns: minmax(0, 1fr) 13rem; }
  .toolbar { flex-wrap: nowrap; justify-content: flex-start; gap: .5rem; }
  .tb-group.colors { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tb-group.colors::-webkit-scrollbar { display: none; }
  .tb-group.colors > * { flex-shrink: 0; }
  .tb-group.sizes, .tb-group:last-child { flex-shrink: 0; flex-wrap: nowrap; }
  .board-wrap { width: min(100%, calc((var(--app-h, 100dvh) - 11.4rem) * 1.6)); margin: 0 auto; }
  .cs { font-size: .76rem; padding: .3rem .4rem; }
}

/* =========================================================
   Подсказки, пропуск хода, голос, общий экран (ТВ) и пульты
   ========================================================= */
.home-links { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }

/* plain-words hint for the player whose turn it is */
.w-coach { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .85rem; border-radius: var(--r-md); background: rgba(247, 201, 72, .1); border: 1px dashed rgba(247, 201, 72, .5);
  color: var(--cream); font-size: .98rem; font-weight: 700; line-height: 1.35; animation: rise .45s var(--ease) both; }
.w-coach::before { content: "i"; flex-shrink: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3b2300; font: 900 .85rem/1 var(--font-d); margin-top: .05rem; }
.w-coach.wait { background: rgba(185, 167, 255, .08); border: 1px solid rgba(185, 167, 255, .3); color: var(--sky); }
.w-coach.wait::before { display: none; }
.ov .coach-line { color: var(--gold-hi); }
.btn.pulse { animation: coachp 1.6s ease-in-out infinite; }
.w-keys.pulse { border-radius: .9rem; animation: keysp 1.8s ease-in-out infinite; }
@keyframes coachp { 50% { box-shadow: 0 .3rem 0 #a4660a, 0 0 0 .4rem rgba(247, 201, 72, .28), 0 0 1.8rem rgba(247, 201, 72, .75); } }
@keyframes keysp { 50% { box-shadow: 0 0 0 .3rem rgba(247, 201, 72, .22), 0 0 1.6rem rgba(247, 201, 72, .35); } }
.w-main.nudge .w-panel, .w-main.nudge .w-wheel-col { animation: shake .45s 2; }
.w-spec-next { font-size: 1rem; font-weight: 800; color: var(--sky); text-align: center; }
.w-spec-next:empty { display: none; }

/* buttons with a second, smaller line */
.btn.two { flex-direction: column; gap: .05rem; height: auto; min-height: 3.2rem; padding-block: .45rem; line-height: 1.15; white-space: normal; text-align: center; }
.btn.two small { font-size: .74em; font-weight: 700; opacity: .78; }

/* owner's "skip the turn" next to the timer */
.g-side { display: flex; align-items: center; gap: .6rem; }
.w-skip svg { width: .95rem; height: .95rem; }

/* lobby: TV card (QR on the TV itself) */
.tv-card { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--r-lg); background: rgba(185, 167, 255, .1); border: 1px solid rgba(185, 167, 255, .35); flex-shrink: 0; }
.tv-card.ok { background: rgba(47, 209, 139, .1); border-color: rgba(47, 209, 139, .45); }
.tv-ic { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 10, 36, .5); color: var(--sky); flex-shrink: 0; }
.tv-card.ok .tv-ic { color: var(--green); }
.tv-txt { min-width: 0; }
.tv-txt > b { display: block; font-family: var(--font-d); font-size: 1rem; color: var(--cream); margin-bottom: .2rem; }
.tv-txt p { color: var(--muted); font-size: .92rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.tv-txt p b { color: var(--gold); }
.tv-qr { width: 10rem; height: 10rem; padding: .45rem; border-radius: .8rem; background: #fff; flex-shrink: 0; }
.tv-qr svg { width: 100%; height: 100%; display: block; stroke: none; }
.tv-qr:not([hidden]) + .tv-ic { display: none; }
.tvm-text { color: var(--muted); font-weight: 600; line-height: 1.45; }
/* help slide: a TV with the wheel and a phone-remote beside it */
.hs-tv { width: 13rem; height: 8rem; border-radius: .8rem; border: .45rem solid #1b1a2c; background: radial-gradient(ellipse at 50% 40%, #5b3db0, #140c30); box-shadow: 0 0 0 2px var(--gold), 0 1rem 2rem rgba(0, 0, 0, .6); display: grid; place-items: center; overflow: hidden; }
.hs-tv .hs-mini-wheel { width: 5.6rem; height: 5.6rem; border-width: 3px; }
.hs-phone { position: absolute; right: 18%; bottom: .9rem; width: 2.6rem; height: 4.4rem; border-radius: .55rem; border: .25rem solid #1b1a2c; box-shadow: 0 0 0 2px var(--gold);
  background: repeating-linear-gradient(90deg, #fffdf6 0 .5rem, transparent .5rem .62rem) 50% 55% / 80% .55rem no-repeat, repeating-linear-gradient(90deg, #fffdf6 0 .5rem, transparent .5rem .62rem) 50% 75% / 80% .55rem no-repeat, linear-gradient(180deg, #3a2370, #1a0f36); }
.tvm .btn.xl { white-space: normal; height: auto; min-height: 3.6rem; padding-block: .6rem; line-height: 1.2; text-align: center; }
.seg.wide button { font-size: .9rem; padding: 0 .4rem; line-height: 1.15; }

/* preferences: voice */
.voice-pref { justify-content: flex-start; }
.prefs-dog { width: 4.6rem; flex-shrink: 0; }
.voice-pref .pref-l { flex: 1; display: grid; gap: .35rem; min-width: 0; }
.voice-pref .seg button { height: 2.3rem; font-size: .88rem; padding: 0 .3rem; }
.pref-l .pref-note { color: var(--gold); }
.pref-note:empty { display: none; }
/* neural speaker choice and its one-time download */
#pref-speaker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; }
#pref-speaker button { height: 2.1rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-load { height: .4rem; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.voice-load i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e8a51f, #fff3b9); transition: width .3s; }

/* =========================================================
   Профили семьи
   ========================================================= */
.acc:empty { display: none; }
/* signed in: name and avatar come from the profile; picking a profile: the rest of the card waits */
.profile.acc-in .prof-row, .profile.acc-in > .ava-tabs, .profile.acc-in > .ava-pick { display: none; }
.profile.acc-pick > :not(.acc):not(.invite):not(.home-links) { display: none; }
.acc-intro { display: grid; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-md); background: rgba(247, 201, 72, .08); border: 1px dashed rgba(247, 201, 72, .45); }
.acc-intro b { display: block; font-family: var(--font-d); color: var(--gold); font-size: .98rem; }
.acc-intro span { color: var(--muted); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.acc-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.acc-btns .btn { flex: 1 1 auto; }
.acc-head { display: flex; align-items: center; justify-content: space-between; }
.acc-net { width: .6rem; height: .6rem; border-radius: 50%; background: #6a6280; }
.acc-net.on { background: var(--green); box-shadow: 0 0 .6rem var(--green); }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .55rem; margin-top: .6rem; max-height: 22rem; overflow-y: auto; padding: .3rem; }
.acc-p { display: grid; justify-items: center; gap: .45rem; padding: .8rem .3rem .65rem; border-radius: var(--r-lg); background: rgba(16, 10, 36, .4); border: 1px solid var(--line-soft); transition: transform .25s var(--spring), border-color .2s, background .2s; min-width: 0; }
.acc-p:hover { transform: translateY(-3px); border-color: var(--gold); background: rgba(247, 201, 72, .1); }
.acc-p > span:last-child { font-weight: 800; font-size: .9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-p.add { border-style: dashed; border-color: rgba(247, 201, 72, .45); color: var(--muted); align-content: center; }
.acc-p.add .plus { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: var(--gold); border: 2px dashed rgba(247, 201, 72, .55); }
.acc-p.add > span:last-child { white-space: normal; font-size: .8rem; line-height: 1.2; }
.acc-empty { color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: .5rem; }
.acc-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .4rem; }
.acc-me { display: flex; align-items: center; gap: .9rem; padding: .3rem 0; }
.acc-me .ava { --s: 4.6rem; box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(247, 201, 72, .18); animation: floaty 4.5s ease-in-out infinite; }
.acc-me-t { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.acc-me-t b { font-family: var(--font-d); font-size: 1.3rem; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-guest { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
/* PIN pad */
.modal-card.pinm { width: min(22rem, 100%); align-items: center; text-align: center; }
.modal-card.pinm .modal-head { align-self: stretch; }
.pin-who { display: grid; justify-items: center; gap: .5rem; }
.pin-who b { font-family: var(--font-d); color: var(--cream); font-size: 1.15rem; }
.pin-dots { display: flex; gap: .9rem; justify-content: center; margin: .3rem 0; }
.pin-dots i { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--gold); transition: background .15s, transform .2s var(--spring); }
.pin-dots i.on { background: var(--gold); transform: scale(1.12); box-shadow: 0 0 .7rem rgba(247, 201, 72, .7); }
.pin-msg { min-height: 1.3rem; color: var(--rose); font-weight: 800; font-size: .92rem; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 4.4rem); gap: .6rem; justify-content: center; }
.pin-pad button { height: 4.4rem; border-radius: 50%; font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; color: #3a1a10; background: linear-gradient(180deg, #fffdf6, #ece2c8); box-shadow: 0 .22rem 0 #a99a72, inset 0 1px 0 #fff; transition: transform .1s; }
.pin-pad button:active { transform: translateY(.18rem); box-shadow: 0 .04rem 0 #a99a72; }
.pin-pad button[data-k="⌫"] { background: linear-gradient(180deg, #6a48cc, #3c2486); color: var(--cream); box-shadow: 0 .22rem 0 #1b0e42; }
.pin-hint { color: var(--dim); font-size: .8rem; font-weight: 600; line-height: 1.35; }
/* new / edit profile */
.modal-card.accm { width: min(30rem, 100%); }
.acc-tabs { display: flex; gap: .4rem; padding: .25rem; border-radius: 999px; background: rgba(16, 10, 36, .5); border: 1px solid var(--line-soft); align-self: flex-start; }
.acc-tabs button { padding: .45rem 1.1rem; border-radius: 999px; font-weight: 800; color: var(--muted); }
.acc-tabs button.sel { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; }
.pin-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pin-row > div { display: grid; gap: .4rem; }
.pin-row .label { font-size: .7rem; }
.accm-err { min-height: 1.2rem; color: var(--rose); font-weight: 800; font-size: .9rem; }
.accm-err:empty { min-height: 0; }
.accm-del, .fam-leave { color: var(--rose); align-self: center; font-size: .9rem; }
/* family code */
.fam-code { font-family: var(--font-d); font-weight: 900; font-size: 2.6rem; letter-spacing: .16em; text-align: center; padding: .6rem; border-radius: var(--r-lg);
  background: linear-gradient(100deg, rgba(247, 201, 72, .18), rgba(247, 201, 72, .05)); border: 2px dashed rgba(247, 201, 72, .55); color: var(--gold); }
.fam-text { color: var(--muted); font-weight: 600; line-height: 1.45; }
#fam-body { display: grid; gap: .9rem; }
.join-row .input.code { letter-spacing: .25em; }
/* settings: your profile */
.acc-pref { justify-content: flex-start; flex-wrap: wrap; }
.acc-pref .pref-l { flex: 1; min-width: 8rem; }
.acc-pref-btns { display: flex; gap: .4rem; }
/* install as an app */
.modal-card.instm { width: min(28rem, 100%); }
.inst-app { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: var(--r-lg); background: rgba(16, 10, 36, .45); border: 1px solid var(--line-soft); }
.inst-app img { width: 4rem; height: 4rem; border-radius: 1rem; flex-shrink: 0; box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .5); }
.inst-app b { display: block; font-family: var(--font-d); color: var(--gold); }
.inst-app span { color: var(--muted); font-size: .86rem; font-weight: 600; line-height: 1.35; }
.inst-steps { list-style: none; display: grid; gap: .7rem; }
.inst-steps li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; line-height: 1.45; }
.inst-steps b { color: var(--gold); }
.inst-n { width: 1.8rem; height: 1.8rem; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--gold); color: #3b2300; font: 900 .9rem/1 var(--font-d); }
.inst-ic { width: 1.35rem; height: 1.35rem; vertical-align: -.3rem; color: #4da3ff; fill: none; }
.inst-text { color: var(--cream); font-weight: 600; line-height: 1.45; margin-bottom: .6rem; }
.inst-text b { color: var(--gold); }
#inst-body { display: grid; gap: .6rem; }
@media (max-width: 820px) {
  .acc-grid { grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .4rem; max-height: 46vh; }
  .acc-p { padding: .55rem .2rem .45rem; gap: .3rem; }
  .acc-p .ava { --s: 3.2rem; }
  .acc-p.add .plus { width: 3.2rem; height: 3.2rem; }
  .acc-me .ava { --s: 3.6rem; }
  .acc-me-t b { font-size: 1.1rem; }
  .pin-pad { grid-template-columns: repeat(3, 4.8rem); }
  .pin-pad button { height: 4.8rem; }
  .fam-code { font-size: 2rem; }
}

/* phone used as a remote next to the TV: the host and the reel are on the big screen */
body.remote .w-host, body.remote .w-reel { display: none !important; }

/* the TV / shared screen: big, nothing to press */
html.tv { font-size: clamp(16px, 1.15vw, 30px); }
html.tv .invite-row, html.tv .demo-note { display: none !important; }
html.tv .tv-card { padding: 1.2rem 1.4rem; }
html.tv .tv-txt > b { font-size: 1.3rem; }
html.tv .tv-txt p { font-size: 1.05rem; }
html.tv .chat-form, html.tv .toolbar, html.tv .w-keys, html.tv .w-actions, html.tv .w-coach, html.tv .w-spec-next, html.tv .w-skip { display: none !important; }
html.tv .w-main { grid-template-columns: 1.25fr 1fr; }
html.tv .w-main .w-panel { display: none !important; }
html.tv .w-main .w-spec { display: flex !important; order: 2; }
html.tv .w-main .w-wheel-col { display: grid !important; }
html.tv .w-reel { display: none; }
html.tv .w-spec-top { flex-direction: column; text-align: center; }
html.tv .w-spec-top .ava { --s: 7rem; }
html.tv .w-spec-name { font-size: 1.9rem; white-space: normal; }
html.tv .w-spec-st { font-size: 1.4rem; justify-content: center; }
html.tv .w-host { min-height: 7rem; }
html.tv .w-host-dog { width: 7.5rem; height: 7.5rem; }
html.tv .w-host-text { font-size: 1.45rem; }
html.tv .w-q { font-size: 1.45rem; }

@media (min-width: 821px) {
  /* the faded keyboard (not your letter yet) stays compact and never slides under the buttons */
  .w-keys:not(.on) { flex: 0 0 auto; grid-auto-rows: 2.1rem; }
  .w-keys:not(.on) .key { font-size: 1rem; box-shadow: 0 .15rem 0 #a99a72; }
  .w-coach { font-size: .92rem; }
  .w-panel { overflow-x: hidden; }
  .kword { font-size: clamp(.68rem, .75vw, .95rem); overflow: hidden; }
}
@media (max-width: 820px) {
  .home-links { gap: .4rem 1rem; }
  .w-coach { font-size: .86rem; padding: .45rem .6rem; gap: .45rem; }
  .w-coach::before { width: 1.2rem; height: 1.2rem; font-size: .72rem; }
  .w-panel .w-coach.wait { display: none; }
  .w-skip { height: 2.3rem; padding: 0 .75rem; font-size: .8rem; }
  .w-skip svg { display: none; }
  .tv-card { margin-top: .6rem; padding: .6rem .7rem; gap: .7rem; }
  .tv-ic { width: 2.4rem; height: 2.4rem; }
  .tv-txt > b { font-size: .9rem; }
  .tv-txt p { font-size: .82rem; }
  .w-actions .btn.two { height: auto; min-height: 3.5rem; }
  .prefs-dog { width: 3.6rem; }
  .w-spec-next { font-size: .95rem; }
  body.kb-open .w-coach { display: none !important; }
  .kword { overflow: hidden; padding: .1rem; }
  html.big .kword { font-size: .74rem; }
}
@media (max-width: 820px) and (max-height: 690px) {
  .w-coach { font-size: .8rem; padding: .35rem .55rem; }
  .w-actions .btn.two { min-height: 3.1rem; padding-block: .3rem; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  .w-coach { font-size: .78rem; padding: .3rem .5rem; }
  .w-coach::before { display: none; }
  .tv-card { display: none; }
}

/* =========================================================
   Версия 3: тёплое ретро-ТВ, барабан у всех, живые очки
   ========================================================= */
:root { --wood: repeating-linear-gradient(91deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 7px, rgba(255, 220, 170, .05) 7px 8px, transparent 8px 13px), linear-gradient(180deg, #2b2060, #1b1440 60%, #110c2c); }

/* soft studio light over the stage background */
#mood { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease); }
#mood.on { opacity: 1; transition-duration: .35s; }
#mood[data-m="bad"] { background: radial-gradient(ellipse at 50% 30%, rgba(229, 57, 77, .28), transparent 65%); }
#mood[data-m="dim"] { background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0, 0, 0, .35)); }
#mood[data-m="gold"] { background: radial-gradient(ellipse at 50% 20%, rgba(255, 200, 90, .26), transparent 60%); }
#mood[data-m="party"] { background: radial-gradient(ellipse at 25% 15%, rgba(255, 200, 90, .3), transparent 45%), radial-gradient(ellipse at 75% 15%, rgba(255, 120, 140, .22), transparent 45%); }

/* the board sits in a polished wooden frame */
.w-board-wrap { background: var(--wood); }
.w-board-wrap .w-board { position: relative; }

/* sector that the drum stopped on, popping above it */
.w3-result { position: absolute; left: 50%; top: 2%; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(-50%) scale(.6); }
.w3-result .sec-chip { height: 2.7rem; padding: 0 1.2rem; font-size: 1.3rem; box-shadow: 0 0 1.6rem rgba(247, 201, 72, .65), 0 .5rem 1rem rgba(0, 0, 0, .5); }
.wheel3d.landed .w3-result { animation: resultpop 2s var(--ease) forwards; }
.wheel3d.landed .w3-pointer svg { animation: ptrglow 1s ease-out; }
@keyframes resultpop { 12% { opacity: 1; transform: translateX(-50%) scale(1.12); } 22%, 82% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
@keyframes ptrglow { 30% { filter: drop-shadow(0 0 .9rem #ffd76a) brightness(1.25); } }
@keyframes wheelin { from { opacity: 0; transform: scale(.55) translateY(1.5rem); } }

/* Барбос: same round frame, noticeably bigger on computers and TVs */
@media (min-width: 821px) {
  /* long names shorten with «…» instead of widening the column */
  .g-plist { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding-top: .45rem; }
  .w-host { min-height: 5.8rem; gap: .9rem; }
  .w-host-dog { width: 5.8rem; height: 5.8rem; }
  .w-host-text { font-size: 1.2rem; }
}
html.tv .w-host { min-height: 9.5rem; }
html.tv .w-host-dog { width: 9.5rem; height: 9.5rem; border-width: 4px; }

/* leader's crown and a calm rolling score */
.gp-num { font-variant-numeric: tabular-nums; }
.gp .crown { position: absolute; left: .55rem; top: -.45rem; width: 1.5rem; height: 1.15rem; z-index: 2; filter: drop-shadow(0 .15rem .2rem rgba(0, 0, 0, .5)); animation: crownin .6s var(--spring); }
.gp.lead { box-shadow: inset 0 0 0 1px rgba(247, 201, 72, .35); }
@keyframes crownin { from { transform: translateY(-.6rem) rotate(-20deg) scale(.4); opacity: 0; } }

/* final: warm spotlight on the winner */
.pd.p1 { position: relative; }
.pd.p1::before { content: ""; position: absolute; left: 50%; bottom: 30%; width: 14rem; height: 18rem; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 210, 120, .35), transparent 65%); }
.pd-block { box-shadow: inset 0 -.6rem 1rem rgba(0, 0, 0, .18), 0 1rem 2rem -1rem rgba(0, 0, 0, .8); }

/* phones: while the drum spins, those waiting see it big instead of the strip */
@media (max-width: 820px) {
  .gp .crown { left: .1rem; top: -.5rem; width: 1.2rem; height: .95rem; }
  /* two buttons side by side on a narrow phone: the label wraps instead of being cut */
  .w-actions .btn { white-space: normal; line-height: 1.12; text-align: center; }
}

/* «Простая графика»: no animated stage and no blur, the game itself stays */
html.lite #bg { visibility: hidden; }
html.lite body { background: radial-gradient(ellipse at 50% 0%, #3f2490 0%, transparent 60%), linear-gradient(90deg, #2a0f5a 0 6%, transparent 14% 86%, #2a0f5a 94%), #120b26; }
html.lite .card, html.lite .overlay, html.lite .modal, html.lite #final, html.lite .w-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite .card { background: linear-gradient(180deg, #2b1a5e, #140c2e); }
html.lite .w-board-wrap::before, html.lite .w-board-wrap::after, html.lite .marquee .bulb { animation: none; }

/* =========================================================
   Поле чудес: реакции зала, штампы, серия букв, награды и рекорды
   ========================================================= */
/* reaction buttons: in the chat column on computers, in the spectator card on phones, on the final screen */
.react-bar { display: none; justify-content: center; gap: .35rem; flex-wrap: wrap; flex-shrink: 0; }
@media (min-width: 821px) { body.mode-wheel .g-chat .react-bar { display: flex; padding: .6rem 0 .1rem; border-top: 1px solid var(--line-soft); } }
.w-spec .react-bar, #final.wheel .react-bar { display: flex; }
html.tv .react-bar { display: none !important; }
.react-bar button { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; line-height: 1;
  background: rgba(16, 10, 36, .5); border: 1px solid var(--line); box-shadow: 0 .15rem 0 rgba(0, 0, 0, .35); transition: transform .2s var(--spring), background .2s; }
.react-bar button:hover { transform: translateY(-2px) scale(1.08); background: rgba(247, 201, 72, .16); }
.react-bar button.hit { animation: rxhit .45s var(--spring); }
@keyframes rxhit { 40% { transform: scale(1.35) rotate(-10deg); background: rgba(247, 201, 72, .35); } }
#final .react-bar { margin-top: .9rem; }
/* awards and reactions need room: a more compact podium */
@media (min-width: 821px) {
  #final.wheel .final-inner { gap: .5rem; }
  #final.wheel .final-dog { width: 6.5rem; }
  #final.wheel .final-title { margin-bottom: .4rem; }
  #final.wheel .pd.p1 .pd-block { height: 8.5rem; } #final.wheel .pd.p2 .pd-block { height: 6.2rem; } #final.wheel .pd.p3 .pd-block { height: 4.4rem; }
  #final.wheel .final-rest { margin: .4rem 0 0; }
  #final.wheel .final-actions { margin-top: .5rem; }
}
#final .react-bar button { width: 3rem; height: 3rem; font-size: 1.55rem; }

/* flying reactions */
#reacts { position: fixed; inset: 0; z-index: 62; pointer-events: none; overflow: hidden; }
.rx { position: absolute; display: grid; justify-items: center; gap: .1rem; transform: translate(-50%, 0); animation: rxfly 2.8s var(--ease) forwards; will-change: transform, opacity; }
.rx-e { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 .35rem .5rem rgba(0, 0, 0, .55)); }
.rx.mine .rx-e { font-size: 3.1rem; }
.rx-n { max-width: 7rem; padding: .05rem .5rem; border-radius: 99px; background: var(--cream); color: #3a1a10; font-size: .7rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes rxfly {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  12% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .15), -3rem) scale(1.15) rotate(var(--rot)); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -42vh) scale(.9) rotate(calc(var(--rot) * -1)); }
}
html.tv .rx-e { font-size: 4rem; }

/* rubber stamp over the game */
.w-stamp { position: absolute; left: 50%; top: 42%; z-index: 8; pointer-events: none; opacity: 0; padding: .1em .45em; border: .12em solid currentColor; border-radius: .25em;
  font: 900 clamp(2.2rem, 7vw, 5.4rem)/1.1 var(--font-d); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-11deg); }
.w-stamp.bad { color: #ff4d63; background: rgba(20, 4, 6, .55); text-shadow: 0 0 1.5rem rgba(229, 57, 77, .8); box-shadow: 0 0 2.4rem rgba(229, 57, 77, .45), inset 0 0 1.2rem rgba(229, 57, 77, .35); }
.w-stamp.gold { color: var(--gold); background: rgba(40, 18, 4, .55); text-shadow: 0 0 1.5rem rgba(247, 201, 72, .9); box-shadow: 0 0 2.4rem rgba(247, 201, 72, .5), inset 0 0 1.2rem rgba(247, 201, 72, .35); }
.w-stamp.on { animation: stamp 2s var(--ease) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-24deg) scale(2.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(.92); }
  18% { transform: translate(-50%, -50%) rotate(-11deg) scale(1.04); }
  24%, 78% { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1.08); }
}
@media (max-width: 820px) { .w-stamp { position: fixed; top: 45%; } }

/* letters in a row: three lamps, the third brings the boxes */
.streak { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 99px; background: rgba(16, 10, 36, .5); border: 1px solid var(--line); }
.streak small { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 800; margin-right: .1rem; }
.streak i { width: .7rem; height: .7rem; border-radius: 50%; background: #3a2c66; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.streak i.on { background: #fff3c4; box-shadow: 0 0 .4rem #ffd76a, 0 0 .9rem rgba(255, 190, 70, .9); animation: lampon .5s var(--spring); }
@keyframes lampon { from { transform: scale(.3); } }

/* bankrupt: the loss floats in red */
.gain.loss { color: var(--rose); text-shadow: 0 0 1rem rgba(229, 57, 77, .9); }

/* final: awards of the evening and record banners */
#final { overflow-y: auto; place-items: start center; }
#final .final-inner { margin-block: auto; }
.final-actions { display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.final-awards { display: grid; justify-items: center; gap: .55rem; width: 100%; margin-top: .4rem; }
.final-awards:empty { display: none; }
.rec-banner { padding: .5rem 1.2rem; border-radius: 99px; font-weight: 800; color: #3b2300; background: linear-gradient(180deg, #fff3b9, #f2bd3a); border: 1px solid #ffe9a2;
  box-shadow: 0 0 1.6rem rgba(247, 201, 72, .55); animation: pop .6s var(--spring) .9s backwards; text-align: center; }
.rec-banner.fam { font-size: 1.1rem; animation: pop .6s var(--spring) .9s backwards, recglow 1.6s ease-in-out 1.5s infinite; }
@keyframes recglow { 50% { box-shadow: 0 0 2.8rem rgba(247, 201, 72, .95); } }
.aw-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; max-width: 44rem; }
.aw { display: flex; align-items: center; gap: .55rem; padding: .3rem .85rem .3rem .3rem; border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); animation: pop .5s var(--spring) backwards; text-align: left; }
.aw-ic { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; flex-shrink: 0; background: radial-gradient(circle at 50% 35%, rgba(247, 201, 72, .35), rgba(247, 201, 72, .08)); }
.aw-t { display: grid; min-width: 0; line-height: 1.2; }
.aw-t b { font-size: .86rem; color: var(--gold); }
.aw-t small { font-size: .76rem; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* «Рекорды» window */
.modal-card.stats { width: min(40rem, 100%); gap: .9rem; }
.st-me { display: flex; align-items: center; gap: .9rem; }
.st-me b { display: block; font-family: var(--font-d); font-size: 1.15rem; color: var(--gold); }
.st-me span { color: var(--muted); font-size: .9rem; }
.st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.st-tiles > div { display: grid; gap: .1rem; padding: .6rem .5rem; border-radius: var(--r-md); background: rgba(16, 10, 36, .45); border: 1px solid var(--line-soft); text-align: center; }
.st-tiles b { font-family: var(--font-d); font-size: 1.25rem; color: var(--gold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-tiles span { font-size: .74rem; color: var(--muted); line-height: 1.2; }
.st-sec { display: grid; gap: .55rem; }
.st-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-d); color: var(--gold); font-size: 1rem; }
.st-h span { font-family: var(--font); font-size: .82rem; color: var(--dim); }
.st-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem; }
.sa { position: relative; display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem .4rem .4rem; border-radius: var(--r-md); background: rgba(247, 201, 72, .08); border: 1px solid rgba(247, 201, 72, .3); }
.sa .aw-t small { white-space: normal; }
.sa.lock { opacity: .42; filter: grayscale(1); border-style: dashed; }
.sa i { margin-left: auto; font-style: normal; font-family: var(--font-d); font-size: .85rem; color: var(--gold); }
.st-top { list-style: none; display: grid; gap: .3rem; }
.st-top li { display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem .35rem .4rem; border-radius: var(--r-md); background: rgba(16, 10, 36, .4); border: 1px solid transparent; }
.st-top li:first-child { border-color: rgba(247, 201, 72, .55); background: linear-gradient(100deg, rgba(247, 201, 72, .18), rgba(247, 201, 72, .04)); }
.st-pos { width: 1.8rem; text-align: center; font-family: var(--font-d); font-size: .95rem; color: var(--dim); flex-shrink: 0; }
.st-n { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-d { font-size: .78rem; color: var(--dim); }
.st-top b { font-family: var(--font-d); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }
.st-recs { display: grid; gap: .35rem; }
.st-rec { display: flex; align-items: center; gap: .6rem; padding: .35rem .7rem .35rem .4rem; border-radius: var(--r-md); border: 1px dashed var(--line); }
.st-rec span { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.st-rec small { font-size: .74rem; color: var(--dim); font-weight: 700; }
.st-rec b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rec i { font-style: normal; font-family: var(--font-d); color: var(--gold); }
.st-empty { color: var(--muted); font-weight: 600; font-size: .95rem; }
.st-reset { color: var(--dim); font-size: .85rem; }
@media (max-width: 820px) {
  .st-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .st-tiles > div { padding: .45rem .2rem; }
  .st-tiles b { font-size: 1rem; }
  .st-tiles span { font-size: .66rem; }
  .st-ach { grid-template-columns: minmax(0, 1fr); }
  .w-spec .react-bar button { width: 2.9rem; height: 2.9rem; font-size: 1.45rem; }
  .final-awards .label { display: none; }
  .aw { padding-right: .6rem; }
  .aw-ic { width: 1.8rem; height: 1.8rem; font-size: 1.05rem; }
  .aw-t b { font-size: .76rem; } .aw-t small { font-size: .68rem; }
  #final .react-bar button { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
  .final-actions .btn.lg { height: 3.6rem; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  #final .final-awards { grid-column: 1 / -1; }
  #final .react-bar { grid-column: 1 / -1; margin-top: .3rem; }
  #final .final-actions .btn.lg { height: 3rem; }
}

/* =========================================================
   Версия 6: главная «ночная студия»
   computers: menu | show | your numbers · tablets: show | numbers + bottom menu · phones: one column + bottom menu
   ========================================================= */
#screen-home { overflow-y: auto; justify-content: flex-start; scrollbar-width: thin; scrollbar-color: rgba(178, 150, 255, .35) transparent; }
.home { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 23rem; gap: 1.4rem; align-items: start; max-width: 98rem; width: 100%; margin: 0 auto; padding-bottom: 1rem; }
.h-card-h { display: flex; align-items: center; gap: .55rem; font-family: var(--font-d); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.h-card-h svg { width: 1.35rem; height: 1.35rem; color: var(--gold); stroke: none; filter: drop-shadow(0 0 .4rem rgba(247, 201, 72, .6)); }
.h-card-link { margin-left: auto; font: 700 .82rem var(--font); color: var(--muted); }
.h-card-link:hover { color: var(--gold); }
.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 30% { box-shadow: 0 0 0 3px var(--gold), 0 0 2.5rem rgba(247, 201, 72, .7); } }

/* --- left column --- */
.h-side { position: sticky; top: 0; }
.h-side-in { padding: 1.3rem 1rem 1rem; display: flex; flex-direction: column; gap: 1.2rem; min-height: min(46rem, calc(100dvh - 6.5rem)); }
.h-me { display: grid; justify-items: center; gap: .45rem; padding: .2rem; border-radius: var(--r-lg); text-align: center; }
.h-me .ava { --s: 6.2rem; box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(247, 201, 72, .16), 0 0 2rem rgba(247, 201, 72, .35); }
.h-me b { font-family: var(--font-d); font-size: 1.08rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-me-l { font-size: .8rem; font-weight: 800; color: var(--gold); padding: .15rem .65rem; border-radius: 99px; background: rgba(247, 201, 72, .12); border: 1px solid rgba(247, 201, 72, .35); }
.h-crown-s { font-size: .9em; }
.h-nav { display: grid; gap: .3rem; }
.h-nav button { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; border-radius: 1rem; font-weight: 800; color: var(--muted); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; text-align: left; }
.h-nav button svg { width: 1.35rem; height: 1.35rem; stroke: none; }
.h-nav button svg [fill="none"], .h-tabs button svg [fill="none"] { stroke: currentColor; stroke-width: 1.9; }
.h-right .acc-me-t b { font-size: 1.1rem; }
.h-right .acc-me .ava { --s: 3.8rem; }
.h-nav button:hover { background: rgba(178, 150, 255, .1); color: var(--text); }
.h-nav button.sel { color: var(--text); background: linear-gradient(90deg, rgba(247, 201, 72, .3), rgba(247, 201, 72, .06)); border-color: rgba(247, 201, 72, .65); box-shadow: 0 0 1.4rem -.3rem rgba(247, 201, 72, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.h-nav button.sel svg { color: var(--gold); }
.h-rec { margin-top: auto; position: relative; display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 1.8rem .9rem 1rem; border-radius: var(--r-lg);
  background: radial-gradient(ellipse at 50% 0%, rgba(247, 201, 72, .28), transparent 60%), linear-gradient(180deg, rgba(90, 55, 170, .55), rgba(30, 18, 66, .7)); border: 1px solid rgba(247, 201, 72, .35); }
.h-rec-crown { position: absolute; top: -1.1rem; font-size: 2rem; filter: drop-shadow(0 0 .6rem rgba(247, 201, 72, .8)); animation: floaty 3.5s ease-in-out infinite; }
.h-rec b { font-family: var(--font-d); font-size: 1rem; color: var(--gold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rec .h-rec-empty { color: var(--text); white-space: normal; }
.h-rec-s { font-size: .82rem; color: var(--muted); font-weight: 700; margin-bottom: .4rem; }

/* --- center: logo + the table --- */
.h-main { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
.h-logo { position: relative; text-align: center; padding-top: 2.6rem; }
.h-logo .h-crown { position: absolute; left: 50%; top: 0; width: 4.4rem; transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 0 1rem rgba(247, 201, 72, .7)); animation: crownbob 3.2s ease-in-out infinite; }
@keyframes crownbob { 50% { transform: translateX(-50%) rotate(4deg) translateY(-.3rem); } }
.h-logo .logo { font-size: clamp(3rem, 5.6vw, 5.8rem); transform: rotate(-3deg); filter: drop-shadow(0 4px 0 #7a4606) drop-shadow(0 .5rem 0 rgba(60, 30, 120, .7)) drop-shadow(0 0 2.2rem rgba(247, 201, 72, .45)); }
.h-logo .logo-sub { margin-top: .5rem; font-family: var(--font); font-style: normal; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--text); transform: rotate(-2deg); }
.h-logo .heart { color: #ff4d6d; display: inline-block; animation: beat 1.4s infinite; }
/* the marquee bulbs of the old logo turn into sparkles */
.h-logo .bulb { position: absolute; width: .4rem; height: .4rem; margin: -.2rem; border-radius: 50%; background: #fff6d0; box-shadow: 0 0 .6rem #ffd76a; animation: twinkle 1.6s ease-in-out infinite alternate; opacity: .8; }
.h-logo .bulb:nth-child(3n) { display: none; }
.h-stage { position: relative; width: min(100%, 44rem); height: 20rem; margin-top: -.4rem; }
.h-glow { position: absolute; left: 50%; bottom: -1.5rem; width: 90%; height: 9rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 200, 90, .45), rgba(247, 201, 72, .12) 45%, transparent 70%); filter: blur(4px); }
.h-table { position: absolute; left: 12%; right: 12%; bottom: 0; height: 6.4rem; z-index: 3; }
.h-table-top { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #8a5a34, #4a2a14 60%, #2a160a);
  box-shadow: 0 0 0 3px rgba(247, 201, 72, .55), 0 0 0 1.2rem rgba(247, 201, 72, .08), 0 0 3rem rgba(247, 201, 72, .45), inset 0 -.8rem 1.5rem rgba(0, 0, 0, .55); }
.h-table-top::before, .h-table-top::after { content: ""; position: absolute; inset: 18% 22%; border-radius: 50%; border: 2px solid rgba(255, 215, 106, .45); box-shadow: 0 0 1rem rgba(255, 215, 106, .4); animation: ring 3s ease-in-out infinite; }
.h-table-top::after { inset: 32% 34%; animation-delay: 1.5s; }
@keyframes ring { 50% { opacity: .35; transform: scale(1.06); } }
.h-mini-wheel { position: absolute; left: 50%; top: -2.8rem; width: 4.6rem; height: 4.6rem; margin-left: -2.3rem; border-radius: 50%;
  background: conic-gradient(#d0493b 0 12.5%, #f0b84a 0 25%, #3f9a7c 0 37.5%, #6b45c9 0 50%, #d0493b 0 62.5%, #f0b84a 0 75%, #3f9a7c 0 87.5%, #6b45c9 0);
  border: 4px solid var(--gold); box-shadow: 0 0 0 2px #7a4606, 0 0 2rem rgba(247, 201, 72, .8); animation: spin 14s linear infinite; }
.h-mini-wheel::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3b9, #e8a51f); box-shadow: 0 0 0 2px #7a4606; }
.h-stage .greet-dog { position: absolute; left: 0; bottom: .6rem; width: 13.5rem; z-index: 4; filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .55)) drop-shadow(0 0 1.6rem rgba(247, 201, 72, .25)); }
.h-guests { position: absolute; inset: 0; z-index: 2; }
.h-guest { position: absolute; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px rgba(247, 201, 72, .8), 0 .8rem 1.4rem rgba(0, 0, 0, .55); animation: guest 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.h-guest svg { width: 100%; height: 100%; display: block; stroke: none; }
@keyframes guest { 50% { transform: translateY(-.45rem) rotate(calc((var(--i) - 2.5) * 2deg)); } }
/* around the table, never behind the little drum in the middle (45–55%) */
.h-guest.g0 { left: 24%; bottom: 4.4rem; } .h-guest.g1 { left: 34%; bottom: 6.6rem; width: 5.2rem; height: 5.2rem; } .h-guest.g2 { left: 56%; bottom: 6.6rem; width: 5.2rem; height: 5.2rem; }
.h-guest.g3 { left: 67%; bottom: 4.4rem; } .h-guest.g4 { left: 80%; bottom: 3rem; width: 4rem; height: 4rem; } .h-guest.g5 { left: 79%; bottom: 8.4rem; width: 3.4rem; height: 3.4rem; opacity: .85; }
.h-stage .bubble { position: absolute; left: 28%; top: 0; max-width: 17rem; margin: 0; z-index: 5; font-size: .95rem; padding: .75rem 1rem; }
.h-stage .bubble:empty { display: none; }
/* --- play --- */
.h-play { width: min(100%, 36rem); display: grid; gap: .8rem; margin-top: .4rem; }
.h-cta { height: auto !important; min-height: 5.2rem; padding: .7rem 2rem .7rem 1rem !important; gap: 1rem; justify-content: center; box-shadow: 0 .35rem 0 #a4660a, 0 0 3rem rgba(247, 201, 72, .55), inset 0 2px 0 rgba(255, 255, 255, .75) !important; }
.h-play-ic { width: 3rem; height: 3rem; padding: .7rem .6rem .7rem .8rem; border-radius: 50%; background: #2a1650; color: var(--gold); stroke: none; flex-shrink: 0; position: relative; z-index: 1; }
.h-cta-t { display: grid; text-align: left; line-height: 1.15; }
.h-cta-t b { font-size: 1.45rem; }
.h-cta-t small { font: 700 .82rem var(--font); opacity: .75; text-shadow: none; }
.h-cta.pulse { animation: coachp 1s ease-in-out 3; }
.h-join .input { height: 3.3rem; font-size: 1.05rem; letter-spacing: .25em; }
.h-join .input::placeholder { letter-spacing: .12em; font-size: .9rem; }
/* --- the family --- */
.h-family { width: 100%; padding: 1.1rem 1.2rem; display: grid; gap: .8rem; }
.h-fam-row { display: flex; gap: .9rem; overflow-x: auto; padding: .4rem .2rem .3rem; scrollbar-width: none; }
.h-fam-row::-webkit-scrollbar { display: none; }
.h-fam-p { flex: 0 0 auto; display: grid; justify-items: center; gap: .4rem; width: 5.2rem; transition: transform .25s var(--spring); }
.h-fam-p:hover { transform: translateY(-4px); }
.h-fam-p .ava { --s: 4.4rem; box-shadow: 0 0 0 3px rgba(178, 150, 255, .55), 0 .5rem 1rem rgba(0, 0, 0, .5); }
.h-fam-p.me .ava { box-shadow: 0 0 0 3px var(--gold), 0 0 1.4rem rgba(247, 201, 72, .6); }
.h-fam-p > span:last-child { font-size: .82rem; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.h-fam-p.me > span:last-child { color: var(--gold); }
.h-fam-p.add .plus { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #c9b6ff; background: rgba(178, 150, 255, .12); border: 2px dashed rgba(178, 150, 255, .5); }
.h-fam-text { color: var(--muted); font-weight: 600; font-size: .92rem; line-height: 1.4; }
.h-fam-text.hint { color: var(--gold-hi); }
.h-fam-text .link-btn { padding: 0; display: inline; }

/* --- right column --- */
.h-right { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.h-right .profile { padding: 1.2rem; gap: .9rem; }
#profile-card.acc-pick > .h-card-h { display: flex; }
#profile-card.acc-pick > .h-stats { display: block; }
#profile-card .acc-intro, #profile-card .acc-grid, #profile-card .acc-empty, #profile-card .acc-head { display: none; }
#profile-card .acc-foot { justify-content: flex-start; }
.h-pick-hint { color: var(--gold-hi); font-weight: 700; font-size: .92rem; line-height: 1.4; }
.h-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.h-nums > div { display: grid; justify-items: center; gap: .05rem; padding: .65rem .3rem; border-radius: var(--r-md); background: rgba(16, 10, 36, .45); border: 1px solid var(--line-soft); }
.h-nums .ic { font-size: 1.2rem; }
.h-nums b { font-family: var(--font-d); font-size: 1.2rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.h-nums small { font-size: .74rem; color: var(--muted); font-weight: 700; }
.lvl { display: grid; gap: .35rem; margin-top: .7rem; }
.lvl-t { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--muted); }
.lvl-t b { color: var(--text); font-family: var(--font-d); }
.lvl.big .lvl-t { font-size: .9rem; }
.lvl-bar { height: .55rem; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.lvl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e8a51f, #ffe08a); box-shadow: 0 0 .8rem rgba(247, 201, 72, .8); transition: width .8s var(--ease); }
.h-modes { padding: 1.1rem; display: grid; gap: .8rem; }
.h-mode-list { display: grid; gap: .6rem; }
.h-mode { position: relative; display: flex; align-items: center; gap: .85rem; padding: .85rem .9rem; border-radius: 1.1rem; text-align: left; overflow: hidden; border: 2px solid transparent; transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; }
.h-mode.m-wheel { background: linear-gradient(135deg, #7a3fd0, #4a1f9a 60%, #2c1466); }
.h-mode.m-draw { background: linear-gradient(135deg, #1f9a7c, #16627a 55%, #12355e); }
.h-mode::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .22), transparent 45%); pointer-events: none; }
.h-mode:hover { transform: translateY(-3px); }
.h-mode.sel { border-color: var(--gold); box-shadow: 0 0 1.6rem -.2rem rgba(247, 201, 72, .7); }
.h-mode-art { display: block; flex-shrink: 0; }
.h-mode-art .mp-ic { display: block; width: 3.2rem; height: 3.2rem; }
.h-mode-t { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.h-mode-t b { font-family: var(--font-d); font-size: 1rem; color: #fff; }
.h-mode-t small { font-size: .78rem; color: rgba(255, 255, 255, .78); font-weight: 600; line-height: 1.3; }
.h-mode-go { flex-shrink: 0; padding: .35rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 800; color: #3b2300; background: linear-gradient(180deg, #fff3b9, #f2bd3a); box-shadow: 0 .15rem 0 #a4660a; }
.h-bonus { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-color: rgba(247, 201, 72, .55);
  background: radial-gradient(circle at 12% 50%, rgba(247, 201, 72, .3), transparent 40%), linear-gradient(120deg, rgba(150, 60, 200, .7), rgba(70, 30, 140, .8)); box-shadow: 0 0 2rem -.6rem rgba(247, 201, 72, .6); }
.h-chest { font-size: 2.6rem; filter: drop-shadow(0 0 .8rem rgba(247, 201, 72, .7)); animation: floaty 3s ease-in-out infinite; }
.h-bonus-t { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.h-bonus-t b { font-family: var(--font-d); font-size: 1rem; }
.h-bonus-t span { font-size: .82rem; color: var(--gold-hi); font-weight: 700; line-height: 1.3; }
.h-bonus .btn { flex-shrink: 0; }
.h-right .home-links { gap: .3rem 1.1rem; }

/* --- topbar on the home screen --- */
.h-pill { display: none; }
.lvl-chip { display: none; align-items: center; gap: .4rem; height: 2.75rem; padding: 0 1rem; border-radius: 999px; background: rgba(16, 10, 36, .6); border: 1px solid var(--line); font-family: var(--font-d); font-size: 1.05rem; }
.lvl-chip .star { color: var(--gold); font-size: 1.25rem; filter: drop-shadow(0 0 .4rem rgba(247, 201, 72, .8)); }
body[data-screen="home"] .lvl-chip { display: inline-flex; }
/* bottom menu (phones, tablets) */
.h-tabs { display: none; }

/* tablets and small laptops: no left column, the menu goes to the bottom */
@media (max-width: 1199px) {
  .home { grid-template-columns: minmax(0, 1fr) 21rem; }
  .h-side { display: none; }
  body[data-screen="home"] .h-tabs { display: grid; }
  #screen-home { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
.h-tabs { position: fixed; left: 50%; bottom: calc(.6rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; width: min(36rem, calc(100% - 1.2rem));
  grid-template-columns: repeat(5, 1fr); align-items: end; padding: .35rem; border-radius: 1.5rem; background: rgba(22, 14, 48, .92); border: 1px solid var(--line); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6); backdrop-filter: blur(14px); }
.h-tabs button { display: grid; justify-items: center; gap: .15rem; padding: .45rem .2rem; border-radius: 1.1rem; font-size: .72rem; font-weight: 800; color: var(--muted); }
.h-tabs button svg { width: 1.45rem; height: 1.45rem; stroke: none; }
.h-tabs button.sel { color: var(--gold); background: linear-gradient(180deg, rgba(247, 201, 72, .22), rgba(247, 201, 72, .05)); }
.h-tabs .h-tab-play { color: #3b2300; }
.h-tabs .h-tab-play svg { width: 3.2rem; height: 3.2rem; padding: .8rem .7rem .8rem .95rem; margin-top: -1.6rem; border-radius: 50%; background: linear-gradient(180deg, #fff3b9, #f2bd3a 50%, #e8a51f); border: 3px solid #160b30; box-shadow: 0 .3rem 0 #a4660a, 0 0 1.4rem rgba(247, 201, 72, .7); color: #3b2300; }
.h-tabs .h-tab-play span { color: var(--gold); }

/* phones: one column */
@media (max-width: 820px) {
  #screen-home { overflow-y: auto !important; padding-bottom: calc(6.2rem + env(safe-area-inset-bottom)); }
  .home { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  body[data-screen="home"] .brand { display: none; }
  body[data-screen="home"] .h-pill { display: flex; align-items: center; gap: .55rem; min-width: 0; max-width: 62%; padding: .25rem .9rem .25rem .25rem; border-radius: 999px; background: rgba(22, 14, 48, .75); border: 1px solid var(--line); text-align: left; }
  .h-pill .ava { --s: 2.5rem; }
  .h-pill-t { min-width: 0; flex: 1; display: grid; }
  .h-pill-t b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h-pill .lvl { margin-top: .1rem; gap: .15rem; }
  .h-pill .lvl-t { font-size: .64rem; gap: .5rem; }
  .h-pill .lvl-bar { height: .3rem; }
  body[data-screen="home"] .lvl-chip, #btn-full { display: none !important; }
  .h-logo { padding-top: 1.9rem; }
  .h-logo .h-crown { width: 3.2rem; }
  .h-logo .logo { font-size: 2.9rem; }
  .h-logo .logo-sub { font-size: .92rem; display: block; }
  .h-stage { height: 14.5rem; }
  .h-stage .greet-dog { width: 9.6rem; left: -.4rem; bottom: .4rem; }
  .h-guest { width: 3.6rem; height: 3.6rem; } .h-guest.g1 { width: 4rem; height: 4rem; } .h-guest.g3 { width: 3.2rem; height: 3.2rem; } .h-guest.g4, .h-guest.g5 { width: 2.7rem; height: 2.7rem; }
  .h-guest.g0 { left: 25%; bottom: 3.2rem; } .h-guest.g1 { left: 34%; bottom: 5rem; } .h-guest.g2 { left: 57%; bottom: 5rem; } .h-guest.g3 { left: 68%; bottom: 3.2rem; } .h-guest.g4 { left: 82%; bottom: 2.2rem; } .h-guest.g5 { left: 81%; bottom: 6.2rem; }
  .h-table { height: 4.6rem; left: 8%; right: 8%; }
  .h-mini-wheel { width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; top: -2rem; border-width: 3px; }
  .h-stage .bubble { left: 26%; right: 0; max-width: none; font-size: .84rem; padding: .55rem .8rem; }
  .h-cta { min-height: 4.4rem; padding-right: 1.2rem !important; }
  .h-play-ic { width: 2.6rem; height: 2.6rem; padding: .6rem .5rem .6rem .7rem; }
  .h-cta-t b { font-size: 1.2rem; }
  .h-family { padding: .9rem; }
  .h-fam-p { width: 4.4rem; }
  .h-fam-p .ava, .h-fam-p.add .plus { --s: 3.6rem; width: 3.6rem; height: 3.6rem; }
  .h-right .profile { padding: 1rem; }
  .h-mode-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .h-mode { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .8rem; }
  .h-mode-go { position: absolute; right: .6rem; top: .6rem; }
  .h-mode-t small { font-size: .72rem; }
}
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  #screen-home { overflow-y: auto !important; }
  .home { grid-template-columns: minmax(0, 1fr) 19rem; }
}
html.tv .h-tabs, html.tv .h-side { display: none !important; }

/* =========================================================
   Главная «уютная кухня»: вечер, тёплая лампа, деревянные полки, стол в клеточку.
   Only the home screen changes; the game keeps the TV studio.
   ========================================================= */
body[data-screen="home"] {
  --text: #fff6e6; --muted: rgba(255, 236, 210, .78); --dim: rgba(255, 236, 210, .55);
  --line: rgba(255, 196, 120, .3); --line-soft: rgba(255, 220, 170, .12);
  --panel: linear-gradient(180deg, rgba(110, 62, 34, .82), rgba(52, 28, 16, .92));
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255, 196, 110, .55), rgba(255, 160, 70, .12) 55%, transparent 75%),
    radial-gradient(circle at 1.2rem 1.2rem, rgba(255, 220, 160, .07) 0 .22rem, transparent .26rem) 0 0 / 2.4rem 2.4rem,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1.2rem, transparent 1.2rem 2.4rem),
    linear-gradient(180deg, #5a2f1a 0%, #3b1d10 55%, #24110a 100%);
  background-attachment: fixed;
}
body[data-screen="home"] #bg { opacity: 0; transition: opacity .6s; }
#bg { transition: opacity .6s; }
body[data-screen="home"] .card { border-color: var(--line); box-shadow: 0 1.4rem 3rem -1.4rem rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 230, 190, .18), inset 0 0 0 1px rgba(255, 200, 140, .04); }
body[data-screen="home"] .ib { background: linear-gradient(180deg, #8a4c2a, #5a2c16); border-color: rgba(255, 200, 120, .5); box-shadow: 0 .18rem 0 #2a1209, inset 0 1px 0 rgba(255, 230, 190, .3); }
body[data-screen="home"] .btn.navy { background: linear-gradient(180deg, #d0583a, #9a2f1c); border-color: rgba(255, 200, 150, .55); box-shadow: 0 .3rem 0 #5a1608, inset 0 1px 0 rgba(255, 255, 255, .25); }
body[data-screen="home"] .input { background: rgba(255, 246, 230, .1); border-color: rgba(255, 200, 120, .35); }
body[data-screen="home"] .input::placeholder { color: rgba(255, 236, 210, .45); }
body[data-screen="home"] .ava-tabs { background: rgba(30, 14, 6, .45); }
/* logo: an embroidered sign */
body[data-screen="home"] .h-logo .logo { filter: drop-shadow(0 4px 0 #7a3a10) drop-shadow(0 .5rem 0 rgba(40, 16, 6, .7)) drop-shadow(0 0 2.2rem rgba(255, 190, 90, .5)); }
/* the table: a gingham tablecloth with a samovar glow */
body[data-screen="home"] .h-table-top {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(200, 40, 40, .55) 0 .9rem, transparent .9rem 1.8rem),
    repeating-linear-gradient(0deg, rgba(200, 40, 40, .55) 0 .9rem, transparent .9rem 1.8rem),
    #f6e7cf;
  box-shadow: 0 0 0 3px #c9884a, 0 .6rem 0 #6a3a1a, 0 0 3rem rgba(255, 190, 90, .45), inset 0 -.8rem 1.5rem rgba(60, 20, 0, .35);
}
body[data-screen="home"] .h-table-top::before, body[data-screen="home"] .h-table-top::after { display: none; }
body[data-screen="home"] .h-glow { background: radial-gradient(ellipse, rgba(255, 180, 90, .55), rgba(255, 150, 60, .14) 45%, transparent 70%); }
body[data-screen="home"] .h-guest { box-shadow: 0 0 0 3px #f6e7cf, 0 0 0 5px #c9884a, 0 .8rem 1.4rem rgba(0, 0, 0, .55); }
/* Барбос — хозяин стола, крупнее */
body[data-screen="home"] .h-stage { height: 23rem; }
body[data-screen="home"] .h-stage .greet-dog { width: 17rem; left: -1rem; }
/* only what matters: no daily chest and no number tiles on the start screen */
body[data-screen="home"] #h-bonus, body[data-screen="home"] #h-stats { display: none; }
/* wooden shelf cards */
body[data-screen="home"] .h-mode.m-wheel { background: linear-gradient(135deg, #d0583a, #9a2f1c 60%, #5e1a0e); }
body[data-screen="home"] .h-mode.m-draw { background: linear-gradient(135deg, #5c9a5a, #2f6a3e 55%, #1c4228); }
body[data-screen="home"] .h-rec { background: radial-gradient(ellipse at 50% 0%, rgba(255, 200, 110, .3), transparent 60%), linear-gradient(180deg, rgba(140, 78, 40, .6), rgba(60, 30, 14, .75)); border-color: rgba(255, 200, 120, .4); }
body[data-screen="home"] .h-nav button:hover { background: rgba(255, 200, 140, .1); }
body[data-screen="home"] .h-tabs { background: rgba(48, 24, 12, .94); border-color: var(--line); }
body[data-screen="home"] .h-tabs .h-tab-play svg { border-color: #2a1209; }
body[data-screen="home"] .h-pill { background: rgba(48, 24, 12, .8); }
body[data-screen="home"] .h-fam-p .ava { box-shadow: 0 0 0 3px rgba(255, 200, 140, .55), 0 .5rem 1rem rgba(0, 0, 0, .5); }
body[data-screen="home"] .h-fam-p.add .plus { color: #ffd9a8; background: rgba(255, 200, 140, .1); border-color: rgba(255, 200, 140, .5); }
/* =========================================================
   Версия 7: игра на телефоне — «прайм-тайм»
   a studio with spotlights, glass panels, the drum never leaves the screen, big comfy keys
   ========================================================= */
body[data-screen="game"]::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    conic-gradient(from 160deg at 15% -5%, transparent 0 8deg, rgba(255, 220, 140, .13) 14deg, transparent 22deg 360deg),
    conic-gradient(from 178deg at 85% -5%, transparent 0 8deg, rgba(190, 160, 255, .13) 14deg, transparent 22deg 360deg),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(247, 201, 72, .2), transparent 70%);
  animation: beams 9s ease-in-out infinite alternate; }
@keyframes beams { to { opacity: .55; filter: hue-rotate(-12deg); } }
html.lite body[data-screen="game"]::before { animation: none; }
.gp.turn .ava { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(247, 201, 72, .25), 0 0 1rem rgba(247, 201, 72, .7); animation: turnring 1.6s ease-in-out infinite; }
@keyframes turnring { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px rgba(247, 201, 72, .1), 0 0 1.4rem rgba(247, 201, 72, .9); } }

@media (max-width: 820px) {
  /* glass panels with a gold hairline */
  body[data-screen="game"] .card { background: linear-gradient(180deg, rgba(64, 40, 130, .62), rgba(20, 12, 46, .82)); border-color: rgba(247, 201, 72, .22); }
  body.mode-wheel .g-head { background: linear-gradient(180deg, rgba(255, 248, 234, .12), rgba(255, 248, 234, .04)), linear-gradient(180deg, #3a2378, #21134a); border: 1px solid rgba(247, 201, 72, .45); box-shadow: 0 .6rem 1.4rem -.8rem rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
  .w-q { font-size: 1.04rem; font-weight: 800; line-height: 1.3; }
  .g-players { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
  .gp { background: rgba(20, 12, 46, .7); border: 1px solid rgba(255, 255, 255, .1); }
  .gp.turn { background: linear-gradient(100deg, rgba(247, 201, 72, .32), rgba(247, 201, 72, .08)); }
  .w-host-dog { width: 3.3rem; height: 3.3rem; }
  .w-bubble { box-shadow: 0 .6rem 1.2rem -.6rem rgba(0, 0, 0, .9), 0 0 0 2px rgba(247, 201, 72, .35); }
  .w-host-text { font-size: 1rem; font-weight: 700; }

  /* on your own turn the drum stays: big while you spin, a small one above the letters while you choose */
  .w-main.mine:not(.show-wheel) .w-wheel-col { display: grid !important; flex: 1 1 4.5rem; min-height: 4.5rem; max-height: 12rem; order: -1; margin-bottom: -.3rem; }
  .w-main.mine:not(.show-wheel) .w3-result { display: none; }
  .w-main.mine .w-panel { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: .2rem 0 0; gap: .45rem; flex: none; }
  .w-main.mine:not(.show-wheel) .w-coach { display: none !important; }
  .w-status { font-family: var(--font-d); font-size: 1rem; line-height: 1.25; }

  /* big comfy keys, no stretched gaps */
  .w-keys { grid-auto-rows: 2.9rem; align-content: end; gap: .34rem; flex: 0 0 auto !important; margin-top: auto; }
  .w-keys .key { min-height: 0; max-height: none; height: 100%; font-size: 1.35rem; border-radius: .8rem; box-shadow: 0 .25rem 0 #a99a72, inset 0 1px 0 #fff, 0 .4rem .8rem -.3rem rgba(0, 0, 0, .7); }
  .w-keys.on .key:not(:disabled) { box-shadow: 0 .25rem 0 #a99a72, inset 0 1px 0 #fff, 0 0 0 2px rgba(247, 201, 72, .85); }
  .key small { font-size: .5em; }
  .kword { height: 100%; max-height: none; min-height: 0; font-size: .74rem; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; padding: .15rem .25rem; }
  .w-actions .btn { height: 3.6rem; font-size: 1rem; white-space: normal; line-height: 1.1; }
  .w-actions .btn.gold { font-size: 1.02rem; white-space: nowrap; }

  /* those waiting: name + whose next, as a neat card under the drum */
  .w-main.spectate .w-spec { padding: .7rem .9rem; gap: .5rem; }
  .w-main.spectate .w-spec-top .ava { --s: 3rem; }
}

/* =========================================================
   Версия 7: окна, «Угадай рисунок», мелочи
   ========================================================= */
/* every window is part of the cosy evening: warm wood, honey light */
.modal { --text: #fff6e6; --muted: rgba(255, 236, 210, .78); --dim: rgba(255, 236, 210, .55); --line: rgba(255, 196, 120, .3); --line-soft: rgba(255, 220, 170, .12); background: rgba(24, 10, 4, .72); }
.modal-card { background: radial-gradient(ellipse at 50% 0%, rgba(255, 190, 100, .22), transparent 55%), linear-gradient(180deg, #5e3219, #2c1509); border-color: rgba(255, 200, 120, .4); }
.modal .seg, .modal .help-tabs, .modal .acc-tabs { background: rgba(30, 14, 6, .5); }
.modal .switch:not(.on) { background: rgba(255, 230, 200, .14); }
.modal .btn.navy { background: linear-gradient(180deg, #d0583a, #9a2f1c); border-color: rgba(255, 200, 150, .55); box-shadow: 0 .3rem 0 #5a1608, inset 0 1px 0 rgba(255, 255, 255, .25); }
.modal .ib { background: linear-gradient(180deg, #8a4c2a, #5a2c16); border-color: rgba(255, 200, 120, .5); box-shadow: 0 .18rem 0 #2a1209; }
.modal .input { background: rgba(255, 246, 230, .1); }
.modal .pref + .pref { border-color: rgba(255, 220, 170, .12); }

/* «Рейтинг / Награды / Я»: three tabs, one at a time */
.st-tabs { position: sticky; top: -1.4rem; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .3rem; margin-top: -.3rem; border-radius: 999px; background: #3a1c0c; border: 1px solid var(--line); }
.st-tabs button { height: 2.5rem; border-radius: 999px; font-weight: 800; font-size: .92rem; color: var(--muted); white-space: nowrap; }
.st-tabs button.sel { background: linear-gradient(180deg, #fff3b9, #f2bd3a); color: #3b2300; box-shadow: 0 .15rem 0 #a4660a; }
#stats-body { display: grid; gap: 1rem; }
#stats-body[data-tab] .st-sec { display: none; }
#stats-body[data-tab="fame"] [data-sec="fame"], #stats-body[data-tab="awards"] [data-sec="awards"], #stats-body[data-tab="me"] [data-sec="me"] { display: grid; animation: pop .35s var(--spring); }
#stats-body:not([data-tab="me"]) .st-reset { display: none; }
#stats-body .st-h { display: none; }
#stats-body [data-sec="awards"] .st-h { display: flex; }
#stats-body [data-sec="awards"] .st-h { font-size: 0; } /* the tab says it; only «N из 11» stays */
#stats-body [data-sec="awards"] .st-h span { font-size: .9rem; color: var(--gold); font-weight: 800; }
.st-tiles > div { background: rgba(30, 14, 6, .45); border-color: rgba(255, 220, 170, .14); }
.st-ach { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem; }
.sa { flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: .8rem .5rem .7rem; border-radius: var(--r-lg); background: radial-gradient(ellipse at 50% 0%, rgba(247, 201, 72, .3), transparent 70%), rgba(30, 14, 6, .5); border: 1px solid rgba(247, 201, 72, .55); }
.sa .aw-ic { font-size: 2rem; line-height: 1; filter: drop-shadow(0 0 .6rem rgba(247, 201, 72, .6)); }
.sa .aw-t { display: grid; gap: .15rem; }
.sa .aw-t b { font-size: .92rem; }
.sa .aw-t small { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.sa i { position: absolute; top: .4rem; right: .5rem; }
.sa.lock { opacity: 1; filter: none; border: 1px dashed rgba(255, 220, 170, .25); background: rgba(30, 14, 6, .35); }
.sa.lock .aw-ic { filter: grayscale(1) brightness(.7); opacity: .55; }
.sa.lock .aw-t b { color: var(--muted); }
.sa.lock::after { content: "🔒"; position: absolute; top: .35rem; right: .45rem; font-size: .8rem; opacity: .7; }
.st-empty { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 1.4rem .8rem; border-radius: var(--r-lg); border: 1px dashed var(--line); }
.st-empty::before { content: "🏆"; font-size: 3rem; filter: drop-shadow(0 0 1rem rgba(247, 201, 72, .6)); animation: floaty 3s ease-in-out infinite; }
.st-top li { background: rgba(30, 14, 6, .45); }

/* «Как играть»: nothing sticks out, tabs on one line, Барбос beside the board */
.help-foot { min-width: 0; }
.help-foot .btn { flex-shrink: 0; }
.help-foot .dots { flex: 1; min-width: 0; justify-content: center; flex-wrap: wrap; row-gap: .3rem; }
.help-foot .dots i { width: .5rem; height: .5rem; }
.help-foot .dots i.on { width: 1.1rem; }
.help-tabs button { white-space: nowrap; padding: .45rem .85rem; }
.hs-art { background: radial-gradient(ellipse at 50% 30%, #7a4a2a, #2a140a); border-color: var(--line); }
.hs-dog { right: .2rem; bottom: -1.4rem; width: 4.4rem; }
.hs-art:has(.hs-mini-board) { justify-items: start; padding-left: 1rem; }

/* «Настройки»: Барбос and the title side by side, the voice buttons across the whole width */
.voice-pref { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; row-gap: .4rem; align-items: center; }
.voice-pref .pref-l { display: contents; }
.voice-pref .prefs-dog { grid-row: 1 / span 2; width: 3.8rem; }
.voice-pref .pref-l > b, .voice-pref .pref-l > span:not(.pref-note) { grid-column: 2; }
.voice-pref .seg, .voice-pref .voice-load, .voice-pref .pref-note { grid-column: 1 / -1; }
.voice-pref .seg button { height: 2.6rem; font-size: .9rem; white-space: nowrap; }
.voice-pref .seg.speakers { flex-wrap: wrap; gap: .25rem; }
.voice-pref .seg.speakers button { flex: 1 1 40%; }

/* «Угадай рисунок»: choosing a word is a little show of its own */
.ov-pick .ov-dog { width: 7rem; margin-bottom: -.4rem; animation: pop .5s var(--spring); }
.ov-pick .ov-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.choice { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: linear-gradient(180deg, #fff8ea, #f3e2bd); color: #3a1a10; border: 2px solid #ffe08a; box-shadow: 0 .35rem 0 #b08a4a, 0 1rem 2rem -1rem rgba(0, 0, 0, .8); font-family: var(--font-d); }
.choice:hover { transform: translateY(-3px) rotate(-1deg); }
.choice-ic { font-size: 1.3em; }
.ov-count { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .9rem; border-radius: 99px; background: rgba(247, 201, 72, .16); border: 1px solid rgba(247, 201, 72, .5); color: var(--gold-hi); font-family: var(--font-d); font-size: 1rem; }
.ov-count:empty { display: none; }
.ov-boxes .ov-dog { width: 6rem; margin-bottom: -.6rem; }
@media (max-width: 820px) {
  /* the canvas gets the room, the chat gets what's left */
  body:not(.mode-wheel) .board-wrap { width: 100%; aspect-ratio: 4 / 3.4; }
  body:not(.mode-wheel) .g-chat { flex: 1 1 0; min-height: 7.5rem; }
  body:not(.mode-wheel) .chat-list { font-size: .9rem; }
  .ov-pick .ov-dog { width: 6rem; }
  .ov-boxes .ov-dog { width: 5rem; }
  /* the guests sit to the right of Барбос, none hides behind him */
  body[data-screen="home"] .h-guest.g0, body[data-screen="home"] .h-guest.g5 { display: none; }
  body[data-screen="home"] .h-guest.g1 { left: 56%; bottom: 6.6rem; }
  body[data-screen="home"] .h-guest.g2 { left: 76%; bottom: 6.2rem; }
  body[data-screen="home"] .h-guest.g3 { left: 82%; bottom: 2.6rem; }
  body[data-screen="home"] .h-guest.g4 { left: 64%; bottom: 3rem; }
  /* the bottom menu floats over a soft fade, so the page clearly goes on under it */
  body[data-screen="home"] .h-tabs::before { content: ""; position: absolute; left: -1rem; right: -1rem; bottom: 100%; height: 2.4rem; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(36, 17, 10, .85)); }
}
@media (min-width: 821px) {
  body[data-screen="home"] .h-guest.g0 { display: none; }
  body[data-screen="home"] .h-guest.g1 { left: 57%; bottom: 7rem; }
  body[data-screen="home"] .h-guest.g2 { left: 70%; bottom: 8rem; }
  body[data-screen="home"] .h-guest.g3 { left: 77%; bottom: 4rem; }
  body[data-screen="home"] .h-guest.g4 { left: 88%; bottom: 2.6rem; }
  body[data-screen="home"] .h-guest.g5 { left: 87%; bottom: 9.4rem; }
}

/* the final: a gala — slow golden rays behind the winner, a crown, medal-coloured steps */
#final { background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 200, 90, .32), transparent 70%), radial-gradient(ellipse at 50% 0%, rgba(130, 90, 235, .45), transparent 60%), rgba(12, 8, 30, .9); }
#final::before { content: ""; position: fixed; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 120, .16) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 55%); mask: radial-gradient(circle, #000 0, transparent 55%); animation: spin 60s linear infinite; }
html.lite #final::before { animation: none; }
.pd.p1 .ava { box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px rgba(247, 201, 72, .25), 0 0 2.4rem rgba(247, 201, 72, .8); }
.pd.p1 > .ava { position: relative; }
.pd.p1::after { content: "👑"; position: absolute; left: 50%; top: -1.9rem; transform: translateX(-50%) rotate(-8deg); font-size: 2rem; filter: drop-shadow(0 .3rem .4rem rgba(0, 0, 0, .5)); animation: crownbob 3.2s ease-in-out infinite; }
.pd.p1 .pd-block { background: linear-gradient(180deg, #fff3b9, #f2bd3a 45%, #c98a12); box-shadow: 0 0 2.4rem rgba(247, 201, 72, .5), inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -.6rem 1rem rgba(0, 0, 0, .15); }
.pd.p2 .pd-block { background: linear-gradient(180deg, #ffffff, #d9dbe6 50%, #9ea3b8); color: #3a3d55; }
.pd.p3 .pd-block { background: linear-gradient(180deg, #ffd9b0, #d88a4a 50%, #9a5520); color: #4a2208; }
.pd-score { font-size: 1.05rem; text-shadow: 0 0 .8rem rgba(247, 201, 72, .6); }
@media (max-width: 820px) {
  .pd .ava { --s: 3.8rem; } .pd.p1 .ava { --s: 5rem; }
  .pd-block { width: 6.8rem; }
  .final-title { margin-top: .6rem; }
}

/* lobby: Барбос waits with you */
.lobby-wait { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding: .9rem 1rem .9rem .4rem; border-radius: var(--r-lg); background: radial-gradient(ellipse at 15% 50%, rgba(247, 201, 72, .22), transparent 60%), rgba(16, 10, 36, .4); border: 1px dashed rgba(247, 201, 72, .4); animation: pop .5s var(--spring) backwards; }
.lobby-wait[hidden] { display: none; }
.lw-dog { width: 6.5rem; flex-shrink: 0; filter: drop-shadow(0 .6rem .8rem rgba(0, 0, 0, .5)); }
.lw-t { display: grid; gap: .3rem; }
.lw-t b { font-family: var(--font-d); font-size: 1.1rem; color: var(--gold); }
.lw-t span { font-size: .92rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 820px) {
  .studio { display: flex; flex-direction: column; }
  .lobby-wait { flex: none; margin: .6rem 0 .2rem; }
  .ticket { background: radial-gradient(ellipse at 50% 0%, rgba(247, 201, 72, .25), transparent 70%), rgba(16, 10, 36, .4); }
}

/* quick name window */
.namem { background: radial-gradient(ellipse at 50% 0%, rgba(255, 190, 100, .3), transparent 60%), linear-gradient(180deg, #6a3a1e, #2e160a); border-color: rgba(255, 200, 120, .45); }
.nm-me { display: flex; align-items: center; gap: .9rem; }
.nm-me .ava { --s: 4.4rem; flex-shrink: 0; box-shadow: 0 0 0 3px var(--gold), 0 0 1.4rem rgba(247, 201, 72, .5); }
.nm-me .input { height: 3.8rem; font-size: 1.25rem; background: rgba(255, 246, 230, .1); }
.nm-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.nm-pick .ava-opt { width: 100%; height: auto; }
#nm-go { width: 100%; }
@media (max-width: 820px) {
  #m-name { place-items: end center; padding: 0; }
  #m-name .modal-card { border-radius: 1.6rem 1.6rem 0 0; padding-bottom: calc(1.4rem + env(safe-area-inset-bottom)); animation: sheetup .4s var(--ease); }
}
@keyframes sheetup { from { transform: translateY(100%); } }

/* «Наша семья»: share right in the header, big faces, a clear «это я» */
.h-fam-share { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 99px; font: 800 .8rem var(--font); color: #3b2300; background: linear-gradient(180deg, #fff3b9, #f2bd3a); box-shadow: 0 .15rem 0 #a4660a; }
.h-fam-share svg { width: 1rem; height: 1rem; stroke: currentColor; }
#h-family .h-card-link { margin-left: auto; }
.h-fam-p { position: relative; }
.h-fam-badge { position: absolute; top: 3.6rem; left: 50%; transform: translateX(-50%); z-index: 1; padding: .05rem .45rem; border-radius: 99px; font: 800 .62rem var(--font); font-style: normal; color: #3b2300; background: var(--gold); white-space: nowrap; box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .5); }
.h-fam-switch { font-size: .85rem; padding: 0; justify-self: start; }
#h-family.picking { box-shadow: 0 0 0 2px var(--gold), 0 0 2.2rem -.4rem rgba(247, 201, 72, .7); }
#h-family.picking .h-fam-p:not(.add) .ava { animation: guest 2.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.4s); }
.h-fam-invite { display: flex; align-items: center; gap: 1rem; }
.h-fam-crowd { display: flex; flex-shrink: 0; padding-left: .6rem; }
.h-fam-face { width: 2.9rem; height: 2.9rem; margin-left: -.7rem; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #f6e7cf, 0 .4rem .8rem rgba(0, 0, 0, .45); animation: guest 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.h-fam-face svg { width: 100%; height: 100%; display: block; stroke: none; }
#h-family { min-width: 0; max-width: 100%; }
/* the big button never pushes the page sideways, whatever game is chosen */
.h-cta { max-width: 100%; min-width: 0; white-space: normal; }
.h-cta-t { min-width: 0; }
.h-cta-t small { white-space: normal; line-height: 1.25; }
#h-family .acc-btns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; }
#h-family .acc-btns .btn { height: 3.1rem; min-width: 0; padding: 0 .6rem; }
.h-fam-invite { min-width: 0; }
.h-fam-invite .h-fam-text { min-width: 0; }

@media (max-width: 820px) {
  /* phones: the family comes right under the table, before the big button — first «who plays», then «play» */
  .h-main { display: flex; }
  .h-family.has-fam { order: 3; }
  .h-play { order: 4; }
  .h-family:not(.has-fam) { order: 5; }
  .h-fam-p .ava, .h-fam-p.add .plus { --s: 4.2rem; width: 4.2rem; height: 4.2rem; }
  .h-fam-p { width: 5rem; }
  .h-fam-badge { top: 3.4rem; }
  #h-family .h-card-h { flex-wrap: wrap; row-gap: .4rem; }
  body[data-screen="home"] .h-stage { height: 17rem; }
  body[data-screen="home"] .h-stage .greet-dog { width: 12rem; left: -.8rem; }
  body[data-screen="home"] .h-stage .bubble { left: 34%; }
}