/*
 * Анимированные баннеры игры «Угадай слово» (vslovarike.ru/igra).
 * Разметка баннера — во фрагментах banner*.html, логика — igra-banners.js.
 * Все размеры в cqw (1cqw = 1% ширины баннера), поэтому баннер масштабируется целиком.
 * Без JS (или при «уменьшить движение» в системе) баннер показывается статично.
 */

.sib {
  --bg: #d9f1e2;
  --accent: #63a84f;
  --btn: #63a84f;
  --btn-dark: #4f8f3d;
  --glow: rgba(99, 168, 79, .25);
  --tile: #fdefc4;
  --tile-border: #d4a94a;
  --empty-border: #c4c4c4;
  --text: #2a2522;
  --shadow: rgba(60, 110, 70, .18);

  display: block;
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 2000 / 1116;
  margin: 0 auto;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}
.sib *, .sib *::before, .sib *::after { box-sizing: border-box; margin: 0; padding: 0; float: none; font-style: normal; }

.sib--green { }
.sib--blue {
  --bg: #fbefdc;
  --accent: #1b74e4;
  --btn: #0e86f5;
  --btn-dark: #0b6bd0;
  --glow: rgba(27, 116, 228, .15);
  --empty-border: #c6c6cc;
  --tile: #fdf0cc;
  --tile-border: #d8ac4c;
  --shadow: rgba(120, 90, 40, .14);
}

.sib-stage { display: block; position: absolute; inset: 0; transition: opacity .5s; }
.sib-out .sib-stage { opacity: 0; }

/* ---------- Статичная раскладка ---------- */

.sib-pill {
  position: absolute; left: 20cqw; top: 4.2cqw; z-index: 2;
  width: 60cqw; height: 9.4cqw; padding: 0 0 0.6cqw 1cqw;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 3.2cqw; letter-spacing: -0.02em; white-space: nowrap;
}
.sib-pill::before {
  /* Фигура «мазок»: высокий левый край с плавным скатом, правый ниже. Цвет — из --accent */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 91' preserveAspectRatio='none'%3E%3Cpath d='M8 14C30 6 200 1 330 1C450 1 560 4 585 8C595 10 598 16 598 24L599 62C599 70 594 73 586 74C470 80 250 89 70 90C40 90 26 84 18 70C8 52 2 32 2 22C2 17 4 15 8 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 91' preserveAspectRatio='none'%3E%3Cpath d='M8 14C30 6 200 1 330 1C450 1 560 4 585 8C595 10 598 16 598 24L599 62C599 70 594 73 586 74C470 80 250 89 70 90C40 90 26 84 18 70C8 52 2 32 2 22C2 17 4 15 8 14Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sib-num { display: inline-block; font-weight: inherit; color: inherit; }

.sib-card {
  display: block; position: absolute; left: 22cqw; top: 12.2cqw;
  width: 56cqw; height: 36.8cqw;
  background: #fff; border-radius: 2cqw;
  box-shadow: 0 1.2cqw 3cqw var(--shadow);
}

.sib-q {
  display: block; position: absolute; top: 5cqw; left: 0; width: 100%;
  text-align: center; font-weight: 700; font-size: 2.6cqw; color: var(--text);
}

.sib-tiles {
  /* Клетки сжимаются, если слово длинное (до 7 букв помещаются без проблем) */
  position: absolute; top: 12.2cqw; left: 2.5cqw; right: 2.5cqw; height: 7.7cqw;
  display: flex; justify-content: center; align-items: center; gap: 0.9cqw;
  perspective: 40cqw;
}
.sib-tile {
  flex: 0 1 7.5cqw; min-width: 0; aspect-ratio: 7.5 / 7.7;
  border-radius: 0.8cqw;
  border: 0.17cqw solid var(--empty-border);
  background: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 4cqw; color: var(--text);
  transition: background .25s, border-color .25s;
}
.sib-open { background: var(--tile); border-color: var(--tile-border); }

.sib-btn {
  display: grid; place-items: center;
  position: absolute; left: 50%; top: 25.4cqw;
  width: 28.6cqw; height: 8.4cqw; margin-left: -14.3cqw;
  overflow: hidden;
  border-radius: 1.4cqw; background: var(--btn);
  color: #fff; font-weight: 800; font-size: 4.2cqw; letter-spacing: 0.02em;
  box-shadow: 0 0.5cqw 0 var(--btn-dark);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.sib:hover .sib-btn, .sib.sib-press .sib-btn { background: var(--btn-dark); }
.sib.sib-press .sib-btn { transform: translateY(0.4cqw) scale(.97); box-shadow: 0 0.1cqw 0 var(--btn-dark); }

.sib-hand {
  position: absolute; left: 62cqw; top: 42cqw; z-index: 3;
  width: 9cqw !important; height: auto !important; max-width: none !important;
  transform: rotate(-18deg);
  transform-origin: 45% 0;
  filter: drop-shadow(0 0.4cqw 0.5cqw rgba(0, 0, 0, .14));
  pointer-events: none;
}

.sib-ripple {
  position: absolute; width: 4cqw; height: 4cqw; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: sib-ripple .6s ease-out forwards;
}

/* ---------- Режим «calm»: плавное появление, мягкая подсветка, редкое нажатие ---------- */

.sib-run[data-mode="calm"] .sib-pill { animation: sib-fade 1s .1s ease-out both; }
.sib-run[data-mode="calm"] .sib-card { animation: sib-fade 1s .3s ease-out both; }
.sib-run[data-mode="calm"] .sib-tile { animation: sib-show .6s ease-out both; }
.sib-run[data-mode="calm"] .sib-empty { animation: sib-show .6s ease-out both, sib-hint 3s ease-in-out infinite; }
.sib-run[data-mode="calm"] .sib-hand { opacity: 0; transition: opacity .8s, transform .35s ease-in-out; }
.sib-run[data-mode="calm"] .sib-hand.sib-on { opacity: 1; }
.sib-run[data-mode="calm"] .sib-hand.sib-on.sib-tap { transform: translate(-0.4cqw, -0.6cqw) rotate(-18deg) scale(.94); }

/* ---------- Режим «lively»: заставка, неверная попытка, нажатие, повтор ---------- */

.sib-run[data-mode="lively"] .sib-pill { animation: sib-drop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.sib-run[data-mode="lively"] .sib-card { animation: sib-pop .6s .15s cubic-bezier(.2, 1.2, .4, 1) both; }
.sib-run[data-mode="lively"] .sib-q { animation: sib-fade .5s .55s ease-out both; }
.sib-run[data-mode="lively"] .sib-tile { animation: sib-flip .45s ease-out both; }
.sib-run[data-mode="lively"] .sib-btn { animation: sib-fade .5s 1.6s ease-out both; }
.sib-run[data-mode="lively"] .sib-btn.sib-idle { animation: sib-breath 1.6s ease-in-out infinite; }
.sib-run[data-mode="lively"].sib-press .sib-btn { animation: none; }

.sib-run[data-mode="lively"] .sib-pill.sib-wiggle { animation: sib-wiggle .6s ease-in-out; }
.sib-run[data-mode="lively"] .sib-pill.sib-wiggle .sib-num { animation: sib-num .6s ease-in-out; }

.sib-run .sib-tile.sib-active { animation: none; border-color: var(--accent); box-shadow: 0 0 0 0.35cqw var(--glow); }
.sib-run .sib-tile.sib-active::after {
  content: ""; width: 0.25cqw; height: 4cqw; background: var(--accent);
  animation: sib-blink .8s steps(1) infinite;
}
.sib-run .sib-tile.sib-typed { animation: sib-type .2s ease-out; }
.sib-run .sib-tile.sib-wrong { background: #f6c9c4; border-color: #d9675b; }
.sib-run .sib-tile.sib-ask { color: #b9b9b9; animation: sib-ask 1.2s ease-in-out infinite; }
.sib-run .sib-tiles.sib-shake { animation: sib-shake .45s ease-in-out; }

.sib-run[data-mode="lively"] .sib-hand {
  transform: translate(30cqw, 20cqw) rotate(-18deg);
  transition: transform .9s cubic-bezier(.3, .8, .3, 1);
}
.sib-run[data-mode="lively"] .sib-hand.sib-near { transform: rotate(-18deg); }
.sib-run[data-mode="lively"] .sib-hand.sib-near.sib-tap {
  transform: translate(-0.6cqw, -0.8cqw) rotate(-18deg) scale(.92);
  transition-duration: .12s;
}
.sib-run[data-mode="lively"] .sib-hand.sib-away { transition-duration: .6s; }
.sib-noanim, .sib-noanim * { transition: none !important; }

/* ---------- Телефоны: баннер выше, центральная часть крупнее ---------- */
/* Слот с инлайновым aspect-ratio (2000/1116) перебивается через !important,
   иначе более высокий баннер обрежется по overflow слота. */

@media (max-width: 600px) {
  .igra-banner-slot { aspect-ratio: 100 / 80 !important; }
  .sib { aspect-ratio: 100 / 80; }
  .sib-stage {
    transform-origin: 50% 0;
    transform: translateY(-1.5cqw) scale(1.45);
  }
}

/* ---------- Кадры ---------- */

@keyframes sib-fade { from { opacity: 0; transform: translateY(1.5cqw); } }
@keyframes sib-show { from { opacity: 0; } }
@keyframes sib-drop { from { opacity: 0; transform: translateY(-14cqw) rotate(-4deg); } }
@keyframes sib-pop { from { opacity: 0; transform: scale(.85) translateY(3cqw); } }
@keyframes sib-flip { from { opacity: 0; transform: rotateX(90deg); } }
@keyframes sib-hint {
  0%, 100% { border-color: var(--empty-border); box-shadow: none; }
  50% { border-color: var(--accent); box-shadow: 0 0 0 0.3cqw var(--glow); }
}
@keyframes sib-blink { 50% { opacity: 0; } }
@keyframes sib-type { from { transform: scale(1.15); } }
@keyframes sib-shake {
  20% { transform: translateX(-1.2cqw); } 40% { transform: translateX(1.2cqw); }
  60% { transform: translateX(-0.8cqw); } 80% { transform: translateX(0.6cqw); }
}
@keyframes sib-ask { 50% { border-color: var(--accent); color: var(--accent); } }
@keyframes sib-breath { 50% { transform: scale(1.04); } }
@keyframes sib-ripple { from { transform: scale(0); } to { transform: scale(12); opacity: 0; } }
@keyframes sib-wiggle { 25% { transform: rotate(-1.5deg) scale(1.03); } 75% { transform: rotate(1.5deg) scale(1.03); } }
@keyframes sib-num { 50% { transform: scale(1.35); color: #fff6c2; } }