/* ============================================================
   Poke-IL — חומרים: קריסטל, הולו, אורורה
   נטען אחרי components.css ודורס את מה שצריך.
   ============================================================ */

/* ------------------------------------------------------------
   הקרקע — לא שחור שטוח.
   אור מצטבר בראש המסך, כמו נצנוץ שנתפס על פויל.
   ------------------------------------------------------------ */
body{
  background:var(--aurora);
  background-attachment:fixed;
}
.shell{
  background:transparent;
  box-shadow:none;
}
@media(min-width:520px){
  body{background:var(--bg-2)}
  .shell{
    background:var(--aurora);
    box-shadow:var(--shadow-lift);
  }
}

/* גרעיניות עדינה — מונעת מהגרדיאנט להיראות פלסטיק */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
/* מרימים את המעטפת מעל שכבת הגרעיניות דרך המעטפת עצמה.
   אסור לעשות זאת עם `.shell > *` — זה היה דורס את
   position:fixed של סרגל הניווט ושל כפתור הפעולה, והם היו
   נופלים לתחתית הדף במקום להיצמד למסך. */
.shell{z-index:1}

/* ------------------------------------------------------------
   כפתור קריסטל
   גוף מדורג, שפה עליונה מוארת, זוהר בצבע האקסנט,
   וברק שעובר עליו בלחיצה — כמו הטיה של קלף הולו.
   ------------------------------------------------------------ */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:0;
  border-radius:14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acc-2) 92%, #fff 18%) 0%,
      var(--acc) 46%,
      color-mix(in srgb, var(--acc-deep) 88%, var(--acc)) 100%);
  color:var(--on-acc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.28),
    var(--glow);
  letter-spacing:.01em;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s, filter .2s;
}
/* שכבת הזכוכית העליונה */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--sheen);
  border-radius:inherit;
  pointer-events:none;
}
/* הברק שעובר */
.btn::after{
  content:'';position:absolute;top:-60%;bottom:-60%;width:45%;
  inset-inline-start:-60%;
  background:linear-gradient(100deg,
    transparent 0%, rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.55) 50%, rgba(255,255,255,.10) 65%, transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  transition:inset-inline-start .65s cubic-bezier(.3,.7,.3,1);
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.06)}
.btn:hover::after{inset-inline-start:120%}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:disabled{opacity:.4;box-shadow:none;transform:none;filter:grayscale(.4)}
.btn:disabled::after{display:none}

/* גרסה שקטה — זכוכית על הרקע */
.btn.ghost{
  background:var(--glass);
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--bevel);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
}
.btn.ghost::before{opacity:.5}
.btn.ghost:hover{
  border-color:color-mix(in srgb, var(--acc) 55%, var(--line));
  box-shadow:var(--bevel), 0 4px 16px color-mix(in srgb, var(--acc) 18%, transparent);
}
.btn.danger{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bad) 88%, #fff 16%), var(--bad) 55%,
    color-mix(in srgb, var(--bad) 78%, #000));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 20px color-mix(in srgb, var(--bad) 34%, transparent);
}
.btn.ghost.danger{background:var(--glass);color:var(--bad);border-color:var(--bad)}

/* FAB — אותו חומר, עגול */
.fab{
  border-radius:19px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acc-2) 92%, #fff 20%) 0%,
      var(--acc) 48%,
      var(--acc-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 26px color-mix(in srgb, var(--acc) 50%, transparent);
  position:fixed;
  overflow:hidden;
}
.fab::before{
  content:'';position:absolute;inset:0;background:var(--sheen);pointer-events:none;
}
.fab:active{transform:scale(.94)}

/* ------------------------------------------------------------
   משטחים — שפה עליונה מוארת כמו בוול של סליב
   ------------------------------------------------------------ */
.panel{
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 96%, var(--acc) 4%) 0%,
      var(--surface) 40%);
  border:1px solid var(--line);
  box-shadow:var(--bevel), var(--shadow);
}
.listing, .eventcard, .article, .offercard, .entry{
  box-shadow:var(--bevel), var(--shadow);
}

/* ------------------------------------------------------------
   הולו — משטח שמחזיר ספקטרום
   משמש לגיבור, לבאנרים ולכרטיסי אתגר.
   ------------------------------------------------------------ */
.holo{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--r-xl);
  border:1px solid color-mix(in srgb, var(--acc) 40%, var(--line));
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--acc) 16%, var(--surface)) 0%,
      var(--surface) 52%,
      color-mix(in srgb, var(--spark) 10%, var(--surface)) 100%);
  box-shadow:var(--bevel), var(--shadow-card);
}
/* קשת הספקטרום — עדינה, נעה לאט */
.holo::before{
  content:'';position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:conic-gradient(from 210deg,
    rgba(255,80,120,.16), rgba(255,205,80,.16), rgba(90,235,180,.16),
    rgba(90,170,255,.18), rgba(190,120,255,.16), rgba(255,80,120,.16));
  filter:blur(28px);
  opacity:.75;
  animation:holoDrift 18s linear infinite;
}
.holo > *{position:relative;z-index:1}
@keyframes holoDrift{
  0%{transform:rotate(0deg) scale(1.05)}
  100%{transform:rotate(360deg) scale(1.05)}
}
/* פס אור אלכסוני שעובר על המשטח */
.holo::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(102deg,
    transparent 34%, rgba(255,255,255,.16) 47%,
    rgba(255,255,255,.05) 54%, transparent 66%);
  mix-blend-mode:screen;
}

/* ------------------------------------------------------------
   סרגלים — זכוכית
   ------------------------------------------------------------ */
.topbar{
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.tabbar{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
/* הלשונית הפעילה מקבלת הילה, לא רק צבע */
.tab{position:relative;transition:color .2s}
.tab[aria-current="page"]::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:0 0 4px 4px;
  background:var(--acc);
  box-shadow:0 0 14px color-mix(in srgb, var(--acc) 80%, transparent);
}
.tab[aria-current="page"] svg{
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 55%, transparent));
}

/* ------------------------------------------------------------
   מותג
   ------------------------------------------------------------ */
.brand{
  background:linear-gradient(120deg, var(--acc-2), var(--ink) 55%, var(--acc));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:-.01em;
}
:root[data-theme="dark"] .brand,
:root:not([data-theme="light"]) .brand{
  background:linear-gradient(120deg, #FFFFFF, var(--acc-2) 60%, var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.beta{
  border-color:color-mix(in srgb, var(--acc) 40%, var(--line));
  color:var(--acc-ink);
  background:var(--acc-soft);
}

/* ------------------------------------------------------------
   צ׳יפים ומקטעים
   ------------------------------------------------------------ */
.chip{
  background:var(--glass);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .14s, border-color .2s, background .2s;
}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"]{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--acc-2) 90%, #fff 12%), var(--acc));
  border-color:transparent;
  color:var(--on-acc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 3px 12px color-mix(in srgb, var(--acc) 34%, transparent);
}
.seg{
  background:color-mix(in srgb, var(--surface-2) 80%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.seg button[aria-selected="true"]{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 96%, var(--acc) 6%), var(--surface));
  box-shadow:var(--bevel), 0 2px 8px rgba(0,0,0,.14);
}

/* ------------------------------------------------------------
   שדות
   ------------------------------------------------------------ */
.field, .inp{
  background:var(--glass);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--bevel);
  transition:border-color .2s, box-shadow .2s;
}
.field:focus-within, .inp:focus{
  border-color:var(--acc);
  box-shadow:var(--bevel), 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}

/* ------------------------------------------------------------
   תמונות קלפים — נצנוץ קל על המסגרת
   ------------------------------------------------------------ */
.thumbwrap{
  border-color:color-mix(in srgb, var(--acc) 14%, var(--line-soft));
  box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.gcard:hover .thumbwrap,
.railcard:hover .thumbwrap{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent);
}
.detail-well, .hero-well{
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%),
    var(--card-well);
}
.detail-img, .hero-img{
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 40px color-mix(in srgb, var(--acc) 26%, transparent);
}

/* ------------------------------------------------------------
   סימן המותג במסך הפתיחה
   ------------------------------------------------------------ */
.onboard-mark{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  color:var(--on-acc);
  background:linear-gradient(160deg, var(--acc-2), var(--acc) 55%, var(--acc-deep));
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 14px 40px color-mix(in srgb, var(--acc) 45%, transparent);
}
.onboard-mark::after{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,
    rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0) 40%);
  animation:holoDrift 7s linear infinite;
  mix-blend-mode:overlay;
}

/* כותרת ראשית — מודגשת יותר, עם נשימה */
.h-xl{letter-spacing:-.015em}
.hero-name{letter-spacing:-.01em}

/* ------------------------------------------------------------
   כותרת המשימה: מי אנחנו
   ------------------------------------------------------------ */
.claim{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:var(--acc-soft);
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  color:var(--acc-ink);
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  width:fit-content;
}
.claim .dot{
  width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.82)}
}

/* ------------------------------------------------------------
   כרטיסי כניסה מהירה במסך הבית
   ------------------------------------------------------------ */
.quickgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.quick{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:6px;
  padding:14px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--acc) 10%, var(--surface)), var(--surface) 65%);
  box-shadow:var(--bevel), var(--shadow);
  text-align:start;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.quick:hover{
  transform:translateY(-2px);
  box-shadow:var(--bevel), var(--shadow-card),
             0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent);
}
.quick .qi{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:var(--on-acc);
  background:linear-gradient(160deg, var(--acc-2), var(--acc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 4px 12px color-mix(in srgb, var(--acc) 32%, transparent);
}
.quick .qt{font-weight:700;font-size:14.5px;color:var(--ink)}
.quick .qd{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.quick .qbadge{
  position:absolute;top:10px;inset-inline-end:10px;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--spark);color:#fff;
}

/* ------------------------------------------------------------
   כשמפחיתים תנועה — הכל נעצר
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .holo::before,.onboard-mark::after,.claim .dot{animation:none}
  .btn::after{display:none}
}
:root.a11y-no-motion .holo::before,
:root.a11y-no-motion .onboard-mark::after,
:root.a11y-no-motion .claim .dot{animation:none}
:root.a11y-no-motion .btn::after{display:none}

/* ============================================================
   סלוטים לתמונות — ארבע זוויות
   ============================================================ */
.slotgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.slot{
  display:flex;flex-direction:column;gap:7px;
  padding:11px;border-radius:var(--r-md);
  border:1px dashed var(--line);
  background:color-mix(in srgb, var(--surface) 60%, transparent);
  transition:border-color .2s, background .2s;
}
.slot.filled{
  border-style:solid;
  border-color:color-mix(in srgb, var(--good) 45%, var(--line));
  background:color-mix(in srgb, var(--good) 6%, var(--surface));
}
.slotbox{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-start}
.slot .picked{width:54px}
.slot .addcard{width:54px}

/* כרטיס מצב */
.condcard{
  width:100%;text-align:start;cursor:pointer;
  transition:transform .14s, border-color .2s, box-shadow .2s;
}
.condcard:hover{transform:translateY(-1px)}
.condcard.on{
  border-color:var(--acc);
  box-shadow:var(--bevel), 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent),
             var(--shadow);
}

/* ============================================================
   משימות ועונה
   ============================================================ */
.mission{
  display:flex;gap:11px;align-items:center;
  padding:12px;border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--acc) 7%, var(--surface)), var(--surface) 60%);
  box-shadow:var(--bevel);
}
.mission.done{
  border-color:color-mix(in srgb, var(--good) 50%, transparent);
  background:color-mix(in srgb, var(--good) 8%, var(--surface));
}
.mission .mi{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  color:var(--on-acc);
  background:linear-gradient(160deg, var(--acc-2), var(--acc));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.mission.done .mi{background:linear-gradient(160deg, var(--good), var(--good))}
.mission .mm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mission .mt{font-weight:700;font-size:13.5px}
.mission .md{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.mission .mp{
  flex:none;font-family:var(--f-mono);font-weight:600;font-size:12px;
  color:var(--acc-ink);background:var(--acc-soft);
  padding:3px 8px;border-radius:var(--r-pill);
}
.mission .track{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.mission .track i{display:block;height:100%;background:var(--acc);border-radius:3px}

/* לוח מובילים של העונה */
.ladder{display:flex;flex-direction:column;gap:1px;border-radius:var(--r-md);
  overflow:hidden;border:1px solid var(--line)}
.ladder .lrow{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface);
}
.ladder .lrow.me{background:var(--acc-soft)}
.ladder .rank{
  width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:600;font-size:12px;
  background:var(--surface-2);color:var(--ink-3);
}
.ladder .lrow:nth-child(1) .rank{background:linear-gradient(160deg,#F7D046,#C9971A);color:#2B1D00}
.ladder .lrow:nth-child(2) .rank{background:linear-gradient(160deg,#DCE3EC,#A8B4C4);color:#1B222C}
.ladder .lrow:nth-child(3) .rank{background:linear-gradient(160deg,#E0A46B,#B06F32);color:#2A1503}
.ladder .lname{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.ladder .lpts{font-family:var(--f-mono);font-weight:600;font-size:13px;color:var(--acc-ink)}

/* פס העונה */
.season{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:var(--r-md);
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--acc) 18%, var(--surface)),
    color-mix(in srgb, var(--spark) 12%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
}
.season .st{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}

/* ============================================================
   גלריית זוויות בדף המודעה
   ============================================================ */
.angles{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.angles::-webkit-scrollbar{display:none}
.angle{
  flex:none;width:66px;display:flex;flex-direction:column;gap:4px;
  text-align:center;
}
.angle .af{
  border-radius:9px;overflow:hidden;border:1px solid var(--line);
  background:var(--card-well);aspect-ratio:.78;
}
.angle .af img{width:100%;height:100%;object-fit:cover}
.angle[aria-pressed="true"] .af{
  border-color:var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent);
}
.angle .al{font-size:10.5px;color:var(--ink-3);font-weight:600}

/* ============================================================
   תיקוני פריסה
   ============================================================ */

/* הקלף בגיבור היה גולש מטה ונראה לא ממורכז.
   מרווח סימטרי, בלי הזזה כלפי מטה. */
.hero-well{
  padding:20px 18px 20px;
  align-items:center;
}
.hero-img{
  transform:none;
  width:min(170px, 52%);
}
.hero-body{padding-top:14px}

/* סרגל הניווט חייב להיות מוצק — הוא הדרך היחידה לנוע באתר.
   שכבת זכוכית שקופה מדי על רקע כהה נעלמת. */
.tabbar{
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 26px rgba(0,0,0,.35);
  padding-bottom:calc(7px + env(safe-area-inset-bottom));
}
.topbar{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
}

/* מקום לסרגל ולכפתור הצף בתחתית התוכן */
main{padding-bottom:132px}