/* ════════════════════════════════════════════════════════════════════════════ Vamos Draws — Coach Room, as an EMBEDDED FRAGMENT. Every rule is scoped under .coachroom so it can't clash with or leak into the host site's global CSS. No ///, no app/top bar — the shell provides those. ════════════════════════════════════════════════════════════════════════════ */ /* Local design tokens + tidy column cap (scoped) */ .coachroom{ --bg:#f3f6f5; --card:#fff; --ink:#13211d; --muted:#6a7b76; --line:#e6ecea; --brand:#0b8f6a; --brand-2:#10b981; --brand-deep:#076c50; --won:#16a34a; --lost:#e11d48; --warn:#d4a017; --soon:#0ea5e9; --r:16px; --sh:0 2px 10px rgba(16,40,34,.07); margin:0 auto;color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans Thai',Roboto,Arial,sans-serif;line-height:1.5} .coachroom *{box-sizing:border-box} .coachroom a{color:var(--brand-deep);text-decoration:none} .coachroom .plink{color:inherit;text-decoration:none;cursor:pointer} .coachroom .plink:hover{text-decoration:underline} /* Compact LIGHT profile header (replaces the old full-bleed green hero) */ .coachroom .phead{display:flex;gap:14px;align-items:center;background:var(--card); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:13px} .coachroom .phead .meta{min-width:0} .coachroom .phead .meta h1{font-size:21px;margin:0 0 3px;color:var(--ink)} .coachroom .phead .meta .sub{font-size:12.5px;color:var(--muted)} .coachroom .phead .meta .tagline{font-size:12px;font-weight:700;color:var(--brand-deep);margin-top:6px; display:inline-flex;align-items:center;gap:5px} .coachroom .phead .chips{margin-top:8px} /* Avatar with the brand-green frame + static glow — matches the live app */ .coachroom .gwn{position:relative;display:inline-flex;flex:0 0 auto;isolation:isolate} .coachroom .gwn .ava{position:relative;z-index:1;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 0 6px var(--brand-deep),0 0 14px 2px rgba(7,108,80,.5)} .coachroom .gwn::before{content:'';position:absolute;inset:-18px;z-index:0;border-radius:50%; background:radial-gradient(circle,rgba(11,143,106,.6),rgba(7,108,80,.32) 42%,rgba(7,108,80,0) 72%);filter:blur(7px)} /* Gold tier avatar frame + name (champions) — mirrors .gwn but gold + a soft pulse */ .coachroom .gw{position:relative;display:inline-flex;flex:0 0 auto;isolation:isolate} .coachroom .gw .ava{position:relative;z-index:1;box-shadow:0 0 0 3px #f3f6f5,0 0 0 6px #d4a017,0 0 14px 2px rgba(212,160,23,.55)} .coachroom .gw::before{content:'';position:absolute;inset:-18px;z-index:0;border-radius:50%;background:radial-gradient(circle,rgba(245,205,80,.85),rgba(212,160,23,.42) 42%,rgba(212,160,23,0) 72%);filter:blur(7px);animation:cr-goldpulse 2.8s ease-in-out infinite} @keyframes cr-goldpulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}} .coachroom .champ{background:linear-gradient(180deg,#f7e08a,#d4a017 60%,#9c7400);-webkit-background-clip:text;background-clip:text;color:transparent} .coachroom .medalist{background:linear-gradient(180deg,#3ddc97,#0b8f6a 55%,#076c50);-webkit-background-clip:text;background-clip:text;color:transparent} @media (prefers-reduced-motion:reduce){.coachroom .gw::before{animation:none}} .coachroom .ava{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#9cc7bb,#5fa691);color:#fff;font-weight:800;font-size:24px} /* фото лежит ПОВЕРХ инициалов, а не вместо них: не загрузилось — снимает себя, и под ним остаётся буква, а не дыра (см. _photoImg) */ .coachroom .ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .coachroom .ava.sm{width:38px;height:38px;font-size:15px;box-shadow:0 0 0 2px var(--line)} .coachroom .ava.xs{width:30px;height:30px;font-size:12px} /* Chips */ .coachroom .chips{display:flex;gap:7px;flex-wrap:wrap} .coachroom .chip{display:inline-flex;align-items:center;gap:5px;background:#eef5f2;color:var(--brand-deep);border:1px solid var(--line); border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700} /* Cards */ .coachroom .body{padding:0} .coachroom .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--sh);margin-bottom:13px} .coachroom .card h3{font-size:14.5px;font-weight:800;margin:0 0 11px;display:flex;align-items:center;gap:7px} .coachroom .card h3 .muted{font-weight:600;color:var(--muted);font-size:12px;margin-left:auto} /* Stat tiles */ .coachroom .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .coachroom .tile{background:#f6faf8;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center} .coachroom .tile b{display:block;font-size:21px;font-weight:800;line-height:1.1;color:var(--brand-deep)} .coachroom .tile small{font-size:10.5px;color:var(--muted);font-weight:600} .coachroom .tile.gold b{color:var(--warn)} .coachroom .tile.win b{color:var(--won)} .coachroom .tile.loss b{color:var(--lost)} /* Horizontal bars */ .coachroom .bar{height:9px;border-radius:99px;background:#e9efec;overflow:hidden} .coachroom .bar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))} .coachroom .bar .fill.gold{background:linear-gradient(90deg,#e8c25a,var(--warn))} .coachroom .bar .fill.loss{background:linear-gradient(90deg,#f0728e,var(--lost))} .coachroom .barrow{display:flex;align-items:center;gap:9px;margin:9px 0} .coachroom .barrow .lab{font-size:12px;font-weight:700;min-width:78px} .coachroom .barrow .val{font-size:12px;font-weight:800;color:var(--muted);min-width:34px;text-align:right} .coachroom .barrow .bar{flex:1} /* W/L pills & results */ .coachroom .wl{display:inline-flex;font-size:11px;font-weight:800;border-radius:6px;padding:2px 7px} .coachroom .wl.w{background:#e7f7ee;color:var(--won)} .coachroom .wl.l{background:#fdeaef;color:var(--lost)} .coachroom .dot-w{color:var(--won);font-weight:800} .coachroom .dot-l{color:var(--lost);font-weight:800} .coachroom .res{font-variant-numeric:tabular-nums} /* Timeline */ .coachroom .tl{position:relative;padding-left:20px} .coachroom .tl::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)} .coachroom .tl .ev{position:relative;margin-bottom:13px} .coachroom .tl .ev::before{content:'';position:absolute;left:-18px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 1px var(--line)} .coachroom .tl .ev.win::before{background:var(--won)} .coachroom .tl .ev.loss::before{background:var(--lost)} .coachroom .tl .ev.title::before{background:var(--warn)} .coachroom .tl .ev .d{font-size:11px;color:var(--muted)} .coachroom .tl .ev .h{font-size:13px;font-weight:700} /* Tables */ .coachroom .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .coachroom .tbl th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;padding:0 6px 7px} .coachroom .tbl td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle} .coachroom .tbl tr td:first-child{font-weight:700} /* Opponent row */ .coachroom .oprow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)} .coachroom .oprow:first-child{border-top:0} .coachroom .oprow .nm{font-weight:700;font-size:13px} .coachroom .oprow .meta{font-size:11px;color:var(--muted)} .coachroom .oprow .rec{margin-left:auto;text-align:right;font-weight:800;font-size:13px} /* Callout — why this helps */ .coachroom .note{background:#eaf6f1;border:1px solid #cde9df;border-left:3px solid var(--brand);border-radius:10px; padding:10px 12px;font-size:12px;color:#234;line-height:1.45;margin-top:4px} .coachroom .note b{color:var(--brand-deep)} /* Pills/sparkline helpers */ .coachroom .spark{display:block;width:100%;height:64px} .coachroom .tag{display:inline-block;font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;background:#eef5f2;color:var(--brand-deep)} .coachroom .tag.warn{background:#fdf4e0;color:#946a08} .coachroom .tag.hot{background:#fdeaef;color:var(--lost)} .coachroom .muted{color:var(--muted)} .coachroom .center{text-align:center} /* ── Coach Room one-off CSS ─────────────────────────────────────────────────── */ /* Tab bar — STATIC (de-stuck so it can never overlap the site header), scrolls horizontally on overflow */ .coachroom .tabbar{display:flex;gap:2px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none; background:var(--card);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--sh);padding:0 6px;margin-bottom:13px} .coachroom .tabbar::-webkit-scrollbar{display:none} .coachroom .tabbar .tab{flex:0 0 auto;white-space:nowrap;border:0;background:none;cursor:pointer; font-family:inherit;font-size:12.5px;font-weight:800;color:var(--muted); padding:13px 12px 11px;position:relative;transition:color .18s ease} .coachroom .tabbar .tab .ic{margin-right:5px} .coachroom .tabbar .tab::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:3px; border-radius:3px 3px 0 0;background:transparent;transition:background .18s ease} .coachroom .tabbar .tab.active{color:var(--brand-deep)} .coachroom .tabbar .tab.active::after{background:linear-gradient(90deg,var(--brand),var(--brand-2))} .coachroom .tabbar .tab:active{color:var(--brand)} /* Panels — only the active one shows, with a crisp fade-in */ .coachroom .panel{display:none;animation:cr-fadeIn .22s ease} .coachroom .panel.active{display:block} @keyframes cr-fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Sequential Prev / Next nav at the bottom of every panel */ .coachroom .flip{display:flex;gap:9px;margin:4px 0 18px} .coachroom .flip button{flex:1;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer; border:1px solid var(--line);background:var(--card);color:var(--brand-deep); border-radius:12px;padding:11px 12px;box-shadow:var(--sh); display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s ease,background .15s ease} .coachroom .flip button:active{transform:scale(.97)} .coachroom .flip button:hover{background:#f0faf5} .coachroom .flip button .lbl{opacity:.65;font-weight:700;font-size:11px} .coachroom .flip button.next{flex-direction:row-reverse} .coachroom .flip button[disabled]{opacity:.4;pointer-events:none} /* ── Per-variant one-off styles, namespaced into their panels ───────────── */ /* Overview (v10) */ .coachroom .sec{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted); display:flex;align-items:center;gap:6px;margin:15px 0 8px} .coachroom .sec:first-child{margin-top:0} .coachroom .sec .r{margin-left:auto;font-weight:700;letter-spacing:0;text-transform:none;font-size:11px;color:var(--muted)} .coachroom .sec .r b{color:var(--brand-deep)} .coachroom .hr{border:0;border-top:1px solid var(--line);margin:14px 0} .coachroom .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .coachroom .strip .tile{padding:8px 4px} .coachroom .strip .tile b{font-size:18px} .coachroom .strip .tile small{font-size:9px} .coachroom .sparkwrap{display:flex;align-items:flex-end;gap:10px} .coachroom .sparkwrap .now{flex:0 0 auto;text-align:right} .coachroom .sparkwrap .now b{display:block;font-size:24px;font-weight:800;color:var(--brand-deep);line-height:1} .coachroom .sparkwrap .now small{font-size:10px;color:var(--muted);font-weight:700} .coachroom .sparkwrap .now .up{color:var(--won);font-weight:800} .coachroom .sparkwrap svg{flex:1;display:block} .coachroom .funnel{display:flex;align-items:stretch;gap:3px} .coachroom .funnel .fseg{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:7px 2px;border-radius:8px;color:#fff;text-align:center;position:relative} .coachroom .funnel .fseg b{font-size:16px;font-weight:800;line-height:1} .coachroom .funnel .fseg small{font-size:8.5px;font-weight:700;opacity:.95;margin-top:2px;line-height:1.1} .coachroom .funnel .fseg .pc{font-size:8px;opacity:.85;font-weight:700} .coachroom .funnel .arrow{flex:0 0 auto;align-self:center;color:var(--muted);font-size:11px;font-weight:800} .coachroom .formrow{display:flex;gap:5px;align-items:center} .coachroom .formrow .fsq{flex:1;aspect-ratio:1;max-width:34px;border-radius:7px;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;color:#fff;position:relative} .coachroom .formrow .fsq.w{background:linear-gradient(135deg,var(--brand),var(--brand-2))} .coachroom .formrow .fsq.l{background:linear-gradient(135deg,#f0728e,var(--lost))} .coachroom .formrow .fsq .dt{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:8px;color:var(--muted);font-weight:700} .coachroom .formlegend{margin-top:18px;font-size:11px;color:var(--muted);font-weight:600;display:flex;gap:12px} .coachroom .oprow.tight{padding:7px 0} .coachroom .oprow.tight .ava{box-shadow:0 0 0 2px var(--line)} .coachroom .oprow.tight .nm{font-size:12.5px} .coachroom .oprow.tight .meta{font-size:10.5px} .coachroom .oprow.tight .rec{font-size:12px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15} .coachroom .oprow.tight .rec .h2h{font-size:14px} .coachroom .oprow.tight .rec .h2h.lead{color:var(--won)} .coachroom .oprow.tight .rec .h2h.trail{color:var(--lost)} .coachroom .oprow.tight .rec small{font-size:9px;color:var(--muted);font-weight:700} .coachroom .nextline{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#eef8f3,#e3f3ec); border:1px solid #cfe9df;border-radius:11px;padding:9px 11px} .coachroom .nextline .ava{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brand)} .coachroom .nextline .nx{min-width:0;flex:1} .coachroom .nextline .nx .t{font-size:12.5px;font-weight:800;line-height:1.2} .coachroom .nextline .nx .s{font-size:10.5px;color:#3a564d;font-weight:600;margin-top:1px} .coachroom .nextline .h2htag{flex:0 0 auto;text-align:center;background:#fff;border:1px solid #cfe9df;border-radius:9px;padding:5px 9px} .coachroom .nextline .h2htag b{display:block;font-size:15px;font-weight:800;line-height:1} .coachroom .nextline .h2htag b.trail{color:var(--lost)} .coachroom .nextline .h2htag b.lead{color:var(--won)} .coachroom .nextline .h2htag small{font-size:8px;color:var(--muted);font-weight:800;letter-spacing:.3px} .coachroom .barrow.thin{margin:7px 0} .coachroom .barrow.thin .lab{min-width:62px;font-size:11.5px;display:flex;align-items:center;gap:5px} .coachroom .barrow.thin .bar{height:7px} .coachroom .barrow.thin .val{min-width:64px;font-size:11px} .coachroom .barrow.thin .val .wl{font-size:9px;padding:1px 4px;margin-left:3px} /* Ladder (v9) */ .coachroom .card.climb{border-top:4px solid var(--brand);background:linear-gradient(135deg,#f0faf5,#e6f5ee)} .coachroom .climb-head{display:flex;align-items:center;gap:12px} .coachroom .climb-head .from,.coachroom .climb-head .to{flex:0 0 auto;text-align:center} .coachroom .climb-head .rk{font-size:30px;font-weight:800;line-height:1;color:var(--brand-deep);font-variant-numeric:tabular-nums} .coachroom .climb-head .rk.dim{color:var(--muted);font-size:24px} .coachroom .climb-head .lab{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--muted);margin-top:3px} .coachroom .climb-head .arrow{flex:1;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:22px;font-weight:800;position:relative} .coachroom .climb-head .arrow .gap{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800; color:var(--brand-deep);background:#fff;border:1px solid #cde9df;border-radius:999px;padding:1px 8px;white-space:nowrap} .coachroom .climb-task{margin-top:13px;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #cde9df;border-radius:12px;padding:11px 12px} .coachroom .climb-task .ava{box-shadow:0 0 0 2px #fdeaef,0 0 0 3px var(--lost)} .coachroom .climb-task .who{min-width:0} .coachroom .climb-task .who .nm{font-size:14px;font-weight:800;line-height:1.15} .coachroom .climb-task .who .sub{font-size:11.5px;color:#56655f;margin-top:2px} .coachroom .climb-task .h2hpill{margin-left:auto;flex:0 0 auto;text-align:center} .coachroom .climb-task .h2hpill .n{font-size:17px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--lost)} .coachroom .climb-task .h2hpill .t{font-size:9px;text-transform:uppercase;letter-spacing:.4px;font-weight:800;color:var(--muted);margin-top:2px} .coachroom .ladder{display:flex;flex-direction:column;gap:6px} .coachroom .lrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;position:relative} .coachroom .lrow .rk{flex:0 0 auto;width:30px;text-align:center;font-size:14px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums} .coachroom .lrow .who{min-width:0;flex:1} .coachroom .lrow .who .nm{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .coachroom .lrow .who .rt{font-size:11px;color:var(--muted);font-weight:700;margin-top:1px} .coachroom .lrow .h2h{flex:0 0 auto;font-size:11px;font-weight:800;border-radius:7px;padding:3px 8px;min-width:62px;text-align:center;font-variant-numeric:tabular-nums} .coachroom .lrow .h2h.win{background:#e7f7ee;color:var(--won)} .coachroom .lrow .h2h.loss{background:#fdeaef;color:var(--lost)} .coachroom .lrow .h2h.none{background:#f4f6f5;color:var(--muted)} .coachroom .lrow .ind{flex:0 0 auto;width:20px;text-align:center;font-size:14px;line-height:1} .coachroom .lrow .ind.up{color:var(--brand)} .coachroom .lrow .ind.hold{color:var(--muted)} .coachroom .lrow.me{background:linear-gradient(135deg,var(--brand-deep),var(--brand) 70%);border-color:var(--brand-deep); box-shadow:0 4px 14px rgba(7,108,80,.32);padding:11px 10px} .coachroom .lrow.me .rk{color:#fff} .coachroom .lrow.me .who .nm{color:#fff;font-weight:800;display:flex;align-items:center;gap:7px} .coachroom .lrow.me .who .rt{color:rgba(255,255,255,.85)} .coachroom .lrow.me .you{font-size:9.5px;font-weight:800;letter-spacing:.5px;background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:1px 7px} .coachroom .lrow.me .ava{box-shadow:0 0 0 2px rgba(255,255,255,.5)} .coachroom .lrow.me .ind{color:rgba(255,255,255,.9)} .coachroom .lzone{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted); margin:7px 2px 1px;display:flex;align-items:center;gap:7px} .coachroom .lzone::after{content:'';flex:1;height:1px;background:var(--line)} .coachroom .defend{margin-top:13px;display:flex;align-items:flex-start;gap:9px;background:#fdf7f8;border:1px solid #f3d6dd;border-radius:10px;padding:10px 12px} .coachroom .defend .ic{font-size:15px;line-height:1.2} .coachroom .defend .txt{font-size:12px;color:#3a2a2e;line-height:1.45} .coachroom .defend .txt b{color:var(--lost)} /* Goals (v8) */ .coachroom .regalia .tile{position:relative;overflow:hidden} .coachroom .regalia .tile .ico{font-size:17px;line-height:1;margin-bottom:3px;display:block} .coachroom .goal{display:flex;align-items:flex-start;gap:11px;padding:13px 0;border-top:1px solid var(--line)} .coachroom .goal:first-of-type{border-top:0} .coachroom .goal.near{background:linear-gradient(135deg,#fff7f9,#fffefe);border-radius:12px;border-top:0; margin:6px -7px;padding:13px 9px;box-shadow:0 0 0 1px #fbdfe7} .coachroom .goal .gico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-size:19px;background:#eef5f2;border:1px solid var(--line)} .coachroom .goal.near .gico{background:#fdeaef;border-color:#fbcdd9} .coachroom .goal .gmain{flex:1;min-width:0} .coachroom .goal .gtop{display:flex;align-items:baseline;gap:8px;margin-bottom:7px} .coachroom .goal .glab{font-size:13.5px;font-weight:800} .coachroom .goal .gcount{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto} .coachroom .goal .gcount b{color:var(--brand-deep)} .coachroom .goal.near .gcount b{color:var(--lost)} .coachroom .goal .gfoot{display:flex;align-items:center;justify-content:flex-end;margin-top:7px} .coachroom .peer{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)} .coachroom .peer:first-of-type{border-top:0} .coachroom .peer .pmain{flex:1;min-width:0} .coachroom .peer .pname{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:7px} .coachroom .peer .pmeta{font-size:11.5px;color:var(--muted);margin-top:2px} .coachroom .peer .pgap{margin-left:auto;text-align:right;flex:0 0 auto} .coachroom .peer .pgap b{font-size:16px;font-weight:800;color:var(--brand-deep);line-height:1} .coachroom .peer .pgap small{font-size:10px;color:var(--muted);font-weight:700;display:block;margin-top:1px} .coachroom .peer .ava.sm{box-shadow:0 0 0 2px #e8d9a6} .coachroom .goalintro{font-size:11.5px;color:var(--muted);margin:-2px 0 6px} /* Strengths (v7) */ .coachroom .fmtrow{display:flex;align-items:center;gap:9px;margin:13px 0 4px} .coachroom .fmtrow .lab{font-size:13px;font-weight:800;min-width:78px;display:flex;align-items:center;gap:6px} .coachroom .fmtrow .bar{flex:1} .coachroom .fmtrow .val{font-size:13px;font-weight:800;color:var(--brand-deep);min-width:42px;text-align:right} .coachroom .fmtsub{font-size:11px;color:var(--muted);font-weight:600;margin:0 0 4px 87px} .coachroom .fmtsub .wl{margin-right:6px} /* match depth (matches · sets · games) — filter chips re-sum a grid that ships INSIDE the payload, so switching format/age costs no request (the room is one cached SSR document). */ .coachroom .dfil{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 10px} .coachroom .dfil button{border:1px solid var(--line);background:#fff;color:var(--brand-deep);font:inherit; font-weight:700;font-size:12px;padding:5px 11px;border-radius:99px;cursor:pointer} .coachroom .dfil button.on{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)} .coachroom .fmtrow.empty .val,.coachroom .fmtrow.empty .lab{color:var(--muted)} .coachroom .deltacard{display:flex;align-items:center;gap:14px} .coachroom .deltacard .dnum{font-size:30px;font-weight:800;color:var(--brand-deep);line-height:1} .coachroom .deltacard .dnum small{font-size:13px;font-weight:700;color:var(--muted)} .coachroom .deltacard .dlab{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px} .coachroom .svs{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto} .coachroom .svs .pill{display:flex;flex-direction:column;align-items:center;background:#f6faf8;border:1px solid var(--line); border-radius:11px;padding:7px 11px;min-width:66px} .coachroom .svs .pill b{font-size:18px;font-weight:800;line-height:1} .coachroom .svs .pill.dbl b{color:var(--won)} .coachroom .svs .pill.sgl b{color:var(--brand-deep)} .coachroom .svs .pill small{font-size:9.5px;color:var(--muted);font-weight:700;letter-spacing:.3px;margin-top:2px} .coachroom .svs .gt{font-size:15px;font-weight:800;color:var(--muted)} .coachroom .oprow .pwn{position:relative;flex:0 0 auto} .coachroom .ttl{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:13px;color:var(--warn)} .coachroom .togbar{height:6px;border-radius:99px;background:#e9efec;overflow:hidden;margin-top:5px;max-width:150px} .coachroom .togbar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2))} /* Benchmark (v6) */ .coachroom .bvs{display:flex;align-items:center;gap:12px;margin-top:4px} .coachroom .bvs .side{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto} .coachroom .bvs .side .who{font-size:11.5px;font-weight:800;line-height:1.1;text-align:center;max-width:90px} .coachroom .bvs .side .tag{font-weight:700} .coachroom .bvs .mid{flex:1;text-align:center} .coachroom .bvs .mid .vsx{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:1px} .coachroom .bvs .mid .h2h{margin-top:5px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} .coachroom .bvs .mid .h2h .l{color:var(--lost)} .coachroom .bvs .mid .h2h small{display:block;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.3px;margin-top:1px} .coachroom .ava.riv{background:linear-gradient(135deg,#c9b78f,#a78a55)} .coachroom .bench{margin-top:2px} .coachroom .bench th, .coachroom .bench td{text-align:center} .coachroom .bench th:first-child, .coachroom .bench td:first-child{text-align:left} .coachroom .bench td:first-child{font-weight:700;font-size:12.5px} .coachroom .bench .num{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px} .coachroom .bench td.you{color:var(--brand-deep)} .coachroom .bench td.them{color:#8a6d2e} .coachroom .bench .edge{font-weight:900;font-size:15px} .coachroom .bench .edge.me{color:var(--won)} .coachroom .bench .edge.eq{color:var(--muted);font-weight:800;font-size:13px} .coachroom .bench tr.tot td{border-top:2px solid var(--ink);padding-top:10px;font-size:13.5px} .coachroom .bench tr.tot td:first-child{font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.4px;color:var(--ink)} .coachroom .bench tr.tot .num{font-size:14px} .coachroom .bench .pct{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-top:1px} .coachroom .bench thead .you-h{color:var(--brand-deep)} .coachroom .bench thead .them-h{color:#8a6d2e} .coachroom .legend{display:flex;gap:14px;font-size:11px;color:var(--muted);margin-top:11px;flex-wrap:wrap;align-items:center} .coachroom .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:4px} .coachroom .legend .g{background:var(--won)} .coachroom .legend .e{background:var(--muted)} .coachroom .verdict{background:linear-gradient(135deg,#fff,#f3faf7);border-color:#cde9df} .coachroom .verdict .scoreline{display:flex;align-items:stretch;gap:0;margin:6px 0 12px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .coachroom .verdict .scoreline .cell{flex:1;text-align:center;padding:11px 6px;background:#f6faf8} .coachroom .verdict .scoreline .cell+.cell{border-left:1px solid var(--line)} .coachroom .verdict .scoreline .cell .lab{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px} .coachroom .verdict .scoreline .cell .rec{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:3px} .coachroom .verdict .scoreline .cell .pct{font-size:12px;font-weight:800;margin-top:1px} .coachroom .verdict .scoreline .cell.me .rec, .coachroom .verdict .scoreline .cell.me .pct{color:var(--brand-deep)} .coachroom .verdict .scoreline .cell.riv .rec, .coachroom .verdict .scoreline .cell.riv .pct{color:#8a6d2e} .coachroom .verdict .verdict-line{font-size:14px;font-weight:800;line-height:1.4} .coachroom .verdict .verdict-line .em{color:var(--brand-deep)} .coachroom .verdict .verdict-sub{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45} .coachroom .directline{font-size:11.5px;color:var(--muted);margin:11px 0 0;text-align:center;border-top:1px dashed var(--line);padding-top:9px} .coachroom .directline b{color:var(--lost)} /* Empty state */ .coachroom .empty{margin:40px 18px;text-align:center;color:var(--muted)} .coachroom .empty .ic{font-size:38px;line-height:1;margin-bottom:12px} .coachroom .empty .t{font-size:15px;font-weight:800;color:var(--ink)} .coachroom .empty .s{font-size:12.5px;margin-top:6px} /* ════════════════════════════════════════════════════════════════════════════ ⚔️ COMPARE — you vs the field vs up to 3 hand-picked players. Two blocks: a multi-line rating chart (shared TIME axis — series of different length are otherwise not comparable) and a metric matrix where every metric is one track with a bar per participant + a dashed tick at the group median. ════════════════════════════════════════════════════════════════════════════ */ .coachroom .cmpbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px} .coachroom .cmpchip{display:inline-flex;align-items:center;gap:6px;background:#eef5f2;border:1px solid var(--line); border-radius:999px;padding:5px 10px 5px 8px;font-size:12px;font-weight:700;max-width:100%} .coachroom .cmpchip .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .coachroom .cmpchip .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px} .coachroom .cmpchip .gr{color:var(--muted);font-weight:600;font-size:11px} .coachroom .cmpchip .x{cursor:pointer;color:var(--muted);font-weight:900;font-size:14px;line-height:1;padding:0 1px} .coachroom .cmpchip .x:hover{color:var(--lost)} .coachroom .cmpchip.busy{opacity:.55} .coachroom .cmpadd{display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:#fff;border:0; border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit} .coachroom .cmpadd[disabled]{background:#c3d4ce;color:#fff;cursor:default} .coachroom .cmpsearch{margin:0 0 12px} .coachroom .cmpsearch input{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:14px; font-family:inherit;background:var(--card);color:var(--ink);outline:0} .coachroom .cmpsearch input:focus{border-color:var(--brand)} .coachroom .cmpres{margin-top:7px;max-height:232px;overflow:auto;-webkit-overflow-scrolling:touch} .coachroom .cmpres .hit{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;cursor:pointer} .coachroom .cmpres .hit:hover{background:#eef5f2} .coachroom .cmpres .hit .nm{font-size:13px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coachroom .cmpres .hit .sub{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap} .coachroom .cmpres .none{padding:9px;font-size:12.5px;color:var(--muted)} /* chart */ .coachroom .cmpchart svg{display:block;width:100%;height:auto} .coachroom .cmpchart .gl{stroke:var(--line);stroke-width:1} .coachroom .cmpchart .ax{fill:var(--muted);font-size:8px;font-weight:700} .coachroom .cmpchart .refl{stroke-width:1.4;stroke-dasharray:5 4;fill:none;opacity:.85} .coachroom .cmpchart .ln{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round} .coachroom .cmpchart .pt{stroke:var(--card);stroke-width:1.2} .coachroom .cmplegend{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:9px} .coachroom .cmplegend .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700} .coachroom .cmplegend .lg .dot{width:10px;height:3px;border-radius:2px} .coachroom .cmplegend .lg .dot.dash{background:none!important;border-top:3px dashed var(--muted)} .coachroom .cmplegend .lg small{color:var(--muted);font-weight:600} @media (prefers-reduced-motion:no-preference){ .coachroom .cmpchart .ln{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:cr-draw .9s ease-out forwards} @keyframes cr-draw{to{stroke-dashoffset:0}} } /* metric matrix */ .coachroom .mrow{margin-bottom:13px} .coachroom .mrow:last-of-type{margin-bottom:2px} .coachroom .mhead{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:800;margin-bottom:5px} .coachroom .mhead .mmed{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap} .coachroom .mbar{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:8px;margin-bottom:4px} .coachroom .mbar .who{font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coachroom .mbar .track{position:relative;height:15px;border-radius:8px;background:#eef2f0;overflow:hidden} .coachroom .mbar .track i{position:absolute;inset:0 auto 0 0;border-radius:8px;display:block; transition:width .5s cubic-bezier(.22,1,.36,1)} .coachroom .mbar .track .tick{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px dashed var(--muted);opacity:.7} .coachroom .mbar .end{display:flex;align-items:baseline;gap:5px;min-width:78px;justify-content:flex-end} .coachroom .mbar .val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums} .coachroom .mbar.lead .val{color:var(--brand-deep)} .coachroom .mbar .pc{font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap} @media (prefers-reduced-motion:reduce){.coachroom .mbar .track i{transition:none}} @media (max-width:360px){ .coachroom .mbar{grid-template-columns:56px 1fr auto} .coachroom .mbar .end{min-width:64px} .coachroom .mbar .pc{display:none} } /* head-to-head strip */ .coachroom .h2hrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px} .coachroom .h2hrow:first-of-type{border-top:0} .coachroom .h2hrow .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto} .coachroom .h2hrow .nm{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .coachroom .h2hrow .rec{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap} .coachroom .h2hrow .rec.w{color:var(--won)} .coachroom .h2hrow .rec.l{color:var(--lost)} .coachroom .h2hrow .last{font-size:11px;color:var(--muted);white-space:nowrap} /* ── DARK THEME (night mode) ───────────────────────────────────────────────── The room shipped only its scoped LIGHT tokens (--card:#fff …) with NO dark variant, so in night mode every card rendered white (bug). Re-map the tokens for html[data-theme=dark] (site palette #17211d/#e7efea) + darken the handful of light fills that hardcode their own background instead of using a token. */ html[data-theme=dark] .coachroom{ --bg:#0e1714; --card:#17211d; --ink:#e7efea; --muted:#93a89f; --line:#27332e; --brand:#2bbd8a; --brand-2:#4ed6a4; --brand-deep:#3ecf9a; } html[data-theme=dark] .coachroom .chip, html[data-theme=dark] .coachroom .tag, html[data-theme=dark] .coachroom .goal .gico{background:#1d2a24;color:var(--brand-deep)} html[data-theme=dark] .coachroom .tile, html[data-theme=dark] .coachroom .strip .tile, html[data-theme=dark] .coachroom .svs .pill, html[data-theme=dark] .coachroom .lrow, html[data-theme=dark] .coachroom .climb-task, html[data-theme=dark] .coachroom .climb-head .arrow .gap, html[data-theme=dark] .coachroom .nextline .h2htag, html[data-theme=dark] .coachroom .verdict .scoreline .cell{background:#1d2a24;border-color:var(--line)} html[data-theme=dark] .coachroom .bar, html[data-theme=dark] .coachroom .togbar{background:#243029} html[data-theme=dark] .coachroom .dfil button{background:#1d2a24;border-color:var(--line);color:var(--brand-deep)} html[data-theme=dark] .coachroom .dfil button.on{background:var(--brand-deep);color:#0e1714} html[data-theme=dark] .coachroom .lrow .h2h.none{background:#243029;color:var(--muted)} html[data-theme=dark] .coachroom .tl .ev::before{border-color:var(--card)} html[data-theme=dark] .coachroom .climb-task .who .sub{color:var(--muted)} html[data-theme=dark] .coachroom .note{background:#14231d;border-color:#25443a;border-left-color:var(--brand);color:#cfe3db} html[data-theme=dark] .coachroom .note b{color:var(--brand-deep)} html[data-theme=dark] .coachroom .nextline{background:linear-gradient(135deg,#16241d,#14201b);border-color:#25443a} html[data-theme=dark] .coachroom .nextline .nx .s{color:#a7c2b8} html[data-theme=dark] .coachroom .card.climb{background:linear-gradient(135deg,#16241b,#14201a)} html[data-theme=dark] .coachroom .verdict{background:linear-gradient(135deg,#17211d,#14201b);border-color:#25443a} html[data-theme=dark] .coachroom .goal.near{background:linear-gradient(135deg,#241a1e,#1a1416);box-shadow:0 0 0 1px #45262f} html[data-theme=dark] .coachroom .goal.near .gico{background:#341d25;border-color:#4e2c36} html[data-theme=dark] .coachroom .defend{background:#241a1d;border-color:#45262f} html[data-theme=dark] .coachroom .defend .txt{color:#e8cdd4} html[data-theme=dark] .coachroom .flip button:hover{background:#1d2a24} html[data-theme=dark] .coachroom .wl.w, html[data-theme=dark] .coachroom .lrow .h2h.win{background:#123222} html[data-theme=dark] .coachroom .wl.l, html[data-theme=dark] .coachroom .lrow .h2h.loss{background:#301722} html[data-theme=dark] .coachroom .cmpchip{background:#1d2a24} html[data-theme=dark] .coachroom .cmpres .hit:hover{background:#1d2a24} html[data-theme=dark] .coachroom .mbar .track{background:#243029} html[data-theme=dark] .coachroom .cmpadd[disabled]{background:#2c3a34;color:#7d908a}