/* Live board for players: no tab bar, a "where am I" card up top. */
body.live-page { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.live-page main { padding: 0 16px; max-width: 640px; margin: 0 auto; }
.me { margin-top: 16px; }
.me .lbl { margin-top: 0; }
.me-card { margin-top: 10px; border-radius: var(--r); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.me-card strong { font: 400 22px/1.15 var(--display); }
.me-card span { color: var(--muted); }
.me-card.on { background: var(--optic); border-color: var(--optic); color: #0a1f10; }
.me-card.on span { color: #1f3a14; }
.me-card.next { border-color: color-mix(in srgb, var(--optic) 55%, var(--line)); }
.me-card.wait strong { color: var(--optic); }
.me-card.win { background: var(--b); border-color: var(--b); color: #2a0d05; }
.me-card.win span { color: #3d160c; }
.me-card.dim strong { color: var(--muted); }
.live-vs .side { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.live-vs .side b { font: 400 34px/1 var(--display); }
.live-vs .side.serving span::after { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--optic); margin-left: 8px; vertical-align: 2px; box-shadow: 0 0 8px var(--optic); }
.court-label { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.live-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 16px 8px; }
.record { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.record h3 { font: 400 22px var(--display); margin: 0 0 12px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface-2); border-radius: 12px; padding: 12px; display: grid; gap: 2px; }
.stat b { font: 400 26px/1 var(--display); }
.stat b i { font-style: normal; font-size: 14px; color: var(--muted); margin-left: 2px; }
.stat span { color: var(--muted); font-size: 13px; }
.record .note { margin: 12px 0 0; }
.seg.slim { margin-top: 12px; }
.seg.slim button { min-height: 38px; padding: 6px; }
.my-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.my-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.my-list li:last-child { border-bottom: 0; }
.my-list .wl { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 400 15px var(--display); }
.my-list li.w .wl { background: var(--optic); color: #0a1f10; }
.my-list li.l .wl { background: var(--b-deep); color: var(--b); border: 1px solid color-mix(in srgb, var(--b) 40%, transparent); }
.my-list strong { font: 400 18px var(--display); margin-right: 4px; }
.my-list span { color: var(--text); }
.my-list small { display: block; color: var(--muted); margin-top: 2px; }
.name-pick { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--optic) 50%, transparent); text-underline-offset: 3px; cursor: pointer; }
.note .name-pick { color: var(--optic); margin: 0 4px; }