/* Home page: first-visit monster welcome + "Über den Erfinder" dialog (hallo.js) */
.hl{
  --mc:var(--orange);
  position:fixed;inset:0;z-index:45;display:grid;place-items:end center;
  padding:16px 16px max(16px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 100%,color-mix(in oklab,var(--mc) 30%,transparent),transparent 70%),rgb(8 7 14 / .72);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  transition:background .5s;animation:hlFade .4s both;
}
html:has(.hl){overflow:hidden}
.hl.bye{animation:hlFade .4s reverse both}
@keyframes hlFade{from{opacity:0}}
.hl-skip{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--ink-2);color:var(--muted);font:600 14px var(--body);cursor:pointer}
.hl-skip:hover{color:var(--text)}
.hl-stage{width:min(600px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:3svh}

.hl-bub{
  position:relative;width:100%;padding:20px 22px;border-radius:26px;background:#fff;color:var(--ink);
  box-shadow:0 8px 0 var(--mc);opacity:0;transform:translateY(16px) scale(.92);transform-origin:50% 100%;
  transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .4s;
}
.hl-bub.in{opacity:1;transform:none}
.hl-bub::after{content:"";position:absolute;left:50%;bottom:-17px;width:28px;height:20px;margin-left:-14px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}
.hl-say{margin:0;min-height:2.6em;font:800 clamp(20px,3.2vw,26px)/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance}
.hl-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hl-act:empty{display:none}
.hl-act .btn{font-size:17px;padding:12px 18px}
.hl-form{display:flex;gap:10px;width:100%}
.hl-form input{
  flex:1;min-width:0;padding:12px 16px;border-radius:14px;border:3px solid var(--ink-3);background:#F4F1FF;color:var(--ink);
  font:700 18px var(--body);outline:none;
}
.hl-form input:focus{border-color:var(--mc)}

.hl-mon{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0}
.hl-mon svg{width:clamp(130px,26svh,220px);height:auto;overflow:visible;display:block}
.hl-mon .lbl{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);color:var(--mc)}
.hl-mon.in{animation:hlIn .6s cubic-bezier(.3,1.6,.5,1) both}
.hl-mon.in svg{animation:hlBob 2.4s ease-in-out .6s infinite}
.hl-mon.out{animation:hlOut .38s ease-in both}
@keyframes hlIn{from{opacity:0;transform:translateY(80%) scale(.4)}to{opacity:1;transform:none}}
@keyframes hlOut{from{opacity:1}to{opacity:0;transform:translateY(70%) scale(.5) rotate(-12deg)}}
@keyframes hlBob{50%{transform:translateY(-6px) rotate(-2deg)}}

/* Erfinder dialog: uses .games (backdrop, close button) from index.html */
.erf{width:min(640px,calc(100% - 24px))}
.erf-in{text-align:center}
.erf-in h2{font-size:clamp(30px,5vw,48px)}
.erf-mon svg{width:110px;height:auto;margin:0 auto 6px;display:block;overflow:visible;animation:hlBob 2.4s ease-in-out infinite}
.erf-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.erf-btns .btn{font-size:17px}
.erf .btn[data-yes]{--c:var(--lemon)}
.erf .g-head{text-align:left}
.erf-letter{text-align:left;font-size:18px;padding:22px 24px;border-radius:22px;background:var(--ink);border:2px dashed var(--line)}
.erf-letter p{margin:0 0 14px}
.erf-letter b{color:var(--lemon)}
.erf-letter .sig{margin:20px 0 0;text-align:right;font:800 22px var(--display);color:var(--orange);transform:rotate(-3deg)}

@media (max-width:520px){
  .hl-act>.btn{flex:1 1 100%;justify-content:center}
  .erf-btns .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hl,.hl.bye,.hl-mon.in,.hl-mon.in svg,.hl-mon.out,.erf-mon svg{animation:none}
  .hl-mon.in{opacity:1}
  .hl-bub{transition:none}
}