@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');

:root{
  --cream:#fff5ea;
  --panel:#fffaf4;
  --pink:#ff5d95;
  --pink-dark:#d83f75;
  --purple:#8b69d9;
  --deep-purple:#41306f;
  --road:#3f2a73;
  --road-dark:#2f2258;
  --green:#b2d84d;
  --green-2:#73bf42;
  --orange:#ff9b30;
  --blue:#69b9ff;
  --blue-light:#dcedff;
  --ink:#20153d;
  --line:#f3d8c7;
  --shadow:0 8px 0 rgba(79,53,123,.10);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:linear-gradient(#f3e8da,#f7f0e5);
  font-family:Montserrat,Arial,sans-serif;
  color:var(--ink);
}
button,input{font:inherit}
.hidden{display:none!important}

.game{
  width:min(1540px,100%);
  min-height:100vh;
  margin:auto;
  padding:18px 16px 100px;
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  background:var(--cream);
  box-shadow:0 20px 70px rgba(0,0,0,.08);
  overflow:hidden;
}

.mobile-title,.brand{display:none}

.topbar{
  width:min(890px,calc(100% - 170px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:center;
}

.stat-card{
  min-height:98px;
  border:3px solid var(--line);
  border-radius:28px;
  background:rgba(255,255,255,.52);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:14px 18px;
  box-shadow:var(--shadow);
}
.stat-icon{
  font-size:46px;
  line-height:1;
}
.starstat .stat-icon{color:#ffca2f}
.cup .stat-icon{color:#efb117}
.lives .stat-icon{color:#ff5d95}
.stat-card label{
  display:block;
  text-align:center;
  font-size:15px;
  font-weight:900;
}
.stat-card label b,
.stat-card label div{
  display:block;
  margin-top:4px;
  font-size:27px;
  font-weight:900;
}
.stat-card label i{font-style:normal}
#hearts{
  color:#ff5d95;
  letter-spacing:5px;
}
#hearts span:last-child{color:var(--purple)}

.top-actions{
  position:absolute;
  left:16px;
  right:16px;
  top:20px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.round-btn{
  width:78px;
  height:78px;
  border-radius:50%;
  border:3px solid transparent;
  color:#fff;
  font-size:34px;
  font-weight:900;
  box-shadow:0 8px 0 rgba(0,0,0,.12);
  pointer-events:auto;
  cursor:pointer;
}
.sound{
  background:linear-gradient(180deg,#a57af5,#7d59d9);
  border-color:#6f4ec7;
}
.help{
  background:linear-gradient(180deg,#ff6fa1,#f54987);
  border-color:#d93d74;
}

.scene{
  position:relative;
  height:418px;
  border:4px dashed #f189ab;
  border-radius:30px;
  overflow:hidden;
  background:linear-gradient(#a8d4ff,#95cbff 70%,#5a48a4 70%);
}
.skyline{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 19% 20%,#fffdf6 0 34px,transparent 35px),
    radial-gradient(circle at 46% 18%,#fffdf6 0 42px,transparent 43px),
    radial-gradient(circle at 67% 19%,#fffdf6 0 34px,transparent 35px),
    radial-gradient(circle at 85% 22%,#fffdf6 0 38px,transparent 39px);
  opacity:.95;
}
.city{
  position:absolute;
  bottom:95px;
  height:150px;
  background-repeat:repeat-x;
}
.city-a{
  left:18%;
  right:4%;
  background:
    linear-gradient(90deg,
      transparent 0 3%,
      #8490df 3% 8%,
      transparent 8% 14%,
      #8c94e4 14% 19%,
      transparent 19% 24%,
      #7d83d8 24% 31%,
      transparent 31% 36%,
      #929ae8 36% 44%,
      transparent 44% 50%,
      #7d88d7 50% 56%,
      transparent 56% 63%,
      #8891df 63% 69%,
      transparent 69% 74%,
      #7e87d6 74% 81%,
      transparent 81% 86%,
      #8891de 86% 92%,
      transparent 92%);
  opacity:.82;
}
.city-b{
  left:22%;
  right:8%;
  bottom:101px;
  height:120px;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      rgba(112,118,206,.9) 4% 8%,
      transparent 8% 15%,
      rgba(123,129,220,.9) 15% 21%,
      transparent 21% 29%,
      rgba(107,113,201,.9) 29% 34%,
      transparent 34% 41%,
      rgba(118,124,214,.9) 41% 47%,
      transparent 47% 56%,
      rgba(101,109,194,.9) 56% 62%,
      transparent 62% 69%,
      rgba(122,128,220,.9) 69% 74%,
      transparent 74%);
  filter:blur(.2px);
}

.cloud{
  position:absolute;
  width:110px;
  height:34px;
  background:#fff9ef;
  border-radius:38px;
}
.cloud:before,.cloud:after{
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
}
.cloud:before{width:52px;height:52px;left:14px;top:-23px}
.cloud:after{width:60px;height:44px;right:8px;top:-15px}
.c1{left:1.5%;top:11%}
.c2{left:38%;top:9%}
.c3{right:12%;top:14%}

.bush{
  position:absolute;
  bottom:88px;
  background:radial-gradient(circle at 35% 35%,#c4ea61 0 9%,transparent 10%),linear-gradient(145deg,#8ed245,#66b744);
  border-radius:55% 55% 0 0;
}
.b1{left:-1%;width:18%;height:120px}
.b2{right:-1%;width:15%;height:110px}
.bush::before,.bush::after{
  content:"";
  position:absolute;
  bottom:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ff6ea3;
  box-shadow:inset 0 0 0 7px #ffd6e3;
}
.b1::before{left:30px}
.b2::before{right:24px; background:#ffc535; box-shadow:inset 0 0 0 7px #ffedb1}
.b1::after,.b2::after{display:none}

.sign{
  position:absolute;
  left:2.3%;
  top:43%;
  width:165px;
  height:120px;
  background:linear-gradient(180deg,#c8712e,#9e531f);
  color:#fff;
  border-radius:16px;
  clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%);
  padding:15px 18px;
  box-shadow:0 12px 0 rgba(101,53,20,.18);
  z-index:3;
}
.sign::before{
  content:"";
  position:absolute;
  inset:7px 14px 7px 7px;
  border-radius:12px;
  border:3px solid rgba(255,255,255,.15);
  clip-path:inherit;
}
.sign::after{
  content:"";
  position:absolute;
  left:22px;
  top:100%;
  width:18px;
  height:76px;
  background:#91501d;
  border-radius:0 0 10px 10px;
}
.sign small{
  display:block;
  font-size:19px;
  font-weight:900;
  margin-bottom:10px;
}
.sign b{
  display:inline-block;
  padding:5px 15px;
  border-radius:16px;
  background:#ff5d95;
  font-size:30px;
  line-height:1;
}
.sign i{font-style:normal}

.flag{
  position:absolute;
  right:4.2%;
  top:24%;
  width:66px;
  height:45px;
  background:var(--pink);
  clip-path:polygon(0 0,100% 0,83% 50%,100% 100%,0 100%);
  display:grid;
  place-items:center;
  color:#ffdd4f;
  font-size:22px;
  border-radius:0 4px 4px 0;
}
.flag:before{
  content:"";
  position:absolute;
  right:100%;
  top:-10px;
  width:6px;
  height:120px;
  background:#24175b;
  border-radius:6px;
}

.road{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:92px;
  background:
    linear-gradient(to bottom,var(--road) 0 55%,var(--road-dark) 55% 100%);
  border-top:12px solid #744dc7;
}
.road:before{
  content:"";
  position:absolute;
  inset:50px 0 0;
  background:radial-gradient(circle at 24px -1px,rgba(255,255,255,.09) 0 6px,transparent 7px) 0 0/58px 22px;
  opacity:.9;
}

.dots{
  position:absolute;
  left:44%;
  top:52%;
  transform:translateX(-50%);
  color:#fff8ef;
  font-size:28px;
  letter-spacing:10px;
  z-index:4;
}

.shadow-pac{
  position:absolute;
  left:23%;
  bottom:67px;
  width:105px;
  height:18px;
  background:rgba(33,22,81,.18);
  filter:blur(4px);
  border-radius:50%;
  z-index:5;
}

.pac{
  position:absolute;
  left:19%;
  bottom:70px;
  width:170px;
  height:140px;
  z-index:8;
  transform-origin:50% 80%;
}
.body{
  position:absolute;
  left:18px;
  top:8px;
  width:110px;
  height:110px;
  border:3px solid #17111b;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.78) 0 8%,transparent 9%),
    linear-gradient(145deg,#ffe667 0 34%,#ffc928 58%,#f3aa10 100%);
  clip-path:polygon(0 0,100% 0,100% 34%,58% 50%,100% 67%,100% 100%,0 100%);
  box-shadow:
    inset -10px -11px 0 rgba(208,136,0,.18),
    inset 6px 6px 0 rgba(255,255,255,.22),
    0 10px 0 rgba(35,24,20,.12);
  z-index:3;
}
.body .eye{
  position:absolute;
  width:18px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:2px solid #17111b;
  left:72px;
  top:17px;
  overflow:hidden;
}
.body .eye i{
  position:absolute;
  width:8px;
  height:10px;
  border-radius:50%;
  background:#17111b;
  left:5px;
  top:6px;
}
.pac-cheek{
  position:absolute;
  width:16px;
  height:9px;
  border-radius:50%;
  background:#f59e35;
  left:73px;
  top:47px;
}
.pac-shine{
  position:absolute;
  width:28px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  left:20px;
  top:16px;
  transform:rotate(-25deg);
}
.arm,.leg{
  position:absolute;
  transform-origin:top center;
}
.arm{
  width:30px;
  height:76px;
  top:50px;
  z-index:1;
}
.arm-a{left:38px}
.arm-b{left:105px; z-index:4}
.forearm{
  position:absolute;
  left:8px;
  top:0;
  width:14px;
  height:42px;
  border:3px solid #17111b;
  border-radius:14px;
  background:linear-gradient(180deg,#ff8f37,#f46a20);
  transform-origin:center 8px;
}
.hand{
  position:absolute;
  left:3px;
  top:35px;
  width:24px;
  height:20px;
  border-radius:50%;
  border:3px solid #17111b;
  background:#fff8ef;
}

.leg{
  width:45px;
  height:70px;
  top:80px;
  z-index:2;
}
.leg-a{left:48px}
.leg-b{left:95px}
.thigh{
  position:absolute;
  left:12px;
  top:-1px;
  width:16px;
  height:28px;
  border:3px solid #17111b;
  border-radius:16px;
  background:linear-gradient(180deg,#ff9435,#f2691d);
}
.shin{
  position:absolute;
  left:11px;
  top:22px;
  width:17px;
  height:28px;
  border:3px solid #17111b;
  border-radius:16px;
  background:linear-gradient(180deg,#ff9435,#f2691d);
  transform-origin:center 5px;
}
.foot{
  position:absolute;
  left:5px;
  top:44px;
  width:32px;
  height:16px;
  border:3px solid #17111b;
  border-radius:16px;
  background:linear-gradient(180deg,#ff9435,#f2691d);
  transform-origin:10px 6px;
}
.speed-lines{
  position:absolute;
  left:-26px;
  top:38px;
  width:44px;
  opacity:0;
}
.speed-lines i{
  display:block;
  height:4px;
  margin:10px 0;
  border-radius:5px;
  background:rgba(255,255,255,.95);
}
.speed-lines i:nth-child(1){width:44px}
.speed-lines i:nth-child(2){width:36px}
.speed-lines i:nth-child(3){width:24px}
.dust{
  position:absolute;
  left:28px;
  bottom:-2px;
  width:40px;
  opacity:0;
}
.dust i{
  display:inline-block;
  width:16px;
  height:12px;
  margin-right:4px;
  background:#fff3ea;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

.monster{
  position:absolute;
  left:69%;
  bottom:74px;
  width:124px;
  height:140px;
  z-index:7;
}
.face{
  position:absolute;
  inset:18px 0 0;
  background:
    radial-gradient(circle at 24% 22%,rgba(255,255,255,.24) 0 8%,transparent 9%),
    linear-gradient(145deg,#ff8ea3 0 24%,#f45f78 56%,#d94364 100%);
  border:3px solid #17111b;
  border-radius:58px 58px 22px 22px;
  overflow:hidden;
  box-shadow:
    inset -8px -9px 0 rgba(139,27,54,.12),
    inset 5px 5px 0 rgba(255,255,255,.16),
    0 8px 0 rgba(35,24,20,.12);
}
.horn{
  position:absolute;
  top:0;
  width:23px;
  height:35px;
  background:#17112e;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  z-index:3;
}
.h1{left:18px;transform:rotate(-18deg)}
.h2{right:18px;transform:rotate(18deg)}
.monster .eye{
  position:absolute;
  top:30px;
  width:33px;
  height:38px;
  border:3px solid #17111b;
  background:#fff;
  border-radius:50%;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
.monster .eye i{
  position:absolute;
  width:12px;
  height:15px;
  background:#17111b;
  border-radius:50%;
  top:9px;
  left:9px;
}
.monster .eye i::after{
  content:"";
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  left:2px;
  top:2px;
}
.e1{left:18px}
.e2{right:18px}
.brow{
  position:absolute;
  top:23px;
  width:24px;
  height:5px;
  border-radius:20px;
  background:#4b1730;
  z-index:4;
}
.br1{left:18px;transform:rotate(10deg)}
.br2{right:18px;transform:rotate(-10deg)}
.cheek{
  position:absolute;
  top:69px;
  width:14px;
  height:8px;
  background:#ff90a6;
  border-radius:50%;
}
.ch1{left:13px}
.ch2{right:13px}
.monster-shine{
  position:absolute;
  left:18px;
  top:18px;
  width:22px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  transform:rotate(-28deg);
}
.mouth{
  position:absolute;
  left:30px;
  top:76px;
  width:60px;
  height:42px;
  background:#24132a;
  border:3px solid #17111b;
  border-radius:8px 8px 28px 28px;
  overflow:hidden;
  transform-origin:center top;
  box-shadow:inset 0 4px 0 rgba(0,0,0,.22);
}
.tooth{
  position:absolute;
  top:0;
  width:12px;
  height:12px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.t1{left:9px}.t2{right:9px}
.tongue{
  position:absolute;
  left:17px;
  bottom:-1px;
  width:26px;
  height:13px;
  background:#ff7c9d;
  border-radius:50%;
}
.feet{
  position:absolute;
  left:8px;
  right:8px;
  bottom:0;
  display:flex;
  justify-content:space-between;
}
.feet i{
  width:36px;
  height:25px;
  background:#f45f78;
  border:3px solid #17111b;
  border-top:0;
  border-radius:0 0 50% 50%;
}

.progress{
  width:min(1220px,94%);
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:10px;
  align-items:center;
  padding:8px 40px;
}
.progress:before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  transform:translateY(-50%);
  height:0;
  border-top:5px dashed #f189ab;
}
.node{
  position:relative;
  z-index:2;
  justify-self:center;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:26px;
  box-shadow:0 8px 0 rgba(0,0,0,.07);
}
.node.active{
  background:var(--pink);
  box-shadow:0 0 0 8px #ffd3e1, 0 8px 0 rgba(0,0,0,.07);
}
.node.done{
  background:#a9d144;
  color:#fff;
}
.node.done:after{
  content:"✓";
  position:absolute;
  left:50%;
  bottom:-24px;
  transform:translateX(-50%);
  font-size:24px;
  color:#82bd3d;
}

.question-card,
.answers-card,
.remember{
  width:min(1320px,96%);
  margin:0 auto;
  border:3px solid var(--line);
  border-radius:32px;
  background:rgba(255,255,255,.56);
  box-shadow:var(--shadow);
}
.question-card{
  min-height:138px;
  padding:26px 34px 30px;
  position:relative;
}
.pill{
  display:inline-block;
  background:linear-gradient(180deg,#ff6b9e,#ff4e87);
  color:#fff;
  border-radius:18px;
  padding:12px 20px;
  font-weight:900;
  font-size:20px;
  line-height:1;
}
.question-card #questionText{
  font-size:22px;
  line-height:1.45;
  text-align:center;
  margin-top:18px;
  font-weight:700;
}
.mini-spark{
  position:absolute;
  right:26px;
  top:24px;
  font-size:46px;
  color:#9a77e3;
}

.answers-card{
  padding:16px 24px 22px;
}
.answers-card h3{
  margin:4px 0 18px;
  text-align:center;
  color:#ff5d95;
  font-size:18px;
  font-weight:900;
}
.answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.answer{
  min-height:145px;
  border:3px solid transparent;
  border-radius:28px;
  background:#fffaf2;
  display:grid;
  grid-template-columns:86px 1fr;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  text-align:left;
  box-shadow:0 6px 0 rgba(0,0,0,.06);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.answer:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 10px 0 rgba(0,0,0,.06);
}
.answer:disabled{cursor:default}
.answer-icon{
  width:74px;
  height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:38px;
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.18);
}
.answer-copy b{
  display:block;
  font-size:18px;
  line-height:1.15;
  margin-bottom:8px;
  text-transform:uppercase;
}
.answer-copy small{
  display:block;
  font-size:15px;
  line-height:1.35;
}
.answer.kind-motivation{
  border-color:#d7d59b;
  background:linear-gradient(180deg,#f6f3d9,#f0eed0);
}
.answer.kind-motivation .answer-icon{background:linear-gradient(180deg,#c5de45,#98ca2c)}
.answer.kind-sanction{
  border-color:#bbd0e9;
  background:linear-gradient(180deg,#eef7ff,#dfedf9);
}
.answer.kind-sanction .answer-icon{background:linear-gradient(180deg,#4ab0ff,#248cff)}
.answer.kind-learning{
  border-color:#f4d594;
  background:linear-gradient(180deg,#fff5dc,#f8ecbc);
}
.answer.kind-learning .answer-icon{background:linear-gradient(180deg,#b073f6,#8857e4)}
.answer.kind-support{
  border-color:#efbfd4;
  background:linear-gradient(180deg,#fff1f6,#fae0ea);
}
.answer.kind-support .answer-icon{background:linear-gradient(180deg,#ff8fae,#ff6f95)}

.answer.correct{
  box-shadow:0 0 0 4px #7dce57 inset, 0 6px 0 rgba(0,0,0,.06);
}
.answer.wrong{
  box-shadow:0 0 0 4px #ff7b9f inset, 0 6px 0 rgba(0,0,0,.06);
}
.feedback{
  margin-top:14px;
  min-height:24px;
  text-align:center;
  font-weight:800;
  font-size:16px;
}
.remember{
  display:none;
}

.pause{
  position:fixed;
  left:18px;
  bottom:16px;
  z-index:20;
  background:linear-gradient(180deg,#8b69d9,#7253c8);
  color:#fff;
  border:3px solid #5a3eb5;
  border-radius:22px;
  padding:12px 22px;
  font-weight:900;
  font-size:16px;
  box-shadow:0 8px 0 rgba(0,0,0,.12);
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(255,245,234,.95);
  display:grid;
  place-items:center;
  z-index:50;
  padding:20px;
}
.modal{
  width:min(560px,92vw);
  background:#fff;
  border:3px solid var(--pink);
  border-radius:28px;
  padding:34px;
  text-align:center;
  box-shadow:12px 12px 0 rgba(129,100,209,.32);
}
.modal h1{font-size:35px;margin:0 0 12px}
.modal p{font-size:17px;line-height:1.45}
.modal input{
  width:100%;
  padding:15px;
  border:2px solid var(--purple);
  border-radius:15px;
  margin:15px 0;
}
.modal button{
  background:var(--pink);
  color:#fff;
  border:2px solid #9c214d;
  border-radius:15px;
  padding:14px 24px;
  font-weight:900;
  margin:5px;
}
.history-open{background:var(--purple)!important;border-color:#43248d!important}
.history-list{
  display:grid;
  gap:10px;
  margin:16px 0;
  max-height:320px;
  overflow:auto;
}
.history-row{
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr 1fr;
  gap:8px;
  align-items:center;
  border:2px solid #ef8dad;
  border-radius:12px;
  padding:11px;
  background:#fffaf2;
  font-size:13px;
}
.history-row b{color:var(--pink)}
.history-actions{display:flex;justify-content:center;gap:10px}
.clear-btn{background:#ffd2dc!important;color:#7d1839!important}
.paused:after{
  content:"ПАУЗА";
  position:fixed;
  inset:0;
  background:#fff8;
  z-index:40;
  display:grid;
  place-items:center;
  font-size:70px;
  font-weight:900;
  color:var(--purple);
}

/* Animation states */
.pac.run{
  animation:runForward 1.7s ease-out forwards, bodyBob .22s infinite alternate ease-in-out;
}
.pac.run .leg-a{animation:legFront .22s infinite alternate ease-in-out}
.pac.run .leg-b{animation:legBack .22s infinite alternate ease-in-out}
.pac.run .arm-a{animation:armBack .22s infinite alternate ease-in-out}
.pac.run .arm-b{animation:armFront .22s infinite alternate ease-in-out}
.pac.run .speed-lines,
.pac.run .dust{opacity:1}

.pac.waiting{
  left:41%;
  animation:idleBob .8s infinite alternate ease-in-out;
}
.pac.waiting .arm-a,
.pac.waiting .arm-b{animation:idleWave .55s infinite alternate ease-in-out}
.pac.waiting .leg-a,
.pac.waiting .leg-b{animation:none}

.pac.jump{
  animation:pacJump 1.48s cubic-bezier(.2,.78,.22,1) forwards;
}
.pac.jump .leg-a{animation:jumpLegA 1.48s forwards}
.pac.jump .leg-b{animation:jumpLegB 1.48s forwards}
.pac.jump .arm-a{animation:jumpArmA 1.48s forwards}
.pac.jump .arm-b{animation:jumpArmB 1.48s forwards}
.pac.jump .speed-lines,
.pac.jump .dust{opacity:0}

.pac.bitten{
  animation:pacBitten 1.05s ease-out;
}

.pac.run-next{
  left:79%;
  animation:pacRunNext .86s linear forwards, bodyBob .2s infinite alternate ease-in-out;
}
.pac.run-next .leg-a{animation:legFront .2s infinite alternate ease-in-out}
.pac.run-next .leg-b{animation:legBack .2s infinite alternate ease-in-out}
.pac.run-next .arm-a{animation:armBack .2s infinite alternate ease-in-out}
.pac.run-next .arm-b{animation:armFront .2s infinite alternate ease-in-out}
.pac.run-next .speed-lines,
.pac.run-next .dust{opacity:1}

.monster.bite{
  animation:monsterBite 1.05s ease-in-out forwards;
}
.monster.bite .mouth{animation:mouthClose .23s ease-in-out 4}
.monster.run-away{
  animation:monsterRunAway .68s ease-in forwards;
}
.monster.vanish{
  animation:monsterVanish .55s ease-in forwards;
}
.monster.gone{opacity:0!important}

@keyframes runForward{
  0%{left:19%; bottom:70px}
  100%{left:41%; bottom:70px}
}
@keyframes legFront{
  0%{transform:rotate(-28deg)}
  100%{transform:rotate(30deg)}
}
@keyframes legBack{
  0%{transform:rotate(28deg)}
  100%{transform:rotate(-30deg)}
}
@keyframes armFront{
  0%{transform:rotate(20deg)}
  100%{transform:rotate(-34deg)}
}
@keyframes armBack{
  0%{transform:rotate(-34deg)}
  100%{transform:rotate(20deg)}
}
@keyframes bodyBob{
  100%{transform:translateY(-4px)}
}
@keyframes idleBob{
  100%{transform:translateY(-3px)}
}
@keyframes idleWave{
  100%{transform:rotate(7deg)}
}
@keyframes pacJump{
  0%{left:41%; bottom:70px; transform:rotate(0)}
  42%{left:55%; bottom:210px; transform:rotate(-8deg)}
  76%{left:70%; bottom:130px; transform:rotate(5deg)}
  100%{left:79%; bottom:70px; transform:rotate(0)}
}
@keyframes jumpLegA{
  30%,70%{transform:rotate(62deg) translate(2px,-3px)}
}
@keyframes jumpLegB{
  30%,70%{transform:rotate(-62deg) translate(-2px,-3px)}
}
@keyframes jumpArmA{
  30%,70%{transform:rotate(-70deg) translate(-2px,-1px)}
}
@keyframes jumpArmB{
  30%,70%{transform:rotate(65deg) translate(2px,-1px)}
}
@keyframes pacBitten{
  0%,100%{transform:translateX(0) rotate(0) scale(1)}
  38%{transform:translateX(-14px) rotate(-8deg) scale(.94,1.05)}
  58%{transform:translateX(-8px) rotate(4deg) scale(.98)}
  75%{transform:translateX(4px) rotate(-2deg) scale(1.02,.98)}
}
@keyframes pacRunNext{
  0%{left:79%; bottom:70px}
  100%{left:111%; bottom:70px}
}
@keyframes monsterBite{
  0%{left:69%}
  44%{left:51%; transform:scale(1.05) rotate(-5deg)}
  60%{left:50%; transform:scale(1.12,.95) rotate(4deg)}
  100%{left:69%; transform:none}
}
@keyframes mouthClose{
  0%,100%{height:42px; top:76px}
  50%{height:9px; top:90px; border-radius:10px}
}
@keyframes monsterRunAway{
  0%{left:69%; opacity:1; transform:translateX(0) scale(1)}
  100%{left:112%; opacity:0; transform:translateX(50px) scale(.92)}
}
@keyframes monsterVanish{
  0%{opacity:1; transform:scale(1) rotate(0)}
  70%{opacity:.4; transform:scale(.52) rotate(12deg)}
  100%{opacity:0; transform:scale(.06) rotate(24deg)}
}

@media(max-width:980px){
  .game{padding:14px 10px 86px; gap:12px; box-shadow:none}
  .topbar{width:calc(100% - 96px); gap:8px}
  .stat-card{min-height:76px; padding:10px 8px; border-radius:22px; gap:8px}
  .stat-icon{font-size:28px}
  .stat-card label{font-size:10px}
  .stat-card label b,.stat-card label div{font-size:18px}
  #hearts{letter-spacing:2px}
  .top-actions{top:14px; left:10px; right:10px}
  .round-btn{width:48px; height:48px; font-size:22px}
  .scene{height:min(55vw,320px); min-height:230px; border-radius:22px}
  .city-a,.city-b{bottom:64px}
  .bush{bottom:60px}
  .sign{width:104px; height:76px; padding:10px 12px; top:42%}
  .sign small{font-size:13px; margin-bottom:6px}
  .sign b{font-size:20px; padding:3px 9px}
  .sign::after{width:12px; height:50px; left:14px}
  .flag{width:48px; height:34px; font-size:17px}
  .flag:before{height:80px}
  .road{height:66px; border-top-width:8px}
  .dots{font-size:17px; left:47%; top:54%; letter-spacing:4px}
  .shadow-pac{left:18%; bottom:47px; width:74px; height:12px}
  .pac{width:108px; height:88px; left:12%; bottom:47px}
  .body{left:13px; top:2px; width:69px; height:69px}
  .body .eye{width:10px; height:12px; left:45px; top:10px}
  .body .eye i{width:5px; height:7px; left:3px; top:3px}
  .pac-cheek{width:10px; height:5px; left:46px; top:29px}
  .pac-shine{width:17px; height:7px; left:12px; top:10px}
  .arm{width:20px; height:48px; top:33px}
  .arm-a{left:23px}
  .arm-b{left:67px}
  .forearm{left:6px; width:10px; height:28px; border-width:2px}
  .hand{left:2px; top:24px; width:17px; height:14px; border-width:2px}
  .leg{width:29px; height:44px; top:50px}
  .leg-a{left:31px}
  .leg-b{left:59px}
  .thigh{left:9px; width:10px; height:19px; border-width:2px}
  .shin{left:8px; top:15px; width:11px; height:17px; border-width:2px}
  .foot{left:3px; top:28px; width:22px; height:11px; border-width:2px}
  .speed-lines{left:-18px; top:20px; width:28px}
  .speed-lines i{height:3px; margin:6px 0}
  .dust{left:18px; bottom:-2px}
  .dust i{width:10px; height:8px}
  .monster{width:76px; height:86px; left:70%; bottom:51px}
  .face{inset:12px 0 0; border-width:2px}
  .horn{width:16px; height:24px}
  .monster .eye{top:18px; width:21px; height:25px; border-width:2px}
  .monster .eye i{width:8px; height:10px; top:6px; left:6px}
  .e1{left:11px}
  .e2{right:11px}
  .brow{top:14px; width:16px; height:4px}
  .br1{left:12px}
  .br2{right:12px}
  .cheek{top:44px}
  .mouth{left:18px; top:49px; width:38px; height:27px; border-width:2px}
  .feet i{width:24px; height:17px; border-width:2px}
  .progress{width:100%; padding:6px 4px}
  .progress:before{left:3%; right:3%}
  .node{width:34px; height:34px; font-size:15px}
  .node.active{box-shadow:0 0 0 5px #ffd3e1, 0 6px 0 rgba(0,0,0,.05)}
  .node.done:after{bottom:-18px; font-size:16px}
  .question-card,.answers-card,.remember{width:100%; border-radius:22px}
  .question-card{min-height:0; padding:16px 18px 20px}
  .question-card #questionText{font-size:16px; margin-top:14px}
  .pill{font-size:15px; padding:9px 14px}
  .mini-spark{font-size:32px; right:16px; top:16px}
  .answers-card{padding:14px}
  .answers-card h3{font-size:14px}
  .answers{grid-template-columns:1fr; gap:10px}
  .answer{grid-template-columns:58px 1fr; min-height:108px; padding:12px; border-radius:20px}
  .answer-icon{width:50px; height:50px; font-size:26px}
  .answer-copy b{font-size:14px; margin-bottom:5px}
  .answer-copy small{font-size:12px}
  .feedback{font-size:13px}
  .pause{padding:10px 16px; font-size:13px; left:10px; bottom:10px}
  .modal{padding:24px}
  .modal h1{font-size:28px}
  .history-row{grid-template-columns:1fr 1fr; font-size:12px}

  @keyframes runForward{
    0%{left:12%; bottom:47px}
    100%{left:39%; bottom:47px}
  }
  @keyframes pacJump{
    0%{left:39%; bottom:47px}
    42%{left:54%; bottom:145px}
    76%{left:67%; bottom:92px}
    100%{left:78%; bottom:47px}
  }
  @keyframes pacRunNext{
    0%{left:78%; bottom:47px}
    100%{left:112%; bottom:47px}
  }
  .pac.waiting{left:39%}
  @keyframes monsterBite{
    0%{left:70%}
    44%{left:50%}
    60%{left:48%}
    100%{left:70%}
  }
  @keyframes monsterRunAway{
    0%{left:70%; opacity:1; transform:translateX(0) scale(1)}
    100%{left:112%; opacity:0; transform:translateX(40px) scale(.92)}
  }
}


/* Убраны белые точки и флаг справа по запросу */
.dots,.flag{display:none!important;}