@font-face {
  font-family: 'Great Vibes';
  src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --split: 50%;
  --beat: 0;
  --rosa: #ff5c95;
  --gold: #ffd9a0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #120612;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#welt { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.seite {
  position: fixed; inset: 0;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mit  { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ohne { clip-path: inset(0 0 0 var(--split)); }

.welt-name {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  font-size: clamp(26px, 4.4vw, 52px);
  opacity: 0;
  transition: opacity 2.5s ease 0.6s;
}
.mit .welt-name {
  left: max(20px, 4vw);
  font-family: 'Great Vibes', cursive;
  color: #ffe6f0;
  text-shadow: 0 0 12px rgba(255, 80, 150, .9), 0 0 32px rgba(255, 60, 120, .6);
}
.ohne .welt-name {
  right: max(20px, 4vw);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 30px);
  letter-spacing: .08em;
  color: #9a918b;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.bereit .welt-name { opacity: 1; }

#grenze {
  position: fixed; top: 0; bottom: 0;
  left: var(--split);
  width: 56px; margin-left: -28px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 5;
  outline: none;
}
#grenze .linie {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 12%, #fff 88%, rgba(255,255,255,0));
  box-shadow: 0 0 10px 2px rgba(255, 120, 180, .9), 0 0 32px 6px rgba(255, 60, 130, .5);
}
#grenze .knauf {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 35%, #ff8ab8, #e0115f 70%);
  box-shadow: 0 0 0 2px #fff, 0 0 24px 6px rgba(255, 60, 130, .8), 0 6px 20px rgba(0,0,0,.4);
}
#grenze .herz { width: 28px; height: 26px; fill: #fff; transform: scale(calc(1 + var(--beat) * .18)); }
#grenze .pfeil { width: 9px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#grenze.wink .knauf { animation: wink 2.4s ease-in-out 3; }
@keyframes wink {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 14px), -50%); }
  75% { transform: translate(calc(-50% + 14px), -50%); }
}
.ziehen, .ziehen * { cursor: ew-resize !important; }

.burst { position: fixed; pointer-events: none; z-index: 4; }
.burst.herz svg { width: 100%; height: 100%; fill: hsl(calc(340 + var(--h)) 100% 66%); filter: drop-shadow(0 0 6px rgba(255, 80, 150, .9)); }
.burst.asche { border-radius: 50%; background: #8d8680; box-shadow: 0 0 4px rgba(0,0,0,.6); }

#schleier {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
  background: radial-gradient(circle at 50% 50%, #ffd6e6, #ff7aa8 60%, #3a0a2a);
  animation: auf 3.2s ease .3s forwards;
}
@keyframes auf { to { opacity: 0; visibility: hidden; } }