/* ======================================================================
   Logo "Niphlipps Spielesammlung" (start screen)
   ====================================================================== */
#screen-hub { overflow-y: auto; }
.hub-logo { display: flex; justify-content: center; margin: 4px 0 2px; }
.nl {
  appearance: none; border: 0; background: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.nl:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 16px; }
.nl-stage { position: relative; display: block; width: min(300px, 78vw); }
.nl-scene { display: block; width: 100%; height: auto; overflow: visible; }

/* Title: colored letters in the game colors */
.nl-title { display: flex; gap: 1px; margin-top: -14px; position: relative; z-index: 2; }
.nl-title i {
  font-style: normal; font-weight: 900; font-size: clamp(38px, 11vw, 52px); line-height: 1;
  color: var(--c);
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  transform: rotate(calc((var(--i) - 4) * 1.6deg)) translateY(calc(var(--i) * var(--i) * .25px - 4px));
  display: inline-block;
}
.nl-sub {
  margin-top: 6px; padding: 4px 14px 5px; border-radius: 999px;
  background: #1d2532; border: 1px solid var(--line);
  font-weight: 800; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: #e9edf3;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

/* Idle: blinking and gentle swaying */
.nl-char { transform-box: fill-box; transform-origin: 50% 100%; }
.nl-p { animation: nl-idle 4.2s ease-in-out infinite; }
.nl-n { animation: nl-idle 4.2s ease-in-out infinite -2.1s; }
@keyframes nl-idle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.nl-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: nl-blink 5s infinite; }
.nl-n .nl-eyes { animation-delay: -1.3s; }
@keyframes nl-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
.eye-wink { opacity: 0; }

/* ---------- Party on tap ---------- */
.nl.party .nl-p { animation: nl-jump 900ms cubic-bezier(.3,.7,.4,1) both; }
.nl.party .nl-n { animation: nl-jump 900ms cubic-bezier(.3,.7,.4,1) 140ms both; }
@keyframes nl-jump {
  0% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(0) scale(1.06, .9); }
  40% { transform: translateY(-34px) scale(.96, 1.06) rotate(-4deg); }
  62% { transform: translateY(0) scale(1.07, .92); }
  76% { transform: translateY(-8px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
/* Philipp's cap flies off and lands again */
.nl-cap { transform-box: fill-box; transform-origin: 50% 70%; }
.nl.party .nl-cap { animation: nl-cap 1100ms cubic-bezier(.3,.6,.4,1) 120ms both; }
@keyframes nl-cap {
  0% { transform: translate(0, 0) rotate(0deg); }
  45% { transform: translate(-6px, -62px) rotate(-200deg); }
  80% { transform: translate(0, 4px) rotate(-360deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}
/* Nina winks and tosses her hair */
.nl.party .nl-n .nl-eyes { animation: none; }
.nl.party .nl-n .eye-r { animation: nl-hide 1300ms 300ms both; }
.nl.party .nl-n .eye-wink { animation: nl-show 1300ms 300ms both; }
@keyframes nl-hide { 0%, 100% { opacity: 1; } 8%, 80% { opacity: 0; } }
@keyframes nl-show { 0%, 100% { opacity: 0; } 8%, 80% { opacity: 1; } }
.nl-hair-back { transform-box: fill-box; transform-origin: 50% 0%; }
.nl.party .nl-hair-back { animation: nl-hair 900ms ease-in-out 200ms both; }
@keyframes nl-hair { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } }
/* Letters hop one after another (a "wave") */
.nl.party .nl-title i { animation: nl-wave 620ms cubic-bezier(.3,.7,.4,1) calc(var(--i) * 55ms) both; }
@keyframes nl-wave {
  0%, 100% { transform: rotate(calc((var(--i) - 4) * 1.6deg)) translateY(calc(var(--i) * var(--i) * .25px - 4px)); }
  45% { transform: rotate(calc((var(--i) - 4) * -3deg)) translateY(-18px) scale(1.15); }
}
.nl.party .nl-dice { animation: nl-shake 500ms ease-in-out 2; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes nl-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } }

/* Speech bubble */
.nl-bubble {
  position: absolute; top: -6px; z-index: 3;
  background: #fff; color: #1d1f22; font-weight: 900; font-size: 14px; white-space: nowrap;
  padding: 6px 11px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: 0; transform: scale(.4); pointer-events: none;
}
.nl-bubble::after {
  content: ""; position: absolute; bottom: -7px; width: 14px; height: 14px; background: #fff;
  transform: rotate(45deg); border-radius: 2px;
}
.nl-bubble.p { left: 6%; transform-origin: 30% 120%; }
.nl-bubble.p::after { left: 26px; }
.nl-bubble.n { right: 4%; transform-origin: 70% 120%; }
.nl-bubble.n::after { right: 26px; }
.nl-bubble.show { animation: nl-bubble 1700ms cubic-bezier(.3,1.5,.5,1) both; }
@keyframes nl-bubble {
  0% { opacity: 0; transform: scale(.4); }
  14% { opacity: 1; transform: scale(1.08); }
  22%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-6px); }
}

/* Flying dice & confetti */
.nl-fly { position: absolute; z-index: 4; pointer-events: none; }
.nl-conf { width: 9px; height: 13px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nl-p, .nl-n, .nl-eyes { animation: none !important; }
}
/* Landscape phone: logo a bit smaller so the games stay visible */
@media (min-aspect-ratio: 4001/3000) and (max-height: 520px) {
  .nl-stage { width: min(210px, 40vw); }
  .nl-title i { font-size: 34px; }
  .nl-sub { font-size: 12px; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }