:root { color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; text-align: center; user-select: none; -webkit-user-select: none;
  font: 20px "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif; color: #3b2a5a;
  background: linear-gradient(#fff4c2, #ffd9ec) fixed;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
h1 { margin: 1rem 0 2rem; font-size: clamp(2rem, 6vw, 3.2rem); }
main { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem, 4vw, 2.4rem); max-width: 60rem; margin: 0 auto; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  width: clamp(8rem, 22vw, 11rem); color: inherit; text-decoration: none; font-weight: bold;
}
.icon {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 28%;
  font-size: clamp(4rem, 12vw, 6.5rem); background: var(--c); box-shadow: 0 8px 0 rgba(0, 0, 0, .18);
  transition: transform .15s;
}
.tile:hover .icon { transform: translateY(-4px) rotate(-3deg); }
.tile:active .icon { transform: translateY(4px) scale(.96); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.name { font-size: .95rem; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .icon { transition: none; } }