/* Startscreen: animiertes Logo, Menükarte, Reconnect-Karte, schwebende Deko-Formen (auch im Hintergrund von Liste/Lobby). */

/* Dekoration: Punktraster + schwebende Formen – nie klickbar */
.screen-menu, .screen-list, .screen-lobby {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(43,42,85,.09) 1.6px, transparent 1.8px);
  background-size: 28px 28px;
}
.bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-shapes i { position: absolute; display: block; opacity: .75; animation: drift var(--dur, 16s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.bg-shapes i.circle   { border-radius: 50%; }
.bg-shapes i.square   { border-radius: 22%; }
.bg-shapes i.ring     { border-radius: 50%; background: transparent !important; border: 8px solid var(--c); }
.bg-shapes i.tri      { background: transparent !important; width: 0 !important; height: 0 !important; border-left: calc(var(--s) * .55px) solid transparent; border-right: calc(var(--s) * .55px) solid transparent; border-bottom: calc(var(--s) * .95px) solid var(--c); }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(var(--dx, 18px), var(--dy, -26px)) rotate(var(--rot, 16deg)); } }

.screen-menu { display: flex; flex-direction: column; }
.menu-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; padding: var(--pad); }
.menu-inner { margin: auto; width: min(100%, 540px); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 8px 0; }

/* Logo: Aufkleber-Optik – Buchstaben in Spielerfarben mit Indigo-Kontur, hüpfen nacheinander; Mini-Helden darüber */
.logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 100%; }
.logo-heroes { display: flex; justify-content: center; align-items: flex-end; gap: clamp(2px, 1vw, 10px); height: clamp(52px, 12vw, 84px); }
.logo-heroes img { height: 100%; aspect-ratio: 1; object-fit: contain; animation: hop 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); transform-origin: 50% 100%; }
.logo-title { display: flex; flex-direction: column; align-items: center; line-height: .92; max-width: 100%; }
.lt-row { display: flex; justify-content: center; max-width: 100%; }
.lt { display: inline-block; font: 700 clamp(40px, 12.5vw, 88px)/1 var(--font-display); color: var(--c);
  -webkit-text-stroke: clamp(4px, 1vw, 7px) var(--ink); paint-order: stroke fill; text-shadow: 0 clamp(4px, 1vw, 7px) 0 var(--ink);
  animation: bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }
.lt-b .lt { font-size: clamp(48px, 15vw, 108px); }
.lt-sp { width: .18em; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(calc(var(--r, 0) * 1deg)); } 50% { transform: translateY(-9px) rotate(calc(var(--r, 0) * -1deg)); } }
@keyframes hop { 0%,55%,100% { transform: translateY(0) scale(1,1); } 62% { transform: translateY(0) scale(1.1,.86); } 76% { transform: translateY(-22px) scale(.94,1.08); } 90% { transform: translateY(0) scale(1.08,.9); } }
.tagline { max-width: 34ch; margin-top: 8px; color: var(--ink-2); font: 700 clamp(15px, 3.6vw, 18px)/1.35 var(--font-ui); }

.menu-card { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 32px; background: var(--paper); box-shadow: var(--shadow-card); }
.menu-card .btn-xl { width: 100%; }
.join-row { display: flex; gap: 10px; min-width: 0; }
.join-row .btn { flex: 1; min-width: 0; }
#btn-browse { align-self: center; }

.resume-card { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 16px 18px; border-radius: 26px; background: var(--lemon); box-shadow: 0 6px 0 rgba(122,90,0,.22); animation: pop .4s var(--ease); }
.resume-icon { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--sun); color: var(--ink); }
.resume-text { display: flex; flex-direction: column; min-width: 0; }
.resume-text strong { font: 600 18px var(--font-display); }
.resume-text span { color: #6A5100; font-weight: 700; font-size: 14px; }
.resume-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }

.menu-foot { position: relative; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px var(--pad) calc(10px + env(safe-area-inset-bottom)); }