:root {
    --tai: #E8303A;        /* красное кольцо Таи из фильма */
    --tai-glow: rgba(255, 60, 70, .55);
    --mar: #2F7BF6;        /* синее кольцо Марго */
    --mar-glow: rgba(60, 130, 255, .55);
    --font: "SF Pro Rounded", ui-rounded, system-ui, -apple-system, sans-serif;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { height: 100%; }
  body {
    background: #05070d;
    color: #fff;
    font-family: var(--font);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Персонаж на весь экран: ожидание снизу, речь — поверх */
  .screen { position: fixed; inset: 0; }
  .screen video, .screen img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 20%);  /* точка фокуса героя задаётся на странице */
  }
  #talk { opacity: 0; transition: opacity .3s; }  /* мягкая склейка, если поза в конце фразы чуть отличается */
  #talk.on { opacity: 1; }
  .playback-status {
    position: fixed; top: max(80px, 12vmin); left: 5vmin; right: 5vmin;
    width: fit-content; max-width: 90vw; margin: auto; z-index: 3;
    padding: 12px 18px; border-radius: 16px;
    background: rgba(5, 8, 16, .85); color: #fff;
    font-size: clamp(16px, 2.5vmin, 22px); text-align: center;
    pointer-events: none;
  }
  .playback-status:empty { display: none; }
  .shade {
    position: absolute; inset: auto 0 0 0; height: 38%;
    background: linear-gradient(to top, rgba(3,5,10,.75), rgba(3,5,10,0));
    pointer-events: none;
  }

  /* Субтитр */
  .caption {
    position: fixed; left: 5vmin; right: 5vmin;
    bottom: calc(max(5vmin, env(safe-area-inset-bottom)) + clamp(96px, 14vmin, 160px) + 3vmin);
    display: flex; justify-content: center;
    pointer-events: none;
  }
  .caption span {
    max-width: 34em;
    padding: 1.6vmin 3vmin;
    border-radius: 2.4vmin;
    background: rgba(5, 8, 16, .62);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: clamp(18px, 2.9vmin, 30px);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    opacity: 0; transform: translateY(1vmin);
    transition: opacity .25s, transform .25s;
  }
  .caption.show span { opacity: 1; transform: none; }
  .caption.tai span { box-shadow: inset 0 0 0 2px var(--tai); }
  .caption.mar span { box-shadow: inset 0 0 0 2px var(--mar); }

  /* Кнопки */
  .buttons {
    position: fixed; left: 5vmin; right: 5vmin;
    bottom: max(5vmin, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: 3vmin;
  }
  .btn {
    appearance: none; border: 0; cursor: pointer;
    height: clamp(96px, 14vmin, 160px);
    border-radius: 3.2vmin;
    font: 800 clamp(30px, 5.8vmin, 62px)/1 var(--font);
    letter-spacing: .05em;
    color: #fff;
    transition: transform .08s, box-shadow .2s, filter .2s;
  }
  .btn.tai { background: var(--tai); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 1vmin 4vmin var(--tai-glow); }
  .btn.mar { background: var(--mar); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 1vmin 4vmin var(--mar-glow); }
  .btn:active, .btn.pressed { transform: scale(.97); }
  body.talking .btn { filter: saturate(.55) brightness(.8); }
  body.talking .btn.active { filter: none; }
  .btn.tai.active { box-shadow: 0 0 0 .5vmin #fff inset, 0 0 6vmin var(--tai-glow); }
  .btn.mar.active { box-shadow: 0 0 0 .5vmin #fff inset, 0 0 6vmin var(--mar-glow); }
  .caption .tr {
    display: block; margin-bottom: .35em;
    font-size: .58em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #FFD27A;
  }

/* Свечение героя в такт голосу (летучий камень): цвет переливается синий → голубой → золотой → сиреневый */
.voice-glow {
  position: absolute; z-index: 2; pointer-events: none;
  width: var(--size, 40vmin); height: var(--size, 40vmin);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(circle, rgba(120,190,255,.95) 0%, rgba(80,140,255,.55) 35%, rgba(60,90,255,0) 70%);
  filter: blur(6px);
  animation: glowhue 3.2s linear infinite;
}
@keyframes glowhue {
  0%   { filter: blur(6px) hue-rotate(0deg); }
  33%  { filter: blur(6px) hue-rotate(-40deg); }   /* голубой */
  66%  { filter: blur(6px) hue-rotate(170deg); }   /* золотой */
  100% { filter: blur(6px) hue-rotate(360deg); }
}