/* ============================================================
   Poke-IL — שכבת האופי
   הקהל כאן צעיר, והתחום עצמו משחקי. ממשק "רשמי" מסגיר שהוא
   נבנה על ידי מישהו שלא אוסף קלפים.
   שתי הסדרות הובילו את ההחלטות:
     פוקימון — פוקבול, פוקדקס, צהוב פיקאצ׳ו. עגול, שמן, בוהק.
               תחושה של צעצוע פלסטיק שנעים ללחוץ עליו.
     וואן פיס — ג׳ולי רוג׳ר, פוסטר WANTED, כובע קש. קווי דיו
               עבים, נייר מיושן, חותמות.
   נטען אחרון ודורס את holo.css.
   ============================================================ */

/* ------------------------------------------------------------
   כפתור צעצוע
   מה שהופך כפתור למשהו שרוצים ללחוץ עליו זה עובי: שפה עליונה
   מוארת, קצה תחתון מוצק, ושקיעה אמיתית בלחיצה.
   ------------------------------------------------------------ */
.btn{
  border-radius:20px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:16.5px;
  padding:14px 18px;
  letter-spacing:.01em;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.20),
    0 5px 0 var(--acc-deep),
    0 10px 22px color-mix(in srgb, var(--acc) 40%, transparent);
  transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .12s;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{inset-inline-start:120%}
.btn:active{
  transform:translateY(5px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    0 0 0 var(--acc-deep),
    0 3px 10px color-mix(in srgb, var(--acc) 34%, transparent);
}

/* הברק רץ מעצמו — כפתור סטטי לא מושך את העין */
.btn::after{
  animation:sweepShine 4.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes sweepShine{
  0%, 62%   { inset-inline-start:-60% }
  86%, 100% { inset-inline-start:130% }
}

.btn.ghost{
  border:2px solid var(--line);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    0 4px 0 color-mix(in srgb, var(--line) 80%, var(--bg));
}
.btn.ghost:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.btn.sm{border-radius:14px;font-size:14px;padding:9px 14px;box-shadow:
  inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 var(--acc-deep),
  0 6px 14px color-mix(in srgb, var(--acc) 34%, transparent)}
.btn.sm:active{transform:translateY(3px)}

/* ------------------------------------------------------------
   קישורי פעולה בכותרות
   היו טקסט שקוף שנבלע ברקע. עכשיו כפתור עגול עם מסגרת וברק.
   ------------------------------------------------------------ */
.seclink{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  flex:none;
  padding:7px 14px;
  border-radius:var(--r-pill);
  border:2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  background:var(--acc-soft);
  color:var(--acc-ink);
  font-family:var(--f-display);
  font-weight:600;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 3px 10px color-mix(in srgb, var(--acc) 22%, transparent);
  transition:transform .12s, box-shadow .18s, background .18s;
}
.seclink::after{
  content:'';position:absolute;top:-60%;bottom:-60%;width:42%;
  inset-inline-start:-60%;
  background:linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--acc) 45%, #fff) 50%, transparent);
  transform:skewX(-18deg);
  opacity:.55;
  pointer-events:none;
  animation:sweepShine 5s cubic-bezier(.4,0,.2,1) infinite;
}
.seclink:hover{
  transform:translateY(-1px);
  background:var(--acc);
  color:var(--on-acc);
  border-color:var(--acc);
}
.seclink:active{transform:translateY(1px)}
.sechead{align-items:center}

/* ------------------------------------------------------------
   כותרות עם אופי
   ------------------------------------------------------------ */
.sectitle{
  font-family:var(--f-display);
  font-weight:600;
  font-size:18.5px;
  letter-spacing:-.01em;
}
.h-xl{font-size:29px;font-weight:700}
.h-lg{font-size:22px;font-weight:600}
.eyebrow{
  font-weight:700;
  letter-spacing:.12em;
  color:var(--acc-ink);
  opacity:.9;
}

/* ------------------------------------------------------------
   צ׳יפים — עגולים ושמנים יותר
   ------------------------------------------------------------ */
.chip{
  border-width:2px;
  font-weight:600;
  padding:7px 14px;
  font-size:13.5px;
}
.chip[aria-pressed="true"]{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 3px 0 var(--acc-deep),
    0 6px 14px color-mix(in srgb, var(--acc) 32%, transparent);
}
.chip[aria-pressed="true"]:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* ------------------------------------------------------------
   הכפתור הצף
   ------------------------------------------------------------ */
.fab{
  width:58px;height:58px;
  border-radius:22px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    0 5px 0 var(--acc-deep),
    0 12px 26px color-mix(in srgb, var(--acc) 50%, transparent);
}
.fab:active{
  transform:translateY(5px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),
             0 4px 12px color-mix(in srgb, var(--acc) 40%, transparent);
}
/* טבעת שנושמת סביבו — מושכת את העין לפעולה הראשית */
.fab::after{
  content:'';position:absolute;inset:-6px;border-radius:26px;
  border:2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  animation:fabPulse 2.8s ease-out infinite;
  pointer-events:none;
}
@keyframes fabPulse{
  0%   { transform:scale(.9);  opacity:.8 }
  70%  { transform:scale(1.18);opacity:0 }
  100% { transform:scale(1.18);opacity:0 }
}

/* ------------------------------------------------------------
   כרטיסי הכניסה המהירה — אריחי צעצוע
   ------------------------------------------------------------ */
.quick{
  border-width:2px;
  border-radius:20px;
  padding:15px 14px;
}
.quick:active{transform:translateY(2px) scale(.99)}
.quick .qi{
  width:42px;height:42px;border-radius:14px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    0 3px 0 var(--acc-deep),
    0 6px 14px color-mix(in srgb, var(--acc) 34%, transparent);
}
.quick .qt{font-family:var(--f-display);font-weight:600;font-size:15px}
.quick .qbadge{
  font-family:var(--f-display);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  letter-spacing:.02em;
}

/* ------------------------------------------------------------
   פוקימון — פוקבול וצהוב פיקאצ׳ו
   ------------------------------------------------------------ */
:root[data-game="pokemon"]{
  --ball-red:#EE1515;
  --pika:#FFCB05;
}
/* סימן המותג הוא פוקבול אמיתי: חצי אדום, פס, וכפתור מרכזי */
:root[data-game="pokemon"] .onboard-mark{
  background:
    radial-gradient(circle at 50% 50%,
      #fff 0 13%, #16181d 13% 19%, transparent 19%),
    linear-gradient(180deg,
      var(--ball-red) 0 44%, #16181d 44% 56%, #f6f7fa 56% 100%);
  border:3px solid #16181d;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.35),
    0 14px 36px color-mix(in srgb, var(--ball-red) 45%, transparent);
}
:root[data-game="pokemon"] .onboard-mark svg{display:none}
:root[data-game="pokemon"] .onboard-mark::after{opacity:.35}

/* הניצוץ הצהוב של פיקאצ׳ו על תגי "חדש" */
:root[data-game="pokemon"] .qbadge{
  background:var(--pika);
  color:#2A2000;
  text-shadow:none;
}
:root[data-game="pokemon"] .claim{
  border-width:2px;
}

/* ------------------------------------------------------------
   וואן פיס — דיו, נייר וכובע קש
   ------------------------------------------------------------ */
:root[data-game="onepiece"]{
  --straw:#E3B23C;
  --ink:#1A1210;
}
/* סימן המותג: ג׳ולי רוג׳ר על אדום, בקווי דיו עבים */
:root[data-game="onepiece"] .onboard-mark{
  border:3px solid #1A1210;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.28),
    0 14px 36px color-mix(in srgb, var(--acc) 45%, transparent);
}
/* קווי מתאר עבים יותר — תחושת מנגה */
:root[data-game="onepiece"] .panel,
:root[data-game="onepiece"] .listing,
:root[data-game="onepiece"] .quick,
:root[data-game="onepiece"] .eventcard{
  border-width:2px;
}
/* תגי "חדש" בצהוב כובע הקש */
:root[data-game="onepiece"] .qbadge{
  background:var(--straw);
  color:#2A1D00;
}
/* מרקם נייר עדין על משטחים */
:root[data-game="onepiece"] .panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23p)'/%3E%3C/svg%3E");
}
:root[data-game="onepiece"] .panel{position:relative}

/* ------------------------------------------------------------
   מצבים ריקים — פחות "טופס", יותר הזמנה
   ------------------------------------------------------------ */
.empty{
  border-width:2px;
  border-radius:20px;
  font-size:14.5px;
  padding:30px 18px;
}

/* ------------------------------------------------------------
   תגיות ומדליות
   ------------------------------------------------------------ */
.badge{
  border-radius:7px;
  font-weight:700;
  padding:3px 8px;
  font-size:11px;
}
.levelpill, .trustpill{
  font-family:var(--f-display);
  font-weight:600;
  padding:4px 11px;
  font-size:12px;
}

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

/* ============================================================
   אריחי הכניסה — כל אחד בצבע של מה שהוא מייצג בסדרה
   ============================================================ */
.quick .qi{
  background:linear-gradient(160deg, var(--tile-2, var(--acc-2)), var(--tile, var(--acc)));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    0 3px 0 var(--tile-deep, var(--acc-deep)),
    0 6px 14px color-mix(in srgb, var(--tile, var(--acc)) 40%, transparent);
}
.quick:hover{
  border-color:color-mix(in srgb, var(--tile, var(--acc)) 55%, var(--line));
  box-shadow:var(--bevel), var(--shadow-card),
             0 0 0 1px color-mix(in srgb, var(--tile, var(--acc)) 40%, transparent);
}

/* ---------- פוקימון ----------
   פוקדקס אדום, בינדר כחול, פוקגיר צהוב, תג מכון כתום,
   כרטיס מאמן טורקיז, מרכז פוקימון ורוד־אדום.            */
:root[data-game="pokemon"] .quick[data-kind="scan"]      { --tile:#D8232A; --tile-2:#F2555B; --tile-deep:#8E1216 }
:root[data-game="pokemon"] .quick[data-kind="collection"]{ --tile:#2C5FD0; --tile-2:#5C8DF5; --tile-deep:#1A3D8F }
:root[data-game="pokemon"] .quick[data-kind="chat"]      { --tile:#E0A81B; --tile-2:#FFD24D; --tile-deep:#96690A }
:root[data-game="pokemon"] .quick[data-kind="challenge"] { --tile:#E2711D; --tile-2:#FF9A47; --tile-deep:#94440B }
:root[data-game="pokemon"] .quick[data-kind="missions"]  { --tile:#1E9E96; --tile-2:#42C9C0; --tile-deep:#0E625C }
:root[data-game="pokemon"] .quick[data-kind="events"]    { --tile:#C2306B; --tile-2:#EC5E97; --tile-deep:#7C1943 }
/* אייקון הפוקגיר והתג נקראים טוב יותר על רקע כהה */
:root[data-game="pokemon"] .quick[data-kind="chat"] .qi{ color:#3A2A00 }

/* ---------- וואן פיס ----------
   משקפת פליז, תיבת אוצר זהב, דן דן מושי סגול, פוסטר
   WANTED על נייר, מפת אוצר ירוקה, ספינה כחול־ים.        */
:root[data-game="onepiece"] .quick[data-kind="scan"]      { --tile:#B07423; --tile-2:#DFA246; --tile-deep:#6E4610 }
:root[data-game="onepiece"] .quick[data-kind="collection"]{ --tile:#C8901B; --tile-2:#F0B93F; --tile-deep:#835B08 }
:root[data-game="onepiece"] .quick[data-kind="chat"]      { --tile:#7B4397; --tile-2:#A76BC4; --tile-deep:#4E2560 }
:root[data-game="onepiece"] .quick[data-kind="challenge"] { --tile:#A8905F; --tile-2:#D8C08A; --tile-deep:#6B5730 }
:root[data-game="onepiece"] .quick[data-kind="missions"]  { --tile:#2F7D52; --tile-2:#57B37F; --tile-deep:#194D30 }
:root[data-game="onepiece"] .quick[data-kind="events"]    { --tile:#25577E; --tile-2:#4A88BB; --tile-deep:#123651 }
/* הפוסטר בהיר — האייקון עליו צריך להיות דיו כהה */
:root[data-game="onepiece"] .quick[data-kind="challenge"] .qi{ color:#33270F }

/* ============================================================
   תגית מגמה
   ============================================================ */
.trendchip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:600;font-size:13px;
  font-variant-numeric:tabular-nums;direction:ltr;
}
.trendchip.up   { background:var(--good-bg); color:var(--good) }
.trendchip.down { background:var(--bad-bg);  color:var(--bad) }
.trendchip.flat { background:var(--surface-2); color:var(--ink-3) }
.trendchip svg{flex:none}

/* מגמה קטנה בשורת פריט באוסף */
.trendmini{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:700;direction:ltr;
  font-variant-numeric:tabular-nums;
}
.trendmini.up{color:var(--good)} .trendmini.down{color:var(--bad)}
.trendmini.flat{color:var(--ink-3)}