/* ================= design tokens ================= */
  :root{
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
    --r-xs:9px; --r-sm:12px; --r-md:18px; --r-lg:26px;   /* --r-xs: tight radius for the 26px form-dot (--r-sm would over-round it) */
    --nav-h:66px;   /* bottom-nav height (excl. safe-area): pad6 + (icon22 + label) + pad6 */
    --fs-body:16px; --fs-small:13px;
    --tap-min:48px;
    --ease:cubic-bezier(.2,.8,.25,1);
  }
  /* ===== CENTER COURT, night session broadcast / morning clay ===== */
  [data-theme="day"]{
    --bg:#f4f8fc;
    --bg-grad:
      radial-gradient(90% 55% at 18% -8%, rgba(155,196,0,.08) 0%, rgba(155,196,0,0) 60%),
      radial-gradient(90% 55% at 82% -8%, rgba(36,105,181,.05) 0%, rgba(36,105,181,0) 60%),
      linear-gradient(180deg, #fafcfe 0%, #f4f8fc 100%);
    --surface:#ffffff; --surface-2:#f8fbff; --sub:#e9f1fa;
    --fg:#0a1324; --muted:#41597a; --faint:#5c6c87;
    --line:#d6e1ee; --line-soft:rgba(10,19,36,.09); --line2:rgba(10,19,36,.14); --hair:rgba(255,255,255,.85); --chalk-strong:rgba(10,19,36,.26);
    --accent:#9bc400; --on-accent:#0a1324; --accent-ink:#4d6600;
    --acc-grad:linear-gradient(160deg,#b8e600,#7fa600); --acc-glow:0 0 14px rgba(199,242,10,.12);
    --glass:linear-gradient(165deg, rgba(255,255,255,.7), rgba(255,255,255,0) 45%);
    --kudos-flame:#ef6a2e;
    --clay:#2469b5; --on-clay:#ffffff; --clay-ink:#2469b5;
    --graph:#6f9800;
    --tint:rgba(155,196,0,.15); --tint-clay:rgba(36,105,181,.12);
    --sel-bg:#0a1324; --sel-fg:#f4f8fc;
    --digit:#6f9800; --digit-glow:none;
    --danger:#d02f47;
    --glow:0 0 0 0 rgba(0,0,0,0);
    --shadow-sm:0 1px 3px rgba(10,19,36,.05), 0 8px 20px rgba(10,19,36,.08);
    --shadow-md:0 1px 4px rgba(10,19,36,.07), 0 16px 36px rgba(10,19,36,.12);
    --ring:#6f9800;
    --scrim:rgba(244,248,252,.85);
    --grain-op:.02;
  }
  [data-theme="night"]{
    --bg:#06142b;
    --bg-grad:
      radial-gradient(90% 55% at 18% -8%, rgba(199,242,10,.05) 0%, rgba(199,242,10,0) 60%),
      radial-gradient(90% 55% at 82% -8%, rgba(77,163,255,.045) 0%, rgba(77,163,255,0) 60%),
      radial-gradient(150% 120% at 50% 0%, #10284e 0%, #0b1d3a 50%, #06142b 100%);
    --surface:#0b1d3a; --surface-2:#10284e; --sub:#15325f;
    --fg:#f8fbff; --muted:#bdd0e8; --faint:#8ea7c5;
    --line:#1f3d69; --line-soft:rgba(248,251,255,.08); --line2:rgba(248,251,255,.12); --hair:rgba(248,251,255,.14); --chalk-strong:rgba(248,251,255,.32);
    --accent:#c7f20a; --on-accent:#0a1324; --accent-ink:#d8ff4d;
    --acc-grad:linear-gradient(160deg,#d8ff4d,#a6d700); --acc-glow:0 0 18px rgba(199,242,10,.22);
    --glass:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%);
    --kudos-flame:#ff7a3d;
    --clay:#4da3ff; --on-clay:#0a1324; --clay-ink:#9cc7ff;
    --graph:#c7f20a;
    --tint:rgba(199,242,10,.10); --tint-clay:rgba(77,163,255,.14);
    --sel-bg:#c7f20a; --sel-fg:#0a1324;
    --digit:#c7f20a; --digit-glow:0 0 18px rgba(199,242,10,.14);
    --danger:#ff5c74;
    --glow:0 0 14px rgba(199,242,10,.08);
    --shadow-sm:0 1px 4px rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.3);
    --shadow-md:0 2px 10px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.5);
    --ring:#d8ff4d;
    --scrim:rgba(6,20,43,.82);
    --grain-op:.026;
  }

  /* dedicated scoreboard digits face, self-hosted, precached for offline */
  @font-face{
    font-family:'Anton';
    src:url('fonts/anton.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  .hidden{ display:none!important; }
  html,body{ height:100%; }
  body{
    background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed;
    color:var(--fg);
    font:var(--fs-body)/1.5 -apple-system, "Segoe UI", Roboto, "Heebo", Arial, sans-serif;
    overscroll-behavior:none; user-select:none; -webkit-user-select:none;
    touch-action:manipulation;
    transition:background-color .3s, color .3s;
  }
  .num{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; white-space:nowrap; }

  .screen{ display:none; min-height:100dvh; }
  .screen.active{ display:flex; flex-direction:column; animation:screenIn .3s var(--ease); }
  @keyframes screenIn{ from{ opacity:0; transform:translateY(8px); } }

  button{
    font:inherit; color:var(--fg); background:var(--surface);
    border:1.5px solid var(--line-soft); border-radius:var(--r-sm);
    min-height:var(--tap-min); padding:var(--sp-2) var(--sp-4); cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform .12s var(--ease), box-shadow .2s, background-color .2s, border-color .2s;
  }
  button:active{ transform:scale(.965); }
  fieldset button:not(.primary):not(.chip):not(.histDel):not(.switch):not([aria-pressed]){ background:var(--sub); border-color:transparent; }
  button:disabled{ opacity:.35; cursor:default; box-shadow:none; }
  button.primary{
    background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, #000 16%));
    color:var(--on-accent); border-color:transparent; font-weight:800;
    box-shadow:var(--shadow-md);
  }
  button:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

  /* ================= setup ================= */
  #setup{ padding:max(var(--sp-5), env(safe-area-inset-top)) var(--sp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-4)); gap:var(--sp-4); max-width:520px; margin:0 auto; width:100%; }   /* bottom pad clears the fixed #bottomNav */
  .hero{ display:flex; align-items:center; justify-content:space-between; }
  .hero h1{ font-size:32px; font-weight:900; letter-spacing:-.02em; line-height:1.15; }
  .hero .sub{ color:var(--muted); font-size:var(--fs-small); margin-top:2px; }
  .iconBtn{ width:48px; min-height:48px; padding:0; border-radius:14px; font-size:20px; display:flex; align-items:center; justify-content:center; }

  #resumeBanner{
    display:none; border:none; border-radius:var(--r-md); padding:var(--sp-4); gap:var(--sp-2);
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 65%);
    box-shadow:var(--shadow-md); border-inline-start:5px solid var(--accent);
  }
  #resumeBanner.show{ display:flex; flex-direction:column; }
  #resumeBanner .row{ display:flex; gap:var(--sp-2); margin-top:var(--sp-1); }
  #resumeBanner .row button{ flex:1; }

  fieldset{
    border:none; border-radius:var(--r-md); padding:var(--sp-4);
    display:flex; flex-direction:column; gap:var(--sp-3);
    background:var(--surface); background-image:var(--glass);
    box-shadow:var(--shadow-md), inset 0 1px 0 var(--hair);
  }
  .cardTitle{
    font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--fg);
    border-inline-start:3px solid var(--accent); padding-inline-start:10px; line-height:1.2;
  }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .flabel, .field label{ font-size:var(--fs-small); color:var(--muted); font-weight:600; }
  input[type="text"], input[type="password"], input[type="email"], input[type="date"],
  input[type="tel"], input[type="number"], input[type="search"]{
    font:inherit; color:var(--fg); background:var(--sub);
    border:1.5px solid transparent; border-radius:var(--r-sm);
    min-height:var(--tap-min); padding:var(--sp-2) var(--sp-3);
    user-select:text; -webkit-user-select:text;
    transition:border-color .2s, background-color .2s;
  }
  input[type="text"]:focus-visible, input[type="password"]:focus-visible, input[type="email"]:focus-visible, input[type="date"]:focus-visible,
  input[type="tel"]:focus-visible, input[type="number"]:focus-visible, input[type="search"]:focus-visible{ outline:none; border-color:var(--ring); background:var(--surface); }

  select.playerSelect, select.groupSelect{
    font:inherit; color:var(--fg); background:var(--sub);
    border:1.5px solid transparent; border-radius:var(--r-sm);
    min-height:var(--tap-min); padding:var(--sp-2) var(--sp-3); width:100%;
    -webkit-appearance:none; appearance:none; cursor:pointer;
  }
  select.playerSelect:focus-visible, select.groupSelect:focus-visible,
  select.playerSelect:focus, select.groupSelect:focus{ outline:none; border-color:var(--ring); background-color:var(--surface); }

  .chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
  .chip{
    min-height:38px; padding:4px 14px; border:none; border-radius:999px;
    background:var(--sub); color:var(--fg); font-size:14px; font-weight:600; box-shadow:none;
  }
  .chip[aria-pressed="true"]{ background:var(--tint); color:var(--accent-ink); font-weight:800;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent-ink) 45%, transparent); }

  .seg{ display:flex; background:var(--sub); border-radius:var(--r-sm); padding:4px; gap:4px; }
  /* WKWebView (Safari) does not stretch <button> flex-items to fill a flex column the
     way Chrome does (inputs stretch, buttons don't) — force the full-width auth buttons. */
  #googleBtn, #authSubmit, #rsConfirm{ width:100%; }
  /* OAuth quick-sign-in: breathing room so it isn't cramped against the mode toggle / divider */
  #googleBtn{ margin-block:var(--sp-2); border-radius:var(--r-sm); }
  .seg button{
    flex:1; border:none; border-radius:9px; background:transparent; min-height:44px;
    box-shadow:none; font-weight:600; color:var(--muted);
  }
  .seg button[aria-pressed="true"]{
    background:var(--tint); color:var(--accent-ink); font-weight:800;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent-ink) 45%, transparent);
  }
  .seg.clay button[aria-pressed="true"]{
    background:var(--clay); color:var(--on-clay); font-weight:800;
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--clay-ink) 45%, transparent);
  }
  .switchRow{ display:flex; align-items:center; justify-content:space-between; min-height:var(--tap-min); gap:var(--sp-3); }
  /* "צפה בסיור" must stay one line with its icon; let the description text flex/shrink */
  #tourReplay{ flex:0 0 auto; white-space:nowrap; }
  .switch{ position:relative; width:54px; height:32px; flex:none; border-radius:16px; border:none; background:var(--sub); padding:0; min-height:0; box-shadow:inset 0 1px 3px rgba(0,0,0,.12); }
  .switch::after{
    content:""; position:absolute; top:3px; inset-inline-start:3px; width:26px; height:26px; border-radius:50%;
    background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.3);
    transition:transform .2s var(--ease), background-color .2s;
  }
  .switch[aria-checked="true"]{ background:var(--sel-bg); }
  .switch[aria-checked="true"]::after{ background:var(--sel-fg); transform:translateX(-22px); }

  html, body{ overflow-x:hidden; }   /* only designated containers scroll sideways */
  /* sub-nav: the member panels of the active primary, a sticky-top segment */
  #subNav{ box-shadow:var(--shadow-sm); position:sticky; top:calc(env(safe-area-inset-top, 0px) + 2px); z-index:5; }
  #subNav button{ font-size:14.5px; padding:6px 4px; min-height:46px; }
  .tabPanel{ display:none; }
  /* pad the last row clear of the sticky bottom nav (nav is in-flow, so this is
     just breathing room — no content is ever hidden behind it at full scroll) */
  .tabPanel.active{ display:flex; flex-direction:column; gap:var(--sp-4); padding-bottom:var(--sp-4); }
  /* flex-column children default to min-width:auto and refuse to shrink below
     their content, so a wide inner scroller (the suggestions carousel, tables)
     overflows the card instead of scrolling. Let them shrink so the nested
     overflow-x:auto actually engages. <fieldset> is the sneaky one: it has a
     browser default of min-inline-size:min-content and will grow to fit the
     carousel unless we force min-width:0 on it too. */
  .tabPanel.active > *{ min-width:0; }
  fieldset{ min-width:0; }
  #matchSuggest, #matchSuggest fieldset, #matchSuggest .suggStrip{ min-width:0; max-width:100%; }

  /* sticky start CTA, always one thumb-tap away, even deep in league/history */
  #approvalsBox fieldset{
    border-inline-start:5px solid var(--accent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%);
  }
  #instantConfirm{ border-inline-start:5px solid var(--accent); text-align:right; }

  /* the start CTA floats just ABOVE the bottom nav (the nav owns the safe-area) */
  #startBar{
    position:sticky; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-1)); z-index:6;
    padding:var(--sp-2) 0;
    background:linear-gradient(180deg, transparent, var(--bg) 40%);
  }
  #startBar button{ width:100%; font-size:20px; min-height:60px; }
  #startBtn.dimmed{ opacity:.55; }
  @keyframes shake{ 25%{ transform:translateX(4px);} 75%{ transform:translateX(-4px);} }
  select.playerSelect.flash{ animation:shake .35s ease 2; border-color:var(--danger); }

  /* ================= game ================= */
  #game{ padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  #court{ flex:1; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-2); min-height:0; }
  .panel{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg) 8%));
    border:1.5px solid var(--line-soft); border-radius:var(--r-lg);
    position:relative; min-height:0; cursor:pointer; overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:transform .12s var(--ease), border-color .25s, box-shadow .25s;
  }
  .panel:active{ transform:scale(.985); }
  .panel.serving{ border-color:var(--accent); box-shadow:var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); }
  .panel.armed{ border-color:var(--accent); border-style:dashed; }
  .panel.armed::after{
    content:'נגיעה נוספת = נקודה'; position:absolute; bottom:12px; inset-inline:0;
    text-align:center; font-size:15px; font-weight:800; color:var(--accent-ink); animation:pulse 1s infinite;
  }
  .pname{ font-size:clamp(16px,4vw,24px); font-weight:800; display:flex; align-items:center; gap:var(--sp-2); letter-spacing:-.01em; max-width:94vw; }
  .pname .nameLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .serveDot{
    width:16px; height:16px; border-radius:50%; display:none; flex:none;
    background:radial-gradient(circle at 32% 30%, #D8FF4D 0%, #C7F20A 45%, #A6D700 100%);
    box-shadow:0 0 10px rgba(220,242,50,.55), inset 0 -1px 2px rgba(0,0,0,.25);
  }
  .panel.serving .serveDot{ display:inline-block; animation:bounceIn .35s var(--ease); }
  .serveSideTag{ display:none; font-size:12px; font-weight:700; color:var(--muted); background:var(--sub); border-radius:999px; padding:2px 10px; }
  .panel.serving .serveSideTag{ display:inline-block; }
  @keyframes bounceIn{ 0%{ transform:scale(.3); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
  .ppoints{
    font-family:'Anton', -apple-system, "Segoe UI", sans-serif;
    font-size:clamp(64px, 24vh, 190px); font-weight:400; line-height:1;
    letter-spacing:.01em; color:var(--digit); text-shadow:var(--digit-glow);
  }
  .ppoints.pop{ animation:pop .3s var(--ease); }
  @keyframes pop{ 0%{ transform:scale(.8); opacity:.3; } 55%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
  .pmeta{ display:flex; align-items:center; gap:var(--sp-3); font-size:clamp(13px,3.4vw,18px); color:var(--muted); font-weight:600; }
  .pgames{ font-family:'Anton', sans-serif; font-weight:400; color:var(--fg); font-size:1.3em; letter-spacing:.02em; }
  .setSquares{ display:flex; gap:5px; }
  .setSq{
    min-width:26px; height:26px; padding:0 5px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
    background:var(--sub); color:var(--muted);
  }
  .setSq.won{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm); }

  #announceCard{
    display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
    text-align:center; border:none; border-radius:999px;
    padding:var(--sp-2) var(--sp-4); font-weight:800; font-size:clamp(14px,4vw,20px);
    background:var(--surface); direction:ltr; box-shadow:var(--shadow-md);
    overflow:hidden; white-space:nowrap;
  }
  #announceText{ overflow:hidden; text-overflow:ellipsis; }
  #announceText.slideIn{ animation:slideUp .25s var(--ease); }
  @keyframes slideUp{ from{ opacity:0; transform:translateY(10px); } }
  #tbBadge{ display:none; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--on-accent); background:var(--accent); border-radius:999px; padding:3px 10px; flex:none; }
  #tbBadge.show{ display:inline-block; }

  #actions{ display:flex; gap:var(--sp-2); padding:var(--sp-2); }
  #actions button{ flex:1; padding:var(--sp-2); font-size:16px; border-radius:14px; }
  #undoBtn{ flex:1.6; font-size:14px; font-weight:700; white-space:nowrap; }
  #lockBanner{
    display:none; text-align:center; background:var(--accent); color:var(--on-accent);
    font-weight:800; padding:6px; font-size:var(--fs-small); letter-spacing:.02em;
  }
  #lockBanner.show{ display:block; }
  #matchTimer{
    position:absolute; top:calc(env(safe-area-inset-top) + 10px); inset-inline-start:12px; z-index:3;
    background:var(--scrim); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-radius:999px; padding:4px 14px; font-size:15px; font-weight:700;
    color:var(--muted); letter-spacing:.04em; box-shadow:var(--shadow-sm);
  }
  #endDuration{ color:var(--muted); font-size:clamp(16px,4.5vw,20px); font-weight:700; }
  #endUndoBtn{ border:none; background:transparent; box-shadow:none; color:var(--muted); font-size:14px; text-decoration:underline; }

  .histRow{ display:flex; align-items:center; gap:var(--sp-2); padding:8px 0; border-bottom:1px dashed var(--line-soft); font-size:14px; }
  .histRow:last-child{ border-bottom:none; }
  .histMain{ flex:1; min-width:0; }
  .histMain b{ font-weight:800; }
  .histLine{ direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; font-weight:700; }
  .histMeta{ color:var(--muted); font-size:12px; }
  /* won–lost value: RTL-native, each number glued to its word so it can't read
     backwards the way a bare LTR "31-23" does under a Hebrew label */
  .wlVal{ direction:rtl; unicode-bidi:isolate; white-space:nowrap; font-weight:800; }
  .wlVal .num{ font-weight:800; }
  .wlVal .wlL{ color:var(--muted); font-weight:700; }
  .wlVal .wlSep{ color:var(--line-soft); margin:0 4px; }
  .histDel{ min-height:34px; width:34px; padding:0; border:none; background:var(--sub); box-shadow:none; border-radius:8px; color:var(--muted); flex:none; }

  /* private-invite cards (קהילה→משחקים): the match text used to be crowded by the
     action buttons on the same line. Now each invite is a vertical card — header
     (who + sport·format) → secondary line (when + court, free to wrap) → status
     chip → actions on their OWN row. Token-driven, both themes, 375-safe, no
     horizontal overflow (actions flex-wrap instead of pushing the card wide). */
  .invCard{ display:flex; flex-direction:column; gap:10px; padding:12px 14px; margin-bottom:10px;
    background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md); }
  .invCard:last-child{ margin-bottom:0; }
  .invCard .histMain{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .invWho{ font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
  .invWho b{ font-weight:800; }
  .invSport{ color:var(--muted); font-weight:600; }
  .invWhen{ font-size:12.5px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
  .invChip{ display:inline-flex; align-items:center; gap:5px; margin-top:2px;
    font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px;
    background:var(--sub); color:var(--muted); }
  .invChip .ic{ width:13px; height:13px; }
  .invChip.ok{ background:var(--tint); color:var(--accent-ink); }
  .invChip.wait{ background:var(--tint-clay); color:var(--clay-ink); }
  .invChip.bad{ background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
  .invChip.muted{ background:var(--sub); color:var(--muted); }
  .invActs{ display:flex; flex-wrap:wrap; gap:8px; }
  .invActs .invBtn{ min-height:40px; padding:0 16px; font-size:13px; font-weight:700; white-space:nowrap; flex:0 0 auto; }
  .invActs .invBtn.primary{ flex:1 1 auto; min-width:140px; }
  .invActs .invBtn.ghost{ background:transparent; border:none; box-shadow:none; color:var(--muted); padding:0 12px; }

  .stt{ width:100%; min-width:0; border-collapse:collapse; }
  .stt th{ font-size:11px; font-weight:800; color:var(--muted); padding:6px 3px; border-bottom:2px solid var(--line-soft); white-space:nowrap; }
  .stt td{ padding:8px 3px; text-align:center; border-bottom:1px dashed var(--line-soft); font-weight:700; font-size:13px; white-space:nowrap; }
  .stt td.pname-cell{ white-space:nowrap; max-width:40vw; overflow:hidden; text-overflow:ellipsis; }
  /* segments never wrap into uneven rows: keep labels on one line */
  .seg button{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* the unified 3-way league toggle + the profile filter segs carry longer Hebrew
     labels ("טניס יחידים", "הכל/טניס/פאדל") that truncate at 375px under the base
     .seg size — scope a slightly smaller type so they fit (size-only, both themes). */
  #segLeagueMode button{ font-size:12px; letter-spacing:-.2px; }
  #segMsSport button, #segMsMode button{ font-size:12px; letter-spacing:-.2px; }
  /* stack the two profile filter segs so each spans the FULL row width and its
     Hebrew labels (הכל/טניס/פאדל · הכל/יחידים/זוגות) render in full at 375px.
     flex:1 on the segs is a cross-axis grow here (no free vertical space) so they
     keep their natural height. */
  .msFilters{ flex-direction:column; }
  .stt tr:last-child td{ border-bottom:none; }
  .stt td.pname-cell{ text-align:right; }
  .stt tr.leader td{ color:var(--fg); }
  .stt tr.leader td.pname-cell{ font-weight:800; }

  #statsWrap{ display:none; position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:var(--sp-4); }
  #statsWrap.show{ display:flex; }
  #statsCard{
    background:var(--bg); background-image:var(--bg-grad); border-radius:var(--r-lg);
    padding:var(--sp-4); width:100%; max-width:480px; max-height:85dvh; overflow-y:auto;
    box-shadow:var(--shadow-md); animation:sheetUp .25s var(--ease);
  }
  #statsCard h2{ font-size:20px; font-weight:900; display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-3); }
  #statsTable{ width:100%; border-collapse:collapse; }
  #statsTable th, #statsTable td{ padding:10px 6px; text-align:center; border-bottom:1px dashed var(--line-soft); }
  #statsTable tr:last-child td{ border-bottom:none; }
  #statsTable th{ font-weight:800; font-size:15px; }
  #statsTable td:first-child{ text-align:right; color:var(--muted); font-size:13px; font-weight:600; }
  #statsTable td{ font-weight:700; }

  #updateToast{
    position:fixed; bottom:calc(env(safe-area-inset-bottom) + 14px); inset-inline:14px; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    background:var(--sel-bg); color:var(--sel-fg); font-weight:700;
    border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-md);
  }
  #updateToast button{ background:var(--sel-fg); color:var(--sel-bg); border:none; font-weight:800; min-height:40px; }
  #updateToast[hidden]{ display:none; }   /* author display:flex must not defeat the hidden attribute */

  #stakeBadge{
    align-self:center; border-radius:999px; padding:6px 18px;
    font-weight:900; font-size:clamp(14px,4vw,19px); letter-spacing:.02em;
    background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-md);
    animation:pulse 1.1s infinite;
  }
  #stakeBadge[hidden]{ display:none; }
  .streakTag{ color:var(--accent-ink); font-weight:800; }
  .faultBtn{
    display:none; min-height:34px; padding:2px 14px; border-radius:999px;
    background:var(--sub); border:1.5px dashed var(--line-soft); box-shadow:none;
    font-size:13px; font-weight:800; color:var(--muted); margin-top:4px;
  }
  .panel.serving .faultBtn{ display:inline-block; }
  .panel.serving.secondServe .faultBtn{ background:var(--accent); color:var(--on-accent); border-style:solid; }
  #moreMenu{
    position:absolute; bottom:calc(env(safe-area-inset-bottom) + 68px); inset-inline-end:var(--sp-3);
    z-index:8; display:flex; flex-direction:column; gap:var(--sp-2);
    background:var(--surface); border-radius:var(--r-md); padding:var(--sp-3);
    box-shadow:var(--shadow-md); min-width:210px;
  }
  #moreMenu[hidden]{ display:none; }
  #moreMenu button{ text-align:right; }
  #moreMenu button.danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); font-weight:800; }
  #momentumWrap{ width:100%; max-width:440px; background:var(--sub); border-radius:var(--r-md); padding:12px; }
  #momentum{ width:100%; height:120px; display:block; }
  #endRivalry{ font-size:15px; font-weight:700; }

  /* landscape scoreboard, applies whenever the phone is rotated, any height */
  @media (orientation: landscape){
    #court{ flex-direction:row; }
    #announceCard{ position:absolute; inset-inline:28%; top:var(--sp-2); z-index:2; background:var(--scrim); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
    .panel{ padding-bottom:52px; }
    /* corners hold ONLY the serve dot + name; everything else has its own layer */
    .pname{ position:absolute; top:10px; z-index:2; }
    #panelA .pname{ right:14px; }
    #panelB .pname{ left:14px; }
    .serveSideTag{ display:none !important; }         /* the dot already marks the server */
    .panel{ padding-top:60px; }                       /* digits clear the top pills */
    .panel.serving .faultBtn{
      position:absolute; bottom:56px; margin:0; min-height:30px; font-size:12px; padding:2px 12px; z-index:2;
    }
    #panelA .faultBtn{ right:14px; }
    #panelB .faultBtn{ left:14px; }
    #stakeBadge{ position:absolute; top:54px; left:50%; transform:translateX(-50%); z-index:3; }
    .pmeta{
      position:absolute; bottom:58px; left:50%; transform:translateX(-50%);
      inset-inline:auto; justify-content:center; width:max-content; max-width:90%;
      background:var(--scrim); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
      border-radius:999px; padding:4px 14px; z-index:2;
    }
    .ppoints{ line-height:1; font-size:clamp(80px, 28vw, 54vh); }
    #matchTimer{ top:auto; inset-inline-start:auto; bottom:calc(env(safe-area-inset-bottom) + 58px); left:50%; transform:translateX(-50%); z-index:9; }
    .ppoints{ font-size:clamp(80px, 34vw, 66vh); }
    #actions{ position:absolute; bottom:env(safe-area-inset-bottom); inset-inline:0; background:transparent; }
    #actions button{ min-height:40px; background:var(--scrim); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

    /* setup: two columns so the whole form is reachable without endless scrolling
       (.active is required, a bare #setup rule would override .screen's display:none) */

  }
  /* very short landscape screens: compact the end screen so nothing scrolls */
  @media (orientation: landscape) and (max-height: 500px){
    #end{ gap:var(--sp-2); padding:var(--sp-3); }
    #end .trophy{ font-size:40px; }
    #endWinner{ font-size:clamp(24px,6vh,36px); }
    .setChip{ font-size:16px; padding:4px 12px; }
  }

  /* ================= end + shared summary ================= */
  #end, #summary{ align-items:center; justify-content:center; gap:var(--sp-4); padding:var(--sp-5); text-align:center; }
  #summary .row{ display:flex; width:100%; max-width:420px; }
  #summary .row button{ flex:1; }
  #sumWinner{ font-size:clamp(26px,7vw,42px); font-weight:900; color:var(--digit); text-shadow:var(--digit-glow); }
  #sumLine{ font-size:clamp(20px,6vw,30px); font-weight:800; }
  #sumMeta{ color:var(--muted); font-weight:700; }
  #sumStats{ border-collapse:collapse; }
  #sumStats th, #sumStats td{ padding:8px 6px; text-align:center; border-bottom:1px dashed var(--line-soft); }
  #sumStats td:first-child{ text-align:right; color:var(--muted); font-size:13px; font-weight:600; }
  #end .trophy, #summary .trophy{ font-size:64px; animation:trophyIn .6s var(--ease); }
  @keyframes trophyIn{ 0%{ transform:scale(.2) rotate(-15deg); opacity:0; } 60%{ transform:scale(1.15) rotate(4deg); } 100%{ transform:scale(1); } }
  #endWinner{ font-size:clamp(30px,8vw,50px); font-weight:900; letter-spacing:-.02em; color:var(--digit); text-shadow:var(--digit-glow); }
  #endSets{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
  .setChip{
    background:var(--surface); border-radius:999px; padding:6px 16px;
    font-size:clamp(16px,4.5vw,22px); font-weight:800; box-shadow:var(--shadow-md);
  }
  #end .row{ display:flex; gap:var(--sp-3); width:100%; max-width:420px; margin-top:var(--sp-2); }
  #end .row button{ flex:1; }

  /* ================= sheet (clicker) ================= */
  #sheetWrap{ display:none; position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
  #sheetWrap.show{ display:flex; align-items:flex-end; }
  #sheet{
    background:var(--bg); background-image:var(--bg-grad);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    width:100%; max-height:88dvh; overflow-y:auto; padding:var(--sp-3) var(--sp-4);
    display:flex; flex-direction:column; gap:var(--sp-3);
    padding-bottom:max(var(--sp-4), env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.35);
    animation:sheetUp .3s var(--ease);
  }
  @keyframes sheetUp{ from{ transform:translateY(40px); opacity:.5; } }
  .sheetHandle{ width:44px; height:5px; border-radius:3px; background:var(--line-soft); margin:0 auto; }
  #sheet h2{ font-size:20px; font-weight:900; display:flex; justify-content:space-between; align-items:center; }
  .keyChip{ direction:ltr; font-family:ui-monospace, Menlo, monospace; font-size:14px; border-radius:8px; padding:3px 10px; background:var(--sub); font-weight:700; }
  .learnRow{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
  .learnRow button.learning{
    background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 84%, #000 16%));
    color:var(--on-accent); border-color:transparent; font-weight:800; animation:pulse 1s infinite;
  }
  @keyframes pulse{ 50%{ opacity:.6; } }
  #testerLog{
    direction:ltr; text-align:left; font-family:ui-monospace, Menlo, monospace; font-size:13px;
    background:var(--sub); border-radius:var(--r-sm);
    height:180px; overflow-y:auto; padding:var(--sp-2); user-select:text; -webkit-user-select:text;
  }
  #testerLog div{ padding:2px 0; border-bottom:1px dashed var(--line-soft); }
  .hint{ font-size:var(--fs-small); color:var(--muted); }
  /* ---- announcement voice picker (token-driven, both themes) ---- */
  #voiceOpts{ display:flex; flex-direction:column; gap:8px; }
  #voiceOpts .voice{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-md);
    border:1.5px solid var(--line-soft); background:var(--surface-2); cursor:pointer; transition:.15s var(--ease); }
  #voiceOpts .voice.sel{ border-color:var(--accent); background:var(--tint); }
  #voiceOpts .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line2); flex:none; position:relative; }
  #voiceOpts .voice.sel .radio{ border-color:var(--accent); }
  #voiceOpts .voice.sel .radio::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
  #voiceOpts .vmeta{ flex:1; min-width:0; }
  #voiceOpts .vname{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:7px; }
  #voiceOpts .gtag{ font-size:11px; font-weight:800; padding:1px 7px; border-radius:999px; }
  #voiceOpts .gtag.m{ background:var(--tint); color:var(--accent-ink); }
  #voiceOpts .gtag.f{ background:var(--tint-clay); color:var(--clay-ink); }
  #voiceOpts .vdesc{ font-size:12px; color:var(--muted); margin-top:2px; }
  #voiceOpts .demoBtns{ display:flex; gap:6px; flex:none; }
  #voiceOpts .vdemo{ min-height:34px; padding:0 10px; border-radius:10px; border:1px solid var(--line2);
    background:var(--surface); color:var(--fg); font-size:12px; font-weight:800; cursor:pointer; }
  #voiceFold .previewRow{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
  #voiceFold #anPreviewBtn{ min-height:var(--tap-min); border-radius:var(--r-sm); border:1px solid var(--line2);
    background:var(--surface-2); color:var(--fg); font-weight:800; font-size:15px; }
  #voiceFold .previewLeft{ text-align:center; font-size:12px; color:var(--muted); }
  #voiceFold .previewLeft b{ color:var(--accent-ink); }
  #voiceFold .lockNote{ border-radius:var(--r-md); border:1px dashed var(--line2); background:var(--surface-2);
    padding:12px; font-size:13.5px; font-weight:700; text-align:center; }
  #voiceFold .lockNote b{ color:var(--accent-ink); }
  /* ---- My Matches calendar grid ---- */
  #mmGrid .mmRow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
  .mmDow{ text-align:center; font-size:11px; color:var(--muted); font-weight:800; padding:2px 0; }
  .mmCell{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border-radius:10px; color:var(--fg); }
  .mmCell.mmBlank{ visibility:hidden; }
  .mmCell.mmHas{ background:var(--surface-2); border:1px solid var(--line-soft); }
  .mmCell.mmToday{ outline:2px solid var(--accent); outline-offset:-2px; }
  .mmDot{ position:absolute; bottom:5px; width:6px; height:6px; border-radius:50%; background:var(--clay); }
  .mmDot.fut{ background:var(--accent); }
  details.fold{
    background:var(--surface); border:1px solid var(--line-soft);
    border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  }
  details.fold > summary{
    list-style:none; cursor:pointer; min-height:54px;
    display:flex; align-items:center; gap:10px; padding:0 var(--sp-4);
    font-weight:800; font-size:14px; color:var(--fg);
  }
  details.fold > summary::-webkit-details-marker{ display:none; }
  details.fold > summary::before{
    content:""; width:3px; height:16px; border-radius:2px; background:var(--accent); flex:none;
  }
  details.fold > summary::after{
    content:"‹"; direction:ltr; margin-inline-start:auto; color:var(--muted); font-size:18px; font-weight:700;
    transform:rotate(-90deg); transition:transform .2s var(--ease);
  }
  details.fold[open] > summary::after{ transform:rotate(90deg); }
  details.fold[open] > summary{ border-bottom:1px dashed var(--line-soft); }
  details.fold > .foldBody{ padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
  details.fold fieldset{ box-shadow:none; border:none; padding:0; background:transparent; }
  .foldCount{
    background:var(--tint); color:var(--accent-ink); border-radius:999px;
    padding:2px 10px; font-size:12px; font-weight:800;
  }
  input[type="range"]{ width:100%; accent-color:var(--sel-bg); }

  /* ================= player card ================= */
  #playerCardWrap{
    display:none; position:fixed; inset:0; z-index:14;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    align-items:flex-end; justify-content:center;
  }
  #playerCardWrap.show{ display:flex; }
  #playerCard{
    width:100%; max-width:430px; max-height:88dvh; overflow-y:auto;
    background:var(--bg); background-image:var(--bg-grad);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--sp-4) var(--sp-4) max(var(--sp-5), env(safe-area-inset-bottom));
    box-shadow:0 -12px 44px rgba(0,0,0,.45);
    animation:sheetUp .28s var(--ease);
    position:relative; overflow-x:hidden;
  }
  #playerCard::before{ /* court watermark, the brand stamp */
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background:
      linear-gradient(135deg, var(--tint) 0%, transparent 45%),
      linear-gradient(var(--line-soft) 0 0) top center / 64% 1.5px no-repeat,
      linear-gradient(var(--line-soft) 0 0) center / 1.5px 40% no-repeat;
  }
  .pcTop{ display:flex; align-items:center; gap:14px; position:relative; }
  .pcFace{
    width:74px; height:74px; border-radius:50%; flex:none;
    display:grid; place-items:center; font-weight:900; font-size:26px;
    background:var(--sub); border:2.5px solid var(--accent); box-shadow:var(--glow);
    overflow:hidden;
  }
  .pcFace img{ width:100%; height:100%; object-fit:cover; }
  .pcName{ flex:1; min-width:0; }
  .pcName b{ font-size:22px; font-weight:900; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pcName .hint{ font-size:12.5px; }
  .pcBrand{
    width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--on-accent);
    display:grid; place-items:center; flex:none; box-shadow:var(--glow);
  }
  .pcRating{
    display:flex; align-items:baseline; gap:10px; margin:14px 0 4px; position:relative;
  }
  .pcRating .num{
    font-family:'Anton', Impact, sans-serif; font-size:56px; line-height:1;
    color:var(--digit); text-shadow:var(--digit-glow);
  }
  .pcRating .lbl{ color:var(--muted); font-weight:700; font-size:13px; }
  .pcConf{ height:5px; border-radius:99px; background:var(--sub); box-shadow:inset 0 0 0 1px var(--chalk-strong, var(--line-soft)); overflow:hidden; margin:6px 0 2px; position:relative; }
  .pcConf i{ position:absolute; inset-block:0; inset-inline-start:0; background:var(--graph); border-radius:99px; }
  .pcSection{ margin-top:14px; position:relative; }
  .pcSection .cardTitle{ margin-bottom:8px; }
  .pcVs{
    border:1px solid var(--line-soft); border-radius:var(--r-md); padding:12px 14px;
    display:flex; align-items:center; gap:10px; background:var(--surface);
  }
  .pcVs .num{ font-family:'Anton', Impact, sans-serif; font-size:26px; }
  .pcClose{ position:absolute; top:10px; inset-inline-end:12px; z-index:2; min-height:36px; width:36px; padding:0; border-radius:10px; }

  /* ================= CENTER COURT layer ================= */
  body{ font-family:-apple-system, "SF Hebrew", "Segoe UI", Roboto, "Heebo", Arial, sans-serif; }
  body::before{ /* iOS status-bar scrim: the clock never sits on app content */
    content:""; position:fixed; top:0; left:0; right:0; z-index:60;
    height:env(safe-area-inset-top, 0px); pointer-events:none;
    background:color-mix(in srgb, var(--bg) 80%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  body::after{ /* broadcast film grain */
    content:""; position:fixed; inset:0; z-index:99; pointer-events:none; opacity:var(--grain-op, .05);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .courtBg{ /* court geometry behind every screen */
    position:fixed; bottom:-3vh; left:50%; transform:translateX(-50%);
    width:min(620px, 130vw); height:auto; color:var(--fg); opacity:.055;
    z-index:0; pointer-events:none;
  }
  .screen{ position:relative; z-index:1; }

  /* every dropdown must LOOK like a dropdown: chalk border + permanent chevron
     (appearance:none removed the native arrow; this puts one back, theme-aware) */
  select.playerSelect, select.groupSelect{
    border:1.5px solid var(--line-soft);
    background-repeat:no-repeat;
    background-position:left 14px center;      /* RTL: the arrow sits at the inline end */
    background-size:17px;
    padding-inline-end:42px;                   /* text never runs under the arrow */
  }
  [data-theme="night"] select.playerSelect, [data-theme="night"] select.groupSelect,
  [data-theme="day"] select.playerSelect, [data-theme="day"] select.groupSelect{
    background-repeat:no-repeat !important;
    background-position:left 14px center !important;
    background-size:17px !important;
  }
  [data-theme="night"] select.playerSelect, [data-theme="night"] select.groupSelect{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3c9b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  }
  [data-theme="day"] select.playerSelect, [data-theme="day"] select.groupSelect{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586e5f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  }

  .ic{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8;
       stroke-linecap:round; stroke-linejoin:round; flex:none; }
  .ic.sm{ width:17px; height:17px; }

  /* Raqio wordmark: theme-aware pair, toggled purely by [data-theme] (no JS needed).
     "-dark" = the white logo file, shown ON dark ("night") backgrounds.
     "-light" = the navy logo file, shown ON light ("day") backgrounds. */
  .wordmark-dark, .wordmark-light{ display:none; }
  [data-theme="night"] .wordmark-dark{ display:block; }
  [data-theme="day"] .wordmark-light{ display:block; }

  .brandMark{ flex:none; display:flex; align-items:center; height:28px; }
  /* the horizontal "Raqio" wordmark (802x197), sized for the compact top bar.
     Which colour shows is handled by the .wordmark-dark/.wordmark-light theme toggle. */
  .brandMark img{ height:26px; width:auto; max-width:none; }
  /* full lockup (symbol + wordmark), uncropped: the login/welcome splash has the
     vertical room the compact header chip doesn't */
  .splashLogo{ height:88px; width:auto; margin:0 auto 2px; }
  .hero{ gap:var(--sp-3); justify-content:flex-start; }
  .hero .brandText{ flex:1; min-width:0; }
  .hero h1{ font-family:'Anton', Impact, sans-serif; font-size:23px; font-weight:400; letter-spacing:.06em; direction:ltr; text-align:right; line-height:1; }
  .themeBtn{ display:flex; align-items:center; justify-content:center; gap:8px; }

  /* ===== premium 4-tab bottom nav ===== */
  #bottomNav{
    /* FIXED to the visual-viewport bottom so it never detaches on scroll (the old
       sticky+100dvh combo left a gap when the mobile toolbar showed/hid). Capped to
       the #setup column width + centered so it stays full-bleed on phones and aligned
       on wide screens. screenIn's transform is only in the `from` keyframe, so at rest
       #setup has no transform and this stays viewport-relative. */
    position:fixed; inset-inline:0; bottom:0; z-index:7;
    max-width:520px; margin-inline:auto;
    display:flex; gap:4px;
    padding:6px var(--sp-2) calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line-soft);
  }
  #bottomNav button{
    flex:1; position:relative;
    font-size:10.5px; font-weight:800; padding:7px 1px 6px; min-height:52px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--muted); background:transparent; border:none; box-shadow:none; border-radius:var(--r-sm);
  }
  #bottomNav button[aria-pressed="true"]{ background:var(--tint); color:var(--accent-ink); box-shadow:none; }
  #bottomNav button.hasBadge::after{
    content:""; position:absolute; top:8px; inset-inline-end:calc(50% - 20px);
    width:9px; height:9px; border-radius:50%; background:var(--danger);
    box-shadow:0 0 0 2px var(--bg);
  }
  /* sub-nav dot: a lit primary tab points to the exact sub-tab that owns the update */
  #subNav button{ position:relative; }
  #subNav button.hasBadge::after{
    content:""; position:absolute; top:5px; inset-inline-end:7px;
    width:8px; height:8px; border-radius:50%; background:var(--danger);
    box-shadow:0 0 0 2px var(--sub);
  }
  /* labels fit down to 320px; only on ultra-narrow screens do we drop to
     icon-only so nothing clips (the icon keeps its own explicit size) */
  @media (max-width: 319px){
    #bottomNav button{ font-size:0; gap:0; padding:10px 1px; }
    #bottomNav button .ic{ width:23px; height:23px; }
  }

  /* ---- guided first-run tour: coachmarks over the bottom nav -------------
     Scrim + a spotlight ring cut over the active tab + an explainer card.
     Both themes are token-driven; card text sits on the opaque --surface so
     contrast never depends on the scrim underneath. Safe-area aware. */
  #tourWrap{ position:fixed; inset:0; z-index:70; display:block; }
  #tourWrap[hidden]{ display:none; }
  #tourSpot{
    position:fixed; border-radius:var(--r-md); pointer-events:none;
    /* the huge outward shadow IS the scrim — a real cut-out around the tab;
       the tight accent ring (decorative) hugs the spotlighted button */
    box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--surface), 0 0 0 9999px var(--scrim);
    transition: top .28s var(--ease), left .28s var(--ease), width .28s var(--ease), height .28s var(--ease);
  }
  #tourCard{
    position:fixed; z-index:71;
    left:max(var(--sp-4), env(safe-area-inset-left)); right:max(var(--sp-4), env(safe-area-inset-right));
    bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-4));
    max-width:440px; margin-inline:auto;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-md); padding:var(--sp-4);
    animation:sheetUp .28s var(--ease);
  }
  .tourTop{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); }
  .tourStepNum{ font-size:13px; font-weight:800; color:var(--muted); letter-spacing:.04em; }
  #tourSkip{ min-height:34px; padding:4px 14px; font-size:13px; font-weight:700; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:999px; box-shadow:none; }
  #tourText{ font-size:15px; font-weight:600; line-height:1.5; color:var(--fg); margin:0; }
  .tourDots{ display:flex; gap:6px; justify-content:center; margin:var(--sp-3) 0; }
  .tourDot{ width:7px; height:7px; border-radius:50%; background:var(--line2); transition:width .2s var(--ease), background-color .2s var(--ease); }
  .tourDot.on{ width:20px; border-radius:999px; background:var(--accent-ink); }
  #tourNext{ width:100%; min-height:46px; }

  fieldset{ border:1px solid var(--line-soft); }
  button.primary, .learnRow button.learning{
    background:var(--acc-grad); color:var(--on-accent); border-color:transparent; font-weight:800;
    box-shadow:var(--shadow-md), var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.28);
  }
  button.primary:active, .learnRow button.learning:active{ box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.2); }
  .icChip{
    width:36px; height:36px; border-radius:11px; background:var(--tint); color:var(--accent-ink);
    display:grid; place-items:center; flex:none;
  }
  .icChip .ic{ width:20px; height:20px; }
  .tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); }
  .tile{
    background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md);
    padding:16px 10px; text-align:center; box-shadow:var(--shadow-sm);
  }
  .tile .v{
    font-family:'Anton', Impact, sans-serif; font-size:29px; line-height:1.05;
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .tile .k{ font-size:11.5px; color:var(--muted); font-weight:700; margin-top:4px; }

  .panel{
    background:linear-gradient(175deg, var(--surface-2, var(--surface)), var(--surface));
    border:1px solid var(--line-soft);
  }
  .panel.serving{ border-color:var(--accent); }
  .serveDot{ animation:servePulse 2s ease-in-out infinite; }
  @keyframes servePulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.8; } }
  #announceCard{ border:1px solid var(--line-soft); }

  .rankChip{
    display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
    background:var(--sub); color:var(--muted); font-weight:800; font-size:13px;
  }
  .rankChip.gold{ background:var(--accent); color:var(--on-accent); box-shadow:var(--glow); }
  .stt td.winCol{ color:var(--accent-ink); }
  .stt td.lossCol{ color:var(--muted); }
  /* recent form, newest on the right (last five results) */
  .formDots{ display:inline-flex; gap:3px; direction:ltr; }
  .formDots i{ width:8px; height:8px; border-radius:50%; background:var(--sub); }
  .formDots i.w{ background:var(--accent); }
  .formDots i.l{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted); }
  /* your own row, called out so you find yourself at a glance */
  .stt tr.me td{ background:var(--tint); }
  .stt tr.me td.pname-cell{ font-weight:900; }
  .stt tr.me td:first-child{ border-start-start-radius:8px; border-end-start-radius:8px; }
  .stt tr.me td:last-child{ border-start-end-radius:8px; border-end-end-radius:8px; }
  .meTag{ color:var(--accent-ink); font-weight:800; font-size:11px; margin-inline-start:5px; }

  /* followers / following / kudos list sheet (opens over the player card) */
  #listSheetWrap{ display:none; position:fixed; inset:0; z-index:16; background:rgba(0,0,0,.55);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); align-items:flex-end; justify-content:center; }
  #listSheetWrap.show{ display:flex; }
  #listSheet{ width:100%; max-width:430px; max-height:82dvh; overflow-y:auto; position:relative;
    background:var(--bg); background-image:var(--bg-grad); border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--sp-4) var(--sp-4) max(var(--sp-5), env(safe-area-inset-bottom));
    box-shadow:0 -12px 44px rgba(0,0,0,.45); animation:sheetUp .28s var(--ease); }
  .listRow{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line-soft); }
  .listRow .who{ flex:1; min-width:0; }
  .listRow .who b{ font-weight:800; display:block; }
  .listRow .who .hint{ font-size:12px; }
  .listRow button{ min-height:34px; padding:0 14px; font-size:12.5px; flex:none; }

  /* ===== chat ===== */
  .chatRow{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--shadow-sm); cursor:pointer; }
  .chatRow:active{ transform:scale(.99); }
  .chatRow .avatarDot{ width:42px; height:42px; }
  .chatRow .cmeta{ flex:1; min-width:0; }
  .chatRow .cnm{ font-weight:800; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chatRow .clast{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chatRow .cwhen{ font-size:11px; color:var(--muted); flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
  /* per-thread unread pip — the same danger dot as the nav badges, ringed on the
     opaque row surface so it clears contrast in both themes */
  .chatRow .cunread{ width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--surface); }
  .chatRow.hasUnread .cnm{ font-weight:900; }
  /* "load earlier" control, centered at the top of the thread */
  #chatMessages .chatMore{ align-self:center; margin:2px auto 6px; padding:7px 16px; font-size:12.5px; font-weight:800;
    color:var(--accent-ink); background:var(--sub); border:1px solid var(--line-soft); border-radius:999px; box-shadow:none; }
  #chatMessages .chatMore:disabled{ opacity:.6; }
  .chatKebab{ flex:none; min-height:34px; min-width:34px; padding:0; border-radius:9px; background:transparent; border:none; color:var(--muted); font-size:20px; line-height:1; }
  .chatKebab:active{ background:var(--sub); }
  .rowActions{ display:flex; gap:6px; flex:none; }
  .rowActions button{ min-height:34px; padding:0 12px; font-size:12.5px; font-weight:800; border-radius:9px; background:var(--sub); border:1px solid var(--line-soft); color:var(--fg); }
  .rowActions button.del{ color:var(--danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
  #chatInput{
    flex:1; min-width:0; font:inherit; font-size:15px; color:var(--fg); background:var(--sub);
    border:1.5px solid transparent; border-radius:var(--r-sm); resize:none;
    min-height:48px; max-height:132px; padding:12px 14px; line-height:1.4;
    user-select:text; -webkit-user-select:text; transition:border-color .2s, background-color .2s;
  }
  #chatInput:focus-visible{ outline:none; border-color:var(--ring); background:var(--surface); }
  .chatMsg{ max-width:82%; padding:9px 13px; border-radius:15px; font-size:15px; line-height:1.45; word-break:break-word; white-space:pre-wrap; }
  .chatMsg.mine{ align-self:flex-end; background:var(--accent); color:var(--on-accent); border-end-end-radius:5px; }
  .chatMsg.theirs{ align-self:flex-start; background:var(--sub); color:var(--fg); border-end-start-radius:5px; }
  .chatMsg .who{ font-size:11px; font-weight:700; opacity:.8; margin-bottom:2px; }
  .chatMsg .cwhen{ font-size:10px; opacity:.65; margin-top:3px; text-align:end; }

  /* ===== shared avatar dot (photo or initials), used across board/groups/notifs ===== */
  .avatarDot{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
    background:var(--tint); color:var(--accent-ink); font-weight:900; font-size:13px;
    border:1.5px solid var(--accent); overflow:hidden; }
  .avatarDot.sm{ width:26px; height:26px; font-size:11px; border-width:1px; }
  .avatarDot img{ width:100%; height:100%; object-fit:cover; }

  /* ===== board game cards ===== */
  #gamesList fieldset.gameCard{ gap:10px; margin-bottom:12px; }
  .gcHead{ display:flex; align-items:center; gap:10px; }
  .gcHead .gcTitle{ font-weight:900; font-size:15px; flex:1; }
  .datePill{ background:var(--sub); color:var(--fg); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:800; white-space:nowrap; }
  .datePill.soon{ background:var(--tint); color:var(--accent-ink); }
  .venueLine{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; }
  .venueLine .city{ color:var(--muted); font-weight:600; }
  .stateChip{ font-size:11px; font-weight:800; border-radius:999px; padding:3px 10px; margin-inline-start:auto; white-space:nowrap; }
  .stateChip.ok{ background:var(--tint); color:var(--accent-ink); }
  .stateChip.no{ background:var(--tint-clay); color:var(--clay-ink); }
  .creatorRow{ display:flex; align-items:center; gap:8px; }
  .creatorRow .who{ flex:1; font-size:13px; min-width:0; }
  .creatorRow .who b{ font-weight:800; }
  .creatorRow .cap{ font-weight:900; font-size:15px; }
  .creatorRow .cap span.k{ font-size:11px; color:var(--muted); font-weight:700; margin-inline-start:3px; }
  .playerChips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .pChip{ display:flex; align-items:center; gap:6px; background:var(--sub); border-radius:999px; padding:3px 12px 3px 5px; font-size:13px; font-weight:700; cursor:pointer; }
  .pChip .rt{ color:var(--muted); font-weight:800; }
  .slotChip{ display:flex; align-items:center; gap:6px; border:1.5px dashed var(--line-soft); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:700; color:var(--muted); }
  .tag{ font-size:10.5px; font-weight:700; padding:3px 9px 3px 8px; border-radius:99px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
  .tag.tennis{ background:var(--tint); color:var(--accent-ink); }
  .tag.padel{ background:var(--tint-clay); color:var(--clay-ink); }
  .badge{ font-size:10px; font-weight:800; padding:4px 9px; border-radius:99px; letter-spacing:.03em; display:inline-flex; align-items:center; gap:5px; }
  .badge.tennis{ background:var(--accent); color:var(--on-accent); }
  .badge.padel{ background:var(--clay); color:var(--on-clay); }
  .alertStrip{ background:var(--tint); color:var(--accent-ink); border-radius:var(--r-sm); padding:8px 12px; font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:8px; }
  .alertStrip .ic{ width:17px; height:17px; }
  .gcFoot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px dashed var(--line-soft); padding-top:9px; font-size:12.5px; color:var(--muted); font-weight:700; }
  .gcFoot .fi{ display:flex; align-items:center; gap:5px; }
  .gcFoot .ic{ width:15px; height:15px; }

  /* ===== my-stats greeting + highlighted hero tile ===== */
  .greet{ display:flex; align-items:center; gap:12px; }
  .greet .g-name{ font-size:18px; font-weight:900; line-height:1.1; }
  .greet .g-sub{ font-size:13px; color:var(--muted); font-weight:600; margin-top:2px; }
  .tile.hl{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
    border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
  .tile.hl .v{ color:var(--digit); text-shadow:var(--digit-glow); }

  /* ===== premium profile hero (Task 3): context badge · big Elo · 30-day delta · chart ===== */
  .pHero{ position:relative; overflow:hidden; background:linear-gradient(160deg, var(--surface-2), var(--surface));
    border:1px solid var(--line2); border-radius:var(--r-lg); padding:16px 16px 10px; box-shadow:var(--glow); }
  .pBadge{ display:inline-flex; align-items:center; gap:6px; background:var(--tint); color:var(--accent-ink);
    font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; }
  .pBadge .ic{ width:14px; height:14px; }
  .pNum{ font-size:52px; font-weight:900; line-height:1; letter-spacing:-.02em; color:var(--fg); margin:10px 0 3px; }
  .pDeltaLine{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
  .pDelta{ font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }
  .pSub{ color:var(--faint); font-size:12px; }
  .pChart{ margin-top:8px; }
  /* stat trio: win% ring · matches · streak */
  .pTrio{ display:flex; gap:9px; }
  .pStat{ flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--r-md);
    padding:12px 8px; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .pStatK{ font-size:10.5px; color:var(--faint); font-weight:700; margin-top:5px; }
  .pStatV{ font-size:22px; font-weight:900; color:var(--fg); }
  .pRing{ width:52px; height:52px; display:block; margin:0 auto; }
  .pStreak{ display:inline-flex; align-items:center; gap:5px; justify-content:center;
    color:var(--accent-ink); font-weight:900; font-size:20px; line-height:1; }
  .pStreak .ic{ width:20px; height:20px; }
  /* recent form: last 5 W/L dots (win --graph bg, loss --clay border) */
  .pFormWrap{ display:flex; flex-direction:column; gap:8px; }
  .pLbl{ font-size:11px; color:var(--faint); font-weight:700; text-align:center; }
  .pForm{ display:flex; align-items:center; gap:6px; justify-content:center; direction:ltr; }
  .pDot{ width:26px; height:26px; border-radius:var(--r-xs); display:grid; place-items:center; font-size:11px; font-weight:900; }
  .pDot.w{ background:var(--graph); color:var(--on-accent); }
  .pDot.l{ background:var(--tint-clay); color:var(--clay-ink); border:1px solid var(--clay); }
  /* ===== per-combo cards (Task 4): the OTHER combos below the hero ===== */
  .combos{ display:flex; flex-direction:column; gap:9px; }
  .combo{ display:flex; align-items:center; gap:11px; background:var(--surface-2);
    border:1px solid var(--line-soft); border-radius:var(--r-md); padding:11px 13px; }
  .combo.padel{ border-color:var(--tint-clay); }
  .combo .cc{ width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center; flex-shrink:0; }
  .combo .cc .ic{ width:19px; height:19px; }
  .combo.tennis .cc{ background:var(--tint); color:var(--accent-ink); }
  .combo.padel .cc{ background:var(--tint-clay); color:var(--clay-ink); }
  .combo .ci{ flex:1; min-width:0; }
  .combo .ci b{ font-size:13.5px; font-weight:800; display:block; color:var(--fg); }
  .combo .cMeta{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
  .combo .cSpark{ flex-shrink:0; width:58px; height:22px; display:block; }
  .combo .cv{ font-size:19px; font-weight:900; flex-shrink:0; }
  .combo.tennis .cv{ color:var(--accent-ink); }
  .combo.padel .cv{ color:var(--clay-ink); }
  /* ===== profile-completion card (Task 5): canonical 3-row "N מתוך 3" ===== */
  .completion{ background:linear-gradient(160deg, var(--tint), transparent 70%), var(--surface-2);
    border:1px solid var(--line2); border-radius:var(--r-md); padding:12px 13px; }
  .completion .ch{ display:flex; justify-content:space-between; align-items:center;
    font-size:12.5px; font-weight:800; color:var(--fg); margin-bottom:8px; }
  .completion .ch b{ color:var(--accent-ink); font-variant-numeric:tabular-nums; }
  .completion .cbar{ height:7px; border-radius:99px; background:var(--sub); overflow:hidden; margin-bottom:10px; }
  .completion .cbar > i{ display:block; height:100%; border-radius:99px;
    background:linear-gradient(90deg, var(--graph), var(--accent-ink)); }
  .completion .citem{ display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px; color:var(--fg); }
  .completion .citem.ok{ color:var(--faint); }
  .completion .cdot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .completion .cdot.done{ background:var(--graph); }
  .completion .cdot.todo{ background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
  .completion .go{ margin-inline-start:auto; padding:0; border:0; background:none; cursor:pointer;
    box-shadow:none; min-height:0; line-height:1;
    color:var(--accent-ink); font-weight:800; font-size:12px; font-family:inherit; }
  /* ===== premium league podium (Task 6): champion-lime / silver / bronze top-3 ===== */
  /* champion is fully tokenised (lime is a theme token); silver + bronze use metallic
     literals — allowed decorative FILLS only, never on legible text. The name, rating
     and the big rank numeral are guaranteed-contrast --fg, AA in both themes. */
  .podium{ display:flex; align-items:flex-end; justify-content:center; gap:5px; margin:8px 0 16px; }
  .pcol{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0; }
  .pcol .pav{ width:52px; height:52px; border-radius:50%; background:var(--sub); display:grid; place-items:center;
    font-weight:900; font-size:18px; color:var(--fg); border:2.5px solid var(--line2); position:relative; z-index:1; }
  .pcol .pav img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .pcol.first .pav{ width:66px; height:66px; box-shadow:var(--glow); }
  .pcol.first .pbar{ box-shadow:0 -6px 26px -12px var(--accent); }
  .pcol .pn{ font-size:12px; font-weight:800; color:var(--fg); max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pcol .pr{ font-size:14px; font-weight:900; color:var(--fg); }
  .pbar{ width:100%; border-radius:13px 13px 0 0; border:1px solid var(--line); border-bottom:0;
    display:grid; place-items:center; font-weight:900; position:relative; overflow:hidden; }
  .pbar::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--pc);
    border-radius:13px 13px 0 0; box-shadow:0 0 10px var(--pc); }
  .prank{ font-size:34px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
    color:var(--fg); opacity:.92; }
  .medal{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:23px; height:23px;
    border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:900;
    box-shadow:0 2px 7px rgba(0,0,0,.4); border:1.5px solid rgba(255,255,255,.35); }
  /* secondary period control: a smaller, quieter segment below the podium/table */
  .segLabel{ font-size:11px; color:var(--faint); font-weight:700; margin:12px 2px 6px; }
  .seg.segSm{ margin-bottom:6px; }
  .seg.segSm button{ min-height:38px; font-size:12px; }
  /* full-statistics disclosure — demoted legacy sections, below the premium fold */
  .fullStats{ border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface); padding:0 14px; }
  .fullStats > summary{ list-style:none; cursor:pointer; padding:13px 2px; font-weight:800; font-size:14px; color:var(--fg);
    display:flex; align-items:center; justify-content:space-between; }
  .fullStats > summary::-webkit-details-marker{ display:none; }
  .fullStats > summary::after{ content:'\25BE'; color:var(--faint); font-size:12px; transition:transform .2s; }
  .fullStats[open] > summary::after{ transform:rotate(180deg); }
  .fullStats[open] > summary{ border-bottom:1px solid var(--line-soft); margin-bottom:12px; }
  .fullStats fieldset{ border:none; box-shadow:none; background:transparent; padding:6px 0; }
  .fullStats > *:last-child{ margin-bottom:12px; }

  /* ===== matchmaking suggestions (level-matched opponents) ===== */
  .suggStrip{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .suggCard{ flex:none; width:148px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line-soft);
    border-radius:var(--r-md); padding:14px 12px; text-align:center; box-shadow:var(--shadow-sm); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:6px; }
  .suggCard .avatarDot{ width:48px; height:48px; font-size:17px; }
  .suggCard .snm{ font-weight:800; font-size:14px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .suggCard .srate{ font-family:'Anton', Impact, sans-serif; font-size:23px; line-height:1; color:var(--digit); text-shadow:var(--digit-glow); }
  .fitPill{ font-size:11px; font-weight:800; border-radius:999px; padding:2px 10px; }
  .fitPill.great{ background:var(--tint); color:var(--accent-ink); }
  .fitPill.near{ background:var(--sub); color:var(--muted); }
  .fitPill.chal{ background:var(--tint-clay); color:var(--clay-ink); }
  .modeChip{
    display:inline-flex; align-items:center; gap:8px; background:var(--tint); color:var(--accent-ink);
    border-radius:999px; padding:8px 15px; font-size:13px; font-weight:700;
  }
  .modeChip.clay{ background:var(--tint-clay); color:var(--clay-ink); }
  .formatLock{
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--clay-ink);
    background:var(--tint-clay); border-radius:var(--r-sm); padding:9px 11px; margin-top:9px; line-height:1.4;
  }
  .suggCard .sgroup{ font-size:11px; color:var(--muted); font-weight:700; }

  .trophyChip{
    width:84px; height:84px; border-radius:50%; background:var(--tint); color:var(--accent-ink);
    display:grid; place-items:center;
  }
  .trophyChip .ic{ width:44px; height:44px; }
  #startBtn{ display:flex; align-items:center; justify-content:center; gap:10px; }
  #actions .ic{ width:21px; height:21px; }
  #actions button, #moreMenu button{ display:flex; align-items:center; justify-content:center; gap:8px; }
  #moreMenu button{ justify-content:flex-start; }

/* ── phone verification (019 OTP) ─────────────────────────────────────────
   token-only; the verified badge uses --accent-ink, which is guaranteed
   legible on the form surface in BOTH themes (dark-olive / bright volt). */
.phoneVerifyRow{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin-top:var(--sp-2); }
.pfPhoneState{ margin:0; }
.pfPhoneState.ok{ color:var(--accent-ink); font-weight:800; }
.pfPhoneState.warn{ color:var(--muted); }
.otpRow{ margin-top:var(--sp-3); }
.otpCode{ letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums;
  font-size:1.2rem; font-weight:800; }
#pfOtpMsg{ margin-top:var(--sp-2); }
#pfOtpMsg.err{ color:var(--danger); }
#pfOtpMsg.ok{ color:var(--accent-ink); font-weight:800; }

/* ── tab / field "needs completing" dots ─────────────────────────────────
   Tab dots reuse #bottomNav .hasBadge::after. A missing profile field gets a small
   red dot after its label (both <label> and the gender <span class=flabel>). */
.field.needsFill > label::after,
.field.needsFill > .flabel::after{
  content:""; display:inline-block; width:7px; height:7px; margin-inline-start:6px;
  border-radius:50%; background:var(--danger); vertical-align:middle;
}

/* kudos = a warm flame that reads as "on fire", not the accent green */
#kudosBtn .ic{ color:var(--kudos-flame); }

/* ── league hero: your rating, rank, streak (energetic accent on the calm base) ── */
.lgHero{ border-radius:var(--r-md); padding:16px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface) 72%);
  box-shadow:inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--hair); }
.lgHero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--glass); }
.lgHero .hRow{ display:flex; align-items:center; justify-content:space-between; position:relative; }
.lgHero .hLbl{ font-size:12px; color:var(--muted); }
.lgHero .hRate{ font-size:26px; font-weight:900; letter-spacing:-.02em; color:var(--fg); display:flex; align-items:center; gap:9px; }
.lgHero .hRank{ font-family:'Anton'; font-size:30px; color:var(--accent-ink); line-height:1; }
.lgHero .hChips{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; position:relative; }
.lgHero .hChip{ font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.lgHero .hChip .ic{ width:1em; height:1em; font-size:13.5px; }
.lgHero .hChip.hot{ background:var(--acc-grad); color:var(--on-accent); box-shadow:var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.lgHero .hChip.hot .ic.flame{ color:var(--kudos-flame); }
.lgHero .hChip.ghost{ background:var(--sub); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--line-soft); }
.lgHero .trendUp{ color:var(--accent-ink); display:inline-flex; } .lgHero .trendDn{ color:var(--clay-ink); display:inline-flex; }
.lgHero .trendUp .ic, .lgHero .trendDn .ic{ width:.9em; height:.9em; }