:root{
  --bg:#F5EEDD;
  --card:#FFFBF0;
  --navy:#13393B;
  --orange:#E3122C;
  --gold:#008E8C;
  --muted:#A8977F;
  --line:#D5C6B0;
  --teal:#009C9A;
  --green:#2F7E50;
  --red:#B5382A;
  --neutral:#D9CDBA;
  --serif:"Zilla Slab",Georgia,serif;
  --sans:"Work Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--navy);font-family:var(--sans);-webkit-font-smoothing:antialiased;padding-bottom:520px}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* 1200px frame, content column 880px left-aligned inside it (matches reference) */
.wrap{width:min(1200px,100%);margin:0 auto}
.wrap>*{max-width:880px}
@media (max-width:1232px){.wrap{padding:0 16px}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:16px;padding:30px 0 0;height:86px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.logo img{display:block;width:46px;height:46px}
.wordmark{display:flex;flex-direction:column;line-height:.92}
.wordmark b{font:700 19px var(--serif);letter-spacing:.06em;color:var(--orange)}
.wordmark i{font:700 8.5px var(--mono);font-style:normal;letter-spacing:.32em;color:var(--navy)}
.search{display:flex;gap:8px;margin-left:40px}
.search-box{display:flex;align-items:center;gap:8px;width:304px;height:34px;padding:0 10px;background:var(--card);border:1.5px solid var(--navy);box-shadow:2px 2px 0 var(--orange);color:var(--muted)}
.search-box input{border:0;background:none;outline:none;flex:1;font:400 10.5px/1 var(--mono);color:var(--navy);letter-spacing:.02em}
.search-box input::placeholder{color:var(--muted)}
.refresh{width:32px;height:34px;display:grid;place-items:center;background:var(--orange);color:#fff;border:1.5px solid #A80D20;box-shadow:2px 2px 0 var(--navy)}
.tabs{display:flex;margin-left:auto;border:1.5px solid var(--navy);box-shadow:2px 2px 0 var(--orange)}
.tabs a{display:flex;align-items:center;padding:0 14px;height:29px;line-height:1;font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;background:var(--card);border-left:1.5px solid var(--navy)}
.tabs a:first-child{border-left:0}
.tabs a.active{background:var(--navy);color:#fff}
.tabs a:hover:not(.active){background:#F1E8D3}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:20px}
.watermark{position:absolute;right:0;top:4px;font:900 210px/1 "Noto Sans SC",sans-serif;color:#EBE0C9;pointer-events:none;user-select:none;z-index:0}
.hero h1{position:relative;font:300 74px/1 var(--serif);letter-spacing:-.025em;color:var(--navy);margin-top:-2px}
.lede{position:relative;max-width:500px;margin-top:16px;font:500 18.5px/1.17 var(--sans);color:#3D5859}
.lede b{font-weight:700;color:var(--navy)}
.controls{position:relative;display:flex;align-items:center;gap:10px;margin-top:18px}
.ctl-label{font:400 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;width:386px;height:32px;padding:0 30px 0 10px;background:var(--card);border:1.5px solid var(--navy);box-shadow:2px 2px 0 var(--orange);font:400 10.5px var(--mono);color:var(--navy);cursor:pointer}
.select::after{content:"";position:absolute;right:12px;top:11px;width:6px;height:6px;border:solid var(--navy);border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.seg{display:flex;border:1.5px solid var(--navy);box-shadow:2px 2px 0 var(--navy);margin-left:-2px}
.seg button{height:29px;padding:0 11px;font:700 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--card);border-left:1.5px solid var(--navy)}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--orange);color:#fff}
.share{margin-left:auto;height:27px;padding:0 12px;border:1px solid #C3B39C;font:400 9.5px var(--mono);color:var(--muted);letter-spacing:.03em;display:flex;align-items:center;gap:5px}
.rule-thick{border:0;height:5px;background:var(--navy);margin-top:16px}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--navy);box-shadow:5px 5px 0 var(--navy)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 13px;margin-top:28px}
.stat{position:relative;height:106px;padding:12px 14px 0}
.stat .k{position:absolute;right:14px;top:12px;font:400 9px var(--mono);color:#CBBBA3}
.lbl{font:400 9px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.num{margin-top:8px;font:600 34px/1 var(--serif);color:var(--navy);letter-spacing:-.01em}
.num small{font:400 9px var(--mono);letter-spacing:.08em;color:var(--muted);margin-left:4px}
.num.gold{color:var(--gold)}
.num.orange{color:var(--orange)}
.sub{margin-top:10px;font:400 10px var(--sans);color:#9B2F3E}
.sub.dark{color:#4C6566}
.sub b{color:var(--navy);font-weight:700}

/* ---------- section titles ---------- */
.section{margin-top:44px}
.h-serif{font:300 33px/1 var(--serif);color:var(--navy);padding-bottom:6px;border-bottom:3px solid var(--navy)}
.kicker{margin-top:9px;font:400 8.5px var(--mono);letter-spacing:.09em;color:var(--muted)}
.kicker .o{color:var(--orange);font-weight:700}
.h-sans{font:800 17px/1 var(--sans);letter-spacing:.06em;color:var(--navy);padding-bottom:7px;border-bottom:3px solid var(--orange)}

/* ---------- podium ---------- */
.podium{display:grid;grid-template-columns:1fr 322px;gap:12px;margin-top:16px}
.leader{position:relative;background:var(--card);border:1.5px solid var(--orange);box-shadow:5px 5px 0 var(--orange);padding:18px 0 0}
.badge-leader{display:inline-block;margin-left:19px;background:var(--orange);color:#fff;font:700 8.5px var(--mono);letter-spacing:.12em;padding:4px 10px}
.leader-row{display:flex;align-items:center;gap:14px;padding:16px 0 0 19px}
.big-rank{font:700 46px/1 var(--serif);color:var(--orange);width:24px}
.leader-name{display:flex;align-items:center;gap:10px;font:700 35px/1 var(--serif);color:var(--navy);letter-spacing:.005em}
.leader-sub{margin-top:13px;font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--muted)}
.leader-miles{margin:22px 0 0 112px;font:700 47px/1 var(--serif);color:var(--orange);letter-spacing:-.01em}
.leader-miles-lbl{margin:6px 0 0 112px;font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--muted)}
.leader-foot{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid var(--line)}
.leader-foot div{text-align:center;padding:12px 0 10px;border-left:1px solid var(--line)}
.leader-foot div:first-child{border-left:0}
.leader-foot b{display:block;font:700 16px/1 var(--serif)}
.leader-foot b.sm{font-size:15px}
.leader-foot span{display:block;margin-top:6px;font:400 8.5px var(--mono);letter-spacing:.12em;color:var(--muted)}
.navy{color:var(--navy)}.gold{color:var(--gold)}.orange{color:var(--orange)}
.runners{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.runner{display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;background:var(--card);border:1px solid var(--navy);box-shadow:5px 5px 0 var(--navy)}
.r-rank{font:700 22px var(--serif);color:var(--muted)}
.r-name{display:flex;align-items:center;gap:8px;font:700 14px var(--serif)}
.r-sub{margin-top:5px;font:400 8.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.r-miles{margin-left:auto;font:700 21px var(--serif);color:var(--orange)}

/* ---------- tiles & icons ---------- */
.tile{display:inline-grid;place-items:center;flex:none;width:17px;height:21px;border:1.2px solid var(--navy);border-radius:3px;background:var(--card)}
.tile svg{display:block}
.tile[data-t="wan"],.tile[data-t="dots"]{border-color:#9B8F7E}
.tile-lg{width:42px;height:52px;border-width:1.5px;border-radius:6px}
.runner .tile{width:28px;height:36px;border-radius:4px}
.ico{display:inline-flex;align-items:center;gap:4px}
.ico svg{display:block}

/* ---------- table ---------- */
.bar-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:6px;border-bottom:3px solid var(--orange)}
.bar-head h3{font:800 17px/1 var(--sans);letter-spacing:.06em}
.follow{display:flex;align-items:center;gap:6px;padding:5px 9px;margin-bottom:-12px;background:var(--card);border:1px solid var(--navy);box-shadow:2px 2px 0 var(--navy);font:700 8.5px var(--mono);letter-spacing:.1em}
.follow i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.table-card{margin-top:14px;background:var(--card);border:1px solid var(--navy);box-shadow:5px 5px 0 var(--orange)}
.table-meta{display:flex;justify-content:space-between;padding:7px 8px 8px;font:400 8.5px var(--mono);letter-spacing:.06em;color:var(--navy)}
.table-meta .muted{color:var(--muted)}
table.rank{width:100%;border-collapse:collapse}
.rank thead th{background:var(--navy);color:#fff;font:700 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;height:30px;padding:0 8px}
.rank th.l{text-align:left;padding-left:12px}
.rank th.r,.rank td.r{text-align:right}
.rank th:first-child{width:34px}
.rank td{height:39.7px;border-top:1px solid var(--line);padding:0 8px;font:400 10px var(--mono);color:var(--muted)}
.rank tbody tr:first-child td{border-top:0}
.rank tr.first td{background:#E6F2EE}
.rank td.pos{font-weight:700;color:#A0927E;font-size:10.5px;text-align:center;padding:0 0 0 6px}
.rank td.pos.top{color:var(--gold)}
.rank td.player{padding-left:10px}
.player-cell{display:flex;align-items:center;gap:6px}
.pname{font:600 14px var(--serif);color:var(--navy);letter-spacing:.005em}
.pname.silver{color:#7C8395;text-decoration:underline dotted #B5BCCB}
.pname.bronze{color:#A3502A}
.rank td.win{color:var(--navy)}
.rank td.bonus.pos-bonus{color:var(--green)}
.rank td.pen{padding-right:0}
.form-cell{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.form-cell i{width:7px;height:11px;background:var(--neutral)}
.form-cell i.w{background:var(--orange)}
.form-cell i.l{background:var(--navy)}
.form-cell b{margin-left:10px;min-width:58px;text-align:right;font:700 11px var(--mono);color:var(--orange)}
.load-more{display:block;width:100%;height:39px;border-top:1px solid var(--line);font:400 8.5px var(--mono);letter-spacing:.14em;color:var(--navy)}
.load-more:hover{background:#F1E8D3}

/* ---------- recent + methods ---------- */
.two-col{display:grid;grid-template-columns:1fr 328px;gap:30px;margin-top:38px}
.sessions{list-style:none;margin-top:5px}
.sessions li{display:flex;align-items:center;gap:8px;height:38px;border-bottom:1px solid #C8B9A2}
.s-name{font:600 13px var(--serif);color:var(--navy)}
.s-meta{font:400 9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.s-win{margin-left:auto;font:400 10px var(--mono);color:var(--navy)}
.s-win b{color:var(--orange);font-weight:700;margin-left:2px}
.s-win b.zero{color:var(--muted)}
.s-btn{height:22px;padding:0 8px;border:1px solid #B9A88F;font:400 9px var(--mono);color:#4C6566;letter-spacing:.02em}
.s-btn:hover{background:var(--card)}
.method{margin-top:13px}
.method + .method{margin-top:13px}
.m-top{display:flex;justify-content:space-between;font:400 8.5px var(--mono);letter-spacing:.08em;color:var(--navy);margin-bottom:3px}
.m-top span:last-child{color:var(--muted)}
.meter{height:11px;background:#FFFCF6;border:1px solid var(--navy)}
.meter i{display:block;height:100%;background:var(--orange)}
.meter.thin{height:8px}

/* ---------- combos ---------- */
.combo{padding:12px 0 10px;border-bottom:1px solid #C8B9A2}
.combo-top{display:flex;align-items:baseline;margin-bottom:7px}
.combo-name{font:600 13px var(--serif);color:var(--navy)}
.combo-pts{margin-left:auto;font:700 10.5px var(--mono);color:var(--orange)}
.combo-pts.hi{color:var(--gold)}
.combo-n{width:58px;text-align:right;font:700 10.5px var(--mono);color:var(--navy)}

.foot{display:flex;justify-content:space-between;margin-top:36px;padding-top:14px;border-top:1px solid var(--navy);font:400 9px var(--mono);letter-spacing:.14em;color:var(--orange)}
.foot a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;letter-spacing:.1em}

/* ---------- toast ---------- */
.toast{position:fixed;right:max(16px,calc((100vw - 1200px)/2 + 100px));bottom:92px;width:288px;padding:16px 15px 12px;background:var(--card);border:1px solid var(--navy);border-top:4px solid var(--orange);z-index:20}
.toast-tag{display:inline-block;padding:5px 7px;background:var(--orange);color:#fff;font:700 9px var(--mono);letter-spacing:.12em}
.toast-title{display:flex;align-items:center;gap:12px;margin-top:9px;font:700 18px var(--serif);color:var(--navy)}
.mini-tile{display:inline-grid;place-items:center;width:14px;height:18px;background:#F8F3EA;border-radius:2px;box-shadow:0 2px 0 #C9A9A9;font:700 9px "Noto Serif SC",serif;color:#E8336D}
.toast-from{margin-top:7px;font:400 9.5px var(--mono);color:#4C6566}
.toast-from u{color:var(--navy);font-weight:700;text-decoration-color:var(--orange);text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.chip{padding:4px 7px;border:1px solid #C3B39C;background:#F5EEDD;font:400 9px var(--mono);letter-spacing:.06em;color:#4C6566}
.chip em{font-style:normal;color:var(--orange);font-weight:700}
.chip.dark{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.toast-sess{margin-top:9px;font:400 9px var(--mono);letter-spacing:.06em;color:#BDAE98}

.wa{position:fixed;right:max(16px,calc((100vw - 1200px)/2 + 100px));bottom:30px;width:44px;height:44px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:3px 3px 0 var(--navy);border:1.5px solid var(--navy);z-index:21}

@media (max-width:760px){
  .search{margin-left:0}.search-box{width:auto;flex:1}
  .top{flex-wrap:wrap;height:auto;gap:10px}
  .tabs{margin-left:0}
  .hero h1{font-size:48px}
  .controls{flex-wrap:wrap}.select select{width:100%}
  .stats{grid-template-columns:1fr 1fr}
  .podium,.two-col{grid-template-columns:1fr}
  .rank th:nth-child(4),.rank td:nth-child(4),.rank th:nth-child(5),.rank td:nth-child(5),.rank th:nth-child(6),.rank td:nth-child(6){display:none}
  .toast{display:none}
}

/* ---------- Majo additions: search popover, empty states, toast close ---------- */
.search-box{position:relative}
.search-pop{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 4px);z-index:40;background:var(--card);border:1.5px solid var(--navy);box-shadow:3px 3px 0 var(--navy)}
.search-pop a{display:flex;align-items:center;gap:8px;padding:8px 10px;text-decoration:none;border-top:1px solid var(--line)}
.search-pop a:first-child{border-top:0}
.search-pop a:hover{background:var(--bg)}
.search-pop b{font:600 13px var(--serif);color:var(--navy)}
.search-pop small{margin-left:auto;font:400 9px var(--mono);color:var(--muted)}
.search-pop .none{padding:10px;font:400 10px var(--mono);color:var(--muted)}
.ptile{display:inline-grid;place-items:center;flex:none;width:18px;height:23px;border:1.3px solid #A0968A;border-radius:3px;background:var(--card)}
.ptile.b{border-color:var(--navy)}
.ptile .wan{font:400 12px/1 "Noto Serif SC",serif;color:#8F8370}
.empty{padding:34px 20px;text-align:center;font:400 10px/1.6 var(--mono);letter-spacing:.08em;color:var(--muted)}
.empty b{display:block;margin-bottom:6px;font:600 17px var(--serif);letter-spacing:0;color:var(--navy)}
.toast-x{position:absolute;right:8px;top:6px;font:400 18px/1 var(--sans);color:var(--muted)}
.toast-sess a{color:inherit}
.c-imp{color:#B0123F}
.leader.is-empty,.runner.is-empty{display:grid;place-items:center;color:var(--muted);font:400 10px var(--mono);letter-spacing:.1em}
.ptile.tile-lg{width:42px;height:52px;border-width:1.5px;border-radius:6px}
.ptile.tile-lg svg{width:22px;height:26px}
.ptile.tile-lg .wan{font-size:26px}
.ptile.tile-run{width:28px;height:36px;border-radius:4px}
.ptile.tile-run svg{width:15px;height:18px}
.ptile.tile-run .wan{font-size:18px}
.form-cell b.neg,.leader-miles.neg{color:var(--navy)}
.rank td.neg-pen{color:var(--orange)}
.follow.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.follow.on i{background:#fff;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
a.s-btn{display:inline-flex;align-items:center;text-decoration:none}
.sessions li.empty{display:block;height:auto;border:0}
[hidden]{display:none!important}
.leader.is-empty{min-height:280px}
.runner.is-empty{min-height:134px}

/* ---------- language switch + level avatars ---------- */
.lang-switch{display:inline-flex;margin-top:14px;border:1.5px solid var(--navy);box-shadow:2px 2px 0 var(--orange)}
.lang-switch button{height:24px;padding:0 12px;background:var(--card);font:700 9px var(--mono);letter-spacing:.08em;border-left:1.5px solid var(--navy)}
.lang-switch button:first-child{border-left:0}
.lang-switch button.on{background:var(--navy);color:#fff}
.ptile .cj{font:400 12px/1 "Noto Serif SC",serif;color:currentColor}
.ptile.av9{background:var(--orange);color:#fff!important}
.ptile.av9 .cj{color:#fff}
.ptile.tile-lg .cj{font-size:26px}.ptile.tile-run .cj{font-size:18px}
.ptile.tile-lg svg{width:24px;height:26px}.ptile.tile-run svg{width:16px;height:18px}
.pinit{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border:1.3px solid #6E4FA2;border-radius:50%;font:600 10px var(--sans);color:#6E4FA2}
.pinit.tile-lg{width:44px;height:44px;font-size:17px}
.pinit.tile-run{width:30px;height:30px;font-size:13px;border-color:var(--orange);color:var(--orange)}