@charset "utf-8";

/* ==========================================================================
   Global Amit — מערכת עיצוב
   הפלטה נגזרת ישירות מהלוגו: שחור-חלל, זוהר כחול של אטמוספירה, וזהב.
   המוטיב החוזר הוא מסלול מעגלי — קשתות במקום קווים, וגלגל הפרסים
   כפואנטה של אותו מוטיב.
   ========================================================================== */

:root {
  /* --- רקעים: מהחלל החיצון פנימה --- */
  --void:        #04060E;
  --deep:        #070C1A;
  --panel:       #0C1428;
  --panel-lift:  #121D38;

  /* --- כחול: זוהר האטמוספירה בלוגו --- */
  --orbit:       #1B4F8C;
  --halo:        #4FB4F5;
  --halo-soft:   rgba(79, 180, 245, 0.14);

  /* --- זהב: אותיות הלוגו --- */
  --gold:        #E0B23C;
  --gold-lit:    #FFDD7A;
  --gold-deep:   #8A6410;
  --gold-soft:   rgba(224, 178, 60, 0.13);

  /* --- טקסט --- */
  --bone:        #F3F1EA;
  --muted:       #8B99B8;
  --dim:         #5B6786;

  /* --- פונקציונלי --- */
  --wa:          #25D366;
  --wa-deep:     #128C7E;
  --win:         #37D399;

  /* --- טיפוגרפיה --- */
  --display: "Secular One", "Arial Hebrew", sans-serif;
  --body:    "Assistant", "Arial Hebrew", system-ui, sans-serif;
  --money:   "Frank Ruhl Libre", "Times New Roman", serif;

  /* --- מרווחים --- */
  --gut:     clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 11vw, 9rem);
  --maxw:    1180px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   בסיס
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip ולא hidden: hidden על html היה הופך אותו למכל גלילה
     ומשתק את position:sticky ואת scroll-behavior בתוך הדף. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

/* כלל display מפורש על מחלקה גובר על display:none של תכונת hidden.
   בלי זה, הסתרת אלמנט שיש לו display:flex פשוט לא עובדת. */
[hidden] { display: none !important; }

a { color: inherit; }

button, input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--gold);
  color: var(--void);
}

/* ==========================================================================
   טיפוגרפיה
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;      /* Secular One קיים במשקל אחד בלבד */
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 1.6rem + 4.2vw, 5rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* עינית סקשן — טקסט קטן במרווח אותיות רחב שיושב מעל כל כותרת.
   מסמן את נושא הסקשן, לא מספר אותו: הדף אינו רצף שלבים. */
.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, var(--gold-soft), transparent);
  max-width: 160px;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  max-width: 56ch;
}

/* סכומי כסף — סריף. מספר בסריף נקרא כאסמכתה, מספר בסאנס נקרא כפרסומת. */
.money {
  font-family: var(--money);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gold-text {
  background: linear-gradient(160deg, var(--gold-lit) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   פריסה
   ========================================================================== */

.wrap {
  width: min(100% - (var(--gut) * 2), var(--maxw));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section);
}

.section-head {
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

/* קשת מפרידה — הקצה העליון של מסלול. מחליפה את קו ההפרדה הישר
   ומחזירה את צורת כדור הארץ שבלוגו לאורך כל הגלילה.
   ממומשת כפסאודו על הסקשן עצמו ולא כאלמנט בזרימה, כדי שלא תדרוש
   מרג'ין שלילי שנשבר בכל שינוי של --section. */
.section.has-arc { overflow: hidden; }

.section.has-arc::before {
  content: "";
  position: absolute;
  inset-inline: -25%;
  top: 0;
  height: clamp(160px, 26vw, 340px);
  border-top: 1px solid rgba(224, 178, 60, 0.28);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(to bottom, rgba(224, 178, 60, 0.055), transparent 60%);
  pointer-events: none;
}

/* ==========================================================================
   שדה כוכבים — קנבס מאחורי כל הדף
   ========================================================================== */

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   הירו
   ========================================================================== */

.hero {
  position: relative;
  /* overflow חייב לשבת כאן: הזוהר שמתחת רחב מ-100vw בכוונה,
     ובלי החיתוך הוא יוצר גלילה אופקית שמזיזה את כל הדף במובייל. */
  overflow: hidden;
  min-height: min(94svh, 820px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 5rem);
}

/* זוהר האטמוספירה מאחורי הלוגו */
.hero::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  translate: -50% 0;
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(27, 79, 140, 0.30) 0%,
    rgba(27, 79, 140, 0.10) 38%,
    transparent 66%);
  pointer-events: none;
}

.hero > * { position: relative; }

/* --- הלוגו והמסלול סביבו --- */

.logo-orbit {
  position: relative;
  width: clamp(190px, 34vw, 310px);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  place-items: center;
}

.logo-orbit img {
  width: 82%;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(224, 178, 60, 0.30),
    0 0 70px rgba(27, 79, 140, 0.55),
    0 24px 60px rgba(0, 0, 0, 0.65);
}

/* טבעת מקווקוות שמסתובבת לאט — המסלול שממנו נגזר כל שאר הדף */
.logo-orbit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: orbit 44s linear infinite;
}

.logo-orbit circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 3 13;
  opacity: 0.5;
}

@keyframes orbit { to { rotate: 360deg; } }

.hero h1 { margin-bottom: 1.1rem; }

.hero .lede {
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* ==========================================================================
   כפתור וואטסאפ
   ========================================================================== */

.wa-btn {
  --lift: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.05rem 2.4rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(150deg, #2BE878 0%, var(--wa) 42%, var(--wa-deep) 100%);
  color: #04240F;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.35rem);
  text-decoration: none;
  cursor: pointer;
  translate: 0 var(--lift);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 12px 32px rgba(37, 211, 102, 0.30);
  transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.wa-btn:hover, .wa-btn:focus-visible {
  --lift: -3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 18px 42px rgba(37, 211, 102, 0.42);
}

.wa-btn svg { width: 1.35em; height: 1.35em; }

/* ==========================================================================
   רצועת אימות
   ========================================================================== */

.trust {
  border-block: 1px solid rgba(224, 178, 60, 0.15);
  background: linear-gradient(to bottom, rgba(12, 20, 40, 0.6), rgba(7, 12, 26, 0.6));
  padding-block: clamp(1.4rem, 3vw, 2rem);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 4vw, 3.25rem);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
}

.trust-item svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--win);
}

.trust-item b {
  font-weight: 800;
  color: var(--gold-lit);
}

/* ==========================================================================
   ההטבה
   ========================================================================== */

.offer-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.offer-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: 18px;
  background: linear-gradient(165deg, var(--panel-lift), var(--panel));
  border: 1px solid rgba(224, 178, 60, 0.16);
  overflow: hidden;
}

/* קשת זוהרת בפינה — אותו מסלול, בקנה מידה של כרטיס */
.offer-card::before {
  content: "";
  position: absolute;
  top: -55%;
  inset-inline-end: -30%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft), transparent 68%);
  pointer-events: none;
}

.offer-card > * { position: relative; }

.offer-card.is-lead {
  border-color: rgba(224, 178, 60, 0.42);
  box-shadow: 0 0 44px rgba(224, 178, 60, 0.10);
}

.offer-figure {
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 6vw, 5.25rem);
  line-height: 0.9;
  margin-bottom: 0.7rem;
  display: block;
}

.offer-card h3 { margin-bottom: 0.5rem; }

.offer-card p {
  color: var(--muted);
  font-size: 0.98rem;
}

/* ==========================================================================
   גלריית תשלומים
   ========================================================================== */

/* רשת ולא רצועה נגללת. כל האישורים גלויים יחד, נטענים פעם אחת
   ונשארים — בלי כרטיסים משוכפלים, בלי איפוס מיקום ובלי חישובי
   גלילה שמתנהגים הפוך ב-RTL. */
.gallery {
  display: grid;
  gap: clamp(0.7rem, 2vw, 1.15rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 620px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.payout {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(224, 178, 60, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  /* הרקע יושב על הכרטיס ולא על התמונה, כדי שיישאר גם כשהתמונה
     מוסתרת בגלל כשל טעינה. */
  background:
    radial-gradient(ellipse at 50% 26%, rgba(27, 79, 140, 0.28), transparent 60%),
    var(--panel-lift);
  transition: translate 0.25s var(--ease-out), border-color 0.25s;
}

.payout:hover {
  translate: 0 -3px;
  border-color: rgba(224, 178, 60, 0.5);
}

/* כפתור ולא div: ההגדלה חייבת להיות נגישה גם למקלדת */
.payout-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.payout img {
  width: 100%;
  aspect-ratio: 945 / 1500;
  object-fit: cover;
  object-position: top center;
}

/* תמונה שלא נטענה — מסתירים אותה כדי שלא יופיעו אייקון שבור
   וטקסט alt. הכרטיס נשאר עם הרקע המעוצב שלו ובאותו גודל. */
.payout img.is-broken { visibility: hidden; }

/* בערימה ולא זה לצד זה: באריח של ~160px שתי השורות לא נכנסות בשורה */
.payout figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.8rem 0.8rem;
  border-top: 1px solid rgba(224, 178, 60, 0.16);
}

.payout .amount {
  font-family: var(--money);
  font-size: clamp(1.05rem, 3.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold-lit);
  direction: ltr;
}

.payout .when {
  font-size: 0.72rem;
  color: var(--dim);
  direction: ltr;
}

/* ==========================================================================
   הגדלת אישור
   ========================================================================== */

/* בלי position על ה-dialog עצמו. הדפדפן נותן ל-dialog מודאלי
   position:fixed, וכל ערך אחר מפיל אותו לזרימת הדף — הוא מופיע
   ליד סוף המסמך ונראה כאילו "יש לו גלילה משלו". */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw, 460px);
  max-height: 92svh;
  overflow: auto;
  overscroll-behavior: contain;
}

/* נועל את גלילת הרקע כל עוד חלון מודאלי פתוח. בלי זה הדף ממשיך
   לזוז מאחורי החלון במובייל, וזה נקרא כאילו החלון עצמו קופץ. */
body:has(dialog[open]) { overflow: hidden; }

.lightbox::backdrop {
  background: rgba(2, 4, 10, 0.9);
  backdrop-filter: blur(4px);
}

.lightbox-inner { position: relative; }

.lightbox img {
  width: 100%;
  max-height: 76svh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(224, 178, 60, 0.3);
  background: var(--panel);
}

.lightbox-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0.25rem 0;
}

.lightbox-caption .amount {
  font-family: var(--money);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-lit);
  direction: ltr;
}

.lightbox-caption .when {
  font-size: 0.85rem;
  color: var(--muted);
  direction: ltr;
}

/* בתוך התמונה ולא מחוצה לה, כדי שלא נצטרך overflow:visible */
.lightbox-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(224, 178, 60, 0.45);
  background: rgba(6, 10, 22, 0.82);
  backdrop-filter: blur(4px);
  color: var(--gold-lit);
  cursor: pointer;
}

.lightbox-close svg { width: 16px; height: 16px; }

.disclaimer {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--dim);
  text-align: center;
}

/* ==========================================================================
   וידאו
   ========================================================================== */

.video-grid {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.video-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(79, 180, 245, 0.20);
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* מצב ממתין — מוצג עד שקבצי הווידאו של הלקוח נכנסים לתיקייה */
.video-card.is-pending {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  border-style: dashed;
  border-color: rgba(79, 180, 245, 0.30);
  color: var(--muted);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(27, 79, 140, 0.28), transparent 62%),
    var(--panel);
}

.video-card.is-pending svg {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  color: var(--halo);
  opacity: 0.75;
}

.video-card.is-pending span {
  font-size: 0.95rem;
  font-weight: 600;
  display: block;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   גלגל הפרסים
   ========================================================================== */

.wheel-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(27, 79, 140, 0.20), transparent 62%),
    var(--deep);
  border-block: 1px solid rgba(224, 178, 60, 0.15);
}

.wheel-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .wheel-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}

.wheel-stage {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.wheel-stage canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px var(--panel),
    0 0 0 7px rgba(224, 178, 60, 0.55),
    0 0 60px rgba(224, 178, 60, 0.16),
    0 26px 60px rgba(0, 0, 0, 0.6);
}

/* המחוג — משולש זהב שנוגע בשפת הגלגל מלמעלה */
.wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  translate: -50% 0;
  width: 30px;
  height: 40px;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
}

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--panel-lift), var(--void));
  border: 2px solid var(--gold);
  font-family: var(--display);
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  color: var(--gold-lit);
  text-align: center;
  line-height: 1.15;
  z-index: 2;
}

/* --- טופס הקוד --- */

.wheel-form { max-width: 30rem; }

.field {
  display: flex;
  gap: 0.6rem;
  margin-block: 1.4rem 0.9rem;
}

.field input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(224, 178, 60, 0.30);
  background: rgba(4, 6, 14, 0.8);
  color: var(--bone);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  direction: ltr;
  text-align: center;
}

.field input::placeholder {
  color: var(--dim);
  letter-spacing: 0.1em;
}

.field input:disabled { opacity: 0.5; }

.spin-btn {
  padding: 0.95rem 1.9rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--gold-lit), var(--gold) 48%, var(--gold-deep));
  color: #241703;
  font-family: var(--display);
  font-size: 1.05rem;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s, translate 0.2s var(--ease-out);
}

.spin-btn:hover:not(:disabled) { filter: brightness(1.1); translate: 0 -2px; }

.spin-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65) brightness(0.7);
}

/* הודעת מצב — מדברת בקול של הממשק, אומרת מה קרה ומה לעשות */
.wheel-msg {
  min-height: 1.5em;
  font-size: 0.95rem;
  margin: 0;
}

.wheel-msg[data-tone="error"] { color: #FF8A8A; }
.wheel-msg[data-tone="ok"]    { color: var(--win); }
.wheel-msg[data-tone="info"]  { color: var(--muted); }

.prize-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(224, 178, 60, 0.16);
  display: grid;
  gap: 0.55rem;
}

.prize-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.prize-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* --- מודאל הזכייה --- */

.win-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 27rem);
}

.win-modal::backdrop {
  background: rgba(2, 4, 10, 0.84);
  backdrop-filter: blur(5px);
}

.win-card {
  position: relative;
  padding: clamp(2rem, 6vw, 2.9rem) clamp(1.5rem, 5vw, 2.4rem);
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(170deg, var(--panel-lift), var(--deep));
  border: 1px solid var(--gold);
  box-shadow: 0 0 80px rgba(224, 178, 60, 0.22);
  color: var(--bone);
}

.win-card .eyebrow { justify-content: center; }
.win-card .eyebrow::after { display: none; }

.win-prize {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0.4rem 0 0.9rem;
}

/* רק פסקאות בלי מחלקה משלהן.
   בורר מסוג ".win-card p" הוא ספציפי יותר מ-".gold-text",
   מ-".eyebrow" ומ-".win-hint", ולכן דרס את שלושתם: שם הפרס איבד את
   גרדיאנט הזהב וקיבל צבע אטום, והכותרות קיבלו את צבע הגוף. */
.win-card p:not([class]) {
  color: var(--muted);
  font-size: 0.98rem;
}

.win-code {
  font-family: var(--money);
  /* 700 ולא ברירת המחדל 400: מ-Frank Ruhl Libre נטענים רק 600 ו-700,
     ומשקל שלא נטען נופל בשקט ל-Times New Roman — נפילה שקשה לראות
     כי גם היא סריף. */
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: var(--gold-lit);
  direction: ltr;
  display: block;
  margin: 0.5rem 0 1.1rem;
}

.win-hint {
  font-size: 0.85rem;
  color: var(--dim);
  margin-bottom: 1.4rem;
}

.win-close {
  margin-top: 1rem;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- מצב "הקוד כבר מומש" ---
   אותו מודאל בלי החגיגה. הפרס מוצג כעובדה שכבר נסגרה ולא כזכייה
   טרייה, כדי שלא ייקרא כהזמנה לממש שוב.
   הבורר משולש-מחלקה בכוונה: .gold-text קובע color ו-background,
   ורק ספציפיות גבוהה ממנו מצליחה לבטל את הגרדיאנט. */
.win-card.is-claimed {
  border-color: rgba(139, 153, 184, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.win-card.is-claimed .win-prize {
  background: none;
  -webkit-text-fill-color: var(--muted);
  color: var(--muted);
}

.win-card.is-claimed .eyebrow { color: var(--muted); }

/* ==========================================================================
   קהילה
   ========================================================================== */

.community {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.community-card {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 18px;
  background: rgba(12, 20, 40, 0.55);
  border: 1px solid rgba(79, 180, 245, 0.18);
}

.community-card .icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.8rem;
  display: block;
}

/* אותו שדה בניהול מקבל אמוג'י או תמונה שהועלתה. כשזו תמונה,
   היא מוגבלת לריבוע בגודל של האמוג'י כדי שהכרטיסים יישארו זהים. */
.community-card .icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
}

.community-card h3 { margin-bottom: 0.45rem; }

.community-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   פוטר
   ========================================================================== */

.footer {
  border-top: 1px solid rgba(224, 178, 60, 0.15);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(6rem, 10vw, 4rem);
  text-align: center;
  background: var(--void);
}

.footer img {
  width: 74px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  opacity: 0.9;
}

.footer-legal {
  font-size: 0.82rem;
  color: var(--dim);
  max-width: 60ch;
  margin-inline: auto;
}

.age-badge {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--dim);
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* ==========================================================================
   כפתור וואטסאפ צף
   ========================================================================== */

.fab {
  position: fixed;
  inset-block-end: 1.1rem;
  inset-inline-start: 1.1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(150deg, #2BE878, var(--wa) 45%, var(--wa-deep));
  color: #04240F;
  font-family: var(--display);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  opacity: 0;
  translate: 0 130%;
  transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}

.fab.is-visible { opacity: 1; translate: 0 0; }
.fab svg { width: 1.3em; height: 1.3em; }

/* ==========================================================================
   חשיפה בגלילה
   ========================================================================== */

.reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
}

.reveal.is-in { opacity: 1; translate: 0 0; }

/* ==========================================================================
   העדפת תנועה מופחתת
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; translate: none; }
}

/* ==========================================================================
   מסכים קטנים
   ========================================================================== */

@media (max-width: 560px) {
  .field { flex-direction: column; }
  .spin-btn { width: 100%; }
  .fab { padding: 0.8rem 1.2rem; font-size: 0.95rem; }
}