:root{
  /* --vh = הגובה הגלוי באמת (js/fit.js). ב-iOS סרגלי הדפדפן אוכלים ~25% מהמסך
     ו-vh מתייחס למסך המלא, ולכן כל מדידה ב-vh יצאה גדולה מדי והתחתית נחתכה.
     --k = מקדם התאמה: 1 כשיש מקום, ויורד עד .72 במסכים נמוכים, כדי שהמשחק
     ייכנס תמיד בפריים אחד בלי גלילה. */
  --vh:100dvh; --k:1;
  /* סולם טיפוגרפי: חמש מדרגות בלבד. פונטי התצוגה (Secular One) מחוץ לסולם. */
  --t-xl:max(16px,calc(19px*var(--k))); --t-lg:max(14.5px,calc(17px*var(--k)));
  --t-md:max(13px,calc(15px*var(--k)));  --t-sm:max(11.5px,calc(13px*var(--k)));
  --t-xs:max(10px,calc(11px*var(--k)));
  --bg:#0A0908;
  --ink:#F6F2E9; --ink-2:#B5AC9D; --ink-3:#7C7568;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20);
  --gold:#FFC81F; --gold-lt:#FFE9A3; --gold-dk:#A8730A;
  --kavod:#FFC81F; --kis:#4ED98B; --tik:#FF4B4B; --ima:#FF7FA8;
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:9px;
  --sh:0 22px 46px -18px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,.9,.26,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* ===== נעילת גלילה =====
   position:fixed על html ו-body הוא מה שעוצם גלילה בספארי באייפון, כולל
   משיכה לרענון והסחה אופקית מאנימציית הקלף היוצא. touch-action:manipulation
   מבטל הקשה כפולה להגדלה - משם באה ה"קפיצה הצידה" בזמן הקשות מהירות. */
html{
  height:100%; overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
body{
  /* position:fixed על body (ולא על html) הוא המתכון שעוצם גלילה בספארי
     באייפון בלי להסיט את הפריסה אופקית - fixed על html מקטין את תיבת
     ההכלה ומזיז את כל התוכן הצידה. */
  position:fixed; inset:0; width:100%; height:100%;
  overflow:hidden; overscroll-behavior:none; touch-action:manipulation;
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Assistant',ui-sans-serif,system-ui,Arial,sans-serif; font-weight:500;
  font-size:var(--t-md); /* אחרת כל מה שיורש נופל ל-16px של הדפדפן ושובר את הסולם */
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
  /* במובייל: זרימה רגילה, כדי שהדף עצמו יגלול בצורה מקורית.
     מירכוז אנכי נשאר רק למסגרת הדסקטופ - ב-flex ממורכז גלישה נחתכת משני הצדדים. */
  display:flex; flex-direction:column; align-items:center;
}
body::before{
  content:""; position:fixed; inset:-12%; z-index:0; pointer-events:none; filter:blur(14px);
  background:
    radial-gradient(34% 24% at 80% 6%,  rgba(255,200,31,.22), transparent 70%),
    radial-gradient(40% 28% at 10% 20%, rgba(170,30,18,.18), transparent 72%),
    radial-gradient(52% 34% at 52% 103%,rgba(255,200,31,.11), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
#app{
  position:relative; z-index:2; direction:rtl; width:100%; max-width:420px;
  height:var(--vh); flex:none;
  padding:calc(13px*var(--k)) 14px calc(13px*var(--k) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
#app > section{min-height:0}
#app{overflow:hidden}
/* מסגרת "מכשיר" רק כשבאמת יש מקום */
@media (min-width:520px) and (min-height:760px){
  body{justify-content:center}
  #app{
    height:min(var(--vh),900px);
    border:1px solid var(--line); border-radius:32px; box-shadow:var(--sh);
  }
}
.d{font-family:'Secular One','Assistant',sans-serif; font-weight:400; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-weight:700; font-size:var(--t-md); color:var(--ink); width:100%;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  padding:calc(13px*var(--k)) 14px; cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .12s var(--ease), background .18s, border-color .18s;
}
.btn:hover{background:var(--glass-2); border-color:var(--line-2)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.btn.primary{
  color:#171206; border:0; font-size:var(--t-lg); font-weight:700;
  background:linear-gradient(175deg,var(--gold-lt),var(--gold) 46%,#E2A400);
  box-shadow:0 12px 28px -10px rgba(255,200,31,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.big{font-size:var(--t-xl); padding:calc(16px*var(--k)) 16px}
a.btn{display:block; text-align:center; text-decoration:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.row2 .btn{padding:calc(11px*var(--k)) 12px}
/* שלושה כפתורי שיתוף. וואטסאפ ראשון בסדר הקריאה, כי בישראל זה ערוץ
   ההפצה החזק ביותר, והדאטה הראה בו אפס תנועה. */
.row3{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.row3 .btn{padding:calc(10px*var(--k)) 6px; font-size:var(--t-sm);
  display:flex; flex-direction:column; align-items:center; gap:4px; line-height:1.15}
.row3 .btn svg{fill:currentColor; flex:none; opacity:.9}
.row3 .btn span{white-space:nowrap}
#wa{color:#8FE3A6}
#wa:hover{background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.45)}

/* ---------- HUD ---------- */
.hud{flex:none; display:flex; flex-direction:column; gap:calc(11px*var(--k))}
.hudtop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.hudname{display:flex; align-items:baseline; gap:7px; min-width:0}
.hudname b{font-family:'Secular One',sans-serif; font-weight:400; font-size:max(17px,calc(21px*var(--k))); color:var(--ink)}
.hudname span{font-size:var(--t-xs); color:var(--ink-3); font-weight:700}
.chipn{
  font-size:var(--t-xs); font-weight:700; color:var(--ink-2); background:var(--glass);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; white-space:nowrap;
}
.gauges{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.gcell{display:flex; flex-direction:column; align-items:center; gap:4px; position:relative}
.ring{position:relative; width:max(38px,calc(46px*var(--k))); height:max(38px,calc(46px*var(--k)))}
.ring > svg{width:100%; height:100%; transform:rotate(-90deg); display:block}
.ring .trk{fill:none; stroke:rgba(255,255,255,.11); stroke-width:3.4}
.ring .arc{fill:none; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:113.1;
  transition:stroke-dashoffset .55s var(--ease)}
.ring em{position:absolute; inset:0; display:grid; place-items:center; font-style:normal; color:inherit}
.ring::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid transparent; opacity:0;
}
.gcell.pulse .ring::after{animation:ping .7s var(--ease)}
@keyframes ping{0%{opacity:.9; transform:scale(.86); border-color:currentColor}100%{opacity:0; transform:scale(1.35); border-color:transparent}}
.glab{font-size:var(--t-xs); font-weight:700; color:var(--ink-3); white-space:nowrap}
.glab b{color:var(--ink-2)}
.gdelta{position:absolute; top:-12px; font-size:var(--t-sm); font-weight:700; opacity:0; pointer-events:none}
.gdelta.go{animation:rise 1s var(--ease) both}
@keyframes rise{0%{opacity:0; transform:translateY(6px)}22%{opacity:1}100%{opacity:0; transform:translateY(-16px)}}

/* ---------- DECK ---------- */
.deckwrap{flex:1; display:flex; align-items:center; margin:calc(12px*var(--k)) 0 calc(10px*var(--k)); min-height:0}
.deck{position:relative; width:100%}
.ghost{
  position:absolute; inset:0; border-radius:var(--r-xl);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.ghost.g1{transform:rotate(-2.2deg) scale(.975)}
.ghost.g2{transform:rotate(2.8deg) scale(.95); opacity:.6}
.card{
  position:relative; width:100%; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg,rgba(32,28,24,.92),rgba(14,12,11,.96));
  border:1px solid var(--line); box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.card.in{animation:dealin .42s var(--ease) both}
@keyframes dealin{0%{opacity:0; transform:translateY(22px) scale(.94) rotate(1.5deg)}100%{opacity:1; transform:none}}
.card.outR{animation:flyR .34s cubic-bezier(.4,0,.7,.3) both}
.card.outL{animation:flyL .34s cubic-bezier(.4,0,.7,.3) both}
@keyframes flyR{to{transform:translateX(118%) rotate(13deg); opacity:0}}
@keyframes flyL{to{transform:translateX(-118%) rotate(-13deg); opacity:0}}
.photo{position:relative; height:clamp(108px,calc(var(--vh)*.295),300px); background:#15120F}
.photo img{width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block}
.photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,0) 34%,rgba(10,9,8,.55) 68%,rgba(14,12,11,.97) 100%);
}
.cbody{padding:calc(12px*var(--k)) 15px calc(16px*var(--k)); position:relative; margin-top:-16px}
.q{font-size:var(--t-lg); line-height:1.4; font-weight:700; margin:0; text-wrap:balance}

/* ---------- CHOICES ---------- */
.opts{flex:none; display:flex; flex-direction:column; gap:calc(9px*var(--k))}
.opt{
  font:inherit; font-size:var(--t-md); font-weight:600; color:var(--ink); text-align:start; width:100%;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:calc(12px*var(--k)) 14px; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:max(44px,calc(52px*var(--k)));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .12s var(--ease), background .2s, border-color .2s;
}
.opt:hover{background:var(--glass-2); border-color:var(--line-2)}
.opt:active{transform:scale(.978)}
.opt:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.opt.hot{border-color:rgba(255,75,75,.34); background:linear-gradient(180deg,rgba(255,75,75,.09),rgba(255,255,255,.04))}
.opt.hot:hover{border-color:rgba(255,75,75,.55)}
.opt .txt{flex:1; min-width:0}
.hint{display:flex; gap:8px; flex:none; align-items:center}
.hint s{display:inline-flex; align-items:center; gap:1px; text-decoration:none; color:var(--hc)}
.hint s b+b{margin-inline-start:-1px}
.hint s b{width:0; height:0; border-left:3px solid transparent; border-right:3px solid transparent}
.hint s.up b{border-bottom:4px solid currentColor}
.hint s.dn b{border-top:4px solid currentColor}
.opt:hover .hint s{color:#0A0A0A}
.dots{flex:none; display:flex; gap:5px; justify-content:center; margin-top:calc(12px*var(--k))}
.dots i{height:4px; width:16px; border-radius:99px; background:rgba(255,255,255,.14); transition:all .3s var(--ease)}
.dots i.done{background:rgba(255,200,31,.5)}
.dots i.now{background:var(--gold); width:30px}


/* ---------- מדד חי ----------
   בלי זה שמונה החלטות קורות בעיוורון והציון נוחת בסוף בלי הקשר.
   השורה הזאת היא הקשר בין בחירה לתוצאה: היא נעה בכל החלטה. */
.meter{display:flex; align-items:center; gap:9px; position:relative}
.mlab{font-size:var(--t-xs); font-weight:700; color:var(--ink-3); white-space:nowrap}
.mtrack{flex:1; height:6px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden; min-width:0}
.mtrack i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold));
  transition:width .6s var(--ease)}
.mnum{font-family:'Secular One',sans-serif; font-weight:400; font-size:max(16px,calc(20px*var(--k)));
  color:var(--gold); line-height:1; min-width:2.1em; text-align:center}
.mdelta{position:absolute; inset-inline-end:0; top:-13px; font-size:var(--t-sm); font-weight:700;
  opacity:0; pointer-events:none}
.mdelta.go{animation:rise 1.3s var(--ease) both}
/* קנס ההזנחה הוא הכלל הכי משמעותי במשחק, והוא היה מוסתר לגמרי */
.mdrag{margin:calc(6px*var(--k)) 0 0; font-size:var(--t-xs); font-weight:600; color:var(--ink-3); text-align:center}
.mdrag b{color:var(--gold); font-weight:700}

/* ---------- מה הבחירה עשתה ----------
   קודם הדלתאות הונפשו על המחוונים מאחורי הגיליון שמכסה את המסך,
   כלומר בדיוק ברגע שאי אפשר לראות אותן. */
.chg{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 calc(14px*var(--k))}
.cg i{font-style:normal; direction:ltr; unicode-bidi:isolate}
.cg{font-size:var(--t-xs); font-weight:700; border-radius:999px; padding:5px 10px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.cg.good{color:#8DE0AE; border-color:rgba(78,217,139,.34); background:rgba(78,217,139,.10)}
.cg.bad{color:#FF9A9A; border-color:rgba(255,75,75,.32); background:rgba(255,75,75,.10)}
.cg.tot{color:#171206; background:linear-gradient(175deg,var(--gold-lt),var(--gold)); border:0}
.cg.tot.bad{color:#fff; background:rgba(255,75,75,.22); border:1px solid rgba(255,75,75,.5)}

/* מקרא, פעם אחת בהחלטה הראשונה */
.legend{margin:calc(9px*var(--k)) 0 0; font-size:var(--t-xs); line-height:1.5; font-weight:600;
  color:var(--ink-3); text-align:center}
.legend b{color:var(--gold); font-weight:700}

/* ---------- SHEET ---------- */
.sheet{position:absolute; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,5,5,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .18s both; cursor:pointer}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheetin{
  width:100%; max-width:420px; margin:0 auto; text-align:center; cursor:default;
  background:linear-gradient(180deg,rgba(34,29,25,.96),rgba(13,11,10,.98));
  border:1px solid var(--line); border-bottom:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:calc(21px*var(--k)) 22px calc(19px*var(--k) + env(safe-area-inset-bottom)); animation:up .34s var(--ease) both;
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.9);
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheetin .ic{font-size:max(28px,calc(38px*var(--k))); line-height:1}
.facewrap{position:relative; width:max(78px,calc(106px*var(--k))); margin:0 auto 4px}
.face{width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#15120F;
  border:2px solid var(--fc,rgba(255,255,255,.3)); box-shadow:0 0 46px -10px var(--fg,rgba(255,255,255,.25))}
.face img{width:100%; height:100%; object-fit:cover; object-position:50% 11%; display:block}
.facepin{position:absolute; bottom:-3px; inset-inline-end:-5px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-size:var(--t-lg); background:#100E0C; border:1px solid var(--line)}
.sheet.good{--fc:rgba(255,200,31,.75); --fg:rgba(255,200,31,.5)}
.sheet.bad{--fc:rgba(255,75,75,.7);  --fg:rgba(255,75,75,.42)}
.sheet.mid{--fc:rgba(255,255,255,.34); --fg:rgba(255,255,255,.2)}
/* היה .sheetin p, וזה גבר בסגוליות על כל הפסקאות בגיליון התמיכה
   ובגיליון הכינוי: הוא דרס להן את הגופן, את המשקל ואת המירכוז
   (margin אופקי 0 במקום auto). מכאן הטקסט שנראה לא ממורכז.
   הכלל מכוון עכשיו רק לפאנץ' של גיליון התוצאה, שבשבילו נכתב. */
#sheetTx{font-size:var(--t-xl); line-height:1.38; font-weight:700;
  margin:calc(12px*var(--k)) 0 calc(17px*var(--k)); text-wrap:balance}
.grab{width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,.2); margin:0 auto 14px}

/* ---------- CHAPTER ---------- */
.chapter{position:absolute; inset:0; z-index:70; display:grid; place-items:center; background:#070605; animation:fade .2s both}
.chin{text-align:center; animation:chpop .6s var(--ease) both}
@keyframes chpop{0%{opacity:0; transform:scale(.9)}100%{opacity:1; transform:none}}
.chph{width:clamp(104px,calc(var(--vh)*.185),150px); aspect-ratio:1; border-radius:50%; overflow:hidden; margin:0 auto 18px; border:2px solid rgba(255,200,31,.35);
  box-shadow:0 0 70px -14px rgba(255,200,31,.5)}
.chph img{width:100%; height:100%; object-fit:cover; object-position:50% 14%}
.chage{font-family:'Secular One',sans-serif; font-size:max(38px,calc(52px*var(--k))); color:var(--gold); line-height:1}
.chsub{font-size:var(--t-sm); font-weight:700; letter-spacing:.22em; color:var(--ink-3); margin-top:8px}

/* ---------- INTRO ---------- */
.intro{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(16px*var(--k)); text-align:center; padding:calc(12px*var(--k)) 0}
.hero{position:relative; width:clamp(112px,calc(var(--vh)*.212),172px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  border:1px solid rgba(255,200,31,.3); box-shadow:0 0 80px -18px rgba(255,200,31,.45), var(--sh)}
.hero img{width:100%; height:100%; object-fit:cover; object-position:50% 14%; display:block}
.logo{font-family:'Secular One',sans-serif; font-size:clamp(42px,min(17vw,calc(var(--vh)*.092)),74px); line-height:.95; margin:0;
  background:linear-gradient(170deg,var(--gold-lt),var(--gold) 45%,#C98A00);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.kick{font-size:var(--t-xs); font-weight:700; letter-spacing:.24em; color:var(--ink-3); margin:0}
.tiny{font-size:var(--t-xs); color:var(--ink-3); font-weight:600; margin:0; line-height:1.55}




/* פס התקדמות. שימש קודם גם את הריבוע בדף הבית שהוסר, ונשאר בשביל
   הכותרת של האלבום. */
.ctrack{height:6px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden}
.ctrack i{display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold)); transition:width .7s var(--ease)}

/* ---------- האלבום ----------
   שלושים כרטיסים בפריסה אחת. כרטיס שנפתח מוצג בשמו; כרטיס נעול מוצג
   במילת הקטגוריה שלו בלבד, וזה מה שיוצר את המשיכה: רואים שקיים
   "גדר" או "ביטקוין" בלי לדעת מה זה. */
.album{flex:1; display:flex; flex-direction:column; gap:calc(11px*var(--k)); padding:4px 2px 2px; min-height:0}
.alhead{display:flex; flex-direction:column; gap:calc(7px*var(--k))}
.altop{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.altitle{font-family:'Secular One',sans-serif; font-weight:400; margin:0;
  font-size:max(21px,calc(27px*var(--k))); color:var(--ink)}
.alnum{font-family:'Secular One',sans-serif; font-size:max(16px,calc(20px*var(--k))); color:var(--gold); line-height:1}
.alnum small{font-size:var(--t-xs); color:var(--ink-3); font-family:'Assistant',sans-serif; font-weight:700}
.alsub{margin:0; font-size:var(--t-xs); font-weight:600; color:var(--ink-3); text-align:center}
.alsub b{color:var(--gold)}
.algrid{flex:1; min-height:0; display:grid; gap:5px;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); align-content:start}
.al{display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:var(--t-xs); font-weight:700; line-height:1.2; padding:calc(6px*var(--k)) 5px;
  border-radius:var(--r-sm); min-height:max(30px,calc(36px*var(--k)))}
.al.got{color:var(--gold); background:rgba(255,200,31,.10); border:1px solid rgba(255,200,31,.34)}
.al.got.out{color:#FF9A9A; background:rgba(255,75,75,.09); border-color:rgba(255,75,75,.30)}
.al.miss{color:#6C655A; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07);
  font-weight:600}
.al.miss::before{content:""; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.16); margin-inline-end:5px; flex:none}
.album>.btn{flex:none}


/* ---------- היכל התהילה ----------
   אותה שפה של האלבום, כדי שהמשחק ירגיש מערכת אחת ולא אוסף מסכים. */
.scale{margin:calc(5px*var(--k)) 0 0; font-size:var(--t-xs); font-weight:700; color:var(--ink-3);
  letter-spacing:.02em}
.homerow{width:100%}
.homerow .btn{padding:calc(10px*var(--k)) 10px; font-size:var(--t-sm)}
.bnum{color:var(--gold); font-weight:700; margin-inline-start:3px}
/* גלילה פנימית בתוך הרשימה היא הנפילה האחרונה: כשיש חלון סביב השחקן
   ומסך נמוך, אין דרך להציג 15 שורות בלי גלילה. זו גלילה של רשימה
   בתוך גבולות, לא של הדף, ולכן היא לא מחזירה את הבעיה שנעלה. */
.hlist{flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; align-content:start;
  overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.hlist::-webkit-scrollbar{display:none}
.hrow{display:flex; align-items:center; gap:9px; padding:calc(7px*var(--k)) 11px;
  border-radius:var(--r-sm); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07)}
.hrow.me{background:rgba(255,200,31,.12); border-color:rgba(255,200,31,.45)}
.hrow .pl{font-family:'Secular One',sans-serif; font-size:var(--t-sm); color:var(--ink-3);
  min-width:2.2em; text-align:center; flex:none}
.hrow.top1 .pl{color:var(--gold)} .hrow.top2 .pl{color:#D2DAE3} .hrow.top3 .pl{color:#E3A86E}
.hrow .nm{flex:1; min-width:0; font-size:var(--t-sm); font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hrow .sub{font-size:var(--t-xs); font-weight:600; color:var(--ink-3); flex:none}
.hrow .vl{font-family:'Secular One',sans-serif; font-size:max(16px,calc(19px*var(--k)));
  color:var(--gold); flex:none; line-height:1}
.hgap{text-align:center; color:#4A443B; font-size:var(--t-sm); font-weight:700;
  letter-spacing:.3em; padding:calc(3px*var(--k)) 0}
.hempty{font-size:var(--t-sm); font-weight:600; color:var(--ink-3); text-align:center;
  padding:calc(18px*var(--k)) 6px; line-height:1.6}
.hempty b{color:var(--gold)}
/* גיליון הכינוי */
.nickin{text-align:center}
.nicksub{font-size:var(--t-sm); font-weight:600; color:var(--ink-2); margin:calc(8px*var(--k)) 0 calc(13px*var(--k))}
.nickinput{
  width:100%; font:inherit; font-size:var(--t-lg); font-weight:700; color:var(--ink); text-align:center;
  background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:calc(12px*var(--k)) 14px; margin-bottom:calc(11px*var(--k)); min-height:48px;
}
.nickinput:focus{outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold)}
.nickinput::placeholder{color:#5C564D; font-weight:600}
.nickerr{font-size:var(--t-xs); font-weight:700; color:var(--tik); margin:0 0 calc(9px*var(--k))}
#nickCancel{margin:calc(9px*var(--k)) auto 0; display:block}

/* ---------- PLAYER CARD ---------- */
.end{flex:1; display:flex; flex-direction:column; gap:calc(11px*var(--k)); padding:4px 2px 5px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.end::-webkit-scrollbar{display:none}
/* אף ילד במסך הסיום לא נדחס. פריט פלקס עם overflow:hidden נחתך בשקט
   מבפנים, וכל מדידת חריגה על המסך עצמו מחזירה אפס - הבאג הכי מטעה פה. */
.end>*{flex:none}
.end>.pc{margin-top:auto}
.end>.row3{margin-bottom:auto}
.pc{
  --f1:#FFF0BE; --f2:#FFC81F; --f3:#7A5400; --f4:#FFD95E;
  --acc:#FFC81F; --accs:#FFE9A3; --accb:rgba(255,200,31,.45); --acct:rgba(255,200,31,.09);
  --glow:rgba(255,200,31,.45); --cardbg:#121010; --art:none;
  position:relative; padding:3px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(150deg,var(--f1),var(--f2) 26%,var(--f3) 62%,var(--f4) 88%);
  /* הגרדיאנט מציב את הגוון הכהה בקצה אחד, ושם המסגרת נעלמת על רקע שחור.
     הקו הפנימי האחיד מבטיח שכל ארבע הפאות ייראו. */
  box-shadow:0 30px 60px -22px rgba(0,0,0,.95), 0 0 70px -26px var(--glow),
             inset 0 0 0 1px var(--accb);
  animation:pcin .55s var(--ease) both}

/* card tiers - the frame, the accent and the artwork all change with the rating */
.pc.t-bronze{--f1:#F2D6B3; --f2:#C07B37; --f3:#4E2C13; --f4:#DDA46A;
  --acc:#E3A86E; --accs:#F3D3AE; --accb:rgba(227,168,110,.45); --acct:rgba(227,168,110,.10);
  --glow:rgba(192,123,55,.32); --cardbg:#14100C; --art:saturate(.78) contrast(.97)}
.pc.t-silver{--f1:#F6F8FA; --f2:#B6C0CA; --f3:#4F5862; --f4:#DDE4EB;
  --acc:#D2DAE3; --accs:#EDF2F7; --accb:rgba(210,218,227,.45); --acct:rgba(210,218,227,.10);
  --glow:rgba(182,192,202,.3); --cardbg:#101214; --art:saturate(.7) contrast(1)}
.pc.t-rare{--f1:#FFF9D8; --f2:#FFD233; --f3:#8A6100; --f4:#FFE680;
  --acc:#FFD84D; --accs:#FFF3C0; --accb:rgba(255,216,77,.6); --acct:rgba(255,216,77,.12);
  --glow:rgba(255,210,51,.62); --cardbg:#141108; --art:saturate(1.06)}
.pc.t-black{--f1:#8A8578; --f2:#14130E; --f3:#000; --f4:#C9A227;
  --acc:#F5C842; --accs:#FFE9A3; --accb:rgba(245,200,66,.5); --acct:rgba(245,200,66,.10);
  --glow:rgba(245,200,66,.34); --cardbg:#09090A; --art:contrast(1.07) saturate(1.06)}
.pc.t-out{--f1:#A09E9B; --f2:#383634; --f3:#131211; --f4:#7A5252;
  --acc:#FF6B6B; --accs:#FFD5D5; --accb:rgba(255,107,107,.45); --acct:rgba(255,107,107,.10);
  --glow:rgba(255,75,75,.26); --cardbg:#0C0B0B; --art:saturate(.4) contrast(1.06) brightness(.9)}
.pc.t-icon{--acc:#fff; --accs:#E9F4FF; --accb:rgba(255,255,255,.55); --acct:rgba(255,255,255,.12);
  --glow:rgba(150,200,255,.5); --cardbg:#0A0912; --art:saturate(1.14) contrast(1.04);
  background:linear-gradient(115deg,#7FD0FF,#FF8AD8,#FFDE8A,#8AFFD1,#B69CFF,#7FD0FF);
  background-size:280% 280%;
  animation:pcin .55s var(--ease) both, holo 7s linear infinite}
@keyframes holo{0%{background-position:0% 50%}100%{background-position:280% 50%}}
@keyframes pcin{0%{opacity:0; transform:scale(.9) rotate(-1.6deg)}100%{opacity:1; transform:none}}
.pc .shine{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.4) 50%,transparent 64%);
  transform:translateX(-130%); animation:sweep 1.05s .4s ease-out both}
@keyframes sweep{to{transform:translateX(130%)}}
.pc.t-rare .shine,.pc.t-black .shine,.pc.t-icon .shine{
  animation:sweep 1.05s .4s ease-out both, sweepLoop 4.6s 2.2s linear infinite}
@keyframes sweepLoop{0%{transform:translateX(-130%)}30%{transform:translateX(130%)}100%{transform:translateX(130%)}}
.pcin{position:relative; border-radius:24px; overflow:hidden; background:var(--cardbg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}

/* full-bleed art */
.pcart{position:relative; height:clamp(112px,calc(var(--vh)*.262),286px); background:#15120F}
.pcart img{width:100%; height:100%; object-fit:cover; object-position:50% 7%; display:block; filter:var(--art)}
.pcart::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,7,6,.5) 0%,rgba(8,7,6,0) 24%,rgba(10,9,8,.7) 62%,var(--cardbg) 100%)}

/* the score is the headline of the card */
.pcart::before{
  content:""; position:absolute; top:0; right:0; width:70%; height:62%; z-index:1; pointer-events:none;
  background:radial-gradient(135% 115% at right top, rgba(5,4,4,.72), rgba(5,4,4,.28) 46%, transparent 72%);
}
.pcscore{position:absolute; top:6px; right:14px; z-index:2; text-align:center}
.pcscore i{display:block; height:1px; background:var(--accb); margin:6px 2px 5px; opacity:.85}
.pcscore .rl{display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.18em; color:var(--accs);
  opacity:.85; margin-bottom:1px; text-shadow:0 1px 8px rgba(0,0,0,.95)}
.pcscore .rn{
  display:block; font-family:'Secular One',sans-serif; font-size:clamp(56px,min(21vw,calc(var(--vh)*.118)),98px); line-height:.8;
  color:var(--acc); letter-spacing:-.035em;
  text-shadow:0 6px 34px rgba(0,0,0,.9), 0 2px 2px rgba(0,0,0,.55);
}
.pcscore .rp{display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; color:var(--accs);
  text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* name plate over the art */
.pcplate{position:absolute; inset-inline:15px; bottom:12px; z-index:2}
.pcrank{display:none}
.pcrank{display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.2em; color:var(--acc)}
.pcname{font-family:'Secular One',sans-serif; font-size:clamp(19px,min(6.6vw,calc(var(--vh)*.036)),29px); line-height:1.02; margin:0 0 5px;
  color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.85); text-wrap:balance}
.pcclub{font-size:var(--t-xs); font-weight:700; color:rgba(246,242,233,.7); margin:0; line-height:1.35}

/* stat strip */
.pcstats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:calc(14px*var(--k)) 15px 0}
.ps{display:flex; flex-direction:column; align-items:center; gap:calc(5px*var(--k))}
.ps .e{line-height:0; display:grid; place-items:center; opacity:.95}
.ps .n{font-family:'Secular One',sans-serif; font-size:max(17px,calc(21px*var(--k))); line-height:.88}
.ps .t{width:100%; height:3px; border-radius:99px; background:rgba(255,255,255,.13); overflow:hidden}
.ps .f{display:block; height:100%; width:0; border-radius:99px; transition:width .9s .3s var(--ease)}
.ps .l{font-size:var(--t-xs); font-weight:700; color:var(--ink-3)}

.pcfoot{padding:calc(13px*var(--k)) 15px calc(16px*var(--k)); display:flex; flex-direction:column; gap:calc(9px*var(--k)); align-items:flex-start}
.pcv{font-size:var(--t-md); font-weight:700; line-height:1.4; color:var(--ink); margin:0; text-wrap:balance}
.pcl{font-size:var(--t-xs); font-weight:600; line-height:1.45; color:var(--ink-3); margin:0}
.pcpills{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.pcpct{font-size:var(--t-sm); font-weight:700; color:var(--ink-2); margin:0; display:flex; align-items:baseline; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:99px; padding:calc(6px*var(--k)) 12px}
.pcpct b{color:var(--ink); font-size:var(--t-sm)}
/* רק אחוזון באמת גבוה נצבע - כדי שהצבע יסמן הצטיינות ולא סתם יתלבש על גוון הדרגה */
.pcpct.elite{background:rgba(255,216,77,.10); border-color:rgba(255,216,77,.34)}
.pcpct.elite b{color:#FFD84D}
.pcpct span{font-size:var(--t-xs); color:var(--ink-3); font-weight:600}
.pccar{font-size:var(--t-sm); font-weight:700; color:var(--acc); display:flex; align-items:center; gap:7px; margin:0;
  background:var(--acct); border:1px solid var(--accb); border-radius:99px; padding:calc(6px*var(--k)) 12px}

/* tier chip on the artwork */
.pctier{position:absolute; top:14px; inset-inline-end:14px; z-index:2; display:flex; align-items:center; gap:5px;
  font-size:var(--t-xs); font-weight:700; letter-spacing:.06em; color:var(--accs); padding:5px 10px; border-radius:99px;
  background:rgba(9,8,7,.5); border:1px solid var(--accb);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.pctier em{font-style:normal; font-size:var(--t-xs)}

/* quiet text lines instead of grey boxes */
.after{background:var(--glass); border:1px solid var(--line); border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); overflow:hidden}
.line{position:relative; margin:0; font-size:var(--t-sm); font-weight:600; line-height:1.5;
  color:var(--ink-2); padding:calc(10px*var(--k)) 13px; padding-inline-start:27px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.line:last-child{border-bottom:0}
.line::before{content:""; position:absolute; inset-inline-start:13px; top:calc(16px*var(--k));
  width:5px; height:5px; border-radius:50%; background:var(--ink-3)}
.line b{color:var(--ink); font-weight:700}
.line.miss::before{background:var(--gold)}
.line.miss b{color:var(--gold)}
.line.meta{color:var(--ink-3); font-size:var(--t-xs)}
.line.meta::before{background:rgba(255,255,255,.2)}
.line.meta b{color:var(--ink-2)}
/* שורת ההיכל במסך הסיום: אותה שורה של הפאנל, אבל לחיצה */
.line.hall{font:inherit; width:100%; text-align:start; cursor:pointer; color:var(--gold);
  font-size:var(--t-sm); font-weight:700; background:rgba(255,200,31,.06); border:0;
  border-top:1px solid rgba(255,255,255,.06)}
.line.hall::before{background:var(--gold)}
.line.hall b{color:#fff}
.line.hall:hover{background:rgba(255,200,31,.12)}
.line.hall:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.legal{font-size:var(--t-xs); line-height:1.6; color:#6C655A; font-weight:600; text-align:center;
  margin:calc(8px*var(--k)) 0 0; max-width:none; padding:0 2px}
.end .legal{margin-top:calc(9px*var(--k)); padding-bottom:2px}

/* סמלי המדדים - יורשים את צבע המדד */
svg.ic{display:block; fill:currentColor; flex:none}

/* ---------- בקשת תמיכה ----------
   הרגיסטר כאן שונה משאר המשחק בכוונה: לא עוד מסך ממשק אלא פתק אישי.
   מה שיוצר את זה: מסגרת זהב אמיתית (אותה שפה של כרטיס השחקן), הברקה
   חד פעמית שרצה רק על קלפים נדירים, גבישה עליונה, קו מופרד בכוכב,
   וחתימה בתחתית. */
.supframe{
  position:relative; width:100%; max-width:420px; margin:0 auto; cursor:default;
  padding:2px 2px 0; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden;
  background:linear-gradient(168deg,#FFF0BE,#FFC81F 24%,#8A6100 62%,#FFD95E 92%);
  box-shadow:0 -28px 70px -18px rgba(0,0,0,.95), 0 0 80px -24px rgba(255,200,31,.5);
  animation:up .38s var(--ease) both;
}
/* הברקה: אותה תנועה שמסמנת קלף נדיר במשחק */
.supsheen{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-130%); animation:sweep 1.15s .45s ease-out both;
}
.supin{
  text-align:center; max-height:calc(var(--vh)*.94); overflow-y:auto; scrollbar-width:none;
  /* רצפה לריווח התחתון: מוכפל ב-k הוא ירד ל-8 פיקסל במסך קטן והשורה
     האחרונה נראתה נצמדת לקצה. */
  padding-bottom:calc(max(15px, 20px*var(--k)) + env(safe-area-inset-bottom));
  border:0; border-radius:calc(var(--r-xl) - 2px) calc(var(--r-xl) - 2px) 0 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,200,31,.13), transparent 62%),
    linear-gradient(180deg,#221B12,#0C0A09 78%);
  animation:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.supin::-webkit-scrollbar{display:none}
/* גבישה עליונה: מכריזה על הרגיסטר לפני שקוראים מילה */
.supin>.grab{margin-bottom:calc(9px*var(--k))}
.supeyebrow{display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 calc(10px*var(--k))}
.supeyebrow span{font-size:var(--t-xs); font-weight:700; letter-spacing:.34em; color:var(--gold);
  opacity:.9; padding-inline-start:.34em}
.supeyebrow::before,.supeyebrow::after{content:""; width:34px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,200,31,.55))}
.supeyebrow::after{background:linear-gradient(270deg,transparent,rgba(255,200,31,.55))}
.supface{width:max(54px,calc(76px*var(--k))); aspect-ratio:1; border-radius:50%; overflow:hidden;
  margin:0 auto calc(9px*var(--k)); background:#15120F;
  border:2px solid rgba(255,214,120,.85); box-shadow:0 0 34px -6px rgba(255,200,31,.6)}
.supface img{width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block}
.suphead{font-family:'Secular One',sans-serif; font-weight:400; font-size:max(22px,calc(29px*var(--k)));
  line-height:1.08; margin:0; text-wrap:balance;
  background:linear-gradient(172deg,#FFF3CE,var(--gold) 52%,#D89B00);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.supyou{font-size:var(--t-sm); font-weight:700; color:var(--ink-2); margin:calc(6px*var(--k)) 0 0}
.supyou b{color:var(--gold); font-variant-numeric:tabular-nums}
/* קו מופרד בכוכב, במקום קו שטוח */
.suprule{display:flex; align-items:center; justify-content:center; gap:9px;
  margin:calc(11px*var(--k)) auto; max-width:250px; color:var(--gold)}
.suprule i{flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(255,200,31,.5),transparent)}
.suprule svg{fill:currentColor; flex:none; opacity:.85}
/* במסך נמוך מאוד הכיווץ מגיע לרצפה כי הטיפוגרפיה על גדלי המינימום.
   הקו המעוטר הוא הדבר היחיד פה שהוא קישוט בלבד, ולכן הוא הראשון לצאת. */
@media (max-height:585px){
  .suprule{display:none}
  .supeyebrow{margin-bottom:calc(5px*var(--k))}
  .supface{margin-bottom:calc(6px*var(--k))}
}
.supbody{font-size:var(--t-sm); line-height:1.52; color:#CFC5B3; margin:0 auto calc(15px*var(--k));
  font-weight:600; max-width:33ch}
.supbody b{color:#FFF; font-weight:700}
.supamts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px}
.supamt{position:relative; display:grid; place-items:center; min-height:max(44px,calc(54px*var(--k)));
  font:inherit; font-weight:700; font-size:var(--t-lg); color:var(--ink-2); cursor:pointer;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md);
  transition:background .16s, border-color .16s, color .16s, transform .12s var(--ease)}
.supamt:hover{border-color:rgba(255,200,31,.45); color:var(--ink)}
.supamt:active{transform:scale(.97)}
.supamt.on{color:#241A04; border-color:transparent;
  background:linear-gradient(176deg,#FFE9A3,var(--gold) 55%,#E2A400);
  box-shadow:0 8px 22px -10px rgba(255,200,31,.75)}
.supamt .tag{position:absolute; top:-9px; inset-inline-start:50%; transform:translateX(50%);
  font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--gold); background:#1A1408;
  border:1px solid rgba(255,200,31,.5); border-radius:999px; padding:2px 9px; white-space:nowrap}
.supgo{display:flex; align-items:center; justify-content:center; gap:9px}
.supgo svg{fill:currentColor; flex:none}
.amt{font-style:normal; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.suphint{font-size:var(--t-xs); color:var(--ink-3); margin:9px 0 0; line-height:1.5}
.supqr{display:flex; align-items:center; gap:14px; text-align:start;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,200,31,.22);
  border-radius:var(--r-md); padding:12px; margin-bottom:6px}
.supqr img{border-radius:8px; flex:none; background:#fff; padding:5px}
.supqr span{font-size:var(--t-sm); font-weight:700; color:var(--ink-2); line-height:1.5}
.supqr em{font-style:normal; font-size:var(--t-xs); color:var(--ink-3); font-weight:600}
/* חתימה: מה שהופך את זה מבקשה לפתק */
.supsig{display:flex; align-items:baseline; justify-content:center; gap:8px; margin:calc(13px*var(--k)) 0 0}
.supsig b{font-family:'Secular One',sans-serif; font-weight:400; font-size:max(16px,calc(20px*var(--k)));
  color:var(--gold-lt); letter-spacing:.01em}
.supsig span{font-size:var(--t-xs); font-weight:600; color:var(--ink-3); letter-spacing:.08em}
.supsig span::before{content:"· "}
/* יציאות שקטות, שלא מתחרות בפעולה */
.supexit{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:calc(8px*var(--k))}
.suplink{font:inherit; font-size:var(--t-sm); font-weight:700; color:var(--ink-2); background:none; border:0;
  padding:8px 6px; cursor:pointer; min-height:44px}
.suplink.quiet{color:var(--ink-3); font-weight:600}
.suplink:hover{color:var(--ink)}
.suplink:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
.supdot{color:#4A443B}
.supsign{font-size:var(--t-xs); color:var(--ink-3); margin:6px 0 0; line-height:1.5}
.supopen{
  font:inherit; font-size:var(--t-sm); font-weight:700; color:var(--gold);
  display:flex; align-items:center; gap:7px; margin:2px auto 0; cursor:pointer;
  background:rgba(255,200,31,.10); border:1px solid rgba(255,200,31,.40);
  border-radius:999px; padding:calc(9px*var(--k)) 17px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 24px -9px rgba(255,200,31,.45);
  transition:transform .12s var(--ease), background .18s, border-color .18s;
}
.supopen svg{fill:currentColor; display:block; flex:none}
.supopen:hover{background:rgba(255,200,31,.19); border-color:var(--gold)}
.supopen:active{transform:scale(.97)}
.supopen:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- תוצאת הימור ---------- */
.supverdict{font-family:'Secular One',sans-serif; font-size:var(--t-sm); letter-spacing:.18em;
  margin:0 0 8px; text-transform:none}
.supverdict.won{color:var(--gold)}
.supverdict.lost{color:var(--tik)}
.odds{font-size:var(--t-xs); font-weight:700; color:var(--gold); background:rgba(255,200,31,.12);
  border:1px solid rgba(255,200,31,.3); border-radius:999px; padding:2px 7px; margin-inline-end:2px;
  font-variant-numeric:tabular-nums}

/* =====================================================================
   עור העיצוב. נטען בסוף הגיליון ולכן גובר על ההצהרות שמעליו.
   Heebo ו-Rubik נטענים מהתגית בראש הדף, לא ב-@import.
   ===================================================================== */


:root{
  --bg:#08090C;
  --gold:#FFB800; --gold-lt:#FFD979; --gold-dk:#A87700;
  --kavod:#FFB800; --kis:#10E599; --tik:#FF3B30; --ima:#FF6BB5;
  --ink:#FFFFFF; --ink-2:#9AA3B2; --ink-3:#6B7280;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.22);
  --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.08);
  --r-xl:26px; --r-lg:16px; --r-md:14px; --r-sm:10px;
}
body{font-family:'Heebo',ui-sans-serif,system-ui,Arial,sans-serif; font-weight:500}
.d,.logo,.mnum,.gnum,.pcname,.pcscore .rn,.chage,.suphead,.altitle,.alnum,.hrow .vl,.hrow .pl,.ps .n,.cnum{
  font-family:'Rubik','Heebo',sans-serif; font-weight:900; letter-spacing:-.02em}
.hudname b{font-family:'Rubik',sans-serif; font-weight:900}

/* רקע: שתי הילות במקום שלוש, לפי הייחוס */
body::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,184,0,.10) 0%, transparent 62%),
    radial-gradient(circle at 100% 100%, rgba(0,240,255,.06) 0%, transparent 58%);
  filter:none; inset:0}

/* ---------- כותרת ---------- */
.chipn{background:rgba(255,255,255,.04); border-color:var(--line); color:#CBD3E1;
  font-weight:600; font-size:var(--t-xs); display:flex; align-items:center; gap:6px}
.chipn::before{content:""; width:7px; height:7px; border-radius:50%; background:#FACC15;
  box-shadow:0 0 0 0 rgba(250,204,21,.7); animation:pingdot 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes pingdot{70%{box-shadow:0 0 0 7px rgba(250,204,21,0)}100%{box-shadow:0 0 0 0 rgba(250,204,21,0)}}
#age{color:rgba(251,191,36,.85); font-weight:700; letter-spacing:.04em}

/* ---------- טבעות המחוונים ---------- */
.gauges{gap:10px}
.gcell{gap:5px}
.ring{width:max(44px,calc(56px*var(--k))); height:max(44px,calc(56px*var(--k))); border-radius:50%;
  padding:3px; display:grid; place-items:center;
  background:conic-gradient(currentColor calc(var(--p,0) * 1%), #20242D 0);
  transition:background .5s var(--ease)
  box-shadow:0 0 16px -3px currentColor}
.ring > svg{display:none}
.ring em{position:static; inset:auto; width:100%; height:100%; border-radius:50%;
  background:#11141A; display:grid; place-items:center}
.gnum{font-size:max(12px,calc(14px*var(--k))); color:#fff; line-height:1}
.glab{font-size:max(9px,calc(10px*var(--k))); color:var(--ink-3); font-weight:600}

/* ---------- פאנל המדד ---------- */
.xp{background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.06); border-radius:var(--r-md);
  padding:calc(9px*var(--k)) 10px; display:flex; flex-direction:column; gap:calc(6px*var(--k));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.xptop{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px}
.xplab{font-size:var(--t-xs); font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:6px}
.xplab .mnum{font-size:max(13px,calc(15px*var(--k))); color:var(--gold); line-height:1}
.mdrag{margin:0; font-size:max(10px,calc(11px*var(--k))); font-weight:700; color:#FDE68A;
  display:flex; align-items:center; gap:5px; animation:xppulse 3s ease-in-out infinite}
.mdrag b{color:#FBBF24; font-weight:900}
.mdrag b + b, .mdrag > b:last-child{color:#F87171; font-weight:700}
@keyframes xppulse{0%,100%{opacity:.92}50%{opacity:1}}
.meter{gap:0}
.mtrack{height:8px; background:#262A33; border-radius:99px; box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.mtrack i{background:linear-gradient(270deg,#FCD34D,#FBBF24 45%,#B45309);
  box-shadow:0 0 12px var(--gold)}

/* ---------- כרטיס הסצנה ---------- */
.card{border-radius:24px; border-color:var(--line);
  background:linear-gradient(180deg,rgba(38,42,51,.6),#000);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.95)}
.photo{height:clamp(120px,calc(var(--vh)*.30),248px)}
.photo::after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 34%,#12161D 100%)}
.cbody{background:#12161D; border-top:1px solid rgba(255,255,255,.05);
  margin-top:0; padding:calc(13px*var(--k)) 14px; position:static}
.q{text-align:center; font-family:'Rubik','Heebo',sans-serif; font-weight:800;
  font-size:max(15px,calc(19px*var(--k))); line-height:1.3; letter-spacing:-.02em; color:#F3F4F6}
/* מונה ההחלטות כגלולה על התמונה, עם שעון עצר */
.lbl{position:absolute; z-index:2; inset-inline-start:12px; text-transform:none; letter-spacing:0;
  top:calc(clamp(120px,calc(var(--vh)*.30),248px) - 30px);
  display:inline-flex; align-items:center; gap:5px; color:#FCD34D; font-weight:800;
  font-size:max(10px,calc(11px*var(--k))); padding:4px 10px; border-radius:99px;
  background:rgba(0,0,0,.75); border:1px solid rgba(245,158,11,.32);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lbl::before{content:""; width:11px; height:11px; flex:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FBBF24'><path d='M12 2.6a9.4 9.4 0 100 18.8 9.4 9.4 0 000-18.8zm1 9.9V6.6h-2v7l4.6 2.8 1-1.7-3.6-2.2z'/></svg>") center/contain no-repeat}
/* חפיסת הקלפים שמאחור: על רקע כמעט שחור הרוחים המקוריים נעלמו ונראו כמו חור */
.ghost{background:#141922; border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.ghost.g2{opacity:.5}

/* ---------- בחירות ---------- */
.opt{background:#181C24; border-radius:var(--r-lg); border-color:var(--line);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 4px 18px rgba(0,0,0,.55);
  font-weight:700; font-size:max(13px,calc(15px*var(--k))); color:#F3F4F6}
.opt:hover{border-color:rgba(251,191,36,.5); box-shadow:0 0 15px rgba(255,184,0,.16)}
.opt.hot{background:#1B1920; border-color:rgba(255,59,48,.32);
  box-shadow:0 0 15px rgba(255,59,48,.12)}
.opt.hot:hover{border-color:rgba(255,59,48,.62)}
.odds{border-radius:9px; padding:4px 8px; font-family:'Rubik',sans-serif; font-weight:900;
  font-size:max(10px,calc(12px*var(--k))); background:rgba(245,158,11,.10);
  border-color:rgba(251,191,36,.32); color:#FBBF24; margin-inline-end:4px}
.opt.hot .odds{background:rgba(239,68,68,.10); border-color:rgba(248,113,113,.32)}

/* ---------- פסי ההתקדמות ---------- */
.dots i{height:4px; width:16px; background:rgba(255,255,255,.10)}
.dots i.done{background:rgba(255,184,0,.45)}
.dots i.now{width:32px; background:var(--gold); box-shadow:0 0 8px var(--gold)}

/* ---------- מקרא ---------- */
.legend{color:var(--ink-3); font-weight:600; line-height:1.6}
.legend b{color:var(--gold); font-weight:800}

/* קישור למשחק השני. יושב בשטח הפנוי של האוסף, ולכן לא מוסיף גובה לאף מסך צר. */
.crosslink{flex:none; margin:calc(10px*var(--k)) 0 0; text-align:center;
  font-size:max(11px,calc(12px*var(--k))); font-weight:600; color:var(--ink-3)}
.crosslink a{color:var(--gold); font-weight:800; text-decoration:underline;
  text-decoration-color:rgba(255,184,0,.4); text-underline-offset:2px}

/* ---------- היכל התהילה ---------- */
/* השורה שלך בזהב החדש, ובולטת מספיק כדי למצוא אותה במבט אחד בטבלה ארוכה */
.hrow.me{background:rgba(255,184,0,.14); border-color:rgba(255,184,0,.55);
  box-shadow:0 0 0 1px rgba(255,184,0,.18), 0 0 16px -4px rgba(255,184,0,.35)}
.hrow.me .nm{color:var(--gold-lt)}
.hgap{color:var(--ink-3); letter-spacing:.3em}

/* ---------- כפתורים ---------- */
.btn.primary{background:linear-gradient(175deg,#FFD979,#FFB800 46%,#D89400); color:#120E02}
.btn{border-radius:var(--r-lg)}
/* בפינת כרטיס הסוף יש מקום ללוחית הציון בלבד. הכיתוב והדרג עברו לשורה מעל השם. */
.pcscore .rl, .pcscore i, .pcscore .rp{display:none}

/* =====================================================================
   עדכון החוויה. כל מה שכאן נטען אחרי הגיליון ולכן גובר עליו.
   ===================================================================== */

/* ---------- גרעין: שכבת מרקם דקה מעל הכל, כדי שהשחור לא יהיה שטוח ---------- */
#grain{position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size:120px 120px}
@media (prefers-reduced-motion:reduce){#grain{display:none}}

/* ---------- מסך הפרק: מלוא המסך, לא עיגול קטן ---------- */
/* המקור הוא grid עם place-items:center, ושם align-self:end השאיר
   את הריפוד התחתון בולט 6 פיקסלים מהמסגרת. flex מיישר מדויק. */
.chapter{background:#05060A; display:flex; align-items:flex-end}
.chbg{position:absolute; inset:0; overflow:hidden}
.chbg img{width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  transform:scale(1.06); animation:chzoom 2.6s ease-out both}
@keyframes chzoom{0%{transform:scale(1.14)}100%{transform:scale(1.04)}}
.chbg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,6,10,.55) 0%,rgba(5,6,10,.35) 30%,rgba(5,6,10,.92) 78%,#05060A 100%)}
.chin{position:relative; z-index:2; padding:0 22px calc(var(--vh)*.05);
  width:100%; animation:chrise .55s var(--ease) both}
@keyframes chrise{0%{opacity:0; transform:translateY(16px)}100%{opacity:1; transform:none}}
.chph{display:none}
.chact{font-size:max(10px,calc(11px*var(--k))); font-weight:800; letter-spacing:.3em;
  color:var(--gold); margin-bottom:6px}
.chage{font-family:'Rubik','Heebo',sans-serif; font-weight:900; letter-spacing:-.04em;
  font-size:max(44px,calc(64px*var(--k))); color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.7)}
.chsub{font-size:max(11px,calc(13px*var(--k))); letter-spacing:.2em; color:var(--gold);
  margin-top:4px; font-weight:800}
.chsay{font-size:max(13px,calc(15px*var(--k))); font-weight:600; color:#C9CFD8;
  margin:calc(12px*var(--k)) 0 0; line-height:1.45; max-width:30ch; text-wrap:balance}
/* מסילת המערכות: ארבע מקטעים, זו שנפתחת נדלקת */
.chrail{display:flex; gap:5px; margin-top:calc(16px*var(--k))}
.chrail i{height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.14)}
.chrail i.past{background:rgba(255,184,0,.45)}
.chrail i.now{background:var(--gold); box-shadow:0 0 10px var(--gold)}
.chskip{font-size:max(9px,calc(10px*var(--k))); color:var(--ink-3); font-weight:700;
  letter-spacing:.14em; margin:calc(8px*var(--k)) 0 0}
/* מסך הפרק הוא שכבה מעל הכל ואינו נמדד ע"י מנוע ההתאמה, ולכן
   הוא חייב לגדור את עצמו במסכים קצרים. */
.chapter{overflow:hidden}
@media (max-height:600px){
  .chage{font-size:max(36px,calc(50px*var(--k)))}
  .chsay{font-size:max(12px,calc(13px*var(--k)))}
  .chskip{display:none}
}

/* ---------- הקלף נשלף מהחפיסה ---------- */
.card.in{animation:deal .42s cubic-bezier(.2,.9,.24,1) both}
@keyframes deal{
  0%{opacity:0; transform:translateY(20px) rotate(-3.4deg) scale(.95)}
  60%{opacity:1}
  100%{opacity:1; transform:none}}

/* ---------- אזהרה: כשהתיק מתמלא, הטבעת שלו פועמת ---------- */
.g.warn .ring{animation:tikpulse 1.5s ease-in-out infinite}
.g.warn .gnum{color:var(--tik)}
@keyframes tikpulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,59,48,0))}
  50%{filter:drop-shadow(0 0 9px rgba(255,59,48,.85))}}

/* ---------- האופציה המסוכנת: ברק עדין שעובר עליה פעם אחת ---------- */
.opt.hot{position:relative; overflow:hidden}
.opt.hot::after{content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,59,48,.16),transparent);
  animation:hotsweep 3.4s ease-in-out 1.2s infinite}
@keyframes hotsweep{0%{inset-inline-start:-40%}55%,100%{inset-inline-start:110%}}
@media (prefers-reduced-motion:reduce){.opt.hot::after,.g.warn .ring,.card.in{animation:none}}

/* ---------- הסיפור של הסבב: שורה לחיצה בכרטיס הסוף ----------
   חייבת את אותו איפוס כפתור של שורת ההיכל, אחרת ה-button נשאר
   ברוחב התוכן ועם הרקע המקורי של הדפדפן. */
.line.story{font:inherit; width:100%; text-align:start; cursor:pointer; border:0;
  border-top:1px solid rgba(255,255,255,.06); background:rgba(255,184,0,.05);
  color:var(--gold); font-size:var(--t-sm); font-weight:800; padding-inline-end:28px}
.line.story::before{background:var(--gold)}
.line.story b{color:#fff}
.line.story:hover{background:rgba(255,184,0,.11)}
.line.story:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
/* חץ קטן, כדי שיהיה ברור שיש לאן ללחוץ */
.line.story::after{content:""; position:absolute; inset-inline-end:13px; top:50%;
  width:6px; height:6px; margin-top:-3px; border-inline-start:2px solid var(--gold);
  border-block-start:2px solid var(--gold); transform:rotate(-45deg)}

/* ---------- גיליון הסיפור ---------- */
.storyin{max-height:calc(var(--vh) * .86); overflow:hidden;
  display:flex; flex-direction:column}
.storyhead{flex:none; text-align:center; margin-bottom:calc(10px*var(--k))}
.storyhead h2{font-family:'Rubik','Heebo',sans-serif; font-weight:900; font-size:max(19px,calc(23px*var(--k)));
  margin:0; letter-spacing:-.02em}
.storyhead p{font-size:max(11px,calc(12px*var(--k))); color:var(--ink-3); margin:4px 0 0; font-weight:600}
/* עקומת המדד: שמונה נקודות על הציר, כדי לראות איפה זה נשבר */
.spark{flex:none; height:calc(44px*var(--k)); min-height:34px; margin:calc(8px*var(--k)) 0 calc(12px*var(--k));
  position:relative}
.spark svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.slist{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:5px; scrollbar-width:none}
.slist::-webkit-scrollbar{display:none}
.srow{display:flex; align-items:center; gap:9px; padding:calc(7px*var(--k)) 11px;
  background:#12161D; border:1px solid var(--line); border-radius:12px; text-align:start}
.srow .sn{font-family:'Rubik','Heebo',sans-serif; font-weight:900; font-size:max(11px,calc(12px*var(--k)));
  color:var(--ink-3); width:1.6em; flex:none; text-align:center}
.srow .st{flex:1; min-width:0; font-size:max(11.5px,calc(13px*var(--k))); font-weight:700; color:#E7EAEE;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* מספר עם סימן חייב בידוד דו-כיווני, אחרת הפלוס מתיישב מימין
   לספרה ו-"12+" נקרא כמו שגיאה. אותו טיפול כמו ב-.cg i וב-.amt. */
.srow .sd{font-family:'Rubik','Heebo',sans-serif; font-weight:900; flex:none;
  font-size:max(12px,calc(14px*var(--k)));
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.srow .sd.up{color:var(--kis)} .srow .sd.dn{color:var(--tik)} .srow .sd.flat{color:var(--ink-3)}
.srow.worst{border-color:rgba(255,59,48,.45); background:#1B1519}
.srow.worst .sn{color:var(--tik)}
.srow.best{border-color:rgba(16,229,153,.35); background:#101A18}
.srow.best .sn{color:var(--kis)}

/* ===== תיקון חיתוך במסכים נמוכים =====
   שני כשלים שהצטרפו לאחד.

   הראשון: גובה התמונה לא הושפע מ---k, ולכן כיווץ המקדם כמעט לא
   הקטין את הקלף. במסך נמוך הקלף נשאר גבוה מהמעטפת, ומכיוון
   שהמעטפת היא פריט flex עם min-height:0 היא חתכה אותו בשקט.

   השני, והוא שהחזיק את הבאג גם אחרי התיקון הראשון: הגלולה של מונה
   ההחלטות חישבה את המיקום שלה מנוסחת גובה התמונה, מועתקת. ברגע
   שהתמונה התכווצה הגלולה נשארה במקום הישן, נפלה מתחת לתמונה על
   גוף הקלף, ובלטה מהמסגרת. הגובה מוגדר מעתה פעם אחת במשתנה
   ושתי ההצהרות קוראות ממנו, ולכן הן לא יכולות להיפרד שוב.
   במסכים גבוהים k שווה 1 והגובה יוצא זהה למה שהיה. */
/* רצפת 64 פיקסלים ולא 92: כשהמנוע מגיע ל-MIN_K במסך קצר במיוחד,
   עדיף פס איור נמוך מאשר שאלה חתוכה. בגבהים רגילים הרצפה לא נוגעת. */
:root{ --photoh: clamp(64px, calc(var(--vh) * .30 * var(--k)), 248px) }
.photo{height:var(--photoh)}
.lbl{top:calc(var(--photoh) - 30px)}

/* מתחת ל-470 פיקסלים גובה, בעיקר טלפון שהופנה לרוחב, אין דרך להושיב
   איור, שאלה ושלוש בחירות עם יעד נגיעה של 44 פיקסלים. במקום לחתוך את
   השאלה האיור נופל, והמונה עובר לזרימה הרגילה. */
@media (max-height:470px){
  .photo{display:none}
  .lbl{position:static; top:auto; display:inline-flex; margin:0 auto calc(6px*var(--k))}
  .deckwrap{text-align:center}
  .cbody{border-top:0; border-radius:var(--r-xl)}
}

/* ===== מקדם רוחב =====
   עד היום הסולם הטיפוגרפי היה max(רצפה בפיקסלים, גודל כפול --k),
   ו---k נגזר מגובה בלבד. התוצאה: מ-280 ועד 412 פיקסל רוחב הטקסט קפא
   על אותו גודל בדיוק, 15 פיקסלים לשאלה ו-13 לבחירות, כי כולם שכבו על
   הרצפה. במסך צר זה נשבר ליותר שורות ולא היה ממה לקצץ.
   fit.js מחשב עכשיו --w, שהוא 1 ברוחב 390 ומעלה ויורד עד .78 במסכים
   צרים, וכל הסולם מוכפל בו כך שגם הרצפות זזות. מסך 390 ומעלה יוצא
   זהה לחלוטין למה שהיה, ולכן אין סיכון לרוב המכשירים. */
:root{
  --w:1;   /* ברירת מחדל, אם fit.js לא רץ הכל נשאר כמו היום */
  --t-xl:max(calc(16px*var(--w)),calc(19px*var(--k)*var(--w)));
  --t-lg:max(calc(14.5px*var(--w)),calc(17px*var(--k)*var(--w)));
  --t-md:max(calc(13px*var(--w)),calc(15px*var(--k)*var(--w)));
  --t-sm:max(calc(11.5px*var(--w)),calc(13px*var(--k)*var(--w)));
  /* שלושה איברים: רצפה שמתכווצת עם הרוחב, רצפת קריאות מוחלטת שלא
     נעברת בשום מסך, והגודל עצמו. ב---w=1 האיבר הראשון שווה לרצפה
     המקורית, ולכן מסך 390 ומעלה יוצא זהה בדיוק למה שהיה. */
  --t-xs:max(calc(10px*var(--w)),8.5px,calc(11px*var(--k)*var(--w)));
}

/* אלה מגדירים גודל בעצמם ולא דרך הסולם, ולכן צריכים את המקדם בנפרד */
.gnum{font-size:max(calc(12px*var(--w)),calc(14px*var(--k)*var(--w)))}
.glab{font-size:max(calc(9px*var(--w)),8px,calc(10px*var(--k)*var(--w)))}
.xplab .mnum{font-size:max(calc(13px*var(--w)),calc(15px*var(--k)*var(--w)))}
.mdrag{font-size:max(calc(10px*var(--w)),calc(11px*var(--k)*var(--w)))}
.q{font-size:max(calc(14px*var(--w)),calc(19px*var(--k)*var(--w)))}
.lbl{font-size:max(calc(10px*var(--w)),8.5px,calc(11px*var(--k)*var(--w)))}
.opt{font-size:max(calc(13px*var(--w)),calc(15px*var(--k)*var(--w)))}
.odds{font-size:max(calc(10px*var(--w)),9px,calc(12px*var(--k)*var(--w)))}
.pcname{font-size:max(calc(22px*var(--w)),calc(29px*var(--k)*var(--w)))}
.pcscore .rn{font-size:max(calc(54px*var(--w)),calc(76px*var(--k)*var(--w)))}

/* טבעות המחוונים אינן יעד נגיעה, ולכן הן מתכווצות עם הרוחב.
   יעד הנגיעה של הבחירות נשאר 44 פיקסלים בכל מצב: זו נגישות ולא עיצוב. */
.ring{width:max(calc(40px*var(--w)),calc(56px*var(--k)*var(--w)));
      height:max(calc(40px*var(--w)),calc(56px*var(--k)*var(--w)))}
.gauges{gap:calc(10px*var(--w))}

/* רצפת שורות באלבום: 92 פיקסלים קבועים גרמו לרשת לחרוג במסך צר,
   ושם --k לא עוזר כי הוא לא מופיע בנוסחה בכלל. */
.algrid{grid-template-columns:repeat(auto-fill,minmax(calc(92px*var(--w)),1fr))}

/* איור כרטיס הסוף, אותה בעיה בדיוק כמו איור הקלף: רצפה קבועה
   שלא מגיבה לכיווץ. במסך גבוה k שווה 1 והגובה יוצא זהה. */
.pcart{height:clamp(88px, calc(var(--vh) * .262 * var(--k)), 286px)}

/* ===== מסכים צרים במיוחד =====
   רצפת מקדם הרוחב הייתה .78, כלומר מתחת ל-305 פיקסלים רוחב הכל קפא
   שוב על אותו גודל. ב-256 פיקסלים הטקסט יצא גדול מדי לרוחב, הבחירות
   נשברו לשלוש וארבע שורות והכפתורים תפחו ל-88 פיקסלים.
   הרצפה יורדת ל-.60, כך שההקטנה נמשכת עד בערך 234 פיקסלים, ומעל 390
   --w שווה 1 ושום דבר לא זז. מצמצמים רק כשצריך. */

/* הפס העליון: הטבעות, הרווחים והכיתוב. זה הבלוק שאוכל את הגובה
   בראש המסך, והוא היה כמעט קבוע. */
.ring{width:max(calc(32px*var(--w)),calc(56px*var(--k)*var(--w)));
      height:max(calc(32px*var(--w)),calc(56px*var(--k)*var(--w)))}
.hud{gap:calc(11px*var(--k)*var(--w))}
.hudtop{gap:calc(10px*var(--w))}
.hudname{gap:calc(7px*var(--w))}
.hudname b{font-size:max(calc(17px*var(--w)),calc(21px*var(--k)*var(--w)))}
.chipn{padding:calc(4px*var(--w)) calc(11px*var(--w))}
.gauges{gap:calc(10px*var(--w))}
.gcell{gap:calc(5px*var(--w))}
.gnum{font-size:max(calc(12px*var(--w)),9.5px,calc(14px*var(--k)*var(--w)))}

/* רצפות קריאות למסכים הצרים. המדידה הראתה של---k נשאר מרווח של
   0.69 עד 0.80 שם, כלומר אפשר להרשות טקסט גדול יותר ולתת למנוע
   הגובה לספוג את שבירת השורות. בלי זה הטקסט ירד ל-7.8 פיקסלים. */
.q{font-size:max(calc(14px*var(--w)),10.5px,calc(19px*var(--k)*var(--w)))}
.opt{font-size:max(calc(13px*var(--w)),10px,calc(15px*var(--k)*var(--w)))}

/* פאנל המדד */
.xp{padding:calc(9px*var(--k)*var(--w)) calc(10px*var(--w)); gap:calc(6px*var(--k)*var(--w))}
.mtrack{height:max(5px,calc(8px*var(--w)))}

/* הבחירות: הריווח הפנימי והמרווח ביניהן. יעד הנגיעה נשאר 44. */
.opt{padding:calc(12px*var(--k)*var(--w)) calc(14px*var(--w)); gap:calc(10px*var(--w))}
.opts{gap:calc(9px*var(--k)*var(--w))}
.odds{padding:calc(4px*var(--w)) calc(8px*var(--w)); margin-inline-end:calc(4px*var(--w))}

/* גוף הקלף */
.cbody{padding:calc(13px*var(--k)*var(--w)) calc(14px*var(--w))}
.lbl{inset-inline-start:calc(12px*var(--w)); padding:calc(4px*var(--w)) calc(10px*var(--w))}

/* המעטפת של המשחק: הריפוד הצדי מתכווץ, וזה מחזיר רוחב לטקסט עצמו */
#app{padding-inline:calc(14px*var(--w))}

/* ===== מסך הבחירה: הגרסה המצומצמת שאושרה =====
   נמחקו חמש כפילויות. שום מידע ייחודי לא ירד.
   1. "החלטה 1 מתוך 8": שמונה הנקודות למטה אומרות את זה.
   2. "הכיס ריק": חוזר על טבעת הכיס שממילא נראית נמוכה.
   3. "18 נקודות פחות": מספר נגזר, ליד המספר שממנו הוא נגזר.
   4. המקרא: עבר להצגה פעם אחת למכשיר במקום פעם בכל סבב.
   5. "עוד לא החלטת מי אתה": טקסט אווירה. */
.chipn{display:none}
.lbl{display:none}
.mdrag{display:none}
/* פאנל המדד מתכנס לפס אחד עם המספר מעליו */
.xp{padding:0; background:none; border:0; gap:0;
  backdrop-filter:none; -webkit-backdrop-filter:none}
.xptop{position:absolute; inset-inline-end:2px; top:-1px; z-index:2; gap:0}
.xplab{font-size:max(9px,calc(10px*var(--k)*var(--w))); color:var(--ink-3); letter-spacing:.06em}
.meter{position:relative}
.mtrack{height:max(6px,calc(9px*var(--w)))}
.hud{gap:calc(9px*var(--k)*var(--w))}
/* הגובה שהתפנה הולך לשאלה ולאיור, לא לאוויר */
.q{font-size:max(calc(15px*var(--w)),11px,calc(21px*var(--k)*var(--w)))}



/* ===== מסך הסיום: הגרסה הנקייה =====
   הספירה הייתה 28 פריטי טקסט ו-409 תווים. הכרטיס נשא תשעה נתונים
   על הדמות מעל ארבעת המחוונים, ואחריו עוד חמש שורות.
   מה שירד: האחוזון (נתון על הסבב, שהתחרה בציון עצמו), שורת המקצוע
   והדוחות (חזרה חלקית על המחוונים), הרכב (נתון חמישי), הכתובית
   המורכבת, מונה האוסף (יש כפתור אוסף בבית), רגע השבירה, ושורת
   ה"כמעט". מה שנשאר: הציון, השם, ארבעת המחוונים, הוורדיקט,
   ושורת הסיפור שפותחת את כל הפירוט למי שרוצה אותו. */
.pcpct, .pcl, .pccar, .pcclub{display:none}
#endCollect, #broke, #nearmiss{display:none}

/* ===== הכרטיס נמתח לכל הגובה הפנוי =====
   היה margin-top:auto שדחף אותו למטה ו-flex:none שמנע ממנו לגדול,
   ולכן בכל מסך גבוה נשאר אוויר מעל. עכשיו הוא גדל, והאיור הוא זה
   שסופג את התוספת ולא הטקסט: כך הטיפוגרפיה נשארת קבועה והתמונה
   מתמלאת לפי המסך. */
.end>.pc{flex:1 1 auto; min-height:0; margin-top:0}
.pcin{display:flex; flex-direction:column; height:100%}
.pcart{flex:1 1 auto; height:auto; min-height:max(88px,calc(var(--vh)*.20*var(--k)))}
.pcstats, .pcfoot{flex:none}
/* השם גדול יותר, כי הוא מה שמצטלם */
.pcname{font-size:max(calc(26px*var(--w)),calc(34px*var(--k)*var(--w)))}