/* ============================================================
   games_site — Hub Screens  ·  Redesign v3
   זירה · כישורים · פרימיום · תאוריה · אולפן המילים
   נטען אחרי screens.css.
   ============================================================ */

.hb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ============================================================
   כרטיס משחק בזירה — זוהר פינתי מתחלף לפי המיקום ברשת
   ============================================================ */
.hb-card{
  position:relative; overflow:hidden;
  padding:20px 13px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); cursor:pointer;
  font-family:inherit; text-align:center; color:var(--text);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.hb-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glow-primary); opacity:.55;
  transition:opacity .3s var(--ease);
}
/* ארבע וריאציות זוהר שמתחלפות במחזוריות — הרשת לא נראית
   מונוטונית גם כשיש בה 11 כרטיסים */
.hb-card:nth-child(4n+2)::before{ background:var(--glow-gold); }
.hb-card:nth-child(4n+3)::before{ background:var(--glow-purple); }
.hb-card:nth-child(4n+4)::before{ background:var(--glow-green); }
.hb-card:hover{ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.30); }
.hb-card:hover::before{ opacity:1; }
.hb-card:active{ transform:scale(.97); box-shadow:var(--shadow); }

.hb-card.is-soon{ opacity:.55; }
.hb-card.is-soon::before{ opacity:.2; }

.hb-card-ic{
  font-size:32px; display:block; margin-bottom:9px;
  filter:drop-shadow(0 5px 12px rgba(13,21,38,.16));
}
.hb-card-t{ font-size:14.5px; font-weight:700; display:block; letter-spacing:-.2px; }
.hb-card-s{ font-size:11.5px; color:var(--text-dim); margin-top:4px; display:block; line-height:1.45; font-weight:400; }

.hb-card-tag{
  position:absolute; top:9px; inset-inline-end:9px; z-index:1;
  font-size:9.5px; font-weight:800; padding:4px 8px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
}
.hb-card-tag.soon{ background:rgba(100,116,139,.16); }
.hb-card-tag.new{
  background:var(--grad-green); color:#fff; border-color:transparent;
  box-shadow:0 3px 10px rgba(22,163,74,.36);
}

/* ============================================================
   בורר לשוניות — פקד מקטעים
   ============================================================ */
.hb-tabs{
  display:flex; gap:4px; padding:5px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.hb-tab{
  flex:1; padding:11px; border:none; border-radius:11px; cursor:pointer;
  background:transparent; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:box-shadow .2s var(--ease), transform .14s var(--ease);
}
.hb-tab:active{ transform:scale(.97); }
.hb-tab.is-on{
  background:var(--surface); color:var(--indigo-ink);
  font-weight:700; box-shadow:var(--shadow);
}

/* ============================================================
   עץ הכישורים
   ============================================================ */
.sk-head{
  padding:22px 18px; margin-bottom:18px; text-align:center;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(34,197,94,.14),rgba(21,128,61,.04));
  border:1px solid rgba(22,163,74,.30);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden; isolation:isolate;
}
.sk-head::after{
  content:""; position:absolute; inset-inline-end:-40px; top:-50px;
  width:150px; height:150px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(34,197,94,.24),transparent 68%);
}
.sk-head-ic{ font-size:38px; margin-bottom:8px; filter:drop-shadow(0 5px 14px rgba(22,163,74,.32)); }
.sk-head h2{ margin:0 0 5px; font-size:20px; font-weight:800; letter-spacing:-.4px; }
.sk-head p{ margin:0; font-size:13px; color:var(--text-dim); }
.sk-bal{ display:flex; justify-content:center; gap:9px; margin-top:14px; flex-wrap:wrap; }

.sk-tier{ margin-bottom:22px; }
.sk-tier-t{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:13px; font-weight:800; color:var(--text-dim); letter-spacing:-.2px;
}
.sk-tier-t::after{ content:""; flex:1; height:1px; background:var(--border); }

.sk-node{
  display:flex; align-items:center; gap:13px;
  width:100%; padding:16px 15px; margin-bottom:11px;
  border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border);
  box-shadow:var(--shadow); color:var(--text);
  font-family:inherit; text-align:start;
  transition:transform .16s var(--ease), box-shadow .24s var(--ease), opacity .2s var(--ease);
}
.sk-node:hover{ box-shadow:var(--shadow-md); }
.sk-node:active{ transform:scale(.985); }
.sk-node.is-owned{
  background:linear-gradient(150deg,rgba(34,197,94,.11),transparent 70%);
  border-color:rgba(22,163,74,.44);
}
.sk-node.is-locked{ opacity:.5; cursor:not-allowed; box-shadow:none; }

.sk-node-ic{
  width:48px; height:48px; flex:0 0 48px;
  display:flex; align-items:center; justify-content:center;
  font-size:23px; border-radius:16px;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); box-shadow:var(--shadow-inset);
}
.sk-node.is-owned .sk-node-ic{
  background:var(--grad-green); border-color:transparent;
  box-shadow:0 5px 16px rgba(22,163,74,.36);
}
.sk-node-b{ flex:1; min-width:0; }
.sk-node-t{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.sk-node-s{ display:block; font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.45; }
.sk-node-p{
  flex:0 0 auto; font-size:12.5px; font-weight:800;
  padding:7px 12px; border-radius:var(--radius-pill);
  background:linear-gradient(135deg,rgba(251,191,36,.20),rgba(180,83,9,.08));
  border:1px solid rgba(245,158,11,.36); color:var(--gold-ink); white-space:nowrap;
}
.sk-node.is-owned .sk-node-p{
  background:rgba(22,163,74,.14); border-color:rgba(22,163,74,.32); color:var(--green-ink);
}

/* ============================================================
   חנות
   ============================================================ */
.sh-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.sh-item{
  position:relative; padding:15px 7px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border);
  box-shadow:var(--shadow); color:var(--text);
  font-family:inherit; text-align:center;
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.sh-item:hover{ box-shadow:var(--shadow-md); }
.sh-item:active{ transform:scale(.96); }
.sh-item.is-active{
  border-color:var(--indigo-l);
  background:linear-gradient(150deg,rgba(99,102,241,.12),transparent 70%);
  box-shadow:var(--shadow-glow);
}
.sh-item.is-owned .sh-price{ color:var(--indigo-l); }
.sh-emoji{ font-size:32px; display:block; margin-bottom:6px; filter:drop-shadow(0 4px 10px rgba(13,21,38,.14)); }
.sh-name{ font-size:11px; font-weight:600; color:var(--text-dim); display:block; }
.sh-price{ font-size:11.5px; font-weight:800; color:var(--gold-ink); margin-top:4px; display:block; }
.sh-badge{ position:absolute; top:6px; inset-inline-end:6px; font-size:12px; }

/* ============================================================
   פרימיום
   ============================================================ */
.pm-hero{
  padding:30px 20px; margin-bottom:20px; text-align:center;
  border-radius:var(--radius-lg);
  background:var(--grad-gold);
  color:#fff; box-shadow:var(--shadow-gold), var(--shadow-md);
  position:relative; overflow:hidden; isolation:isolate;
}
.pm-hero::after{
  content:""; position:absolute; inset-inline-start:-56px; bottom:-64px;
  width:180px; height:180px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 68%);
}
/* ברק אלכסוני איטי — נותן תחושת חומר יקר בלי אנימציה רועשת */
.pm-hero::before{
  content:""; position:absolute; inset:-40% -60%; z-index:-1;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  animation:pmShine 6s var(--ease) infinite;
}
@keyframes pmShine{
  0%,72%{ transform:translateX(-46%); }
  100%  { transform:translateX(46%); }
}
.pm-crown{ font-size:50px; margin-bottom:10px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.28)); }
.pm-hero h2{ margin:0 0 6px; font-size:25px; font-weight:800; letter-spacing:-.5px; }
.pm-hero p{ margin:0; font-size:13.5px; opacity:.94; font-weight:400; line-height:1.6; }
.pm-status{
  display:inline-block; margin-top:15px;
  font-size:12.5px; font-weight:700; padding:8px 18px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.pm-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:20px; }
.pm-stat{
  padding:17px 7px; border-radius:var(--radius); text-align:center;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.pm-stat .n{ font-size:22px; font-weight:800; letter-spacing:-.5px; }
.pm-stat .l{ font-size:11px; color:var(--text-dim); margin-top:3px; }

.pm-benefits{ margin-bottom:20px; }
.pm-benefit{
  display:flex; align-items:flex-start; gap:13px;
  padding:15px 16px; margin-bottom:10px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.pm-benefit-ic{
  font-size:21px; flex:0 0 auto;
  filter:drop-shadow(0 3px 8px rgba(13,21,38,.14));
}
.pm-benefit-t{ font-size:14.5px; font-weight:700; display:block; letter-spacing:-.2px; }
.pm-benefit-s{ font-size:12.5px; color:var(--text-dim); margin-top:3px; display:block; line-height:1.5; }

.pm-prices{
  padding:17px 16px; margin-bottom:18px; border-radius:var(--radius);
  background:var(--surface-2); border:1px dashed var(--border);
}
.pm-prices h3{ margin:0 0 11px; font-size:14px; font-weight:800; }
.pm-price-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; font-size:13px; border-bottom:1px solid var(--border);
}
.pm-price-row:last-child{ border-bottom:none; }
.pm-price-row span:last-child{ font-weight:800; color:var(--gold-ink); }

/* ============================================================
   B2B — רכישה כמותית
   ------------------------------------------------------------
   נפתח מתוך מסך הפרימיום. הכרטיס סגור כברירת מחדל כדי לא
   להסיח מהרכישה האישית, ולכן ה-toggle הוא האלמנט הבולט.
   מונפשים רק transform/box-shadow — צבעים נגזרי-טוקן קופאים
   ב-Chrome באמצע מעבר (הכלל המתועד בפרויקט).
   ============================================================ */
.bk{ margin-top:22px; }
.bk-toggle{
  display:flex; align-items:center; gap:13px;
  width:100%; padding:16px 15px;
  border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); font-family:inherit; text-align:start; color:var(--text);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.bk-toggle:hover{ box-shadow:var(--shadow-md); }
.bk-toggle:active{ transform:scale(.985); }
.bk-toggle-ic{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; border-radius:15px;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); box-shadow:var(--shadow-inset);
}
.bk-toggle-b{ flex:1; min-width:0; }
.bk-toggle-t{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.bk-toggle-s{ display:block; font-size:12px; color:var(--gold-ink); margin-top:3px; font-weight:600; }
.bk-toggle-go{
  flex:0 0 auto; font-size:20px; color:var(--text-dim);
  transform:rotate(90deg); transition:transform .22s var(--ease);
}
.bk-toggle[aria-expanded="true"] .bk-toggle-go{ transform:rotate(-90deg); }

.bk-body{
  margin-top:11px; padding:18px 16px 16px;
  border-radius:var(--radius);
  background:var(--surface-2); border:1px dashed var(--border);
}
.bk-field{ display:block; margin-bottom:14px; }
.bk-label{
  display:block; font-size:12.5px; font-weight:700; margin-bottom:7px;
}
.bk-label small{ font-weight:400; color:var(--text-dim); }
.bk-input{
  width:100%; padding:13px 14px;
  background:var(--surface); color:var(--text);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14px; font-weight:600;
  outline:none; box-shadow:var(--shadow-inset);
}
.bk-input::placeholder{ color:var(--text-dim); font-weight:400; }
.bk-input:focus{ border-color:var(--brand); }
.bk-hint{
  display:block; font-size:11.5px; color:var(--text-dim);
  margin-top:6px; line-height:1.55; word-break:break-word;
}

.bk-quote{
  padding:14px 15px; margin-bottom:16px;
  border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.bk-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; font-size:13px; border-bottom:1px solid var(--border);
}
.bk-row:last-child{ border-bottom:none; }
.bk-was{ color:var(--text-dim); font-weight:400; margin-inline-end:5px; }
/* -ink ולא --green: הגוון הרווי נופל בניגודיות על משטח כהה */
.bk-promo span:last-child{ color:var(--green-ink); font-weight:800; }
.bk-total{ font-size:14.5px; font-weight:700; }
.bk-total b{ font-size:17px; color:var(--gold-ink); letter-spacing:-.4px; }
.bk-save{
  margin-top:9px; padding:7px 12px; border-radius:var(--radius-pill);
  display:inline-block; font-size:11.5px; font-weight:800;
  background:rgba(22,163,74,.14); color:var(--green-ink);
}
.bk-note{
  margin:12px 0 0; font-size:11.5px; color:var(--text-dim); line-height:1.6;
}

/* כרטיס בעל הרישיון הכמותי, בראש מסך ה-Pro.
   ⚠ מסגרת ולא מילוי מלא: הוא יושב מעל מסלולי הרכישה, ואסור לו
   להתחרות ויזואלית עם כפתור הרכישה המוזהב — הוא ניווט, לא מכירה. */
.pm-owner{
  margin:0 0 16px; padding:15px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.pm-owner-h{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pm-owner-ic{
  width:42px; height:42px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; border-radius:14px;
  background:var(--surface-3); border:1px solid var(--border);
}
.pm-owner-h b{ display:block; font-size:14px; letter-spacing:-.2px; }
.pm-owner-h small{ display:block; margin-top:3px; font-size:11.5px; color:var(--text-dim); }

/* תשובת בדיקת הקידומת. ⚠ אותו אלמנט לשתי התוצאות — premium.js
   מחליף מחלקה, ולכן שתיהן חייבות להגדיר את הצבע במפורש. */
.bk-msg{
  display:block; margin-top:7px; font-size:12px; font-weight:700;
  line-height:1.5; word-break:break-word;
}
.bk-msg-ok{  color:var(--green-ink); }
.bk-msg-bad{ color:var(--red-ink); }

/* ============================================================
   מסך המושבים  (/seats)
   ------------------------------------------------------------
   ⚠⚠ המסך מציג סיסמאות של כיתה שלמה, ולכן שני כללים כאן
   אינם קוסמטיים:
     · ‏.rs-p ב-monospace — ‏l מול 1 ו-O מול 0 חייבים להיבדל
       כשמישהו מקליד אותם מהמסך. ‏bulk_api.py כבר מוציא את
       התווים הדומים מהאלפבית, וזו השכבה השנייה.
     · ה-@media print בסוף — בלי זה ההדפסה יוצאת עם תפריט,
       כפתורים ובאנרים, ומחלקים אותה ככה בכיתה.
   ============================================================ */
.rs-hero{
  text-align:center; padding:22px 16px 18px;
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.rs-hero-ic{ font-size:34px; line-height:1; }
.rs-hero h2{ margin:9px 0 4px; font-size:19px; letter-spacing:-.4px; }
.rs-hero p{ margin:0; font-size:12.5px; color:var(--text-dim); }

.rs-state{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 0; padding:13px 14px;
  border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; line-height:1.55;
}
.rs-state:empty{ display:none; padding:0; margin:0; }
.rs-state-busy{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
}
.rs-state-ok{
  background:color-mix(in srgb, var(--green-ink) 12%, transparent);
  color:var(--green-ink);
}
.rs-state-warn{
  background:color-mix(in srgb, var(--gold-ink) 14%, transparent);
  color:var(--gold-ink);
}
.rs-state-bad{
  background:color-mix(in srgb, var(--red-ink) 12%, transparent);
  color:var(--red-ink);
}

.rs-spinner{
  flex:0 0 auto; width:15px; height:15px; margin-top:2px;
  border:2px solid var(--border);
  border-top-color:var(--brand); border-radius:50%;
  animation:rs-spin .7s linear infinite;
}
@keyframes rs-spin{ to{ transform:rotate(360deg); } }
/* ⚠ מנהל שמעדיף פחות תנועה עדיין צריך לדעת שמשהו רץ —
   מחליפים סיבוב בהבהוב ולא מבטלים את הסימן. */
@media (prefers-reduced-motion:reduce){
  .rs-spinner{ animation:rs-pulse 1.4s ease-in-out infinite; }
  @keyframes rs-pulse{ 50%{ opacity:.35; } }
}

.rs-progress{ margin-top:12px; }
.rs-bar{
  height:9px; border-radius:var(--radius-pill);
  background:var(--border); overflow:hidden;
}
.rs-bar-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--brand-l),var(--brand));
  transition:width .5s var(--ease);
}
.rs-progress-t{
  display:block; margin-top:7px; font-size:11.5px;
  font-weight:700; color:var(--text-dim); text-align:center;
}

.rs-form{
  margin-top:16px; padding:16px 15px;
  border-radius:var(--radius);
  background:var(--surface-2); border:1px dashed var(--border);
}
.rs-hint{ margin:0 0 13px; font-size:12.5px; color:var(--text-dim); line-height:1.6; }
.rs-warn{
  margin:0 0 13px; padding:11px 13px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--gold-ink) 14%, transparent);
  color:var(--gold-ink); font-size:12.5px; font-weight:700; line-height:1.55;
}

.rs-result{ margin-top:18px; }
.rs-notice{
  margin:0 0 13px; padding:12px 14px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--red-ink) 10%, transparent);
  color:var(--red-ink); font-size:12.5px; font-weight:700; line-height:1.6;
}
.rs-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
/* ⚠ ‏width:auto חובה. ל-.gs-btn יש width:100%, ועם flex-basis:auto
   הוא נלקח כבסיס — שני כפתורים של 100% נשברים לשתי שורות גם
   כשיש מקום בשפע. ‏flex:1 1 0 מחלק את הרוחב בפועל. */
.rs-actions .gs-btn{ flex:1 1 0; width:auto; min-width:150px; }

.rs-sheet{
  border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); overflow:hidden;
}
.rs-sheet-head{
  padding:13px 15px; border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.rs-sheet-head b{ display:block; font-size:13.5px; }
.rs-sheet-head span{ display:block; margin-top:3px; font-size:11.5px; color:var(--text-dim); }

/* ⚠ הטבלה גולשת אופקית בתוך עצמה ולא דוחפת את הדף. 50 שורות
   עם כתובת דוא"ל מלאה אינן נכנסות לרוחב מסך טלפון. */
.rs-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rs-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rs-table th, .rs-table td{
  padding:9px 11px; text-align:start; border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
.rs-table th{
  font-size:11px; font-weight:800; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.4px;
  background:var(--surface-2); position:sticky; top:0;
}
.rs-table tr:last-child td{ border-bottom:none; }
.rs-table tbody tr:nth-child(even){ background:var(--surface-2); }
.rs-n{ color:var(--text-dim); font-weight:700; width:1%; }
.rs-u{ font-weight:800; direction:ltr; }
.rs-e{ direction:ltr; color:var(--text-dim); font-size:11.5px; }
.rs-p{
  direction:ltr; font-weight:800; letter-spacing:.6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ============================================================
   הדפסה — הדף היחיד שיוצא הוא הרשימה
   ------------------------------------------------------------
   ⚠⚠ ‏body.rs-printing מתווסף ב-seats.js רגע לפני window.print
   ומוסר אחריו. בלי המחלקה הזו הכלל היה חל על כל האתר וגם
   הדפסה של מסך אחר הייתה יוצאת ריקה.
   ============================================================ */
@media print{
  /* ⚠⚠ ‏visibility ולא display. ‏#rsSheet יושב עמוק בתוך מכל
     המסך של הראוטר, ו-display:none על אב מסתיר אותו גם אם
     הצאצא מוגדר display:revert — ההדפסה הייתה יוצאת דף ריק.
     ‏visibility עובר בירושה **וניתן לביטול** על צאצא, וזה
     בדיוק ההבדל שמאפשר את הדפוס הזה. */
  body.rs-printing *{ visibility:hidden !important; }
  body.rs-printing #rsSheet,
  body.rs-printing #rsSheet *{ visibility:visible !important; }
  body.rs-printing #rsSheet{
    position:absolute; inset-inline-start:0; top:0; width:100%;
    margin:0; border:none; box-shadow:none;
    background:#fff; color:#000;
  }
  body.rs-printing .rs-table th{
    background:#fff; color:#000; position:static;
    border-bottom:1.5px solid #000;
  }
  body.rs-printing .rs-table td{ border-bottom:1px solid #ccc; }
  body.rs-printing .rs-table tbody tr:nth-child(even){ background:#f4f4f4; }
  /* ⚠ ‏50 שורות אינן נכנסות לעמוד אחד — בלי זה שורה נחתכת
     באמצע בין עמודים, וחצי סיסמה מודפסת בכל צד. */
  body.rs-printing .rs-table tr{ break-inside:avoid; page-break-inside:avoid; }
  body.rs-printing .rs-table-wrap{ overflow:visible; }
}

/* ============================================================
   אולפן המילים
   ============================================================ */
.ws-list{
  display:flex; align-items:center; gap:13px;
  width:100%; padding:16px 15px; margin-bottom:11px;
  border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); font-family:inherit; text-align:start; color:var(--text);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.ws-list:hover{ box-shadow:var(--shadow-md); }
.ws-list:active{ transform:scale(.985); }
.ws-list-ic{
  width:46px; height:46px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; border-radius:15px;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); box-shadow:var(--shadow-inset);
}
.ws-list-b{ flex:1; min-width:0; }
.ws-list-t{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.ws-list-s{ display:block; font-size:12px; color:var(--text-dim); margin-top:3px; }
.ws-del{
  flex:0 0 auto; width:34px; height:34px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--red); font-size:14px; cursor:pointer; font-family:inherit;
  transition:transform .14s var(--ease);
}
.ws-del:active{ transform:scale(.9); background:rgba(220,38,38,.12); }

.ws-editor{ margin-top:16px; }
.ws-row{ display:flex; gap:9px; margin-bottom:9px; align-items:center; }
.ws-inp{
  flex:1; min-width:0; padding:13px 14px;
  background:var(--surface-2); color:var(--text);
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:inherit; font-size:16px;
  transition:box-shadow .18s var(--ease);
}
.ws-inp:focus{
  outline:none; border-color:var(--indigo-l);
  background:var(--surface); box-shadow:var(--ring);
}
.ws-rm{
  flex:0 0 36px; width:36px; height:36px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); font-size:15px; cursor:pointer; font-family:inherit;
  transition:transform .14s var(--ease);
}
.ws-rm:active{ transform:scale(.9); }
.ws-count{ font-size:12px; color:var(--text-dim); text-align:center; margin-top:10px; }

/* ============================================================
   הערת תחתית
   ============================================================ */
.hb-note{
  margin-top:16px; padding:13px 15px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-dim); line-height:1.6; text-align:center;
}

@media (min-width:768px){
  .hb-grid{ grid-template-columns:repeat(3,1fr); gap:15px; }
  .sh-grid{ grid-template-columns:repeat(5,1fr); }
}

/* ============================================================
   פורטל המורה  ·  /teacher
   הומר מ-Apps/Games/TeacherDashboard.html שהיה תבנית ב-GAS
   ============================================================ */
.td{ padding:16px 14px 30px; }
.td-head{ margin-bottom:16px; text-align:center; }
.td-head h2{ margin:0 0 4px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
.td-head p{ margin:0; font-size:13px; color:var(--text-dim); }

.td-bar{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.td-chip{
  padding:7px 13px; border-radius:999px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border-soft);
  color:var(--text-dim); font-family:inherit; font-size:12px; font-weight:700;
}
.td-chip:active{ transform:scale(.96); }

.td-classes{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.td-class{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:15px 14px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); font-family:inherit; text-align:start; color:var(--text);
}
.td-class:active{ transform:scale(.985); }
.td-class-ic{ font-size:24px; flex:0 0 auto; }
.td-class-b{ flex:1; min-width:0; }
.td-class-t{ display:block; font-size:15px; font-weight:700; }
.td-class-s{ display:block; margin-top:3px; font-size:12px; color:var(--text-dim); }
.td-class-go{ font-size:17px; color:var(--text-dim); }

.td-sec{ margin:22px 0 10px; font-size:13px; font-weight:800; letter-spacing:-.2px; }
.td-sec small{ color:var(--text-dim); font-weight:700; }

.td-weak{ display:flex; flex-direction:column; gap:6px; }
.td-weak-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13.5px;
}
.td-weak-n{
  min-width:26px; padding:2px 9px; border-radius:999px; text-align:center;
  background:var(--danger,#dc2626); color:#fff; font-size:11.5px; font-weight:800;
}

.td-students{ display:flex; flex-direction:column; gap:6px; }
.td-student{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border-soft); font-size:13.5px;
}
.td-student-m{ font-size:11.5px; color:var(--text-dim); font-weight:700; }

.td-post{ display:flex; flex-direction:column; gap:9px; }
.td-text, .td-input{
  width:100%; padding:13px 15px; border-radius:13px; resize:vertical;
  background:var(--surface); border:1.5px solid var(--border); color:var(--text);
  font-family:inherit; font-size:15px; line-height:1.65;
}
.td-text:focus, .td-input:focus{ outline:none; border-color:var(--brand,#4f46e5); }

.td-feed{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.td-msg{
  padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.td-msg-t{ font-size:13.5px; line-height:1.6; }
.td-msg-d{ margin-top:5px; font-size:11px; color:var(--text-dim); }

.td-create{
  margin-top:20px; padding:16px; border-radius:var(--radius);
  background:var(--surface-2); border:1px dashed var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.td-create-t{ font-size:13px; font-weight:800; }

.td-empty{ text-align:center; padding:26px 10px 6px; }
.td-empty-ic{ font-size:46px; }
.td-empty h3{ margin:10px 0 6px; font-size:17px; font-weight:800; }
.td-empty p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.65; }

.td-note{
  padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:12.5px; color:var(--text-dim);
}

/* ============================================================
   לוח הניהול  ·  /admin
   הומר מ-Apps/Games/AdminDashboard.html
   ============================================================ */
.am{ padding:16px 14px 30px; }
.am-head{ margin-bottom:16px; text-align:center; }
.am-head h2{ margin:0 0 4px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
.am-head p{ margin:0; font-size:13px; color:var(--text-dim); }

.am-lock{
  max-width:340px; margin:24px auto 0; padding:26px 20px; text-align:center;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.am-lock-ic{ font-size:44px; }
.am-lock h3{ margin:10px 0 6px; font-size:18px; font-weight:800; }
.am-lock p{ margin:0 0 16px; font-size:13px; color:var(--text-dim); }
.am-pin{
  width:100%; padding:14px; border-radius:13px; text-align:center;
  background:var(--surface-2); border:1.5px solid var(--border); color:var(--text);
  font-family:inherit; font-size:22px; font-weight:800; letter-spacing:.4em; direction:ltr;
}
.am-pin:focus{ outline:none; border-color:var(--brand,#4f46e5); }
.am-lock .gs-btn{ width:100%; margin-top:12px; }
.am-err{ margin-top:12px; font-size:13px; font-weight:700; color:var(--danger,#dc2626); }

.am-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.am-tab{
  padding:8px 13px; border-radius:999px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border-soft);
  color:var(--text-dim); font-family:inherit; font-size:12.5px; font-weight:700;
}
.am-tab.is-on{ background:var(--brand,#4f46e5); color:#fff; border-color:transparent; }
.am-tab.is-lock{ margin-inline-start:auto; }

.am-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.am-box{
  padding:16px 10px; border-radius:14px; text-align:center;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.am-box .n{ font-size:24px; font-weight:800; letter-spacing:-.6px; }
.am-box .l{ margin-top:3px; font-size:11.5px; color:var(--text-dim); font-weight:600; }

.am-sec{ margin:22px 0 10px; font-size:13px; font-weight:800; }
.am-rows{ display:flex; flex-direction:column; gap:6px; }
.am-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border-soft); font-size:13.5px;
}

.am-find{ display:flex; gap:8px; margin:14px 0; }
.am-input{
  flex:1; min-width:0; padding:13px 15px; border-radius:13px;
  background:var(--surface); border:1.5px solid var(--border); color:var(--text);
  font-family:inherit; font-size:15px;
}
.am-input:focus{ outline:none; border-color:var(--brand,#4f46e5); }

.am-user{
  padding:16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
}
.am-user-h{ font-size:16px; font-weight:800; }
.am-user-e{ margin:3px 0 12px; font-size:12.5px; color:var(--text-dim); }
.am-user-a{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

.am-reports{ display:flex; flex-direction:column; gap:10px; }
.am-report{
  padding:14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border-soft);
}
.am-report-h{
  display:flex; justify-content:space-between; gap:10px; margin-bottom:7px;
  font-size:11.5px; font-weight:700; color:var(--text-dim);
}
.am-report-t{ font-size:13.5px; line-height:1.6; }
.am-report-w{ margin-top:5px; font-size:12px; color:var(--text-dim); }
.am-report-a{ display:flex; gap:8px; margin-top:12px; }

.am-btn{
  padding:9px 14px; border-radius:11px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:12.5px; font-weight:700;
}
.am-btn:active{ transform:scale(.96); }
.am-btn.is-ok { background:var(--grad-green); color:#fff; border-color:transparent; }
.am-btn.is-bad{ background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.4); color:var(--danger,#dc2626); }

.am-note{
  padding:14px; border-radius:12px; text-align:center;
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13px; color:var(--text-dim);
}


/* ============================================================
   מטריצת הכישורים · הנפחייה · החנות · הרצף · פרסומת מתגמלת
   ------------------------------------------------------------
   שכבת ה-RPG שהומרה מהאפליקציה. כל המחלקות כאן משתמשות
   באותם טוקנים של game-core.css, ולכן שתי הערכות (בהיר/כהה)
   עובדות בלי כפילות: אין כאן אף צבע קשיח שאינו מצב מיוחד
   (הצלחה/הריסה), ואלה מגיעים מ---green/--red.
   ============================================================ */

/* מטריצת הכישורים השטוחה הוסרה — הוחלפה בעץ RPG (ראו rpg-*). */

/* ---------- נפחייה ---------- */
.fg-head, .sh-head, .st-head{ text-align:center; padding:6px 0 14px; }
.fg-head-ic, .sh-head-ic, .st-head-ic{ font-size:40px; line-height:1; }
.fg-head h2, .sh-head h2, .st-head h2{ margin:6px 0 4px; font-size:22px; font-weight:900; }
.fg-head p, .sh-head p, .st-head p{ margin:0; font-size:13px; color:var(--text-dim); }
.fg-bal, .sh-bal{ display:flex; justify-content:center; gap:9px; margin-top:14px; flex-wrap:wrap; }

.fg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.fg-card{
  padding:14px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column; gap:9px;
}
.fg-card.is-max{ border-color:var(--gold); }
.fg-card.is-working{ opacity:.6; pointer-events:none; }
.fg-card-h{ display:flex; align-items:center; gap:8px; }
.fg-card-ic{ font-size:24px; }
.fg-card-t{ flex:1; font-weight:800; font-size:14px; }
.fg-card-lv{ font-size:12px; font-weight:800; color:var(--text-dim); }
.fg-pips{ display:flex; gap:4px; }
.fg-pip{ flex:1; height:5px; border-radius:100px; background:var(--surface-3); }
.fg-pip.is-on{ background:var(--grad-gold); }
.fg-card-s{ margin:0; font-size:12px; color:var(--text-dim); line-height:1.45; }
.fg-risk{ font-size:11.5px; color:var(--text-dim); line-height:1.4; }
.fg-risk b{ color:var(--green-ink); }
.fg-risk b.is-bad{ color:var(--red-ink); }
.fg-risk.is-max{ color:var(--gold-ink); font-weight:800; }
.fg-actions{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }

/* ---------- חנות ---------- */
.sh-sec{ margin:26px 0 3px; font-size:16.5px; font-weight:900; letter-spacing:-.3px; }
.sh-sec-s{ margin:0 0 14px; font-size:12.5px; color:var(--text-dim); line-height:1.55; }

/* מדף המגילות — כרטיס מחיר, לא כפתור ענק */
.sh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px; }
.sh-card{
  padding:16px 11px 13px; border-radius:var(--radius);
  border:1.5px solid var(--border); background:var(--surface);
  text-align:center; display:flex; flex-direction:column;
  gap:6px; align-items:center;
  transition:transform .16s var(--ease), border-color .2s var(--ease);
}
.sh-card:not(.is-poor):hover{ transform:translateY(-2px); border-color:var(--indigo-ink); }
.sh-card.is-poor{ opacity:.55; }
.sh-card-ic{ font-size:28px; line-height:1; }
.sh-card-t{ font-weight:800; font-size:13px; }
.sh-card-p{
  font-size:13px; font-weight:900; color:var(--gold-ink);
  background:var(--surface-2); border-radius:999px; padding:3px 10px;
}
/* margin-top:auto מיישר את כל הכפתורים לתחתית גם כשהכותרות באורך שונה */
.sh-card .gs-btn{ margin-top:auto; padding:10px 8px; font-size:13px; }
.sh-wide{ width:100%; margin-top:12px; }

/* פעולות מתגמלות — שורה: אייקון · טקסט · כפתור
   .gs-btn הגלובלי הוא width:100%; בתוך flex-row הוא בולע את כל
   הרוחב והטקסט נמעך לעמודה של מילה אחת. שלושת הכללים למטה
   (flex:0 0 auto + width:auto + margin-top:0) הם התיקון. */
.sh-rw{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  border-radius:var(--radius); border:1.5px solid var(--border);
  background:var(--surface); margin-bottom:10px;
  transition:border-color .2s var(--ease);
}
.sh-rw:not(.is-out):hover{ border-color:var(--indigo-ink); }
.sh-rw.is-out{ opacity:.5; }
.sh-rw-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:13px;
  background:var(--surface-2); display:flex;
  align-items:center; justify-content:center; font-size:23px;
}
.sh-rw-b{ flex:1 1 auto; min-width:0; }
.sh-rw-t{ font-weight:800; font-size:13.5px; margin-bottom:2px; }
.sh-rw-s{ font-size:12px; color:var(--text-dim); line-height:1.45; }
.sh-rw .gs-btn{
  flex:0 0 auto; width:auto; margin-top:0;
  padding:11px 16px; font-size:13.5px; white-space:nowrap;
}
.sh-quota{
  display:inline-block; margin-top:6px; padding:2px 9px; border-radius:999px;
  background:var(--surface-2); font-size:11px; font-weight:800; color:var(--indigo-ink);
}

/* מסך צר — הכפתור יורד לשורה משלו במקום להצטמצם לטקסט חתוך */
@media (max-width:400px){
  .sh-rw{ flex-wrap:wrap; }
  .sh-rw-b{ flex:1 1 140px; }
  .sh-rw .gs-btn{ flex:1 1 100%; margin-top:4px; }
}

/* ---------- רצף יומי ---------- */
.st-track{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:16px; }
.st-day{
  aspect-ratio:1; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.st-day.is-on{ background:var(--grad-gold); border-color:transparent; color:#fff; }
.st-day.is-gift{ border-style:dashed; }
.st-day-n{ font-weight:900; font-size:14px; }
.st-state{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.st-next{ text-align:center; font-size:13px; color:var(--text-dim); margin-bottom:14px; }
.st-wide{ width:100%; margin-bottom:12px; }
.st-prizes{ padding:14px; border-radius:var(--radius); background:var(--surface-2);
            border:1px solid var(--border); margin-bottom:14px; }
.st-prizes-t{ font-weight:800; font-size:13px; margin-bottom:8px; }
.st-prize{ display:inline-block; margin:0 0 6px 8px; font-size:12.5px; color:var(--text-dim); }

/* ---------- חלונית הפרסומת המתגמלת ---------- */
.rw-modal{
  position:fixed; inset:0; z-index:5200; display:flex;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(3,7,18,.72);
}
.rw-card{
  width:100%; max-width:340px; padding:24px 20px; text-align:center;
  border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-lg,0 24px 56px rgba(0,0,0,.4));
  display:flex; flex-direction:column; gap:11px;
}
.rw-ic{ font-size:38px; line-height:1; }
.rw-t{ margin:0; font-size:17px; font-weight:900; }
.rw-s{ margin:0; font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.rw-wait{ font-size:14px; font-weight:800; color:var(--indigo-ink); padding:10px 0; }
.rw-cancel{
  background:none; border:none; font:inherit; font-size:12.5px;
  color:var(--text-dim); text-decoration:underline; cursor:pointer; padding:4px;
}

/* ------------------------------------------------------------
   מטריצה במסך צר — הצומת מתקפל
   ------------------------------------------------------------
   שלוש עמודות ב-375px נותנות תא של ~90px, ובתוכו כרטיס בשלוש
   עמודות משלו. התוצאה בפועל: "זמן נוסף" נשבר לשתי שורות ותיאור
   של שמונה מילים נמתח על שמונה שורות. במוצר מובייל-פירסט זה
   פוסל את המסך.

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

/* ------------------------------------------------------------
   תיקון גלישה במטריצה
   ------------------------------------------------------------
   grid-template-columns:repeat(3,1fr) נותן לכל עמודה
   min-width:auto, כלומר רוחב-התוכן המזערי. שם כישור ארוך
   מרחיב את התא, התא מרחיב את .sk-mx-cells, וב-RTL זה דוחף את
   עמודת הדרגה אל מחוץ למסך מימין — בדיוק מה שנראה במובייל.
   minmax(0,1fr) מחזיר לעמודות את הרשות להתכווץ.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   מובייל: תווית הדרגה עוברת מעל השורה
   ------------------------------------------------------------
   עמודת דרגה צדדית ברוחב 52px היא סיכון קבוע ב-RTL: כל שינוי
   בגופן, במרווח או ברוחב המסך דוחף אותה אל הקצה. במקום להילחם
   בפיקסלים, התווית עוברת מעל השורה — שם יש לה את כל הרוחב,
   השם התיאורי חוזר, והמטריצה נשארת קריאה בכל רוחב.
   ------------------------------------------------------------ */


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

   הניגודיות נבדקה מול הרקע: טקסט לבן על הגרדיאנטים האלה עובר
   4.5:1 בשתי הערכות, ולכן אין כאן טקסט אפור על כהה — הכישלון
   המקורי.
   ============================================================ */
.ar-lobby-head{ text-align:center; padding:10px 0 18px; }
.ar-lobby-head h2{ margin:0 0 6px; font-size:24px; font-weight:900; }
.ar-lobby-head p{ margin:0; font-size:14px; color:var(--text-dim); }

.ar-portals{ display:grid; gap:16px; }

.ar-portal{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:22px 20px 18px; min-height:190px;
  border:none; border-radius:var(--radius-lg); cursor:pointer;
  text-align:start; color:#fff; font-family:inherit;
  box-shadow:0 14px 34px rgba(3,7,18,.34);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ar-portal:active{ transform:scale(.985); }
.ar-portal:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* שני השערים: לימודי = המותג (סגול→אינדיגו), הרגעה = ציאן.
   הנטייה הקודמת של "הרגעה" לטורקיז ‎#0d9488 התנגשה עם הזהות של
   מחציות; ציאן כחלחל מפריד ביניהם בבירור. */
.ar-portal.is-learn{  background:var(--grad-primary); }
.ar-portal.is-casual{ background:linear-gradient(135deg,#0891b2 0%,#0e7490 55%,#155e75 100%); }

.ar-portal-glow{
  position:absolute; inset:-40% -10% auto -10%; height:180%; z-index:-1;
  background:radial-gradient(circle at 22% 12%,rgba(255,255,255,.30),transparent 58%);
  pointer-events:none;
}
.ar-portal-tag{
  align-self:flex-end; font-size:11px; font-weight:900; letter-spacing:.02em;
  padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.34);
}
.ar-portal-ic{ font-size:44px; line-height:1; }
.ar-portal-t{ font-size:22px; font-weight:900; letter-spacing:-.01em; }
.ar-portal-s{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.92); }
.ar-portal-foot{
  margin-top:auto; padding-top:12px; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid rgba(255,255,255,.24);
}
.ar-portal-n{ font-size:12.5px; font-weight:800; color:rgba(255,255,255,.90); }
.ar-portal-cta{ font-size:13.5px; font-weight:900; }

.ar-zone-head{
  text-align:center; padding:18px 16px 20px; margin-bottom:16px;
  border-radius:var(--radius-lg); color:#fff;
}
.ar-zone-head.is-learn{  background:var(--grad-primary); }
.ar-zone-head.is-casual{ background:var(--grad-cyan); }
.ar-zone-ic{ font-size:38px; line-height:1; }
.ar-zone-head h2{ margin:6px 0 6px; font-size:22px; font-weight:900; }
.ar-zone-head p{ margin:0 auto; max-width:34em; font-size:13px; line-height:1.55;
                 color:rgba(255,255,255,.93); }
.ar-switch{ width:100%; margin-top:16px; }

@media (min-width:760px){
  .ar-portals{ grid-template-columns:1fr 1fr; }
  .ar-portal{ min-height:230px; }
}


/* ============================================================
   פירוק לתת-נושאים  ·  מומלץ לכיתה שלכם
   ------------------------------------------------------------
   כרטיס-צעד. המספר בצד הוא סדר ההתקדמות, ולכן הוא ויזואלית
   הדבר הראשון — ילד בכיתה א׳ קורא 1, 2, 3 לפני שהוא קורא את
   שם הנושא.
   ============================================================ */
.st-sec{ margin:22px 0 2px; font-size:16px; font-weight:900; }
.st-sec-s{ margin:0 0 12px; font-size:12.5px; color:var(--text-dim); line-height:1.5; }

.st-grid{ display:grid; gap:10px; }
.st-card{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--border); background:var(--surface);
  font-family:inherit; text-align:start;
  transition:transform .15s ease, border-color .15s ease;
}
.st-card:active{ transform:scale(.99); }
.st-card-n{
  flex:0 0 34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px;
  background:var(--surface-3); color:var(--text-dim);
}
.st-card.is-done .st-card-n{ background:var(--grad-indigo); color:#fff; }
.st-card.is-mastered{ border-color:var(--gold); }
.st-card.is-mastered .st-card-n{ background:var(--grad-gold); color:#fff; }
.st-card-b{ flex:1; min-width:0; }
.st-card-t{ display:block; font-weight:800; font-size:14.5px; }
.st-card-s{ display:block; font-size:12px; color:var(--text-dim); margin-top:2px; }
.st-card-badge{ font-size:12px; font-weight:900; color:var(--gold-ink); }

.st-games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.st-game{
  padding:14px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2);
  font-family:inherit; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.st-game:active{ transform:scale(.99); }
.st-game-ic{ font-size:26px; }
.st-game-t{ font-weight:800; font-size:13.5px; }
.st-game-s{ font-size:11.5px; color:var(--text-dim); line-height:1.4; }

.tp-crumb{
  display:inline-block; margin-bottom:10px; padding:6px 12px;
  border-radius:100px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-dim);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}

.sc-games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; }
.sc-game{
  padding:14px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--border); background:var(--surface);
  font-family:inherit; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.sc-game-ic{ font-size:26px; }
.sc-game-t{ font-weight:800; font-size:13.5px; }
.sc-game-s{ font-size:11.5px; color:var(--text-dim); line-height:1.4; }


/* ============================================================
   עץ הכישורים — RPG
   ------------------------------------------------------------
   שלושה ענפים, חמש דרגות, וקווי קדם שנמתחים ב-SVG לפי מיקום
   אמיתי. שלושת המצבים נבדלים בשלושה ערוצים ולא באחד: צבע,
   רוויה ותנועה. נעול הוא אפור ודומם, זמין הוא צבעוני ופועם,
   נפתח הוא זהב ויציב. מי שלא מבחין בצבע עדיין רואה את ההבדל.
   ============================================================ */
.rpg-scroll{
  overflow-x:auto; overflow-y:visible; padding:4px 0 10px;
  -webkit-overflow-scrolling:touch;
}
.rpg-tree{ position:relative; min-width:340px; padding:6px 4px 4px; }

.rpg-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.rpg-link{ fill:none; stroke-width:3; stroke-linecap:round; }
.rpg-link.is-owned{  stroke:var(--gold); opacity:.95; }      /* נכבש = תגמול */
.rpg-link.is-ready{  stroke:var(--indigo-l); opacity:.9; stroke-dasharray:6 5; }
.rpg-link.is-short{  stroke:var(--indigo-l); opacity:.45; }
.rpg-link.is-locked{ stroke:currentColor; color:var(--border); opacity:.55; }

.rpg-rows{ position:relative; z-index:1; }
.rpg-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:26px; }
.rpg-row.is-root{ grid-template-columns:1fr; margin-bottom:22px; }
.rpg-row.is-root .rpg-slot{ max-width:190px; margin:0 auto; }
.rpg-row.is-heads{ margin-bottom:10px; }
.rpg-slot{ display:flex; justify-content:center; }

.rpg-branch{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 8px; border-radius:var(--radius-sm); width:100%;
  font-size:11.5px; font-weight:900; color:#fff;
}
.rpg-branch.is-math{    background:var(--grad-indigo); }
.rpg-branch.is-english{ background:linear-gradient(135deg,#0369a1,#075985); }  /* לבן על ‎#0ea5e9 נתן 2.77:1 */
.rpg-branch.is-lashon{  background:linear-gradient(135deg,#7c3aed,#5b21b6); }  /* לבן על ‎#a78bfa נתן 2.72:1 */
.rpg-branch-ic{ font-size:16px; }

.rpg-tierlabel{
  display:flex; align-items:center; gap:7px; margin:0 2px 8px;
  font-size:11px; font-weight:800; color:var(--text-dim);
}
.rpg-tierlabel b{ color:var(--indigo-ink); font-weight:900; }
.rpg-tiercount{ margin-inline-start:auto; }

.rpg-node{
  position:relative; width:100%; max-width:132px; min-height:112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:12px 8px; cursor:pointer; font-family:inherit; text-align:center;
  border-radius:18px; border:2px solid var(--border);
  background:var(--surface); color:var(--text);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.rpg-node:active{ transform:scale(.96); }
.rpg-node:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; }

.rpg-node-ring{ position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; }
.rpg-node-ic{ font-size:26px; line-height:1; }
.rpg-node-t{ font-size:12px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.rpg-node-p{
  font-size:11px; font-weight:900; padding:2px 9px; border-radius:100px;
  background:var(--surface-3); color:var(--text-dim);
}

.rpg-node.is-locked{
  filter:grayscale(1); opacity:.42; cursor:not-allowed;
  border-style:dashed; box-shadow:none;
}
.rpg-node.is-short{ opacity:.82; }

.rpg-node.is-ready{
  border-color:var(--indigo-l);
  box-shadow:0 0 0 3px rgba(99,102,241,.18), 0 10px 26px rgba(79,70,229,.28);
}
.rpg-node.is-ready .rpg-node-ring{
  animation:rpgPulse 2.1s ease-in-out infinite;
  border-radius:18px;
}
.rpg-node.is-ready .rpg-node-p{ background:var(--grad-indigo); color:#fff; }

.rpg-node.is-owned{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(245,158,11,.16),rgba(245,158,11,.05));
  box-shadow:0 8px 22px rgba(245,158,11,.24);
}
.rpg-node.is-owned .rpg-node-p{ background:var(--grad-gold); color:#fff; }
.rpg-node.is-owned .rpg-node-ic{ filter:drop-shadow(0 2px 6px rgba(245,158,11,.5)); }

@keyframes rpgPulse{
  0%   { box-shadow:0 0 0 0   rgba(99,102,241,.50); }
  70%  { box-shadow:0 0 0 12px rgba(99,102,241,0); }
  100% { box-shadow:0 0 0 0   rgba(99,102,241,0); }
}
@media (prefers-reduced-motion: reduce){
  .rpg-node.is-ready .rpg-node-ring{ animation:none; }
}
@media (max-width:420px){
  .rpg-tree{ min-width:330px; }
  .rpg-node{ min-height:104px; padding:10px 6px; }
  .rpg-node-ic{ font-size:23px; }
  .rpg-node-t{ font-size:11px; }
}


/* ============================================================
   יחידת AdSense בתוך תוכן
   ------------------------------------------------------------
   מסומנת במפורש כתוכן שיווקי. ילד שלא מבחין בין תוכן לפרסומת
   הוא בדיוק מי שאסור לבלבל, ולכן התווית אינה אופציונלית.
   ============================================================ */
.gs-ad-inline{
  margin:20px 0; padding:8px; border-radius:var(--radius);
  border:1px dashed var(--border); background:var(--surface-2);
  min-height:60px; overflow:hidden;
}
.gs-ad-tag{
  display:block; margin-bottom:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; color:var(--text-dim); text-align:center;
}
body[data-ads="off"] .gs-ad-inline{ display:none; }


/* ---------- הכפלת מטבעות בסיום סבב ---------- */
.qz-x2{
  display:flex; align-items:center; gap:10px; width:100%; margin:10px 0 8px;
  padding:13px 14px; border:none; border-radius:var(--radius); cursor:pointer;
  background:linear-gradient(135deg,#b45309,#8a3d07); color:#fff;
  font-family:inherit; text-align:start;
  box-shadow:0 8px 22px rgba(180,83,9,.32);
}
.qz-x2:disabled{ opacity:.6; cursor:default; }
.qz-x2-ic{ font-size:22px; }
.qz-x2-b{ flex:1; min-width:0; }
.qz-x2-t{ display:block; font-weight:900; font-size:13.5px; }
.qz-x2-s{ display:block; font-size:11.5px; opacity:.9; margin-top:2px; }


/* ============================================================
   חלונית ההתקנה
   ------------------------------------------------------------
   ההיררכיה כאן היא המסר: כפתור Play גדול וצבעוני, קיצור הדרך
   קטן ואפור. משתמש שסורק במהירות יראה קודם את האפליקציה
   האמיתית — וזו המטרה, כי קיצור דרך שמתחזה לאפליקציה גונב את
   ההתקנה מהמוצר שיוצא לחנות.
   ============================================================ */
.ip-modal{
  position:fixed; inset:0; z-index:6200; display:flex;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(3,7,18,.76);
}
.ip-card{
  width:100%; max-width:380px; padding:24px 20px 18px; text-align:center;
  border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--border); box-shadow:0 26px 60px rgba(0,0,0,.46);
}
.ip-badge-app img{
  width:64px; height:64px; border-radius:16px;
  box-shadow:0 8px 20px rgba(30,58,138,.34);
}
.ip-t{ margin:12px 0 6px; font-size:18px; font-weight:900; }
.ip-s{ margin:0 0 16px; font-size:13px; color:var(--text-dim); line-height:1.55; }

.ip-primary{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  padding:14px; border:none; border-radius:16px; cursor:pointer;
  background:linear-gradient(135deg,#15803d,#116434); color:#fff;
  font-family:inherit; text-align:start;
  box-shadow:0 10px 26px rgba(21,128,61,.34);
}
.ip-primary-ic{ font-size:20px; }
.ip-primary-b{ flex:1; min-width:0; }
.ip-primary-t{ display:block; font-weight:900; font-size:13.5px; line-height:1.35; }
.ip-primary-s{ display:block; font-size:11.5px; opacity:.9; margin-top:2px; }
.ip-soon{
  position:absolute; top:-9px; inset-inline-start:12px;
  font-size:10.5px; font-weight:900; padding:3px 9px; border-radius:100px;
  /* "בקרוב" אינו הישג — צבע מותג ולא זהב */
  background:var(--grad-primary); color:#fff; box-shadow:0 4px 10px rgba(124,58,237,.4);
}

.ip-or{
  display:flex; align-items:center; gap:10px; margin:16px 0 12px;
  font-size:11.5px; color:var(--text-dim);
}
.ip-or::before, .ip-or::after{ content:""; flex:1; height:1px; background:var(--border); }

.ip-secondary{
  width:100%; padding:12px; border-radius:14px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font-family:inherit; font-size:13px; font-weight:800;
}
.ip-secondary:disabled{ opacity:.5; cursor:default; }
.ip-note{ margin:8px 0 0; font-size:11.5px; color:var(--text-dim); line-height:1.5; }
.ip-close{
  margin-top:14px; background:none; border:none; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--text-dim); text-decoration:underline;
}