/*
  День рождения, вмешательства Гоши и живые штрихи.

  Держится тех же правил, что и весь рисованный слой:
  - дрожащий фильтр только на листовых псевдоэлементах, не на тексте;
  - обычный текст не поворачивается (иначе он мылится);
  - крупные надписи-события (УРРРАААА, штамп) - исключение: они большие,
    живут пару секунд и именно должны выглядеть шлёпнутыми.
*/

/* ------------------------------------------------------------------
   Тортик на первом листе. Встаёт в сетку, а не в left/top:
   на широком экране - под Шлёпой, на телефоне - напротив него внизу.
   ------------------------------------------------------------------ */
.intro-cake {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: clamp(118px, 11vw, 160px);
  min-width: 0;
  padding: 4px 4px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.intro-cake__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 120 / 112;
  transform: rotate(-4deg);
  transition: transform .18s ease;
}

.intro-cake:hover .intro-cake__art { transform: rotate(-1deg) translateY(-3px) scale(1.04); }
.intro-cake:active .intro-cake__art { transform: rotate(-7deg) translateY(1px) scale(.96); }

.intro-cake__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* маленький огонёк, который горит всегда */
.intro-cake__flame {
  position: absolute;
  left: 50%;
  bottom: 87%;
  width: 10%;
  height: 16%;
  margin-left: -5%;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c8 0 20%, #ffd35a 42%, #ff9a2e 75%, #e8591a 100%);
  box-shadow: 0 0 12px 3px rgba(255, 196, 80, .45);
  transform-origin: 50% 100%;
  animation: flame-idle .9s ease-in-out infinite alternate;
}

.intro-cake b {
  font-family: var(--font-hand);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1;
}

.intro-cake small {
  color: var(--muted);
  font-family: var(--font-hand);
  font-size: .92rem;
  line-height: 1;
}

.intro-cake::after {
  content: "";
  position: absolute;
  inset: auto 22% 2px 16%;
  height: 9px;
  border-bottom: 4px solid var(--pink);
  border-radius: 50%;
  opacity: .8;
  filter: url(#doodleWobble);
  transform: rotate(-2deg);
  pointer-events: none;
}

@media (min-width: 701px) {
  .intro-layout { grid-template-rows: auto auto; row-gap: clamp(0px, 1vh, 12px); }
  .intro-copy { grid-column: 1; grid-row: 1 / span 2; }
  .intro-doodle { grid-column: 2; grid-row: 1; align-self: end; }
  .intro-cake { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; }
  /*
    Кот и тортик теперь делят правую колонку по высоте, поэтому оба меряются
    и от высоты экрана: на широком, но низком ноутбуке иначе огонёк упирается
    в подпись Шлёпы, а лист начинает прокручиваться.
  */
  .intro-doodle__face { width: min(24vw, 280px, 29vh); min-width: min(190px, 29vh); }
  .intro-cake { width: clamp(92px, min(11vw, 15vh), 160px); margin-top: clamp(14px, 3vh, 30px); }
}

@media (max-width: 700px) {
  .intro-copy { grid-row: 1; }
  .intro-doodle { grid-column: 1; grid-row: 2; }
  .intro-cake {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    width: min(34vw, 128px);
    margin: 0 0 34px 2vw;
  }
  /* тортик занимает место каракулей в левом нижнем углу */
  .sheet-junk--intro .junk-scribble--a,
  .sheet-junk--intro .junk-scribble--b,
  .sheet-junk--intro .junk-paws,
  .sheet-junk--intro .junk-arrow,
  .sheet-junk--intro .junk-hand { display: none; }
}

/* ------------------------------------------------------------------
   Тортик в окне
   ------------------------------------------------------------------ */
.cake-stage {
  position: relative;
  width: min(290px, 78%);
  margin: 6px auto 0;
  aspect-ratio: 240 / 230;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.cake-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cake-svg path,
.intro-cake__svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cake-plate { stroke-width: 3; }
.cake-plate--thin { stroke-width: 1.8; opacity: .45; }
path.cake-tier--bottom { fill: #f6d4df; }
path.cake-tier--top { fill: #fdefc0; }
path.cake-cream { stroke: #fffaf2; stroke-width: 7; }
path.cake-cream--top { stroke-width: 6; }
path.cake-sprinkle { stroke-width: 3.6; }
path.cake-sprinkle--red { stroke: var(--red); }
path.cake-sprinkle--blue { stroke: var(--blue); }
path.cake-sprinkle--green { stroke: var(--green); }
path.cake-sprinkle--yellow { stroke: var(--orange); }
path.cake-candle { fill: #d2e8f5; }
path.cake-candle-stripe { stroke: var(--red); stroke-width: 2.6; }
path.cake-wick { stroke-width: 2.6; }

/* дым после задувания */
.cake-smoke path {
  stroke: rgba(84, 78, 72, .55);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
}

.cake-smoke.is-smoking path { animation: smoke-rise 1.9s ease-out forwards; }
.cake-smoke.is-smoking path:nth-child(2) { animation-delay: .14s; }
.cake-smoke.is-smoking path:nth-child(3) { animation-delay: .28s; }

/* ------------------------------------------------------------------
   Огонь. Наклон, растяжение и сплющивание приходят из cake.js
   через --lean / --stretch / --squash / --glow каждый кадр.
   ------------------------------------------------------------------ */
.cake-flame {
  position: absolute;
  left: 50%;
  bottom: 81%;
  width: 8.5%;
  height: 15%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--lean, 0deg)) scale(var(--stretch, 1), var(--squash, 1));
  pointer-events: none;
}

.cake-flame i { position: absolute; display: block; }

.cake-flame__glow {
  inset: -90% -150% -35% -150%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, rgba(255, 212, 96, .55), rgba(255, 170, 60, .16) 46%, transparent 70%);
  opacity: var(--glow, .9);
}

.cake-flame__body {
  inset: 0;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 76%, #fff6c8 0 18%, #ffd35a 38%, #ff9a2e 70%, #e8591a 100%);
  transform-origin: 50% 100%;
  animation: flame-flicker .17s ease-in-out infinite alternate;
}

.cake-flame__core {
  left: 32%;
  right: 32%;
  bottom: 6%;
  height: 34%;
  border-radius: 50% 50% 40% 40%;
  background: #fffdf0;
  opacity: .85;
}

.cake-flame.is-struggling .cake-flame__body { animation-duration: .065s; }
.cake-flame.is-dying { animation: flame-die .38s ease-in forwards; }
.cake-flame.is-out { opacity: 0; }

/* ------------------------------------------------------------------
   Кнопки: удержание - главная, микрофон - маленькая и необязательная
   ------------------------------------------------------------------ */
.cake-controls {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: 10px;
}

.cake-hold {
  overflow: hidden;
  min-width: min(270px, 92%);
  min-height: 56px;
  font-size: 1.22rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.cake-hold__fill {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 238, 190, .42);
  pointer-events: none;
}

.cake-hold span { position: relative; z-index: 1; }

.cake-mic {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 4px 10px 10px;
  border: 0;
  background: none;
  color: var(--blue);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.cake-mic::after {
  content: "";
  position: absolute;
  inset: auto 12% 5px 12%;
  border-bottom: 2.5px dashed currentColor;
  opacity: .55;
  pointer-events: none;
}

.cake-mic.is-listening { color: var(--red); animation: mic-listen 1s ease-in-out infinite; }
.cake-mic:disabled,
.cake-hold:disabled { opacity: .45; cursor: default; }

.cake-mic-hint {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.25;
  text-align: center;
}

/* ------------------------------------------------------------------
   Полсекунды темно -> УРРРАААА
   ------------------------------------------------------------------ */
.cake-dark {
  position: fixed;
  z-index: 880;
  inset: 0;
  background: #06070c;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.cake-dark.is-on { opacity: .93; }

.cake-hooray {
  position: fixed;
  z-index: 890;
  top: 42%;
  left: 50%;
  translate: -50% -50%;
  color: var(--red);
  font-family: var(--font-hand);
  font-size: clamp(3.6rem, 17vw, 9.5rem);
  font-weight: 700;
  line-height: .9;
  white-space: nowrap;
  text-shadow: 3px 3px 0 var(--paper), 7px 7px 0 rgba(44, 40, 35, .32);
  pointer-events: none;
  animation: hooray-pop 2.6s cubic-bezier(.2, .9, .25, 1.2) forwards;
}

/* ------------------------------------------------------------------
   «гош вмешался»
   ------------------------------------------------------------------ */
.intervene-stamp {
  position: fixed;
  z-index: 610;
  top: 30%;
  left: 50%;
  translate: -50% -50%;
  rotate: -7deg;
  padding: 8px 18px 12px;
  color: var(--red);
  font-family: var(--font-hand);
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: stamp-slam 2.6s ease-out forwards;
}

.intervene-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--red);
  border-radius: 16px 9px 18px 11px / 11px 18px 9px 16px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  filter: url(#doodleWobble);
  z-index: -1;
}

/* пингвин сбегает через всю страницу, если игра была закрыта */
.intervene-penguin {
  position: fixed;
  z-index: 605;
  top: 46%;
  left: -40vw;
  font-size: clamp(7rem, 38vw, 16rem);
  line-height: 1;
  pointer-events: none;
  animation: penguin-escape 2.4s cubic-bezier(.5, 0, .6, 1) forwards;
}

/* а внутри игры он просто резко становится огромным */
.penguin.is-huge {
  z-index: 2;
  font-size: clamp(6rem, 30vw, 9rem);
  line-height: 1;
  transition: font-size .35s cubic-bezier(.2, 1.5, .4, 1);
}

/* ------------------------------------------------------------------
   Живые штрихи Гоши
   ------------------------------------------------------------------ */
.drawing-wrap { position: relative; }

.draw-live-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}

.draw-live-tip i {
  position: relative;
  display: block;
  margin: -34px 0 0 8px;
  padding: 1px 8px 3px;
  color: var(--blue);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-radius: 10px 6px 12px 7px;
  animation: tip-bob .45s ease-in-out infinite alternate;
}

/* хвостик к кончику пера */
.draw-live-tip i::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: -2px;
  width: 11px;
  border-top: 2.5px solid var(--blue);
  transform: rotate(-40deg);
  transform-origin: left;
}

/* ночной канал телика */
.tv-night-button { --btn-fill: #27344f; color: #f0c94b; }

/* ------------------------------------------------------------------ */

@keyframes flame-idle {
  from { transform: rotate(-4deg) scale(1, 1); }
  to { transform: rotate(5deg) scale(.92, 1.08); }
}

@keyframes flame-flicker {
  from { transform: scale(1, 1) skewX(-2deg); }
  to { transform: scale(.93, 1.07) skewX(3deg); }
}

@keyframes flame-die {
  0% { opacity: 1; }
  45% { opacity: .9; transform: translateX(-50%) rotate(52deg) scale(1.5, .55); }
  100% { opacity: 0; transform: translateX(-50%) rotate(74deg) scale(.15, .08); }
}

@keyframes smoke-rise {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-28px); }
}

@keyframes mic-listen {
  50% { opacity: .55; }
}

@keyframes hooray-pop {
  0% { opacity: 0; scale: .35; }
  14% { opacity: 1; scale: 1.14; }
  22% { scale: .96; }
  30%, 80% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.04; }
}

@keyframes stamp-slam {
  0% { opacity: 0; scale: 2.3; }
  12% { opacity: 1; scale: .9; }
  20% { scale: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes penguin-escape {
  0% { transform: translateY(-50%) rotate(-10deg); }
  40% { transform: translate(62vw, -50%) rotate(6deg) scale(1.1); }
  100% { transform: translate(160vw, -50%) rotate(16deg); }
}

@keyframes tip-bob {
  to { translate: 0 -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-cake__flame,
  .cake-flame__body,
  .draw-live-tip i,
  .cake-mic.is-listening { animation: none; }
  .intro-cake::after { filter: none; }
  .intervene-stamp { animation-duration: 2.6s; animation-timing-function: steps(1, end); }
  .intervene-penguin { display: none; }
}