:root {
  --ink: #24111b; --rose: #ff4f9f; --rose-soft: #ffd5e8; --cream: #fff7fb;
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; padding: clamp(20px, 5vw, 56px);
  color: var(--ink); font-family: var(--font);
  background:
    radial-gradient(circle at 12% 16%, rgba(159, 242, 208, 0.48), transparent 24rem),
    radial-gradient(circle at 84% 8%, rgba(255, 201, 157, 0.58), transparent 22rem),
    linear-gradient(135deg, #ffe3ef 0%, #ff9ec9 48%, #ffe7f2 100%);
}
main { width: min(960px, 100%); margin: 0 auto; }
.kicker { margin: 0 0 8px; color: var(--rose); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
h1 { margin: 0 0 28px; font-size: clamp(32px, 7vw, 56px); line-height: 1.05; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.tile {
  position: relative; display: grid; justify-items: center; gap: 10px; padding: 26px 12px 20px;
  color: var(--ink); text-decoration: none; text-align: center;
  background: rgba(255, 247, 251, 0.88); border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px; box-shadow: 0 10px 24px rgba(120, 28, 72, 0.12);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.tile:hover, .tile:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(120, 28, 72, 0.2); outline: 2px solid var(--rose); outline-offset: 2px; }
.icon { font-size: 44px; line-height: 1; }
.icon-img { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.name { font-weight: 700; }
.lock { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; image-rendering: pixelated; }
.love { text-align: center; margin: 0 0 clamp(24px, 6vw, 44px); padding: clamp(20px, 5vw, 36px) 16px; background: rgba(255, 247, 251, 0.6); border-radius: 20px; box-shadow: 0 10px 30px rgba(120, 28, 72, 0.14); }
.heart { display: inline-block; width: clamp(72px, 16vw, 96px); height: auto; image-rendering: pixelated; animation: beat 1.8s ease-in-out infinite; }
.love-text { margin: 10px 0 0; font-size: clamp(34px, 9vw, 72px); font-weight: 800; line-height: 1.1; color: var(--rose); text-shadow: 0 2px 0 #fff; }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.12); } 48% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } .heart { animation: none; } }