/*
 * Maskaroo: vizuál inšpirovaný risografom (tlač doujinshi a zinov).
 * Dve tlačové farby, ružová a modrá, sa prekrývajú cez multiply ako pri posunutom sútlači.
 *
 * Rozloženie: horná lišta / plocha s avatarmi (+ panel nastavení vpravo) / spodná lišta.
 * Na mobile je panel nastavení vysúvací list zdola.
 */
:root {
  /* R-117: bezpečné oblasti telefónu (výrez, ostrov, domovská lišta); appka ide až k okrajom, lišty sa odsadia */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sb-scrim: rgba(28, 36, 82, 0.5);
  --paper: #ecebf2;
  --paper-2: #e1dfeb;
  --ink: #1c2452;
  --ink-soft: #4f5680;
  --pink: #ff48b0;
  --blue: #0078bf;
  --yellow: #ffe800;
  --on-accent: #1c2452;
  --blend: multiply;
  --radius-pill: 999px;
  --display: "Anybody", "Arial Black", system-ui, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tile: clamp(84px, 19vmin, 170px);
  --drawer-w: 420px;
  --lvl: 0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-scrim: transparent;
    --paper: #17162b;
    --paper-2: #211f3a;
    --ink: #ecebf2;
    --ink-soft: #a9abc9;
    --pink: #ff5cba;
    --blue: #2f9be6;
    --blend: screen;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sb-scrim: transparent;
  --paper: #17162b;
  --paper-2: #211f3a;
  --ink: #ecebf2;
  --ink-soft: #a9abc9;
  --pink: #ff5cba;
  --blue: #2f9be6;
  --blend: screen;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* posuvníky v štýle appky (nie predvolené prehliadača): tenká zaoblená „pilulka“ farby textu,
   pri prejdení výraznejšia, pri ťahaní ružová; dráha je priehľadná. Chrome, Edge a Safari
   cez ::-webkit-scrollbar, Firefox cez scrollbar-width / scrollbar-color (vie len farby). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 40px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 30%, transparent) padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 55%, transparent) padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--pink) padding-box; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; }
}
[hidden] { display: none !important; }
/* v miestnosti nie: originálny hlas a nahrávka by išli ostatným */
body.in-room .lab-only { display: none !important; }

html, body { height: 100%; }
/* R-086: dvojité ťuknutie nepribližuje stránku (iPhone); priblíženie dvoma prstami ostáva */
html, body, a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }
/* iPhone priblíži stránku pri ťuknutí do poľa s písmom menším ako 16 px */
@media (hover: none) and (pointer: coarse) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em); }
}
body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

button, select, input { font: inherit; color: inherit; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.hint { color: var(--ink-soft); }
.small { font-size: 0.82rem; line-height: 1.4; }

/* ---------- rozloženie aplikácie ---------- */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top top"
    "stage drawer"
    "dock dock";
}

/* ---------- horná lišta ---------- */
/* R-117: na celú obrazovku (PWA s black-translucent, telefón naležato): lišta ide pod stavový riadok a výrez,
   obsah odsadí priehľadný rámik veľký ako bezpečná oblasť (podklad lišty je aj pod ním) */
.topbar {
  border-top: var(--sat) solid transparent;
  border-left: var(--sal) solid transparent;
  border-right: var(--sar) solid transparent;
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 0.4rem 1.25rem;
  min-height: 52px;
  padding: 0.5rem 1.1rem;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.brand {
  position: relative;
  flex: none;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 880;
  font-variation-settings: "wdth" 120;
  line-height: 1;
  color: var(--pink);
}
.brand::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--blue);
  mix-blend-mode: var(--blend);
  transform: translate(2px, 1.5px);
  pointer-events: none;
}
/* čas v miestnosti: len číslo, bez rámika a ikony (R-049) */
.session {
  display: inline-flex;
  flex: none;
  align-items: center;
  font-family: var(--display);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  line-height: 1.2;
}
.status { margin-left: auto; color: var(--ink-soft); font-size: 0.85rem; text-align: right; }
.status:empty { display: none; }

/* horná lišta (R-052): vľavo logo | názov miestnosti a pod ním stav; vpravo Invite a ⋯ */
.tb-sep { flex: none; width: 2px; height: 30px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.room-head { display: grid; gap: 0.05rem; min-width: 0; }
.room-title { margin: 0; min-width: 0; overflow: hidden; font-family: var(--display); font-size: 1.15rem; font-weight: 860; font-variation-settings: "wdth" 108; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.room-title.is-hidden .code-text { color: var(--ink-soft); letter-spacing: 0.1em; }
/* oko hneď za názvom: skryť / ukázať názov miestnosti; ikona ukazuje stav (oko = vidno, prečiarknuté = skrytý) */
.room-name-row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.btn-hide-name { cursor: pointer; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); }
.btn-hide-name:hover { background: var(--paper-2); color: var(--ink); }
.btn-hide-name[aria-pressed="true"] { color: var(--ink); }
.btn-hide-name svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-hide-name[aria-pressed="false"] svg use:last-child,
.btn-hide-name[aria-pressed="true"] svg use:first-child { display: none; }
.room-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.9rem; margin: 0; color: var(--ink-soft); font-size: 0.8rem; font-weight: 500; }
.rs-item { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.rs-item[hidden] { display: none; }
.rs-item svg { width: 15px; height: 15px; }
.room-status .session { font-family: var(--text); font-size: 0.8rem; font-weight: 500; }
.room-status .live-chip { padding: 0 0.45rem 0 0.35rem; font-size: 0.7rem; border-width: 1.5px; }
.tb-actions { display: flex; flex: none; gap: 0.5rem; margin-left: auto; }
.tb-actions[hidden] { display: none; }
.status:not(:empty) + .tb-actions { margin-left: 0.4rem; }
.btn-invite {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 1rem 0 0.85rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--pink);
  transition: transform 80ms ease;
}
.btn-invite svg { width: 20px; height: 20px; }
.btn-invite:active { transform: translate(1px, 1px); }
.btn-more {
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.btn-more:hover { box-shadow: 3px 3px 0 var(--pink); }
.btn-more[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.btn-more svg { width: 20px; height: 20px; }
/* ponuka miestnosti (R-087): domček a „Room“ namiesto troch bodiek */
.btn-room { display: inline-flex; gap: 0.35rem; width: auto; padding: 0 0.7rem 0 0.75rem; border-radius: var(--radius-pill); font: inherit; font-weight: 600; }
.btn-room .btn-room-chev { width: 16px; height: 16px; transition: transform 120ms ease; }
.btn-room[aria-expanded="true"] .btn-room-chev { transform: rotate(180deg); }
/* vpravo hore: obchod a Settings (avatar vpravo hore už nie je, R-087) */
.tb-tools { display: flex; flex: none; gap: 0.5rem; margin-left: auto; }
.status:not(:empty) ~ .tb-tools { margin-left: 0; }
.tb-actions:not([hidden]) + .tb-tools { margin-left: -0.75rem; }

/* ---------- plocha s avatarmi ---------- */
.stage-wrap {
  grid-area: stage;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  background-color: var(--paper);
  background-image: radial-gradient(color-mix(in srgb, var(--pink) 30%, transparent) 1.2px, transparent 1.6px);
  background-size: 18px 18px;
}
.stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem);
  max-width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Party room (R-075): hra hore na ploche */
.game-bar {
  display: flex;
  flex-wrap: wrap; /* veľa tlačidiel (Invite, Start, Change game, Manual): idú do druhého riadka, text ostane čitateľný */
  align-items: center;
  gap: 0.75rem;
  width: min(40rem, 100%);
  box-sizing: border-box;
  padding: 0.55rem 0.65rem 0.55rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--game, var(--pink));
  margin-bottom: 0.6rem; /* haló avatarov pod pásom */
}
.game-bar[hidden] { display: none; }
.game-bar-art { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 2px solid var(--ink); border-radius: 12px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.game-bar-art svg { width: 82%; height: 82%; }
.game-bar-text { display: grid; flex: 1 1 15rem; gap: 0.1rem; min-width: 0; }
.game-bar-text b { font-family: var(--display); font-size: 1.05rem; font-weight: 840; font-variation-settings: "wdth" 106; line-height: 1.2; }
.game-bar-text small { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }
.game-bar-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; max-width: 100%; margin-left: auto; }
.game-bar-actions:not(:has(button:not([hidden]))) { display: none; }
.game-change { flex: none; }
.game-change[hidden], .game-invite[hidden] { display: none; }
@media (max-width: 640px) {
  .game-bar { flex-wrap: wrap; gap: 0.5rem 0.65rem; }
  .game-bar-art { width: 2.8rem; height: 2.8rem; }
  .game-bar-text { flex-basis: calc(100% - 3.6rem); }
  .game-bar-text small { display: none; }
  .game-bar.has-note .game-bar-text small { display: block; }
  .game-bar-actions { margin-left: auto; }
  .game-change { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
}

.stage-hint {
  max-width: 42ch;
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: center;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: calc(var(--tile) + 4.5rem);
  text-align: center;
}
.avatar {
  position: relative;
  width: var(--tile);
  aspect-ratio: 1;
  margin-bottom: 0.55rem;
}
.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 6px solid var(--av, var(--pink));
  mix-blend-mode: var(--blend);
  pointer-events: none;
}
/* Haló sa hýbe s hlasom: --lvl (0–1) nastavuje JS každý snímok.
   Tvoja dlaždica berie --lvl z :root, ostatní ho majú priamo na svojej dlaždici. */
.avatar::before,
.avatar::after {
  opacity: calc(0.18 + var(--lvl, 0) * 0.82);
  transform: scale(calc(1 + var(--lvl, 0) * 0.17));
}
/* modrý kruh sa pri hlasitejšej reči viac „rozostrí“ ako pri posunutom sútlači */
.avatar::after {
  border-color: var(--blue);
  translate: calc(3px + var(--lvl, 0) * 5px) calc(2px + var(--lvl, 0) * 4px);
}
/* avatar (avatars.js): farebný kruh (--av) a na ňom iniciála alebo nálepková postavička */
.avatar-art {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--av, var(--pink));
  container-type: inline-size;
  box-shadow: 0 0 0 calc(var(--lvl, 0) * var(--tile) * 0.11) color-mix(in srgb, var(--av, var(--pink)) 30%, transparent);
}
/* iniciála: biele písmeno s tmavým obrysom a posunutým tieňom (ako riso tlač) */
.av-initial {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--display);
  font-size: 2rem;
  font-size: 50cqi;
  font-weight: 900;
  font-variation-settings: "wdth" 120;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.035em #1c2452;
  text-shadow: 0.055em 0.055em 0 #1c2452;
  user-select: none;
}
/* nálepka: mierne natočená, trčí cez okraj kruhu, s bielym výsekom a tieňom */
.av-sticker {
  position: absolute;
  left: -5%;
  top: -11%;
  width: 110%;
  height: 110%;
  overflow: visible;
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 2px 2px rgba(28, 36, 82, 0.35));
}
.av-svg {
  display: block;
  color: #1c2452; /* obrys je tmavý aj v tmavom režime (nálepka je biela) */
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.av-die * { fill: #fff !important; stroke: #fff !important; stroke-width: 9px !important; opacity: 1 !important; }

/* nálepky (avatars.js): rovnaký obrys ako avatary, vlastné farby */
.st-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #1c2452;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-svg .r { fill: #f15060; }
.st-svg .y { fill: #ffe800; }
.st-svg .o { fill: #ff6c2f; }
.st-svg .b { fill: #5ec8e5; }
.st-svg .p { fill: #ff48b0; }
.st-svg .pl { fill: #ffb3d9; }
.st-svg .g { fill: #00a95c; }
.st-svg .pu { fill: #9b7fd1; }
.st-svg .cr { fill: #f3dfc1; }
.st-svg .no { fill: #1f4d3a; }
.st-svg .w { fill: #fbfaff; }
.st-svg .k { fill: currentColor; stroke: none; }
.st-svg .n { fill: none; }
.st-svg .tx { font-family: var(--display); font-weight: 900; stroke-width: 4; paint-order: stroke; }

/* nálepka vyskočí nad avatarom, chvíľu ostane a odletí */
.sticker-pop {
  position: absolute;
  right: calc(-14% - var(--i, 0) * 12%);
  top: calc(-22% + var(--i, 0) * 10%);
  z-index: 3;
  width: 58%;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--ink) 25%, transparent));
  animation: sticker-pop 2.6s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes sticker-pop {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  12% { transform: scale(1.15) rotate(8deg); opacity: 1; }
  22% { transform: scale(1) rotate(-4deg); }
  80% { transform: translateY(-6%) rotate(3deg); opacity: 1; }
  100% { transform: translateY(-40%) scale(0.85) rotate(10deg); opacity: 0; }
}
.audience-list .sticker-pop { width: 80%; }

/* hovoríš, ale nepočujú ťa: pruh nad spodnou lištou */
.mic-notice {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--sab));
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(44rem, calc(100vw - 1.5rem));
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border: 2px solid var(--on-accent);
  border-radius: 14px;
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 4px 4px 0 var(--pink);
  transform: translateX(-50%);
  animation: notice-in 220ms ease-out;
}
.mic-notice > svg { flex: none; width: 22px; height: 22px; }
.mic-notice > svg use + use { display: inline; }
.mic-notice span { flex: 1 1 12rem; font-size: 0.92rem; line-height: 1.35; }
.mic-notice { flex-wrap: wrap; }
.mic-notice-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem 0.6rem; margin-left: auto; }
.mic-notice-actions .btn-secondary[hidden] { display: none; }
.mic-notice-ok { padding: 0.4rem 0.9rem; }
/* slabé pripojenie (R-096): tmavá pilulka hore pod lištou ako vo WhatsAppe; nič neblokuje, zmizne sama */
.net-notice {
  position: fixed;
  top: calc(74px + var(--sat));
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.45rem 1rem 0.45rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--pink);
  transform: translateX(-50%);
  pointer-events: none;
  animation: net-in 240ms ease-out;
}
.net-notice[hidden] { display: none; }
.net-notice svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; }
.net-notice p { margin: 0; font-size: 0.92rem; line-height: 1.3; }
.net-notice b { font-family: var(--display); font-weight: 820; }
.net-notice span { opacity: 0.85; }
@keyframes net-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .net-notice { animation: none; } }
@media (max-width: 640px) {
  .net-notice { top: calc(62px + var(--sat)); padding: 0.4rem 0.85rem 0.4rem 0.65rem; }
  .net-notice p { font-size: 0.86rem; }
}
/* Don't show again (R-084): tichý odkaz, na žltom vždy tmavý */
.mic-notice-never, .toast-never { padding: 0.2rem 0; border: 0; background: none; color: var(--on-accent); font: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.toast-never { margin-left: 0.25rem; }
.mic-notice .btn-secondary { flex: none; background: #fff; color: var(--on-accent); }
/* na žltom pruhu je tlačidlo vždy svetlé (aj v tmavom režime), aj pri prejdení myšou */
.mic-notice .btn-secondary:hover:not(:disabled),
.unlock .btn-secondary:hover:not(:disabled) { background: #fff3fa; color: var(--on-accent); box-shadow: 3px 3px 0 var(--pink); }
/* hláška (toast) nad pruhom, nech sa neprekrývajú */
body.has-mic-notice .toast { bottom: var(--notice-top, 168px); }
@keyframes notice-in { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* nastavenia OBS overlay (Devices) */
.ovl-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.4rem 0 0.7rem; }
.ovl-link { display: flex; gap: 0.5rem; }
.ovl-link .text-input { flex: 1; min-width: 0; font-size: 0.85rem; }
.ovl-link .btn-secondary { flex: none; }

/* LIVE: miestnosť ide cez OBS overlay do streamu (vidia všetci) */
.live-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem;
  border: 2px solid var(--on-accent);
  border-radius: var(--radius-pill);
  background: #f15060;
  color: #fff;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 860;
  letter-spacing: 0.06em;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }
/* TV: miestnosť je na televízore (Cast, R-074); kým sa TV nepripojí, je značka obrysová */
.cast-chip { background: var(--blue); }
.cast-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cast-chip.is-waiting { background: var(--paper); color: var(--ink); border-color: var(--ink); border-style: dashed; }
.cast-chip[hidden] { display: none; }
/* R-096: čip je tlačidlo (otvorí Cast) */
button.cast-chip { margin: 0; line-height: inherit; cursor: pointer; }
button.cast-chip:hover { box-shadow: 2px 2px 0 var(--ink); }
button.cast-chip:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* výber nálepiek nad spodnou lištou */
.sticker-tray {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--sab));
  z-index: 45;
  display: grid;
  gap: 0.6rem;
  width: min(23rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--pink);
  transform: translateX(-50%);
}
.sticker-tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-family: var(--display); }
.sticker-tray-head .hint { font-family: var(--text); }
.sticker-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; }
.sticker-pick,
.pack-sticker {
  cursor: pointer;
  aspect-ratio: 1;
  padding: 0.3rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  transition: transform 100ms ease, background-color 100ms ease;
}
.sticker-pick:hover, .sticker-pick:focus-visible { background: var(--paper-2); transform: scale(1.12); }
.sticker-tray .link-btn { justify-self: start; font-size: 0.88rem; }
/* rýchly výber hlasu (R-092): nad lištou ako výber reakcií */
.voice-pop {
  position: fixed;
  left: 50%;
  bottom: calc(88px + var(--sab));
  z-index: 45;
  display: grid;
  gap: 0.6rem;
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--blue);
  transform: translateX(-50%);
}
.voice-pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.voice-pop-btn { cursor: pointer; display: grid; align-content: start; gap: 0.1rem; min-width: 0; padding: 0.45rem 0.55rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.voice-pop-btn b { overflow: hidden; font-family: var(--display); font-size: 0.95rem; font-weight: 820; font-variation-settings: "wdth" 106; text-overflow: ellipsis; white-space: nowrap; }
.voice-pop-btn small { overflow: hidden; color: var(--ink-soft); font-size: 0.74rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.voice-pop-btn:hover { background: var(--paper-2); }
.voice-pop-btn[aria-pressed="true"], .voice-pop-btn[aria-pressed="true"]:hover { border-color: var(--on-accent); background: var(--pink); color: var(--on-accent); box-shadow: 2px 2px 0 var(--blue); }
.voice-pop-btn[aria-pressed="true"] small { color: var(--on-accent); }
/* R-107: Natural | Exact v rýchlom výbere */
.voice-pop-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; }
.voice-pop-mode .seg { flex: none; }
.voice-pop-mode .hint { margin: 0; }
.voice-pop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; }
.voice-pop-foot .btn-secondary { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.voice-pop-foot .link-btn { font-size: 0.86rem; }
@media (max-width: 440px) {
  .voice-pop { bottom: calc(76px + var(--sab)); }
  .voice-pop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* vzhľad plochy (R-071): pozadie témy je vrstva pod plochou, rámček vrstva nad ňou (kreslí scene.js) */
.scene-layer { grid-area: stage; position: relative; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-frame-layer { grid-area: stage; position: relative; z-index: 5; overflow: hidden; pointer-events: none; }
.stage-wrap { z-index: 1; }
body.has-scene .stage-wrap { background: transparent; }
body.has-frame .stage-wrap { padding: 2.6rem 2.2rem; }
/* mená a značky čitateľné na každom pozadí témy */
body.has-scene .tile-name,
body.has-scene .tile-meta,
body.has-scene .audience-title { padding: 0.05rem 0.55rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper) 86%, transparent); }
body.has-scene .tile-meta { padding: 0.1rem 0.5rem; }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.6rem; }
.scene-opt {
  cursor: pointer;
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.35rem 0.35rem 0.45rem;
  border: 2px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.scene-opt:hover, .scene-opt:focus-visible { background: var(--paper-2); }
.scene-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: 3px 3px 0 var(--pink); }
.scene-opt b { font-family: var(--display); font-size: 0.88rem; line-height: 1.15; overflow-wrap: anywhere; }
.scene-opt small { overflow: hidden; color: var(--ink-soft); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.scene-opt.is-locked .scene-thumb { opacity: 0.55; }
.scene-opt.is-locked small { color: var(--blue); }
.scene-thumb, .room-preview { position: relative; overflow: hidden; height: 4.6rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.scene-thumb .sc, .room-preview .sc { border-radius: 8px; }
.scene-lock { position: absolute; right: 0.3rem; top: 0.3rem; z-index: 2; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--on-accent); }
.scene-lock svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* rámček v malom náhľade: tenšie okraje */
.scene-thumb, .room-preview { --sf-pixel-w: 14px; --sf-sakura-w: 32px; }
.scene-thumb .sf, .room-preview .sf { inset: 3px; }
.scene-thumb .sf-neon, .room-preview .sf-neon { inset: 5px; border-radius: 12px; }
.scene-thumb .sf-neon::after, .room-preview .sf-neon::after { inset: 4px; border-radius: 8px; }
.scene-thumb .sf-sakura, .room-preview .sf-sakura { inset: 0; }
.scene-all { margin-top: 0.2rem; }
/* obchod, záložka Rooms */
.room-preview { height: 6.5rem; }
.shop-sound { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
.shop-sound svg { width: 0.95rem; height: 0.95rem; margin-right: 0.3rem; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-listen[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* super reakcie (R-065): sekcia vo výbere reakcií; samotné efekty kreslí super.js (vlastné CSS) */
.super-layer { grid-area: stage; position: relative; z-index: 6; overflow: hidden; pointer-events: none; }
.super-box { display: grid; gap: 0.5rem; padding-top: 0.7rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.super-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; }
.super-pick {
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.4rem 0.15rem 0.35rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 600 0.74rem/1.15 var(--text);
  transition: background-color 100ms ease;
}
.super-pick svg { width: 2.3rem; height: 2.3rem; transition: transform 100ms ease; }
.super-pick:hover:not(:disabled), .super-pick:focus-visible { background: var(--paper-2); }
.super-pick:hover:not(:disabled) svg { transform: scale(1.1); }
.super-pick[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); }
.super-pick:disabled { cursor: default; opacity: 0.4; }
.super-step { display: grid; gap: 0.4rem; }
.super-step-cap { margin: 0; font-size: 0.86rem; font-weight: 600; }
.super-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.super-chip {
  cursor: pointer;
  max-width: 100%;
  padding: 0.3rem 0.75rem;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: 750 0.86rem/1.25 var(--display);
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--av, var(--pink));
}
.super-chip:hover, .super-chip:focus-visible { background: var(--yellow); color: var(--on-accent); }
.super-none { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.super-lock { display: grid; justify-items: start; gap: 0.5rem; }
.super-lock .hint { margin: 0; }
.super-card { margin-bottom: 1rem; }
.super-preview { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem; }
.super-preview-item { display: grid; justify-items: center; gap: 0.2rem; min-width: 0; text-align: center; }
.super-preview-item svg { width: 2.4rem; height: 2.4rem; }
.super-preview-item small { font-size: 0.72rem; line-height: 1.15; color: var(--ink-soft); }
@media (max-width: 760px) { .super-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ⋯ ponuka: oddeľovač a prepínač super reakcií (len hostiteľ) */
.menu-sep { height: 2px; margin: 0.2rem 0.5rem; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.mode-menu .menu-toggle { position: relative; flex: none; width: 34px; height: 20px; margin-left: auto; border: 2px solid currentColor; border-radius: 999px; }
.mode-menu .menu-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: translate 120ms ease; }
.mode-menu [aria-checked="true"] > .menu-toggle { background: var(--yellow); color: var(--on-accent); border-color: var(--on-accent); }
.mode-menu [aria-checked="true"] > .menu-toggle::after { translate: 14px 0; }
.pack-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.15rem; }
.pack-sticker.is-bouncing, .pack-avatar.is-bouncing { animation: bounce 600ms ease; }
/* obchod: balík avatarov (4 nálepky na farebných kruhoch) */
.pack-avatars { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.4rem 0.1rem 0.2rem; }
.pack-avatars .pack-avatar { width: 64px; }
.pack-avatar {
  position: relative;
  cursor: pointer;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.pack-avatar .avatar-art { inset: 12%; transition: transform 120ms ease; }
.pack-avatar:hover .avatar-art { transform: scale(1.06) rotate(3deg); }
.pack-avatar[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.avatar-pack:not(.is-owned) .pack-avatar { cursor: default; }
@keyframes bounce { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(0.95) rotate(4deg); } 100% { transform: scale(1); } }
.shop-owned { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); padding: 0.35rem 0; }
.shop-tabs { justify-self: start; }

/* nálepky na avatare (R-046): najviac 3, v rohoch; vpravo dole je značka stlmeného mikrofónu */
.av-decal {
  position: absolute;
  z-index: 1;
  width: 38%;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 1.5px rgba(28, 36, 82, 0.35));
}
.av-decal-0 { left: -10%; top: -8%; rotate: -12deg; }
.av-decal-1 { right: -10%; top: -8%; rotate: 10deg; }
.av-decal-2 { left: -10%; bottom: -6%; rotate: -7deg; }
.tile-hand, .tile-muted { z-index: 2; }
.tile.is-muted .av-decal { filter: saturate(0.35) drop-shadow(0 2px 1.5px rgba(28, 36, 82, 0.35)); opacity: 0.8; }
.dc-svg { stroke-width: 4; }
.dc-die * { fill: #fff !important; stroke: #fff !important; stroke-width: 15px !important; opacity: 1 !important; }
/* Get ready: malý avatar, nálepky trochu väčšie, aby boli vidno */
.gate-avatar .av-decal { width: 46%; }
/* náhľad v záložke Avatar a v obchode */
.decal-wear, .decal-shop-wear { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 0.7rem; }
.decal-wear .hint, .decal-shop-wear .hint { margin: 0; }
.decal-preview { position: relative; flex: none; width: 84px; aspect-ratio: 1; margin: 0.4rem 0.5rem; }
.decal-preview .avatar-art { box-shadow: none; }
.decal-shop-wear { padding: 0.4rem 0.2rem 0.9rem; }
.decal-shop-wear .decal-preview { width: 96px; }
.decal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 0.35rem; }
.pick-decal {
  position: relative;
  cursor: pointer;
  aspect-ratio: 1;
  padding: 0.35rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  transition: transform 100ms ease, background-color 100ms ease;
}
.pick-decal:hover, .pick-decal:focus-visible { background: var(--paper-2); transform: scale(1.08); }
.pick-decal[aria-pressed="true"], .pack-decal[aria-pressed="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--ink); }
.pick-decal.is-locked .st-svg, .pick-decal.is-locked .dc-flag { opacity: 0.5; filter: saturate(0.5); }
/* vlajky (R-056): obrázok 4:3 v bielom zaoblenom okraji ako nálepka */
.dc-flag { display: grid; place-items: center; width: 100%; height: 100%; }
.dc-flag img { display: block; box-sizing: border-box; width: 88%; height: auto; aspect-ratio: 4 / 3; padding: 6%; border-radius: 16%; background: #fff; box-shadow: 0 0 0 1px rgba(28, 36, 82, 0.2); object-fit: contain; }
.flag-pick { display: grid; gap: 0.45rem; margin-top: 0.7rem; }
.flag-pick[hidden] { display: none; }
.flag-search { width: 100%; }
.flag-grid { padding: 3px; }
.flag-more { justify-self: start; font-size: 0.88rem; }
.flag-grid .pick-flag[hidden] { display: none; }
.flag-pick .hint { margin: 0; }
.pick-decal .pick-lock { width: 20px; height: 20px; }
.shop-season {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: #ff6c2f;
  color: #1c2452;
  font-family: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: 0.2em;
}
.pack-decals { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* značky na dlaždici: zdvihnutá ruka, hostiteľ */
.tile-hand {
  position: absolute;
  left: 2%;
  top: 2%;
  display: none;
  place-items: center;
  width: calc(var(--tile) * 0.3);
  min-width: 26px;
  aspect-ratio: 1;
  border: 2px solid var(--on-accent);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-accent);
  animation: wave 1.2s ease-in-out infinite;
}
.tile-hand svg { width: 62%; height: 62%; }
.tile.has-hand .tile-hand { display: grid; }
@keyframes wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
.tile-host {
  display: none;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: 0.15em;
}
.tile.is-host .tile-host { display: inline-block; }
.tile-action {
  cursor: pointer;
  margin-top: 0.2rem;
  padding: 0.15rem 0.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
}
.tile-action:hover { background: var(--yellow); color: var(--on-accent); }

/* pódium: publikum pod pódiom, menšie dlaždice */
.audience {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  width: min(100%, 1100px);
  padding-top: 0.9rem;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent);
}
.audience-title { margin: 0; font-family: var(--display); font-size: 0.95rem; font-weight: 780; color: var(--ink-soft); }
.audience-list { --tile: clamp(46px, 8vmin, 72px); gap: 0.9rem 1.1rem; }
.audience-list .tile-name { font-size: 0.85rem; }
.audience-list .tile-voice { font-size: 0.72rem; }
.audience-list .avatar::before, .audience-list .avatar::after { inset: -6px; border-width: 4px; }
#handBtn[aria-pressed="true"] { background: var(--yellow); color: var(--on-accent); border-color: var(--on-accent); }

/* výber avatara a farby (Profile) */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 0.6rem 0.5rem; }
.pick-avatar {
  position: relative;
  cursor: pointer;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}
.pick-avatar .avatar-art { inset: 10%; transition: transform 120ms ease; }
/* mimo dlaždice v miestnosti kruh nesvieti s hlasom */
.pick-avatar .avatar-art, .pack-avatar .avatar-art, .gate-avatar .avatar-art { box-shadow: none; }
.pick-avatar:hover .avatar-art { transform: scale(1.06) rotate(-3deg); }
.pick-avatar[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pick-avatar.is-locked .avatar-art { opacity: 0.55; filter: saturate(0.6); }
.pick-lock {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-accent);
}
.pick-lock svg { width: 13px; height: 13px; }
.more-avatars { margin-top: 0.6rem; }
.color-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick-color {
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--av);
}
.pick-color[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

/* vstupná obrazovka: náhodný avatar pri prezývke */
.nick-row { display: flex; align-items: center; gap: 0.55rem; }
.nick-row input { flex: 1; min-width: 0; }
/* prezývka s kockou na náhodné meno v poli (R-035) */
.nick-field { position: relative; display: block; flex: 1; min-width: 0; }
.nick-field input, .gate-card .nick-field input[type="text"] { width: 100%; padding-right: 2.8rem; }
.pane .nick-field .nick-dice { right: 0.25rem; width: 32px; height: 32px; }
.nick-dice svg { transition: transform 200ms ease; }
.nick-dice:hover svg { transform: rotate(-14deg); }
.nick-dice:active svg { transform: rotate(90deg) scale(0.9); }
@media (prefers-reduced-motion: reduce) { .nick-dice svg { transition: none; } }
.gate-avatar {
  position: relative;
  cursor: pointer;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transition: transform 120ms ease;
}
.gate-avatar:hover { transform: rotate(-8deg) scale(1.05); }

.tile-muted {
  position: absolute;
  right: 2%;
  bottom: 2%;
  display: none;
  place-items: center;
  width: calc(var(--tile) * 0.3);
  min-width: 30px;
  aspect-ratio: 1;
  border: 2px solid var(--on-accent);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 2px 2px 0 var(--pink);
}
.tile-muted svg { width: 60%; height: 60%; }
.tile.is-muted .tile-muted { display: grid; }
/* stlmený mikrofón (R-040): vidno ho na prvý pohľad (značka na avatare a vyblednutie; text pod menom netreba, R-049) */
.tile.is-muted .avatar-art { filter: saturate(0.35); opacity: 0.72; }

/* pod menom značky you / host a pod nimi hlas (alebo stav vysielačky) */
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1rem 0.35rem; max-width: 100%; min-width: 0; }
/* názov hlasu vždy pod značkami you/host, v samostatnom riadku (R-053) */
.tile-meta .tile-voice { flex: 1 0 100%; min-width: 0; text-align: center; }
.tile-meta .tile-you, .tile-meta .tile-host { flex: none; margin-left: 0; vertical-align: 0; border: 1.5px solid var(--ink); font-size: 0.68rem; line-height: 1.35; }
.tile-name {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 780;
  font-variation-settings: "wdth" 108;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-you {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: 0.15em;
}
.tile-voice { max-width: 100%; color: var(--ink-soft); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.is-connecting .avatar { opacity: 0.55; }
.tile.is-connecting .avatar-art { border-style: dashed; }

.notice {
  position: absolute;
  top: 0.8rem;
  left: 50%;
  z-index: 3;
  width: min(36rem, calc(100% - 2rem));
  transform: translateX(-50%);
}
.notice > div {
  padding: 0.75rem 1rem;
  border: 2px solid var(--on-accent);
  border-radius: 10px;
  background: var(--yellow);
  color: var(--on-accent);
}

/* po obnovení stránky: zvuk čaká na kliknutie */
.unlock {
  position: absolute;
  top: 0.8rem;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: min(34rem, calc(100% - 2rem));
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  border: 2px solid var(--on-accent);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 4px 4px 0 var(--pink);
  transform: translateX(-50%);
}
.unlock svg { flex: none; }
.unlock span { flex: 1; font-size: 0.9rem; line-height: 1.35; }
.unlock .btn-secondary { flex: none; color: var(--on-accent); background: #fff; }
@media (max-width: 520px) {
  .unlock { flex-wrap: wrap; }
  .unlock .btn-secondary { width: 100%; }
}

/* ---------- spodná lišta ---------- */
.dock {
  border-left: var(--sal) solid transparent;
  border-right: var(--sar) solid transparent;
  grid-area: dock;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 1.1rem;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
}
/* tri skupiny (R-052): ty (mikrofón, hlas) / miestnosť (zvuk, reakcie, pódium) / nastavenia a odchod; bez popisov (R-054) */
.dock-group { display: flex; align-items: center; gap: 0.55rem; }
.dock-group + .dock-group { padding-left: 1.1rem; border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.dock-item { display: grid; justify-items: center; }
.dock-item[hidden] { display: none; }
.dock-btn,
.icon-btn {
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: transform 80ms ease, background-color 120ms ease;
}
.dock-btn svg use + use { display: none; }
.dock-btn.is-toggle[aria-pressed="false"] { background: var(--yellow); color: var(--on-accent); border-color: var(--on-accent); }
.dock-btn.is-toggle[aria-pressed="false"] svg use:first-child { display: none; }
.dock-btn.is-toggle[aria-pressed="false"] svg use + use { display: inline; }
.dock-btn[aria-expanded="true"] { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--pink); }
.dock-btn:hover { box-shadow: 3px 3px 0 var(--pink); }
.dock-btn:active, .dock-mic.is-hold.is-live, .dock-leave:active, .dock-join:active { transform: translate(1px, 1px); }
.icon-btn { width: 38px; height: 38px; }
.icon-btn svg { width: 20px; height: 20px; }

.dock-voice,
.dock-leave,
.dock-join {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 50px;
  padding: 0 1.1rem 0 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
/* mikrofón = hovor (R-092): modrý s krúžkom podľa hlasu, kým ťa ostatní počujú; pri drž a hovor a vo vysielačke
   pilulka „Hold“ na podržanie (aj Space). Krúžok berie --lvl z :root (úroveň tvojho hlasu, app.js). */
.dock-mic { position: relative; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dock-mic-text { display: none; font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 108; }
.dock-mic.is-hold { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: auto; padding: 0 1.05rem 0 0.85rem; border-radius: var(--radius-pill); touch-action: none; }
.dock-mic.is-hold .dock-mic-text { display: inline; }
.dock-mic.is-hold:hover { box-shadow: 3px 3px 0 var(--blue); }
.dock-mic.is-live, .dock-mic.is-live:hover { border-color: var(--on-accent); background: var(--blue); color: #fff; box-shadow: 0 0 0 calc(2px + var(--lvl, 0) * 10px) color-mix(in srgb, var(--blue) 35%, transparent), 3px 3px 0 var(--pink); }
/* vysielačka (R-060): odpočet času na hovor; modrá vrstva sa zmenšuje sprava doľava (clip-path v ui.js) */
.talk-fill {
  position: absolute;
  inset: -2px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: inherit;
  padding: inherit;
  border: 2px solid var(--on-accent);
  border-radius: inherit;
  background: var(--blue);
  color: #fff;
  pointer-events: none;
}
.talk-fill svg { width: 24px; height: 24px; }
.dock-mic.is-live.is-timed { background: var(--paper); color: var(--ink); }
.dock-mic.is-timed .talk-fill { display: inline-flex; }
/* hlas (R-092): len výber hlasu, ťuknutie otvorí rýchly zoznam nad lištou */
.dock-voice {
  max-width: 15rem;
  background: var(--paper);
  color: var(--ink);
  transition: background-color 80ms ease, box-shadow 80ms ease;
}
.dock-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 780; font-variation-settings: "wdth" 108; }
.dock-voice svg { flex: none; }
.dock-voice .dock-voice-chev { width: 16px; height: 16px; margin-left: -0.1rem; transform: rotate(180deg); transition: transform 120ms ease; }
.dock-voice:hover { box-shadow: 3px 3px 0 var(--pink); }
.dock-voice[aria-expanded="true"], .dock-voice[aria-expanded="true"]:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.dock-voice[aria-expanded="true"] .dock-voice-chev { transform: none; }
.dock-leave { background: var(--pink); color: var(--on-accent); border-color: var(--on-accent); box-shadow: 3px 3px 0 var(--ink); }
.dock-join { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--pink); }

/* ---------- panel nastavení ---------- */
.drawer {
  grid-area: drawer;
  display: flex;
  flex-direction: column;
  width: var(--drawer-w);
  min-height: 0;
  border-left: 2px solid var(--ink);
  background: var(--paper);
}
.drawer-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.6rem 0.6rem 0.7rem;
  border-bottom: 2px solid var(--ink);
}
.tabs { display: flex; flex: 1; gap: 0.12rem; overflow-x: auto; scrollbar-width: none; }
.tabs[hidden] { display: none; }
.drawer-title {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 860;
  font-variation-settings: "wdth" 115;
}
.drawer-title svg { width: 22px; height: 22px; color: var(--pink); }
.tabs [role="tab"] {
  cursor: pointer;
  flex: none;
  padding: 0.4rem 0.42rem;
  font-size: 0.94rem;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  font-weight: 600;
}
.tabs [role="tab"][aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.tabs [role="tab"]:hover:not([aria-selected="true"]) { border-color: var(--ink-soft); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem 1.5rem; overscroll-behavior: contain; }
.pane { display: grid; gap: 0.75rem; align-content: start; }

/* panel You a Settings (R-073, R-077): vpravo hore ozubené koliesko (Settings) a tvoj avatar ako profil (You) */
.btn-settings { flex: none; }
.tile.is-self .avatar { cursor: pointer; }
body.is-walkie .tile.is-self .avatar { cursor: pointer; }

/* ladenie hlasu (Pro) je zbalené pod tvojimi hlasmi */
.you-tune { margin-top: 0.4rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.you-tune > summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; list-style: none; }
.you-tune > summary::-webkit-details-marker { display: none; }
.you-tune > summary > span:first-child { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.you-tune > summary b { font-family: var(--display); font-size: 1rem; font-weight: 820; font-variation-settings: "wdth" 106; }
.you-tune > summary small { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }
.you-tune > summary .pro-tag { margin: 0; border-color: var(--on-accent); background: var(--yellow); color: var(--on-accent); }
.you-tune > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 0.2rem 0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}
.you-tune[open] > summary::after { margin-bottom: -0.2rem; transform: rotate(-135deg); }
.you-tune > summary:hover { background: var(--paper-2); border-radius: 12px; }
.you-tune[open] > summary { border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 12px 12px 0 0; }
.you-tune-body { display: grid; gap: 0.75rem; padding: 0.85rem 0.85rem 1rem; }
.you-tune-body .pro-card { box-shadow: 3px 3px 0 var(--pink); }
.you-tune-body .pro-body > .sub:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* odkaz do obchodu na konci záložky You (R-077: ponuka obchodu v paneli nie je) */
.you-shop { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; margin-top: 0.8rem; font-size: 0.9rem; }
.you-shop svg { width: 17px; height: 17px; }

/* Reactions: tvoje reakcie a super reakcie (ťuknutie = ukážka len pre teba) */
.you-reactions { margin: 0; }
/* R-097: reakcie v šatni rovnako veľké ako nálepky (predtým 6 stĺpcov cez celú šírku = obrovské) */
.sticker-grid.you-reactions { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
.you-super .super-grid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
.you-super { display: grid; gap: 0.5rem; }
.you-super .hint { margin: 0; }

/* Pro (R-041): záložka Sound (vlastný zvuk) je platená; bez Pro sú ovládače vypnuté */
.pro-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.35rem 0.04rem;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: 0.12em;
}
.pro-tag[hidden] { display: none; }
.pro-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 0.95rem 0.95rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--pink);
}
.pro-card[hidden] { display: none; }
.pro-head { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 820; font-variation-settings: "wdth" 104; }
.pro-card .pro-tag { margin: 0 0.4rem 0 0; border-color: var(--on-accent); background: var(--yellow); color: var(--on-accent); }
.pro-card .hint { margin: 0; }
.pro-card .btn-secondary { justify-self: start; }
.pro-body { display: grid; gap: 0.75rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pro-body > .hint { margin: 0; }
.pro-body:disabled { opacity: 0.5; }

.sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  font-variation-settings: "wdth" 110;
}
.sub.first { margin-top: 0; padding-top: 0; border-top: 0; }
.sub .hint { font-family: var(--text); font-weight: 400; text-align: right; }

/* ---------- presety ---------- */
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.preset {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-height: 3.6rem;
  padding: 0.45rem 0.55rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  text-align: left;
}
.preset:hover { background-image: radial-gradient(var(--pink) 22%, transparent 26%); background-size: 7px 7px; }
.preset-name {
  max-width: 100%;
  overflow: hidden;
  padding-right: 0.2rem;
  background: var(--paper);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 820;
  font-variation-settings: "wdth" 108;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-desc { padding-right: 0.2rem; background: var(--paper); color: var(--ink-soft); font-size: 0.72rem; line-height: 1.25; }
.preset[aria-pressed="true"] { background: var(--pink); background-image: none; box-shadow: 3px 3px 0 var(--blue); }
.preset[aria-pressed="true"] .preset-name,
.preset[aria-pressed="true"] .preset-desc { background: transparent; color: var(--on-accent); }
.preset-mod {
  position: absolute;
  top: -0.55rem;
  right: 0.4rem;
  padding: 0 0.4rem;
  border: 1.5px solid var(--on-accent);
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--on-accent);
  font-size: 0.66rem;
  font-weight: 600;
}
.preset.is-shop::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--blue);
}
.preset.is-shop[aria-pressed="true"]::after { background: var(--on-accent); }
.more-voices { display: inline-flex; align-items: center; gap: 0.35rem; justify-self: start; font-size: 0.9rem; }
.more-voices svg { width: 18px; height: 18px; }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.calib { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0; }

/* ---------- tlačidlá ---------- */
.btn-primary,
.btn-secondary,
.btn-ab {
  cursor: pointer;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: transform 80ms ease;
}
.btn-primary {
  padding: 0.75rem 1.5rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 780;
  font-variation-settings: "wdth" 112;
  background: var(--blue);
  color: #fff;
  box-shadow: 4px 4px 0 var(--pink);
}
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pink); }
.btn-secondary { padding: 0.45rem 0.95rem; background: var(--paper); box-shadow: 2px 2px 0 var(--blue); }
.btn-secondary:hover:not(:disabled) { background: var(--paper-2); }
.btn-secondary[aria-pressed="true"], .btn-secondary.is-recording,
.btn-secondary[aria-pressed="true"]:hover:not(:disabled), .btn-secondary.is-recording:hover:not(:disabled) { background: var(--pink); color: var(--on-accent); }
.btn-ab {
  justify-self: start;
  padding: 0.45rem 1rem;
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 2px 2px 0 var(--pink);
  user-select: none;
  touch-action: none;
}
.btn-ab.is-held { transform: translate(2px, 2px); box-shadow: none; }
.btn-ghost {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border: 2px dashed var(--ink-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: 500;
  white-space: nowrap;
}
.btn-ghost:hover:not(:disabled) { border-style: solid; border-color: var(--ink); }
.link-btn {
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button:disabled, select:disabled { cursor: not-allowed; opacity: 0.45; }

/* ---------- polia ---------- */
.field { display: grid; gap: 0.3rem; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; font-size: 0.9rem; }
.field-label output { font-family: var(--display); font-weight: 760; font-variant-numeric: tabular-nums; color: var(--blue); }
.field .hint, .pane > .hint { margin: 0; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--ink); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
}
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: var(--pink); }
input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }

select,
.text-input {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span { display: block; padding: 0.3rem 0.8rem; border-left: 2px solid var(--ink); font-weight: 500; font-size: 0.9rem; }
.seg label:first-child span { border-left: 0; }
.seg input:checked + span { background: var(--blue); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: -5px; }

.switch { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 500; font-size: 0.92rem; }
.switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  cursor: pointer;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 120ms ease;
}
.switch input:checked { background: var(--pink); }
.switch input:checked::after { transform: translateX(18px); }

/* ---------- zariadenia, nahrávka, avatar ---------- */
.dev-row { display: flex; align-items: center; gap: 0.6rem; }
.dev-row select { flex: 1; }
.dev-row .btn-ghost { flex: none; }
.hint.warn { color: var(--ink); font-weight: 500; }
.hint.warn::before { content: "⚠ "; }
.meter {
  flex: none;
  position: relative;
  width: 72px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  overflow: hidden;
}
.meter span { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--pink); }

.sample-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avatar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* ---------- efekty postáv ---------- */
.fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; }
.fx-grid .field-label { font-size: 0.84rem; gap: 0.5rem; }

/* ---------- obchod ---------- */
.shop-lede { margin: 0; }

/* samostatné okno (obchod, R-033): v strede nad aplikáciou, na mobile list zdola */
.modal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(13, 15, 31, 0.55); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(62rem, 100%);
  height: min(88vh, 50rem); /* pevná výška: pri prepínaní záložiek okno neskáče */
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--pink);
  animation: modal-in 200ms cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.modal-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.35rem;
  border-bottom: 2px solid var(--ink);
}
.modal-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 850; font-variation-settings: "wdth" 104; }
.modal-title svg { width: 24px; height: 24px; fill: none; stroke: var(--pink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modal-head .shop-tabs { margin-right: auto; }
.modal-close { flex: none; width: 42px; height: 42px; }
.modal-body { display: grid; align-content: start; gap: 0.75rem; overflow-y: auto; padding: 1.1rem 1.35rem 1.6rem; overscroll-behavior: contain; }
/* R-097: bez „scroll anchoring“: položky sa pri prejdení myšou zväčšia (transform) a prehliadač by pri posúvaní
 * kolieskom vracal pozíciu späť, nedalo sa dostať na koniec (šatňa, obchod, panel) */
.modal-body, .drawer-body { overflow-anchor: none; }
.shop-modal .shop-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.shop-modal .shop-grid.packs { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
body.modal-open { overflow: hidden; }
.shop-group { margin-top: 0.4rem; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.shop-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
}
.shop-item.is-using { box-shadow: 4px 4px 0 var(--pink); }
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.shop-name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 840;
  font-variation-settings: "wdth" 108;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shop-price {
  flex: none;
  padding: 0 0.45rem;
  border: 1.5px solid var(--on-accent);
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shop-item.is-owned .shop-price { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.shop-desc { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.shop-tags li {
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  font-size: 0.68rem;
  font-weight: 500;
}
.shop-actions { display: flex; gap: 0.4rem; margin-top: auto; padding-top: 0.2rem; }
.shop-actions button { flex: 1; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.shop-try[aria-pressed="true"] { border-style: solid; border-color: var(--pink); background: color-mix(in srgb, var(--pink) 16%, transparent); }
.shop-soon .sub { margin-top: 0.5rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + var(--sab));
  z-index: 70; /* aj nad oknom obchodu */
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.7rem 1rem;
  border: 2px solid var(--on-accent);
  border-radius: 10px;
  background: var(--yellow);
  color: var(--on-accent);
  box-shadow: 3px 3px 0 var(--pink);
  transform: translateX(-50%);
}

/* ---------- vstup do miestnosti ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: calc(1.5rem + var(--sat)) calc(1rem + var(--sar)) calc(1.5rem + var(--sab)) calc(1rem + var(--sal));
  background-color: var(--paper);
  background-image: radial-gradient(var(--pink) 18%, transparent 21%);
  background-size: 14px 14px;
}
/* načítanie (R-063): kým appka nevie, čo ukázať, je vidno len bodkované pozadie vstupu */
.gate.is-booting > * { visibility: hidden; }
/* vstup (R-032): jedna hlavná vec (nadpis), tichší zvyšok, jednotná výška prvkov 48 px */
.gate-card {
  display: grid;
  gap: 0;
  width: min(24rem, 100%);
  padding: 1.6rem 1.6rem 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--blue);
}
/* logo = len nápis Maskaroo s riso posunom; kruhy sú len vo favikone a ikonách (R-031) */
.gate-logo { margin: 0 0 1.15rem; line-height: 1; }
.gate-logo .brand { font-size: 1.2rem; font-variation-settings: "wdth" 110; }
.brand-wrap { display: inline-flex; flex: none; align-items: center; }

/* pozvánka: avatar toho, kto volá, „zvoní“ */
.gate-caller { display: flex; justify-content: flex-start; margin: 0.15rem 0 1rem 0.15rem; }
.caller-ring { position: relative; width: 64px; aspect-ratio: 1; }
.caller-ring .avatar-art { inset: 0; box-shadow: none; }
.caller-ring::before, .caller-ring::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 4px solid var(--av, var(--pink));
  border-radius: 50%;
  animation: ring-pulse 1.6s ease-out infinite;
}
.caller-ring::after { border-color: var(--blue); animation-delay: 0.8s; mix-blend-mode: var(--blend); }
@keyframes ring-pulse { from { transform: scale(0.92); opacity: 0.9; } to { transform: scale(1.35); opacity: 0; } }
/* zvoniaca karta (R-057): hlavička na stred ako prichádzajúci hovor, formulár pod ňou ostáva vľavo */
.gate-card.is-ringing .gate-logo,
.gate-card.is-ringing .gate-title,
.gate-card.is-ringing .gate-lede { text-align: center; }
.gate-card.is-ringing .gate-caller { justify-content: center; margin: 1rem 0 1.9rem; }
.gate-card.is-ringing .gate-title { text-wrap: balance; }
.gate-card.is-ringing .caller-ring { width: 88px; }
.gate-card.is-ringing .gate-lede { margin-bottom: 0.9rem; text-wrap: pretty; }
.gate-card.is-ringing .gate-room { justify-content: center; margin-bottom: 1.4rem; }
.gate-room { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0 0 0.75rem; font-size: 0.95rem; }
.gate-room[hidden] { display: none; }
.gate-room b { font-family: var(--display); font-size: 1.05rem; font-weight: 820; overflow-wrap: anywhere; }
/* stav miestnosti z odkazu (R-034): koľko ľudí je dnu */
.room-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.2rem;
  padding: 0.12rem 0.55rem 0.14rem 0.45rem;
  border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.room-state[hidden] { display: none; }
.room-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.room-state.is-live { color: var(--ink); border-color: color-mix(in srgb, #00a95c 60%, transparent); }
.room-state.is-live i { background: #00a95c; box-shadow: 0 0 0 0 rgba(0, 169, 92, 0.5); animation: live-dot 1.8s ease-out infinite; }
.room-state.is-full { color: var(--ink); border-color: color-mix(in srgb, #f15060 65%, transparent); }
.room-state.is-full i { background: #f15060; }
@keyframes live-dot { 70% { box-shadow: 0 0 0 6px rgba(0, 169, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 169, 92, 0); } }
@media (prefers-reduced-motion: reduce) { .room-state.is-live i { animation: none; } }

/* tlačidlá: Enter cez celú šírku, pod ním „or“ a obrysové Call a friend */
.gate-actions { display: grid; gap: 0.75rem; margin-top: 1.35rem; }
.gate-card .gate-actions .btn-primary {
  justify-self: stretch;
  height: 50px;
  margin: 0;
  padding: 0 1rem;
  font-size: 1.08rem;
  font-variation-settings: "wdth" 104;
}
.gate-or { display: flex; align-items: center; gap: 0.75rem; color: var(--ink-soft); font-size: 0.8rem; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; border-top: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.gate-or[hidden] { display: none; }
.gate-call {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  transition: box-shadow 120ms ease, transform 80ms ease;
}
.gate-call:hover { box-shadow: 3px 3px 0 var(--blue); }
.gate-call:active { transform: translate(1px, 1px); }
.gate-call[hidden] { display: none; }
.gate-call svg, .call-copy svg, .send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Call a friend: odkaz a odoslanie */
.call-view { display: grid; gap: 0.45rem; margin-top: 1rem; padding-top: 1rem; border-top: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.call-link { display: flex; gap: 0.5rem; }
.call-link .text-input { flex: 1; min-width: 0; font-size: 0.88rem; }
/* odkaz Call a friend / Walkie-talkie (R-063): celý text, zalomí sa, kód tučne */
.call-url {
  flex: 1;
  min-width: 0;
  display: block;
  min-height: 48px;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  font-size: 0.95rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  user-select: all;
  -webkit-user-select: all;
}
.call-url b { font-weight: 750; }
.call-url.is-empty { color: var(--ink-soft); user-select: none; -webkit-user-select: none; }
.call-copy { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; height: 48px; box-shadow: none; }
.call-send-label { margin: 0.35rem 0 0; }
.call-send { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.send-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.send-btn:hover, .send-btn:focus-visible { background: var(--yellow); color: var(--on-accent); }
.send-btn[hidden] { display: none; }
.send-btn.is-disabled { opacity: 0.45; pointer-events: none; }
.call-new { justify-self: start; font-size: 0.88rem; }
.gate-title {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.4vw, 1.7rem);
  font-weight: 850;
  font-variation-settings: "wdth" 104;
  line-height: 1.1;
}
.gate-lede { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.gate-card .field-label { margin: 0; font-size: 0.85rem; }
.gate-card input[type="text"],
.gate-card input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  font-size: 1.02rem;
}
.gate-card input::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); letter-spacing: 0; }
/* kód: oko na zobrazenie priamo v poli */
.code-row { position: relative; }
.code-row input { padding-right: 3rem; letter-spacing: 0.06em; }
.code-eye {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  transform: translateY(-50%);
}
.code-eye:hover { background: var(--yellow); color: var(--on-accent); }
.code-eye:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.code-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-card .hint { margin: 0.1rem 0 0; }
.gate-hint { font-size: 0.8rem; }
.gate-links { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 1.15rem; }
.gate-links .gate-skip { margin: 0; font-size: 0.88rem; }
.gate-links .gate-skip[hidden] { display: none; }
/* odkazy na prezentačné stránky (R-121): pod kartou vstupu pri spodnom okraji, v nainštalovanej appke nie sú */
#gate { grid-template-rows: 1fr auto; }
.gate-site { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.1rem; margin-top: 1.25rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--paper); font-size: 0.84rem; }
.gate-site a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gate-site a:hover { color: var(--blue); }
@media (display-mode: standalone) { .gate-site { display: none; } }
.gate-error {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--on-accent);
  border-radius: 10px;
  background: var(--yellow);
  color: var(--on-accent);
  font-weight: 500;
}
.gate-fields { display: grid; gap: 0.4rem; }
/* kód z QR televízora čaká na miestnosť (R-076) */
.gate-tv { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0.55rem 0.75rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); font-size: 0.9rem; line-height: 1.4; }
.gate-tv[hidden] { display: none; }
.gate-tv svg { flex: none; width: 20px; height: 20px; margin-top: 0.1rem; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nick-block { display: grid; gap: 0.4rem; }
.nick-block[hidden], .ready-view[hidden] { display: none; }

/* Get ready (R-043): príprava pred vstupom – hlas, mikrofón, výstup */
.ready-view {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.ready-sec { display: grid; gap: 0.4rem; min-width: 0; }
.ready-sec .hint { margin: 0; }
.ready-sec .hint.is-error { color: var(--ink); font-weight: 500; }
.ready-label { margin: 0; }
.ready-more { font-size: 0.82rem; font-weight: 500; }
.ready-view select { height: 44px; padding-top: 0; padding-bottom: 0; }
.ready-view .dev-row { min-height: 44px; }
.ready-mic-on { flex: 1; height: 44px; }
.ready-mic-on[hidden], .ready-view select[hidden] { display: none; }
.ready-switches { display: grid; gap: 0.55rem; }
/* hlasy ako štítky vedľa seba, zalomené do riadkov */
.voice-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/* príprava je širšia než krok 1 (zariadenia majú dlhé názvy) */
.gate-card.is-ready { width: min(30rem, 100%); }
/* tlačidlo mikrofónu pri Join: stlmený = žltý s prečiarknutím (ako v lište) */
.gate-join { display: flex; align-items: center; gap: 0.6rem; }
.gate-join .btn-primary { flex: 1; min-width: 0; }
.join-mic {
  cursor: pointer;
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: box-shadow 120ms ease;
}
.join-mic:hover { box-shadow: 3px 3px 0 var(--blue); }
.join-mic[hidden] { display: none; }
.join-mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.join-mic svg use + use { display: none; }
.join-mic[aria-pressed="false"] { border-color: var(--on-accent); background: var(--yellow); color: var(--on-accent); }
.join-mic[aria-pressed="false"] svg use:first-child { display: none; }
.join-mic[aria-pressed="false"] svg use + use { display: inline; }
.voice-chip {
  cursor: pointer;
  flex: none;
  padding: 0.38rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}
.voice-chip:hover { box-shadow: 2px 2px 0 var(--blue); }
.voice-chip[aria-pressed="true"] { background: var(--pink); color: var(--on-accent); box-shadow: 2px 2px 0 var(--blue); }
.code-field { display: grid; gap: 0.4rem; margin-bottom: 0.6rem; }
.code-field[hidden], .call-view[hidden], .gate-caller[hidden], .gate-room[hidden] { display: none; }
.gate-busy { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-weight: 600; }
.dots { display: inline-flex; gap: 0.3rem; }
.dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--pink);
  animation: dot 0.9s ease-in-out infinite;
}
.dots i:nth-child(2) { background: var(--blue); animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-5px); opacity: 1; } }

/* R-117: appka z plochy na iPhone má biele písmo stavového riadka; vo svetlom motíve je pod ním jemný tieň
   (len vo výške bezpečnej oblasti, lišta ide ďalej bez predelu) */
@media (display-mode: standalone) {
  .topbar { background-image: linear-gradient(to bottom, var(--sb-scrim), color-mix(in srgb, var(--sb-scrim) 60%, transparent) 70%, transparent); background-repeat: no-repeat; background-origin: border-box; background-size: 100% var(--sat); }
}

/* ---------- menšie obrazovky ---------- */
@media (max-height: 640px) {
  :root { --tile: clamp(72px, 13vmin, 120px); }
  .stage-wrap { padding: 1rem; gap: 0.8rem; }
}

@media (max-width: 760px) {
  :root { --tile: clamp(72px, 22vw, 120px); }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "stage" "dock";
  }
  .topbar { min-height: 46px; padding: 0.45rem 0.8rem; gap: 0.75rem; }
  .tb-actions:not([hidden]) + .tb-tools { margin-left: -0.25rem; }
  /* na telefóne len domček */
  .btn-room { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .btn-room span, .btn-room .btn-room-chev { display: none; }
  .brand { font-size: 1rem; }
  .status { display: none; }
  .dock { gap: 0.45rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  /* na telefóne skupiny bližšie */
  .dock-group { gap: 0.45rem; }
  .dock-group + .dock-group { padding-left: 0.45rem; }
  .dock-btn { width: 46px; height: 46px; }
  .dock-voice, .dock-leave, .dock-join { height: 46px; }
  .dock-voice { max-width: 9.5rem; padding: 0 0.85rem 0 0.7rem; }
  .dock-leave span, .dock-join span { display: none; }
  .dock-leave, .dock-join { width: 46px; padding: 0; justify-content: center; }
  /* panel ako list zdola */
  .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: auto;
    max-height: 82dvh;
    border-left: 0;
    border-top: 2px solid var(--ink);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 0 var(--blue);
  }
  .drawer-body { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + var(--sab)); }
}

@media (max-width: 440px) {
  /* päť záložiek panela You sa musí zmestiť aj na úzky telefón (R-077) */
  .tabs [role="tab"] { padding: 0.38rem 0.3rem; font-size: 0.86rem; }
  .drawer-head { gap: 0.3rem; padding-left: 0.5rem; }
  /* v miestnosti na úzkom displeji bez loga: názov a stav, Invite ako ikona, ⋯ (R-052) */
  body.in-room .brand-wrap, body.in-room .tb-sep { display: none; }
  .room-title { font-size: 1.05rem; }
  .btn-invite { width: 40px; padding: 0; justify-content: center; }
  .btn-invite span { display: none; }
  .mic-notice { bottom: calc(76px + var(--sab)); flex-wrap: wrap; }
  body.has-mic-notice .toast { bottom: var(--notice-top, 196px); }
  .mic-notice span { flex-basis: calc(100% - 3.2rem); }
  .mic-notice-actions { width: 100%; }
  .dock { gap: 0.3rem; }
  .dock-group { gap: 0.3rem; }
  .dock-group + .dock-group { padding-left: 0.3rem; }
  .dock-btn { width: 40px; height: 40px; }
  .dock-btn svg { width: 21px; height: 21px; }
  .dock-voice, .dock-leave, .dock-join { height: 40px; }
  .dock-leave, .dock-join { width: 40px; }
  .dock-voice { max-width: 6.4rem; padding: 0 0.6rem 0 0.5rem; gap: 0.3rem; }
  .dock-mic.is-hold { padding: 0 0.7rem 0 0.55rem; gap: 0.3rem; }
  /* úzky telefón: hlas bez ikony vlny, nech sa zmestí názov */
  .dock-voice > svg:first-child { display: none; }
  .sticker-tray { bottom: calc(76px + var(--sab)); }
  .sticker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .modal { place-items: end stretch; padding: 0; }
  .modal-card { width: 100%; height: 92dvh; border-width: 2px 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 0 var(--pink); }
  .modal-head { flex-wrap: wrap; row-gap: 0.6rem; padding: 0.8rem 0.8rem 0.8rem 1rem; }
  .modal-head .shop-tabs { order: 3; width: 100%; }
  .modal-head .shop-tabs label { flex: 1; }
  .modal-head .shop-tabs span { padding: 0.3rem 0.3rem; font-size: 0.84rem; text-align: center; }
  .modal-title { margin-right: auto; }
  .modal-body { padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* R-080: s tlačidlom Games sa lišta na telefóne zmestí do jedného riadku: hlasové tlačidlo bez názvu
   (názov hlasu je pod tvojím avatarom aj v popise tlačidla) */
@media (max-width: 340px) {
  .tabs [role="tab"] { padding: 0.36rem 0.2rem; font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar::before, .avatar::after { transform: none; }
  .avatar::after { translate: 3px 2px; }
  .avatar-art { box-shadow: none; }
  .pick-avatar .avatar-art, .pack-avatar .avatar-art { transition: none; }
  .tile-hand { animation: none; }
  .sticker-pop { animation: none; transform: none; opacity: 1; }
  .pack-sticker.is-bouncing, .pack-avatar.is-bouncing { animation: none; }
  .live-dot { animation: none; }
  .modal-card { animation: none; }
  .caller-ring::before, .caller-ring::after { animation: none; opacity: 0.6; }
  .dock-btn, .btn-primary, .switch input::after { transition: none; }
  .dots i { animation: none; opacity: 1; }
}

/* ---------- vysielačka (R-047, walkie.js) ---------- */
/* vstup: Call a friend a Walkie-talkie vedľa seba (keď je vidno len jedno, má celú šírku) */
.gate-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.gate-alt:not(:has(> :not([hidden]))) { display: none; }
.gate-alt .gate-call { gap: 0.4rem; padding: 0 0.6rem; white-space: nowrap; }
/* štyri cesty do miestnosti (R-075): Call a friend | Walkie-talkie / Open room | Party room */

/* ponuka režimov pod čipom v hornej lište */
.mode-menu {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 0.2rem;
  width: min(19rem, calc(100vw - 16px));
  /* stĺpec najviac na šírku panelu (2026-10-31): dlhý názov miestnosti (bez zalamovania) inak roztiahol mriežku
     a všetky riadky boli širšie než panel – prepínače a konce textov na telefóne odseknuté */
  grid-template-columns: minmax(0, 1fr);
  padding: 0.35rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--pink);
}
.mode-menu > * { min-width: 0; }
.mode-menu[hidden] { display: none; }
/* ponuka človeka (R-088): ťuknutie na dlaždicu iného človeka */
.person-menu {
  position: fixed;
  z-index: 61;
  display: grid;
  gap: 0.5rem;
  width: min(18rem, calc(100vw - 24px));
  padding: 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--pink);
}
.person-menu[hidden] { display: none; }
.pm-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.pm-av { position: relative; flex: none; width: 44px; height: 44px; --lvl: 0; --tile: 44px; }
.pm-title { display: grid; flex: 1; min-width: 0; }
.pm-title b { overflow: hidden; font-family: var(--display); font-size: 1.05rem; font-weight: 840; text-overflow: ellipsis; white-space: nowrap; }
.pm-title small { overflow: hidden; color: var(--ink-soft); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.pm-close { flex: none; width: 34px; height: 34px; }
.pm-body { display: grid; gap: 0.4rem; }
.pm-btn { cursor: pointer; width: 100%; padding: 0.55rem 0.8rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 650; text-align: left; }
.pm-btn:hover:not(:disabled) { background: var(--paper-2); }
/* stavy majú pevné farby aj pod myšou a vo fokuse (inak hover dal tmavé pozadie pod tmavý text v tmavom motíve) */
.pm-btn[aria-pressed="true"], .pm-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.pm-btn.is-confirm, .pm-btn.is-confirm:hover:not(:disabled) { border-color: var(--on-accent); background: var(--yellow); color: var(--on-accent); }
.pm-btn.is-danger { border-color: var(--pink); }
.pm-btn.is-danger.is-confirm, .pm-btn.is-danger.is-confirm:hover:not(:disabled) { border-color: var(--on-accent); background: var(--pink); color: var(--on-accent); }
.pm-sep { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; }
.pm-vol { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; }
.pm-vol b { min-width: 2.6rem; font-variant-numeric: tabular-nums; text-align: right; }
.tile.is-local-muted .avatar { opacity: 0.55; }
.tile:not(.is-self) .avatar[role="button"], .tile:not(.is-self) .tile-name { cursor: pointer; }
/* plocha (R-088): dlhé podržanie nič neoznačí ani nezvýrazní (vysielačka ho potrebuje na hovor) */
.stage-wrap, .dock, .topbar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.stage-wrap input, .stage-wrap textarea { -webkit-user-select: text; user-select: text; }
.mode-menu button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.mode-menu button:hover, .mode-menu button:focus-visible { background: var(--paper-2); }
.mode-menu button[aria-checked="true"][data-mode] { background: var(--ink); color: var(--paper); }
.mode-menu button:disabled { cursor: default; }
.mode-menu button:disabled:not([aria-checked="true"]) { opacity: 0.55; }
.mode-menu button:disabled:hover:not([aria-checked="true"]) { background: transparent; }
.mode-menu:focus { outline: none; }
.menu-cap { margin: 0.3rem 0.7rem 0.15rem; color: var(--ink-soft); font-size: 0.78rem; }
.mode-menu svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-menu span { display: grid; gap: 0.05rem; }
.mode-menu b { font-family: var(--display); font-size: 0.95rem; }
.mode-menu small { font-size: 0.78rem; opacity: 0.8; }
/* R-089: názov miestnosti v ponuke Room, len na menšom displeji (v hornej lište preň nie je miesto) */
.mode-menu { max-height: calc(100dvh - 64px); overflow-y: auto; }
.menu-room { display: none; }
.menu-room-row { display: flex; align-items: center; gap: 0.25rem; min-width: 0; padding: 0 0.3rem 0.2rem 0.7rem; }
.mode-menu .menu-room-code { flex: 1; min-width: 0; overflow: hidden; font-family: var(--display); font-size: 1.05rem; font-weight: 860; font-variation-settings: "wdth" 108; text-overflow: ellipsis; white-space: nowrap; }
.mode-menu .menu-room-code.is-hidden { color: var(--ink-soft); letter-spacing: 0.1em; }
.mode-menu .menu-room-btn { flex: none; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.mode-menu .menu-room-btn svg { width: 20px; height: 20px; }
.mode-menu .menu-room-btn.btn-hide-name { color: var(--ink-soft); }
.mode-menu .menu-room-btn.btn-hide-name[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 640px) {
  .menu-room { display: block; }
  /* v miestnosti: v hornej lište len režim, počet ľudí a čas; názov je v ponuke Room */
  body.in-room .room-name-row { display: none; }
  body.in-room .room-status { color: var(--ink); font-size: 0.82rem; }
  body.in-room .room-status #modeInfo { font-family: var(--display); font-size: 0.95rem; font-weight: 820; }
}

/* dlaždice: avatar sa drží (myš, prst, klávesnica) */
body.is-walkie .tile:not(.is-self) .avatar {
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tile:not(.is-self) .avatar:focus-visible { outline: 3px solid var(--blue); outline-offset: 10px; border-radius: 50%; }
/* tvoj avatar (R-092): Enter otvorí šatňu */
.tile.is-self .avatar:focus-visible { outline: 3px solid var(--blue); outline-offset: 10px; border-radius: 50%; }
body.is-walkie .tile:not(.is-self) .avatar:active .avatar-art { transform: scale(0.97); }
/* tvoje haló sa vo vysielačke hýbe len počas hovoru (inak ťa nikto nepočuje) */
body.is-walkie #selfTile:not(.wk-tx) .avatar { --lvl: 0; }
/* hovoríš mu / hovorí tebe / dvojica čaká / obsadený / volám / blokovaný */
.tile.wk-tx .avatar::before, .tile.wk-rx .avatar::before { border-color: var(--blue); opacity: 1; }
.tile.wk-tx .avatar-art { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 45%, transparent); }
.tile.wk-rx .avatar-art { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 50%, transparent); }
.tile.wk-rx .tile-voice, .tile.wk-tx .tile-voice { color: var(--ink); font-weight: 700; }
.tile.wk-pair .avatar::before { opacity: 0.8; border-style: dashed; }
.tile.is-calling .avatar { animation: wk-call 0.7s ease-in-out infinite alternate; }
@keyframes wk-call { from { transform: scale(1); } to { transform: scale(1.05); } }
.tile.is-busy .avatar-art { opacity: 0.55; filter: saturate(0.5); }
.tile.is-busy .tile-voice { font-weight: 600; }
.tile.is-blocked .avatar-art, .tile.is-blocked .av-decal { opacity: 0.35; filter: grayscale(1); }
.tile.wk-flash .avatar { animation: wk-shake 0.45s ease; }
@keyframes wk-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }

/* tlačidlo pod dlaždicou (Block / Unblock): miesto je vyhradené stále, dlaždice sa neposúvajú */
body.is-walkie .tile:not(.is-self) .tile-action[hidden] { display: inline-block !important; visibility: hidden; }
.tile-action.is-block { border-style: dashed; background: transparent; color: var(--ink-soft); }
.tile-action.is-block:hover { color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) {
  .tile.is-calling .avatar, .tile.wk-flash .avatar { animation: none !important; }
}

/* ---------- pozvať do miestnosti (R-049) ---------- */
.modal-card.invite-modal { width: min(30rem, 100%); height: auto; max-height: 90vh; }
/* okno Cast (R-074) */
.modal-card.cast-modal { width: min(30rem, 100%); height: auto; max-height: 90vh; }
/* šatňa (R-092): náhľad vľavo, záložky Look, Voice, Reactions a Shop vpravo
 * R-093: širšie okno, jedna plocha bez predelu medzi náhľadom a nastaveniami, náhľad bez bodiek
 * R-094: na telefóne to isté poradie ako v HTML, len pod sebou (náhľad, záložky, obsah); prezývka s ceruzkou pri mene */
.modal-card.you-modal { flex-direction: row; width: min(74rem, 100%); height: min(88vh, 48rem); box-shadow: 8px 8px 0 var(--blue); }
.you-preview {
  flex: none;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.2rem;
  width: 23rem;
  padding: 2rem 1rem 2rem 1.5rem;
}
.you-stage { position: relative; display: grid; place-items: center; padding: 14px; }
.you-av { --tile: 196px; margin: 0; }
.you-id { display: grid; justify-items: center; gap: 0.35rem; min-width: 0; max-width: 100%; text-align: center; }
.you-name { min-width: 0; overflow: hidden; font-family: var(--display); font-size: 1.55rem; font-weight: 860; font-variation-settings: "wdth" 108; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
/* meno je tlačidlo: ťuknutie (aj na ceruzku) ho zmení na pole */
.you-name-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.1rem 0.45rem 0.1rem 0.6rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: none;
  color: inherit;
}
.you-name-btn[hidden] { display: none; }
.you-name-btn svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.you-name-btn:hover { border-color: var(--ink-soft); }
.you-name-btn:hover svg { stroke: var(--pink); }
.you-nick { width: min(16rem, 100%); }
.you-nick[hidden] { display: none; }
.you-nick input { font-family: var(--display); font-size: 1.15rem; font-weight: 800; }
.you-nick .nick-dice { right: 0.25rem; width: 32px; height: 32px; }
.you-voice { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; margin: 0; padding: 0.25rem 0.75rem 0.25rem 0.55rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--display); font-weight: 780; font-variation-settings: "wdth" 106; }
.you-voice svg { flex: none; width: 18px; height: 18px; }
.you-voice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.you-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.you-head { gap: 0.6rem; padding: 0.9rem 0.9rem 0.7rem 0.4rem; border-bottom-color: transparent; transition: border-color 160ms; }
/* čiara pod záložkami len keď je obsah posunutý (ui.js pridá .is-scrolled) */
.you-modal-wrap.is-scrolled .you-head { border-bottom-color: var(--ink); }
.you-head .tabs { flex: 0 1 auto; }
.you-head .tabs [role="tab"] { padding: 0.45rem 0.85rem; font-size: 1rem; }
/* Shop za záložkami: otvorí obchod nad šatňou; nezvýraznený, vyzerá ako ostatné záložky, len s ikonou tašky */
.you-shop-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.you-shop-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.you-shop-btn:hover { border-color: var(--ink-soft); }
.you-body { flex: 1; min-height: 0; padding-left: 0.6rem; }
.you-modal .shop-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
/* veľký náhľad je vľavo, malý náhľad pri nálepkách netreba */
.you-modal .decal-preview { display: none; }
@media (max-width: 640px) {
  .modal-card.you-modal { flex-direction: column; height: 92dvh; box-shadow: 0 -6px 0 var(--blue); }
  /* náhľad hore ako pruh: avatar vľavo, meno a hlas vedľa; zatváranie v rohu */
  .you-preview { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 0.2rem 0.6rem; width: auto; padding: 0.7rem 4rem 0.2rem 0.6rem; }
  .you-modal .modal-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1; }
  .you-stage { padding: 12px; }
  .you-av { --tile: 72px; }
  .you-id { justify-items: start; width: 100%; text-align: left; }
  .you-name-btn { margin-left: -0.6rem; }
  .you-name { font-size: 1.25rem; }
  .you-nick { width: 100%; }
  .you-voice { padding: 0.15rem 0.6rem 0.15rem 0.45rem; font-size: 0.88rem; }
  .you-head { padding: 0.4rem 0.8rem 0.6rem 0.9rem; }
  .you-head .tabs [role="tab"] { padding: 0.4rem 0.7rem; font-size: 0.95rem; }
  .you-shop-btn { padding: 0.36rem 0.7rem 0.36rem 0.55rem; font-size: 0.95rem; }
  .you-body { padding-left: 1rem; }
}
@media (max-width: 440px) {
  .you-head { gap: 0.3rem; }
  .you-head .tabs [role="tab"] { padding: 0.38rem 0.5rem; font-size: 0.9rem; }
  .you-shop-btn { padding: 0.32rem 0.55rem 0.32rem 0.45rem; font-size: 0.9rem; gap: 0.3rem; }
  .you-shop-btn svg { width: 16px; height: 16px; }
}
/* výber hry (R-075) */
.modal-card.game-modal { width: min(44rem, 100%); height: auto; max-height: 92vh; }
.game-modal .modal-title { margin-right: auto; }
.game-modal .modal-body > .hint { margin: 0; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }
.game-card { display: grid; grid-template-columns: 5.2rem 1fr; grid-template-rows: 1fr auto; gap: 0.5rem 0.8rem; padding: 0.7rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); }
.game-card.is-current { box-shadow: 4px 4px 0 var(--game, var(--pink)); }
.game-card-art { grid-row: span 2; display: grid; place-items: center; align-self: start; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.game-card-art svg { width: 84%; height: 84%; }
.game-card-body { display: grid; align-content: start; gap: 0.2rem; min-width: 0; }
.game-card-name { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 840; font-variation-settings: "wdth" 106; line-height: 1.15; }
.game-card-meta { margin: 0; color: var(--ink-soft); font-size: 0.76rem; font-weight: 600; }
.game-card-desc { margin: 0; font-size: 0.84rem; line-height: 1.4; }
.game-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.game-card-actions .btn-primary { padding: 0.45rem 1rem; font-size: 0.95rem; box-shadow: 3px 3px 0 var(--pink); }
.game-card-actions .btn-secondary { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
@media (max-width: 640px) {
  .modal-card.game-modal { height: auto; max-height: 92dvh; }
  .game-card { grid-template-columns: 4.2rem 1fr; }
}
/* ---------- hra v Party room (R-078): panel na ploche, ovládač, tlačidlá hostiteľa, štart ----------
   Javisko (otázka, odhalenie, poradie, štatistiky) kreslí activity-view.js s vlastným CSS (to isté na TV). */
.game-start, .game-invite { flex: none; padding: 0.45rem 1.1rem; font-size: 1rem; }
.btn-primary.game-start, .game-invite { box-shadow: 3px 3px 0 var(--pink); }
.game-start[hidden] { display: none; }
@media (max-width: 640px) { .game-start, .game-invite { padding: 0.35rem 0.9rem; font-size: 0.92rem; } }
/* ---------- herný režim (R-089) ----------
   Karta hry vyplní plochu a stránka sa neposúva: hlavička, pás stavu (si na rade / čakáš / výsledok), obsah
   s tlačidlami dole a hlavné tlačidlo hostiteľa. Avatary sú počas hry tenký pás nad kartou, na počítači
   rad pod kartou (R-098; dlaždice z room.js, značky kreslí ActView.paintMarks cez Act.decorate). */
.act { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(46rem, 100%); min-height: 0; padding: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 5px 5px 0 var(--game, var(--pink)); --ax-fs: 15px; }
.act[hidden] { display: none; }
body.has-act .stage-wrap { justify-content: flex-start; gap: 0.55rem; padding: 0.6rem 0.8rem 0.9rem; }
body.has-act .stage-wrap > .act { flex: 1 1 auto; }
/* R-113: počas hry je rámček vzhľadu plochy pod kartou hry (len zdobí pozadie), karta dostane celé miesto
   (predtým okraj 2,6 rem ako mimo hry). Bez témy sa bodkovaný papier plochy presunie pod rámček. */
body.has-act .scene-frame-layer { z-index: 0; }
body.has-act.has-frame:not(.has-scene) .stage-wrap { background: transparent; }
body.has-act.has-frame:not(.has-scene) .scene-layer { background-color: var(--paper); background-image: radial-gradient(color-mix(in srgb, var(--pink) 30%, transparent) 1.2px, transparent 1.6px); background-size: 18px 18px; }
body.has-act .stage-hint { display: none; }
/* hlavička: hra a kolo, Scores, ⋯ hostiteľa (ostatní návod) */
.act-top { display: flex; align-items: center; gap: 0.6rem; min-width: 0; padding: 0.55rem 0.65rem 0.55rem 0.75rem; }
.act-top-art { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--game, var(--pink)) 30%, var(--paper)); }
.act-top-art svg { width: 84%; height: 84%; }
.act-top-title { display: grid; flex: 1; min-width: 0; gap: 0.05rem; }
.act-top-title b { overflow: hidden; font-family: var(--display); font-size: 1.02rem; font-weight: 860; font-variation-settings: "wdth" 108; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.act-top-title small { overflow: hidden; color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.act-top-tools { display: flex; flex: none; gap: 0.4rem; }
.act-top .act-icon { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; }
.act-top .act-icon svg { flex: none; width: 18px; height: 18px; }
.act-top .act-icon:hover { box-shadow: 3px 3px 0 var(--game, var(--pink)); }
.act-top .act-icon[aria-expanded="true"], .act-top .act-icon[aria-expanded="true"]:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.act-top .act-icon:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* pás stavu: farba aj nápis (nikdy len farba) */
.act-say { display: flex; align-items: center; gap: 0.5rem 0.8rem; min-width: 0; padding: 0.7rem 0.9rem; border-block: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); }
.act-say.is-turn { background: var(--yellow); color: var(--on-accent); }
.act-say.is-result { background: color-mix(in srgb, var(--game, #00a95c) 30%, var(--paper)); }
.act-say.is-paused { background: var(--paper-2); color: var(--ink); }
.act-say-main { display: grid; flex: 1; gap: 0.12rem; min-width: 0; }
.act-say-tag { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; font-weight: 800; }
.act-say-tag svg { flex: none; width: 16px; height: 16px; }
.act-say-title { margin: 0; font-family: var(--display); font-size: 1.4rem; font-weight: 880; font-variation-settings: "wdth" 106; line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.act-say-text { margin: 0; font-size: 0.9rem; line-height: 1.35; }
.act-say.is-wait .act-say-text, .act-say.is-result .act-say-text { color: var(--ink-soft); }
.act-say-side { flex: none; display: grid; justify-items: end; gap: 0.4rem; }
.act-say .ax-timer { min-width: 0; }
.act-say .ax-bar { width: 4.6em; }
.act-say.is-turn .ax-bar { border-color: var(--on-accent); background: #fff; }
/* obsah a tlačidlá dole (pri palci); keď sa nezmestí, posúva sa len toto */
.act-main { display: flex; flex-direction: column; gap: 0.8rem; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.9rem; }
.act-main .ax { gap: 0.7em; }
/* v appke otázka o niečo menšia ako na TV, nech sa zmestí aj s tlačidlami */
.act-main .ax-q { font-size: 1.32em; }
.act-main .ax-q.is-small { font-size: 1.02em; }
.act-main .act-yn-btn { min-height: 3rem; }
.act-est-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.act-est-row .act-range { flex: 1 1 12rem; }
.act-est-row .act-lock { margin-left: auto; }
.act-ctrl { display: grid; gap: 0.6rem; margin-top: auto; }
/* hlavné tlačidlo hostiteľa */
.act-host { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem 0.75rem; border-top: 2px solid var(--ink); background: var(--paper-2); }
.act-host .btn-primary { padding: 0.55rem 1.2rem; font-size: 1rem; box-shadow: 3px 3px 0 var(--pink); }
.act-host .act-next { flex: 1 1 auto; min-height: 3rem; font-size: 1.05rem; }
.act-host-tag { flex: none; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: 0.72rem; font-weight: 700; }
.act-host .btn-secondary { padding: 0.5rem 0.9rem; font-size: 0.92rem; }
.act-host button:disabled { cursor: default; opacity: 0.6; }
/* okienko Scores / ⋯ pod hlavičkou */
.act-pop { position: absolute; top: 3.5rem; right: 0.6rem; z-index: 6; display: grid; align-content: start; gap: 0.3rem; width: min(19rem, calc(100% - 1.2rem)); max-height: calc(100% - 4.2rem); overflow-y: auto; padding: 0.55rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 4px 4px 0 var(--game, var(--pink)); --ax-fs: 14px; }
.act-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.act-pop-title { margin: 0 0 0 0.25rem; font-family: var(--display); font-size: 1rem; font-weight: 860; }
.act-pop-close { cursor: pointer; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); }
.act-pop-close:hover { background: var(--paper-2); }
.act-pop-close svg { width: 18px; height: 18px; }
.act-menu-item { cursor: pointer; display: block; width: 100%; padding: 0.6rem 0.75rem; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-weight: 650; text-align: left; }
.act-menu-item:hover:not(:disabled), .act-menu-item:focus-visible { background: var(--paper-2); }
.act-menu-item.is-confirm, .act-menu-item.is-confirm:hover:not(:disabled) { border-color: var(--on-accent); background: var(--pink); color: var(--on-accent); }
.act-menu-item:disabled { cursor: default; opacity: 0.55; }
/* avatary počas hry (R-098): na mobile pás nad kartou, od 900 px rad pod kartou ako na TV. Body nad hlavou,
   fajka (už odpovedal) a tím kreslí ActView.paintMarks rovnako v appke aj na TV; veľkosť podľa --axm-fs. */
body.has-act #stage { order: -1; flex: none; flex-wrap: nowrap; justify-content: flex-start; align-content: normal; gap: 0.1rem 0.3rem; width: min(46rem, 100%); max-width: none; padding: 16px 6px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; --tile: 40px; --axm-fs: 10.5px; }
body.has-act #stage::-webkit-scrollbar { display: none; }
body.has-act #stage > .tile:first-child { margin-left: auto; }
body.has-act #stage > .tile:last-child { margin-right: auto; }
body.has-act #stage .tile { flex: none; width: 3.7rem; gap: 0.1rem; }
body.has-act #stage .avatar { margin-bottom: 7px; }
body.has-act #stage .avatar::before, body.has-act #stage .avatar::after { inset: -5px; border-width: 3px; }
body.has-act #stage .tile-name { padding: 0 0.3rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; }
body.has-act #stage .tile-meta, body.has-act #stage .tile-action { display: none; }
/* R-115, R-116: kto je hostiteľ, je vidieť aj počas hry. Značka host je nálepka „pod nohami“ avatara (na 6 hodinách,
   ako body nad hlavou na 12), takže pod menom nič nepribudne. Pevné farby ako bublina bodov (v oboch motívoch). */
body.has-act #stage .tile { position: relative; }
body.has-act #stage .tile.is-host .tile-meta { display: block; position: absolute; left: 50%; top: var(--tile); z-index: 3; max-width: none; transform: translate(-50%, -64%) rotate(-5deg); pointer-events: none; }
body.has-act #stage .tile-meta .tile-you, body.has-act #stage .tile-meta .tile-voice { display: none; }
body.has-act #stage .tile-meta .tile-host { display: block; margin: 0; padding: 0.06em 0.55em 0.1em; border: 0.15em solid #fff; border-radius: 999px; background: #1c2452; color: #fff; font-family: var(--display); font-size: max(9px, calc(var(--axm-fs) * 0.9)); font-weight: 860; letter-spacing: 0.03em; line-height: 1.1; white-space: nowrap; box-shadow: 0 0.12em 0.3em rgba(28, 36, 82, 0.35); }
/* R-116: hráči sú počas hry v jednom riadku aj na počítači; posúva sa prstom, ťahaním myšou alebo kolieskom
   (activity.js actStrip). Keď sa nezmestia, okraje sa stratia do strany (vidno, že je ich viac). */
body.has-act #stage.is-scroll { cursor: grab; }
body.has-act #stage.is-dragging { cursor: grabbing; }
body.has-act #stage.is-more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
body.has-act #stage.is-more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
body.has-act #stage.is-more-l.is-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
body.has-act #stage .tile-muted, body.has-act #stage .tile-hand { right: -4px; bottom: -4px; width: 18px; min-width: 18px; border-width: 1.5px; box-shadow: none; }
body.has-act #stage .tile-hand { left: -4px; top: -4px; right: auto; bottom: auto; }
/* na ťahu: žltý obrys a meno (nikdy len farba: meno je zvýraznené aj tvarom) */
.tile.axm-spot .avatar { border-radius: 50%; outline: 3px solid var(--yellow); outline-offset: 3px; }
.tile.axm-spot .tile-name { background: var(--yellow); color: var(--on-accent); }
/* hlášky počas hry hore pod lištou, nie cez tlačidlá hry dole */
body.has-act .toast, body.has-act .mic-notice { top: calc(60px + var(--sat)); bottom: auto; }
/* slabé pripojenie (R-096) je hore; hlášky hry idú pod neho */
body.has-act.has-net .toast, body.has-act.has-net .mic-notice { top: calc(126px + var(--sat)); }
body.has-act.has-mic-notice .toast { top: var(--notice-bottom, 140px); bottom: auto; }
@media (max-width: 640px) { body.has-act .toast, body.has-act .mic-notice { top: calc(54px + var(--sat)); } body.has-act.has-net .toast, body.has-act.has-net .mic-notice { top: calc(124px + var(--sat)); } }
/* počítač (R-098): karta hore, hráči v rade pod ňou ako na TV (predtým zoznam s bodmi vpravo) */
@media (min-width: 900px) {
  /* R-091: karta a hráči spolu v strede plochy (aj zvisle); karta je vysoká ako obsah, najviac čo ostane */
  body.has-act .stage-wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, max-content) auto; justify-items: center; align-content: center; gap: 0.6rem; padding: 1.2rem 1.5rem 0.9rem; }
  body.has-act .stage-wrap > .act { grid-row: 1; width: min(50rem, 100%); max-height: 100%; }
  /* veľkosť avatarov podľa výšky okna: karta musí mať prednosť (720 px výšky = 46 px, 1080 = 76 px) */
  body.has-act #stage { grid-row: 2; flex-wrap: nowrap; justify-content: flex-start; gap: 0.3rem 1rem; width: 100%; max-width: 72rem; padding: calc(var(--axm-fs) * 1.5) 0.5rem 2px; overflow-x: auto; overflow-y: hidden; --tile: clamp(44px, 6.4vh, 76px); --axm-fs: clamp(11px, 1.35vh, 15px); }
  body.has-act #stage .tile { width: calc(var(--tile) + 2.6rem); }
  body.has-act #stage .avatar { margin-bottom: 8px; }
  body.has-act #stage .tile-name { max-width: 100%; font-size: 0.86rem; }
  body.has-act #stage .tile-muted { width: 22px; min-width: 22px; }
}
/* nízky počítač (R-098, 1280 × 720, 1366 × 768): rad hráčov tesnejší, mená len pri hráčovi na ťahu (celé meno je
   v popise), karta s menšími okrajmi, aby sa zmestila bez posúvania */
@media (min-width: 900px) and (max-height: 820px) {
  body.has-act .stage-wrap { gap: 0.25rem; padding: 0.45rem 1.2rem 0.4rem; }
  body.has-act #stage { --tile: 40px; --axm-fs: 10.5px; gap: 0.2rem 0.7rem; }
  body.has-act #stage .tile { width: calc(var(--tile) + 1.8rem); }
  body.has-act #stage .avatar { margin-bottom: 6px; }
  body.has-act #stage .tile-name { display: none; font-size: 0.74rem; }
  body.has-act #stage .tile.axm-spot .tile-name { display: block; }
  .act-top { padding-block: 0.4rem; }
  .act-top-art, .act-top .act-icon { height: 2.15rem; }
  .act-top-art { width: 2.15rem; }
  .act-say { padding-block: 0.4rem; }
  .act-say-title { font-size: 1.25rem; }
  .act-main { gap: 0.55rem; padding: 0.55rem 0.9rem; }
  .act-host { padding-block: 0.5rem; }
  .act-host .act-next { min-height: 2.6rem; }
  .act-main .act-yn-btn { min-height: 2.7rem; }
  .act-main .ax { gap: 0.55em; }
  .act-main .ax-q { font-size: 1.2em; }
  .act-main .ax-big { font-size: 3.2em; }
}
/* veľká obrazovka (R-091): hra je hlavná vec na ploche, všetko o stupeň väčšie; od R-098 až od výšky 940 px,
   lebo pod kartou je aj rad hráčov */
@media (min-width: 1400px) and (min-height: 940px) {
  body.has-act .stage-wrap > .act { width: min(58rem, 100%); }
  body.has-act .stage-wrap { gap: 0.8rem; }
  .act { --ax-fs: 17px; border-radius: 20px; box-shadow: 6px 6px 0 var(--game, var(--pink)); }
  .act-top { gap: 0.8rem; padding: 0.75rem 0.9rem 0.75rem 1rem; }
  .act-top-art { width: 2.9rem; height: 2.9rem; border-radius: 12px; }
  .act-top-title b { font-size: 1.22rem; }
  .act-top-title small { font-size: 0.88rem; }
  .act-top .act-icon { min-width: 2.7rem; height: 2.7rem; font-size: 0.95rem; }
  .act-say { gap: 0.6rem 1rem; padding: 0.95rem 1.25rem; }
  .act-say-tag { font-size: 0.88rem; }
  .act-say-tag svg { width: 18px; height: 18px; }
  .act-say-title { font-size: 1.85rem; }
  .act-say-text { font-size: 1.02rem; }
  .act-main { gap: 1rem; padding: 1.25rem; }
  .act-host { padding: 0.85rem 1.25rem 0.95rem; }
  .act-host .act-next { min-height: 3.5rem; font-size: 1.18rem; }
  .act-host-tag { font-size: 0.8rem; }
  .act-main .act-yn-btn { min-height: 3.7rem; font-size: 1.3rem; }
  .act-main .act-num { min-width: 3.2rem; height: 3.2rem; font-size: 1.25rem; }
  .act-main .act-opt { padding: 0.95rem 1.1rem; font-size: 1.08rem; }
  .act-main .act-go, .act-main .act-skip { min-height: 4.2rem; font-size: 1.5rem; }
  .act-main .act-big-go { min-height: 3.8rem; font-size: 1.15rem; }
  .act-main .act-lock { padding: 0.75rem 2rem; font-size: 1.08rem; }
  .act-main .act-link { font-size: 0.98rem; }
  body.has-act #stage .tile-name { font-size: 0.95rem; }
}
/* R-113: hra so stolom (Flip Deck), karta je hlavná vec. Stav je jeden tenký riadok (štítok Your turn / Waiting,
   nadpis a krátky pokyn za sebou), stôl vyplní zvyšok karty hry a tlačidlá hráča sú priamo pod kartou, len také
   široké ako ona. Tiché záložné tlačidlo hostiteľa je malé vpravo v riadku stavu. Bez stĺpca vpravo: pre toho,
   kto čaká, bol prázdny a tlačidlá boli ďaleko od karty. */
/* nízke okno (telefón naležato): karta hry ostane čitateľná, plocha sa radšej posunie */
.act.is-table { min-height: 18rem; }
.act.is-table .act-say { gap: 0.4rem 0.8rem; padding: 0.55rem 0.9rem; }
.act.is-table .act-say-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.55rem; }
.act.is-table .act-say-tag { align-self: center; padding: 0.1rem 0.55rem 0.1rem 0.45rem; border: 1.5px solid currentColor; border-radius: var(--radius-pill); font-size: 0.74rem; white-space: nowrap; }
.act.is-table .act-say-tag svg { width: 14px; height: 14px; }
.act.is-table .act-say-title { font-size: 1.22rem; }
.act.is-table .act-say-text { font-size: 0.9rem; }
.act.is-table .act-say-side { display: flex; align-items: center; gap: 0.5rem; }
.act.is-table .act-main { gap: 0.7rem; padding: 0.7rem 0.9rem 0.9rem; }
.act.is-table .act-stage { flex: 1 1 0; min-height: 11rem; }
.act.is-table .act-stage > .ax { height: 100%; }
.act.is-table .act-ctrl { align-self: center; width: min(100%, 30rem); }
/* kto čaká, riadok stavu nevidí: kto je na ťahu, ukazuje žltý avatar (R-098); text ostáva pre čítačku */
.act.is-table .act-say.is-hush { padding: 0; border-bottom: 0; }
.act.is-table .act-say.is-hush > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* tiché tlačidlo hostiteľa v hlavičke („Flip for Bo“, „Skip turn“) */
.act-top .act-host-skip { max-width: 11rem; }
.act-top .act-host-skip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* telefón naležato: tlačidlá vedľa stola, karta má celú výšku a nič sa vnútri neposúva */
@media (max-height: 500px) and (min-width: 600px) {
  .act.is-table .act-main { flex-direction: row; align-items: center; }
  .act.is-table .act-stage { align-self: stretch; min-height: 0; }
  .act.is-table .act-ctrl { flex: none; width: 12rem; margin: 0; }
}
/* počítač: karta hry so stolom vyplní výšku plochy nad radom hráčov (najviac 50 rem) */
@media (min-width: 900px) {
  body.has-act .stage-wrap:has(> .act.is-table) { grid-template-rows: minmax(0, 1fr) auto; }
  body.has-act .stage-wrap > .act.is-table { align-self: center; height: min(100%, 50rem); }
}
@media (min-width: 1400px) and (min-height: 940px) {
  .act.is-table .act-say { padding: 0.7rem 1.2rem; }
  .act.is-table .act-say-tag { font-size: 0.82rem; }
  .act.is-table .act-say-title { font-size: 1.45rem; }
  .act.is-table .act-say-text { font-size: 1rem; }
  .act.is-table .act-main { padding: 0.9rem 1.2rem 1.1rem; }
  .act.is-table .act-ctrl { width: min(100%, 34rem); }
  body.has-act .stage-wrap > .act.is-table { height: min(100%, 56rem); }
}
/* čakáreň (R-081): avatary menšie a nad kartou čakárne, nech ich nezakrýva */
body.has-lobby { --tile: clamp(52px, 10vmin, 104px); }
body.has-lobby .stage-hint { display: none; }
.act-ctrl-body { display: grid; gap: 0.6rem; }
.act-ctrl-title { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 860; font-variation-settings: "wdth" 106; }
.act-ctrl-text, .act-ctrl-note { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.act-ctrl-label { margin: 0.2rem 0 0; font-size: 0.92rem; font-weight: 700; }
.act-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.act-yn-btn { cursor: pointer; min-height: 3.4rem; padding: 0.6rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); font-family: var(--display); font-size: 1.15rem; font-weight: 840; font-variation-settings: "wdth" 106; box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.act-yn-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.act-yn-btn.is-yes[aria-pressed="true"] { background: var(--pink); color: var(--on-accent); box-shadow: 3px 3px 0 var(--blue); }
.act-yn-btn.is-no[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--pink); }
.act-nums { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.act-num { cursor: pointer; min-width: 2.75rem; height: 2.75rem; padding: 0 0.5rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); font-family: var(--display); font-size: 1.1rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.act-num[aria-pressed="true"] { background: var(--yellow); color: var(--on-accent); box-shadow: 2px 2px 0 var(--pink); }
.act-range { display: flex; align-items: center; gap: 0.75rem; }
.act-range input { flex: 1; accent-color: var(--pink); }
.act-range b { min-width: 2.5ch; font-family: var(--display); font-size: 1.4rem; text-align: center; }
.act-lock { justify-self: start; padding: 0.6rem 1.6rem; }
.act-lock:disabled { cursor: default; opacity: 0.6; }
.act-lock.is-locked:disabled { opacity: 1; background: #00a95c; color: #fff; box-shadow: 3px 3px 0 var(--blue); }
/* tip pri hre za stolom: pokojný riadok v karte, nie žltý pruh (R-085) */
.act-tip { display: grid; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 12px; background: var(--paper-2); color: var(--ink); }
.act-tip p { margin: 0; font-size: 0.9rem; font-weight: 600; }
.act-tip .btn-secondary { justify-self: start; }
.act-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.act-tip-close { justify-self: start; cursor: pointer; padding: 0; border: 0; background: none; color: inherit; font-size: 0.85rem; text-decoration: underline; }
.act-edit-lede { margin: 0 0 0.2rem; }
.act-setup-cast { margin-top: 0.2rem; }
.act-tv { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-left: auto; }
.act-tv-label { color: var(--ink-soft); font-size: 0.8rem; font-weight: 700; }
.act-tv-btn { cursor: pointer; padding: 0.25rem 0.65rem; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); font-size: 0.8rem; font-weight: 650; }
.act-tv-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* okno so štartom hry */
.modal-card.act-modal { width: min(32rem, 100%); height: auto; max-height: 92vh; }
.act-modal .modal-title { margin-right: auto; }
.act-setup-intro { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.8rem; align-items: start; }
.act-setup-art { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.act-setup-art svg { width: 84%; height: 84%; }
.act-setup-pitch { margin: 0 0 0.2rem; font-family: var(--display); font-size: 1.1rem; font-weight: 820; line-height: 1.2; }
.act-setup-intro .hint { margin: 0; }
.act-seg { display: grid; gap: 0.35rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.act-seg legend { margin-bottom: 0.35rem; padding: 0; font-size: 0.92rem; font-weight: 700; }
.act-seg-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.act-seg-btn { cursor: pointer; padding: 0.45rem 0.9rem; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper); font-weight: 650; }
.act-seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--pink); }
.act-seg .hint { margin: 0; }
.act-setup-foot { position: sticky; bottom: -1.6rem; display: grid; justify-items: start; gap: 0.6rem; margin: 0 -1.35rem -1.6rem; padding: 0.8rem 1.35rem 1.2rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: var(--paper); }
@media (max-width: 640px) { .act-setup-foot { bottom: calc(-1.5rem - env(safe-area-inset-bottom)); margin: 0 -1rem calc(-1.5rem - env(safe-area-inset-bottom)); padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom)); } }
.act-setup-foot .hint { margin: 0; }
/* čakáreň hry (R-081): karta dole nad lištou, tam kde sú hlášky; hlášky idú nad ňu */
/* čakáreň (R-091): na počítači karta v ploche hneď pod avatarmi (spolu v strede), na telefóne dole pri palci;
   kam patrí, rozhoduje Act.placeLobby (na telefóne je mimo plochy, nad rámčekom vzhľadu) */
.act-lobby {
  display: grid;
  gap: 0.6rem;
  width: min(34rem, 100%);
  box-sizing: border-box;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--game, var(--pink));
  animation: lobby-in 220ms ease-out;
}
@keyframes lobby-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.act-lobby[hidden] { display: none; }
@media (min-width: 641px) {
  body.has-lobby .stage-wrap { justify-content: center; }
}
/* R-111: výber hry (pás hry) a čakáreň sú okno nad plochou: v strede, môžu prekryť avatary.
   Plocha za nimi jemne zbledne (tieň s veľkým rozpätím, plocha ho oreže), avatary ostanú vidieť. */
@media (min-width: 641px) {
  .game-bar, .act-lobby {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 30;
    margin: 0;
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    box-shadow: 4px 4px 0 var(--game, var(--pink)), 0 18px 44px rgba(20, 24, 60, 0.26), 0 0 0 100vmax color-mix(in srgb, var(--paper) 28%, transparent);
    animation: center-in 220ms ease-out;
  }
  .game-bar { width: min(36rem, calc(100% - 2rem)); padding: 0.8rem 0.85rem; }
  .act-lobby { width: min(34rem, calc(100% - 2rem)); }
  body.has-frame .game-bar, body.has-frame .act-lobby { max-height: calc(100% - 5.2rem); }
}
/* R-112: vlastný názov; rovnaké meno modal-in prepísalo animáciu všetkých okien (.modal-card) a tie pri otvorení
   skočili doľava hore a „rástli“ na miesto */
@keyframes center-in { from { transform: translate(-50%, calc(-50% + 12px)); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
/* na telefóne je pás hry dole pri palci (ako čakáreň), plocha nad ním ostane voľná */
@media (max-width: 640px) {
  .game-bar {
    position: fixed;
    left: 50%;
    bottom: calc(88px + var(--sab));
    z-index: 46;
    width: min(34rem, calc(100vw - 1.5rem));
    margin: 0;
    transform: translateX(-50%);
    box-shadow: 4px 4px 0 var(--game, var(--pink)), 0 12px 32px rgba(20, 24, 60, 0.24);
    animation: notice-in 220ms ease-out;
  }
  body.has-gamebar .stage-wrap { justify-content: flex-start; padding-bottom: calc(var(--bar-h, 140px) + 1.5rem); }
  body.has-gamebar .toast { bottom: calc(var(--bar-h, 140px) + 100px + var(--sab)); }
  body.has-gamebar .mic-notice { bottom: calc(var(--bar-h, 140px) + 96px + var(--sab)); }
}
@media (max-width: 440px) { .game-bar { bottom: calc(74px + var(--sab)); } }
@media (max-width: 640px) {
  .act-lobby {
    position: fixed;
    left: 50%;
    bottom: calc(88px + var(--sab));
    z-index: 46;
    width: min(34rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    transform: translateX(-50%);
    animation: notice-in 220ms ease-out;
  }
  body.has-lobby .stage-wrap { justify-content: flex-start; padding-bottom: calc(var(--lobby-h, 200px) + 1.5rem); }
  body.has-lobby .toast { bottom: calc(var(--lobby-h, 200px) + 100px + var(--sab)); }
  body.has-lobby .mic-notice { bottom: calc(var(--lobby-h, 200px) + 96px + var(--sab)); }
}
.act-lobby-head { display: flex; align-items: center; gap: 0.7rem; }
.act-lobby-art { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 2px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.act-lobby-art svg { width: 84%; height: 84%; }
.act-lobby-title { display: grid; gap: 0.05rem; min-width: 0; }
.act-lobby-title b { font-family: var(--display); font-size: 1.1rem; font-weight: 860; line-height: 1.15; }
.act-lobby-title small { color: var(--ink-soft); font-size: 0.82rem; }
.act-lobby-count { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.75rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
.act-lobby-count.is-ready { background: color-mix(in srgb, var(--game, #00a95c) 16%, var(--paper)); }
.act-lobby-num { flex: none; font-family: var(--display); font-size: 2.3rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.act-lobby-num small { font-size: 0.5em; color: var(--ink-soft); font-weight: 800; }
.act-lobby-col { display: grid; gap: 0.35rem; min-width: 0; }
.act-lobby-col .ax-dots { justify-content: flex-start; font-size: 14px; }
.act-lobby-msg { margin: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.35; }
.act-lobby .act-lobby-avs { display: flex; flex-wrap: wrap; gap: 0.3rem; width: auto; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.act-lobby .act-lobby-avs li { display: block; }
.act-lobby .act-lobby-avs .ax-av { display: block; width: 2rem; height: 2rem; }
/* tip pri stole je v čakárni na jeden riadok, nech karta nezakryje plochu */
.act-lobby .act-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.5rem 0.65rem; }
.act-lobby .act-tip p { flex: 1 1 14rem; margin: 0; font-size: 0.85rem; }
.act-lobby .act-tip .btn-secondary { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.act-lobby-set { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }
.act-lobby-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.act-lobby .act-play { min-width: 6.5rem; }
.act-lobby .act-tip { margin: 0; }
@media (max-width: 440px) {
  .act-lobby { bottom: calc(74px + var(--sab)); padding: 0.7rem; }
  .act-lobby-num { font-size: 2rem; }
  body.has-lobby .toast { bottom: calc(var(--lobby-h, 200px) + 84px + var(--sab)); }
}
/* odpočítavanie (R-081): cez celú obrazovku, nič neblokuje */
.act-count { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(3px); pointer-events: none; }
.act-count[hidden] { display: none; }
.act-count-in { --ax-fs: clamp(16px, 4.2vmin, 30px); justify-items: center; width: auto; text-align: center; }
.act-count-name { margin: 0; font-family: var(--display); font-size: 1.4em; font-weight: 880; }
.act-count .ax-cd { min-width: 10em; min-height: 10em; }
@media (max-width: 640px) {
  .act { border-radius: 14px; box-shadow: 4px 4px 0 var(--game, var(--pink)); --ax-fs: 14px; }
  body.has-act .stage-wrap { gap: 0.4rem; padding: 0.45rem 0.6rem 0.7rem; }
  .act-say { padding: 0.6rem 0.75rem; }
  .act-say-title { font-size: 1.22rem; }
  .act-main { gap: 0.7rem; padding: 0.75rem; }
  .act-host { padding: 0.55rem 0.75rem 0.65rem; }
  /* tajná kartička opisovača tesnejšie, nech sa zmestí aj s tlačidlami */
  .act-main .act-secret { gap: 0.35rem; padding: 0.7rem 0.8rem 0.8rem; }
  .act-main .act-secret-note { font-size: 0.82rem; line-height: 1.35; }
  .modal-card.act-modal { height: auto; max-height: 92dvh; }
}
/* nízky displej (malý telefón s lištami prehliadača): pás avatarov bez mien, menšia hlavička a pás stavu */
@media (max-height: 640px) and (max-width: 899px) {
  body.has-act #stage { --tile: 32px; --axm-fs: 9.5px; padding-top: 13px; }
  body.has-act #stage .tile { width: 2.9rem; }
  body.has-act #stage .tile-name { display: none; }
  body.has-act #stage .tile.axm-spot .tile-name { display: block; }
  .act-top { padding-block: 0.4rem; }
  /* R-113: tlačidlo Scores s nápisom nesmie mať pevnú šírku (nápis z neho vytŕčal) */
  .act-top-art { width: 2.1rem; height: 2.1rem; }
  .act-top .act-icon { min-width: 2.1rem; height: 2.1rem; padding-inline: 0.45rem; }
  .act-say { padding-block: 0.45rem; }
  .act-say-title { font-size: 1.1rem; }
  .act-say-text { font-size: 0.84rem; }
  .act-main { padding-block: 0.6rem; }
  .act-host .act-next { min-height: 2.6rem; }
}
/* úzky telefón: Scores len ako pohár (názov je v aria-label) */
@media (max-width: 440px) {
  .act-top .act-scores-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .act-top .act-scores-btn { padding: 0; }
}

/* ---------- R-082: návod ku hre (Manual) ---------- */
.game-manual, .act-manual { display: inline-flex; align-items: center; gap: 0.35rem; }
.game-manual svg, .act-manual svg, .act-setup-manual svg { flex: none; width: 18px; height: 18px; }
.game-bar-actions .game-manual { padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.game-card-actions .game-manual { padding: 0.35rem 0.8rem; font-size: 0.88rem; }
.game-manual.is-icon { justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; }
.game-manual.is-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.act-setup-manual { cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 0.9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.act-content-note { margin: -0.2rem 0 0; }
/* telefón: v páse a v paneli hry len kniha (názov je v aria-label) */
@media (max-width: 640px) {
  #gameManual { justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; }
  #gameManual span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.you-game-row { display: flex; align-items: stretch; gap: 0.4rem; }
.you-game-row .you-game { flex: 1; min-width: 0; }
/* návod vedľa hry: dlaždica rovnako vysoká ako hra, kniha a pod ňou nápis (nie okrúhle tlačidlo, nápis by z neho vytŕčal) */
.you-game-row .you-game-manual { flex: none; display: grid; place-items: center; align-content: center; gap: 0.15rem; width: auto; min-width: 3.6rem; height: auto; padding: 0.3rem 0.5rem; border-radius: 14px; font: inherit; font-size: 0.72rem; font-weight: 750; line-height: 1; }
.you-game-row .you-game-manual svg { width: 20px; height: 20px; }
.you-game-row .you-game-manual:hover { box-shadow: 3px 3px 0 var(--game, var(--pink)); }
.manual-modal-wrap { z-index: 57; }
.modal-card.manual-modal { width: min(34rem, 100%); height: auto; max-height: 92vh; }
.manual-modal .modal-title { margin-right: auto; }
.manual-modal .modal-body { gap: 0.9rem; }
.manual-top { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.8rem; align-items: center; }
.manual-art { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 14px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.manual-art svg { width: 84%; height: 84%; }
.manual-pitch { margin: 0; font-family: var(--display); font-size: 1.15rem; font-weight: 840; font-variation-settings: "wdth" 106; line-height: 1.2; }
.manual-meta { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.82rem; font-weight: 600; }
.manual-lead { margin: 0; font-size: 0.98rem; line-height: 1.55; }
.manual-sec { display: grid; gap: 0.45rem; padding-top: 0.75rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.manual-sec h3 { margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 840; font-variation-settings: "wdth" 104; }
.manual-sec p { margin: 0; font-size: 0.93rem; line-height: 1.55; }
.manual-steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; counter-reset: man; }
.manual-steps li { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.55rem; align-items: start; font-size: 0.93rem; line-height: 1.5; }
.manual-steps li::before { counter-increment: man; content: counter(man); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: #1c2452; font-family: var(--display); font-size: 0.8rem; font-weight: 900; }
.manual-items { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.15rem; font-size: 0.93rem; line-height: 1.5; }
.manual-items b { font-weight: 760; }
@media (max-width: 640px) { .modal-card.manual-modal { max-height: 92dvh; } }

/* ---------- R-082: ovládač hier Charade Parade a Spill It ---------- */
/* tajná kartička opisovača: tmavá ako karta v ruke, vždy rovnaká v svetlom aj tmavom motíve */
.act-secret { display: grid; justify-items: center; gap: 0.5rem; padding: 0.9rem 1rem 1rem; border: 2px solid #1c2452; border-radius: 16px; background: #1c2452; color: #fff; text-align: center; box-shadow: 4px 4px 0 var(--task, var(--yellow)); }
.act-secret-label { margin: 0; color: #c9cbe6; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; }
.act-secret-word { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 900; font-variation-settings: "wdth" 104; line-height: 1.1; text-wrap: balance; }
.act-secret .ax-task { border-color: #fff; background: #fff; color: #1c2452; font-size: 0.95rem; }
.act-secret .ax-task small { color: #4f5680; }
.act-secret-char { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 820; color: var(--task, #8fd0ff); }
.act-secret-note { margin: 0; color: #dfe0f2; font-size: 0.86rem; line-height: 1.4; }
.act-ctrl-body > .ax-task { justify-self: start; border-color: var(--ink); color: var(--ink); }
.act-ctrl-body > .ax-task svg { width: 1.5em; height: 1.5em; padding: 0.18em; border: 2px solid #1c2452; border-radius: 50%; background: var(--task, var(--yellow)); fill: none; stroke: #1c2452; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.act-ctrl-body .ax-task { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; border: 2px solid; border-radius: 999px; font-weight: 800; }
.act-ctrl-body .ax-task small { font-weight: 700; }
.act-secret .ax-task svg { width: 1.5em; height: 1.5em; padding: 0.18em; border: 2px solid #1c2452; border-radius: 50%; background: var(--task, var(--yellow)); fill: none; stroke: #1c2452; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.act-turn-btns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.6rem; }
.act-go, .act-skip { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3.6rem; padding: 0.6rem 0.9rem; border: 2px solid #1c2452; border-radius: 16px; font-family: var(--display); font-size: 1.3rem; font-weight: 880; font-variation-settings: "wdth" 108; transition: transform 80ms ease; }
.act-go { background: #00a95c; color: #fff; box-shadow: 4px 4px 0 var(--blue); }
.act-skip { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.act-go small, .act-skip small { font-size: 0.75em; font-weight: 800; opacity: 0.9; }
.act-go:active, .act-skip:active { transform: translate(2px, 2px); }
.act-go:disabled, .act-skip:disabled { cursor: default; opacity: 0.6; }
.act-link { justify-self: start; cursor: pointer; padding: 0.2rem 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 0.88rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.act-link:disabled { cursor: default; opacity: 0.5; }
.act-big-go { justify-self: stretch; min-height: 3.4rem; }
.act-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.5rem; }
.act-who-btn { cursor: pointer; display: grid; justify-items: center; gap: 0.3rem; padding: 0.55rem 0.3rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; }
.act-who-btn .ax-av { position: relative; width: 2.8rem; height: 2.8rem; }
.act-who-btn .ax-av .avatar-art { position: absolute; inset: 0; border: 2px solid #1c2452; border-radius: 50%; background: var(--av, var(--pink)); container-type: inline-size; }
.act-who-btn span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-who-btn:active { transform: translate(1px, 1px); }
.act-opts { display: grid; gap: 0.55rem; }
.act-opt { cursor: pointer; display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; align-items: start; padding: 0.75rem 0.85rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.98rem; font-weight: 650; line-height: 1.35; text-align: left; box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 25%, transparent); }
.act-opt b { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid #1c2452; border-radius: 50%; background: var(--yellow); color: #1c2452; font-family: var(--display); font-weight: 900; }
.act-opt[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--pink); }
.act-opt:disabled { cursor: default; }
/* hra v obchode a v You → Room */
.game-preview { display: grid; place-items: center; height: 4.6rem; border: 2px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.game-preview svg { display: block; height: 88%; width: auto; aspect-ratio: 1; }
.you-games { display: grid; gap: 0.45rem; }
.you-game { cursor: pointer; display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.you-game:disabled { cursor: default; opacity: 1; }
.you-game:not(:disabled):hover { box-shadow: 3px 3px 0 var(--game, var(--pink)); }
.you-game[aria-pressed="true"] { box-shadow: 3px 3px 0 var(--game, var(--pink)); }
.you-game-art { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--game, var(--pink)) 28%, var(--paper)); }
.you-game-art svg { width: 84%; height: 84%; }
.you-game-text { display: grid; gap: 0.05rem; min-width: 0; }
.you-game-text b { font-family: var(--display); font-weight: 820; }
.you-game-text small { color: var(--ink-soft); font-size: 0.78rem; }
.cast-modal .modal-title { margin-right: auto; }
/* R-096: riadky podľa obsahu; inak sa pri posúvaní okna riadok s .seg (overflow: hidden) stiahne na nulu */
.cast-modal .modal-body { gap: 0.6rem; grid-auto-rows: max-content; }
.cast-modal .cast-theme { margin-bottom: 0.2rem; }
.cast-modal .modal-body > .hint { margin: 0; }
.cast-on { display: grid; gap: 0.55rem; }
.cast-on[hidden] { display: none; }
.cast-state[hidden] { display: none; }
/* párovanie TV (R-076) */
.cast-pairbox { display: grid; gap: 0.45rem; margin: 0; padding: 0.75rem 0.8rem 0.85rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper-2); }
.cast-pair-title { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 840; }
.cast-pairbox .hint { margin: 0; }
.cast-tv-url { color: var(--ink); font-family: var(--display); font-size: 1.02rem; font-weight: 820; letter-spacing: 0.01em; white-space: nowrap; }
.cast-pair-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cast-pair-input { flex: 1 1 8rem; min-width: 0; font-family: var(--display); font-size: 1.35rem !important; font-weight: 820; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; text-align: center; }
.cast-pair-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1.1rem; font-size: 1.02rem; }
.cast-pair-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cast-pair-err { margin: 0; }
.cast-pair-err[hidden] { display: none; }
.cast-state { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; margin: 0; padding: 0.3rem 0.85rem 0.3rem 0.7rem; border: 2px dashed var(--ink); border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9rem; }
.cast-state .live-dot { background: var(--ink-soft); animation: none; }
.cast-state.is-live { border-style: solid; border-color: var(--on-accent); background: var(--blue); color: #fff; }
.cast-state.is-live .live-dot { background: #fff; animation: live-blink 1.4s ease-in-out infinite; }
.cast-url { font-family: var(--display); font-size: 1rem !important; font-weight: 760; }
.cast-pass { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; padding: 0.6rem 0.8rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper-2); }
.cast-pass[hidden] { display: none; }
.cast-pass .field-label { flex-basis: 100%; }
.cast-pass-num { font-family: var(--display); font-size: 2rem; font-weight: 880; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; line-height: 1.1; }
.cast-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cast-opt { position: relative; cursor: pointer; }
.cast-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cast-opt span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.05rem 0.5rem; height: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }
.cast-opt svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cast-opt b { font-family: var(--display); font-weight: 800; }
.cast-opt small { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.3; }
.cast-opt input:checked + span { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--pink); }
.cast-opt input:checked + span small { color: inherit; opacity: 0.8; }
.cast-opt input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 2px; }
/* R-103: skupiny Sound a On the screen; hlasitosť hlasov a ambientu vedľa seba */
/* R-109: späť na zvuk hlasu (len keď je hlas upravený) */
.tune-reset { justify-self: start; margin: 0 0 0.2rem; font-size: 0.88rem; }
.tune-reset[hidden] { display: none; }
/* R-107: Natural / Same voice pod hlasmi */
.voice-mode { display: grid; gap: 0.4rem; margin: 0.2rem 0 0.4rem; }
.voice-mode .seg { justify-self: start; }
.voice-mode .hint { margin: 0; }
.cast-sub { margin: 0.55rem 0 0; font-family: var(--display); font-size: 1.05rem; font-weight: 840; }
.cast-vol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; }
.cast-vol[hidden] { display: none; }
.cast-vol .field { margin: 0; }
@media (max-width: 360px) { .cast-vol { grid-template-columns: 1fr; } }
.cast-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.cast-actions .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; }
.cast-actions .btn-primary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cast-actions [hidden] { display: none; }
.cast-stop { border-color: #f15060; color: inherit; }
.invite-modal .modal-title { margin-right: auto; }
@media (max-width: 640px) { .modal-card.invite-modal, .modal-card.cast-modal { height: auto; max-height: 92dvh; } }
.invite-modal .modal-body { gap: 0.55rem; }
.invite-mode {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.4rem;
  margin: 0;
  padding: 0.15rem 0.7rem 0.15rem 0.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.invite-mode.is-walkie { background: var(--blue); color: #fff; }
.invite-mode.is-party { background: var(--pink); color: var(--on-accent); }
.invite-mode.is-stage { background: var(--ink); color: var(--paper); }
.invite-mode svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.invite-modal .hint { margin: 0; }
.invite-modal .field-label { margin-top: 0.35rem; }
.invite-modal .text-input.is-masked { color: var(--ink-soft); font-style: italic; }