* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; height: 100%; }
    body { background: var(--zl-bg); color: var(--zl-text); font-family: var(--zl-font); font-size: var(--zl-text-base);
      line-height: var(--zl-leading); overscroll-behavior: none; -webkit-font-smoothing: antialiased; touch-action: manipulation; transition: background .25s ease, color .25s ease; }
    body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background: radial-gradient(70vw 50vh at 18% -8%, rgba(157,174,80,.10), transparent 60%), radial-gradient(60vw 50vh at 92% 8%, rgba(176,149,179,.09), transparent 60%); }

    /* ── LIGHT THEME (inspired by my-monkey.fr, keeping zlef olive/grape accents) ── */
    body.light {
      --zl-bg: #f6f3ea; --zl-surface-1: #ffffff; --zl-surface-2: #f1ede2; --zl-surface-3: #e7e1d2;
      --zl-line: rgba(40,34,20,.10); --zl-line-strong: rgba(40,34,20,.18); --zl-line-focus: rgba(89,100,42,.6);
      --zl-text: #221f17; --zl-text-soft: #4c4738; --zl-text-muted: #7b7563; --zl-text-faint: #aaa48e;
      --zl-accent-soft: #59642a; --zl-olive-bright: #4d5a1f; --zl-olive-soft: #59642a;
      --zl-accent2-soft: #6b5470; --zl-grape-soft: #6b5470;
      --zl-on-accent: #f4f6ea; --zl-info: #6b5470;
      --zl-accent-wash: rgba(89,100,42,.13); --zl-accent-glow: rgba(89,100,42,.20); --zl-accent2-wash: rgba(107,84,112,.12);
      --zl-shadow-sm: 0 1px 2px rgba(60,50,20,.10); --zl-shadow-md: 0 6px 22px rgba(60,50,20,.12); --zl-shadow-lg: 0 18px 50px rgba(60,50,20,.16);
    }
    body.light::before { background: radial-gradient(70vw 50vh at 18% -8%, rgba(157,174,80,.16), transparent 60%), radial-gradient(60vw 50vh at 92% 8%, rgba(176,149,179,.14), transparent 60%); }

    /* line icons */
    .ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.18em; }
    .ic-mise { color: var(--zl-olive-soft); } .ic-bu { color: var(--zl-warning); }
    .ic-rebond { color: var(--zl-accent2-soft); } .ic-gerbe { color: var(--zl-danger); }
    .ic-act { width: 1.7em; height: 1.7em; vertical-align: middle; }
    .ic-big { width: 1.35em; height: 1.35em; }
    .theme-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--zl-line); background: var(--zl-surface-2); color: var(--zl-text); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
    button { font-family: inherit; cursor: pointer; }
    .app { max-width: 760px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
    .screen { display: none; flex: 1; flex-direction: column; }
    .screen.on { display: flex; animation: fade .25s ease; }
    @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .wordmark { font-weight: 800; letter-spacing: -.04em; }
    .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--zl-radius-pill);
      font-size: var(--zl-text-xs); font-weight: 600; background: var(--zl-surface-2); color: var(--zl-text-soft); }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--zl-success); animation: pulse 2s infinite; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111,154,58,.5); } 70% { box-shadow: 0 0 0 7px rgba(111,154,58,0); } 100% { box-shadow: 0 0 0 0 rgba(111,154,58,0); } }
    .btn { border: 1px solid var(--zl-line-strong); background: var(--zl-surface-2); color: var(--zl-text); border-radius: var(--zl-radius-lg);
      padding: 14px 18px; font-size: var(--zl-text-base); font-weight: 600; width: 100%; transition: transform .08s ease, background .15s ease, border-color .15s ease; }
    .btn:active { transform: scale(.97); }
    .btn.primary { background: var(--zl-accent); border-color: transparent; color: var(--zl-on-accent); box-shadow: 0 6px 20px rgba(62,70,24,.45); }
    .btn.primary:active { background: var(--zl-accent-mid); }
    .btn.ghost { background: transparent; }
    .btn.sm { padding: 9px 14px; font-size: var(--zl-text-sm); width: auto; }
    input.fld, select.fld { width: 100%; background: var(--zl-surface-2); border: 1px solid var(--zl-line-strong); color: var(--zl-text);
      border-radius: var(--zl-radius-lg); padding: 14px 16px; font-size: var(--zl-text-lg); font-family: inherit; }
    input.fld:focus { outline: none; border-color: var(--zl-line-focus); }
    .muted { color: var(--zl-text-muted); } .soft { color: var(--zl-text-soft); }
    .hidden { display: none !important; }

    /* top account bar */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px max(10px, env(safe-area-inset-top)); }
    .acct { display: inline-flex; align-items: center; gap: 8px; background: var(--zl-surface-2); border: 1px solid var(--zl-line);
      border-radius: var(--zl-radius-pill); padding: 6px 13px; font-size: var(--zl-text-sm); font-weight: 600; color: var(--zl-text); }
    .acct .ph { width: 22px; height: 22px; border-radius: 50%; background: var(--zl-accent-wash) center/cover; display: grid; place-items: center; font-size: 12px; }

    /* HOME */
    #home { padding: 6px 20px 24px; gap: 20px; }
    .hero { text-align: center; }
    .hero .coin { font-size: 60px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(157,174,80,.35)); }
    .hero h1 { font-size: var(--zl-text-4xl); margin: 8px 0 4px; font-weight: 800; letter-spacing: -.04em; }
    .hero p { margin: 0 auto; max-width: 30ch; color: var(--zl-text-soft); font-size: var(--zl-text-lg); }
    .card { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-xl); padding: 20px; box-shadow: var(--zl-shadow-md); }
    .avatar-row { display: flex; gap: 10px; align-items: center; }
    .av-prev { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: var(--zl-surface-2) center/cover; }
    .emoji-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
    .emoji-pick button { font-size: 22px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--zl-line); background: var(--zl-surface-2); }
    .emoji-pick button.sel { border-color: var(--zl-accent-soft); background: var(--zl-accent-wash); }
    .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .join-row { display: flex; gap: 10px; }
    .join-row input { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-family: var(--zl-font-mono); }
    .rules-toggle { text-align: center; font-size: var(--zl-text-sm); }
    .rules { font-size: var(--zl-text-sm); color: var(--zl-text-soft); }
    .rules li { margin: 7px 0; }
    .foot { text-align: center; font-size: var(--zl-text-xs); color: var(--zl-text-faint); }
    .err { color: var(--zl-danger); font-size: var(--zl-text-sm); min-height: 18px; text-align: center; }

    /* LOBBY */
    #lobby { padding: 8px 20px 20px; gap: 16px; }
    .code-big { font-family: var(--zl-font-mono); font-size: clamp(34px, 11vw, 52px); font-weight: 800; letter-spacing: .08em; text-align: center; color: var(--zl-olive-bright); }
    .qr-wrap { display: grid; place-items: center; gap: 14px; }
    .qr-wrap img { width: min(58vw, 240px); border-radius: var(--zl-radius-lg); border: 1px solid var(--zl-line); background: var(--zl-surface-1); padding: 8px; }
    .players-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .pchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: var(--zl-radius-pill); background: var(--zl-surface-2); font-size: var(--zl-text-sm); font-weight: 600; }
    .pchip .mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background-size: cover; background-position: center; }
    .pchip.off { opacity: .4; } .pchip.add { background: var(--zl-accent-wash); color: var(--zl-olive-bright); border: 1px dashed var(--zl-accent-mid); cursor: pointer; padding: 6px 13px; }
    .pchip.custom { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); border: 1px solid var(--zl-line-strong); background-size: cover !important; background-position: center !important; }
    /* home: customized-profile preview (replaces the emoji picker when logged in) */
    .cp-tile { margin-top: 14px; height: 124px; border-radius: var(--zl-radius-lg); border: 1px solid var(--zl-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; background: var(--zl-surface-1); }
    .cp-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(0,0,0,.6)); }
    .cp-av { width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center; display: grid; place-items: center; font-weight: 800; font-size: 22px; z-index: 1; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
    .cp-nm { z-index: 1; font-weight: 700; font-size: var(--zl-text-lg); color: #f6f5ef; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
    /* recap: section row + zero toggle */
    .sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .zerotoggle { border: 1px solid var(--zl-line-strong); background: var(--zl-surface-2); color: var(--zl-text-soft); border-radius: var(--zl-radius-pill); padding: 6px 13px; font-size: var(--zl-text-xs); font-weight: 600; }
    .zerotoggle.on { background: var(--zl-accent-wash); color: var(--zl-olive-bright); border-color: var(--zl-accent-mid); }

    /* GAME */
    #game { padding: 0; }
    .gbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--zl-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--zl-line); }
    .gbar .ttl { font-size: var(--zl-text-base); font-weight: 700; }
    .gbar .sub { font-size: var(--zl-text-xs); color: var(--zl-text-muted); font-family: var(--zl-font-mono); letter-spacing: .06em; }
    .icobtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--zl-line); background: var(--zl-surface-2); color: var(--zl-text); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
    /* tiles FILL the grid: rows stretch to use the full height (no void); when there are
       too many rows to fit, the floor (--rowmin) kicks in and the grid scrolls instead. */
    .grid { display: grid; gap: 10px; padding: 12px 12px 104px; flex: 1; min-height: 0; align-content: stretch; grid-auto-rows: minmax(var(--rowmin, 116px), 1fr); overflow-y: auto; }
    .tile { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-lg); padding: 10px 8px; text-align: center;
      display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px; position: relative; transition: transform .08s ease, border-color .15s; overflow: hidden; min-height: 0; }
    .tile > * { position: relative; z-index: 1; }
    .tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(120% 80% at 50% -20%, var(--glow, transparent), transparent 60%); }
    .tile.custombg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 22%, rgba(0,0,0,.68)); z-index: 0; }
    /* a custom bg always carries a dark legibility overlay → force LIGHT text + bright icons in BOTH themes */
    .tile.custombg .nm, .tile.custombg .st, .tile.custombg .st b { color: #f6f5ef; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
    .tile.custombg .ic-mise { color: #c6d680; } .tile.custombg .ic-bu { color: #e6bb5c; }
    .tile.custombg .ic-rebond { color: #d3bdd5; } .tile.custombg .ic-gerbe { color: #e89aa9; }
    .tile:active { transform: scale(.97); border-color: var(--zl-line-focus); }
    /* height is a % of the (definite) tile height → avatar grows in tall tiles, shrinks in short ones */
    .tile .av { height: clamp(36px, 34%, 104px); width: auto; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: clamp(16px, 4.6vw, 26px); background-size: cover; background-position: center; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
    .tile .nm { font-size: var(--zl-text-sm); font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    /* 2×2 stat grid → predictable height, never clips the name */
    .tile .st { font-size: var(--zl-text-xs); color: var(--zl-text-soft); font-weight: 600; display: grid; grid-template-columns: auto auto; gap: 3px 12px; justify-content: center; }
    .tile .st span { display: inline-flex; align-items: center; gap: 4px; }
    .tile .st b { color: var(--zl-text); font-weight: 700; }
    .tile .crown { position: absolute; top: 7px; right: 9px; font-size: 13px; z-index: 2; }
    .tile .badge { position: absolute; top: 7px; right: 9px; font-size: 11px; z-index: 2; opacity: .85; }
    .tile .offdot, .tile .livedot { position: absolute; top: 9px; left: 9px; width: 7px; height: 7px; border-radius: 50%; z-index: 2; }
    .tile .offdot { background: var(--zl-text-faint); } .tile .livedot { background: var(--zl-success); }
    .tile.compact { padding: 8px 5px; gap: 4px; }
    .tile.compact .av { height: clamp(30px, 30%, 56px); font-size: clamp(13px, 4vw, 18px); }
    .tile.compact .nm { font-size: var(--zl-text-sm); } .tile.compact .st { gap: 6px; font-size: var(--zl-text-xs); }
    .tile.add { border: 1px dashed var(--zl-line-strong); background: transparent; color: var(--zl-text-muted); }
    .tile.add .plus { font-size: 30px; } .tile.add .lbl { font-size: var(--zl-text-sm); font-weight: 600; }
    .zoomctl { position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
    .zoomctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--zl-line-strong); background: color-mix(in srgb, var(--zl-surface-1) 92%, transparent); color: var(--zl-text); font-size: 22px; backdrop-filter: blur(6px); box-shadow: var(--zl-shadow-md); }
    .gdock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--zl-bg) 32%); max-width: 760px; margin: 0 auto; }
    .gdock .btn { flex: 1; }
    .waiting { text-align: center; color: var(--zl-text-muted); padding: 30px 20px; }

    /* sheet / modal */
    .scrim { position: fixed; inset: 0; background: rgba(2,2,5,.62); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .scrim.on { opacity: 1; pointer-events: auto; }
    .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--zl-surface-1); border-top: 1px solid var(--zl-line-strong);
      border-radius: 18px 18px 0 0; padding: 14px 18px calc(22px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
      max-width: 760px; margin: 0 auto; box-shadow: var(--zl-shadow-lg); max-height: 88vh; overflow-y: auto; }
    .sheet.on { transform: none; }
    .sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--zl-line-strong); margin: 2px auto 14px; }
    .sheet h3 { margin: 0; font-size: var(--zl-text-xl); }
    .sheet .who { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .sheet .who .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background-size: cover; background-position: center; }
    .actions4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .act { border: 1px solid var(--zl-line-strong); background: var(--zl-surface-2); color: var(--zl-text); border-radius: var(--zl-radius-lg);
      padding: 18px 12px; font-size: var(--zl-text-base); font-weight: 700; display: flex; flex-direction: column; gap: 7px; align-items: center; }
    .act .em { font-size: 28px; }
    .act.mise { background: var(--zl-accent-wash); border-color: var(--zl-accent); color: var(--zl-olive-bright); }
    .act:active { transform: scale(.96); }
    /* big, accessible motif / picker buttons */
    .biglist { display: grid; gap: 10px; margin: 6px 0 4px; }
    .bigbtn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1px solid var(--zl-line-strong);
      background: var(--zl-surface-2); color: var(--zl-text); border-radius: var(--zl-radius-lg); padding: 16px 18px; font-size: var(--zl-text-lg); font-weight: 700; }
    .bigbtn:active { transform: scale(.98); border-color: var(--zl-line-focus); }
    .bigbtn .em { font-size: 26px; width: 30px; text-align: center; }
    .bigbtn .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; background-size: cover; background-position: center; flex: 0 0 auto; }
    .bigbtn.none { color: var(--zl-text-muted); justify-content: center; }
    .pickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .pickgrid .bigbtn { font-size: var(--zl-text-base); padding: 12px; }
    .sheet .back { background: none; border: none; color: var(--zl-text-muted); font-size: var(--zl-text-sm); padding: 4px; margin-bottom: 6px; }

    /* toast / undo */
    .toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(-24px); top: calc(10px + env(safe-area-inset-top)); z-index: 30; opacity: 0;
      background: var(--zl-surface-3); border: 1px solid var(--zl-line-strong); color: var(--zl-text); border-radius: var(--zl-radius-pill); padding: 9px 9px 9px 16px;
      display: flex; align-items: center; gap: 12px; font-size: var(--zl-text-sm); font-weight: 600; box-shadow: var(--zl-shadow-lg); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 92vw; }
    .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .toast span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .toast button { border: none; background: var(--zl-accent); color: var(--zl-on-accent); border-radius: var(--zl-radius-pill); padding: 7px 14px; font-weight: 700; font-size: var(--zl-text-sm); flex: 0 0 auto; }

    /* feed / history */
    .feed { padding: 4px 2px 8px; }
    .fitem { display: flex; align-items: flex-start; gap: 10px; padding: 11px 6px; border-bottom: 1px solid var(--zl-line); }
    .fitem .ic { font-size: 18px; width: 24px; text-align: center; padding-top: 2px; }
    .fitem .tx { flex: 1; font-size: var(--zl-text-sm); }
    .fitem .tx .ttl { font-weight: 700; } .fitem.del .tx .ttl { text-decoration: line-through; color: var(--zl-text-muted); }
    .fitem .tx small { color: var(--zl-text-muted); display: block; margin-top: 2px; }
    .fitem .tx .cancel { color: var(--zl-warning); margin-top: 3px; font-weight: 600; }
    .fitem .x { border: none; background: var(--zl-surface-2); color: var(--zl-text-muted); padding: 7px 10px; border-radius: 8px; font-size: var(--zl-text-xs); font-weight: 700; flex: 0 0 auto; }
    .fitem .x.restore { background: var(--zl-accent-wash); color: var(--zl-olive-bright); }

    /* customize */
    .seg3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .tab { border: 1px solid var(--zl-line); background: var(--zl-surface-2); color: var(--zl-text-soft); border-radius: var(--zl-radius-md); padding: 10px; font-size: var(--zl-text-sm); font-weight: 600; }
    .tab.sel { border-color: var(--zl-accent-soft); background: var(--zl-accent-wash); color: var(--zl-olive-bright); }
    .preview-tile { width: 120px; height: 150px; border-radius: var(--zl-radius-lg); border: 1px solid var(--zl-line); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; background: var(--zl-surface-1); }
    .preview-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.6)); }
    .preview-tile .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; z-index: 1; background-size: cover; background-position: center; }
    .preview-tile .nm { z-index: 1; font-weight: 700; }
    .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
    .swatch { width: 38px; height: 38px; border-radius: 9px; border: 2px solid transparent; }
    .swatch.sel { border-color: #fff; }
    label.sub { display: block; font-size: var(--zl-text-xs); color: var(--zl-text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 6px; }

    /* RECAP / HISTORY */
    #recap, #history { padding: 20px 18px 40px; gap: 16px; }
    .rc-head { text-align: center; } .rc-head .em { font-size: 42px; } .rc-head h2 { margin: 6px 0 2px; font-size: var(--zl-text-3xl); font-weight: 800; }
    .podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 0; }
    .pod { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 120px; }
    .pod .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; background-size: cover; background-position: center; }
    .pod .bar { width: 100%; border-radius: 10px 10px 0 0; display: grid; place-items: start center; padding-top: 8px; font-weight: 800; font-size: 20px; color: var(--zl-on-accent); }
    .pod .nm { font-size: var(--zl-text-sm); font-weight: 700; } .pod .sc { font-size: var(--zl-text-xs); color: var(--zl-text-muted); }
    .sups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .sup { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-lg); padding: 14px; display: flex; gap: 12px; align-items: center; }
    .sup .em { font-size: 26px; }
    .sup .t { font-size: var(--zl-text-xs); color: var(--zl-text-muted); text-transform: uppercase; letter-spacing: .08em; }
    .sup .n { font-size: var(--zl-text-base); font-weight: 700; } .sup .v { font-size: var(--zl-text-xs); color: var(--zl-text-soft); }
    /* per-metric leaderboards */
    #rcBoards { display: grid; gap: 12px; }
    .board { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-lg); padding: 6px 12px 10px; }
    .board-h { display: flex; align-items: center; gap: 8px; font-size: var(--zl-text-sm); font-weight: 700; color: var(--zl-accent-soft); text-transform: uppercase; letter-spacing: .06em; padding: 10px 4px 8px; }
    .board-h .em { font-size: 18px; }
    .lrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--zl-radius-md); }
    .lrow.win { background: var(--zl-accent-wash); }
    .lrow .rk { width: 26px; text-align: center; font-size: var(--zl-text-base); font-weight: 800; flex: 0 0 auto; }
    .lrow .mini { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background-size: cover; background-position: center; flex: 0 0 auto; }
    .lrow .ln { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lrow .lv { font-weight: 800; font-size: var(--zl-text-lg); color: var(--zl-olive-bright); flex: 0 0 auto; }
    .totbar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .totbar .pill { font-size: var(--zl-text-sm); }
    h4.sec { margin: 4px 0; font-size: var(--zl-text-sm); color: var(--zl-text-muted); text-transform: uppercase; letter-spacing: .1em; }
    .hgame { width: 100%; text-align: left; background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-lg); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: transform .08s ease, border-color .15s; }
    .hgame:active { transform: scale(.985); border-color: var(--zl-line-focus); }
    .hgame .l .top { font-weight: 700; } .hgame .l .meta { font-size: var(--zl-text-xs); color: var(--zl-text-muted); margin-top: 2px; }
    .hgame .r { font-size: var(--zl-text-sm); color: var(--zl-text-soft); text-align: right; white-space: nowrap; }
    .hgame .r .ic { vertical-align: -0.2em; }
    .hgame .seemore { font-size: var(--zl-text-xs); color: var(--zl-accent-soft); font-weight: 600; margin-top: 5px; }
    /* tempo: time-based stats & charts */
    .tempo-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
    .tp { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-md); padding: 11px 4px; text-align: center; }
    .tp-v { font-weight: 800; font-size: var(--zl-text-lg); }
    .tp-k { font-size: 10px; color: var(--zl-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; line-height: 1.2; }
    .chart-card { background: var(--zl-surface-1); border: 1px solid var(--zl-line); border-radius: var(--zl-radius-lg); padding: 12px 14px; margin-bottom: 12px; }
    .chart-h { font-size: var(--zl-text-sm); font-weight: 700; color: var(--zl-text-soft); margin-bottom: 8px; }
    .chart { width: 100%; height: auto; display: block; }
    .chart .bar { fill: var(--zl-accent-soft); }
    .chart .grid { stroke: var(--zl-line); stroke-width: 1; }
    .chart .ax { fill: var(--zl-text-muted); font-size: 13px; font-family: var(--zl-font-mono); }
    .legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
    .legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--zl-text-xs); color: var(--zl-text-soft); font-weight: 600; }
    .legend .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }