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

   הכל CSS ו-SVG מוטבע — אין קבצי רקע ואין בקשות רשת נוספות.
   נטען אחרון ולכן דורס את שכבות העיצוב הקודמות.

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

:root[data-theme="light"] body{
  background:#DFF3FD;
}

/* שכבת הסצנה — שמיים, עננים וטפט פוקבולים */
:root[data-theme="light"] body::before{
  content:'';
  display:block;
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  opacity:1; mix-blend-mode:normal;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='7' opacity='.5'%3E%3Ccircle cx='60' cy='55' r='38'/%3E%3Cpath d='M22 55h76'/%3E%3Ccircle cx='60' cy='55' r='12'/%3E%3Ccircle cx='195' cy='170' r='46'/%3E%3Cpath d='M149 170h92'/%3E%3Ccircle cx='195' cy='170' r='14'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat,
    radial-gradient(58px 26px at 14% 10%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(78px 32px at 26% 14%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(64px 26px at 82% 8%,  rgba(255,255,255,.9), transparent 70%),
    radial-gradient(52px 22px at 68% 18%, rgba(255,255,255,.82), transparent 72%),
    linear-gradient(180deg, #86D3F5 0%, #B9E7FB 34%, #DFF3FD 62%, #EAF7E4 100%);
}

/* דשא — פס בתחתית המסך עם קצה גלי */
:root[data-theme="light"] body::after{
  content:'';
  position:fixed; left:0; right:0; bottom:0; height:132px;
  z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='132' viewBox='0 0 420 132' preserveAspectRatio='none'%3E%3Cpath d='M0 32q52-22 105 0t105 0 105 0 105 0v100H0Z' fill='%2379C95C'/%3E%3Cpath d='M0 58q52-20 105 0t105 0 105 0 105 0v74H0Z' fill='%2360B44A'/%3E%3C/svg%3E")
    bottom center / 100% 132px no-repeat;
  opacity:.88;
}

/* התוכן תמיד מעל הסצנה */
:root[data-theme="light"] .shell{ position:relative; z-index:1 }

@media(min-width:520px){
  :root[data-theme="light"] .shell{ background:transparent; box-shadow:none }
}

/* ------------------------------------------------------------
   וואן פיס — אותה סצנה, ים במקום דשא
   ------------------------------------------------------------ */
:root[data-game="onepiece"][data-theme="light"] body{ background:#DCF0FA }

:root[data-game="onepiece"][data-theme="light"] body::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='6' opacity='.45'%3E%3Ccircle cx='60' cy='55' r='34'/%3E%3Cpath d='M46 40l28 30M74 40L46 70'/%3E%3Ccircle cx='195' cy='172' r='40'/%3E%3Cpath d='M178 154l34 36M212 154l-34 36'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat,
    radial-gradient(58px 26px at 14% 10%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(78px 32px at 26% 14%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(64px 26px at 82% 8%,  rgba(255,255,255,.9), transparent 70%),
    radial-gradient(52px 22px at 68% 18%, rgba(255,255,255,.82), transparent 72%),
    linear-gradient(180deg, #7FCDEF 0%, #B6E4F8 34%, #DCF0FA 62%, #CFEAF7 100%);
}
:root[data-game="onepiece"][data-theme="light"] body::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='132' viewBox='0 0 420 132' preserveAspectRatio='none'%3E%3Cpath d='M0 34q52-20 105 0t105 0 105 0 105 0v98H0Z' fill='%234FB3DE'/%3E%3Cpath d='M0 62q52-18 105 0t105 0 105 0 105 0v70H0Z' fill='%232E93C4'/%3E%3C/svg%3E")
    bottom center / 100% 132px no-repeat;
}

/* ------------------------------------------------------------
   המותג — אותיות בסגנון הלוגו של הסדרה
   ------------------------------------------------------------ */
:root[data-theme="light"] .brand{
  font-family:var(--f-display);
  font-weight:700;
  font-size:26px;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:#FFCB05;
  -webkit-text-fill-color:#FFCB05;
  -webkit-text-stroke:2.4px #2A50A8;
  paint-order:stroke fill;
  text-shadow:0 2px 0 #1E3C82, 0 3px 5px rgba(20,40,90,.35);
}
:root[data-game="onepiece"][data-theme="light"] .brand{
  color:#FFD35A; -webkit-text-fill-color:#FFD35A;
  -webkit-text-stroke:2.4px #A32620;
  text-shadow:0 2px 0 #7C1A16, 0 3px 5px rgba(90,20,16,.35);
}

/* סרגל עליון שקוף למחצה, כדי שהשמיים יימשכו עד למעלה */
:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.8);
}

/* ------------------------------------------------------------
   שבבי סינון בצורת פוקבול
   הכיפה הצבעונית היא פס עליון בלבד, והטקסט יושב כולו על
   החלק הלבן. בגרסה קודמת הוא ישב על קו הגבול וחצי ממנו
   נפל על החגורה הכהה.
   ------------------------------------------------------------ */
:root[data-theme="light"] .chips .chip{
  --cap:#E4453C;
  border:2px solid #22303F;
  border-radius:999px;
  padding:14px 16px 8px;
  line-height:1.15;
  font-family:var(--f-display);
  font-weight:700;
  font-size:13.5px;
  color:#16202C;
  white-space:nowrap;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cap) 84%, #fff) 0%,
      var(--cap) 30%,
      #22303F 30%, #22303F 40%,
      #FFFFFF 40%, #EEF3F8 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    0 3px 0 rgba(34,48,63,.28),
    0 5px 12px rgba(20,40,90,.2);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
:root[data-theme="light"] .chips .chip:nth-child(2){ --cap:#4CAF50 }
:root[data-theme="light"] .chips .chip:nth-child(3){ --cap:#3E86F5 }
:root[data-theme="light"] .chips .chip:nth-child(4){ --cap:#F5B22D }
:root[data-theme="light"] .chips .chip:nth-child(5){ --cap:#9B5FD0 }
:root[data-theme="light"] .chips .chip:nth-child(6){ --cap:#E86A2C }
:root[data-theme="light"] .chips .chip:nth-child(7){ --cap:#22B3A6 }

:root[data-theme="light"] .chips .chip[aria-pressed="true"]{
  transform:translateY(-2px) scale(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    0 0 0 3px rgba(255,255,255,.92),
    0 4px 0 rgba(34,48,63,.34),
    0 8px 18px rgba(20,40,90,.28);
}
:root[data-theme="light"] .chips .chip:active{
  transform:translateY(1px) scale(1);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 rgba(34,48,63,.3);
}

/* ------------------------------------------------------------
   כרטיסים — לבנים ומוצקים על גבי הסצנה
   ------------------------------------------------------------ */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .listing,
:root[data-theme="light"] .article,
:root[data-theme="light"] .eventcard,
:root[data-theme="light"] .offercard,
:root[data-theme="light"] .entry,
:root[data-theme="light"] .quick{
  background:#fff;
  border:2px solid rgba(34,48,63,.14);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 rgba(34,48,63,.09),
    0 8px 20px rgba(20,40,90,.16);
}

/* ------------------------------------------------------------
   סרגל תחתון — לשונית פעילה כעיגול צבעוני
   ------------------------------------------------------------ */
:root[data-theme="light"] .tabbar{
  background:rgba(255,255,255,.96);
  border-top:2px solid rgba(34,48,63,.12);
  box-shadow:0 -4px 18px rgba(20,40,90,.16);
}
:root[data-theme="light"] .tab .ti{
  border-radius:50%;
  transition:background .18s, box-shadow .18s, transform .18s cubic-bezier(.2,.8,.3,1);
}
:root[data-theme="light"] .tab[aria-current="page"] .ti{
  background:radial-gradient(circle at 50% 32%, #8BD36B, #4EA83A);
  box-shadow:0 0 0 2px #2F7A22, 0 3px 8px rgba(20,60,20,.35);
}
:root[data-game="onepiece"][data-theme="light"] .tab[aria-current="page"] .ti{
  background:radial-gradient(circle at 50% 32%, #F0776F, #C62B26);
  box-shadow:0 0 0 2px #8E1A16, 0 3px 8px rgba(90,20,16,.35);
}
:root[data-theme="light"] .tab[aria-current="page"] .ti img{
  filter:saturate(1.1) drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
/* הפס העליון של הלשונית הפעילה מיותר כשיש עיגול */
:root[data-theme="light"] .tab[aria-current="page"]::before{ display:none }

/* ------------------------------------------------------------
   כפתור הפעולה הצף
   ------------------------------------------------------------ */
:root[data-theme="light"] .fab{
  border:2px solid #22303F;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    0 4px 0 rgba(34,48,63,.32),
    0 10px 22px rgba(20,40,90,.3);
}

@media (prefers-reduced-motion:reduce){
  :root[data-theme="light"] .chips .chip{ transition:none }
  :root[data-theme="light"] .tab .ti{ transition:none }
}

/* ============================================================
   וואן פיס — סיפון ספינה
   כאן העולם משתנה לגמרי ולא רק מחליף צבע: הרקע הוא עץ,
   הכרטיסים הם קלף ישן, והמסגרות עשויות חבל ומתכת.
   פוקימון נשאר בשמיים ובדשא — שני עולמות, שתי אווירות.
   ============================================================ */
:root[data-game="onepiece"][data-theme="light"]{
  --bg:#3F2A17;
  --bg-2:#33210F;
  --surface:#F1E1BE;          /* קלף ישן */
  --surface-2:#E7D3A8;
  --surface-3:#DCC492;
  --line:#B48A55;
  --line-soft:#CBA875;
  --card-well:#D9C08A;
  --ink:#3A2410;              /* דיו חום על קלף */
  --ink-2:#6A4726;
  --ink-3:#8D6941;
  --acc:#C0281F;
  --acc-2:#DB4437;
  --acc-deep:#7E1A13;
  --acc-soft:#F3DFC4;
  --acc-ink:#8E1F18;
  --on-acc:#FFF3DC;
  --spark:#D9A441;
  --shadow:0 1px 2px rgba(28,16,6,.28), 0 8px 20px rgba(28,16,6,.3);
  --shadow-lift:0 2px 8px rgba(28,16,6,.3), 0 22px 48px rgba(28,16,6,.42);
  --shadow-card:0 12px 30px rgba(28,16,6,.45);
  --bevel:inset 0 1px 0 rgba(255,246,224,.6), inset 0 -1px 0 rgba(60,34,12,.18);
}

/* ---------- קרשי הסיפון ---------- */
:root[data-game="onepiece"][data-theme="light"] body{ background:#3F2A17 }

:root[data-game="onepiece"][data-theme="light"] body::before{
  background:
    /* תפרים בין הקרשים וגרעיני עץ */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Crect width='300' height='150' fill='%234A3119'/%3E%3Cg stroke='%2334200E' stroke-width='3' opacity='.85'%3E%3Cpath d='M0 50h300M0 100h300'/%3E%3Cpath d='M90 0v50M215 50v50M40 100v50M250 100v50'/%3E%3C/g%3E%3Cg stroke='%235A3D20' stroke-width='2' fill='none' opacity='.65'%3E%3Cpath d='M10 20q60 -8 120 0t150 0'/%3E%3Cpath d='M0 34q70 7 140 0t160 0'/%3E%3Cpath d='M20 72q60 -7 120 0t150 0'/%3E%3Cpath d='M0 86q70 6 140 0t160 0'/%3E%3Cpath d='M10 122q60 -7 120 0t150 0'/%3E%3C/g%3E%3Cg fill='%235F4123' opacity='.55'%3E%3Ccircle cx='70' cy='26' r='3'/%3E%3Ccircle cx='235' cy='78' r='3'/%3E%3Ccircle cx='128' cy='128' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 150px repeat,
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.32) 100%);
}
/* אין ים בתחתית — הסיפון ממשיך עד הקצה */
:root[data-game="onepiece"][data-theme="light"] body::after{ display:none }

/* ---------- קלף ישן במקום כרטיס לבן ---------- */
:root[data-game="onepiece"][data-theme="light"] .panel,
:root[data-game="onepiece"][data-theme="light"] .listing,
:root[data-game="onepiece"][data-theme="light"] .article,
:root[data-game="onepiece"][data-theme="light"] .eventcard,
:root[data-game="onepiece"][data-theme="light"] .offercard,
:root[data-game="onepiece"][data-theme="light"] .entry,
:root[data-game="onepiece"][data-theme="light"] .quick,
:root[data-game="onepiece"][data-theme="light"] .empty{
  background:
    /* כתמי גיל — מה שהופך נייר שטוח לקלף ישן */
    radial-gradient(60% 40% at 12% 8%,  rgba(163,120,64,.20), transparent 70%),
    radial-gradient(50% 40% at 88% 92%, rgba(140,98,48,.22),  transparent 70%),
    radial-gradient(40% 30% at 78% 14%, rgba(180,140,86,.16), transparent 70%),
    linear-gradient(180deg, #F5E8C9, #E9D6AC);
  border:2px solid #9C7440;
  box-shadow:
    inset 0 0 0 1px rgba(255,250,236,.55),
    inset 0 2px 6px rgba(120,84,40,.16),
    0 3px 0 rgba(28,16,6,.22),
    0 10px 22px rgba(28,16,6,.4);
}

/* כותרות שיושבות ישירות על העץ — קרם, לא חום */
:root[data-game="onepiece"][data-theme="light"] .sectitle,
:root[data-game="onepiece"][data-theme="light"] main > .stack > .eyebrow{
  color:#F6E3BB;
  text-shadow:0 2px 0 rgba(28,16,6,.55);
}

/* ---------- שלטי עץ במקום שבבי פוקבול ---------- */
:root[data-game="onepiece"][data-theme="light"] .chips .chip{
  --cap:transparent;
  padding:8px 15px;
  border:2px solid #4E3418;
  border-radius:7px;
  color:#F7E7C4;
  font-family:var(--f-display);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg, #7A5228 0 12px, #6E4922 12px 24px);
  box-shadow:
    inset 0 1px 0 rgba(255,232,196,.35),
    0 3px 0 #3B2611,
    0 6px 14px rgba(20,10,4,.45);
  text-shadow:0 1px 0 rgba(28,16,6,.7);
}
:root[data-game="onepiece"][data-theme="light"] .chips .chip[aria-pressed="true"]{
  color:#FFF6E2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, #A8331F 0 12px, #962C1A 12px 24px);
  box-shadow:
    inset 0 1px 0 rgba(255,232,196,.45),
    0 0 0 2px #D9A441,
    0 4px 0 #5E1B10,
    0 8px 18px rgba(20,10,4,.5);
}

/* ---------- סרגלים מעץ ---------- */
:root[data-game="onepiece"][data-theme="light"] .topbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
    repeating-linear-gradient(90deg, #6B4722 0 14px, #5F3F1E 14px 28px);
  border-bottom:3px solid #3B2611;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-game="onepiece"][data-theme="light"] .tabbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.24)),
    repeating-linear-gradient(90deg, #6B4722 0 14px, #5F3F1E 14px 28px);
  border-top:3px solid #3B2611;
  box-shadow:0 -6px 20px rgba(20,10,4,.5);
}
:root[data-game="onepiece"][data-theme="light"] .tab{ color:#D9C09A }
:root[data-game="onepiece"][data-theme="light"] .tab[aria-current="page"]{ color:#FFE9BE }
:root[data-game="onepiece"][data-theme="light"] .tab[aria-current="page"] .ti{
  background:radial-gradient(circle at 50% 32%, #E8BC5A, #B4801F);
  box-shadow:0 0 0 2px #3B2611, 0 3px 8px rgba(20,10,4,.6);
}

/* שדות חיפוש על קלף */
:root[data-game="onepiece"][data-theme="light"] .field,
:root[data-game="onepiece"][data-theme="light"] .inp{
  background:linear-gradient(180deg, #F5E8C9, #EADAB4);
  border:2px solid #9C7440;
  color:var(--ink);
  box-shadow:inset 0 2px 5px rgba(120,84,40,.22);
}
:root[data-game="onepiece"][data-theme="light"] .field input::placeholder{ color:#9A7749 }

/* המותג בסגנון חרוט על עץ */
:root[data-game="onepiece"][data-theme="light"] .brand{
  color:#F2D89B; -webkit-text-fill-color:#F2D89B;
  -webkit-text-stroke:2.4px #3B2611;
  text-shadow:0 2px 0 #24170A, 0 3px 6px rgba(0,0,0,.5);
}
:root[data-game="onepiece"][data-theme="light"] .beta{
  background:rgba(255,240,210,.16);
  border-color:#8A6231; color:#F0DDB4;
}

/* טקסט שיושב ישירות על העץ — שמות ומחירים במדפי הקלפים.
   בחום כהה על עץ כהה הוא נעלם. */
:root[data-game="onepiece"][data-theme="light"] .railcard .nm{
  color:#E8D4AE; text-shadow:0 1px 2px rgba(20,10,4,.6);
}
:root[data-game="onepiece"][data-theme="light"] .railcard .pr{
  color:#FFE9BE; text-shadow:0 1px 2px rgba(20,10,4,.7);
}
:root[data-game="onepiece"][data-theme="light"] .gcard .nm{
  color:#E8D4AE; text-shadow:0 1px 2px rgba(20,10,4,.6);
}
:root[data-game="onepiece"][data-theme="light"] .gcard .pr{
  color:#FFE9BE; text-shadow:0 1px 2px rgba(20,10,4,.7);
}
/* "לחיפוש" וכפתורי קישור בראש מקטע */
:root[data-game="onepiece"][data-theme="light"] .seclink{
  background:linear-gradient(180deg, #F5E8C9, #E3CFA4);
  border:2px solid #8A6231;
  color:#4A2F12;
}

/* ------------------------------------------------------------
   תיקון קריאות בעולם העץ
   --bg הפך לעץ כהה, אבל --ink נשאר חום כהה כי הוא נועד לקלף.
   כל משטח שנצבע ישירות ב---bg קיבל טקסט חום על חום ונעלם.
   הפתרון הוא לא להבהיר את הדיו אלא להפוך את המשטח לקלף —
   זה גם נכון יותר: כתבה אמורה להיות על נייר, לא על סיפון.
   ------------------------------------------------------------ */
:root[data-game="onepiece"][data-theme="light"] .sheet{
  background:
    radial-gradient(60% 40% at 12% 6%,  rgba(163,120,64,.16), transparent 70%),
    radial-gradient(50% 40% at 88% 94%, rgba(140,98,48,.18),  transparent 70%),
    linear-gradient(180deg, #F5E8C9, #EADAB4);
  border:2px solid #8A6231;
  border-bottom:0;
}
:root[data-game="onepiece"][data-theme="light"] .sheet-head{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.20)),
    repeating-linear-gradient(90deg, #6B4722 0 14px, #5F3F1E 14px 28px);
  border-bottom:3px solid #3B2611;
}
:root[data-game="onepiece"][data-theme="light"] .sheet-title{
  color:#F6E3BB; text-shadow:0 1px 0 rgba(28,16,6,.7);
}
:root[data-game="onepiece"][data-theme="light"] .grip{ background:#C69A5C }
:root[data-game="onepiece"][data-theme="light"] .sheet-foot{
  background:linear-gradient(180deg, #EADAB4, #DCC79A);
  border-top:2px solid #9C7440;
}
/* כרטיס בתוך גיליון כבר יושב על קלף — מסגרת בלבד, בלי רקע כפול */
:root[data-game="onepiece"][data-theme="light"] .sheet-body .panel{
  background:linear-gradient(180deg, #FBF3DE, #F1E3C2);
}

/* הודעה קופצת — היה דיו כהה על טקסט בצבע הרקע, שניהם כהים */
:root[data-game="onepiece"][data-theme="light"] .toast{
  background:#2E1D0C;
  color:#F6E3BB;
  border:2px solid #8A6231;
}

/* כפתורי אייקון בסרגל העליון, על עץ */
:root[data-game="onepiece"][data-theme="light"] .iconbtn{
  background:rgba(255,240,210,.14);
  border:2px solid #8A6231;
  color:#F0DDB4;
}