/* =========================================================
   Посиделки — «Вечернее ТВ-шоу»
   Layout: stage background → topbar → screens (home / lobby / game) → layers (final, modals, reconnect)
   ========================================================= */
:root {
  --ink: #140806; --night: #1d0b0a; --navy: #3a1414; --royal: #5a1a1a; --blue: #9a2b25; --sky: #f0c48a;
  --gold: #f7c948; --gold-hi: #fff1b8; --gold-lo: #c98a12; --amber: #e9a320;
  --cream: #fff8ea; --paper: #f3ead3; --red: #e5394d; --rose: #ff7a90; --green: #2fd18b; --teal: #3aa68a;
  --text: #fff3e2; --muted: rgba(255, 236, 214, .74); --dim: rgba(255, 236, 214, .5);
  --line: rgba(247, 201, 72, .34); --line-soft: rgba(255, 255, 255, .1);
  --panel: linear-gradient(180deg, rgba(92, 34, 26, .66), rgba(32, 12, 10, .86));
  --panel-solid: linear-gradient(180deg, #5b2119, #2a0f0c);
  --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%, #7a2a20 0%, transparent 60%), linear-gradient(90deg, #4a0b1c 0 6%, transparent 14% 86%, #4a0b1c 94%), #1d0b0a; }
#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, #8e3a26, #5c1d16); color: var(--cream); border: 1px solid rgba(247, 201, 72, .5); box-shadow: 0 .3rem 0 #2e0d0a, 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(140, 50, 32, .85), rgba(60, 20, 14, .9)); border: 1px solid rgba(247, 201, 72, .45);
  box-shadow: 0 .18rem 0 #240c09, 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(26, 9, 6, .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(255, 236, 214, .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(26, 9, 6, .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%, #7c2b21, #3a1414); 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(26, 9, 6, .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(90, 10, 30, .75), rgba(40, 6, 20, .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(34, 12, 9, .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%, #9a2b25 0 37.5%, #3aa68a 0 50%, #e5394d 0 62.5%, #f7c948 0 75%, #9a2b25 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: #5a1a1a; 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(26, 9, 6, .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(26, 9, 6, .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: .45rem; 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(240, 196, 138, .1); border: 1px solid rgba(240, 196, 138, .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(26, 9, 6, .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(26, 9, 6, .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: #7a6658; 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(180, 70, 40, .35), transparent 60%), rgba(26, 9, 6, .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%;
  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%, #8a2f22, #3a1414 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: .9rem .8rem; border-radius: var(--r-lg); background: linear-gradient(180deg, #2a0d0a, #160705); border: 2px 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, #a8342c 0%, #6e1c19 55%, #4a1210 100%); border: 2px solid rgba(247, 201, 72, .6);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), inset 0 -.4rem .8rem rgba(0, 0, 0, .35), 0 .35rem .8rem -.3rem rgba(0, 0, 0, .8);
  color: rgba(255, 255, 255, .22); font-family: var(--font-d); font-weight: 700; font-size: calc(var(--tw) * .28); transition: transform .3s var(--spring);
}
.tile.open { background: linear-gradient(180deg, #ffffff, #efe6cf); border-color: #fff4cf; color: #3a1414; font-size: calc(var(--tw) * .58); font-weight: 900;
  box-shadow: 0 0 1.4rem -.2rem rgba(255, 233, 160, .7), inset 0 -.25rem .5rem rgba(0, 0, 0, .1); }
.tile.flip { animation: tileflip .9s var(--spring) both; }
@keyframes tileflip { 0% { transform: rotateY(90deg) scale(1.15); background: #a8342c; } 60% { box-shadow: 0 0 2.5rem 0 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 at 50% 85%, rgba(255, 255, 255, .26), transparent 42%), radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 100%); }
.w3-bulbs { position: absolute; inset: 0; transform: translateZ(2px); pointer-events: none; }
.w3-bulbs i { position: absolute; width: 2.4%; height: 2.4%; margin: -1.2%; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 6px #ffd76a, 0 0 14px rgba(255, 190, 70, .9); animation: bulb3 1s steps(1) infinite; }
@keyframes bulb3 { 0%, 49% { background: #fff3c4; box-shadow: 0 0 6px #ffd76a, 0 0 14px rgba(255, 190, 70, .9); } 50%, 100% { background: #7a5a1e; box-shadow: none; } }
.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%, #8a2f22, #3a1414); 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)); transform-origin: 50% 10%; }
.w3-pointer svg { width: 100%; height: auto; stroke: none; display: block; }
.w3-pointer.tick { animation: ptick .14s ease-out; }
@keyframes ptick { 40% { transform: translateX(-50%) rotate(14deg); } }
.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, #a8342c, #6e1c19); 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, #8a3324, #5a1c15); color: #fff; font: 800 .95rem/1.1 var(--font-d); letter-spacing: .01em; box-shadow: 0 .22rem 0 #2e0e0a, 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 #2e0e0a; }
.key.hit { background: linear-gradient(180deg, #5ef0a8, #1fae6c); color: #063b22; box-shadow: 0 .22rem 0 #0f6b40; }
.key.miss { background: #2b1630; color: #ff8a9a; box-shadow: none; text-decoration: line-through; opacity: .7; }
.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: #160705; 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, #a8342c, #6e1c19); }
.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); }

/* =========================================================
   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(190, 80, 45, .45), transparent 60%), rgba(22, 8, 5, .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, #fff3e2, #d8b99a); border-color: #fff; color: #5a1a1a; } .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(20, 7, 4, .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, #5a2018, #241009); 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(26, 9, 6, .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%, #7f2c22, #230c08); 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, #a8342c, #4a1210); 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: #3a1414; }
.hs-mini-board i.o { background: linear-gradient(180deg, #fff, #efe6cf); }
.hs-mini-wheel { width: 9rem; height: 9rem; border-radius: 50%; background: conic-gradient(#a8342c 0 8.33%, #e5394d 0 16.66%, #3aa68a 0 25%, #ffb03b 0 33.33%, #050507 0 41.66%, #a8342c 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(22, 8, 5, .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; } }
.dog .d-tail { transform-origin: 74px 220px; 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(18deg); }
@keyframes wag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
.dog .d-head { transform-origin: 110px 176px; animation: bob 3.4s ease-in-out infinite; }
.dog[data-mood="happy"] .d-head { animation: hop .5s ease-in-out infinite; }
.dog[data-mood="sad"] .d-head { animation: none; transform: rotate(-6deg) translateY(4px); }
.dog[data-mood="wow"] .d-head { animation: none; transform: translateY(-4px) scale(1.03); }
@keyframes bob { 50% { transform: rotate(3deg); } }
@keyframes hop { 50% { transform: translateY(-5px) rotate(-3deg); } }
.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 .36s 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(-1.5deg); } to { transform: rotate(2deg) translateY(1.5px); } }
@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: -8deg; }
.dog[data-act="nod"] .d-head { translate: 0 3px; }
.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: 6deg; translate: 0 3px; }
.dog[data-act="droop"] .d-ear-l { rotate: 12deg; } .dog[data-act="droop"] .d-ear-r { rotate: -12deg; }
.dog[data-act="dance"] { animation: dance .5s ease-in-out infinite; }
@keyframes shock { 30% { transform: translateY(-7%) scale(1.06); } }
@keyframes dance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3%); } }

/* =========================================================
   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; left: .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(26, 9, 6, .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%, #9a2b25 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, #5a2018, #241009); 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: #5a2018; }
  .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(34, 12, 9, .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; }
  .w-main.spectate .w-wheel-col, .w-main.spectate .w-panel { display: none !important; }
  .w-main.spectate .w-spec { display: flex; flex: 1; min-height: 0; }
  .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(26, 9, 6, .45); border: 1px solid var(--line); }
  .set-ic { width: 2rem; height: 2rem; border-radius: 50%; background: conic-gradient(#e5394d 0 25%, #f7c948 0 50%, #9a2b25 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: none; }
  .w-main.spectate .w-spec { display: flex; }
  .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(240, 196, 138, .08); border: 1px solid rgba(240, 196, 138, .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(240, 196, 138, .1); border: 1px solid rgba(240, 196, 138, .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(26, 9, 6, .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%, #8a2f22, #230c08); 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, #5b2119, #2a0f0c); }
.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; }

/* 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, #5c3520, #3a1f10 60%, #2a150a); }

/* 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) {
  .w-main.spectate.spin-show .w-spec { display: none !important; }
  .w-main.spectate.spin-show .w-wheel-col { display: grid !important; flex: 1; min-height: 11rem; animation: wheelin .5s var(--spring) both; }
  .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%, #6a2418 0%, transparent 60%), linear-gradient(90deg, #4a0b1c 0 6%, transparent 14% 86%, #4a0b1c 94%), #1d0b0a; }
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, #4a1c15, #22100b); }
html.lite .w-board-wrap::before, html.lite .w-board-wrap::after, html.lite .marquee .bulb { animation: none; }