/* Монстры на входе остаются за непрозрачной формой. */
#nameModal { overflow-x:hidden; padding-top:80px; padding-bottom:32px; }
#nameModal .login-scene { position:relative; isolation:isolate; width:100%; max-width:440px; margin:auto; flex-shrink:0; }
#nameModal .modal-box { position:relative; z-index:2; margin:0; }
.login-visitor { position:absolute; z-index:1; width:180px; height:180px; display:grid; place-items:center;
  font-size:130px; pointer-events:none; user-select:none; opacity:0; filter:drop-shadow(0 0 18px #9d4edd70);
  transition:transform 1s ease-in-out,opacity .6s ease; }
.login-visitor img { display:block; width:100%; height:100%; object-fit:contain; padding:var(--monster-image-padding,0%); }
.login-visitor[data-side="left"] { left:0; top:19%; transform:translate(12%,0) rotate(-8deg); }
.login-visitor[data-side="right"] { right:0; top:43%; transform:translate(-12%,0) rotate(8deg); }
.login-visitor[data-side="top"] { top:0; left:50%; transform:translate(-50%,12%); }
.login-visitor.visible { opacity:1; }
.login-visitor.visible[data-side="left"] { transform:translate(-60%,0) rotate(-15deg); }
.login-visitor.visible[data-side="right"] { transform:translate(60%,0) rotate(15deg); }
.login-visitor.visible[data-side="top"] { transform:translate(-50%,-66%) rotate(5deg); }

/* Высота карточки при увеличении остаётся прежней. */
.monster-breakout[data-monster-anchor="center"] .monster-inspect { align-items:center; }
.monster-breakout[data-monster-anchor="top"] .monster-inspect { align-items:flex-start; }
.monster-breakout[data-monster-anchor="floating"] .monster-inspect.floating-active {
  position:fixed; inset:auto; left:var(--floating-left); top:var(--floating-top); width:var(--floating-size); height:var(--floating-size);
  z-index:30; pointer-events:none; align-items:center; filter:drop-shadow(0 8px 14px #07070b90);
}
.monster-breakout[data-monster-anchor="floating"] .floating-active .monster {
  pointer-events:auto; cursor:zoom-out; width:100%; height:100%; font-size:calc(var(--floating-size) * .75);
}
.monster-inspect.floating-hidden { visibility:hidden; }
/* Выходки не перехватывают клики и не раздвигают интерфейс. */
.mischief-active .monster { pointer-events:none !important; }
.monster.mischief-run { animation:mischief-run 4.8s cubic-bezier(.45,0,.2,1); }
.monster.mischief-grow { animation:mischief-grow 4.4s ease-in-out; }
.monster.mischief-hide { animation:mischief-hide 4.3s ease-in-out; }
.monster.mischief-spin { animation:mischief-spin 4.6s ease-in-out; }
.monster.mischief-bounce { animation:mischief-bounce 4.1s ease-in-out; }
@keyframes mischief-run {
  0% { transform:translate(0,0) scale(1) rotate(0); }
  100% { transform:translate(0,0) scale(1) rotate(360deg); }
  12% { transform:translate(0,0) scale(.42) rotate(-12deg); }
  28% { transform:translate(var(--mischief-left),var(--mischief-up)) scale(.42) rotate(-22deg); }
  48% { transform:translate(var(--mischief-right),0) scale(.42) rotate(22deg); }
  65% { transform:translate(var(--mischief-left),var(--mischief-down)) scale(.42) rotate(-18deg); }
  82% { transform:translate(0,var(--mischief-up)) scale(.65) rotate(360deg); }
}
@keyframes mischief-grow {
  0%,100% { transform:scale(1); }
  14% { transform:scale(.65,.85); }
  34%,58% { transform:scale(var(--mischief-scale)); }
  42% { transform:scale(var(--mischief-scale),.8); }
  50% { transform:scale(.8,var(--mischief-scale)); }
  72% { transform:scale(.7,1); }
  87% { transform:scale(var(--mischief-squash),.7); }
}
@keyframes mischief-hide {
  0%,100% { transform:translate(0,0) scale(1); opacity:1; }
  18% { transform:translate(0,var(--mischief-down)) scale(.05) rotate(-180deg); opacity:0; }
  40% { transform:translate(var(--mischief-right),var(--mischief-up)) scale(.05) rotate(-180deg); opacity:0; }
  52% { transform:translate(var(--mischief-right),var(--mischief-up)) scale(.42) rotate(15deg); opacity:1; }
  68% { transform:translate(var(--mischief-left),0) scale(.42) rotate(-15deg); }
  82% { transform:translate(0,0) scale(.7); }
}
@keyframes mischief-spin {
  0% { transform:translate(0,0) scale(1) rotate(0); }
  100% { transform:translate(0,0) scale(1) rotate(1080deg); }
  16% { transform:translate(0,0) scale(.55) rotate(-30deg); }
  45% { transform:translate(var(--mischief-right),var(--mischief-up)) scale(.42) rotate(360deg); }
  72% { transform:translate(var(--mischief-left),0) scale(.42) rotate(720deg); }
  90% { transform:translate(0,0) scale(.55) rotate(1080deg); }
}
@keyframes mischief-bounce {
  0%,100% { transform:translateY(0) scale(1); }
  12%,42%,72% { transform:translateY(0) scale(var(--mischief-squash),.55); }
  26% { transform:translateY(var(--mischief-up)) scale(.65,1); }
  56% { transform:translateY(var(--mischief-up)) scale(.55,.85) rotate(12deg); }
  85% { transform:translateY(var(--mischief-up)) scale(.65,.9) rotate(-12deg); }
}
.audio-track-controls { margin-top:12px; padding-top:12px; border-top:1px solid #b595cc24; }
.audio-track-controls label { display:block; color:#d7c8e5; font-size:12px; margin-bottom:7px; }
.audio-track-controls select { width:100%; min-height:38px; border:1px solid #b38ec047; border-radius:7px; background:#17111f; color:#e5d3ed; padding:6px; font:13px var(--font-ui); }
.audio-track-nav { display:flex; gap:6px; margin-top:8px; }
.audio-track-nav button { flex:1; min-height:34px; border:1px solid #b38ec047; border-radius:7px; background:#a977c611; color:#d7c8e5; cursor:pointer; }
.audio-track-nav button:disabled { opacity:.4; cursor:default; }
.audio-track-hint { font:11px/1.5 var(--font-ui); color:#a8a0b8; margin-top:6px; }
@media(max-width:600px) {
  #nameModal { padding-top:82px; }
  #nameModal .login-scene { width:calc(100% - 16px); }
  .login-visitor { width:140px; height:140px; font-size:100px; }
  .login-visitor.visible[data-side="left"] { transform:translate(-45%,0) rotate(-15deg); }
  .login-visitor.visible[data-side="right"] { transform:translate(45%,0) rotate(15deg); }
}
@media(prefers-reduced-motion:reduce) {
  .login-visitor { transition:none; }
  .monster.mischief-run,.monster.mischief-grow,.monster.mischief-hide,.monster.mischief-spin,.monster.mischief-bounce { animation:none; }
}