/* Overlay widgets. One definition per widget type, shared by the live renderer and the editor.
   Colors/fonts arrive as CSS variables on .ov-stage: --ov-bg, --ov-accent, --ov-text, --ov-font. */
.ov-stage { position: relative; width: 1920px; height: 1080px; transform-origin: top left; font-family: var(--ov-font, 'Inter'), sans-serif; color: var(--ov-text, #fff); }
.ov-widget { position: absolute; transform-origin: top left; }
.ov-editable { cursor: grab; outline: 2px dashed transparent; outline-offset: 6px; transition: outline-color .15s; }
.ov-editable:hover, .ov-editable.dragging { outline-color: rgba(34, 211, 238, .9); cursor: grabbing; }
.ov-hidden { opacity: .3; }

/* score bug */
.ov-score_bug { display: flex; align-items: center; background: var(--ov-bg, #101625); padding: 18px 40px; box-shadow: 0 14px 40px rgba(0,0,0,.45); gap: 10px; }
.ov-score_bug .ov-team { display: flex; align-items: center; gap: 16px; }
.ov-score_bug .ov-logo { height: 60px; width: 60px; object-fit: contain; border-radius: 8px; display: none; }
.ov-score_bug .ov-name { text-transform: uppercase; font-size: 34px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.ov-score_bug .ov-scores { display: flex; align-items: center; margin: 0 26px; }
.ov-score_bug .ov-score { font-size: 62px; font-weight: 900; color: var(--ov-accent, #7c5cff); min-width: 80px; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-score_bug .ov-sep { opacity: .35; font-weight: 700; margin: 0 10px; font-size: 30px; }
.ov-score_bug.skin-classic { border-bottom: 8px solid var(--ov-accent, #7c5cff); border-radius: 0 0 16px 16px; }
.ov-score_bug.skin-ticker { border-top: 6px solid var(--ov-accent, #7c5cff); border-radius: 0; padding: 12px 50px; }
.ov-score_bug.skin-arena { border: 3px solid var(--ov-accent, #7c5cff); transform: skew(-8deg); }
.ov-score_bug.skin-arena > * { transform: skew(8deg); }
.ov-score_bug.skin-pill { border-radius: 999px; border: 2px solid var(--ov-accent, #7c5cff); padding: 12px 34px; }
.ov-score_bug.skin-pill .ov-name { font-size: 26px; } .ov-score_bug.skin-pill .ov-score { font-size: 48px; }
.ov-score_bug.skin-glass { background: color-mix(in srgb, var(--ov-bg, #101625) 55%, transparent); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.25); border-radius: 22px; }

/* serve indicator */
.ov-serve_indicator { display: flex; align-items: center; gap: 14px; background: rgba(0,0,0,.55); padding: 12px 22px; border-radius: 14px; }
.ov-serve_indicator .ov-dot { width: 20px; height: 20px; border-radius: 50%; background: #ffd166; opacity: .15; transition: .2s; }
.ov-serve_indicator .ov-dot.on { opacity: 1; box-shadow: 0 0 16px #ffd166; }
.ov-serve_indicator .ov-srv-label { font-size: 18px; letter-spacing: .15em; font-weight: 700; opacity: .8; }
.ov-serve_indicator .ov-srv-num { font-family: 'Roboto Mono', monospace; font-size: 26px; font-weight: 700; color: #ffd166; min-width: 18px; }

/* games */
.ov-games_indicator { background: rgba(0,0,0,.55); padding: 10px 26px; border-radius: 999px; font-size: 24px; font-weight: 700; letter-spacing: .08em; }

/* clocks */
.ov-game_clock { font-family: 'Roboto Mono', monospace; font-size: 64px; font-weight: 700; background: rgba(0,0,0,.55); padding: 10px 34px; border-radius: 14px; font-variant-numeric: tabular-nums; }
.ov-shot_clock { font-family: 'Roboto Mono', monospace; font-size: 40px; font-weight: 700; color: #ffc145; background: rgba(0,0,0,.55); padding: 8px 26px; border-radius: 14px; text-align: center; }
.ov-shot_clock .low { color: #ff4d4d; animation: ov-blink .5s infinite; }
@keyframes ov-blink { 50% { opacity: .2; } }
.ov-period_indicator { background: var(--ov-accent, #7c5cff); color: #fff; padding: 8px 22px; border-radius: 999px; font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: .08em; }
.ov-fouls_indicator { display: flex; align-items: center; gap: 14px; background: rgba(0,0,0,.55); padding: 10px 22px; border-radius: 14px; font-size: 20px; letter-spacing: .06em; }
.ov-fouls_indicator b { font-size: 26px; color: var(--ov-accent, #7c5cff); }
.ov-fouls_indicator .ov-foul-sep { opacity: .4; }

/* pickleball position tray */
.ov-position_tray { display: flex; gap: 12px; background: rgba(0,0,0,.6); padding: 14px 18px; border-radius: 14px; }
.ov-pos { min-width: 160px; text-align: center; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.06); opacity: .75; border: 2px solid transparent; }
.ov-pos small { display: block; font-size: 12px; letter-spacing: .15em; opacity: .7; }
.ov-pos span { font-size: 22px; font-weight: 700; text-transform: uppercase; }
.ov-pos.srv { opacity: 1; border-color: #ffd166; background: rgba(255,209,102,.18); }

.ov-watermark { position: fixed; bottom: 14px; right: 22px; font: 700 14px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* sets / outs / line score */
.ov-sets_indicator { background: var(--ov-accent, #7c5cff); color: #fff; padding: 10px 26px; border-radius: 999px; font-size: 24px; font-weight: 700; letter-spacing: .08em; }
.ov-outs_indicator { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.55); padding: 12px 22px; border-radius: 14px; }
.ov-outs-label { font-size: 18px; letter-spacing: .15em; font-weight: 700; opacity: .8; margin-right: 6px; }
.ov-out { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.ov-out.on { background: #ffd166; border-color: #ffd166; box-shadow: 0 0 14px #ffd166; }
.ov-linescore { background: var(--ov-bg, #101625); padding: 12px 18px; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.45); border-top: 5px solid var(--ov-accent, #7c5cff); }
.ov-ls { border-collapse: collapse; font-size: 22px; font-variant-numeric: tabular-nums; }
.ov-ls th, .ov-ls td { padding: 4px 12px; text-align: center; min-width: 34px; }
.ov-ls thead th { font-size: 14px; opacity: .6; letter-spacing: .05em; }
.ov-ls thead th.cur { color: var(--ov-accent, #7c5cff); opacity: 1; }
.ov-ls tbody th { text-align: left; text-transform: uppercase; font-weight: 700; padding-right: 20px; white-space: nowrap; }
.ov-ls .tot { font-weight: 900; color: var(--ov-accent, #7c5cff); border-left: 2px solid rgba(255,255,255,.2); }
.ov-score_bug .ov-score.word { font-size: 40px; }

/* Card games: standings list (every seat, best first) */
.ov-standings { min-width: 520px; background: var(--ov-bg, #101625); color: var(--ov-text, #fff); font-family: var(--ov-font, Inter), Inter, sans-serif; box-shadow: 0 14px 40px rgba(0,0,0,.45); border-radius: 18px; overflow: hidden; }
.ov-standings .ov-st-head { background: var(--ov-accent, #7c5cff); color: #fff; padding: 10px 22px; font-size: 20px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.ov-standings .ov-st-rows { padding: 6px 0; }
.ov-standings .ov-st-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 8px 22px; font-size: 30px; font-weight: 700; }
.ov-standings .ov-st-row + .ov-st-row { border-top: 1px solid rgba(255,255,255,.1); }
.ov-standings .ov-st-pl { font-size: 22px; opacity: .6; }
.ov-standings .ov-st-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.ov-standings .ov-st-tot { font-size: 38px; font-weight: 900; color: var(--ov-accent, #7c5cff); font-variant-numeric: tabular-nums; }
.ov-standings .ov-st-row.lead .ov-st-nm::after { content: ' ★'; color: var(--ov-accent, #7c5cff); }
.ov-standings.skin-pill { border-radius: 30px; }
.ov-standings.skin-ticker { border-radius: 0; border-top: 6px solid var(--ov-accent, #7c5cff); }
.ov-standings.skin-glass { background: color-mix(in srgb, var(--ov-bg, #101625) 55%, transparent); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.25); }