/* Spelly Help Center — shared stylesheet. Same design tokens as the app
   (app/globals.css "Roblox-inspired" set): sky world, #1F1145 ink outlines,
   Baloo 2 display / Fredoka body, candy cards with hard bevels. */
:root{
  --sky-1:#74D0FF; --sky-2:#B6E8FF; --bg:#DDF1FF; --card:#FFFFFF; --tint:#FFF9E5;
  --ink:#1F1145; --ink-soft:#4A3A7A; --muted:#7A6FA8; --outline:#1F1145;
  --grass:#3DD068; --grass-deep:#1FA547; --ocean:#2E9DFF; --ocean-deep:#1772CC;
  --grape:#8B5CF6; --berry:#FF4FA3; --tangerine:#FF8A1F;
  --r-md:18px; --r-lg:24px; --r-xl:32px;
  --font-display:'Baloo 2','Fredoka',system-ui,sans-serif;
  --font-body:'Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:linear-gradient(180deg,#CDEBFF 0%,var(--bg) 30%,#FDF7E4 100%);
  min-height:100vh; line-height:1.5;
}
a{color:var(--ocean-deep)}
.wrap{max-width:860px; margin:0 auto; padding:0 18px 64px}

/* header */
.hc-head{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand .s{
  width:40px; height:40px; display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:22px; color:#fff; border:3px solid var(--outline); border-radius:12px;
  background:linear-gradient(135deg,#FF4FA3,#8B5CF6 45%,#2E9DFF); box-shadow:0 3px 0 var(--outline);
}
.brand b{font-family:var(--font-display); font-size:22px}
.hc-head a.back{font-weight:700; text-decoration:none; color:var(--ink-soft); font-size:14px}

/* type */
.kick{font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--berry)}
h1{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.4vw,44px); line-height:1.12; margin:8px 0 10px}
h2{font-family:var(--font-display); font-weight:800; font-size:24px; margin:34px 0 10px}
.sub{color:var(--ink-soft); font-size:17px; margin:0 0 8px}
.meta{color:var(--muted); font-weight:600; font-size:14px; margin:2px 0 22px}

/* cards */
.card{
  background:var(--card); border:3px solid var(--outline); border-radius:var(--r-lg);
  box-shadow:0 6px 0 var(--outline); padding:20px 22px; margin:14px 0;
}
a.card{display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--ink);
  transition:transform .08s}
a.card:hover{transform:translateY(-2px)}
a.card:active{transform:translateY(3px); box-shadow:0 2px 0 var(--outline)}
.card .ic{flex:none; width:52px; height:52px; display:grid; place-items:center; font-size:26px;
  border:3px solid var(--outline); border-radius:16px; box-shadow:0 3px 0 var(--outline); background:var(--tint)}
.card h3{font-family:var(--font-display); font-weight:800; font-size:19px; margin:0 0 2px}
.card p{margin:0; color:var(--ink-soft); font-size:15px}
.badge{flex:none; font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; background:var(--berry); border:2px solid var(--outline);
  border-radius:999px; padding:5px 10px; box-shadow:0 2px 0 var(--outline)}

/* numbered steps */
.step{display:flex; gap:14px; align-items:flex-start}
.step .n{flex:none; width:44px; height:44px; display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:20px; color:#fff; border:3px solid var(--outline); border-radius:14px;
  box-shadow:0 3px 0 var(--outline)}
.step h3{font-family:var(--font-display); font-weight:800; font-size:19px; margin:2px 0 6px}
.step p{margin:0 0 6px; color:var(--ink-soft)}
.step .ui-name{background:var(--tint); border:2px solid var(--outline); border-radius:999px;
  padding:1px 10px; font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap}

/* video frame */
.video{position:relative; aspect-ratio:16/9; border:3px solid var(--outline); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 6px 0 var(--outline); background:#000; margin:20px 0 6px}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* callout + faq */
.callout{background:var(--tint); border:3px solid var(--outline); border-radius:var(--r-md);
  box-shadow:0 4px 0 var(--outline); padding:14px 18px; font-weight:600; margin:18px 0}
.faq details{border:3px solid var(--outline); border-radius:var(--r-md); background:var(--card);
  box-shadow:0 4px 0 var(--outline); margin:10px 0; padding:0 16px}
.faq summary{cursor:pointer; font-family:var(--font-display); font-weight:800; font-size:16px; padding:13px 0; list-style:none}
.faq summary::before{content:"▸ "; color:var(--grape)}
.faq details[open] summary::before{content:"▾ "}
.faq details p{margin:0 0 14px; color:var(--ink-soft)}

/* buttons */
.btn{display:inline-block; font-family:var(--font-display); font-weight:800; font-size:17px; text-align:center;
  text-decoration:none; color:#fff; padding:14px 26px; border:3px solid var(--outline); border-radius:16px;
  transition:transform .08s}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--outline)!important}
.btn.grass{background:var(--grass); box-shadow:0 5px 0 var(--grass-deep),0 8px 0 var(--outline)}
.btn.ghost{background:var(--card); color:var(--ink); box-shadow:0 5px 0 var(--outline)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 8px}

/* footer */
.hc-foot{border-top:2px solid rgba(31,17,69,.12); margin-top:48px; padding:18px 0; display:flex;
  gap:8px; flex-wrap:wrap; color:var(--muted); font-size:14px; font-weight:600}
.hc-foot a{color:var(--ink-soft); text-decoration:none}