/* 실시간 공 찾기(/tt/play/live). 놀이터 키트(kit.css)의 토큰을 그대로 쓴다.
 * 영상과 겹친 캔버스는 같은 상자에 겹쳐 둔다 — 캔버스 크기를 영상 요소의 CSS 크기에 맞춰 다시 잰다(live.js). */
.lvView{position:relative;width:100%;aspect-ratio:16/9;background:#120f10;border-radius:var(--r-lg,14px);overflow:hidden;
  border:3px solid var(--tp-ink,#2a2326);box-shadow:0 6px 0 var(--border-2)}
.lvView video,.lvView canvas{position:absolute;inset:0;width:100%;height:100%}
.lvView video{object-fit:contain}
.lvView canvas{touch-action:none}
.lvView.picking canvas{cursor:crosshair}
.lvHud{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none;
  font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.lvHud span{background:rgba(18,15,16,.72);color:#fffaf2;border-radius:999px;padding:3px 9px}
.lvHint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:92%;background:rgba(255,250,242,.94);
  color:#2a2326;border:2px solid #2a2326;border-radius:999px;padding:6px 14px;font-weight:700;font-size:var(--fs-sm,14px);
  text-align:center;pointer-events:none}
.lvBar{display:flex;flex-wrap:wrap;gap:var(--sp-2,8px);align-items:center}
.lvBar .tpBtn{min-height:44px}
.lvLegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-sm,14px);color:var(--dim)}
.lvLegend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lvLegend .ball{border:2px solid #dc143c}
.lvLegend .table{border:2px solid #ffc83d}
.lvLegend .bounce{border:2px solid #ff8a3d;border-radius:50%}
.lvStart{display:grid;gap:var(--sp-3,12px);justify-items:center;text-align:center}
.lvStart .tpBubble{max-width:34em}
/* 폰 폭에서는 숫자 판을 한 줄로 줄인다 — 세로로 쌓으면 작은 영상의 오른쪽 절반을 가린다. */
@media (max-width:520px){.lvHud{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:70%;font-size:10px}
  .lvHud span{padding:2px 7px}}