/* EGROK Bot — CHILD The Agency. Colori modificabili qui sotto. */
.egrok-box{--ground:rgba(60,40,140,.22);--accent:#3a32ff;--accent-2:#7b2ff2;
  --card:rgba(255,255,255,.7);--card-border:rgba(255,255,255,.9);--ink-soft:#5c5878;margin:0 auto}
@media (prefers-color-scheme: dark){.egrok-box{--ground:rgba(0,0,0,.45);--card:rgba(24,20,52,.6);--card-border:rgba(255,255,255,.1);--ink-soft:#a9a4c9}}

/* Tutte le misure sono in unità del disegno (815 x 1105) convertite in cqw */
.egrok-box{position:relative;width:min(380px,66vw,44vh)}
.egrok{--k:calc(100cqw / 815);position:relative;width:100%;aspect-ratio:815/1105;container-type:inline-size;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}
.egrok img{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none;max-width:none}
.egrok .rig{position:absolute;inset:0;transform-origin:50% 96%;will-change:transform}
.ground{position:absolute;left:12%;right:10%;bottom:.5%;height:5.5%;border-radius:50%;
  background:radial-gradient(closest-side,var(--ground),transparent);will-change:transform,opacity}
.tail{left:calc(530 * var(--k));top:calc(770 * var(--k));width:calc(225 * var(--k));
  transform-origin:39% 98%;will-change:transform}
.body{left:calc(60 * var(--k));top:calc(440 * var(--k));width:calc(629 * var(--k));
  transform-origin:50% 100%;will-change:transform}
.head{position:absolute;left:calc(42 * var(--k));top:calc(72.2 * var(--k));
  width:calc(707 * var(--k));height:calc(503 * var(--k));transform-origin:50% 96%;will-change:transform}
.head > .skull{left:0;top:0;width:100%;height:100%}
/* occhi: capsule viola come il primo EGROK, + archetti per felice / chiuso / occhiolino */
.eye{position:absolute;width:0;height:0}
.eye.l{left:calc(294 * var(--k));top:calc(190 * var(--k));--r:0deg}
.eye.r{left:calc(411 * var(--k));top:calc(190 * var(--k));--r:0deg}
.eye .look{position:absolute;left:0;top:0;will-change:transform}
.eye .open{position:absolute;border-radius:999px;
  width:calc(46 * var(--k));height:calc(104 * var(--k));left:calc(-23 * var(--k));top:calc(-52 * var(--k));
  background:radial-gradient(120% 70% at 45% 25%,#3c1a78 0%,#260c56 55%,#1c0745 100%);
  box-shadow:inset 0 calc(5 * var(--k)) calc(7 * var(--k)) rgba(0,0,0,.35),0 0 0 calc(2.5 * var(--k)) rgba(120,100,170,.12);
  transform:rotate(var(--r)) scaleY(var(--open,1)) scale(var(--sz,1));opacity:var(--po,1)}
/* palpebra chiusa: archetto come nel primo EGROK */
.eye .lid{position:absolute;width:calc(68 * var(--k));height:calc(32 * var(--k));left:calc(-34 * var(--k));top:calc(-6 * var(--k));
  border:calc(13 * var(--k)) solid #250b55;border-top:0;border-radius:0 0 999px 999px;opacity:var(--lid,0)}
[data-face="surprised"] .eye .open{--sz:1.12}
/* guance */
.blush{position:absolute;width:calc(70 * var(--k));height:calc(34 * var(--k));border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,120,170,.55),rgba(255,120,170,0));opacity:0;transition:opacity .35s ease}
.blush.l{left:calc(200 * var(--k));top:calc(262 * var(--k))}
.blush.r{left:calc(437 * var(--k));top:calc(262 * var(--k))}
[data-face="happy"] .blush,[data-face="shy"] .blush{opacity:1}
/* zzz e piccoli segni */
.fx{position:absolute;left:62%;top:2%;pointer-events:none;font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;color:var(--accent-2)}
.fx b{position:absolute;opacity:0;font-size:calc(46 * var(--k))}
.fx.zzz b{animation:zfloat 3s ease-in infinite}
.fx.zzz b:nth-child(2){animation-delay:1s;font-size:calc(36 * var(--k))}
.fx.zzz b:nth-child(3){animation-delay:2s;font-size:calc(28 * var(--k))}
@keyframes zfloat{0%{transform:translate(0,0) rotate(-8deg);opacity:0}20%{opacity:.9}100%{transform:translate(calc(90 * var(--k)),calc(-150 * var(--k))) rotate(8deg);opacity:0}}
.pop{position:absolute;pointer-events:none;font-family:"Inter Tight",Inter,system-ui,sans-serif;font-weight:700;
  color:var(--accent);font-size:calc(70 * var(--k));opacity:0}
.pop.go{animation:pop .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pop{0%{opacity:0;transform:translateY(0) scale(.4)}25%{opacity:1;transform:translateY(calc(-40 * var(--k))) scale(1.1)}100%{opacity:0;transform:translateY(calc(-120 * var(--k))) scale(1)}}
.hearts{position:absolute;inset:0;pointer-events:none}
.hearts i{position:absolute;width:calc(34 * var(--k));height:calc(34 * var(--k));opacity:0;
  background:var(--accent-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.1C.8 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.3 2.4.7-1.2 2.2-2.4 4.3-2.4 3.7 0 5.9 3.9 4.3 7.4C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.1C.8 8.4 3 4.5 6.7 4.5c2.1 0 3.6 1.2 4.3 2.4.7-1.2 2.2-2.4 4.3-2.4 3.7 0 5.9 3.9 4.3 7.4C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat}
.hearts i.go{animation:heart 1.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes heart{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1;transform:translate(var(--dx),calc(-60 * var(--k))) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.8),calc(-260 * var(--k))) scale(.8) rotate(var(--rt))}}
.motion-hint{position:absolute;left:50%;bottom:-6px;transform:translate(-50%,100%);white-space:nowrap;
  font-size:12px;color:var(--ink-soft);background:var(--card);border:1px solid var(--card-border);
  padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.motion-hint.show{opacity:1}