/* نجوم الشهر — the wall (/stars/) and the class stage (also used by /lessons/stars/). */
:root {
  --night:#120e36; --indigo:#292164; --violet:#4b3fa6; --lav:#e2def4; --cream:#f6f5fc; --ink:#1b1650; --body:#45416b; --muted:#6d698e;
  --mint:#00f3b9; --mint-ink:#06342a; --pink:#f15bb5; --blue:#06befe; --gold:#ffc83d; --coral:#ff8a5c;
  --title:Cairo, Tahoma, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--cream); color:var(--body); font:500 17px/1.7 Tajawal, Tahoma, sans-serif; overflow-x:hidden; }
body.sk-locked { overflow:hidden; }
img { max-width:100%; }
button { font:inherit; color:inherit; cursor:pointer; }
h1, h2, h3 { font-family:var(--title); margin:0; line-height:1.25; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* ---------- hero: the shared sky ---------- */
.sk-hero { position:relative; overflow:hidden; color:#fff; padding-bottom:84px;
  background:radial-gradient(120% 90% at 50% 0, #3a2f94 0, var(--indigo) 42%, var(--night) 100%); }
.sk-sky { position:absolute; inset:0; width:100%; height:100%; }
.sk-top { position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:16px 20px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sk-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font:800 18px var(--title); }
.sk-logo img { width:40px; height:40px; border-radius:12px; background:#fff; padding:3px; }
.sk-toplink { color:#fff; text-decoration:none; font:700 15px var(--title); padding:8px 16px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; background:rgba(255,255,255,.12); }
.sk-toplink:hover { background:rgba(255,255,255,.22); }
.sk-hero-in { position:relative; z-index:1; max-width:1160px; margin:0 auto; padding:18px 20px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,600px) minmax(0,1fr); gap:12px; align-items:end; }
.sk-hero-text { text-align:center; }
.sk-hero-kid { width:100%; max-width:290px; height:auto; justify-self:center; filter:drop-shadow(0 18px 26px rgba(0,0,0,.35)); animation:sk-bob 3.4s ease-in-out infinite; }
.sk-hero-boy { animation-delay:-1.7s; }
.sk-month { display:inline-block; margin:0 0 10px; padding:3px 18px; border-radius:999px; background:var(--gold); color:var(--ink); font:800 15px/1.9 var(--title); min-width:130px; }
.sk-hero h1 { font-size:clamp(46px, 8.4vw, 84px); font-weight:900; letter-spacing:0; text-shadow:0 6px 0 rgba(0,0,0,.22); }
.sk-lede { margin:10px auto 18px; max-width:520px; font-size:clamp(17px, 2.2vw, 19px); color:#ece9ff; }
.sk-meter { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:12px 16px 8px; max-width:470px; margin:0 auto; backdrop-filter:blur(4px); }
.sk-meter-row { display:flex; justify-content:space-between; gap:12px; font:800 15px var(--title); }
.sk-meter-row b { color:var(--gold); font-weight:900; font-size:19px; }
.sk-bar { height:14px; margin:6px 0 4px; border-radius:99px; background:rgba(0,0,0,.28); overflow:hidden; }
.sk-bar i { display:block; height:100%; width:0; min-width:14px; border-radius:99px; background:linear-gradient(90deg, var(--mint), var(--gold)); transition:width .4s cubic-bezier(.3,1.4,.5,1); }
.sk-meter-note { margin:0; font-size:14px; color:#d9d5f6; }
.sk-wave { position:absolute; inset:auto 0 -3px; width:100%; height:64px; display:block; z-index:1; }
.sk-wave path { fill:var(--cream); }

/* ---------- wall ---------- */
.sk-main { max-width:1160px; margin:0 auto; padding:10px 16px 40px; }
.sk-months { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 22px; }
.sk-months[hidden] { display:none; }
.sk-months button { border:0; min-height:44px; padding:4px 18px; border-radius:999px; background:#fff; color:var(--indigo); font:800 15px var(--title); box-shadow:0 2px 0 var(--lav); }
.sk-months button[aria-pressed="true"] { background:var(--indigo); color:#fff; }
.sk-wall { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:26px 22px; }
.sk-wait { grid-column:1/-1; text-align:center; padding:50px 0; color:var(--muted); }
.sk-card { --c:var(--mint); position:relative; border-radius:28px; background:#fff; box-shadow:0 7px 0 color-mix(in srgb, var(--c) 42%, #d9d5f0), 0 20px 40px rgba(41,33,100,.1); min-width:0; animation:sk-in .5s cubic-bezier(.2,1.3,.4,1) both; }
.sk-class { display:inline-flex; flex-wrap:wrap; justify-content:center; gap:0 8px; font:800 15px/1.7 var(--title); color:var(--ink); }
.sk-class span { font-weight:700; opacity:.72; }

/* wrapped gift: tap to open */
.sk-gift { display:flex; flex-direction:column; align-items:center; width:100%; height:100%; min-height:430px; border:0; padding:24px 18px 22px; border-radius:28px; text-align:center; color:var(--ink);
  background:radial-gradient(90% 70% at 50% 42%, #fff 0, color-mix(in srgb, var(--c) 40%, #fff) 100%); }
.sk-gift img { width:min(250px, 72%); height:auto; margin:auto; filter:drop-shadow(0 16px 18px rgba(41,33,100,.22)); animation:sk-wiggle 2.6s ease-in-out infinite; }
.sk-gift:hover img { animation-duration:.7s; }
.sk-gift.opening img { animation:sk-shake .46s linear both; }
.sk-gift b { font:900 22px var(--title); margin-top:8px; }
.sk-pill { display:inline-block; margin-top:10px; padding:6px 22px; border-radius:999px; background:var(--indigo); color:#fff; font:800 16px var(--title); }
.sk-sealed { background:radial-gradient(90% 70% at 50% 42%, #fff 0, var(--lav) 100%); cursor:default; }
.sk-sealed img { filter:saturate(.75) drop-shadow(0 12px 14px rgba(41,33,100,.16)); animation:none; opacity:.92; }
.sk-sealed .sk-pill { background:#fff; color:var(--indigo); box-shadow:inset 0 0 0 2px var(--lav); }
.sk-sealed small { display:block; margin-top:8px; font-size:15px; color:var(--muted); max-width:250px; }

/* opened star */
.sk-star { overflow:visible; }
.sk-face { position:relative; height:230px; border-radius:28px 28px 0 0; overflow:hidden; background:radial-gradient(80% 90% at 50% 100%, #fff 0, color-mix(in srgb, var(--c) 45%, #fff) 72%); }
.sk-face::before { content:""; position:absolute; inset:-60%; background:repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,255,255,.55) 0 12deg, transparent 12deg 30deg); animation:sk-spin 26s linear infinite; }
.sk-badge { position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-44%); opacity:.95; }
.sk-buddy { position:absolute; left:50%; bottom:-8px; height:232px; width:auto; max-width:none; transform:translateX(-50%); filter:drop-shadow(0 8px 10px rgba(41,33,100,.25)); }
.sk-photo { position:absolute; left:50%; top:50%; width:164px; height:164px; object-fit:cover; border-radius:50%; border:7px solid var(--gold); transform:translate(-50%,-50%); box-shadow:0 8px 20px rgba(41,33,100,.25); }
.sk-body { padding:14px 18px 18px; text-align:center; }
.sk-title { display:inline-block; margin-top:-30px; position:relative; padding:2px 18px; border-radius:999px; background:var(--gold); color:var(--ink); font:900 15px/1.8 var(--title); box-shadow:0 3px 0 rgba(41,33,100,.16); }
.sk-name { font:900 clamp(34px, 5vw, 42px)/1.3 var(--title); color:var(--indigo); margin:6px 0 0; overflow-wrap:anywhere; }
.sk-why { margin:8px 0 2px; color:var(--ink); font-size:17.5px; line-height:1.65; }
.sk-by { margin:0 0 12px; font-size:15px; color:var(--muted); }
.sk-react { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.sk-r { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:66px; padding:6px 4px; border:0; border-radius:18px; background:var(--cream); color:var(--ink); font:900 16px/1.2 var(--title); touch-action:manipulation; transition:transform .12s; user-select:none; -webkit-user-select:none; }
.sk-r svg { width:30px; height:30px; display:block; }
.sk-r:hover { background:color-mix(in srgb, var(--c) 22%, #fff); }
.sk-r:active { transform:scale(.9); }
.sk-r.pop svg { animation:sk-pop .28s ease-out; }
.sk-r-m { grid-column:1/-1; flex-direction:row; gap:10px; min-height:52px; background:color-mix(in srgb, var(--c) 28%, #fff); font-size:18px; }
.sk-acts { display:flex; gap:8px; margin-top:10px; }
.sk-act { flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:4px 10px; border:0; border-radius:14px; background:none; color:var(--indigo); font:800 15px var(--title); text-decoration:none; box-shadow:inset 0 0 0 2px var(--lav); }
.sk-act:hover { background:var(--cream); }
.sk-star.glow { animation:sk-glow 1.5s ease-out 2; }

/* ---------- how it works ---------- */
.sk-how { margin-top:52px; text-align:center; }
.sk-how h2 { color:var(--indigo); font-weight:900; font-size:28px; }
.sk-how ol { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:16px; }
.sk-how li { background:#fff; border-radius:22px; padding:16px; box-shadow:0 8px 24px rgba(41,33,100,.06); }
.sk-how img { display:block; width:84px; height:84px; object-fit:contain; margin:0 auto 6px; }
.sk-how b { display:block; font:900 19px var(--title); color:var(--indigo); }
.sk-how span { display:block; font-size:16px; line-height:1.6; }
.sk-foot { display:flex; justify-content:center; gap:10px; padding:20px 16px 34px; font-size:15px; color:var(--muted); }
.sk-foot a { color:var(--indigo); }

/* ---------- things that fly ---------- */
.sk-fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:90; }
.sk-float { position:fixed; z-index:95; pointer-events:none; width:34px; height:34px; animation:sk-float 1.25s ease-out forwards; }
.sk-float svg { width:100%; height:100%; display:block; }
.sk-float.word { width:auto; height:auto; font:900 19px var(--title); color:var(--indigo); background:#fff; padding:0 12px; border-radius:99px; box-shadow:0 4px 12px rgba(41,33,100,.2); white-space:nowrap; }
.sk-combo { position:fixed; z-index:96; pointer-events:none; font:900 26px var(--title); color:var(--pink); text-shadow:0 2px 0 #fff, 0 0 8px #fff; animation:sk-combo .7s ease-out forwards; white-space:nowrap; }
.sk-toast { position:fixed; z-index:120; left:50%; bottom:22px; transform:translate(-50%, 20px); opacity:0; max-width:calc(100vw - 32px); width:max-content; padding:10px 22px; border-radius:18px; background:var(--indigo); color:#fff; font:800 16px/1.6 var(--title); text-align:center; box-shadow:0 12px 30px rgba(18,14,54,.4); transition:.28s; pointer-events:none; }
.sk-toast.on { opacity:1; transform:translate(-50%, 0); }
.sk-comet { position:fixed; z-index:110; top:0; left:0; width:64px; height:64px; padding:0; border:0; background:none; animation:sk-comet var(--t, 4.2s) linear forwards; }
.sk-comet svg { width:100%; height:100%; filter:drop-shadow(0 0 10px var(--gold)); animation:sk-spin 2s linear infinite; }
.sk-comet::after { content:""; position:absolute; top:50%; left:60%; width:120px; height:7px; border-radius:9px; transform:translateY(-50%); background:linear-gradient(90deg, rgba(255,200,61,.85), transparent); }

.sk-comet.flip::after { left:auto; right:60%; background:linear-gradient(270deg, rgba(255,200,61,.85), transparent); }

/* ---------- the class stage: gift reveal + spotlight ---------- */
.sk-stage { position:fixed; inset:0; z-index:80; overflow:auto; color:#fff; background:radial-gradient(90% 90% at 50% 40%, #40349f 0, var(--indigo) 45%, var(--night) 100%); animation:sk-fade .25s both; }
.sk-stage .sk-sky { position:fixed; }
.sk-x { position:fixed; z-index:3; top:14px; inset-inline-start:14px; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font:900 20px var(--title); }
.sk-x:hover { background:rgba(255,255,255,.26); }
.sk-stage-in { position:relative; z-index:2; min-height:100%; max-width:1180px; margin:0 auto; padding:clamp(16px, 3vh, 34px) 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.sk-ask { font:900 clamp(34px, 7vh, 66px)/1.3 var(--title); text-shadow:0 5px 0 rgba(0,0,0,.25); margin:0; }
.sk-ask-sub { margin:4px 0 0; font-size:clamp(17px, 2.8vh, 24px); color:#ece9ff; }
.sk-bigbox { border:0; background:none; padding:0; margin:clamp(8px, 2vh, 20px) 0; width:min(46vh, 80vw); touch-action:manipulation; }
.sk-bigbox img { width:100%; height:auto; display:block; filter:drop-shadow(0 26px 30px rgba(0,0,0,.45)); animation:sk-wiggle 2.2s ease-in-out infinite; }
.sk-bigbox.t1 img { animation:sk-shake .5s linear both; }
.sk-bigbox.t2 img { animation:sk-shake .34s linear 2 both; filter:drop-shadow(0 0 40px var(--gold)); }
.sk-dots { display:flex; gap:12px; justify-content:center; }
.sk-dots i { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.22); transition:.2s; }
.sk-dots i.on { background:var(--gold); box-shadow:0 0 14px var(--gold); transform:scale(1.2); }
.sk-flash { position:fixed; inset:0; z-index:85; background:#fff; pointer-events:none; animation:sk-flash .7s ease-out forwards; }
.sk-show { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(14px, 3vw, 44px); align-items:center; width:100%; animation:sk-in .6s cubic-bezier(.2,1.4,.4,1) both; }
.sk-hero-face { position:relative; display:flex; align-items:center; justify-content:center; height:min(70vh, 560px); }
.sk-hero-face::before { content:""; position:absolute; inset:-14% -8%; background:repeating-conic-gradient(from 0deg, rgba(255,200,61,.17) 0 13deg, transparent 13deg 30deg); border-radius:50%; animation:sk-spin 22s linear infinite; -webkit-mask:radial-gradient(closest-side, #000 40%, transparent); mask:radial-gradient(closest-side, #000 40%, transparent); }
.sk-hero-face .sk-b { position:absolute; width:min(62vh, 84%); opacity:.92; }
.sk-hero-face .sk-a { position:relative; height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); animation:sk-bob 3s ease-in-out infinite; }
.sk-hero-face .sk-a.is-photo { height:min(48vh, 380px); width:min(48vh, 380px); object-fit:cover; border-radius:50%; border:10px solid var(--gold); }
.sk-copy { min-width:0; }
.sk-copy .sk-class { color:#fff; font-size:clamp(16px, 2.6vh, 21px); }
.sk-copy .sk-class { display:flex; }
.sk-copy .sk-title { display:table; margin:8px auto 0; font-size:clamp(16px, 2.8vh, 22px); }
.sk-copy .sk-name { color:#fff; font-size:clamp(52px, 13vh, 112px); line-height:1.25; margin:2px 0 0; text-shadow:0 6px 0 rgba(0,0,0,.28); }
.sk-copy .sk-why { color:#fff; font-size:clamp(19px, 3.4vh, 29px); margin:6px auto 2px; max-width:620px; }
.sk-copy .sk-by { color:#d9d5f6; font-size:clamp(15px, 2.4vh, 19px); }
.sk-copy .sk-react { max-width:520px; margin:0 auto; }
.sk-copy .sk-r { background:rgba(255,255,255,.14); color:#fff; }
.sk-copy .sk-r:hover { background:rgba(255,255,255,.24); }
.sk-copy .sk-r-m { background:var(--gold); color:var(--ink); }
.sk-copy .sk-r-m:hover { background:#ffd76f; }
.sk-qr { display:flex; align-items:center; justify-content:center; gap:12px; margin:12px auto 0; padding:8px 12px; max-width:440px; background:rgba(255,255,255,.1); border-radius:16px; text-align:start; font-size:15px; line-height:1.5; }
.sk-qr img { width:78px; height:78px; border-radius:8px; }
.sk-qr b { display:block; font:800 16px var(--title); }
.sk-next { margin-top:12px; min-height:48px; padding:6px 26px; border:0; border-radius:999px; background:var(--mint); color:var(--mint-ink); font:900 18px var(--title); }
.sk-gold { background:var(--gold); color:var(--ink); }
a.sk-next { display:inline-flex; align-items:center; text-decoration:none; }
.sk-act-cert { width:100%; margin-top:8px; background:var(--gold); color:var(--ink); box-shadow:none; }
.sk-act-cert:hover { background:#ffd76f; }
.sk-cert-title { font:900 clamp(24px, 5vh, 42px)/1.3 var(--title); text-shadow:0 4px 0 rgba(0,0,0,.25); }
.sk-cert { display:block; max-width:100%; max-height:calc(100vh - 190px); width:auto; height:auto; margin:10px auto 2px; border-radius:12px; box-shadow:0 0 0 4px var(--gold), 0 24px 60px rgba(0,0,0,.5); animation:sk-certin .8s cubic-bezier(.2,1.3,.4,1) both; }
.sk-cert-acts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.sk-balloon { position:fixed; z-index:84; bottom:-340px; width:clamp(140px, 22vh, 230px); pointer-events:none; animation:sk-rise 7s ease-in forwards; }

/* ---------- motion ---------- */
@keyframes sk-bob { 50% { transform:translateY(-10px); } }
@keyframes sk-spin { to { transform:rotate(360deg); } }
@keyframes sk-in { from { opacity:0; transform:translateY(16px) scale(.96); } }
@keyframes sk-fade { from { opacity:0; } }
@keyframes sk-wiggle { 0%, 72%, 100% { transform:rotate(0); } 78% { transform:rotate(-4deg); } 84% { transform:rotate(4deg); } 90% { transform:rotate(-2deg); } 96% { transform:rotate(2deg); } }
@keyframes sk-shake { 0%, 100% { transform:rotate(0) scale(1); } 20% { transform:rotate(-9deg) scale(1.06); } 40% { transform:rotate(9deg) scale(1.1); } 60% { transform:rotate(-7deg) scale(1.1); } 80% { transform:rotate(7deg) scale(1.06); } }
@keyframes sk-pop { 50% { transform:scale(1.5) rotate(-8deg); } }
@keyframes sk-float { from { transform:translate(0, 0) scale(.6); opacity:1; } 25% { transform:translate(calc(var(--dx) * .3), -60px) scale(1.15); } to { transform:translate(var(--dx), var(--dy, -220px)) scale(.9) rotate(var(--r, 12deg)); opacity:0; } }
@keyframes sk-combo { from { transform:translateY(0) scale(.6); opacity:0; } 30% { transform:translateY(-16px) scale(1.25); opacity:1; } to { transform:translateY(-52px) scale(1); opacity:0; } }
@keyframes sk-comet { from { transform:translate(var(--x0), var(--y0)); } to { transform:translate(var(--x1), var(--y1)); } }
@keyframes sk-glow { 40% { box-shadow:0 0 0 8px var(--gold), 0 20px 40px rgba(41,33,100,.2); } }
@keyframes sk-certin { from { opacity:0; transform:scale(.3) rotate(-6deg); } }
@keyframes sk-flash { from { opacity:1; } to { opacity:0; } }
@keyframes sk-rise { to { transform:translateY(calc(-100vh - 420px)) rotate(var(--r, 6deg)); } }

/* ---------- phones ---------- */
@media (max-width:860px) {
  .sk-hero-in { grid-template-columns:1fr 1fr; }
  .sk-hero-text { grid-column:1/-1; grid-row:1; }
  .sk-hero-kid { display:none; }
  .sk-hero { padding-bottom:72px; }
  .sk-show { grid-template-columns:1fr; }
  .sk-hero-face { height:min(36vh, 300px); }
  .sk-hero-face .sk-a.is-photo { height:min(30vh, 240px); width:min(30vh, 240px); }
  .sk-copy .sk-name { font-size:clamp(44px, 14vw, 72px); }
  .sk-qr { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
  .sk-comet { display:none; }
}