*{box-sizing:border-box}
:root{--ink:#3d2c32;--paper:#fffaf5;--pink:#ffdcd6;--shadow:0 18px 48px rgba(73,40,50,.18)}
html{min-height:100%;background:#f9ebe7}
body{margin:0;min-height:100vh;color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;background:radial-gradient(circle at 15% 8%,#fff 0,transparent 23%),linear-gradient(145deg,#fff8f2,#f3d9d5)}
button{font:inherit}
.page{width:min(1120px,94vw);margin:auto;padding:42px 0 70px}
header{text-align:center;margin-bottom:28px}
.eyebrow{margin:0 0 8px;font-size:.76rem;letter-spacing:.18em;font-weight:900;opacity:.58}
h1{margin:0;font-size:clamp(2.3rem,6vw,4.8rem);line-height:.95}
.intro{margin:15px auto 0;max-width:580px;opacity:.7;font-family:system-ui,sans-serif}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.portrait{position:relative;border:0;padding:0;border-radius:20px;overflow:hidden;background:white;cursor:pointer;box-shadow:0 8px 26px rgba(73,40,50,.11);transition:.2s transform,.2s box-shadow}
.portrait:hover,.portrait:focus-visible{transform:translateY(-5px) scale(1.01);box-shadow:var(--shadow);outline:none}
.portrait img{display:block;width:100%;aspect-ratio:527/604;object-fit:cover}
.rocky{outline:3px solid rgba(255,123,142,.28);outline-offset:3px}
.cube-hotspot{position:absolute;left:43%;top:55%;width:14%;height:12%;border-radius:5px}

@keyframes glow{to{transform:scale(1.12)}}
.modal{width:min(590px,calc(100vw - 28px));border:0;border-radius:28px;padding:clamp(25px,5vw,42px);text-align:center;color:var(--ink);background:rgba(255,250,245,.98);box-shadow:0 35px 100px rgba(40,20,28,.42)}
.modal::backdrop{background:rgba(40,22,28,.64);backdrop-filter:blur(7px)}
.modal h2{margin:0 0 10px;font-size:clamp(1.9rem,5vw,3rem)}
.small{max-width:420px}
.close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:var(--ink);font-size:2rem;cursor:pointer;opacity:.55}
.instructions{max-width:470px;margin:0 auto 24px;font-family:system-ui,sans-serif;opacity:.72}
.cube-grid{width:min(360px,78vw);aspect-ratio:1;margin:auto;padding:9px;background:#18181c;border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;box-shadow:inset 0 0 0 2px #000,0 15px 35px rgba(0,0,0,.22)}
.cube-cell{border:0;border-radius:10px;cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.14);transition:.12s transform}
.cube-cell:active{transform:scale(.92)}
.cube-cell:focus-visible{outline:4px solid white;outline-offset:-6px}
.actions{display:flex;justify-content:center;gap:12px;margin-top:24px}
.primary,.secondary{border:0;border-radius:999px;padding:12px 22px;font-weight:900;cursor:pointer}
.primary{background:#402e34;color:white}.secondary{background:#eadfd9;color:#402e34}
.status{min-height:1.4em;margin:16px 0 0;font-family:system-ui,sans-serif;font-weight:700}
.star{border:0;background:transparent;color:#f4b800;font-size:clamp(8rem,28vw,14rem);line-height:.9;cursor:pointer;filter:drop-shadow(0 12px 7px rgba(95,65,0,.28));animation:pulse 1.35s infinite ease-in-out}
@keyframes pulse{50%{transform:scale(1.08) rotate(-4deg)}}
.final-page{min-height:100vh;display:grid;place-items:center;padding:30px;text-align:center}
.final-card{max-width:650px;padding:50px;background:white;border-radius:30px;box-shadow:var(--shadow)}
.final-star{font-size:8rem;color:#f4b800;line-height:1}
@media(max-width:650px){.page{padding-top:28px}.gallery{gap:9px}.portrait{border-radius:12px}.rocky{outline-width:2px;outline-offset:2px}}


/* Implemented puzzle polish */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
div.portrait{cursor:default}
.cube-hotspot{
  position:absolute;
  left:43.5%;
  top:53.5%;
  width:14%;
  height:13%;
  border:0;
  border-radius:4px;
  background:transparent;
  cursor:pointer;
  z-index:3;
}
.cube-hotspot::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:7px;
  opacity:0;
  box-shadow:0 0 0 4px rgba(255,224,80,.72),0 0 22px rgba(255,173,0,.95);
  transition:opacity .18s ease, transform .18s ease;
}
.cube-hotspot:hover::after,.cube-hotspot:focus-visible::after{
  opacity:1;
  transform:scale(1.08);
}
.cube-hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cube-stage{perspective:900px}
.cube-grid{
  transform-style:preserve-3d;
  animation:cubeArrive .48s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes cubeArrive{
  from{opacity:0;transform:translateY(50px) scale(.28) rotate(-14deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
.cube-cell{
  position:relative;
  border:2px solid rgba(255,255,255,.24);
  background-clip:padding-box;
}
.cube-cell::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:7px;
  background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 42%,rgba(0,0,0,.12));
  pointer-events:none;
}
.cube-grid.solved .cube-cell{animation:solveFlash .62s ease both}
.cube-grid.solved .cube-cell:nth-child(2){animation-delay:.05s}
.cube-grid.solved .cube-cell:nth-child(3){animation-delay:.10s}
.cube-grid.solved .cube-cell:nth-child(4){animation-delay:.15s}
.cube-grid.solved .cube-cell:nth-child(5){animation-delay:.20s}
.cube-grid.solved .cube-cell:nth-child(6){animation-delay:.25s}
.cube-grid.solved .cube-cell:nth-child(7){animation-delay:.30s}
.cube-grid.solved .cube-cell:nth-child(8){animation-delay:.35s}
.cube-grid.solved .cube-cell:nth-child(9){animation-delay:.40s}
@keyframes solveFlash{
  0%,100%{filter:brightness(1);transform:scale(1)}
  45%{filter:brightness(2.5);transform:scale(.9)}
  70%{filter:brightness(1.3);transform:scale(1.05)}
}
.success{overflow:hidden}
.sparkles{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%,#ffd60a 0 3px,transparent 4px),
    radial-gradient(circle at 79% 21%,#ff9f0a 0 4px,transparent 5px),
    radial-gradient(circle at 12% 72%,#bf5af2 0 3px,transparent 4px),
    radial-gradient(circle at 86% 73%,#0a84ff 0 3px,transparent 4px),
    radial-gradient(circle at 50% 12%,#ff2d95 0 3px,transparent 4px);
  animation:sparkleDrift 1.4s ease-in-out infinite alternate;
}
@keyframes sparkleDrift{to{transform:translateY(-8px) rotate(3deg);filter:brightness(1.35)}}
.star{animation:starEntrance .65s cubic-bezier(.2,.9,.25,1) both, pulse 1.35s .65s infinite ease-in-out}
@keyframes starEntrance{
  from{opacity:0;transform:translateY(70px) scale(.15) rotate(-45deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}


/* Only Rocky's small cube is interactive */
.portrait.passive{
  cursor:default;
  transform:none !important;
  box-shadow:0 8px 26px rgba(73,40,50,.11);
}
.portrait.passive:hover,
.portrait.passive:focus,
.portrait.passive:focus-visible{
  transform:none !important;
  box-shadow:0 8px 26px rgba(73,40,50,.11) !important;
  outline:none !important;
}
.portrait.passive img{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.rocky{
  cursor:default;
  transform:none !important;
}
.rocky:hover{
  transform:none !important;
}


/* Smaller, more precise hotspot around Rocky's Rubik's Cube */
.cube-hotspot{
  left:46.3% !important;
  top:56.7% !important;
  width:8.2% !important;
  height:7.4% !important;
  border-radius:3px !important;
}
.cube-hotspot::after{
  inset:-3px !important;
  border-radius:5px !important;
}
.hero-return{
  font-size:clamp(1.1rem,3vw,1.55rem);
  font-weight:900;
  opacity:1;
  color:#6b3447;
  margin-bottom:24px;
}


/* Pictures-only landing page */
.page{
  padding-top:clamp(14px,2vw,24px);
}
.gallery{
  margin-top:0;
}

/* The halo appears only when the pointer is directly over the cube hotspot */
.rocky:hover .cube-hotspot::after{
  opacity:0 !important;
  transform:none !important;
}
.cube-hotspot:hover::after,
.cube-hotspot:focus-visible::after{
  opacity:1 !important;
  transform:scale(1.08) !important;
}

/* Reset helper text */
.reset-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.reset-hint{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.62;
}
.actions{
  align-items:flex-start;
}

/* Ancient-style Hebrew heading above the portrait grid */
.ancient-heading{
  text-align:center;
  direction:rtl;
  margin:0 auto clamp(14px,2vw,24px);
  padding:0 12px;
  font-family:"Times New Roman","Noto Serif Hebrew","David Libre",serif;
  font-size:clamp(1.45rem,4vw,2.7rem);
  font-weight:700;
  letter-spacing:.04em;
  color:#5a3a2d;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}


/* Deep-space probe visual system */
:root{--space0:#02050b;--space1:#07111d;--cyan:#66f7ff;--green:#9dffb2;--line:rgba(102,247,255,.28)}
html{background:var(--space0)!important}
body.deep-space-probe{color:#dffcff!important;background:radial-gradient(circle at 18% 14%,rgba(54,116,166,.14),transparent 24%),radial-gradient(circle at 82% 28%,rgba(45,83,141,.13),transparent 27%),linear-gradient(180deg,var(--space0),var(--space1) 48%,#030913)!important;position:relative;overflow-x:hidden}
body.deep-space-probe::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(102,247,255,.55) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.38) 0 1px,transparent 1.5px);background-size:83px 83px,137px 137px,211px 211px;background-position:0 0,31px 57px,94px 22px;opacity:.55;animation:starDrift 55s linear infinite;z-index:0}
body.deep-space-probe::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(73,188,255,.025) 4px);z-index:8}
@keyframes starDrift{to{background-position:83px 83px,168px 194px,305px 233px}}
.page{position:relative;z-index:1;width:min(1180px,95vw)!important;padding-top:clamp(22px,4vw,46px)!important}
.probe-heading-shell{position:relative;width:min(760px,88vw);margin:0 auto clamp(22px,3vw,34px);padding:16px 22px 18px;border-top:1px solid rgba(102,247,255,.48);border-bottom:1px solid rgba(102,247,255,.20);background:linear-gradient(90deg,transparent,rgba(102,247,255,.055),transparent);box-shadow:0 0 18px rgba(102,247,255,.20)}
.probe-heading-shell::before,.probe-heading-shell::after{content:"";position:absolute;top:50%;width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}.probe-heading-shell::before{left:-62px}.probe-heading-shell::after{right:-62px;transform:rotate(180deg)}
.probe-corner{position:absolute;width:18px;height:18px;border-color:var(--cyan);opacity:.8}.probe-corner-a{left:0;top:0;border-left:2px solid;border-top:2px solid}.probe-corner-b{right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}
.ancient-heading.alien-hebrew{margin:0!important;padding:0!important;font-family:"Arial Hebrew","Noto Sans Hebrew","Frank Ruehl CLM","Times New Roman",serif!important;font-size:clamp(1.6rem,4.6vw,3.2rem)!important;font-weight:700!important;letter-spacing:.17em!important;color:transparent!important;background:linear-gradient(180deg,#edffff 0%,#7af9ff 45%,#57a8ff 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 4px rgba(158,255,255,.65),0 0 14px rgba(66,218,255,.48),0 0 32px rgba(62,141,255,.28);filter:drop-shadow(0 0 7px rgba(102,247,255,.35));transform:skewX(-4deg) scaleY(1.06);animation:alienSignal 4.8s ease-in-out infinite}
@keyframes alienSignal{50%{opacity:1;filter:drop-shadow(0 0 12px rgba(102,247,255,.7))}}
.gallery{gap:clamp(10px,1.7vw,18px)!important}
.portrait,.portrait.passive,.rocky{position:relative;border-radius:6px!important;background:#07111a!important;border:1px solid rgba(102,247,255,.24)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 0 1px rgba(0,0,0,.8),0 12px 34px rgba(0,0,0,.45)!important;overflow:hidden}
.portrait::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(102,247,255,.22),transparent 18%) top left/28px 1px no-repeat,linear-gradient(180deg,rgba(102,247,255,.22),transparent 18%) top left/1px 28px no-repeat,linear-gradient(270deg,rgba(102,247,255,.22),transparent 18%) bottom right/28px 1px no-repeat,linear-gradient(0deg,rgba(102,247,255,.22),transparent 18%) bottom right/1px 28px no-repeat}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,transparent 0 64%,rgba(27,176,219,.08) 100%);mix-blend-mode:screen}
.portrait img{filter:saturate(.76) contrast(1.08) brightness(.82) hue-rotate(-5deg)}
.rocky{outline:1px solid rgba(157,255,178,.36)!important;outline-offset:3px!important}
.cube-hotspot:hover::after,.cube-hotspot:focus-visible::after{box-shadow:0 0 0 2px rgba(157,255,178,.95),0 0 8px rgba(157,255,178,.95),0 0 24px rgba(102,247,255,.82)!important}
.modal{color:#dffcff!important;background:linear-gradient(180deg,rgba(9,23,36,.98),rgba(3,10,17,.985))!important;border:1px solid rgba(102,247,255,.38)!important;border-radius:8px!important;box-shadow:0 0 0 1px rgba(0,0,0,.85),0 0 35px rgba(43,173,255,.18),0 38px 110px rgba(0,0,0,.72)!important}
.modal::backdrop{background:rgba(0,4,9,.82)!important;backdrop-filter:blur(6px) saturate(.7)!important}
.modal h2{color:#efffff;text-transform:uppercase;letter-spacing:.035em;text-shadow:0 0 14px rgba(102,247,255,.35)}
.hero-return{color:var(--green)!important;text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}
.cube-grid{background:#02060a!important;border:1px solid rgba(102,247,255,.26);border-radius:4px!important;box-shadow:inset 0 0 22px rgba(0,0,0,.85),0 0 24px rgba(102,247,255,.16)!important}
.cube-cell{border-radius:3px!important;border-color:rgba(255,255,255,.14)!important}
.primary,.secondary{border-radius:3px!important;text-transform:uppercase;letter-spacing:.09em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.primary{background:linear-gradient(180deg,#163044,#0a1722)!important;color:#dffcff!important;border:1px solid rgba(102,247,255,.42)!important}.secondary{background:linear-gradient(180deg,#1a221f,#0b1210)!important;color:var(--green)!important;border:1px solid rgba(157,255,178,.30)!important}
.reset-hint,.status{color:rgba(213,255,242,.72)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}.close{color:var(--cyan)!important}
@media(max-width:650px){.probe-heading-shell::before,.probe-heading-shell::after{display:none}.ancient-heading.alien-hebrew{letter-spacing:.09em!important}}


/* Full-screen video ending */
.ending-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .85s ease,visibility 0s linear .85s;
}
.ending-screen.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .85s ease;
}
.ending-video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
body.ending-active{
  overflow:hidden;
  background:#000 !important;
}
body.ending-active > :not(.ending-screen){
  pointer-events:none;
}