/* space «مهمة عيد الميلاد» — rendered 3D art layers (art/*.webp) + spaceship control-screen details */
:root {
  --bg: #070b1f; --bg-2: #101a44; --surface: #0e1736; --surface-2: #121f47;
  --text: #e9f0ff; --muted: #9fb0d6;
  --accent: #3ee6d4; --accent-2: #ffcf5a; --accent-ink: #04201d;
  --line: rgba(62, 230, 212, .34); --line-soft: rgba(62, 230, 212, .14);
  --danger: #ff7a8a; --ok: #6ef0a0;
  --stagew: min(100vw, 460px);
}
body.space { background: radial-gradient(120% 60% at 50% -10%, #1a2766 0%, var(--bg) 60%) no-repeat, var(--bg); }

/* ---------- intro ---------- */
.s-intro { background: #070b1f; color: var(--text); overflow: hidden; }
.s-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.s-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-stars circle { fill: #fff; }
.s-stars .tw { animation: tw 3s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .2; } }
.s-streaks { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.s-streaks i { position: absolute; top: -20%; width: 2px; height: 70px; border-radius: 2px; background: linear-gradient(transparent, #cfe6ff); }
.s-intro.is-warp .s-streaks { opacity: .9; }
.s-intro.is-warp .s-streaks i { animation: streak .5s linear infinite; }
@keyframes streak { to { transform: translateY(130dvh); } }

/* everything interactive lives in a centred column so wide screens never stretch the layout */
.s-stage { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--stagew); margin-left: calc(var(--stagew) / -2); --rw: clamp(78px, 24vw, 104px); --aw: clamp(92px, 27vw, 124px); }

/* message */
.s-msg { position: relative; z-index: 3; margin: 3dvh 12px 0; transition: opacity .5s ease, transform .6s var(--ease); }
.s-incoming { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font: 600 14px/1.4 var(--f-ui); color: var(--accent); letter-spacing: .02em; }
.s-incoming i { width: 9px; height: 9px; border-radius: 50%; background: #ff5d7a; box-shadow: 0 0 10px #ff5d7a; animation: blink2 1s steps(2, jump-none) infinite; }
@keyframes blink2 { 50% { opacity: .2; } }
.s-screen {
  position: relative; display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  border-radius: 22px; border: 1.5px solid var(--line); background: linear-gradient(180deg, rgba(20,34,84,.9), rgba(9,16,44,.92));
  box-shadow: 0 0 0 4px rgba(62,230,212,.06), 0 20px 40px rgba(0,0,0,.45), inset 0 0 30px rgba(62,230,212,.08);
  overflow: hidden;
}
.s-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); }
.s-avatar { display: block; width: 78px; height: 78px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(62,230,212,.35), rgba(20,34,84,.9) 75%); box-shadow: 0 0 16px rgba(62,230,212,.35); }
.s-avatar img { display: block; width: 100%; height: auto; transform: scale(1.55) translate(-4%, 8%); transform-origin: 50% 0; }
.s-name { margin: 0; font: 800 17px/1.4 var(--f-display); color: var(--accent-2); }
.s-text { margin: 4px 0 0; min-height: 6.8em; font: 500 15.5px/1.7 var(--f-ui); color: var(--text); }
.s-text .caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: -2px; background: var(--accent); animation: blink2 .8s steps(2, jump-none) infinite; }

/* launch button */
.s-launch-wrap { position: absolute; z-index: 4; right: 4%; bottom: calc(96px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; transition: opacity .4s, transform .5s var(--ease); }
.s-launch {
  --d: clamp(92px, 27vw, 118px);
  position: relative; width: var(--d); height: var(--d); border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: repeating-conic-gradient(#ffcf5a 0 12deg, #1d2547 12deg 24deg); box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 4px #2b3768;
  -webkit-tap-highlight-color: transparent;
}
.s-launch span {
  position: absolute; inset: 12px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff9aa8, #ff3d5f 55%, #b3123a); color: #fff;
  font: 900 22px/1 var(--f-display); text-shadow: 0 2px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.35), 0 0 22px rgba(255,61,95,.55);
  animation: glow 1.6s ease-in-out infinite; transition: transform .12s;
}
.s-launch:active span { transform: translateY(3px) scale(.97); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22); }
@keyframes glow { 50% { box-shadow: inset 0 -6px 0 rgba(0,0,0,.22), inset 0 4px 8px rgba(255,255,255,.35), 0 0 36px rgba(255,61,95,.9); } }
.s-cap { margin: 0; font: 600 13.5px/1.3 var(--f-ui); color: #c9d6f5; text-shadow: 0 1px 6px #000; }

/* launch pad, astronaut, rocket */
.s-pad { position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -60px; height: 170px; border-radius: 50% 50% 0 0; background: radial-gradient(120% 100% at 50% 0%, #4a5590, #1b2246 70%); box-shadow: 0 -4px 30px rgba(120,150,255,.25); transition: transform .9s var(--ease); }
.s-astro { position: absolute; z-index: 3; left: calc(50% - var(--aw) / 2 + 8px); bottom: calc(76px + env(safe-area-inset-bottom)); width: var(--aw); height: auto; transform-origin: 50% 100%; animation: wave 2.6s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); transition: opacity .3s, transform .4s var(--ease); }
@keyframes wave { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-5px); } }
.s-rocket {
  position: absolute; z-index: 3; left: 24%; bottom: calc(80px + env(safe-area-inset-bottom)); width: var(--rw); margin-left: calc(var(--rw) / -2);
  transform: none; transform-origin: 50% 50%; animation: idle 3.2s ease-in-out infinite;
}
@keyframes idle { 50% { translate: 0 -4px; } }
.s-rimg { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.s-flame { position: absolute; z-index: 0; left: 24%; width: 52%; top: 92%; height: auto; opacity: 0; transform-origin: 50% 0; mix-blend-mode: screen; transition: opacity .2s; }

.s-count { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; pointer-events: none; font: 900 120px/1 var(--f-display); color: var(--accent-2); text-shadow: 0 0 30px rgba(255,207,90,.6), 0 4px 0 rgba(0,0,0,.3); }
.s-count:empty { display: none; }
.s-count b { animation: pop .45s var(--ease) both; font-weight: 900; }
@keyframes pop { from { transform: scale(1.8); opacity: 0; } }

/* choose */
.s-choose { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.s-ask { position: absolute; top: max(14px, 2.4dvh); left: 52px; right: 52px; margin: 0; text-align: center; font: 800 21px/1.5 var(--f-display); color: var(--text); text-wrap: balance; text-shadow: 0 2px 10px #000; }
.s-planet { position: absolute; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .3s var(--spring), opacity .4s; }
.s-pimg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.s-planet:focus-visible { outline-offset: 2px; border-radius: 24px; }
.s-label { margin-inline: -34px; font: 700 14px/1.3 var(--f-ui); padding: 3px 12px; border-radius: 999px; background: rgba(9,16,44,.82); border: 1px solid rgba(255,255,255,.2); white-space: nowrap; }
.s-p-party { width: min(54%, 224px, 31dvh); left: 34%; top: 15%; animation: float 4s ease-in-out infinite; }
.s-p-party .s-label { background: var(--accent-2); color: #3a2a00; border-color: transparent; font-weight: 800; font-size: 15px; margin-top: -6px; }
.s-p-home { width: min(25%, 100px, 15dvh); left: 7%; top: 38%; animation: float 5s ease-in-out infinite .8s; }
.s-p-sleep { width: min(29%, 118px, 16dvh); right: 5%; top: 54%; animation: float 4.6s ease-in-out infinite .3s; }
.s-z { position: absolute; top: 4%; right: 4%; font: 900 22px/1 var(--f-display); color: #cfeaff; text-shadow: 0 0 8px #6fb6ff; animation: zz 2.4s ease-in-out infinite; pointer-events: none; }
.s-z2 { top: -6%; right: -4%; font-size: 15px; animation-delay: .7s; }
@keyframes zz { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
.s-planet.is-wrong { animation: wobble .5s ease; }
@keyframes wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.s-toast { position: absolute; left: 16px; right: 16px; top: max(14px, 2.5dvh); margin: 0; padding: 10px 14px; border-radius: 16px; text-align: center; font: 700 16px/1.6 var(--f-ui); color: #3a2a00; background: var(--accent-2); box-shadow: 0 10px 24px rgba(0,0,0,.35); text-wrap: balance; animation: pop .35s var(--ease) both; }
.s-toast:empty { display: none; }
.s-intro.has-toast .s-ask { opacity: 0; }

/* arrival: the excited astronaut pops up at the party planet */
.s-cheer { position: absolute; z-index: 7; left: var(--cx, 50%); top: var(--cy, 40%); width: clamp(84px, 24vw, 112px); height: auto; margin-left: calc(clamp(84px, 24vw, 112px) / -2); opacity: 0; transform: translateY(20px) scale(.3); pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.s-intro.is-arrived .s-cheer { animation: cheerIn .7s var(--spring) forwards; }
@keyframes cheerIn { to { opacity: 1; transform: translateY(-30px) scale(1); } }
.s-flash { position: absolute; inset: 0; z-index: 8; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 30%), #fff 0%, #ffd1f4 30%, transparent 70%); opacity: 0; pointer-events: none; }

/* phases */
.s-intro[data-phase="launch"] .s-msg, .s-intro[data-phase="launch"] .s-launch-wrap { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.s-intro[data-phase="launch"] .s-astro { animation: none; opacity: 0; transform: scale(.5) translate(-30%, -20%); }
.s-intro[data-phase="launch"] .s-flame, .s-intro[data-phase="choose"] .s-flame, .s-intro[data-phase="travel"] .s-flame { opacity: 1; animation: flick .16s ease-in-out infinite alternate; }
@keyframes flick { from { transform: scaleY(1); } to { transform: scaleY(.8) scaleX(.94); } }
.s-intro[data-phase="launch"] .s-rocket { animation: shake .09s linear infinite; }
.s-intro[data-phase="launch"].is-liftoff .s-rocket { animation: none; transform: translateY(-130dvh); transition: transform 1.3s cubic-bezier(.55, 0, .8, .4); }
.s-intro[data-phase="launch"].is-liftoff .s-pad { transform: translateY(200px); }
@keyframes shake { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(0, 0); } }
.s-intro[data-phase="enter"] .s-msg, .s-intro[data-phase="choose"] .s-msg, .s-intro[data-phase="travel"] .s-msg,
.s-intro[data-phase="enter"] .s-launch-wrap, .s-intro[data-phase="choose"] .s-launch-wrap, .s-intro[data-phase="travel"] .s-launch-wrap,
.s-intro[data-phase="enter"] .s-astro, .s-intro[data-phase="choose"] .s-astro, .s-intro[data-phase="travel"] .s-astro { display: none; }
.s-intro[data-phase="enter"] .s-pad, .s-intro[data-phase="choose"] .s-pad, .s-intro[data-phase="travel"] .s-pad { transform: translateY(200px); }
.s-intro[data-phase="enter"] .s-rocket { animation: none; transform: translate(calc(var(--stagew) * .26), 40dvh) scale(.8); transition: none; }
.s-intro[data-phase="choose"] .s-rocket { animation: none; transform: translate(calc(var(--stagew) * .26), 0) scale(.8); transition: transform 1s var(--ease); }
.s-intro[data-phase="choose"] .s-choose, .s-intro[data-phase="travel"] .s-choose { opacity: 1; pointer-events: auto; }
.s-intro[data-phase="travel"] .s-rocket { animation: none; transition: transform 1.5s cubic-bezier(.45, .05, .3, 1); }
.s-intro[data-phase="travel"] .s-p-home, .s-intro[data-phase="travel"] .s-p-sleep, .s-intro[data-phase="travel"] .s-ask, .s-intro[data-phase="travel"] .s-toast { opacity: 0; }
.s-intro[data-phase="travel"] .s-p-party { animation: none; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.s-intro.is-arrived .s-flash { animation: flash 1s ease forwards; }
@keyframes flash { 40% { opacity: 1; } 100% { opacity: .0; } }

@media (max-width: 359px) { .s-ask { font-size: 18px; } .s-label { font-size: 12.5px; } }
@media (min-width: 700px) { :root { --stagew: min(100vw, 560px); } .s-ask { font-size: 24px; } .s-stage { --rw: 112px; --aw: 134px; } .s-p-party { width: min(54%, 300px, 36dvh); } .s-p-home { width: min(25%, 150px, 20dvh); } .s-p-sleep { width: min(29%, 160px, 22dvh); } }
@media (prefers-reduced-motion: reduce) {
  .s-astro, .s-rocket, .s-planet, .s-z, .s-stars .tw, .s-flame, .s-launch span, .s-incoming i { animation: none !important; }
  .s-intro.is-arrived .s-cheer { animation-duration: .01s !important; }
}

/* ---------- details: spaceship control screen ---------- */
.space .card-frame {
  text-align: center; border-radius: 26px; border: 1.5px solid var(--line);
  background: linear-gradient(180deg, rgba(20,34,84,.95), rgba(8,14,40,.95));
  box-shadow: 0 0 0 5px rgba(62,230,212,.06), 0 24px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(62,230,212,.07);
  overflow: hidden;
}
.space .card-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px); }
.space .card-hero { display: block; margin: -6px -6px 12px; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(62,230,212,.08); border: 1px solid var(--line-soft); font: 600 12.5px/1.3 var(--f-ui); color: var(--accent); }
.hud i { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.hud-art { display: grid; grid-template-columns: 96px 1fr 104px; gap: 6px; align-items: center; margin-top: 10px; }
.hud-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.hud-art .hud-astro { animation: hop 2.2s ease-in-out infinite; }
@keyframes hop { 50% { transform: translateY(-6px); } }
.hud-radar { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; position: relative; }
.hud-radar::after { content: ''; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: dot 2.4s ease-in-out infinite alternate; }
@keyframes dot { from { left: 0; } to { left: calc(100% - 10px); } }
.space .card-kicker { color: var(--accent-2); }
.space .kid { background: linear-gradient(180deg, #ffffff, #9ff3ea); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(62,230,212,.35)); }
.space .age-badge { background: var(--accent-2); color: #3a2a00; }
.space .facts .fl { display: block; font: 600 12px/1.3 var(--f-ui); color: var(--accent); letter-spacing: .02em; }
.space .facts li { background: rgba(62,230,212,.05); border: 1px solid var(--line-soft); border-radius: 14px; }
.space .cd { background: #061026; border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 0 0 18px rgba(62,230,212,.10); }
.space .cd b { color: var(--accent); text-shadow: 0 0 12px rgba(62,230,212,.6); }
.space .btn { background: var(--surface); }
.space .btn-main, .space .choice input:checked + label, .space .thanks-ic { background: var(--accent); color: var(--accent-ink); }
.space .closing { color: var(--accent-2); }
.space .notes { border-color: var(--accent-2); }
.space .notes svg { color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .hud-astro, .hud-radar::after { animation: none !important; } }