/* Головна Гарбузика: вибір пригоди. Окремий файл, бо CSP сайту забороняє вбудовані стилі. */
:root { --ink: #2b1a3d; --card: #fff8ec; --purple: #6b3fa0; --orange: #f28c28; --orange-d: #c9661a; --muted: #7a6a85; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink);
  background: radial-gradient(circle at 78% 14%, rgba(255,240,190,.35) 0 70px, rgba(255,240,190,0) 190px),
              linear-gradient(#140a2e, #3a1d5c 60%, #7a3b5e); background-attachment: fixed; }
.wrap { max-width: 920px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px 40px; }
header { text-align: center; color: #fff3d6; margin: 10px 0 22px; }
header svg { width: 120px; height: 120px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
h1 { margin: 6px 0 4px; font-size: clamp(28px, 6vw, 42px); }
header p { margin: 0; color: #e9d9ff; font-size: 17px; }
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
a.level { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: var(--card);
  border: 3px solid #f6c77d; border-radius: 20px; padding: 20px 20px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); transition: transform .15s; }
a.level:hover, a.level:focus-visible { transform: translateY(-4px); outline: none; border-color: var(--orange); }
.icon { font-size: 44px; line-height: 1; }
.num { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
a.level h2 { margin: 0; color: var(--purple); font-size: 22px; }
a.level p { margin: 0; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tags span { background: #efe3ff; color: #4a237a; border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.progress { min-height: 1.3em; font-size: 14px; color: #2f6f2a; font-weight: 700; }
.go { margin-top: auto; align-self: flex-start; background: var(--orange); color: #fff; border: 2px solid var(--orange-d); border-radius: 12px; padding: 10px 18px; font-weight: 800; }
footer { text-align: center; color: #cdb8ea; font-size: 13px; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { a.level { transition: none; } }