/* Beatland Games · hub. Bright Beatland style: Fredoka + Rubik, cream and lavender screens, glossy buttons with the dark-violet outline. */
:root { --cream:#fff6e2; --lav:#ece7ff; --ink:#2b1b5e; --ink2:#5b4a99; --o:#34107f; --os:#2a0f6b; --lime:#4efa50; --lime-d:#24b027; --sun:#ffd84a; --pink:#ff5fae; --violet:#7c3aed; --pad:clamp(18px,4vw,56px); }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { background:var(--cream); color:var(--ink); font:400 1.08rem/1.6 Rubik,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3 { font-family:Fredoka,Rubik,sans-serif; font-weight:700; }
.wrap { max-width:1120px; margin:0 auto; padding:0 var(--pad); }
:focus-visible { outline:4px solid var(--violet); outline-offset:3px; border-radius:12px; }

/* wordmark: two-layer text, dark outline behind a glossy gradient fill */
.wm { display:inline-flex; align-items:baseline; gap:.22em; font:700 1.9rem/1 Fredoka,sans-serif; letter-spacing:.01em; white-space:nowrap; }
.wm b, .wm i { position:relative; font-style:normal; color:transparent; display:inline-block; }
.wm b::before, .wm b::after, .wm i::before, .wm i::after { content:attr(data-t); position:absolute; left:0; top:0; white-space:nowrap; }
.wm b::before, .wm i::before { -webkit-text-stroke:.28em var(--o); color:var(--o); text-shadow:0 .14em 0 var(--os); }
.wm b::after { background:linear-gradient(180deg,#f3e6ff 0%,#c79bff 45%,#8a4cf0 100%); -webkit-background-clip:text; background-clip:text; }
.wm i { font-size:.86em; letter-spacing:.06em; } .wm i::after { background:linear-gradient(180deg,#f6ffb0 0%,#a6ff4a 45%,#3fdc2a 100%); -webkit-background-clip:text; background-clip:text; }
.wm.lg { font-size:clamp(2.4rem,6vw,3.6rem); }

/* nav */
.nav { position:fixed; z-index:60; top:14px; left:50%; transform:translateX(-50%); width:min(1120px,calc(100% - 24px)); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:999px; box-shadow:0 10px 28px rgba(43,27,94,.18); display:flex; align-items:center; gap:clamp(10px,2.6vw,30px); padding:8px 10px 8px 22px; }
.nav .logo { display:flex; align-items:center; padding:6px 0; }
.nav .links { display:flex; gap:clamp(12px,2vw,28px); flex:1; }
.nav .links a { font:600 1rem/1 Fredoka,sans-serif; padding:10px 0; border-bottom:3px solid transparent; color:var(--ink); } .nav .links a:hover { border-color:var(--lime); }
.coinchip { display:inline-flex; align-items:center; gap:7px; padding:9px 16px 9px 11px; border-radius:999px; background:linear-gradient(180deg,#fff2b8,#ffd84a); border:3px solid var(--o); box-shadow:0 4px 0 var(--os); font:700 1.05rem/1 Fredoka,sans-serif; color:#4a3100; margin-left:auto; }
.coinchip:active { transform:translateY(3px); box-shadow:0 1px 0 var(--os); }
.ci { display:inline-block; width:1.25em; height:1.25em; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff3b0 0 12%,#ffd84a 13% 62%,#f6b73c 63% 100%); border:2px solid #c98a12; position:relative; flex:none; } .ci::after { content:''; position:absolute; left:50%; top:52%; width:0; height:0; transform:translate(-50%,-50%); border-left:.26em solid transparent; border-right:.26em solid transparent; border-bottom:.42em solid #c98a12; }
.burger { display:none; width:50px; height:50px; border-radius:50%; border:3px solid var(--o); background:radial-gradient(120% 120% at 30% 18%,#e6c6ff 0%,#a45cff 42%,#6428d6 100%); box-shadow:0 5px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.6); place-content:center; gap:5px; flex:none; }
.burger i { display:block; width:22px; height:5px; border-radius:5px; background:linear-gradient(180deg,#f0ff9a,#59e83a); border:2px solid var(--o); transition:transform .22s,opacity .22s; }
.burger[aria-expanded=true] i:nth-child(1) { transform:translateY(9px) rotate(45deg); } .burger[aria-expanded=true] i:nth-child(2) { opacity:0; } .burger[aria-expanded=true] i:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.npanel[hidden] { display:none; }
.npanel { position:absolute; top:calc(100% + 10px); right:0; width:min(320px,calc(100vw - 24px)); background:#fff; border:3px solid var(--o); border-radius:28px; box-shadow:0 8px 0 var(--os),0 24px 44px rgba(43,27,94,.3); padding:14px; display:grid; gap:4px; }
.npanel a { font:600 1.1rem/1 Fredoka,sans-serif; padding:14px 16px; border-radius:16px; } .npanel a:hover { background:var(--lav); }
@media (max-width:860px) { .nav .links { display:none; } .burger { display:grid; } .nav { padding-left:16px; } .wm { font-size:1.55rem; } }

/* glossy buttons */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:700 1rem/1 Fredoka,sans-serif; letter-spacing:.05em; padding:15px 26px; border-radius:999px; border:3px solid var(--o); transition:transform .12s,filter .12s; white-space:nowrap; cursor:pointer; }
.pill.g { background:linear-gradient(180deg,#f0ff9a 0%,#a6ff4a 36%,#42e22b 100%); color:#1b0a55; box-shadow:0 6px 0 var(--os),0 12px 20px rgba(10,0,50,.25),inset 0 3px 0 rgba(255,255,255,.8),inset 0 -5px 0 rgba(20,140,20,.28); text-shadow:0 1px 0 rgba(255,255,255,.55); }
.pill.v { background:linear-gradient(180deg,#dcb1ff 0%,#9d52ff 44%,#6a2bd9 100%); color:#fff; box-shadow:0 6px 0 var(--os),0 12px 20px rgba(10,0,50,.25),inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(60,10,140,.35); text-shadow:0 2px 0 var(--os); }
.pill.big { font-size:1.12rem; padding:19px 32px; } .pill.sm { font-size:.86rem; padding:12px 20px; box-shadow:0 4px 0 var(--os),inset 0 2px 0 rgba(255,255,255,.7); }
.pill:hover { filter:brightness(1.06); transform:translateY(-2px); } .pill:active { transform:translateY(4px); filter:none; box-shadow:0 2px 0 var(--os),inset 0 3px 0 rgba(255,255,255,.7); }
.pill[disabled], .pill.off { background:linear-gradient(180deg,#e9e3fb,#c9bfe9); color:#6b5fb0; border-color:#8e7fd0; box-shadow:0 4px 0 #6c5bb5; cursor:default; text-shadow:none; transform:none; filter:none; }

/* hero */
.hero { position:relative; min-height:max(92svh,620px); display:flex; align-items:center; text-align:center; overflow:hidden; isolation:isolate; padding:120px 0 80px; }
.hero .wrap { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; }
.kicker { font:600 .86rem/1 Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); background:#fff; padding:10px 16px; border-radius:999px; box-shadow:0 3px 0 rgba(43,27,94,.15); margin-bottom:22px; }
h1 { font-size:clamp(3rem,8.6vw,6.4rem); line-height:.95; letter-spacing:-.02em; color:var(--ink); text-shadow:0 4px 0 rgba(255,255,255,.7); }
h1 em { font-style:normal; background:linear-gradient(100deg,var(--violet),#b05cff 45%,var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.lead { max-width:560px; margin:22px auto 30px; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink2); }
.btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.blob { position:absolute; z-index:0; border-radius:50%; filter:blur(10px); opacity:.9; }
.b1 { width:52vw; height:52vw; max-width:620px; max-height:620px; left:-12vw; top:-10vw; background:radial-gradient(circle,#ffe6a3,#fff6e2 70%); }
.b2 { width:46vw; height:46vw; max-width:560px; max-height:560px; right:-14vw; top:10%; background:radial-gradient(circle,#e3d6ff,#fff6e2 70%); }
.b3 { width:40vw; height:40vw; max-width:460px; max-height:460px; left:30%; bottom:-20vw; background:radial-gradient(circle,#d4ffd8,#fff6e2 70%); }
.fl { position:absolute; z-index:2; height:auto; filter:drop-shadow(0 16px 20px rgba(43,27,94,.3)); animation:float 5s ease-in-out infinite; pointer-events:none; }
.f1 { width:clamp(90px,13vw,190px); left:6%; bottom:14%; animation-delay:-1s; } .f2 { width:clamp(80px,11vw,160px); right:8%; bottom:12%; animation-delay:-2.5s; }
.f3 { width:clamp(110px,15vw,220px); right:4%; top:14%; animation-delay:-3.5s; } .f4 { width:clamp(80px,10vw,150px); left:9%; top:18%; animation-delay:-.6s; }
@keyframes float { 50% { transform:translateY(-14px) rotate(2deg); } }
@media (max-width:760px) { .f3 { width:96px; right:2%; top:11%; } .f4 { width:70px; left:3%; top:13%; } .f1 { width:84px; left:3%; bottom:7%; } .f2 { width:72px; right:4%; bottom:6%; } .hero { padding:110px 0 70px; } }
.down { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; font:700 2rem/1 Fredoka,sans-serif; color:var(--ink2); opacity:.6; animation:bob 1.6s ease-in-out infinite; } @keyframes bob { 50% { transform:translate(-50%,8px); } }

/* sections: one screen each */
.sec { padding:clamp(72px,10vw,120px) 0; scroll-margin-top:80px; }
.sec.lav { background:var(--lav); } .sec.cream { background:var(--cream); } .sec.white { background:#fff; }
h2 { text-align:center; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.02; letter-spacing:-.01em; }
.sub { text-align:center; color:var(--ink2); max-width:560px; margin:14px auto 0; font-size:clamp(1rem,1.5vw,1.15rem); }

/* rewards */
.rw3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; } @media (max-width:860px) { .rw3 { grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.rcard { position:relative; background:#fff; border:3px solid var(--o); border-radius:34px; padding:26px 24px 24px; box-shadow:0 8px 0 var(--os),0 20px 40px -16px rgba(43,27,94,.35); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; min-height:270px; }
.rl { font:600 .8rem/1 Fredoka,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); }
.rh { font-size:.92rem; color:var(--ink2); margin-top:auto; }
.rcard.coins .big { display:flex; align-items:center; gap:12px; font:700 clamp(3rem,6vw,4.2rem)/1 Fredoka,sans-serif; color:#4a3100; } .rcard.coins .big .ci { font-size:1em; width:.9em; height:.9em; border-width:3px; }
.rcard.coins .big.bump { animation:bump .35s; } @keyframes bump { 40% { transform:scale(1.12); } }
.days { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.days i { width:40px; height:48px; border-radius:14px; background:var(--lav); border:2px solid #cfc4f0; display:grid; place-items:center; font:700 .72rem/1 Fredoka,sans-serif; color:var(--ink2); position:relative; }
.days i b { font-size:.9rem; color:var(--ink); } .days i small { font-size:.6rem; }
.days i.done { background:linear-gradient(180deg,#f0ff9a,#42e22b); border-color:var(--o); color:#1b0a55; } .days i.done b, .days i.done small { color:#1b0a55; }
.days i.now { border-color:var(--o); background:#fff; box-shadow:0 0 0 3px #ffd84a; transform:scale(1.08); }
.days i:last-child { background:linear-gradient(180deg,#fff2b8,#ffd84a); border-color:#c98a12; } .days i:last-child.done { background:linear-gradient(180deg,#f0ff9a,#42e22b); border-color:var(--o); }
.keys { display:flex; gap:10px; }
.keys i { width:46px; height:46px; border-radius:50%; background:var(--lav); border:2px dashed #b9acdf; display:grid; place-items:center; font-size:1.3rem; filter:grayscale(1); opacity:.5; } .keys i::before { content:'🔑'; }
.keys i.on { background:linear-gradient(180deg,#fff2b8,#ffd84a); border:3px solid var(--o); filter:none; opacity:1; box-shadow:0 3px 0 var(--os); animation:pop .35s; } @keyframes pop { 50% { transform:scale(1.25); } }
.chest { position:relative; width:112px; height:92px; margin-top:2px; transition:transform .15s; }
.chest .box { position:absolute; left:6px; right:6px; bottom:0; height:54px; border-radius:10px 10px 16px 16px; background:linear-gradient(180deg,#b86b2b,#7a4312); border:3px solid var(--os); box-shadow:0 5px 0 var(--os); }
.chest .lid { position:absolute; left:0; right:0; top:4px; height:40px; border-radius:22px 22px 6px 6px; background:linear-gradient(180deg,#d98a44,#a2561b); border:3px solid var(--os); transform-origin:50% 100%; transition:transform .5s cubic-bezier(.3,1.5,.5,1); z-index:2; }
.chest .lock { position:absolute; left:50%; top:40px; transform:translateX(-50%); z-index:3; font-size:1.4rem; filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.chest.ready { animation:wiggle 1.2s ease-in-out infinite; cursor:pointer; } .chest.ready .lock { filter:drop-shadow(0 0 8px #ffd84a); } @keyframes wiggle { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-5deg); } 40% { transform:rotate(5deg); } 60% { transform:rotate(-3deg); } 80% { transform:rotate(3deg); } }
.chest.open .lid { transform:rotateX(-110deg) translateY(-6px); } .chest.open .lock { display:none; } .chest.open::after { content:attr(data-win); position:absolute; left:50%; top:-8px; transform:translateX(-50%); font:700 1.5rem/1 Fredoka,sans-serif; color:#4a3100; text-shadow:0 2px 0 #fff; animation:rise 1.2s ease-out forwards; } @keyframes rise { to { transform:translate(-50%,-36px); opacity:0; } }
.chest.done { opacity:.75; }
.confetti { position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; } .confetti span { position:absolute; top:-20px; border-radius:4px; animation:fall linear forwards; } @keyframes fall { to { transform:translateY(110vh) rotate(720deg); } }

/* game cards */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; } @media (max-width:900px) { .grid3 { grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.grid5 { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:44px; } @media (max-width:560px) { .grid5 { grid-template-columns:1fr 1fr; gap:12px; } }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; } @media (max-width:860px) { .grid2 { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; } }
.card { position:relative; display:block; background:#fff; border:3px solid var(--o); border-radius:32px; overflow:hidden; box-shadow:0 8px 0 var(--os),0 22px 40px -18px rgba(43,27,94,.4); transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
a.card:hover { transform:translateY(-8px) rotate(-.6deg); } a.card:active { transform:translateY(2px); }
.card .badge { position:absolute; z-index:3; left:14px; top:14px; font:700 .7rem/1 Fredoka,sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px 7px; border-radius:999px; background:linear-gradient(180deg,#fff2b8,#ffd84a); color:#4a3100; border:2px solid var(--o); box-shadow:0 3px 0 var(--os); }
.card .badge::before { content:''; display:inline-block; width:.8em; height:.8em; border-radius:50%; background:#f6b73c; border:1.5px solid #c98a12; margin-right:5px; vertical-align:-.1em; }
.card .im { position:relative; aspect-ratio:16/11; overflow:hidden; } .card .im > img { position:absolute; width:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.card .im img.cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; } .card .im img.dim { opacity:.75; }
.im.sky { background:linear-gradient(180deg,#8fdcff 0 38%,#7bd66f 38% 100%); } .im.night { background:#0b0430; } .im.violet { background:radial-gradient(120% 90% at 50% 0%,#5b3cc4 0%,#2a1a66 60%,#1a0c45 100%); }
.im.tall { aspect-ratio:16/9; }
.card .tx { padding:20px 22px 24px; } .card h3 { font-size:1.6rem; line-height:1; } .card p { color:var(--ink2); margin:8px 0 14px; font-size:.95rem; line-height:1.45; } .card .tx .pill { margin-top:2px; }
.card.s .tx { padding:14px 16px 16px; } .card.s h3 { font-size:1.25rem; } .card.s p { margin:6px 0 0; font-size:.86rem; } .card.s .im { aspect-ratio:1/1; } .card.s .badge { left:10px; top:10px; font-size:.6rem; padding:6px 9px 5px; }
.card.soon { pointer-events:none; } .card.soon .im::after { content:'SOON'; position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.55); font:700 1.4rem/1 Fredoka,sans-serif; letter-spacing:.2em; color:var(--ink); }
/* little compositions for the small cards */
.t2048 { background:linear-gradient(180deg,#f3ecff,#dcd0ff); } .t2048 .tile { position:absolute; width:38%; aspect-ratio:1; border-radius:18%; display:grid; place-items:center; font:700 1.6rem/1 Fredoka,sans-serif; color:#fff; border:3px solid var(--o); box-shadow:0 5px 0 var(--os); text-shadow:0 2px 0 var(--os); }
.t2048 .a { left:8%; top:8%; background:#ff7a45; } .t2048 .b { right:8%; top:8%; background:#e0a800; color:#2a1a00; text-shadow:none; } .t2048 .c { left:8%; bottom:8%; background:#ec4899; } .t2048 .d { right:8%; bottom:8%; background:#7c3aed; transform:rotate(6deg); }
.tpairs { background:linear-gradient(180deg,#e3fbe6,#bdf2c6); display:grid; grid-template-columns:1fr 1fr; gap:8%; padding:10%; } .tpairs .pc { background:#fff; border:3px solid var(--o); border-radius:18px; box-shadow:0 4px 0 var(--os); display:grid; place-items:center; padding:8%; } .tpairs .pc img { position:static; height:100%; width:auto; max-height:70px; } .tpairs .pc.back { background:repeating-linear-gradient(45deg,#9d52ff 0 8px,#7c3aed 8px 16px); }
.tblocks { background:linear-gradient(180deg,#1a0c45,#2a1a66); } .tblocks .bk { position:absolute; width:20%; aspect-ratio:1; border:2px solid var(--o); border-radius:14%; box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 3px 0 var(--os); } .bk.k { background:#ff7a45; } .bk.s { background:#ec4899; } .bk.h { background:#e0a800; }
.tclaw { background:linear-gradient(180deg,#bde8ff,#7fc7ff); } .tclaw .rope { position:absolute; left:50%; top:0; width:4px; height:34%; background:#5a3a1a; transform:translateX(-50%); } .tclaw .cl { position:absolute; left:50%; top:30%; width:34%; aspect-ratio:1; transform:translateX(-50%); border:6px solid #7c3aed; border-top-color:transparent; border-radius:50%; clip-path:polygon(0 40%,100% 40%,100% 100%,0 100%); }
.tpop { background:linear-gradient(180deg,#d4ffd8 0 60%,#8fd88a 60% 100%); } .tpop .hole { position:absolute; bottom:12%; width:22%; height:12%; border-radius:50%; background:#4a2d14; box-shadow:inset 0 4px 0 rgba(0,0,0,.35); }
.padsmini { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-4deg); display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(46%,200px); } .padsmini i { aspect-ratio:1; border-radius:18%; display:grid; place-items:center; font:700 .9rem/1 Fredoka,sans-serif; font-style:normal; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.35); } .padsmini .p1 { background:#ff7a45; } .padsmini .p2 { background:#e0a800; color:#2a1a00; } .padsmini .p3 { background:#ec4899; } .padsmini .lk { background:#3a2a80; color:#8d7dd8; border:2px dashed rgba(255,255,255,.25); }
.tracks { position:absolute; inset:14% 12%; display:grid; gap:8%; } .tracks i { border-radius:999px; background:linear-gradient(90deg,#4efa50 0 var(--w,60%),rgba(255,255,255,.12) var(--w,60%)); border:2px solid rgba(255,255,255,.2); } .tracks i:nth-child(1) { --w:70%; } .tracks i:nth-child(2) { --w:45%; background-image:linear-gradient(90deg,#ff5fae 0 45%,rgba(255,255,255,.12) 45%); } .tracks i:nth-child(3) { --w:85%; background-image:linear-gradient(90deg,#ffd84a 0 85%,rgba(255,255,255,.12) 85%); } .tracks i:nth-child(4) { --w:30%; background-image:linear-gradient(90deg,#9d52ff 0 30%,rgba(255,255,255,.12) 30%); } .tracks i:nth-child(5) { --w:0%; }

/* player + leaderboards */
.two { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:22px; margin-top:44px; } @media (max-width:960px) { .two { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; } }
.panel { background:#fff; border:3px solid var(--o); border-radius:30px; padding:24px; box-shadow:0 8px 0 var(--os),0 20px 40px -16px rgba(43,27,94,.3); }
.panel h3 { font-size:1.4rem; margin-bottom:14px; }
label { font:600 .78rem/1 Fredoka,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); display:block; margin-bottom:8px; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
input { font:inherit; padding:13px 18px; border-radius:999px; border:3px solid #cfc4f0; color:var(--ink); background:#fff; flex:1; min-width:150px; } input:focus { outline:none; border-color:var(--violet); }
.hint { font-size:.88rem; color:var(--ink2); margin-top:10px; }
.stat { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; } .stat div { background:var(--lav); border-radius:18px; padding:10px 16px; font-size:.82rem; color:var(--ink2); } .stat b { display:block; font:700 1.4rem/1 Fredoka,sans-serif; color:var(--ink); } .stat .cap { width:100%; background:none; padding:4px 0 0; font:600 .72rem/1 Fredoka,sans-serif; letter-spacing:.12em; }
ol { list-style:none; counter-reset:n; } ol li { counter-increment:n; display:flex; gap:12px; align-items:center; padding:10px 2px; border-bottom:1px solid #ece7ff; font-weight:500; }
ol li::before { content:counter(n); font:700 .95rem/30px Fredoka,sans-serif; width:30px; height:30px; border-radius:50%; background:var(--lav); color:var(--ink); text-align:center; flex:none; }
ol li:nth-child(1)::before { background:#ffd84a; } ol li:nth-child(2)::before { background:#e6e9f0; } ol li:nth-child(3)::before { background:#ffb98a; }
ol li span:last-child { margin-left:auto; font:700 1.1rem/1 Fredoka,sans-serif; color:var(--violet); }

/* footer */
footer { background:var(--ink); color:#cfc4f0; padding:70px 0 60px; text-align:center; }
footer .wm { filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.flinks { display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center; margin:26px 0 18px; } .flinks a { font:600 .98rem/1 Fredoka,sans-serif; color:#fff; padding:6px 0; border-bottom:2px solid transparent; } .flinks a:hover { border-color:var(--lime); }
.fnote { max-width:600px; margin:0 auto; font-size:.92rem; line-height:1.55; } .fnote a { color:#fff; text-decoration:underline; }
.grp { height:48px; width:auto; margin:30px auto 10px; opacity:.85; } .copy { font-size:.85rem; opacity:.7; }
@media (prefers-reduced-motion:reduce) { .fl, .down, .chest.ready, .keys i.on { animation:none !important; } .card, .pill { transition:none; } }