.shape-bests { display:flex; align-items:center; gap:22px; min-width:0; }
.shape-bests .personal-best { white-space:nowrap; }
.shape-bests .shape-record { padding-left:0; border:0; }
.shape-bests button.shape-record { background:transparent; color:inherit; text-align:left; cursor:pointer; font-family:inherit; }
.rule-center { fill:var(--background); stroke:var(--success); stroke-width:1.8; pointer-events:none; }
#mode-status { font-variant-numeric:tabular-nums; margin-left:auto; font-size:10px; }
.shape-record strong { color:var(--muted); }
.live-match { position:relative; margin-top:3px; }
.find-rival { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 9px; border:1px solid transparent; border-radius:10px; background:transparent; font-size:11px; color:var(--muted); }
.find-rival > span:first-child { display:inline-flex; align-items:center; gap:7px; }
.find-rival svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.online-count { font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.find-rival .live-shortcut { position:absolute; right:8px; bottom:calc(100% + 7px); display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font-size:10px; box-shadow:0 3px 12px var(--shadow); opacity:0; visibility:hidden; pointer-events:none; }
.find-rival .live-shortcut kbd { height:19px; min-width:19px; font-size:9px; }
.find-rival:focus-visible .live-shortcut { opacity:1; visibility:visible; }
.live-status { position:absolute; top:calc(100% + 5px); right:0; z-index:3; width:max-content; max-width:min(270px,calc(100vw - 36px)); margin:0; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); box-shadow:0 3px 12px var(--shadow); color:var(--muted); font-size:11px; line-height:1.5; }
.live-status:empty { display:none; }
@media (hover:hover) {
  .find-rival:not(:disabled):hover { color:var(--ink); background:color-mix(in srgb,var(--paper) 65%,transparent); }
  .find-rival:hover .live-shortcut { opacity:1; visibility:visible; }
}
@media (prefers-reduced-motion:no-preference) {
  .find-rival { transition:transform 150ms ease-out,background-color 120ms ease-out; }
  .find-rival:not(:disabled):active { transform:scale(.96); }
  .find-rival .live-shortcut { transition:opacity 120ms ease-out,visibility 120ms ease-out; }
}
@media (max-width:800px) {
  .shape-bests { gap:12px; }
  .site-header .shape-bests .personal-best { display:grid; padding:0; border:0; }
  .shape-bests .personal-best > span { font-size:9px; }
  .shape-bests .personal-best strong { font-size:13px; letter-spacing:-.3px; }
  .control-panel { height:216px; }
  .find-rival { padding:3px 0; font-size:10px; min-height:32px; gap:4px; }
  .find-rival > span:first-child { gap:5px; }
  .find-rival svg { width:14px; height:14px; }
  .online-count { font-size:8px; }
  .live-match { margin-top:0; }
  .live-status { top:auto; bottom:calc(100% + 5px); }
}
@media (max-width:360px) {
  .site-header .brand-group { gap:7px; }
  .site-header .logo.tx-mark { width:35px; height:40px; }
  .shape-bests { gap:8px; }
  .shape-bests .personal-best > span { font-size:8px; }
  .shape-bests .personal-best strong { font-size:12px; }
  .site-header .hr-controls.hr-porcelain-quiet { gap:6px; }
}
@media (max-height:650px) and (min-width:801px) {
  .live-match { margin-top:0; }
  .find-rival { min-height:28px; }
}