/* ============================================================
   סופר נהוראי - landing site
   Game-HUD aesthetic: dark night-street panels, gold pills,
   pixel-chunky edges. Palette lifted straight from the game.
   ============================================================ */

:root {
  --bg: #0c0c14;
  --bg2: #12121a;
  --panel: #171722;
  --panel2: #1e1e2b;
  --ink: #fdf6e3;
  --ink-dim: #b7b2a4;
  --gold: #e8c84a;
  --gold-deep: #b8963a;
  --green: #5fcf6e;
  --red: #e0593f;
  --neon: #ff2bd6;
  --line: rgba(232, 200, 74, 0.22);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --wrap: 1120px;
  --r: 18px;
  --font: 'Rubik', 'Heebo', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
.pixel { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

/* subtle vignette over everything */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 30%, #1a1a2a 0%, var(--bg) 70%);
  transition: opacity .45s ease, transform .5s cubic-bezier(.7,-0.2,.3,1.4);
}
#loader.done { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.loader-inner { display: grid; justify-items: center; gap: 22px; width: min(360px, 78vw); }
.loader-logo {
  height: 30vh; width: auto; max-width: 78vw;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(232,200,74,.5));
  animation: loaderPulse 1.2s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.loader-label {
  font-weight: 900; letter-spacing: .06em; color: var(--gold);
  font-size: 15px; text-transform: uppercase;
}
.loader-bar {
  width: 100%; height: 16px; border-radius: 10px;
  background: #0a0a11;
  border: 2px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  overflow: hidden; position: relative;
}
.loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, #fff4c2);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(232,200,74,.7);
  transition: width .9s cubic-bezier(.5,0,.2,1);
}
.loader-pct { font-size: 13px; color: var(--ink-dim); font-weight: 700; }

/* ============================================================
   SHARED: gold pill button (the game's HUD look)
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-weight: 900; font-size: 17px;
  color: #1a1400;
  background: linear-gradient(180deg, #ffe680, var(--gold) 55%, var(--gold-deep));
  border-radius: 999px;
  border: 2px solid #fff2b8;
  box-shadow: 0 8px 0 var(--gold-deep), 0 16px 30px rgba(232,200,74,.28);
  position: relative;
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.pill:hover { transform: translateY(-2px); box-shadow: 0 10px 0 var(--gold-deep), 0 20px 38px rgba(232,200,74,.4); }
.pill:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--gold-deep), 0 8px 16px rgba(232,200,74,.3); }
.pill.pulse { animation: pillPulse 2.2s ease-in-out infinite; }
@keyframes pillPulse {
  0%,100% { box-shadow: 0 8px 0 var(--gold-deep), 0 0 0 0 rgba(232,200,74,.5); }
  50% { box-shadow: 0 8px 0 var(--gold-deep), 0 0 0 12px rgba(232,200,74,0); }
}

.pill-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; font-weight: 800; font-size: 15px;
  color: var(--ink);
  background: var(--panel2);
  border: 2px solid var(--line);
  border-radius: 999px;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.pill-ghost:hover { transform: translateY(-2px); border-color: var(--gold); background: var(--panel); }

/* section heading style */
.eyebrow {
  display: inline-block;
  font-weight: 900; font-size: 12px; letter-spacing: .16em;
  color: var(--gold); text-transform: uppercase;
  background: rgba(232,200,74,.1);
  border: 1.5px solid var(--line);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.sec-title {
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 900; line-height: 1.08;
  letter-spacing: -.01em;
}
.sec-title .hi { color: var(--gold); }
.sec-sub { color: var(--ink-dim); font-size: clamp(15px, 2.4vw, 18px); margin-top: 12px; max-width: 620px; }
.sec-head { margin-bottom: 40px; }

section { position: relative; z-index: 2; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.slice { clip-path: inset(0 0 100% 0); transition: opacity .7s ease, transform .7s ease, clip-path .8s cubic-bezier(.2,.7,.2,1); }
.reveal.slice.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 800;
  backdrop-filter: blur(10px);
  background: rgba(12,12,20,.72);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-color: var(--line); background: rgba(12,12,20,.9); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 38px; height: 38px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.brand-name { font-weight: 900; font-size: 19px; letter-spacing: -.01em; }
.brand-name .hi { color: var(--gold); }
.nav-badge {
  position: relative;
  font-size: 12px; font-weight: 800; color: var(--gold);
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 12px; background: rgba(232,200,74,.08);
  cursor: default;
}
.nav-badge::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  white-space: nowrap;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow); z-index: 5;
}
.nav-badge:hover::after { opacity: 1; transform: translateY(0) scale(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  /* ⚠️ NOT 92svh. svh is measured from the top of THIS element, and the contest banner
     plus the nav already sit above it — so a 92svh hero ended past the fold on every
     screen and cut נהוראי off mid-body. Subtract what is above it instead, with a floor
     so the scene never collapses on a short window. */
  min-height: 88vh;
  min-height: max(520px, calc(100svh - 150px));
  display: grid; align-items: end;
  /* 🌃 a street at night, not a sky: warm black overhead, plum at eye level, and the
     bottom third already lit by the lamp rather than fading to nothing. */
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(232,200,74,.13), transparent 62%),
    linear-gradient(180deg, #070609 0%, #12101c 34%, #1d1526 66%, #241a2c 100%);
}

/* ---- the lamp, its cone, and the dust inside it ---------------------------- */
.hero-lamp {
  position: absolute; z-index: 1; top: -6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 26px; border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, #2a2530, #16131c);
  box-shadow: 0 10px 26px rgba(232,200,74,.45), inset 0 -7px 12px rgba(232,200,74,.55);
}
.hero-lamp::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 30px; height: 10px; border-radius: 50%;
  background: #ffe9a8; filter: blur(2px);
  animation: lampBuzz 5.5s steps(1) infinite;
}
@keyframes lampBuzz { 0%,88%,100% { opacity: 1; } 89%,91% { opacity: .5; } 90% { opacity: 1; } }

/* the cone is a clipped wedge — a real shaft of light, not a soft blob */
.hero-cone {
  position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 145vw); height: 88%;
  background: linear-gradient(180deg, rgba(255,232,168,.20), rgba(255,232,168,.05) 55%, transparent 88%);
  clip-path: polygon(46.5% 0, 53.5% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.hero-motes {
  position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.6px 1.6px at 42% 30%, rgba(255,240,200,.95), transparent),
    radial-gradient(1.2px 1.2px at 56% 47%, rgba(255,240,200,.75), transparent),
    radial-gradient(1.4px 1.4px at 49% 62%, rgba(255,240,200,.85), transparent),
    radial-gradient(1.1px 1.1px at 61% 22%, rgba(255,240,200,.6), transparent),
    radial-gradient(1.5px 1.5px at 37% 55%, rgba(255,240,200,.7), transparent),
    radial-gradient(1px 1px at 66% 70%, rgba(255,240,200,.55), transparent);
  animation: moteDrift 14s ease-in-out infinite alternate;
}
@keyframes moteDrift {
  from { transform: translate3d(0, 0, 0); opacity: .35; }
  to   { transform: translate3d(-14px, -26px, 0); opacity: .7; }
}

/* the wet asphalt strip the whole scene stands on */
.hero-asphalt {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 15%;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(255,226,150,.20), transparent 70%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  pointer-events: none;
}
.hero-asphalt::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,200,74,.5), transparent);
}

/* skyline silhouettes (parallax layers) */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.skyline svg { width: 100%; height: auto; display: block; }
.skyline.back { opacity: .45; }
.skyline.mid  { opacity: .75; }

/* ---- the hanging shop sign ------------------------------------------------- */
.hero-sign {
  position: absolute; z-index: 2; top: 9%; inset-inline-end: 6%;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 0;
  animation: signSway 6s ease-in-out infinite;
}
.hero-sign-arm { width: 2px; height: clamp(18px, 4vh, 34px); background: rgba(255,255,255,.22); }
.hero-sign-box {
  font-weight: 900; font-size: clamp(13px, 2.2vw, 19px);
  color: var(--neon);
  padding: 7px 14px; border-radius: 8px;
  border: 1.5px solid rgba(255,43,214,.55);
  background: rgba(20,6,20,.72);
  text-shadow: 0 0 8px var(--neon);
  box-shadow: 0 0 22px rgba(255,43,214,.35);
  animation: neonFlicker 3.5s steps(1) infinite;
}
@keyframes signSway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes neonFlicker {
  0%,92%,100% { opacity: 1; }
  93%,95% { opacity: .35; }
  94% { opacity: 1; }
}

/* ---- the copy, set as a poster -------------------------------------------- */
.hero-inner {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0 20px 6vh;
  display: grid; grid-template-columns: 1.22fr .78fr; align-items: end; gap: 10px;
}
.hero-copy { padding-bottom: 7vh; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 12.5px; letter-spacing: .04em; color: var(--gold);
  border-block: 1px solid rgba(232,200,74,.35);
  padding: 8px 2px; margin-bottom: 22px;
  text-transform: none;
}
.hero-kicker i { font-style: normal; }
.hero-kicker em { font-style: normal; color: rgba(232,200,74,.5); }

/* ---- 👑 THE TITLE LOCKUP -----------------------------------------------------
   The one the game itself opens with: a crown over two stacked lines, white above
   gold, both carrying a heavy dark outline. Everything is sized in `em` off
   .hero-title, so the crown, the two lines and the sparkles scale as ONE object.

   ⚠️ On the game's green title screen the dark outline is what separates the letters
   from the background. Over this hero the background is dark too, so the outline alone
   would dissolve into the street — the warm drop-shadow glow behind each line is what
   gives the lockup its edge back. Do not remove one without the other. */
.hero-title {
  position: relative;
  font-size: clamp(38px, 8.4vw, 104px);
  font-weight: 900; line-height: .92;
  display: flex; flex-direction: column;
  /* the crown has to sit centred over the WIDEST line, not flush to the column edge.
     A max-content box that centres its own children does that on its own, and the box
     still starts where the rest of the copy starts. */
  align-items: center; width: max-content; max-width: 100%;
}
.gcrown { display: block; width: .95em; margin-bottom: .08em; }
.gcrown svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 .05em .06em rgba(0,0,0,.55)); }
.gline { display: block; position: relative; }
.gline > span {
  position: relative; display: inline-block;
  -webkit-text-stroke: .11em #14100a;
  paint-order: stroke fill;                 /* stroke UNDER the fill — Safari/Chrome/FF */
  filter: drop-shadow(0 .045em 0 rgba(0,0,0,.75)) drop-shadow(0 0 .5em rgba(232,200,74,.28));
}
.g1 > span { color: #fffdf4; }
.g2 > span { color: #e8c84a; }
/* the second line is set slightly larger and pulled up, exactly as it is in the game */
.g2 { font-size: 1.04em; margin-top: -.06em; }

.gspark {
  position: absolute; color: #fffdf4; font-weight: 400; font-style: normal;
  filter: drop-shadow(0 0 .4em rgba(255,255,255,.65));
  animation: sparkPop 3.2s ease-in-out infinite;
}
.gspark.s1 { font-size: .26em; top: .35em; inset-inline-start: -.5em; animation-delay: .0s; }
.gspark.s2 { font-size: .2em;  top: 1.5em; inset-inline-end: -.35em; animation-delay: 1.1s; }
.gspark.s3 { font-size: .16em; top: 2.5em; inset-inline-start: -.2em; animation-delay: 2.2s; }
@keyframes sparkPop {
  0%, 70%, 100% { opacity: .35; transform: scale(.85); }
  85% { opacity: 1; transform: scale(1.15); }
}

/* the tagline sits ON a gold rule, the way a poster credit line does */
.hero-rule {
  display: flex; align-items: center; gap: 14px;
  margin-top: 26px; color: var(--ink);
  font-size: clamp(15px, 2.4vw, 20px); font-weight: 700;
}
.hero-rule::before,
.hero-rule::after {
  content: ''; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,200,74,.55));
  flex: 0 0 28px;
}
.hero-rule::after { flex: 1; background: linear-gradient(270deg, transparent, rgba(232,200,74,.55)); }
.hero-rule span { min-height: 1.4em; white-space: nowrap; }

.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---- נהוראי, standing in the pool of light -------------------------------- */
.hero-char { position: relative; align-self: end; justify-self: center; z-index: 4; }
.hero-char img {
  position: relative; z-index: 2;
  height: 50vh; width: auto; max-width: 100%;
  filter: drop-shadow(0 24px 26px rgba(0,0,0,.75)) drop-shadow(0 0 46px rgba(232,200,74,.22));
}
/* a hard-edged ellipse on the ground, not a glow behind him — that is the difference
   between "lit from above" and "floating in front of a gradient". */
.hero-char .pool {
  position: absolute; z-index: 1; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 132%; height: 74px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,230,160,.42), rgba(255,220,140,.14) 55%, transparent 72%);
  filter: blur(5px);
}

/* ---- the scroll cue -------------------------------------------------------- */
.hero-scroll {
  position: absolute; z-index: 5; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 38px; border: 2px solid rgba(232,200,74,.45); border-radius: 14px;
}
.hero-scroll span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--gold); transform: translateX(-50%);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* floating smoke deco */
.deco { position: absolute; z-index: 3; pointer-events: none; user-select: none; }
.deco-smoke {
  bottom: 40%; inset-inline-end: 21%; font-size: clamp(24px, 4vw, 40px);
  animation: drift 9s linear infinite; opacity: .4;
}
@keyframes drift {
  0% { transform: translate(0,0) scale(.8); opacity: 0; }
  20% { opacity: .5; }
  100% { transform: translate(30px,-120px) scale(1.5); opacity: 0; }
}

/* screen-shake helper */
.shake { animation: shake .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%,90% { transform: translate3d(-1px,0,0); }
  20%,80% { transform: translate3d(2px,0,0); }
  30%,50%,70% { transform: translate3d(-4px,0,0); }
  40%,60% { transform: translate3d(4px,0,0); }
}

/* spark particle */
.spark {
  position: fixed; z-index: 9998; width: 8px; height: 8px; border-radius: 2px;
  background: var(--gold); pointer-events: none;
  box-shadow: 0 0 8px var(--gold);
}

/* ============================================================
   ARSENAL (feature grid)
   ============================================================ */
.arsenal { padding: 90px 0 70px; }
.feat-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.feat {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px 24px; min-height: 210px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease;
  isolation: isolate;
}
.feat:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow); }
.feat-ico { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.feat h3 { font-size: 21px; font-weight: 900; margin-bottom: 8px; }
.feat p { color: var(--ink-dim); font-size: 15px; line-height: 1.5; }
.feat-art {
  position: absolute; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}

/* card 1: dog peeks in from bottom */
.feat.dog .feat-art { bottom: -60%; inset-inline-end: -8px; width: 62%; transform: translateY(40px); }
.feat.dog:hover .feat-art { opacity: 1; transform: translateY(-8%); }

/* card 2: timax slides across */
.feat.timax .feat-art { bottom: 6px; inset-inline-start: -60%; width: 74%; transform: translateX(-40px); }
.feat.timax:hover .feat-art { opacity: 1; transform: translateX(150%); transition: opacity .2s ease, transform 1.1s cubic-bezier(.5,0,.3,1); }

/* card 3: chair launches / spins */
.feat.chair .feat-art { bottom: 8px; inset-inline-end: 8px; width: 40%; transform: rotate(0deg) translateY(30px) scale(.8); }
.feat.chair:hover .feat-art { opacity: 1; transform: rotate(380deg) translateY(-6px) scale(1); transition: opacity .3s ease, transform .9s cubic-bezier(.2,.8,.2,1.2); }

/* card 4: takeoff tilt */
.feat.flight { transform-origin: bottom left; }
.feat.flight:hover { transform: translateY(-6px) rotate(-4deg); }
.feat.flight .feat-plane { position: absolute; top: 14px; inset-inline-start: 18px; font-size: 26px; opacity: 0; transform: translate(-20px, 20px); transition: all .5s ease; }
.feat.flight:hover .feat-plane { opacity: 1; transform: translate(40px, -14px) rotate(-20deg); }

/* card 5: the emoji reel */
.feat.games .reel { height: 44px; overflow: hidden; margin-top: 8px; }
.feat.games .reel span { display: block; font-size: 34px; line-height: 44px; }

/* card 6: police light sweep */
.feat.cops .sweep {
  position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(224,89,63,.5) 48%, transparent 52%, transparent 58%, rgba(74,120,255,.5) 66%, transparent 72%);
  background-size: 300% 100%;
  transition: opacity .2s ease;
}
.feat.cops:hover .sweep { opacity: 1; animation: copSweep 1s linear infinite; }
@keyframes copSweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ============================================================
   EVOLUTION (sticky scene)
   ============================================================ */
.evo { position: relative; height: 420vh; }
.evo-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 40%, #191326 0%, var(--bg) 70%);
}
.evo-scene { width: 100%; max-width: var(--wrap); padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.evo-stage-wrap { position: relative; justify-self: center; height: 60vh; display: grid; place-items: end center; width: 100%; }
.evo-char {
  position: absolute; bottom: 0; height: 58vh; width: auto;
  opacity: 0; transform: translateY(20px) scale(.96);
  /* short on purpose: at .5s a fast scroll flies past two stages while the crossfade
     from the first is still running */
  transition: opacity .26s ease, transform .26s ease;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.6));
}
.evo-char.active { opacity: 1; transform: none; }
.evo-glow {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 22%;
  background: radial-gradient(ellipse, rgba(232,200,74,.4), transparent 70%);
  filter: blur(8px);
}
.evo-info { max-width: 460px; }
.evo-idx { font-weight: 900; color: var(--gold-deep); font-size: 15px; letter-spacing: .1em; }
.evo-name { font-size: clamp(30px, 6vw, 52px); font-weight: 900; line-height: 1; margin: 8px 0 14px; }
.evo-blurb { color: var(--ink-dim); font-size: clamp(15px, 2.5vw, 19px); min-height: 3.2em; }
.evo-meter {
  margin-top: 26px; height: 22px; border-radius: 12px;
  background: #0a0a11; border: 2px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  position: relative; overflow: hidden;
}
.evo-meter-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 65%, #fff4c2);
  box-shadow: 0 0 14px rgba(232,200,74,.6);
  /* ⚠️ NO width transition. This bar is driven straight off the scroll position, and a
     transition on a scroll-driven value animates ON TOP of the scroll — the bar spends
     400ms easing toward a number the finger has already left behind, which reads as lag
     on any fast flick. The scroll IS the animation. */
  will-change: width;
}
.evo-wassah { margin-top: 12px; font-weight: 900; color: var(--gold); font-size: 20px; }
.evo-wassah small { color: var(--ink-dim); font-weight: 600; font-size: 14px; }
/* progress dots */
.evo-dots { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
.evo-dots i { width: 34px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); transition: background .18s ease; }
.evo-dots i.on { background: var(--gold); }
.evo-scrollhint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: var(--ink-dim); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ============================================================
   ROSTER
   ============================================================ */
.roster { padding: 90px 0 80px; background: linear-gradient(180deg, var(--bg), var(--bg2) 50%, var(--bg)); }
.roster-grid { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
.rost {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 12px 16px; text-align: center;
  transition: transform .2s ease, border-color .2s ease;
  overflow: visible;
}
.rost:hover { transform: translateY(-6px); border-color: var(--gold); z-index: 5; }
.rost-imgwrap { height: 150px; display: grid; place-items: end center; overflow: hidden; }
.rost img { height: 150px; width: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.rost:hover img { animation: bounce .5s ease; }
@keyframes bounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.rost-name { font-weight: 900; font-size: 15px; margin-top: 6px; }
.rost-role { color: var(--gold); font-size: 11px; font-weight: 700; margin-top: 2px; }
.rost-bubble {
  position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%) translateY(8px) scale(.9);
  width: max-content; max-width: 190px;
  background: var(--ink); color: #141018;
  font-weight: 800; font-size: 13px; line-height: 1.35;
  padding: 9px 13px; border-radius: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1.4);
  box-shadow: var(--shadow); z-index: 10;
}
.rost-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--ink);
}
.rost:hover .rost-bubble { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.hof { padding: 90px 0 80px; }
.hof-panel {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 2px solid var(--line); border-radius: 22px;
  padding: 28px 22px 30px; box-shadow: var(--shadow);
  max-width: 720px; margin-inline: auto;
}
.hof-title { text-align: center; font-weight: 900; font-size: 24px; color: var(--gold); margin-bottom: 22px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; margin-bottom: 24px; }
.pod { text-align: center; }
.pod .medal { font-size: 30px; }
.pod .pod-name { font-weight: 900; font-size: 15px; margin: 4px 0 2px; }
.pod .pod-score { color: var(--gold); font-weight: 900; font-size: 18px; }
.pod .bar {
  margin-top: 10px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--panel2), #14141d);
  border: 2px solid var(--line); border-bottom: none;
  display: grid; place-items: center; font-weight: 900; font-size: 22px; color: var(--gold);
}
.pod.p1 .bar { height: 120px; background: linear-gradient(180deg, rgba(232,200,74,.28), #14141d); border-color: var(--gold); }
.pod.p1 .crown { font-size: 26px; animation: crownBob 1.8s ease-in-out infinite; }
@keyframes crownBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.pod.p2 .bar { height: 90px; }
.pod.p3 .bar { height: 68px; }

.hof-rows { display: grid; gap: 8px; }
.hof-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  background: var(--bg2); border: 1.5px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 11px 14px; font-weight: 700;
}
.hof-row .rk { color: var(--ink-dim); font-weight: 900; }
.hof-row .sc { color: var(--gold); font-weight: 900; }
.hof-row.you {
  border: 2px dashed var(--gold); background: rgba(232,200,74,.08);
  color: var(--gold); animation: youPulse 2s ease-in-out infinite;
}
@keyframes youPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,200,74,.4); } 50% { box-shadow: 0 0 0 8px rgba(232,200,74,0); } }
.hof-soon { text-align: center; margin-top: 20px; color: var(--ink-dim); font-weight: 700; font-size: 14px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { padding: 90px 0 80px; position: relative; overflow: hidden; }
.final-panel {
  position: relative;
  background: radial-gradient(90% 120% at 50% 0%, #241636 0%, var(--panel) 70%);
  border: 2px solid var(--line); border-radius: 28px;
  padding: 54px 20px 40px; text-align: center; overflow: hidden;
  box-shadow: var(--shadow);
}
.final-flank { display: flex; align-items: end; justify-content: center; gap: 14px; height: 42vh; max-height: 340px; margin-bottom: 6px; }
.final-flank img { height: 100%; width: auto; filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
.final-flank .dog { height: 42%; align-self: flex-end; }
.final h2 { font-size: clamp(28px, 6vw, 48px); font-weight: 900; line-height: 1.05; }
.final h2 .hi { color: var(--gold); }
.final p { color: var(--ink-dim); font-size: 17px; margin: 14px 0 26px; }
.final .pill { font-size: 19px; padding: 17px 32px; }
.final-mail { display: block; margin-top: 22px; color: var(--ink-dim); font-size: 14px; }
.final-mail a { color: var(--gold); font-weight: 700; }
.final-sparks { position: absolute; inset: 0; pointer-events: none; }
.final-sparks span { position: absolute; font-size: 20px; opacity: .5; animation: floatUp linear infinite; }
@keyframes floatUp {
  from { transform: translateY(20px) rotate(0); opacity: 0; }
  20% { opacity: .6; }
  to { transform: translateY(-120px) rotate(40deg); opacity: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding: 34px 0; position: relative; z-index: 2; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.footer-inner .brand { justify-content: center; }
.footer-tag { color: var(--ink-dim); font-weight: 700; font-size: 14px; }
.footer-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-weight: 700; font-size: 14px; }
.footer-links a { color: var(--ink-dim); transition: color .2s ease; }
.footer-links a:hover { color: var(--gold); }
.footer-links .dot { color: var(--gold-deep); }
.footer-copy { color: #6a6656; font-size: 13px; }
.footer-love { color: #6a6656; font-size: 13px; }

/* ============================================================
   LEGAL PAGES (privacy / terms)
   ============================================================ */
.site-header { border-bottom: 1px solid var(--line); padding: 14px 0; position: sticky; top: 0; z-index: 800; background: rgba(12,12,20,.9); backdrop-filter: blur(8px); }
.header-inner { display: flex; align-items: center; }
.legal { max-width: 760px; margin: 60px auto; padding: 0 22px; position: relative; z-index: 2; }
.legal h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 900; }
.legal h1::after { content: ''; display: block; width: 64px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); margin-top: 14px; }
.legal-date { color: var(--ink-dim); font-size: 14px; margin: 14px 0 30px; font-weight: 600; }
.legal h2 { font-size: 21px; font-weight: 900; margin: 30px 0 10px; color: var(--gold); }
/* sub-headings inside a section (used by the opening satire clause, which is long enough
   to need them). Deliberately smaller and paler than h2 so the numbered sections still
   read as the document's skeleton and these read as parts of one. */
.legal h3 { font-size: 16px; font-weight: 800; margin: 22px 0 8px; color: #f0e7cd; }
.legal p { color: #d8d2c2; margin-bottom: 14px; line-height: 1.7; }
.legal strong { color: var(--ink); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-back {
  display: inline-block; margin-top: 34px; font-weight: 800;
  color: var(--gold); border: 2px solid var(--line); border-radius: 999px;
  padding: 11px 20px; transition: border-color .2s ease, transform .15s ease;
}
.legal-back:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
  /* HERO: stack copy over the character; keep character in-flow + visible */
  .hero-inner {
    grid-template-columns: 1fr;
    justify-items: center; align-items: end;
    gap: 0; padding-bottom: 2vh;
  }
  .hero-copy { padding-bottom: 0; text-align: center; }
  /* the lockup already centres its own children — on the stacked layout the max-content
     BOX is what has to be centred in the column */
  .hero-title { margin-inline: auto; }
  .hero-kicker { justify-content: center; }
  .hero-rule { justify-content: center; }
  /* the rule's flexible tail would push the tagline off-centre once the column is
     centred, so both sides become fixed stubs instead */
  .hero-rule::after { flex: 0 0 28px; }
  .hero-cta { justify-content: center; }
  .hero-char {
    display: block;
    margin-top: -2vh;               /* let him overlap the copy/skyline nicely */
    align-self: end; justify-self: center;
  }
  .hero-char img { height: 40vh; }
  .hero-sign { inset-inline-end: 4%; top: 7%; }
  .evo-scene { grid-template-columns: 1fr; gap: 12px; }
  .evo-stage-wrap { height: 42vh; order: -1; }
  .evo-char { height: 40vh; }
  .evo-info { text-align: center; margin-inline: auto; }
  .evo-meter { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .feat-grid { grid-template-columns: 1fr; }
  .roster-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- HERO (phone) ----
     ⚠️ the 150px the base rule subtracts is the banner + nav on a normal phone. At 320
     wide the countdown wraps and that stack grows, so a short 320-tall-ish window pushed
     נהוראי's feet past the fold again. More headroom here, and the character is capped in
     px as well as vh so a short viewport cannot scale him past what is left. */
  .hero { min-height: max(430px, calc(100svh - 190px)); }
  .hero-inner { padding-inline: 16px; padding-bottom: 1vh; }
  /* ⚠️ …and on a genuinely SHORT window the subtraction cannot be guessed at all: at
     320 wide the contest countdown wraps to two rows and the stack above the hero grows
     to ~210px, which no fixed number covers. Below this height the hero stops reserving
     space and simply sizes to its content, so the feet are always on the ground. */
  @media (max-height: 740px) {
    .hero { min-height: 0; }
    .hero-char img { height: min(26vh, 165px); }
  }
  .hero-kicker { font-size: 11.5px; gap: 7px; margin-bottom: 16px; padding: 7px 2px; }
  .hero-title { font-size: clamp(40px, 15vw, 74px); }
  .hero-rule { margin-top: 18px; font-size: clamp(14px, 4.2vw, 19px); gap: 10px; }
  .hero-rule::before, .hero-rule::after { flex: 0 0 16px; }
  /* the tagline is one long line — on a narrow phone it must be allowed to wrap */
  .hero-rule span { white-space: normal; }
  .hero-cta { margin-top: 20px; gap: 10px; }
  .hero-char { margin-top: -1vh; }
  .hero-char img { height: min(30vh, 215px); }
  .hero-char .pool { height: 44px; width: 118%; }
  /* the sign would sit on the title on a phone — keep the lamp, drop the sign */
  .hero-sign { display: none; }
  .hero-scroll { display: none; }
  .hero-cone { width: 190vw; }

  .pill { font-size: 16px; padding: 14px 22px; }
  .pill-ghost { font-size: 14px; padding: 12px 18px; }

  /* ---- SECTION RHYTHM ---- */
  .wrap { padding-inline: 16px; }
  .arsenal { padding: 60px 0 50px; }
  .roster { padding: 60px 0 54px; }
  .hof { padding: 60px 0 54px; }
  .final { padding: 60px 0 54px; }
  .sec-head { margin-bottom: 28px; }

  /* ---- ARSENAL cards ---- */
  .feat { padding: 22px 18px 20px; min-height: 168px; }
  .feat h3 { font-size: 19px; }
  .feat p { font-size: 14px; }

  /* ---- EVOLUTION ---- */
  .evo-name { font-size: clamp(28px, 8vw, 40px); }
  .evo-blurb { min-height: 4.4em; font-size: clamp(14px, 4vw, 17px); }
  .evo-dots { top: 16px; }
  .evo-dots i { width: 24px; }
  .evo-info { padding-inline: 6px; }

  /* ---- HALL OF FAME ---- */
  .podium { gap: 6px; }
  .pod .medal { font-size: 24px; }
  .pod .pod-name { font-size: 11px; }
  .pod .pod-score { font-size: 15px; }
  .pod .bar { font-size: 18px; }
  .pod.p1 .bar { height: 96px; }
  .pod.p2 .bar { height: 72px; }
  .pod.p3 .bar { height: 54px; }
  .hof-title { font-size: 20px; margin-bottom: 18px; }
  .hof-panel { padding: 22px 14px 24px; }
  .hof-row { grid-template-columns: 28px 1fr auto; padding: 10px 12px; font-size: 14px; }

  /* ---- FINAL CTA ---- */
  .final-panel { padding: 40px 14px 34px; }
  .final-flank { height: 32vh; gap: 10px; }
  .final p { font-size: 15px; margin: 12px 0 22px; }
  .final .pill { font-size: 17px; padding: 15px 26px; }

  /* ---- FOOTER ---- */
  .footer-links { font-size: 13px; gap: 8px; }
}

/* very narrow phones (≤360) - keep the 2-col roster + CTA from wrapping badly */
@media (max-width: 380px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .pill, .hero-cta .pill-ghost { justify-content: center; }
  .roster-grid { gap: 12px; }
  .rost { padding: 12px 8px 14px; }
  .rost-imgwrap, .rost img { height: 128px; }
  .rost-name { font-size: 14px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #loader { display: none; }
  .evo-char { transition: opacity .2s ease; }
  /* no scroll-driven scene: collapse the tall spacer, un-pin */
  .evo { height: auto; }
  .evo-sticky { position: relative; height: auto; min-height: 88vh; padding: 60px 0; }
}

/* ============================================================
   🍎 STORE BUTTON
   The download CTA is the one thing on this page that has a job, so it
   stopped looking like the rest of the furniture. The old `.pill` is a
   game-HUD button — hard 8px offset shadow, bright rim, permanent pulse —
   which reads as decoration next to a real App Store badge. This one is
   quieter and heavier: Apple mark, two-line label, soft elevation, and no
   idle animation. It is still gold, so it still belongs to the page.
   `.pill` stays for the secondary actions that legitimately are furniture.
   ============================================================ */
.btn-store {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 20px;
  border-radius: 14px;
  color: #17130a;
  background: linear-gradient(180deg, #f3d868, var(--gold) 62%, #d9b73f);
  border: 1px solid rgba(255, 248, 214, .55);
  box-shadow: 0 6px 18px rgba(232, 200, 74, .22), 0 2px 4px rgba(0, 0, 0, .3);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-store:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(232, 200, 74, .34), 0 3px 6px rgba(0, 0, 0, .34);
  filter: brightness(1.04);
}
.btn-store:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(232, 200, 74, .24); }
.btn-store:focus-visible { outline: 3px solid #fff4c2; outline-offset: 3px; }

.btn-store .apple-mark { width: 26px; height: 26px; flex: none; fill: currentColor; }
.btn-store .store-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.btn-store .store-kicker { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .78; }
.btn-store .store-name { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }

/* no URL pasted yet: still says the build is out, but is plainly not clickable */
.btn-store[aria-disabled="true"] { opacity: .72; cursor: default; box-shadow: none; }
.btn-store[aria-disabled="true"]:hover { transform: none; filter: none; }

/* the nav "it's out" signal, upgraded from a static word to a live link */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; color: var(--gold);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; background: rgba(232, 200, 74, .09);
  transition: border-color .2s ease, background .2s ease;
}
.live-badge:hover { border-color: var(--gold); background: rgba(232, 200, 74, .16); }
.live-badge .dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  animation: liveDot 2.4s ease-out infinite;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(95, 207, 110, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(95, 207, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 207, 110, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .live-badge .dot-live { animation: none; }
  .btn-store { transition: none; }
}

@media (max-width: 560px) {
  .btn-store { padding: 11px 18px; }
  .btn-store .store-name { font-size: 16px; }
  .btn-store .apple-mark { width: 23px; height: 23px; }
}

/* the reassurance line under the hero CTA */
.hero-note { color: var(--ink-dim); font-size: 13px; font-weight: 600; margin-top: 16px; }

/* the "אנדרואיד בדרך 🤖" hint used to hang off .nav-badge; the badge is a link
   now, so the tooltip moved with it rather than being quietly lost */
.live-badge { position: relative; }
.live-badge::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  white-space: nowrap;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow); z-index: 5;
}
.live-badge:hover::after { opacity: 1; transform: translateY(0) scale(1); }