@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --bg1:#0b1026;
  --bg2:#1b1240;
  --bg3:#2b1b5e;
  --ink:#1e293b;
  --star:#ffffff;
  --font-head:'Baloo Bhaijaan 2',system-ui,sans-serif;
  --font-body:'Tajawal',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 85% -10%, #2c2a6e 0%, transparent 55%),
    radial-gradient(900px 600px at -10% 20%, #3b1d5e 0%, transparent 50%),
    radial-gradient(1000px 800px at 50% 115%, #122a52 0%, transparent 60%),
    linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* طبقات النجوم */
body::before, body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 25px 35px, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 200px 160px, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 210px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 250px 40px, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 170px 250px, rgba(255,255,255,.55) 50%, transparent 51%);
  background-size:300px 300px;
}
body::after{
  background-size:420px 420px;
  background-image:
    radial-gradient(1.8px 1.8px at 60px 80px, rgba(255,235,200,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 220px 30px, rgba(190,220,255,.8) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 330px 190px, rgba(255,255,255,.65) 50%, transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.35;} to{opacity:1;} }

/* توهّجات عائمة */
body::before{z-index:0;}

/* ===== الترويسة ===== */
.hero{
  position:relative;
  z-index:1;
  text-align:center;
  padding:64px 20px 30px;
  color:#fff;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  padding:7px 16px;
  border-radius:999px;
  color:#ffe9c2;
  margin-bottom:16px;
}
.badge .dot{
  width:8px;height:8px;border-radius:50%;
  background:#ffd166;
  box-shadow:0 0 12px #ffd166;
  animation:pulse 2s infinite;
}
@keyframes pulse{ 50%{opacity:.35;} }
.hero h1{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.2;
  text-shadow:0 6px 30px rgba(0,0,0,.45);
}
.hero .sub{
  max-width:640px;
  margin:14px auto 0;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.9;
}
.order{
  display:inline-block;
  margin-top:18px;
  font-size:.85rem;
  font-weight:700;
  color:#0b1026;
  background:#ffd166;
  padding:6px 16px;
  border-radius:999px;
  font-family:var(--font-head);
  box-shadow:0 4px 14px rgba(255,209,102,.35);
}

/* ===== شبكة اللاصقات ===== */
.notes{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:34px 22px;
  max-width:1180px;
  margin:26px auto 0;
  padding:20px 22px 40px;
}

/* ===== اللاصقة الواحدة ===== */
.note{
  position:relative;
  border-radius:10px;
  padding:38px 16px 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 10px 18px -8px rgba(0,0,0,.55);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
  animation:drop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes drop{
  from{opacity:0; transform:translateY(-18px) scale(.92) rotate(var(--r,0deg));}
  to{opacity:1; transform:translateY(0) scale(1) rotate(var(--r,0deg));}
}
.note:nth-child(1){--r:-1.4deg; animation-delay:.03s;}
.note:nth-child(2){--r:1.1deg;  animation-delay:.09s;}
.note:nth-child(3){--r:-.8deg;  animation-delay:.15s;}
.note:nth-child(4){--r:1.5deg;  animation-delay:.21s;}
.note:nth-child(5){--r:-1.1deg; animation-delay:.27s;}
.note:nth-child(6){--r:1.2deg;  animation-delay:.33s;}
.note:nth-child(7){--r:-.7deg;  animation-delay:.39s;}
.note:nth-child(8){--r:1.3deg;  animation-delay:.45s;}
.note:hover,
.note:focus-visible{
  transform:rotate(0deg) scale(1.045) translateY(-6px);
  z-index:5;
  box-shadow:
    0 2px 4px rgba(0,0,0,.1),
    0 24px 34px -14px rgba(0,0,0,.6);
  outline:none;
}
/* شريط اللصق العلوي */
.note::before{
  content:"";
  position:absolute;
  top:-13px;
  left:50%;
  width:86px;
  height:26px;
  transform:translateX(-50%) rotate(-2.5deg);
  background:rgba(255,255,255,.55);
  border-left:1px dashed rgba(120,120,140,.25);
  border-right:1px dashed rgba(120,120,140,.25);
  box-shadow:0 2px 5px rgba(0,0,0,.12);
  backdrop-filter:blur(2px);
}
/* ألوان اللاصقات (مثل أوراق الملاحظات) */
.note-yellow{ background:linear-gradient(180deg,#fff4bd 0%, #fde68a 100%); color:#78350f;}
.note-pink{   background:linear-gradient(180deg,#fde3ef 0%, #fbcfe8 100%); color:#831843;}
.note-mint{   background:linear-gradient(180deg,#dcfce7 0%, #bbf7d0 100%); color:#064e3b;}
.note-sky{    background:linear-gradient(180deg,#e0f4fe 0%, #bae6fd 100%); color:#0c4a6e;}
.note-lavender{background:linear-gradient(180deg,#f1e9fe 0%, #ddd6fe 100%); color:#4c1d95;}
.note-peach{  background:linear-gradient(180deg,#ffedd9 0%, #fed7aa 100%); color:#7c2d12;}
.note-mint2{  background:linear-gradient(180deg,#ccfbf5 0%, #99f6e4 100%); color:#134e4a;}
.note-rose{   background:linear-gradient(180deg,#ffe3e8 0%, #fecdd3 100%); color:#881337;}

/* اسم الكوكب */
.pname{
  font-family:var(--font-head);
  font-weight:800;
  font-size:1.45rem;
  text-align:center;
  line-height:1.15;
}
.pname span{
  display:block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.68rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:.62;
  margin-top:2px;
}

/* الكوكب المرسوم */
.planet{
  width:76px;
  height:76px;
  border-radius:50%;
  margin:14px auto 12px;
  position:relative;
  box-shadow:
    inset -10px -8px 16px rgba(0,0,0,.28),
    0 0 0 2px rgba(255,255,255,.14),
    0 6px 16px rgba(0,0,0,.35);
}
/* وجوه الكواكب */
.mercury{ background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.55) 0 8%, transparent 9%),
  radial-gradient(circle at 68% 62%, rgba(0,0,0,.18) 0 12%, transparent 13%),
  radial-gradient(circle at 45% 75%, rgba(255,255,255,.3) 0 6%, transparent 7%),
  linear-gradient(135deg,#d7d7d7 0%,#9a9a9a 55%,#6f6f6f 100%);
}
.venus{ background:
  radial-gradient(circle at 32% 35%, rgba(255,255,255,.5) 0 14%, transparent 15%),
  linear-gradient(135deg,#f4d78a 0%,#e2b45c 55%,#b98b3a 100%);
}
.earth{ background:
  radial-gradient(circle at 30% 30%, rgba(255,255,255,.85) 0 13%, transparent 14%),
  radial-gradient(circle at 62% 60%, rgba(255,255,255,.75) 0 9%, transparent 10%),
  radial-gradient(circle at 44% 82%, rgba(255,255,255,.6) 0 7%, transparent 8%),
  linear-gradient(135deg,#38bdf8 0%,#1d7ad9 45%,#16a34a 46% 58%,#155e8a 100%);
}
.mars{ background:
  radial-gradient(circle at 30% 35%, rgba(255,255,255,.4) 0 12%, transparent 13%),
  radial-gradient(circle at 66% 60%, rgba(0,0,0,.22) 0 10%, transparent 11%),
  linear-gradient(135deg,#f87171 0%,#dc4c3d 55%,#9a3412 100%);
}
.jupiter{ background:
  radial-gradient(circle at 68% 30%, #c2410c 0 9%, transparent 10%),
  repeating-linear-gradient(180deg,
    #e8cfa6 0 9px, #c98d5f 9px 13px, #f3e2c2 13px 20px, #a95f38 20px 24px,
    #e8cfa6 24px 33px, #c98d5f 33px 37px, #f6ead0 37px 46px, #b4724a 46px 50px);
  background-size:100% 100%,100% auto;
}
.saturn{ background:
  repeating-linear-gradient(180deg,
    #f0dcae 0 8px, #d9b078 8px 12px, #f7ecd0 12px 18px, #c1925c 18px 22px, #f0dcae 22px 30px);
}
/* حلقات زحل */
.saturn::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:132px; height:40px;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  border:7px solid rgba(255,231,166,.85);
  border-top-color:transparent;
  border-bottom-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
  z-index:1;
}
.saturn::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:118px; height:32px;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-left-color:transparent;
  border-right-color:transparent;
  z-index:1;
}
.uranus{ background:
  radial-gradient(circle at 32% 32%, rgba(255,255,255,.65) 0 13%, transparent 14%),
  linear-gradient(135deg,#a5e8f7 0%,#67c8e8 50%,#3f9fd0 100%);
}
.neptune{ background:
  radial-gradient(circle at 30% 32%, rgba(255,255,255,.5) 0 12%, transparent 13%),
  radial-gradient(circle at 62% 62%, rgba(160,220,255,.4) 0 10%, transparent 11%),
  linear-gradient(135deg,#4f8ff0 0%,#2b4ed0 55%,#232e9e 100%);
}
/* صفوف الحقائق */
.facts{ margin:6px 0 12px; }
.facts .row{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:3.5px 0;
  font-size:.86rem;
  line-height:1.5;
}
.facts dt{
  display:flex;
  align-items:center;
  gap:5px;
  font-weight:700;
  opacity:.82;
  white-space:nowrap;
}
.facts dt svg,.facts dt i{ width:13px; height:13px; opacity:.75; flex:none; }
.facts .row::after{
  content:"";
  flex:1;
  border-bottom:2px dotted rgba(30,41,59,.28);
  margin:0 2px;
  transform:translateY(-3px);
}
.facts dd{ font-weight:800; white-space:nowrap; }

/* معلومة سريعة */
.fun{
  display:flex;
  gap:7px;
  align-items:flex-start;
  font-size:.8rem;
  line-height:1.65;
  font-weight:500;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:8px;
  padding:8px 10px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6);
}
.fun svg,.fun i{ width:14px; height:14px; flex:none; margin-top:3px; }

/* التذييل */
.foot{
  position:relative;
  z-index:1;
  text-align:center;
  padding:16px 20px 46px;
  color:rgba(255,255,255,.65);
  font-size:.85rem;
  line-height:1.8;
}
.foot p{ max-width:640px; margin:0 auto; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

@media (max-width:640px){
  .hero{ padding-top:46px; }
  .notes{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:30px 12px; padding:12px; }
  .planet{ width:62px; height:62px; }
  .saturn::after{ width:108px; height:32px; }
  .facts{ font-size:.74rem; }
  .pname{ font-size:1.15rem; }
}