/* כמה אני? — כל העיצוב.
   חולץ מ-index.html כדי שהדפדפן יוכל לשמור אותו במטמון בין ביקורים:
   ה-HTML נטען מחדש בכל פתיחה (no-cache), והקובץ הזה — פעם אחת לגרסה.
   הפניה אליו נושאת ?v=<בנייה>, ו-scripts/sync-version.js מקדם אותה. */
/* Assistant — the fintech system's single Hebrew UI face. Variable
     (400-800), one file per subset; the Hebrew subset carries U+20AA so
     the shekel sign never falls back mid-number. Numbers use the same
     face with tabular-nums — no separate mono face to keep the page
     light and the voice consistent. */
  @font-face{font-family:'Assistant';font-weight:400 800;font-display:swap;
    src:url(/fonts/assistant-hebrew.woff2) format('woff2');
    unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
  @font-face{font-family:'Assistant';font-weight:400 800;font-display:swap;
    src:url(/fonts/assistant-latin.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

  /* ============================================================
     FINTECH — the money-app system. One brand hue (indigo) for
     identity and action; money speaks its own two colors (green in,
     red out) inside tinted pills; everything else is a white card on
     a cool grey page. Gold survives for exactly one job: the winner.

     Token roles kept from the previous systems so the whole sheet
     retunes from here:
       --felt      brand/action accent (indigo — the name is history)
       --felt-ink  text on a brand fill
       --pos/--neg money in / money out (+ washes for pills)
       --chip      legacy alias for money-out, kept = --neg
     ============================================================ */
  :root {
    /* Safe areas as variables, not raw env(): the values are needed in several
       places, and a variable can be overridden to test the notched layout on
       a desktop browser, where env() is always 0 and the bug is invisible. */
    --sa-top:env(safe-area-inset-top,0px);
    --sa-left:env(safe-area-inset-left,0px);
    --sa-right:env(safe-area-inset-right,0px);

    --paper:#F4F5F9; --surface:#FFFFFF; --sunk:#F0F1F5; --raised:#F8F9FC;
    /* --ink-faint darkened #9AA0B0→#6B7280: the old tone measured ~2.4:1 on
       the page and carried real meta text (field labels, section heads, league
       meta). #6B7280 clears AA while staying a step lighter than --ink-soft. */
    /* --ink-faint was validated against white only; on --paper/--sunk, where
       section heads and field labels actually sit, #6B7280 was 4.44:1/4.28:1.
       #5F6673 clears AA on every surface in the app (5.30:1 on --paper). */
    /* --ink-soft got the same treatment one round later: #676D7E cleared 4.5
       against white but sat at 4.31 on the segment track and 4.47 in the
       league table, the two tinted surfaces it is actually used on. */
    --ink:#14161F; --ink-soft:#63697A; --ink-faint:#5F6673;
    --rule:#EEF0F4; --rule-soft:#F3F4F8;
    /* מילוי שורת אפשרות בגיליון. לא --sunk ולא --raised: שניהם מדרגות
       שכבה, מכוילות ללחישה, ונמדדו 1.05–1.13 מול רקע הגיליון. */
    --opt-fill:#EFF1F6;
    --felt:#4F46E5; --felt-deep:#4338CA; --felt-ink:#FFFFFF; --felt-wash:#EEEDFC;
    --grad:linear-gradient(135deg,#5B54F0 0%,#4F46E5 45%,#7C3AED 110%);
    /* pos/neg darkened for AA as small bold text on their own wash (was
       ~2.9:1 / ~3.4:1) — these carry the most important numbers in the app,
       the net pills. White-on-pos fills (the paid tick) stay legible too. */
    --pos:#087A54; --pos-wash:#E5F6EF;
    --neg:#C62A30; --neg-wash:#FCEBEC;
    /* --err/--chip were left behind when --neg was darkened: at #E0464C they
       measured 4.08:1 on white and 3.54:1 on their own wash, so every danger
       label, failed-sync flag and "לא מאוזן" heading missed AA. #B03A3F was
       already proven here (it was .warn's hardcoded colour) at 5.18:1 on the
       wash and 5.94:1 on white. */
    --chip:#B03A3F; --chip-wash:#FCEBEC;
    --err:#B03A3F; --err-wash:#FCEBEC;
    /* the crown is the only marker of who won the night, and at #C9930C it was
       2.74:1 — below even the 3:1 floor for meaningful graphics. */
    --gold:#8A6206; --gold-wash:#FBF3DE;
    --toast-accent:#B3ADFF;
    --sh-card:0 1px 2px rgba(20,22,31,.03),0 10px 28px -16px rgba(20,22,31,.16);
    --sh-hero:0 18px 38px -16px rgba(79,70,229,.5);
    --sh-cta:0 10px 24px -10px rgba(79,70,229,.55);
    --sh-hero:0 1px 2px rgba(43,37,105,.34),
              0 4px 10px -3px rgba(43,37,105,.30),
              0 12px 24px -12px rgba(43,37,105,.34);
    /* Spacing scale — 4px base. Gaps, padding and vertical rhythm snap to a
       step instead of fifty hand-picked rem values, so the spacing reads as a
       system. Off-scale strays (.6/.85/1.1/1.4…) were rounded to the nearest
       step; the clean ones (1/1.25/1.5/.5/.75) map losslessly. */
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.25rem; --s6:1.5rem; --s7:2rem; --s8:2.5rem;
    --f-text:'Assistant',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --f-data:'Assistant',-apple-system,system-ui,sans-serif;
    --f-display:'Assistant',-apple-system,system-ui,sans-serif;
    color-scheme:light;
  }

  /* ---------- dark ----------
     Opt-in, never automatic: the default stays light because that is the
     product's face, and a night at the table is not the only time the app is
     opened. Applied by a data attribute on <html> so the choice survives a
     reload and is set before first paint.

     The one interesting flip is --felt. It is used twelve times as a text
     colour, seven as a border and three as a button fill — light indigo reads
     well as text on a dark page but would fail behind white button text, so
     --felt-ink turns dark instead. One token pair, both jobs. */
  :root[data-theme="dark"]{
    --paper:#0F1116; --surface:#191C24; --sunk:#141720; --raised:#20242E;
    --ink:#EDEEF2; --ink-soft:#A9AFBE; --ink-faint:#9DA4B3;
    --rule:#262A34; --rule-soft:#1E212A;
    --opt-fill:#252A34;
    --felt:#8C86F8; --felt-deep:#ADA8FB; --felt-ink:#12141B; --felt-wash:#232043;
    /* גרדיאנט משלו לכהה. הבהיר יושב על לבן ונקרא כמותג; אותו גרדיאנט
       על #0F1116 היה הדבר היחיד שזוהר במסך, ולכן נקרא כניאון. בכהה
       ההיררכיה נבנית מבהירות ולא מרוויה: הלוח מוגבה מהכרטיסים, לא
       זוהר מהם. הטקסט הלבן דווקא הרוויח — 10.6:1 במקום 6.3:1. */
    --grad:linear-gradient(135deg,#3D3AA8 0%,#35318F 45%,#4A3390 110%);
    --pos:#43D69A; --pos-wash:#0D2A20;
    --neg:#FF868C; --neg-wash:#2E1518;
    --chip:#FF868C; --chip-wash:#2E1518;
    --err:#FF868C;  --err-wash:#2E1518;
    --gold:#E4B547; --gold-wash:#2C2311;
    /* the toast inverts ink/paper, so on a dark theme it is a LIGHT card and
       its undo control needs a dark accent to stay readable */
    --toast-accent:#3F37C9;
    --sh-card:0 1px 2px rgba(0,0,0,.5),0 10px 28px -16px rgba(0,0,0,.7);
    --sh-hero:0 18px 38px -18px rgba(0,0,0,.75);
    --sh-cta:0 10px 24px -12px rgba(0,0,0,.65);
    /* אינדיגו על רקע כמעט־שחור אינו צל אלא כלום. בכהה הצל שחור. */
    --sh-hero:0 1px 2px rgba(0,0,0,.55),
              0 4px 10px -3px rgba(0,0,0,.5),
              0 12px 24px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }

  /* iOS: paint the overscroll gutter, and use dvh so the shrinking Safari
     address bar does not leave a dead strip at the bottom. */
  html,body{background:var(--paper);overscroll-behavior-y:none;}
  /* The stylesheet is scoped to .app because the app used to live inside a
     host page. It is its own page now, and the browser default
     `body{margin:8px}` was making the document 16px taller than the screen:
     a 100dvh app plus two 8px margins. That is the whole "one screen that
     still scrolls a little", and on the home screen it also pushed the brand
     mark up into the status bar. */
  /* font-family on body too, not only .app: before first paint and on any
     chrome that renders outside .app (the browser was falling back to Times),
     the UI face should already be Assistant. */
  html,body{margin:0;padding:0;background:var(--paper);font-family:var(--f-text);}
  /* no rubber-band on a screen that already fits */
  html{overscroll-behavior-y:none;}

  /* flow-root: the screens that open with an <h1> let its top margin collapse
     straight out through .app and shift the whole document down a few pixels,
     which is enough to make a page that fits scroll anyway. A block formatting
     context keeps the margin inside where it belongs. */
  .app{direction:rtl;background:var(--paper);color:var(--ink);font-family:var(--f-text);
       display:flow-root;
       font-size:17px;line-height:1.5;min-height:100vh;min-height:100dvh;
       -webkit-text-size-adjust:100%;text-size-adjust:100%;
       -webkit-tap-highlight-color:transparent;
       -webkit-font-smoothing:antialiased;position:relative;}
  .app *{box-sizing:border-box;}

  /* The felt table's ambience (lamp glow, woven grain, suit watermarks)
     is retired with it: Classical draws with hairlines and type, not
     texture — "no icon/image assets... hairlines carry structure." */

  /* Added when a screenshot from the home-screen app showed the brand mark
     sitting under the status bar. viewport-fit=cover was already set, and
     every bottom edge respected the inset — the top had none, so in
     standalone mode the page simply began behind the clock and the island.
     The side insets matter in landscape for the same reason. */
  .shell{max-width:34rem;margin:0 auto;position:relative;z-index:1;
         padding:var(--sa-top) max(1rem,var(--sa-right)) 8rem max(1rem,var(--sa-left));}
  /* :where() keeps these resets at zero specificity so every component class
     below can override them — a plain `.app button` selector (0,1,1) would
     silently beat `.b-primary`, `.addbtn`, `.rchip` and friends (0,1,0). */
  :where(.app button){font:inherit;cursor:pointer;border:0;background:none;color:inherit;}
  :where(.app input){font:inherit;color:inherit;}
  .app :focus-visible{outline:2px solid var(--felt);outline-offset:2px;border-radius:4px;}
  /* Opening a sheet moves focus to its heading so a screen reader does not
     keep reading the page behind it. WKWebView treats that programmatic move
     as focus-visible and draws the keyboard ring around the title — on iOS
     every sheet opened with a box around its heading, which reads as a
     rendering fault. The ring belongs to keyboard navigation; this is not
     that. Real controls keep theirs.

     h1 לצד h2, ומאותה סיבה בדיוק: go() מעביר focus לכותרת המסך אחרי כל
     ניווט בטאבים, וזה ניווט מגע ולא מקלדת. הכלל היה קיים לגיליונות בלבד,
     ולכן כל הקשה על טאב השאירה מסגרת כחולה סביב הכותרת — היא אפילו נכנסה
     לצילום הראשון בחנות. הכותרת אינה פקד; מי שמנווט במקלדת מגיע לפקדים
     אמיתיים, והם שומרים על הטבעת שלהם. */
  .app h1[tabindex="-1"]:focus,
  .app h1[tabindex="-1"]:focus-visible,
  .app h2[tabindex="-1"]:focus,
  .app h2[tabindex="-1"]:focus-visible{outline:none;}
  .hide{display:none !important;}

  /* ---------- chrome ---------- */
  .top{display:flex;align-items:center;gap:.6rem;padding:1.15rem 0 .9rem;min-height:3.6rem;}
  .top h1{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:0;flex:1;}
  .top .sub{font-size:.75rem;color:var(--ink-faint);font-weight:400;}
  .iconbtn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
           color:var(--ink-soft);font-size:1.35rem;flex:none;}
  .iconbtn:active{background:var(--sunk);}

  /* ---------- buttons ----------
     Fintech: the primary action is a full indigo pill with a colored
     drop shadow — one unmistakable "do it" per screen. */
  .b-primary{display:block;width:100%;
             background:var(--felt);border:0;
             color:var(--felt-ink);border-radius:16px;padding:.95rem;font-weight:800;
             font-size:1rem;text-align:center;font-family:var(--f-display);
             box-shadow:var(--sh-cta);}
  .b-primary:disabled{opacity:.35;box-shadow:none;}
  /* הרגע שבו המסך נעשה בר-פעולה. אין כאן overshoot בכוונה: הכלל אצל
     אפל הוא שקפיצה מעבר ליעד שמורה לתנועה שקדם לה תנופה של אצבע, וכאן
     לא הייתה. התנפחות עדינה ומרוסנת, ומופיעה פעם אחת בלבד. */
  @keyframes ctaready{from{transform:scale(.97)} to{transform:none}}
  .b-primary.justready{animation:ctaready .36s cubic-bezier(.2,0,0,1) both;}
  /* כאן אין צורך במקבילה עדינה: המעבר מ-opacity .35 לאטימות מלאה
     ושינוי הכיתוב הם עצמם המשוב, והם אינם תנועה. */
  @media (prefers-reduced-motion:reduce){.b-primary.justready{animation:none;}}
  .b-primary:active:not(:disabled){transform:scale(.985);background:var(--felt-deep);}
  /* ---------- כפתור הדלת הראשית ----------
     וואריאנט של .b-primary למסך הבית בלבד. .b-primary עצמו משרת 24
     מקומות בכל האפליקציה ולא זז.

     שלוש חולשות במקור, וכולן נמדדו ולא נוחשו:
     · מילוי שטוח והילה יחידה ב-55% אטימות, 24px טשטוש. זו הילה, לא
       צל — הכפתור נראה מרחף מעל הדף במקום לשבת עליו. במקומה שלוש
       שכבות הדוקות: מגע, הרמה, ועומק.
     · אין קצה־אור עליון. לכל משטח פיזי יש שפה שתופסת אור, וזה
       ה-inset הלבן.
     · scale(.985) בלחיצה כמעט לא מורגש. 0.96 הוא הערך שנמצא כתחושת
       דחיפה אמיתית בלי להיראות מוגזם.

     אין כאן צבע מקובע, וזה לא קוסמטיקה. הגרסה הראשונה קיבעה את שלושת
     גווני הערכה הבהירה בגרדיאנט — ובערכה הכהה --felt הופך לאינדיגו
     בהיר ו---felt-ink לטקסט כמעט־שחור, כך שהטקסט הכהה נחת על אינדיגו
     כהה: 3.47:1, מתחת לסף 4.5.

     במקום זה שכבת אור/צל שקופה מעל צבע הטוקן. היא מבהירה למעלה
     ומכהה למטה יחסית לכל צבע שיושב מתחתיה, ולכן נכונה בשתי הערכות
     מעצמה. נמדד בדפדפן בארבע הפינות: 4.73 ו-7.32 בבהירה, 7.19 ו-4.98
     בכהה. */
  .b-hero{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.10)),
                     var(--felt);
          letter-spacing:-.01em;font-size:1.0625rem;
          box-shadow:inset 0 1px 0 rgba(255,255,255,.20),var(--sh-hero);
          transition:transform .14s cubic-bezier(.2,0,0,1),
                     box-shadow .14s cubic-bezier(.2,0,0,1);}
  /* מעבר ולא keyframes: מעבר ניתן לקטיעה באמצע, ולחיצה חוזרת לא
     מחכה שהקודמת תסתיים. */
  .b-hero:active:not(:disabled){transform:scale(.96);
          background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.17)),
                     var(--felt);
          box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
                     0 1px 2px rgba(43,37,105,.34);}
  /* תנועה מופחתת לא אומרת היעדר משוב. ההיזון של הלחיצה נשאר בצבע
     ובצל; רק שינוי הגודל יורד. */
  @media (prefers-reduced-motion:reduce){
    .b-hero{transition:box-shadow .14s ease-out;}
    .b-hero:active:not(:disabled){transform:none;}
    .pb-meter i{transition:none;}
  }

  .b-ghost{border:1px solid var(--rule);border-radius:999px;padding:.5rem 1rem;
           font-size:.875rem;color:var(--ink-soft);font-weight:700;
           background:var(--surface);box-shadow:var(--sh-card);}
  .b-ghost:active{background:var(--raised);}
  /* The bare × that deletes a shared expense measured 24px wide — the one
     money-changing control on the screen and the easiest to hit by mistake
     while aiming for the amount beside it. */
  .b-danger{color:var(--err);font-size:.8125rem;font-weight:600;min-height:44px;min-width:44px;
            padding:0 .55rem;display:inline-flex;align-items:center;justify-content:center;flex:none;}

  /* ---------- cards ---------- */
  .card{background:var(--surface);border:0;border-radius:18px;
        overflow:hidden;box-shadow:var(--sh-card);}
  .card + .card{margin-top:var(--s3);}
  .sect-t{font-size:.8rem;color:var(--ink-faint);font-weight:800;
          margin:1.6rem .2rem .55rem;}

  /* ---------- live game hero (home) ----------
     The gradient card is the one loud thing on the page: live badge,
     the pot as the only display numeral, stat chips, and a white
     action button that inverts the brand color. */
  .live-card{display:block;width:100%;text-align:start;position:relative;overflow:hidden;
             background:var(--grad);color:#fff;
             border:0;border-radius:24px;padding:1.15rem 1.15rem 1rem;
             box-shadow:var(--sh-hero);}
  /* אותו חומר כמו לוח הקופה בשולחן: זרקור מאחורי המספר, קצה עליון מואר,
     וז'יטון מהפינה — כדי שהכרטיס בבית והלוח בשולחן ייקראו כאותו דבר. */
  .live-card{box-shadow:var(--sh-hero),inset 0 1px 0 rgba(255,255,255,.22);}
  .live-card::before{content:"";position:absolute;inset:0;pointer-events:none;
             background:radial-gradient(120% 95% at 100% 0%,rgba(255,255,255,.17),rgba(255,255,255,0) 58%);}
  .live-card>*{position:relative;}
  .live-card .pb-mark{position:absolute;left:-1.2rem;bottom:3.4rem;width:128px;height:128px;
             color:#fff;opacity:.12;pointer-events:none;}
  .live-card .lc-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
  .live-card .lc-badge{display:inline-flex;align-items:center;gap:.38rem;
             background:rgba(14,12,54,.26);border:1px solid rgba(255,255,255,.28);
             border-radius:999px;padding:.26rem .7rem;font-size:.72rem;font-weight:800;}
  .live-card .lc-badge .dot{width:.44rem;height:.44rem;border-radius:50%;background:#6EF0A8;
             box-shadow:0 0 0 0 rgba(110,240,168,.6);animation:lcpulse 2.2s ease-out infinite;}
  @keyframes lcpulse{0%{box-shadow:0 0 0 0 rgba(110,240,168,.55)}
                     70%{box-shadow:0 0 0 7px rgba(110,240,168,0)}
                     100%{box-shadow:0 0 0 0 rgba(110,240,168,0)}}
  @media (prefers-reduced-motion:reduce){.live-card .lc-badge .dot{animation:none}}
  .live-card .lc-when{font-size:.72rem;font-weight:600;color:#fff;
             font-variant-numeric:tabular-nums;}
  .live-card .lc-kicker{font-size:.75rem;font-weight:600;color:#fff;
             margin-top:.85rem;}
  .live-card .lc-main{font-family:var(--f-display);font-size:2.7rem;font-weight:800;
                      letter-spacing:-.035em;line-height:1.05;margin-top:.05rem;
                      font-variant-numeric:tabular-nums;color:#fff;
                      direction:ltr;unicode-bidi:isolate;text-align:right;}
  .live-card .lc-stats{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap;}
  .live-card .lc-stats span{display:inline-flex;align-items:center;border-radius:999px;
             font-size:.72rem;font-weight:700;padding:.22rem .6rem;
             background:rgba(14,12,54,.24);color:#fff;}
  /* The fill here is white by design — it is the one bright thing on the
     gradient. So the label cannot ride on --felt-deep, which the dark theme
     lightens: it went to 2.15:1, light indigo on white. Its own fixed tone. */
  .live-card .lc-act{display:block;width:100%;margin-top:.95rem;background:#fff;
             color:#3F37C9;border-radius:14px;padding:.78rem;
             font-size:.95rem;font-weight:800;text-align:center;}

  /* ---------- player rows (game) ---------- */
  .prow{display:flex;align-items:center;gap:var(--s2);padding:.7rem .85rem;
        border-bottom:1px solid var(--rule-soft);}
  .prow:last-child{border-bottom:0;}
  .prow.out{opacity:.5;}
  /* One fixed width for every row, so the buy-in pills line up in a column
     instead of stair-stepping. It used to be a flat 5rem — but the avatar and
     its gap eat 2.55rem of that, leaving under 40px for the name on EVERY
     device, so five-letter names were ellipsised on the largest iPhone made.
     A percentage keeps the rows aligned (same container, same result) while
     letting a big screen actually spend its width on the names. */
  /* השוליים האוטומטיים כאן ולא על .ptot. הגמישות ישבה על .pills, וברגע
     שהגלולות נעלמות בשורה עם כניסה אחת אין מי שיבלע את המרווח — הסכום
     והכפתור נשאבים פנימה והכפתורים יוצאים מקו אחד בין שורה לשורה.

     הניסיון הראשון היה margin-inline-start:auto על .ptot, והוא נחת בצד
     הלא נכון: ל-.ptot יש direction:ltr משלו (כדי שהמספר לא יתהפך),
     ותכונות inline-* נפתרות מול הכיוון של האלמנט עצמו ולא של השורה
     שמכילה אותו. כאן, על .pname שאינו דורס כיוון, inline-end הוא באמת
     סוף השורה. */
  /* השם גדל אל המקום הפנוי במקום להיחתך לידו. הרוחב היה קבוע
     (clamp) ו---margin-inline-end:auto בלע את השארית, כך ש"דנה שטרן"
     נחתכה בשורה שחציה ריק. במדידה על 12 שחקנים עם שמות ישראליים
     רגילים נחתכו תשעה. עכשיו העמודה גדלה, ונסוגה עד 5rem כשיש הרבה
     גלולות — הן שומרות על הרוחב הטבעי שלהן ולא בולעות את השארית. */
  .pname{display:flex;align-items:center;gap:.45rem;min-width:0;
         flex:1 1 auto;max-width:62%;
         text-align:start;font-weight:600;font-size:.875rem;min-height:44px;}
  .pname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* initial avatar — replaces the old 0.6rem colour dot. A face-shaped
     token is what makes a list of people scannable at a glance. */
  .pav.has-photo{background:var(--sunk);overflow:hidden;padding:0;}
  /* iOS owns the long press on an image: it opens its own sheet — שיתוף,
     שמירה ב"תמונות", העתקה — and the page never hears the gesture at all.
     -webkit-touch-callout is the switch that hands it back. The selection
     rules stop the row's text being highlighted on the way, and pointer-events
     puts the target on the circle so the handler sees one element either way.
     The enlarged photo deliberately keeps the native menu, so "save to Photos"
     still works where it makes sense. */
  .pav{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  .pav.has-photo img{width:100%;height:100%;object-fit:cover;display:block;
                     pointer-events:none;-webkit-touch-callout:none;
                     -webkit-user-drag:none;}
  .pav{width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
       display:inline-grid;place-items:center;
       font-size:.85rem;font-weight:800;line-height:1;color:#fff;
       vertical-align:middle;}
  .pav.sm{width:1.55rem;height:1.55rem;font-size:.72rem;}
  .pills{display:flex;gap:.22rem;flex:0 1 auto;flex-wrap:wrap;min-width:0;}
  .pill{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:.6875rem;
        padding:.05rem .34rem;border:1px solid var(--rule);border-radius:999px;
        color:var(--ink-soft);background:var(--sunk);
        direction:ltr;unicode-bidi:isolate;}
  .pill.void{text-decoration:line-through;opacity:.4;}
  .ptot{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:.9375rem;
        font-weight:700;flex:none;direction:ltr;unicode-bidi:isolate;}
  /* The most-tapped control in the app, used one-handed in the dark:
     44px is Apple's minimum comfortable target and this earns it. */
  /* בלי --sh-cta. הילה צבעונית על פקד יחיד היא הדגשה; על פקד שחוזר
     בכל שורה היא קיר. ארבע הילות זהות היו הדבר הבהיר ביותר במסך אחרי
     הקופה, ומשכו את העין לפני הנתונים. המילוי נשאר — זו הפעולה
     הנשנית העיקרית והיא מרוויחה את האקצנט — רק ההילה יורדת. */
  .addbtn{position:relative;background:var(--felt);border:0;
          color:var(--felt-ink);border-radius:12px;
          min-height:44px;min-width:64px;padding:0 .9rem;
          font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:.875rem;
          font-weight:800;flex:none;user-select:none;-webkit-user-select:none;
          -webkit-touch-callout:none;touch-action:manipulation;
          direction:ltr;}
  .addbtn:active{transform:scale(.94);background:var(--felt-deep);}
  /* a held button (long-press → custom amount) inverts to solid ink */
  .addbtn.held{background:var(--ink);color:var(--paper);}
  /* בכהה ארבע גלולות מלאות בשורה היו כתם שני שהתחרה בלוח הקופה.
     מעטפת במקום מילוי: הכפתור הראשי נשאר היחיד עם מילוי מלא, והעין
     הולכת אליו. הלחיצה מעצימה את המילוי ומבהירה את הטקסט (6.1:1)
     — בלי זה :active היה מחליף לרקע בהיר עם טקסט בהיר, כלומר נעלם. */
  :root[data-theme="dark"] .addbtn{background:var(--felt-wash);color:var(--felt);}
  :root[data-theme="dark"] .addbtn:active{background:#2E2A5C;color:var(--felt-deep);}
  /* המונה חי בתוך הגלולה ולא לצידה, כדי שהצמד "סכום ומספר פעמים"
     ייקרא כיחידה אחת. משקל נמוך מהסכום: הסכום הוא העיקר, המונה מוסיף
     לו הקשר. */
  .pmul{font-style:normal;font-weight:700;opacity:.62;margin-inline-start:.22rem;
        font-size:.9em;}
  /* שורת סיום של כרטיס השחקנים. קו מפריד ושוליים שליליים כדי שתימתח
     לרוחב הכרטיס — .card כבר עושה overflow:hidden, אז אין דליפה מעבר
     לפינות. השורה השנייה נשברת בנפרד כי אלה שני דברים: מה אפשר, ואיך
     לקצר. */
  .rowhint{font-size:.75rem;line-height:1.5;color:var(--ink-faint);
           text-align:center;margin:0;padding:.65rem .85rem;
           border-top:1px solid var(--rule-soft);}
  .rowhint span{display:block;opacity:.82;}
  .outtag{font-size:.6875rem;color:var(--ink-faint);flex:none;}

  /* ---------- pot bar ---------- */
  /* ---------- לוח הקופה ----------
     מכשיר, לא כרזה. הגרסה הקודמת אמרה דבר אחד — הסכום — והשאירה שני
     שלישים גרדיאנט ריק עם עיגול לקישוט. הסכום נשאר הכותרת, ומתחתיו
     שורת מדדים בשלוש עמודות שוות — סכום כניסה, כניסות, בשולחן —
     מופרדות בקווי-שיער. החומר: גרדיאנט המותג עם זרקור רדיאלי מאחורי
     המספר וקצה עליון מואר. ערימת ז'יטונים שקופה משמאל: זהות פוקר בלי
     לכתוב את המילה, ומשקל-נגד למספר שיושב מימין. */
  .potbar{position:relative;overflow:hidden;display:flex;flex-direction:column;
          align-items:flex-start;padding:1.05rem 1.15rem .95rem;
          background:var(--grad);color:#fff;
          box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
  .potbar::before{content:"";position:absolute;inset:0;pointer-events:none;
          background:radial-gradient(120% 95% at 100% 0%,rgba(255,255,255,.17),rgba(255,255,255,0) 58%);}
  .potbar>*{position:relative;}
  .potbar .k{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.84);}
  .potbar .v{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:800;
             color:#fff;font-size:2.7rem;letter-spacing:-.035em;line-height:1.05;margin-top:.12rem;
             direction:ltr;unicode-bidi:isolate;}
  .potbar .pb-mark{position:absolute;left:-1.1rem;top:-1.15rem;width:112px;height:112px;
           color:#fff;opacity:.13;pointer-events:none;}
  .pb-mark svg{width:100%;height:100%;display:block;}
  .pb-stats{display:grid;grid-template-columns:repeat(3,1fr);align-self:stretch;
            margin:.95rem -1.15rem -.95rem;border-top:1px solid rgba(255,255,255,.2);}
  .pb-c{display:flex;flex-direction:column;align-items:center;gap:.08rem;
        padding:.62rem .3rem .72rem;text-align:center;min-width:0;}
  .pb-c+.pb-c{border-inline-start:1px solid rgba(255,255,255,.16);}
  .pb-c b{font-family:var(--f-display);font-weight:800;font-size:1.02rem;line-height:1.15;
          font-variant-numeric:tabular-nums;}
  .pb-c small{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.76);}
  /* תא-כפתור: אותו תא, עם עיפרון קטן ליד הכיתוב ומשוב לחיצה. הכפתור
     הוא התא כולו — יעד של 44pt בלי להוסיף שום דבר לעין. */
  .pb-c.pb-act{appearance:none;background:none;border:0;color:inherit;font:inherit;
               cursor:pointer;border-radius:0;transition:background-color .15s;}
  .pb-c.pb-act:active{background:rgba(255,255,255,.12);}
  .pb-c.pb-act:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px;}
  .pb-c.pb-act small{display:inline-flex;align-items:center;gap:.22rem;}
  .pb-c.pb-act small svg{width:11px;height:11px;opacity:.85;}
  /* הגרסה הבהירה: אותו לוח על כרטיס לבן, לספירה השוטפת — כדי שהקופה
     תישאר הגיבור היחיד במסך. במקום שורת המדדים, מד: כמה מהקופה נספר.
     ירוק כשמאוזן, אדום כשנספר יותר מדי — התקדמות, לא פסק דין; כרטיס
     .bal נשאר בעל המילה האחרונה. */
  .potbar.pb-light{background:var(--surface);color:var(--ink);box-shadow:none;}
  .potbar.pb-light::before,.potbar.pb-light .pb-mark{display:none;}
  .potbar.pb-light .k{color:var(--ink-faint);}
  .potbar.pb-light .v{color:var(--ink);font-size:2.1rem;}
  .potbar.pb-light .pb-stats{border-top-color:var(--rule);}
  .potbar.pb-light .pb-c+.pb-c{border-color:var(--rule);}
  .potbar.pb-light .pb-c small{color:var(--ink-faint);}
  .potbar.pb-light .pb-c.pb-act:active{background:var(--sunk);}
  .pb-live{align-self:stretch;margin-top:.85rem;}
  .pb-meter{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;}
  .pb-meter i{display:block;height:100%;border-radius:inherit;background:var(--felt);
              transition:width .32s cubic-bezier(.2,.7,.2,1),background-color .2s;}
  .pb-meter.ok i{background:var(--pos);}
  .pb-meter.over i{background:var(--neg);}
  .pb-note{font-size:.74rem;font-weight:600;color:var(--ink-faint);margin-top:.5rem;}
  .pb-note.ok{color:var(--pos);}
  .pb-note.over{color:var(--neg);}

  /* ---------- roster chips (setup) ---------- */
  /* ---------- מסך ההקמה ----------
     שני כרטיסים במקום שלוש רצועות חשופות. ראו את ההערה ב-renderSetup
     לנימוק המלא; כאן רק המנגנון. */
  /* היה שורת טופס: תווית מימין ותיבה רחבה משמאל, 240px למספר בן שלוש
     ספרות. עכשיו אותו גוש מרוכז שבגיליון הוספת שחקן — תווית קטנה
     ומרווחת מעל, מספר גדול מתחת. שני המסכים שואלים את אותה שאלה ועד
     עכשיו שאלו אותה בשתי צורות. */
  .buyin{display:flex;flex-direction:column;align-items:center;gap:.28rem;
         padding:.95rem .8rem;}
  .buyin .bu-l{font-size:.7rem;font-weight:700;letter-spacing:.06em;
               color:var(--ink-faint);}
  /* הרוחב יורד מ-100% לתיבה קומפקטית, אבל המילוי השקוע נשאר: שדה
     מספר בלי רקע משלו מאבד את הרמז שאפשר להקליד בו. */
  .buyin .bu-v{width:8.5rem;text-align:center;font-size:1.75rem;font-weight:800;
               padding:.5rem .4rem;line-height:1.15;}
  /* מיושרת לקצה הפנימי של הכרטיסים, לא לקצה הדף. */
  #f-buyin-err{margin:.5rem .2rem 0;}

  .people{padding:.85rem .8rem 0;}
  /* רשת דו-טורית ולא עטיפה חופשית. נמדד לפני: הגלולות חבקו את אורך
     השם — 121, 116, 132, 109, 95 — והשורות התחילו ב-102, 98 ו-241.
     הקצה הימני נשמר כי עטיפה ב-RTL מתחילה משם, אבל הקצה השמאלי היה
     מרוסק, והשורה האחרונה גלולה יתומה שצפה לבדה.

     ברשת כל תא זהה, שני הקצוות מיושרים, ומספר אי-זוגי משאיר תא ריק
     נקי במקום יתום מרחף. */
  .people .roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                  gap:.5rem;margin-bottom:.85rem;}
  .people .rchip{width:100%;}
  /* בתא ברוחב קבוע שם ארוך חייב להיחתך במקום לדחוף. */
  .rc-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  /* המחוון נדחף לקצה, כך שכל הווים בטור אחד ולא צמודים לשמות באורכים
     שונים. .rc-k אינו דורס כיוון, ולכן inline-start כאן הוא באמת ההתחלה. */
  .people .rchip .rc-k{margin-inline-start:auto;}
  .people .inline-add{margin-bottom:.85rem;}
  /* .b-ghost הוא לבן עם צל, וזה עבד כשהוא ישב על הדף האפור. משהעברתי
     אותו אל תוך כרטיס לבן נשאר רק הצל שיפריד ביניהם, והכפתור כמעט
     נעלם. גוון במקום לבן — ומשתמש ב---felt-wash שכבר קיים, כך שהוא
     מזדווג עם השדה השקוע לידו במקום להתחרות בו.

     מקומי ל-.people בכוונה: .b-ghost משרת עוד עשרה מקומות שבהם הוא
     עדיין יושב על הדף האפור ושם הוא נכון כפי שהוא. */
  .people .inline-add .b-ghost{background:var(--felt-wash);color:var(--felt-deep);
                               border:0;box-shadow:none;font-weight:800;}
  /* לא גוון מקובע. --felt-wash הוא בהיר בערכה הבהירה וכהה בכהה, אז
     ערך קבוע ללחיצה מהבהב בלבן על רקע כהה. שכבת צל שקופה מכהה יחסית
     לכל צבע שמתחתיה, ולכן נכונה בשתיהן. */
  .people .inline-add .b-ghost:active{
      background:linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07)),var(--felt-wash);}
  /* השוליים השליליים מותחים את הקו המפריד לרוחב הכרטיס המלא. .card
     כבר עושה overflow:hidden, אז אין דליפה מעבר לפינות המעוגלות. */
  .pe-hint{font-size:.75rem;color:var(--ink-faint);line-height:1.5;
           text-align:center;margin:0 -.8rem;padding:.7rem .8rem;
           border-top:1px solid var(--rule-soft);}

  .roster{display:flex;flex-wrap:wrap;gap:.45rem;}
  .rchip{display:flex;align-items:center;gap:.4rem;border:1px solid var(--rule);
         border-radius:999px;padding:.45rem .85rem;font-size:.9375rem;font-weight:600;
         background:var(--surface);}
  .rchip.on{background:var(--felt-wash);color:var(--felt-deep);border-color:var(--felt);}

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

        התדירות כאן גבוהה — בוחרים חמישה שחקנים ברצף — ולכן המשוב
        זעיר בכוונה: קנה מידה בלבד, בלי צבע קופץ ובלי תזוזה.

        הגוון נוסף כערוץ שני כדי שתחת prefers-reduced-motion יישאר
        משוב כלשהו. הוא שכבה שקופה ולא ערך מקובע, כי הגלולה מחליפה
        רקע בין נבחרת ללא, ובשתי ערכות הנושא.

     2. שחקן שנוסף. הרשת עוטפת, והגלולה החדשה מופיעה איפשהו בתוכה בלי
        שברור איפה. הופעה קצרה עונה "נקלט, וזה המקום". פעם אחת לשחקן,
        ולכן היא יכולה להיות נדיבה יותר מלחיצה. */
  .rchip{transition:transform .1s cubic-bezier(.2,0,0,1);}
  .rchip:active{transform:scale(.97);
                background-image:linear-gradient(rgba(0,0,0,.055),rgba(0,0,0,.055));}

  @keyframes rcpop{from{transform:scale(.82);opacity:0}
                   to{transform:none;opacity:1}}
  @keyframes rcfade{from{opacity:0} to{opacity:1}}
  .rchip.just{animation:rcpop .34s cubic-bezier(.2,1.08,.36,1) both;}

  @media (prefers-reduced-motion:reduce){
    .rchip{transition:none;}
    .rchip:active{transform:none;}
    .rchip.just{animation:rcfade .28s ease-out both;}
  }
  /* מחוון הבחירה.
     הגלולה הנבחרת נבדלה עד כה בצבע רקע, צבע טקסט וצבע מסגרת — שלושה
     ערוצים, אבל כולם צבע, וזו בדיוק ההגדרה של 1.4.1.

     ניסיתי קודם תג על פינת האווטאר. זה נכשל, ומסיבה שאי אפשר לעקוף:
     האווטאר הוא 34px, ותג בגודל שימושי מכסה בו את האות בכל מיקום
     פינתי. המדידה הראשונה שלי אמרה שהוא לא מכסה, כי השוויתי את ראשו
     למרכז העיגול — אבל לאות יש גובה, והיא נחתכה בכל זאת.

     במקומו מחוון בקצה הגלולה, שקיים תמיד: טבעת חלולה כשלא נבחר, וי
     מלא כשנבחר. זה פותר שלושה דברים בבת אחת — ההבדל הוא צורה ולא רק
     צבע, אין קפיצת פריסה כי הרוחב קבוע בשני המצבים, וגלולה לא־נבחרת
     סוף־סוף רומזת שהיא בכלל ניתנת לבחירה. */
  .rchip .rc-k{width:1.15rem;height:1.15rem;flex:none;border-radius:50%;
               display:grid;place-items:center;margin-inline-start:.15rem;
               color:transparent;background:transparent;
               /* --rule הוא צבע של קו-שיער מפריד: #EEF0F4 על כרטיס לבן
                  נמדד 1.28:1, כלומר הטבעת הייתה בלתי נראית בפועל. גבול
                  של רכיב ממשק דורש 3:1 (1.4.11). --ink-faint הוא הטוקן
                  הקיים לסימון משני, ונמדד 5.78 בבהיר ו-6.81 בכהה. */
               box-shadow:inset 0 0 0 1.5px var(--ink-faint);
               transition:background-color .13s cubic-bezier(.2,0,0,1),
                          box-shadow .13s cubic-bezier(.2,0,0,1);}
  .rchip .rc-k svg{width:.72rem;height:.72rem;display:block;}
  /* --felt-ink ולא #fff. בערכה הכהה --felt הוא אינדיגו *בהיר*, וווי
     לבן עליו נמדד 3.05 — בקושי מעל הסף ונראה שטוף. --felt-ink הוא
     בדיוק הטוקן שמחזיק את הצבע הקריא על --felt בכל ערכה. */
  .rchip.on .rc-k{color:var(--felt-ink);background:var(--felt);
                  box-shadow:inset 0 0 0 1.5px var(--felt);}
  @media (prefers-reduced-motion:reduce){.rchip .rc-k{transition:none;}}

  /* ---------- fields ---------- */
  .field{display:block;margin-bottom:1rem;}
  .field .lab{display:block;font-size:.75rem;color:var(--ink-faint);margin-bottom:.35rem;font-weight:600;}
  .inp{width:100%;background:var(--sunk);border:1.5px solid transparent;border-radius:12px;
       padding:.75rem .85rem;font-family:var(--f-data);font-variant-numeric:tabular-nums;
       font-size:1.0625rem;}
  .inp.text{font-family:var(--f-text);}
  .inp:focus{outline:none;border-color:var(--felt);background:var(--surface);}
  /* שגיאה צמודה לשדה. toast לבדו לא מספיק: הוא נעלם, הוא לא קשור לשדה
     בשום צורה שקורא מסך מבין, ומי שהגדיל את הטקסט עלול לא לראות אותו
     בכלל. המסגרת האדומה לבדה גם היא לא מספיקה — צבע אינו הודעה. */
  .inp[aria-invalid="true"]{border-color:var(--err);background:var(--err-wash);}
  /* היה #B03A3F מקובע — הערך של הערכה הבהירה. על כרטיס כהה הוא נמדד
     2.86:1, מתחת לסף 4.5, וזה נגע בכל הודעות השגיאה באפליקציה ולא רק
     כאן. var(--err) נותן 5.96 בבהיר ו-7.33 בכהה. */
  .fielderr{display:none;color:var(--err);font-size:.8125rem;font-weight:600;
            margin-top:.4rem;line-height:1.45;}
  .fielderr.on{display:block;}
  .fielderr::before{content:"⚠ ";}
  .inline-add{display:flex;gap:.5rem;}
  .inline-add .inp{flex:1;}

  /* ---------- settle count rows ---------- */
  .crow{display:flex;align-items:center;gap:var(--s2);padding:.55rem .85rem;
        border-bottom:1px solid var(--rule-soft);}
  .crow:last-child{border-bottom:0;}
  .crow .cn{flex:1;font-weight:600;font-size:.9375rem;display:flex;align-items:center;gap:var(--s2);}
  .crow .cin{width:6.2rem;min-height:44px;background:var(--sunk);border:1.5px solid transparent;
             border-radius:12px;padding:.5rem .6rem;font-family:var(--f-data);
             font-variant-numeric:tabular-nums;font-size:1rem;text-align:center;}
  .crow .cin:focus{outline:none;border-color:var(--felt);background:var(--surface);}
  .crow .fixed{width:6.2rem;text-align:center;font-family:var(--f-data);
               font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:.9375rem;}

  /* what the player said he is holding, under his own row */
  .crep{padding:0 .85rem .5rem;font-size:.78rem;line-height:1.4;
        border-bottom:1px solid var(--rule-soft);}
  .crow + .crep{margin-top:-.15rem;}
  .cr-wait{color:var(--ink-soft);}
  .cr-ok{color:var(--pos);}
  .cr-diff{color:var(--err);font-weight:600;}
  /* a real tap target, not a text link: it is pressed while standing up */
  .cr-use{min-height:36px;padding:.3rem .7rem;border-radius:999px;
          border:1px solid var(--felt);background:var(--felt-wash);
          color:var(--ink);font-size:.78rem;font-weight:600;}

  /* ---------- balance panel ---------- */
  .bal{border-radius:4px;padding:1rem;margin-top:.85rem;border:1px solid;}
  .bal.ok{background:var(--pos-wash);border-color:var(--pos);}
  .bal.bad{background:var(--err-wash);border-color:var(--err);}
  .bal .bt{font-weight:800;font-size:1.0625rem;margin-bottom:.3rem;}
  .bal.ok .bt{color:var(--pos);}
  .bal.bad .bt{color:var(--err);}
  .bal .bd{font-size:.875rem;color:var(--ink-soft);line-height:1.6;}
  .bal ul{margin:.5rem 0 0;padding-inline-start:1.1rem;font-size:.875rem;color:var(--ink-soft);}
  .bal li{margin-bottom:.2rem;}

  /* ---------- settlement ---------- */
  /* width:100% — a <button> shrink-wraps its content, so the who-pays-whom
     rows sat at ~55% of the card: amounts landed at three different x
     positions and the separators stopped a third of the way across. .irow
     already carries this; .srow was missed. */
  .srow{display:flex;align-items:center;gap:.5rem;padding:.8rem .85rem;
        width:100%;border-bottom:1px solid var(--rule-soft);}
  .srow:last-child{border-bottom:0;}
  .srow .who{font-weight:700;font-size:.9375rem;}
  .srow .arw{color:var(--ink-faint);}
  .srow .amt{margin-inline-start:auto;font-family:var(--f-data);font-variant-numeric:tabular-nums;
             font-weight:800;color:var(--ink);font-size:1rem;
             direction:ltr;unicode-bidi:isolate;}
  /* an unpaid debt is an empty chip slot — dashed, waiting. Marking it paid
     places a felt chip in it. */
  .srow .tick{width:1.6rem;height:1.6rem;border-radius:999px;
              border:1.5px dashed var(--ink-faint);
              display:grid;place-items:center;flex:none;font-size:.8rem;color:transparent;}
  .srow.paid .tick{background:var(--pos);border:1.5px solid var(--pos);color:#fff;}
  .srow.paid .who,.srow.paid .amt,.srow.paid .arw{opacity:.4;}
  .srow.paid .amt{text-decoration:line-through;}

  /* two-signature transfer row (shared groups) */
  .srow2{padding:.7rem .85rem;border-bottom:1px solid var(--rule-soft);}
  .srow2:last-child{border-bottom:0;}
  .s2h{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
  .s2h .who{font-weight:700;font-size:.9375rem;}
  .s2h .arw{color:var(--ink-faint);}
  .s2h .amt{margin-inline-start:auto;font-family:var(--f-data);font-variant-numeric:tabular-nums;
            font-weight:800;color:var(--ink);font-size:1rem;
            direction:ltr;unicode-bidi:isolate;}
  .s2b{display:flex;gap:.45rem;}
  /* min-height, not height: a wrapped signer name must not clip */
  .sig{flex:1;min-height:2.75rem;border-radius:10px;border:1.5px dashed var(--rule);
       background:var(--paper);color:var(--ink-soft);font-size:.8125rem;font-weight:700;
       padding:.35rem .5rem;line-height:1.25;}
  .sig.on{background:var(--pos-wash);border:1.5px solid var(--pos-wash);color:var(--pos);}
  .sig.mine:not(.on){border-color:var(--felt);color:var(--ink);}
  /* No opacity on the waiting state: dimming blends text AND background
     toward the card, which measured 5.7:1 and rendered at 3.2:1. It is
     already distinct — unfilled, no green border, and the label says
     "ממתין ל…" — so the dimming bought nothing and cost legibility. */
  .srow2.done .s2h .amt{text-decoration:line-through;opacity:.5;}
  .srow2.done .s2h .who,.srow2.done .s2h .arw{opacity:.5;}

  /* ---------- net table ---------- */
  .nrow{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;
        border-bottom:1px solid var(--rule-soft);font-size:.9375rem;}
  .nrow:last-child{border-bottom:0;}
  .nrow .nn{flex:1;font-weight:600;display:flex;align-items:center;gap:.5rem;}
  /* מוביל מנוקד בין השם לסכום. זו הצורה של שורה בקבלה, והיא גם עושה
     עבודה אמיתית: העין עוקבת אחרי הנקודות אל המספר במקום לקפוץ מעל
     רווח ריק. flex:1 בתוך .nn, כך שהוא תופס בדיוק את מה שנשאר. */
  .nrow .nn::after{content:"";flex:1;min-width:1.2rem;align-self:flex-end;
                   margin-bottom:.42rem;border-bottom:1px dotted var(--ink-faint);
                   opacity:.42;}
  /* isolate the digits: "50→120" in a base-RTL row renders visually as
     "120→50" without this — buy-in and cash-out swap, showing money backwards. */
  .nrow .nio{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:.75rem;
             color:var(--ink-faint);direction:ltr;unicode-bidi:isolate;}
  /* כמה כסף באמת עובר, לצד הקנייה והספירה. משני בכוונה: המספר הראשי
     בשורה הוא תוצאת הפוקר. nowrap כדי ש"לתשלום ₪30" לא יישבר באמצע
     ויידחוף את התג למטה בשמות ארוכים. */
  .nrow .npay{font-size:.75rem;color:var(--ink-faint);font-weight:500;white-space:nowrap;}
  .nrow .nv{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:800;
            min-width:4.5rem;text-align:center;font-size:.85rem;
            padding:.28rem .6rem;border-radius:999px;
            direction:ltr;unicode-bidi:isolate;}
  .nv.pos{background:var(--pos-wash);color:var(--pos);}
  .nv.neg{background:var(--neg-wash);color:var(--neg);}
  .crown{color:var(--gold);font-size:.8rem;}

  /* An inline <svg> has no intrinsic size — every icon in this file is sized
     by an explicit rule, and these replaced text glyphs that were sized by
     font-size, so each holder needs one or the icon renders at the SVG
     default and blows the layout apart.
     em rather than rem: these sit inside rows whose scale already varies,
     and the icon should track the text beside it. vertical-align pulls them
     off the baseline so a crown sits centred against a name, not below it. */
  .crown svg,.lbnm .lb-crown svg{width:.9em;height:.9em;vertical-align:-.12em;}
  .lbe-m svg{width:1.7rem;height:1.7rem;}
  .lastnight .ln-ic svg{width:1.2rem;height:1.2rem;}
  .wl-i svg{width:1.35rem;height:1.35rem;vertical-align:-.2em;}
  .irow .ic svg{width:1.1rem;height:1.1rem;}
  /* Sheet-option icons and the live-table action icons, once they became
     real paths. :not([width]) leaves the Apple/Google auth logos alone —
     those carry their own pixel size. */
  .oi svg:not([width]){width:1.15rem;height:1.15rem;display:inline-block;vertical-align:middle;}
  .act .a-i svg{width:1.08rem;height:1.08rem;display:block;}
  .bb-i svg{width:1.15rem;height:1.15rem;}
  /* הכלל הזה כפה 54×54 על כל svg בסימן. ערימת הז'יטונים היא 132×104
     ובריבוע כזה היא נמעכת, ולכן היא מוחרגת לפי המחלקה שלה. */
  .hero-empty .he-mark svg:not(.hemk){width:54px;height:54px;}

  /* ---------- the night's receipt ----------
     The results card is the bill the table walks away with, so it ends the
     way a printed receipt does: a perforated tear-off edge (a mask, so the
     real background shows through the cutouts) and a rubber stamp. The stamp
     is not decoration — a settlement exists only if the iron law held, and
     the stamp says exactly that. */
  .receipt{padding-bottom:.55rem;
           -webkit-mask:radial-gradient(9px at 50% 100%,transparent 97%,#000) 50%/22px 100%;
           mask:radial-gradient(9px at 50% 100%,transparent 97%,#000) 50%/22px 100%;}
  .rstamp{display:flex;justify-content:center;padding:.3rem 0 1rem;}
  .rstamp span{font-family:var(--f-data);font-size:.72rem;font-weight:700;
               letter-spacing:.26em;color:var(--pos);opacity:.9;
               border:2px solid currentColor;border-radius:4px;
               padding:.32rem .55rem .32rem .8rem;transform:rotate(-3.5deg);}

  /* ---------- bottom bar ---------- */
  /* הריפוד האופקי היה 1rem קבוע בזמן ש-.shell משתמש
     ב-max(1rem,var(--sa-*)). לרוחב הם נפרדו זה מזה במכשיר עם חריץ
     בלנדסקייפ, ואז הכפתור והכרטיסים כבר לא על אותו קו. */
  .dock{position:fixed;inset-inline:0;bottom:0;background:linear-gradient(to top,var(--paper) 62%,transparent);
        padding:1.4rem max(1rem,var(--sa-right)) calc(1rem + env(safe-area-inset-bottom))
                max(1rem,var(--sa-left));z-index:40;}
  /* 32rem ולא 34. שניהם אמרו 34rem, אבל box-sizing:border-box גורם
     ל---shell לספור את הריפוד שלו *בתוך* המקסימום — כלומר תוכן של
     32rem — בעוד .dock-in יושב כבר בתוך הריפוד של .dock ומקבל 34rem
     מלאים. שני מספרים זהים שמדדו דברים שונים, והכפתור יצא רחב ב-32px
     מעמודת התוכן בכל רוחב מעל הסף. במובייל זה לא התבטא. */
  .dock-in{max-width:32rem;margin:0 auto;display:flex;gap:.5rem;}
  /* Bottom clearance for the two-button (col) dock, which is taller than the
     shell's 8rem reserve. Includes the safe-area so a notched phone clears too. */
  .dock-tall{height:calc(var(--s5) + env(safe-area-inset-bottom));}
  .dock-in .b-primary{flex:1;}

  /* ---------- sheet ---------- */
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:grid;
         align-items:end;justify-items:center;}
  .sheet{background:var(--surface);width:100%;max-width:34rem;border-radius:24px 24px 0 0;
         padding:.65rem 1rem calc(1.35rem + env(safe-area-inset-bottom));
         max-height:88vh;overflow-y:auto;border:0;
         box-shadow:0 -12px 40px -12px rgba(20,22,31,.25);}
  .grab{width:2.4rem;height:.3rem;border-radius:999px;background:var(--rule);margin:.2rem auto 1rem;}
  .sheet h2{font-size:1.15rem;font-weight:800;margin:0 0 .15rem;letter-spacing:-.015em;}
  .sheet .sh-sub{font-size:.8125rem;color:var(--ink-faint);margin:0 0 var(--s4);}
  /* השורות האלה היו טקסט על רקע הגיליון, מופרד בקו ב---rule-soft שנמדד
     1.10:1 בבהיר ו-1.06 בכהה — כלומר בלתי נראה. ו-:last-of-type ביטל גם
     אותו, כך שרשימה בת פריט אחד — המקרה הנפוץ — הייתה שם צף באוויר בלי
     שום סימן שאפשר להקיש עליו.

     מדוע לא מילוי מהטוקנים הקיימים: --sunk ו---raised הם מדרגות שכבה
     מכוילות ללחישה, ונועדו להיות מורגשים ולא נראים.

     ומדוע לא קו חזק יותר: בתוך גיליון הרקע כבר הוא --surface, ואין ניגוד
     מילוי שנשאר — קו נראה היה מחייב גוון כהה שנקרא ככלוב סביב 46 שורות.

     הפתרון הוא צורה ולא צבע: מילוי ייעודי, פינות מעוגלות ומרווח. גוש
     מעוגל עם אוויר סביבו נקרא כפריט נבחר גם בניגוד מילוי נמוך — זו הצורה
     של רשימה מקובצת בפלטפורמה. */
  .sheet .opt{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:start;
              padding:.8rem .85rem;margin-bottom:.4rem;border-radius:12px;
              background:var(--opt-fill);font-size:.9375rem;font-weight:600;}
  .sheet .opt:last-of-type{margin-bottom:0;}
  .sheet .opt:active{background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),
                                var(--opt-fill);}
  .sheet .opt .oi{width:1.6rem;color:var(--ink-faint);text-align:center;flex:none;}
  .sheet .opt.danger{color:var(--err);}
  /* A standalone action button centers its icon+label, like the primary button
     it usually sits beside (the backup sheet: "הפעילו גיבוי" + "ייצוא" + "לא
     עכשיו" now read as one uniform stack). Selection lists (a face, a name) and
     label-value rows (an optmeta at the far end) keep their start alignment —
     a list is read from the edge, a value sits at the end, neither from the
     middle. */
  .sheet .opt:not(:has(.pav)):not(:has(.optmeta)):not(.pick){justify-content:center;}

  /* ---------- גיליון הוספת שחקן ----------
     .sheet h2 ו-.sh-sub משרתים כל גיליון באפליקציה, ולכן הכול כאן מוקף
     במחלקה משלו ולא דולף.

     טיפוגרפיה: הכותרת גדלה מ-1.15 ל-1.35rem והמעקב התהדק ל---.022em.
     ככל שטקסט גדל האותיות נקראות רחוקות זו מזו, ולכן מעקב שלילי גדל
     איתו; זה מה שמבדיל כותרת מוקפדת ממסמך.

     הכותרת והמשנה במרכז כי הם פונים אל הגיליון כולו. הרשימה נשארת
     מיושרת להתחלה — רשימה נקראת מהקצה, לא מהאמצע. */
  .addmid h2{font-size:1.35rem;letter-spacing:-.022em;text-align:center;
             text-wrap:balance;margin-bottom:.2rem;}
  .addmid .sh-sub{text-align:center;font-size:.875rem;color:var(--ink-soft);
                  text-wrap:pretty;margin-bottom:1.15rem;}

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

     8.5rem ולא רוחב מלא. תיבה באורך שורה למספר בן שלוש ספרות מבקשת
     יותר ממה שהיא צריכה, ומזמינה לחשוב שמצופה כאן טקסט. */
  .am-block{display:flex;flex-direction:column;align-items:center;gap:.28rem;
            margin-bottom:1.15rem;}
  .am-lab{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--ink-faint);}
  .inp.am-v{width:8.5rem;text-align:center;font-size:1.75rem;font-weight:800;
            padding:.5rem .4rem;line-height:1.15;}
  .am-hint{font-size:.72rem;color:var(--ink-faint);text-align:center;text-wrap:pretty;}

  /* מפריד שאומר מה בא אחריו. בלעדיו קפצו משדה הסכום היישר לרשימת שמות
     בלי שנאמר מה היא. קו משני צדדים כדי שייקרא כחלוקה ולא ככותרת נוספת. */
  .am-sep{display:flex;align-items:center;gap:.6rem;margin:1.15rem 0 .35rem;
          font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);}
  .am-sep::before,.am-sep::after{content:"";flex:1;height:1px;background:var(--rule-soft);}

  /* .b-ghost הוא --surface — בדיוק צבע הגיליון — ונשען על מסגרת ב---rule
     שנמדדה 1.05:1 מול הדף. כלומר בגיליון הוא היה כפתור בלתי נראה. גוון
     במקומו, אותו טיפול שניתן לכפתור המקביל במסך ההקמה. */
  .addmid .inline-add .b-ghost{background:var(--felt-wash);color:var(--felt-deep);
                               border:0;box-shadow:none;font-weight:800;}
  .addmid .inline-add .b-ghost:active{
      background:linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07)),var(--felt-wash);} .sheet .opt.danger .oi{color:var(--err);}
  .optmeta{margin-inline-start:auto;font-size:.75rem;color:var(--ink-faint);font-weight:400;flex:none;}
  .wakeon{color:var(--pos);font-weight:600;}
  .syncflag{font-weight:600;}
  .syncflag.ok{color:var(--pos);} .syncflag.error{color:var(--err);}
  .syncflag.syncing{color:var(--ink-faint);}
  .syncflag:not(:empty)::after{content:" · ";color:var(--ink-faint);font-weight:400;}
  .elog{padding:.45rem 0;border-bottom:1px solid var(--rule-soft);display:flex;
        align-items:center;gap:.6rem;font-size:.875rem;}
  .elog:last-child{border-bottom:0;}
  .elog .et{font-family:var(--f-data);font-size:.75rem;color:var(--ink-faint);flex:none;}
  .elog .ea{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:700;flex:1;
            direction:ltr;unicode-bidi:isolate;}
  /* debit and credit carry ledger ink: money in is green, money out is red */
  .elog .ea.in{color:var(--pos);} .elog .ea.out{color:var(--neg);}
  .elog.isvoid .ea,.elog.isvoid .ek{text-decoration:line-through;opacity:.4;}
  .elog .ek{font-size:.8125rem;color:var(--ink-soft);}

  /* ---------- toast ---------- */
  .toast{position:fixed;inset-inline:1rem;bottom:calc(5.6rem + env(safe-area-inset-bottom));
         max-width:32rem;margin:0 auto;background:var(--ink);color:var(--paper);
         border-radius:14px;padding:.7rem .9rem;display:flex;align-items:center;gap:.75rem;
         font-size:.875rem;z-index:60;box-shadow:0 8px 28px rgba(0,0,0,.28);}
  /* The toast always inverts ink/paper, so its background is dark in the
     ledger and light at night — --toast-accent is set per theme below so
     the undo control clears contrast against whichever it lands on. */
  /* the <b> here is the undo control itself, so it earns a 44px target;
     negative block margins keep the toast the same visual height */
  .toast .t-undo{background:none;border:0;color:inherit;font:inherit;font-weight:800;
           margin-inline-start:auto;cursor:pointer;}
  .toast b,.toast .t-undo{font-weight:700;color:var(--toast-accent);flex:none;min-height:44px;min-width:44px;
           display:inline-flex;align-items:center;justify-content:center;
           margin-block:-.7rem;padding:0 .25rem;}

  .warn{background:var(--err-wash);border:0;color:#B03A3F;
        border-radius:14px;padding:.75rem .9rem;font-size:.8125rem;margin-bottom:1rem;line-height:1.5;
        font-weight:600;}
  .empty{text-align:center;color:var(--ink-faint);font-size:.875rem;padding:2rem 1rem;}
  /* Still tappable — it scrolls to the reason — but it must not look like
     the button that closes the night. */
  .b-blocked{background:var(--ink-faint);box-shadow:none;}
  /* White plate under the code: a scanner needs the quiet zone to be light,
     and the sheet is not guaranteed to be. */
  /* The scrim is one element with a hole punched in it, so the circle is the
     real preview: whatever sits inside it is what gets written. */
  .crop-stage{position:relative;width:250px;height:250px;margin:.5rem auto .9rem;
              overflow:hidden;border-radius:18px;background:var(--sunk);
              touch-action:none;cursor:grab;}
  .crop-stage:active{cursor:grabbing;}
  .crop-img{position:absolute;left:50%;top:50%;transform-origin:center;
            max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none;}
  .crop-mask{position:absolute;inset:0;pointer-events:none;
             background:rgba(20,22,31,.55);
             -webkit-mask:radial-gradient(circle at 50% 50%,transparent 124px,#000 125px);
             mask:radial-gradient(circle at 50% 50%,transparent 124px,#000 125px);}
  .crop-zoom{width:100%;margin:0 0 1rem;accent-color:var(--felt);min-height:44px;}
  /* The stored face is 88px — plenty for a 34px circle, and soft if blown up
     to fill a screen. Capped at 260px, where it still reads as a photograph. */
  /* No backdrop-filter. A blurred backdrop on the same element as a dark
     translucent background composites the two in the wrong order in some
     engines, and the scrim came out lighter than the page behind it — the
     opposite of the job. A plain dark layer is darker, cheaper, and behaves
     the same everywhere. */
  .lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
            background:rgba(10,11,16,.9);opacity:0;transition:opacity .16s ease-out;}
  .lightbox.on{opacity:1;}
  .lightbox img{width:min(200px,58vw);height:min(200px,58vw);object-fit:cover;
                border-radius:50%;box-shadow:0 24px 60px -12px rgba(0,0,0,.6);
                border:4px solid rgba(255,255,255,.92);}
  @media (prefers-reduced-motion:reduce){.lightbox{transition:none}}
  /* The switch is a real switch, not a checkmark: role="switch" tells a screen
     reader what it is, and the track shows the state without relying on colour
     alone — the knob moves. */
  .chiprow{display:flex;gap:.5rem;align-items:center;margin-bottom:.6rem;}
  .chiprow .inp.text{flex:1;}
  .chiprow .inp[type=number]{width:5.5rem;text-align:center;}
  .chiprow.tally{justify-content:space-between;}
  .chiprow.tally .cq{flex:1;font-weight:600;font-size:.9375rem;}
  .chipsum{display:flex;align-items:center;justify-content:space-between;
           background:var(--sunk);border-radius:14px;padding:.7rem .9rem;margin:.2rem 0 1rem;}
  .chipsum .k{font-size:.8rem;font-weight:700;color:var(--ink-faint);}
  .chipsum .v{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:800;
              font-size:1.35rem;direction:ltr;unicode-bidi:isolate;}
  .ccalc{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
         background:var(--sunk);color:var(--ink-soft);}
  .ccalc svg{width:1.15rem;height:1.15rem;}
  .linkish{color:var(--felt);text-decoration:underline;font:inherit;padding:.2rem 0;}
  .sw{width:2.6rem;height:1.55rem;border-radius:999px;flex:none;position:relative;
      background:var(--rule);transition:background .18s ease-out;}
  .sw::after{content:"";position:absolute;top:.2rem;inset-inline-end:.2rem;
             width:1.15rem;height:1.15rem;border-radius:50%;background:var(--surface);
             box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s ease-out;}
  .sw.on{background:var(--felt);}
  .sw.on::after{transform:translateX(-1.05rem);}
  @media (prefers-reduced-motion:reduce){.sw,.sw::after{transition:none}}
  .qrwrap{display:flex;justify-content:center;margin:.4rem 0 .9rem;}
  .qrwrap .qr{border-radius:12px;box-shadow:var(--sh-card);background:#fff;}
  .qrcode{text-align:center;font-family:var(--f-data);font-size:1.35rem;font-weight:800;
          letter-spacing:.22em;color:var(--ink);margin-bottom:1rem;
          direction:ltr;unicode-bidi:isolate;}
  .dock-in.col{flex-direction:column;}
  .mlrow{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;
         border-bottom:1px solid var(--rule-soft);}
  .mlrow:last-child{border-bottom:0;}
  .mlrow.tonight{background:var(--felt-wash);}
  .mlrk{width:1.1rem;text-align:center;font-family:var(--f-data);font-size:.8rem;
        font-weight:700;color:var(--ink-faint);flex:none;}
  .mlnm{flex:1;font-weight:600;font-size:.9375rem;}
  .mlnet{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:800;
         font-size:.9375rem;direction:ltr;unicode-bidi:isolate;}
  .mlnet.pos{color:var(--pos);} .mlnet.neg{color:var(--err);}
  /* Reads as a sample through its frame and its tag — NOT through opacity.
     Fading the card dropped the money figures from 5.35:1 to 2.67:1, which is
     the same mistake the live card made: hierarchy bought with transparency
     and paid for in contrast. Inert to the finger so nobody taps a row
     expecting it to open. */
  .prev-card{pointer-events:none;background:transparent;box-shadow:none;
             border:1.5px dashed var(--rule);}
  .prev-tag{margin-inline-start:.45rem;font-size:.62rem;font-weight:800;
            letter-spacing:.04em;color:var(--felt-deep);background:var(--felt-wash);
            border-radius:999px;padding:.16rem .5rem;vertical-align:.08em;}
  /* A ledger app and a budget app look identical until something moves.
     These two are the whole of it: the action repeated forty times a night,
     and the one moment the night is actually over. Nothing else animates. */
  .chipfly{position:fixed;z-index:60;width:26px;height:26px;border-radius:50%;
           pointer-events:none;background:var(--felt);
           box-shadow:0 0 0 3px var(--surface) inset,0 4px 12px -2px rgba(20,22,31,.35);
           will-change:transform,opacity;}
  @keyframes potbump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
  /* .ptot נוסף לרשימה: אותה הקפצה בדיוק, על הסכום בשורה שהוקשה. הז'יטון
     עף משם אל הקופה, ועד עכשיו רק היעד הגיב. */
  .potbar .v.bump,.live-card .lc-main.bump,.prow .ptot.bump{
      animation:potbump .34s cubic-bezier(.34,1.56,.64,1);
      transform-origin:right center;}

  /* יציאה מוקדמת. .prow.out הוא opacity:.5, והשורה קפצה למצב העמום בלי
     מעבר — נראה כתקלת רינדור ולא כאירוע. דהייה ולא תזוזה, ולכן היא
     נשארת גם תחת prefers-reduced-motion: שינוי אטימות הוא בדיוק
     המקבילה העדינה שההעדפה הזאת מבקשת, לא מה שהיא מבקשת להסיר. */
  @keyframes rowout{from{opacity:1} to{opacity:.5}}
  .prow.out.leaving{animation:rowout .28s ease-out both;}
  /* The stamp is pressed, not faded in: down hard, overshoot, settle. */
  @keyframes stamppress{
    0%{transform:rotate(-14deg) scale(2.1);opacity:0}
    55%{transform:rotate(-3.5deg) scale(.92);opacity:1}
    75%{transform:rotate(-3.5deg) scale(1.06)}
    100%{transform:rotate(-3.5deg) scale(1);opacity:.9}}
  .rstamp.press span{animation:stamppress .5s cubic-bezier(.2,.9,.3,1) both;
                     animation-delay:var(--stampd,0ms);}

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

     70ms בין שורה לשורה — מספיק כדי שייקרא כרצף ולא כהבהוב, ומספיק
     קצר כדי ששולחן של שמונה לא יחכה. */
  @keyframes rprint{from{opacity:0;transform:translateY(-9px)}
                    to{opacity:1;transform:none}}
  .receipt.printing .nrow{animation:rprint .32s cubic-bezier(.23,1,.32,1) both;
                          animation-delay:calc(var(--i,0) * 70ms);}
  /* תנועה מופחתת: הצטלבות אטימות בלבד, בלי תזוזה, והחותמת כבר מטופלת
     בכלל הקיים למטה. */
  @media (prefers-reduced-motion:reduce){
    .receipt.printing .nrow{animation:rprintfade .3s ease-out both;}
  }
  @keyframes rprintfade{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .rstamp.press span{animation:none}
    .potbar .v.bump,.live-card .lc-main.bump{animation:none}}
  @keyframes balpulse{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
  .bal.pulse{animation:balpulse .38s ease-out;}
  @media (prefers-reduced-motion:reduce){.bal.pulse{animation:none}}
  .foot{text-align:center;font-size:.75rem;color:var(--ink-faint);margin-top:2.5rem;}
  /* --ink-soft, not --ink-faint: a link a person is asked to read before
     consenting has to clear AA against the sheet, underline included */
  .foot a{color:var(--ink-soft);text-decoration:underline;}
  .build{font-family:var(--f-data);font-size:.65rem;opacity:.7;letter-spacing:.02em;}

  /* ---------- welcome sheet ---------- */
  .wl-mark{width:3.6rem;height:3.6rem;border-radius:50%;margin:0 auto .8rem;
           display:grid;place-items:center;
           background:var(--felt-wash);border:0;color:var(--felt);}
  .wl-t{font-size:1.25rem;font-weight:800;text-align:center;margin:0 0 .2rem;
        letter-spacing:-.02em;}
  .wl-row{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .2rem;
          font-size:.88rem;line-height:1.6;color:var(--ink-soft);}
  .wl-row b{color:var(--ink);}

  /* ---------- "איך זה עובד" ---------- */
  .faq{border-bottom:1px solid var(--rule);}
  .faq summary{list-style:none;cursor:pointer;padding:.85rem .2rem;
               font-size:.95rem;font-weight:600;display:flex;align-items:center;
               gap:.6rem;min-height:44px;}
  .faq summary::-webkit-details-marker{display:none;}
  /* the caret is authored pointing down and rotated, so RTL never flips it
     into a wrong-facing arrow the way a ‹ / › glyph would */
  .faq summary::before{content:"";flex:none;width:.5rem;height:.5rem;
                       border-inline-end:2px solid var(--ink-faint);
                       border-block-end:2px solid var(--ink-faint);
                       transform:rotate(-45deg);transition:transform .18s ease;
                       margin-inline-start:.15rem;}
  /* +180° from the closed state, so it flips down→up rather than down→sideways */
  .faq[open] summary::before{transform:rotate(135deg);}
  .faq summary:active{background:var(--sunk);}
  .faq-a{padding:0 .2rem .95rem 1.3rem;font-size:.9rem;line-height:1.65;
         color:var(--ink-soft);}
  .faq-a b{color:var(--ink);font-weight:700;}
  .wl-i{font-size:1.25rem;flex:none;width:2rem;text-align:center;line-height:1.5;}

  /* backup recovery code — meant to be read aloud and written down */
  .bkcode{font-family:var(--f-data);font-size:1.35rem;font-weight:600;
          letter-spacing:.16em;text-align:center;direction:ltr;
          background:var(--sunk);border:0;
          border-radius:12px;padding:.85rem .5rem;color:var(--ink);
          user-select:all;-webkit-user-select:all;}
  .bkflag.ok{color:var(--pos);} .bkflag.error{color:var(--err);}
  .bkflag.syncing{color:var(--ink-faint);}

  /* signed-in identity chip */
  .acct{display:flex;align-items:center;gap:.7rem;background:var(--sunk);
        border:0;border-radius:14px;padding:.85rem 1rem;}
  .acct-i{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;
          place-items:center;border:1px solid var(--felt);background:transparent;color:var(--felt);
          font-size:.9rem;font-weight:700;}
  .acct-e{font-family:var(--f-data);font-size:.85rem;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap;}

  /* who holds the chips — the first thing to know on a shared table */
  .bankerbar{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
             background:var(--surface);border:0;box-shadow:var(--sh-card);
             border-radius:14px;padding:.75rem .9rem;}
  .bankerbar.me{box-shadow:none;}
  .bankerbar.me{background:var(--felt-wash);border-color:var(--felt);}
  .bb-i{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;
        place-items:center;background:var(--sunk);font-size:.95rem;}
  .bankerbar.me .bb-i{background:transparent;color:var(--felt);border:1px solid var(--felt);}
  .bb-t{flex:1;font-size:.78rem;color:var(--ink-soft);line-height:1.5;}
  .bb-t b{color:var(--ink);font-size:.88rem;}
  .bb-a{flex:none;min-height:36px;padding:0 .8rem;border-radius:999px;
        border:1px solid var(--rule-soft);background:var(--surface);
        color:var(--ink-soft);font-size:.78rem;font-weight:600;}

  /* ---------- group admin ---------- */
  .joinrow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
  .joincode{flex:1;min-width:6.5rem;font-family:var(--f-data);font-size:1.35rem;
            font-weight:700;letter-spacing:.22em;text-align:center;
            background:var(--sunk);border:0;border-radius:12px;
            padding:.55rem .3rem;}
  .mrow{display:flex;align-items:center;gap:.5rem;padding:.6rem 0;
        border-bottom:1px solid var(--rule-soft);}
  .mrow:last-of-type{border-bottom:0;}
  .mn{flex:1;font-weight:600;font-size:.9375rem;min-width:0;}
  .msub{display:block;font-weight:400;font-size:.76rem;color:var(--ink-soft);
        margin-top:.1rem;}
  /* smaller than a primary control but still a real thumb target */
  .b-ghost.sm,.b-danger.sm{flex:none;min-height:38px;padding:0 .75rem;
                           font-size:.8125rem;width:auto;}

  /* ---------- league / stats ---------- */
  /* Was #E9EAF1. A fixed light track under a themed label is how the inactive
     segment ended up at 1.83:1 in dark: --ink-soft had turned light and the
     track had not. */
  .segs{display:flex;gap:.3rem;background:var(--sunk);padding:.25rem;border-radius:12px;}
  /* --ink-soft on the segment track measured 4.31:1; this is the same
     muted register, one step darker, at 5.2:1. */
  .seg{flex:1;min-height:40px;border-radius:10px;font-size:.8125rem;font-weight:700;
       color:var(--ink-soft);touch-action:manipulation;}
  .seg.on{background:var(--surface);color:var(--ink);font-weight:800;box-shadow:var(--sh-card);}

  .chartwrap{padding:.8rem .6rem .5rem;color:var(--ink);}
  .chart{width:100%;height:auto;display:block;}

  .lrow{display:flex;align-items:center;gap:.35rem;padding:.65rem .85rem;
        border-bottom:1px solid var(--rule-soft);font-size:.875rem;}
  .lrow:last-child{border-bottom:0;}
  /* ink-soft, not ink-faint: tertiary text cannot clear AA on --sunk */
  .lhead{font-size:.6875rem;color:var(--ink-soft);font-weight:600;background:var(--sunk);
         padding-top:.5rem;padding-bottom:.5rem;}
  .lp{flex:1;display:flex;align-items:center;gap:.4rem;font-weight:600;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lc{width:2.2rem;text-align:center;flex:none;font-family:var(--f-data);
      font-variant-numeric:tabular-nums;font-size:.8125rem;color:var(--ink-soft);}
  /* "מק׳ 1" היה קצר אבל דרש מקרא. "ניצחונות" נמדד ב-34px מול 35.2 של
     .lc — נכנס, אבל 1.2px מרווח נשבר בכל שינוי גופן או צפיפות. הרוחב
     הייעודי לוקח 10px מעמודת השם, שהיא גמישה וממילא הרחבה בשורה. */
  .lc.lwin{width:2.8rem;}
  .lhead .lc,.lhead .lnet,.lhead .lp{font-family:var(--f-text);font-size:.6875rem;}
  .lnet{width:4.6rem;text-align:end;flex:none;font-family:var(--f-data);
        font-variant-numeric:tabular-nums;font-weight:700;}
  .lnet.pos{color:var(--pos);} .lnet.neg{color:var(--neg);}
  /* your own row, so you find yourself without reading every name */
  /* physical inset put the "this is you" bar on the trailing edge in RTL —
     the far side of the row from the name it marks. */
  .lrow.me{background:var(--felt-wash);border-inline-start:2px solid var(--felt);}
  .lrow.me .lp{font-weight:700;}

  .rrow{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;
        border-bottom:1px solid var(--rule-soft);}
  .rrow:last-child{border-bottom:0;}
  .rl{color:var(--ink-soft);font-size:.8125rem;flex:none;}
  .rw{flex:1;font-weight:700;font-size:.875rem;text-align:end;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rv{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:.75rem;
      color:var(--ink-faint);flex:none;}

  .pill.xfer{border-style:dashed;border-color:var(--felt);color:var(--felt);background:transparent;}

  /* ---------- shared expenses ---------- */
  /* ---------- שורת הפעולות של השולחן החי ----------
     שלוש פעולות שוות במעמדן, ולכן שורה ולא ערימה. הן שמרו על אותו
     משטח של .xlink — --surface ו---sh-card — כך שהמעבר הוא בפריסה
     בלבד ולא בשפה.

     סמל מעל מילה ולא לצידה: ברבע רוחב שורה אופקית נחתכת, ובעמודה שני
     האיברים מקבלים את כל הרוחב.

     64px ולא 44: יעד המגע הוא המינימום, אבל כאן שלושה יעדים צמודים זה
     לזה, וגובה נדיב מקטין פגיעה בשכן. */
  .acts{display:flex;gap:.5rem;margin-top:.6rem;}
  .act{flex:1;min-width:0;min-height:64px;
       display:flex;flex-direction:column;align-items:center;justify-content:center;
       gap:.15rem;border:0;border-radius:14px;
       background:var(--surface);box-shadow:var(--sh-card);color:var(--ink-soft);}
  .act:active{background:var(--raised);}
  .act .a-i{font-size:1.05rem;line-height:1;opacity:.72;}
  .act .a-l{font-size:.8125rem;font-weight:700;line-height:1.2;}
  .act .a-m{font-family:var(--f-data);font-variant-numeric:tabular-nums;
            font-size:.66rem;font-weight:600;opacity:.72;line-height:1.2;}

  /* היה border:1.5px dashed var(--rule). שני דברים לא עבדו שם:

     · --rule הוא צבע של קו-שיער מפריד, ונמדד 1.05:1 מול הדף בבהיר
       ו-1.32 בכהה. כלומר לפעולות האלה לא היה גבול *נראה* בכלל, לא
       בערכה אחת ולא בשנייה.
     · וקו מקווקו הוא מוסכמה של מציין-מקום או אזור-שחרור — "כאן יבוא
       משהו" — ולא של פעולה שאפשר ללחוץ עליה.

     במקומו משטח אמיתי, אותו --surface ו---sh-card של שאר הכרטיסים
     באפליקציה. הפעולות נראות כמו מה שהן, ובאותה שפה של כל השאר.

     --ink-soft ולא --ink-faint: אלה פעולות, לא כיתובי עזר. */
  .xlink{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
         margin-top:.6rem;border:0;border-radius:14px;
         background:var(--surface);box-shadow:var(--sh-card);
         color:var(--ink-soft);font-size:.875rem;font-weight:600;}
  .xlink:active{background:var(--raised);}
  /* הפעולה ההרסנית במפורש *לא* מקבלת משטח. היא נשארת קישור חשוף
     בתחתית, כדי שלא תיראה כמו עוד אחת מהשורות שמעליה. */
  .xlink.danger{background:none;box-shadow:none;color:var(--err);font-weight:700;
                margin-top:1.1rem;}
  .xlink.danger:active{background:var(--err-wash);}
  .xrow{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;
        border-bottom:1px solid var(--rule-soft);font-size:.875rem;}
  .xrow:last-child{border-bottom:0;}
  .xl{font-weight:600;flex:none;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .xp{flex:1;color:var(--ink-faint);font-size:.8125rem;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap;}
  .xa{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:700;flex:none;}
  .sharebox{width:100%;background:var(--sunk);border:0;border-radius:12px;
            padding:.8rem;font-family:var(--f-data);font-size:.8125rem;line-height:1.7;
            color:var(--ink);resize:none;direction:rtl;text-align:start;}

  /* ================= app shell: tab bar + pushed screens =================
     Root screens (play / league / history / more) keep the tab bar. Screens
     you push into — setup, live game, settle, result — hide it and show an
     action dock instead, so the bottom edge never carries two bars. */
  .tabbar{position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;
          background:color-mix(in srgb, var(--surface) 88%, transparent);
          -webkit-backdrop-filter:blur(24px) saturate(160%);
          backdrop-filter:blur(24px) saturate(160%);
          border-top:1px solid var(--rule);
          padding-bottom:env(safe-area-inset-bottom);}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
       gap:3px;padding:.5rem 0 .4rem;min-height:50px;color:var(--ink-faint);
       font-size:.625rem;font-weight:600;letter-spacing:.01em;
       touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .tab svg{width:23px;height:23px;display:block;}
  .tab.on{color:var(--felt);}
  .tab:active{opacity:.55;}

  /* large title, iOS style */
  .lgtitle{font-size:1.95rem;font-weight:800;letter-spacing:-.025em;line-height:1.15;
           margin:.4rem 0 .2rem;}
  .lgsub{font-size:.85rem;color:var(--ink-soft);margin-bottom:1.3rem;}

  /* pushed-screen header with a back chevron */
  .navbar{display:flex;align-items:center;gap:.35rem;padding:.9rem 0 .5rem;min-height:3.2rem;}
  .navbar .back{width:44px;height:44px;flex:none;border-radius:50%;
                background:var(--surface);box-shadow:var(--sh-card);
                display:grid;place-items:center;color:var(--ink);
                margin-inline-end:.35rem;}
  .navbar .back svg{width:18px;height:18px;}
  .navbar .nt{font-size:1.05rem;font-weight:700;flex:1;margin:0;}
  /* block, because it used to be a div — an h1 may only contain phrasing
     content, and a div inside one is invalid and parses unpredictably */
  .navbar .ns{display:block;font-size:.72rem;color:var(--ink-faint);font-weight:400;}

  /* grouped inset list — separators inset from the leading edge, as on iOS */
  .ilist{background:var(--surface);border:0;border-radius:18px;
         overflow:hidden;box-shadow:var(--sh-card);}
  .irow{display:flex;align-items:center;gap:var(--s3);padding:.85rem 1rem;position:relative;
        width:100%;text-align:start;min-height:52px;}
  .irow + .irow::before{content:"";position:absolute;top:0;height:1px;
                        inset-inline-start:3.2rem;inset-inline-end:0;background:var(--rule);}
  /* the legal links are real <a>s, so they need the button reset the others get */
  a.irow{color:inherit;text-decoration:none;box-sizing:border-box;}
  .irow.danger .il,.irow.danger .ic{color:var(--err);}
  .irow:active{background:var(--sunk);}
  /* --ink, not --ink-soft: on the lifted --sunk the muted tone fell to 4.16 */
  .irow .ic{width:2rem;height:2rem;border-radius:10px;flex:none;display:grid;place-items:center;
            background:var(--sunk);color:var(--ink);font-size:.9rem;}
  .irow .il{flex:1;font-size:.95rem;font-weight:600;overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap;}
  /* אווטאר המנצח במקום כתר. .ic הוא ריבוע אייקון עם רקע, וכאן הוא
     מחזיק אווטאר עגול — הרקע יורד כדי שלא ייווצר ריבוע מאחורי עיגול. */
  .hic{background:none!important;position:relative;display:grid;place-items:center;}
  /* הכתר חוזר רק כשאני ניצחתי, ואז הוא תג קטן על האווטאר. */
  .hcrown{position:absolute;inset-inline-end:-3px;bottom:-3px;color:var(--gold);
          font-size:.62rem;line-height:1;display:grid;place-items:center;
          filter:drop-shadow(0 0 2px var(--surface));}
  .hcrown svg{width:.72rem;height:.72rem;display:block;}

  .irow .im{font-size:.8rem;color:var(--ink-faint);flex:none;
            font-family:var(--f-data);font-variant-numeric:tabular-nums;}
  .irow .chev{color:var(--ink-faint);flex:none;display:grid;place-items:center;}
  .irow .chev svg{width:15px;height:15px;}

  .grouphead{font-size:.8rem;color:var(--ink-faint);font-weight:800;
             margin:1.5rem .2rem .55rem;}
  .irsub{display:block;font-size:.72rem;color:var(--ink-faint);font-weight:400;
         margin-top:1px;}

  /* home header — brand right, group chip left */
  /* היה ריפוד אופקי של .05rem — 0.8px. הוא דחף את הכותרת פנימה, כך
     שהמותג נגמר ב-358 בזמן שכל כרטיס מתחתיו נגמר ב-359, והאווטאר
     התחיל ב-17 מול 16. פיקסל אחד, אבל הוא שובר את הקו האנכי של המסך
     כולו. */
  .hdr{display:flex;align-items:center;justify-content:space-between;
       padding:.55rem 0 .85rem;}
  .hbrand{display:flex;align-items:center;gap:.5rem;min-width:0;}
  .hbrand .mk{height:1.75rem;width:auto;color:var(--felt);}
  .hbrand b,.hbrand h1{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;margin:0;}
  /* Read by a screen reader, never shown. Not display:none — that would
     remove it from the accessibility tree along with the pixels. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
           overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .hdr-r{display:flex;align-items:center;gap:.45rem;flex:none;min-width:0;}
  .hme{width:2.3rem;height:2.3rem;min-height:44px;min-width:44px;border-radius:50%;flex:none;
       display:grid;place-items:center;background:var(--surface);box-shadow:var(--sh-card);
       border:1px solid var(--rule);overflow:hidden;padding:0;
       font-weight:800;font-size:.95rem;color:var(--ink-soft);}
  .hme.on{border-color:var(--felt);color:var(--felt);}
  .hme img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
  .hme svg{width:1.15rem;height:1.15rem;}
  /* 44px כמו האווטאר לצידו. הם יושבים זה ליד זה, ושני גבהים שונים
     קראו כשני פקדים לא קשורים; וכעת כשזה כפתור אמיתי, זה גם המינימום
     ליעד מגע. */
  .hgrp{display:flex;align-items:center;gap:.35rem;min-height:44px;
        background:var(--surface);
        border:1px solid var(--divider,var(--rule));border-radius:999px;padding:.4rem .9rem;
        font-size:.8rem;font-weight:700;color:var(--ink-soft);box-shadow:var(--sh-card);
        flex:none;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* home standings — rank, avatar, name+meta, tinted amount pill */
  .lastnight{display:flex;align-items:center;gap:.7rem;width:100%;text-align:start;
             background:var(--surface);border-radius:18px;box-shadow:var(--sh-card);
             padding:.8rem 1rem;margin-top:.6rem;}
  .lastnight .ln-ic{width:2.35rem;height:2.35rem;border-radius:50%;background:var(--gold-wash);
             color:var(--gold);display:grid;place-items:center;flex:none;font-size:1.05rem;}
  .lastnight .ln-tx{flex:1;min-width:0;}
  .lastnight .ln-t{display:block;font-size:.85rem;font-weight:700;color:var(--ink);}
  .lastnight .ln-s{display:block;font-size:.73rem;color:var(--ink-faint);font-weight:600;
             margin-top:.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lastnight .chev{color:var(--ink-faint);flex:none;display:grid;place-items:center;}
  /* השורה האישית חולקת את השלד של .lastnight — אייקון, טקסט, חץ —
     ומוסיפה ערך. הטקסט נדחס כדי שהסכום לא יידחף החוצה בשם ארוך. */
  .lgstrip .ln-tx{min-width:0;}
  .lgstrip .lbval{flex:none;margin-inline-start:.5rem;}

  /* כרטיס החוב הפתוח. הסמל הוא אותו ⇄ של ההעברות בספר, כדי שהקשר
     יהיה מיידי ולא ילמד מחדש. */
  .owe .ln-ic{color:var(--ink-soft);font-size:1.15rem;}

  /* ---------- לוח הפתיחה ----------
     הפעולה הראשית מקבלת משטח במקום להיות רצועה. הערימה יושבת מעליה
     ולא לצידה: בעמודה שניהם מקבלים את מלוא הרוחב, והעין יורדת מהאובייקט
     אל הפעולה בסדר הנכון. */
  .starttable{display:flex;flex-direction:column;align-items:center;
              gap:.85rem;padding:1.35rem 1.15rem 1.15rem;}
  .starttable .hemk{width:min(148px,42vw);}
  .starttable .b-primary{width:100%;}

  /* כניסה מדורגת. transform ו-opacity בלבד, שניהם על ה-compositor,
     ועקומת ease-out — כניסה שמאיטה בסוף נקראת כהגעה, כניסה שמאיצה
     בהתחלה נקראת כעיכוב. */
  @keyframes cardin{from{opacity:0;transform:translateY(10px)}
                    to{opacity:1;transform:none}}
  .enter{animation:cardin .34s cubic-bezier(.23,1,.32,1) both;}
  /* התנועה כאן היא כניסה, לא משוב על פעולה, ולכן תחת תנועה מופחתת
     היא יורדת לגמרי — האטימות לבדה מספיקה. */
  @media (prefers-reduced-motion:reduce){
    .enter{animation:none;}
  }

  /* ---------- RTL: the chevrons were authored pointing the LTR way ----------
     chev's apex sits at x=7 (points left) and chevSm's at x=15 (points right).
     In an RTL app that is exactly backwards: "back" travels rightward, and a
     disclosure arrow at the trailing (left) edge must point left, not back
     into its own label. Flipping in CSS keeps one set of paths for both
     directions. The ‹ / › literals are bidi-mirrored by the engine, which
     lands them wrong for the same reason — hence direction:ltr on .iconbtn,
     which stops the mirroring so the glyph means what it says. */
  .navbar .back svg,
  .irow .chev svg,
  .lastnight .chev svg{transform:scaleX(-1);}
  .iconbtn{direction:ltr;unicode-bidi:isolate;}
  /* the top back button, once it became a real chev path like the navbar's.
     scaleX(-1) points it right — "back" in an RTL app. */
  .iconbtn svg{width:20px;height:20px;transform:scaleX(-1);}

  /* A negative total must not read as a positive one. money() emits
     −₪1,234; without an isolate the bidi algorithm walks the minus to the far
     end (₪1,234−), where it looks like a stray dash. Eleven sibling rules
     already carry this; these four were missed. */
  /* .lc was missed in the first sweep: the league average renders "+"+280,
     and without the isolate the sign walks to the far end — "280+" — so a
     losing average reads as a winning one. Same class of bug as the four
     below, one column over. */
  .lnet,.rv,.xa,.crow .fixed,.lc{direction:ltr;unicode-bidi:isolate;}
  /* .lnet's text-align:end would follow the new direction and jump to the
     physical right; pin it back to where the column has always sat. */
  .lnet{text-align:left;}
  .lastnight .chev svg{width:15px;height:15px;}
  .lbrow{display:flex;align-items:center;gap:.7rem;padding:.72rem 1rem;position:relative;}
  .lbrow+.lbrow::before{content:"";position:absolute;top:0;inset-inline-start:3.9rem;
                        inset-inline-end:1rem;height:1px;background:var(--rule);}
  .lbrk{width:1rem;flex:none;text-align:center;font-size:.8rem;font-weight:700;
        color:var(--ink-faint);font-variant-numeric:tabular-nums;}
  .lbnm{flex:1;font-weight:700;font-size:.94rem;min-width:0;
        overflow:hidden;text-overflow:ellipsis;}
  .lbnm .lb-crown{color:var(--gold);font-size:.8rem;margin-inline-start:.25rem;}
  .lbnm .lb-me{font-size:.62rem;font-weight:800;color:var(--felt);
        background:var(--felt-wash);border-radius:999px;padding:.1rem .45rem;
        margin-inline-start:.35rem;vertical-align:.1em;}
  /* min-width כדי שהגלולות ייצרו טור. נמדד לפני: הקצה השמאלי אחיד אבל
     הימני 92, 71, 71, 85, 85 — הספרות לא הסתדרו זו מתחת לזו, וזה בדיוק
     מה שסורקים בטבלת דירוג. הגלולה חובקת את תוכנה מטבעה, ורוחב מזערי
     משותף מיישר את הרוב בלי לחתוך סכום חריג. */
  .lbval{font-variant-numeric:tabular-nums;font-weight:800;
         font-size:.85rem;flex:none;direction:ltr;unicode-bidi:isolate;
         padding:.28rem .6rem;min-width:4.75rem;justify-content:center;display:inline-flex;align-items:center;border-radius:999px;}
  .lbval.pos{background:var(--pos-wash);color:var(--pos);}
  .lbval.neg{background:var(--neg-wash);color:var(--neg);}
  .lbval:not(.pos):not(.neg){color:var(--ink-soft);}

  /* .mk הוא סימן המותג המוטבע (BRAND_MARK), והוא מופיע בשני הקשרים:
     בכותרת הבית בתוך .hbrand, ובמסך הפתיחה בתוך .wl-mark. הכלל הזה
     משרת את השני — 56% מגובה המשבצת — בעוד .hbrand .mk (שורה 854)
     דורס את הגובה בכותרת. הוא נושא יחס-גובה משלו, ולכן כלל רוחב בלבד
     היה משאיר פסים: הגובה הוא שממלא.

     סביבו ישב פעם lockup שלם — .brand, .brand-mark, .brand-txt,
     .brand-name, .brand-sub והווריאנט הממורכז .brand.c — שמונה כללים
     שאף מחלקה מהם לא הופיעה ב-JS או ב-HTML. הכותרת בפועל היא .hbrand,
     ו-".brand" נשאר בלתי נראה בסריקות רק כי הוא תת-מחרוזת שלה. הוסר. */
  .mk{display:block;height:56%;width:auto;}

  /* group switcher — only rendered when a second group exists */
  /* the group switcher is the same track as .segs — same fix */
  .gswitch{display:flex;gap:.3rem;background:var(--sunk);border:0;
           padding:.25rem;border-radius:12px;margin-bottom:1.1rem;overflow-x:auto;}
  .gs{flex:1 0 auto;min-height:38px;padding:0 .85rem;border-radius:10px;font-size:.82rem;
      font-weight:700;color:var(--ink-soft);white-space:nowrap;touch-action:manipulation;}
  .gs.on{background:var(--surface);color:var(--ink);font-weight:800;
         box-shadow:var(--sh-card);}


  /* empty state — a quiet mark rather than a wall of text */
  .hero-empty{text-align:center;padding:2.6rem 1rem 2.2rem;}
  /* אין כאן opacity. הסימן הקודם היה צללית ב-28% ולכן נקרא כמציין
     מיקום; זה אובייקט, והוא בצבעו. */
  .hero-empty .he-mark{line-height:0;margin-bottom:1.05rem;}
  .hemk{width:min(132px,40vw);height:auto;overflow:visible;}

  /* הז'יטונים נוחתים אחד אחרי השני, פעם אחת בכניסה למסך. לא לולאה:
     זה מסך שנפתח מולו, ותנועה חוזרת מאחורי הכפתור הראשי היא הסחה
     שגובה סוללה בלי להוסיף מידע.

     ה-cubic-bezier חורג מעט מעבר ל-1 — הז'יטון שוקע רגע מתחת למקומו
     ומתייצב, כמו דיסקית שנחה. transform ו-opacity בלבד, שניהם על
     ה-compositor. */
  /* הנפילה. שלושה שלבים בקימור אחד: מלמעלה עם הסחה וסיבוב, נחיתה
     מפוזרת עם קפיצה קטנה, החזקה של הבלגן, ואז יישור לערימה.

     ההחזקה בין 38% ל-58% היא מה שהופך את זה לשני מהלכים ולא לאחד —
     בלעדיה הז'יטון מתיישר תוך כדי נפילה והבלגן לא נקרא בכלל.

     transform-box:fill-box הכרחי: ב-SVG ראשית הצירים של קבוצה היא
     ראשית הציור, וסיבוב בלעדיו היה מטיח את הז'יטון מחוץ למסגרת. */
  .hemk .ec{transform-box:fill-box;transform-origin:center;}
  .hemk.play .ec{animation:ecdrop 1.45s cubic-bezier(.22,.61,.36,1) both;
                 animation-delay:var(--d,0ms);}
  @keyframes ecdrop{
    0%  {opacity:0;transform:translate(var(--dx,0),-360px) rotate(var(--rot,0))}
    9%  {opacity:1}
    30% {transform:translate(var(--dx,0),7px)  rotate(var(--rot,0))}
    38% {transform:translate(var(--dx,0),0)    rotate(var(--rot,0))}
    58% {transform:translate(var(--dx,0),0)    rotate(var(--rot,0))}
    100%{transform:none}
  }
  /* הערימה ניתנת להקשה, ולכן היא צריכה לומר זאת למצביע ולא לבלוע
     בחירת טקסט בלחיצה ארוכה. */
  .hemk{cursor:pointer;-webkit-user-select:none;user-select:none;
        -webkit-tap-highlight-color:transparent;outline:none;}
  .hemk .ch{pointer-events:none;}
  /* תנועה מופחתת: הצטלבות אטימות בלבד, בלי נפילה ובלי סיבוב. */
  @media (prefers-reduced-motion:reduce){
    .hemk.play .ec{animation:ecfade .45s ease-out both;}
  }
  @keyframes ecfade{from{opacity:0}to{opacity:1}}
  .hero-empty .he-t{font-size:1.05rem;font-weight:700;margin-bottom:.3rem;}
  .hero-empty .he-s{font-size:.85rem;color:var(--ink-soft);line-height:1.6;}

  /* the league section before any night has been closed */
  .lbempty{display:flex;flex-direction:column;align-items:center;text-align:center;
           padding:1.6rem 1.2rem;gap:.2rem;}
  .lbe-m{font-size:1.7rem;color:var(--gold);opacity:.5;margin-bottom:.35rem;line-height:1;}
  .lbe-t{font-size:.92rem;font-weight:600;}
  .lbe-s{font-size:.78rem;color:var(--ink-soft);line-height:1.55;}

  /* ---------- iOS touch behaviour ---------- */
  .app button{touch-action:manipulation;}
  .b-primary,.b-ghost,.opt,.rchip,.seg,.iconbtn,.srow{min-height:44px;}
  .b-ghost{display:inline-flex;align-items:center;justify-content:center;}
  .rchip{min-height:44px;}
  .sheet{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
         max-height:min(88vh,88dvh);}
  /* 16px floor keeps Safari from zooming the page when a field takes focus */
  .inp,.cin{font-size:max(16px,1rem);}
  .inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button,
  .cin::-webkit-outer-spin-button,.cin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .inp[type=number],.cin[type=number]{-moz-appearance:textfield;appearance:textfield;}
  @supports (-webkit-touch-callout:none){
    .dock{padding-bottom:calc(.75rem + env(safe-area-inset-bottom));}
  }