* { box-sizing: border-box; }
:root {
  --ink: #2a2340; --muted: #6b6187; --line: rgba(120,100,180,.18);
}
html { color-scheme: light; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: Nunito, system-ui, sans-serif;
  background:
    radial-gradient(1100px 600px at 10% -10%, #ffe3f3 0%, transparent 60%),
    radial-gradient(900px 620px at 90% 5%, #e3ddff 0%, transparent 62%),
    radial-gradient(900px 700px at 50% 112%, #d9fff2 0%, transparent 60%),
    linear-gradient(180deg, #fdf7ff 0%, #f4f6ff 55%, #effcf8 100%);
  display: flex; flex-direction: column;
}
.wrap { flex: 1; width: 100%; max-width: 62rem; margin: 0 auto; padding: 4.5rem 1.25rem 2rem; }
header { text-align: center; margin-bottom: 2.6rem; }
.kicker { margin: 0 0 .4rem; font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; color: #a06ab8; font-weight: 800; }
h1 {
  margin: 0; font-family: "Baloo 2", Nunito, sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 4.6rem); letter-spacing: -.035em;
  background: linear-gradient(100deg, #ff8fc4 0%, #b48cff 45%, #63d9bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.85));
}
.tag { margin: .5rem auto 0; max-width: 32rem; color: var(--muted); font-size: 1.02rem; }
.rooms { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.room {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 22px;
  padding: 1.5rem 1.4rem 1.3rem; backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(130,100,190,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.room:hover { transform: translateY(-5px) rotate(-.5deg); background: #fff; box-shadow: 0 20px 40px rgba(130,100,190,.22); }
.room .emoji { font-size: 1.9rem; display: block; margin-bottom: .5rem; }
.room h2 { margin: 0 0 .25rem; font-family: "Baloo 2", sans-serif; font-size: 1.45rem; letter-spacing: -.01em; }
.room p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.room .go { position: absolute; top: 1.35rem; right: 1.3rem; color: #b18ad0; font-weight: 800; }
.more { text-align: center; color: var(--muted); font-size: .84rem; margin: 2rem 0 0; opacity: .85; }
footer { text-align: center; padding: 1.5rem 1.25rem 2.4rem; color: var(--muted); font-size: .8rem; }
footer a { color: #7a5aa0; }
@media (prefers-reduced-motion: reduce) { .room { transition: none; } .room:hover { transform: none; } }