/* Енот Валера: кружок с енотом (картинка или нарисованный SVG) и пузырь с репликой.
   Пузырь — тёплый «бумажный» на зелёном сукне, чтобы реплика читалась как комикс поверх студии. */

.mc {
  --mc: 64px;
  --mc-paper: #FFF4DC;
  --mc-edge: #E2B062;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}
.mc-s { --mc: 44px; gap: 9px; }
.mc-l { --mc: 96px; gap: 14px; }
.mc-xl { --mc: 5.8em; gap: .9em; }
.mc-right { flex-direction: row-reverse; }
.mc-top { flex-direction: column-reverse; align-items: center; gap: 4px; }

/* кружок: зелёный софит и оранжевый ободок, как лампа на табло */
.mc-pic {
  flex: none;
  position: relative;
  display: block;
  width: var(--mc);
  height: var(--mc);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  color: inherit;
  font: inherit;
  background:
    radial-gradient(75% 60% at 50% 18%, rgba(255, 210, 140, .34), transparent 70%),
    radial-gradient(80% 80% at 50% 45%, #1C7A2C 0%, #0F4A17 62%, #08300F 100%);
  box-shadow:
    0 0 0 3px var(--orange),
    0 0 0 5px rgba(0, 0, 0, .35),
    0 0 22px rgba(255, 157, 28, .32),
    0 8px 18px rgba(0, 0, 0, .35);
}
.mc-s .mc-pic { box-shadow: 0 0 0 2px var(--orange), 0 0 0 4px rgba(0, 0, 0, .3), 0 0 14px rgba(255, 157, 28, .28); }
.mc-pic > img, .mc-pic > svg { display: block; width: 100%; height: 100%; }
.mc-pic > img { object-fit: cover; }
.mc-pic > svg { transform: translateY(5%) scale(1.06); transform-origin: 50% 100%; }
button.mc-pic { cursor: pointer; transition: transform .15s var(--ease-pop); }
button.mc-pic:hover { transform: scale(1.06) rotate(-4deg); }
button.mc-pic:active { transform: scale(.94); }
button.mc-pic:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* нарисованный енот */
.mc-svg .w, .mc-svg .lid { fill: #FFFDF6; }
.mc-svg .p { fill: #17110E; }
.mc-svg .g { fill: #fff; }
.mc-svg .arc { fill: none; stroke: #FFFDF6; stroke-width: 4.6; stroke-linecap: round; }
.mc-svg .m { fill: #3B140F; }
.mc-svg .t { fill: #fff; }
.mc-svg .tg { fill: #FF6F7D; }
.mc-svg .line { fill: none; stroke: #3B140F; stroke-width: 4; stroke-linecap: round; }
.mc-svg .tear { fill: #8FE6FF; }
.mc-svg .brows path { fill: none; stroke: #F4F0E8; stroke-width: 5; stroke-linecap: round; }

/* пузырь */
.mc-say {
  position: relative;
  min-width: 0;
  max-width: 44ch;
  margin: 0 0 4px;
  padding: 9px 14px 10px;
  border-radius: 16px;
  background: var(--mc-paper);
  color: var(--orange-ink);
  font: 600 14.5px/1.4 var(--font-ui);
  text-wrap: pretty;
  box-shadow: 0 3px 0 var(--mc-edge), 0 10px 24px rgba(0, 0, 0, .3);
}
.mc-nm {
  display: block;
  margin-bottom: 3px;
  font: 400 10px/1 var(--font-logo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C0640A;
}
.mc-txt { display: block; }
/* хвостик пузыря смотрит на енота */
.mc-say::before {
  content: '';
  position: absolute;
  bottom: calc(var(--mc) * .22);
  width: 0;
  height: 0;
  border: 8px solid transparent;
}
.mc-left .mc-say::before { left: -14px; border-right: 10px solid var(--mc-paper); border-left-width: 6px; }
.mc-right .mc-say::before { right: -14px; border-left: 10px solid var(--mc-paper); border-right-width: 6px; }
.mc-top .mc-say { margin: 0 0 10px; text-align: center; }
.mc-top .mc-say::before { left: 50%; bottom: -16px; margin-left: -8px; border-top: 10px solid var(--mc-paper); border-bottom-width: 6px; }

.mc-s .mc-say { padding: 7px 11px 8px; border-radius: 13px; font-size: 13.5px; box-shadow: 0 2px 0 var(--mc-edge), 0 6px 16px rgba(0, 0, 0, .25); }
.mc-s .mc-nm { display: none; }
.mc-s .mc-say::before { border-width: 6px; }
.mc-s.mc-left .mc-say::before { left: -11px; border-right-width: 8px; border-left-width: 5px; }
.mc-s.mc-right .mc-say::before { right: -11px; border-left-width: 8px; border-right-width: 5px; }
.mc-l .mc-say { padding: 12px 18px 13px; border-radius: 20px; font-size: 16.5px; }
.mc-l .mc-nm { font-size: 11px; }
.mc-xl .mc-say { max-width: 16em; padding: .65em 1em .75em; border-radius: 1em; font-size: 1.16em; box-shadow: 0 .18em 0 var(--mc-edge), 0 .7em 1.6em rgba(0, 0, 0, .35); }
.mc-xl .mc-nm { font-size: .5em; margin-bottom: .35em; }
.mc-xl .mc-pic { box-shadow: 0 0 0 .22em var(--orange), 0 0 0 .38em rgba(0, 0, 0, .35), 0 0 1.6em rgba(255, 157, 28, .4), 0 .6em 1.4em rgba(0, 0, 0, .4); }

/* реплика, которая сама исчезает: строка схлопывается, ничего не накрывая */
.mc-wrap { display: grid; grid-template-rows: 1fr; min-width: 0; transition: grid-template-rows .4s var(--ease-out), opacity .3s ease; }
.mc-wrap > .mc { min-height: 0; }
.mc-wrap.mc-gone { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.mc-wrap.mc-auto { animation: mc-gone .45s var(--ease-out) var(--mc-ms, 6s) forwards; }
.mc-wrap.mc-gone > .mc, .mc-wrap.mc-auto > .mc { overflow: hidden; padding: 6px 6px 2px; margin: -6px -6px -2px; }

@keyframes mc-gone { to { grid-template-rows: 0fr; opacity: 0; } }
@keyframes mc-pop { from { transform: scale(.35) rotate(-14deg); opacity: 0; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mc-say { from { transform: scale(.6) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mc-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.6px) rotate(-1.2deg); } }
@keyframes mc-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-10deg) scale(1.06); } 60% { transform: rotate(8deg); } }

@media (prefers-reduced-motion: no-preference) {
  .mc-pic { animation: mc-pop .5s var(--ease-pop) both; }
  .mc-say { animation: mc-say .36s var(--ease-pop) .14s both; transform-origin: 0 100%; }
  .mc-right .mc-say { transform-origin: 100% 100%; }
  .mc-top .mc-say { transform-origin: 50% 100%; }
  .mc-svg .head { animation: mc-bob 3.8s ease-in-out infinite; transform-origin: 80px 125px; transform-box: view-box; }
  .mc-poked .mc-pic { animation: mc-wiggle .5s ease; }
  .mc-poked .mc-say { animation: mc-say .3s var(--ease-pop) both; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-wrap.mc-auto { animation-duration: .01ms; }
}

/* ---------- где живёт Валера ---------- */

/* главная: приветствие под заголовком (новичку) или отдельной полосой (своим) */
.home-hello .home-mascot { margin-top: 6px; }
.home-mascot .mc-say { max-width: 52ch; font-size: 14.5px; }
.home-greet { display: flex; align-items: center; padding: 0 4px; }

/* плеер квиза: под вердиктом, в итогах, под формой */
.q-mc .mc-say, .q-mc-in .mc-say { max-width: none; }
.q-mc-in { margin: 2px 0 4px; }
.q-res .q-mc-res { width: 100%; max-width: 520px; margin: 2px auto 0; display: flex; justify-content: center; }
.q-res .q-mc-res .mc { text-align: left; }

/* комната: строчка в итогах раунда и игры */
.rm-mc { display: flex; justify-content: center; margin: 4px 0 2px; text-align: left; }
.rm-mc .mc-say { max-width: 40ch; }

/* экран ТВ: Валера в углу сцены, в лобби — справа внизу */
.tv-mc { position: absolute; z-index: 5; left: 1.4em; bottom: 1.3em; max-width: 70%; pointer-events: none; }
/* в лобби слева QR, справа шаги и игроки — свободен только правый верхний угол */
.tv.is-lobby .tv-mc { left: auto; right: 0; top: 0; bottom: auto; }
.tv.is-lobby .tv-mc .mc-say { max-width: 13em; }
.tv-mc:empty { display: none; }

/* дуэль: под строкой итогов, в отсчёте и после ставок */
.dm-mc { display: flex; justify-content: center; margin: 6px 0 0; text-align: left; }
.dm-mc .mc-say { max-width: 46ch; }
.dm-count .dm-mc { margin-top: 18px; }

@media (max-width: 899px) {
  .home-mascot .mc-say { font-size: 14px; }
  .mc-say { max-width: none; }
  .mc-l { --mc: 76px; }
  .mc-l .mc-say { font-size: 15px; padding: 10px 14px 11px; }
}