:root {
  --ink: #210858;
  --pointer-x: 0;
  --pointer-y: 0;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #6133da;
}

body {
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  color: white;
}

img { -webkit-tap-highlight-color: transparent; }

.blank-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(5.5rem, 18vh) 1fr minmax(4.5rem, 14vh);
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 50% 47%, rgba(111, 255, 255, 0.34) 0 8%, transparent 34%),
    radial-gradient(circle at 16% 20%, rgba(255, 84, 205, 0.38), transparent 29%),
    radial-gradient(circle at 84% 76%, rgba(53, 190, 255, 0.3), transparent 28%),
    linear-gradient(145deg, #32127f 0%, #7438df 43%, #3c1eaa 100%);
}

.blank-scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -42vmax;
  opacity: 0.17;
  background: repeating-conic-gradient(from 7deg at 50% 50%, rgba(255, 255, 255, 0.72) 0deg 9deg, transparent 9deg 24deg);
  animation: rays 70s linear infinite;
}

.blank-scene::after {
  content: "";
  position: absolute;
  z-index: 9;
  pointer-events: none;
  inset: 0;
  box-shadow: inset 0 0 8rem rgba(22, 4, 83, 0.5), inset 0 0 1rem rgba(255, 255, 255, 0.11);
}

.scene-glow {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(72vw, 60rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(75, 240, 255, 0.32), rgba(89, 87, 255, 0.09) 44%, transparent 71%);
  filter: blur(4px);
}

.scene-dots {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.32;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1.3px, transparent 1.4px);
  background-size: 31px 31px;
  mask-image: radial-gradient(circle at 50% 50%, transparent 8%, black 95%);
}

.scene-header,
.scene-footer {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.scene-header {
  align-items: flex-end;
  padding: clamp(0.8rem, 2.2vh, 1.8rem) 1rem 0;
}

.game-title {
  position: relative;
  margin: 0;
  transform: rotate(-2deg) skewX(-4deg);
  color: transparent;
  font-size: clamp(3.8rem, 8.2vw, 8rem);
  font-weight: 1000;
  line-height: 0.88;
  letter-spacing: 0.045em;
  -webkit-text-stroke: clamp(5px, 0.52vw, 10px) var(--ink);
  background: linear-gradient(180deg, #fffdf1 0 16%, #fff469 17% 48%, #ffb52d 49% 71%, #ff792e 72% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 0 #240763) drop-shadow(0 13px 0 rgba(31, 2, 91, 0.34));
}

.game-title::before {
  content: attr(data-text);
  position: absolute;
  z-index: 2;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0 15%, transparent 31%);
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(-0.045em);
}

.game-title::after {
  content: "";
  position: absolute;
  top: -0.13em;
  right: -0.22em;
  width: 0.22em;
  height: 0.22em;
  background: white;
  clip-path: polygon(50% 0, 62% 37%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 37%);
  filter: drop-shadow(0 0 8px #fff5a3);
  animation: sparkle 2.6s ease-in-out infinite;
}

.hero-character {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 0;
  place-items: center;
}

.character-wrap {
  position: relative;
  width: min(47vw, 59vh, 38rem);
  min-width: 18rem;
  transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px), 0);
  transition: transform 160ms ease-out;
  animation: character-float 4.4s ease-in-out infinite;
  filter: drop-shadow(0 1.35rem 0.8rem rgba(29, 3, 93, 0.34));
}

.character {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.character-shadow {
  position: absolute;
  bottom: 2%;
  left: 50%;
  width: min(31vw, 25rem);
  height: clamp(1.2rem, 3.8vh, 2.6rem);
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(29, 4, 92, 0.44);
  filter: blur(9px);
  animation: shadow-pulse 4.4s ease-in-out infinite;
}

.float-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.float-item {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: min(var(--size), 18vw);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0.8rem 0.65rem rgba(31, 5, 90, 0.34));
}

.float-item img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(calc(var(--pointer-x) * var(--depth) * 12px), calc(var(--pointer-y) * var(--depth) * 9px), 0) rotate(var(--rotate));
  animation: item-drift var(--duration) ease-in-out var(--delay) infinite;
  will-change: transform;
}

.float-layer--left .float-item:nth-child(even),
.float-layer--right .float-item:nth-child(odd) { z-index: 5; }

.scene-footer {
  align-items: flex-start;
  padding: 0 1rem clamp(1rem, 3vh, 2rem);
}

.love-line {
  position: relative;
  margin: 0;
  transform: rotate(0.7deg);
  color: #fff;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1rem, 2vw, 1.8rem);
  font-weight: 1000;
  line-height: 1.15;
  letter-spacing: 0.012em;
  -webkit-text-stroke: clamp(2px, 0.19vw, 4px) var(--ink);
  text-shadow: 0 4px 0 #43159f, 0 8px 14px rgba(32, 5, 91, 0.52);
}

.love-line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #fff 0 38%, #9cecff 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.blank-scene.is-booping .character-wrap { animation: boop 680ms cubic-bezier(0.2, 0.9, 0.25, 1.25); }
.blank-scene.is-booping .float-item img { animation: scatter 680ms cubic-bezier(0.2, 0.85, 0.25, 1); }

@keyframes character-float {
  0%, 100% { transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px), 0) rotate(-0.8deg); }
  50% { transform: translate3d(calc(var(--pointer-x) * -8px), calc(var(--pointer-y) * -6px - 10px), 0) rotate(0.8deg); }
}

@keyframes shadow-pulse {
  0%, 100% { opacity: 0.68; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 0.48; transform: translateX(-50%) scaleX(0.9); }
}

@keyframes item-drift {
  0%, 100% { transform: translate3d(calc(var(--pointer-x) * var(--depth) * 12px), calc(var(--pointer-y) * var(--depth) * 9px), 0) rotate(var(--rotate)) scale(1); }
  33% { transform: translate3d(calc(var(--pointer-x) * var(--depth) * 12px + 12px), calc(var(--pointer-y) * var(--depth) * 9px - 16px), 0) rotate(calc(var(--rotate) + 8deg)) scale(1.035); }
  66% { transform: translate3d(calc(var(--pointer-x) * var(--depth) * 12px - 9px), calc(var(--pointer-y) * var(--depth) * 9px + 8px), 0) rotate(calc(var(--rotate) - 6deg)) scale(0.98); }
}

@keyframes boop {
  0% { transform: scale(1); }
  28% { transform: translateY(1rem) scale(0.91, 1.06); }
  58% { transform: translateY(-1.7rem) scale(1.07, 0.94) rotate(-2deg); }
  100% { transform: scale(1); }
}

@keyframes scatter {
  0%, 100% { transform: rotate(var(--rotate)) translate(0, 0) scale(1); }
  45% { transform: rotate(calc(var(--rotate) + 22deg)) translate(1.4rem, -1.8rem) scale(1.12); }
}

@keyframes sparkle {
  0%, 35%, 100% { opacity: 0.3; transform: rotate(0deg) scale(0.45); }
  52% { opacity: 1; transform: rotate(55deg) scale(1); }
}

@keyframes rays { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .blank-scene { grid-template-rows: minmax(5.8rem, 18vh) 1fr minmax(4.8rem, 15vh); }
  .game-title { font-size: clamp(3.4rem, 18vw, 5.4rem); letter-spacing: 0.02em; }
  .character-wrap { width: min(88vw, 54vh, 29rem); min-width: 0; }
  .character-shadow { width: 58vw; }
  .float-item { width: min(var(--size), 25vw); opacity: 0.96; }
  .float-layer--left .float-item:nth-child(2),
  .float-layer--left .float-item:nth-child(6),
  .float-layer--right .float-item:nth-child(2),
  .float-layer--right .float-item:nth-child(6) { opacity: 0.58; transform: translate(-50%, -50%) scale(0.8); }
  .love-line { max-width: 22rem; font-size: clamp(0.95rem, 4vw, 1.25rem); }
}

@media (max-height: 660px) {
  .blank-scene { grid-template-rows: minmax(4.8rem, 20vh) 1fr minmax(3.8rem, 14vh); }
  .character-wrap { width: min(44vw, 52vh, 31rem); }
  .game-title { font-size: clamp(3rem, 8vw, 5.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}