@font-face { font-family: "Lilita One"; src: url("../fonts/lilita_one.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito_extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito_black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

:root {
  --night: #110F35; --indigo: #36318C; --plum: #B85A8C; --peach: #F6A35C;
  --cream: #FFF8EC; --lavender: #DCDDFF; --dim: #A9A6D8; --gold: #FFD166; --coral: #FF6F59;
  --mint: #5BE0A8; --panel: rgba(20, 18, 58, .78); --line: rgba(220, 221, 255, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--cream); background: var(--night);
  font: 800 17px/1.6 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.sky {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff8 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 68% 9%, #fff9 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 84% 31%, #fff7 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 33% 41%, #fff6 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 52% 24%, #fff8 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 6% 62%, #fff5 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 92% 70%, #fff5 50%, transparent 52%),
    linear-gradient(180deg, #0B0A28 0%, var(--night) 30%, #241F66 70%, #3C2C78 100%);
}
a { color: var(--gold); }
h1, h2, h3, .brand span, .hud b, .btn, .store strong { font-family: "Lilita One", "Nunito", sans-serif; font-weight: 400; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* header */
.top { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 4px 14px #0006; }
.brand span { font-size: 26px; letter-spacing: .5px; }
.top nav { margin-left: auto; display: flex; gap: 22px; font-size: 15px; }
.top nav a { color: var(--lavender); text-decoration: none; }
.top nav a:hover { color: var(--cream); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 30px 0 70px; }
.kicker { display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 14px; font-weight: 900; letter-spacing: 4px; font-size: 13px;
  color: var(--lavender); background: rgba(20, 18, 58, .7); border: 1px solid var(--line); }
.hero h1 { font-size: clamp(46px, 6.4vw, 78px); line-height: .98; margin: 0 0 18px; text-shadow: 0 5px 0 #6A2D63, 0 10px 30px #0008; }
.hero h1 span { color: var(--gold); }
.sub { color: var(--lavender); font-size: 19px; max-width: 470px; margin: 0 0 28px; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store { display: inline-flex; flex-direction: column; min-width: 180px; padding: 10px 20px 11px; border-radius: 16px; text-decoration: none; color: var(--cream);
  background: linear-gradient(180deg, #7B6BEA, #5A4BC8); box-shadow: 0 5px 0 #2E2577; }
.store small { font-size: 12px; color: #E4E0FF; letter-spacing: .5px; }
.store strong { font-size: 22px; line-height: 1.1; }
.store[aria-disabled="true"] { cursor: default; }

.stage { position: relative; aspect-ratio: 4 / 3.4; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 209, 102, .55), 0 9px 0 #0A0826, 0 30px 80px rgba(246, 163, 92, .22); }
.stage canvas { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; outline: none; }
.stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--gold); }
.hud { position: absolute; left: 0; right: 0; top: 18px; text-align: center; pointer-events: none; }
.hud b { display: block; font-size: 30px; color: var(--cream); -webkit-text-stroke: 6px #1D1B3A; paint-order: stroke fill; }
.hud b.score { font-size: 64px; line-height: 1; }
.hud span { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 12px; font-size: 14px; background: rgba(20, 18, 58, .75); color: var(--lavender); }

/* features */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 70px; }
.feat { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.feat h3 { margin: 0 0 6px; font-size: 22px; color: var(--gold); }
.feat p { margin: 0; color: var(--lavender); font-size: 15px; }

section > h2 { font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--mint); margin: 0 0 6px; font-family: "Nunito", sans-serif; font-weight: 900; }
.lead { font-family: "Lilita One", sans-serif; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 0 0 26px; max-width: 760px; }
#worlds, #skins, .more, .help { padding-bottom: 76px; }

/* worlds */
.worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.world { border-radius: 22px; padding: 120px 20px 20px; position: relative; overflow: hidden; min-height: 240px; }
.world span { font-weight: 900; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.world h3 { margin: 2px 0 4px; font-size: 26px; }
.world p { margin: 0; font-size: 14px; opacity: .9; }
.world::before { content: ""; position: absolute; left: 50%; top: 26px; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; }
.w1 { background: linear-gradient(180deg, #110F35, #36318C 45%, #B85A8C 75%, #F6A35C); }
.w1::before { background: #FFF1C9; box-shadow: 0 0 50px 14px rgba(255, 241, 201, .45); }
.w2 { background: linear-gradient(180deg, #0B1026, #1F2A55 45%, #3D4C7E 75%, #7D8FB5);
  background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(191, 212, 255, .18) 18px 19.5px), linear-gradient(180deg, #0B1026, #1F2A55 45%, #3D4C7E 75%, #7D8FB5); }
.w2::before { background: radial-gradient(circle at 40% 40%, #6F90CC, #2A3358); width: 90px; height: 50px; margin-left: -45px; border-radius: 40px; }
.w3 { background: linear-gradient(180deg, #042036, #0A4F6A 45%, #168C9C 75%, #5ACFC0); }
.w3::before { background: transparent; border: 3px solid rgba(255, 255, 255, .55); width: 34px; height: 34px; margin-left: -17px;
  box-shadow: 40px 30px 0 -8px rgba(255, 255, 255, .35), -38px 44px 0 -10px rgba(255, 255, 255, .3); }
.w4 { background: linear-gradient(180deg, #05030F, #170B36 45%, #341A62 75%, #6A3592); }
.w4::before { background: #FFF1C9; box-shadow: 0 0 40px 10px rgba(230, 200, 255, .35); }
.w4::after { content: ""; position: absolute; left: 50%; top: 52px; width: 140px; height: 24px; margin-left: -70px; border: 4px solid rgba(230, 200, 255, .8);
  border-radius: 50%; transform: rotate(-18deg); }

/* skins */
.starlight { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; padding: 26px; margin-bottom: 18px; border-radius: 26px;
  background: radial-gradient(circle at 18% 50%, rgba(143, 123, 255, .35), transparent 55%), linear-gradient(135deg, #0B0830, #2A1670 55%, #5B2A8F);
  border: 2px solid #B59BFF; box-shadow: 0 7px 0 #0A0624; }
.starlight h3 { font-size: 40px; margin: 6px 0 6px; }
.starlight ul { margin: 0 0 18px; padding: 0; list-style: none; color: #DCD3FF; }
.starlight li { margin: 5px 0; padding-left: 24px; position: relative; }
.starlight li::before { content: "✦"; position: absolute; left: 0; color: #FFE29A; }
.pv { width: 100%; aspect-ratio: 1; display: block; }
.pv.big { max-width: 260px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 9px; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: #fff; }
.tag.legend { background: #FF4D6D; }
.btn { border: 0; cursor: pointer; font-size: 22px; color: #5A3410; padding: 10px 24px; border-radius: 16px;
  background: linear-gradient(180deg, #FFE29A, #FFB86B); box-shadow: 0 5px 0 #B86A2A; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #B86A2A; }
.skins { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.skin { appearance: none; font: inherit; color: var(--cream); cursor: pointer; text-align: center; padding: 10px 8px 14px; border-radius: 20px;
  background: linear-gradient(180deg, #3A3494, #26226A); border: 3px solid #4E48B0; box-shadow: 0 5px 0 #120F3B; position: relative; }
.skin.on { border-color: var(--gold); }
.skin .tag { font-size: 9px; padding: 2px 7px; }
.skin strong { display: block; font-size: 15px; font-weight: 900; }
.skin small { color: var(--dim); font-size: 12px; }

/* more */
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 26px; }
.card h2 { font-size: 30px; margin: 0 0 8px; color: var(--gold); }
.card p { margin: 0; color: var(--lavender); }
.help p { color: var(--lavender); }

footer { border-top: 1px solid var(--line); padding: 26px 0 44px; color: var(--dim); font-size: 14px; }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
footer .links a { color: var(--lavender); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 10px; }
  .features, .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .top nav { gap: 14px; font-size: 14px; }
  .top nav a:not(:last-child) { display: none; }
  .features, .worlds, .more { grid-template-columns: 1fr; }
  .skins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starlight { grid-template-columns: 1fr; text-align: center; }
  .starlight .pv.big { margin: 0 auto; max-width: 200px; }
  .starlight ul { text-align: left; }
  .store { flex: 1; min-width: 0; }
  .stage { aspect-ratio: 3 / 3.6; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }