/* TV skins: display tokens are local so the store management theme stays intact.
 * Reference lock: Fey (https://feyapp.com) supplies dark surface hierarchy;
 * Slash (https://www.slash.com) supplies fine framing for Royal, with gold as detail.
 * BlindClock (https://blindclock.app) supplies large clock / separate blind values.
 * Refero Deezer screen 0391cc06-0053-428b-a7d0-ef16768ed53d supplies the progress ring.
 * Mobbin Flodesk screen 133e58c9-7728-4f5f-8a92-7f1046ae5052 supplies separated numeric groups.
 * 21st.dev cult-ui/timer supplies stable tabular time; shadcn Card supplies header/body/actions.
 * Holin's existing lime remains the picker action color; skin accents belong to TV data.
 */
.tvs,.skin-thumb{--tv-bg:#0b1411;--tv-surface:#14201b;--tv-ink:#f3f7f2;--tv-muted:#a0afa5;--tv-accent:#c9ee8b;--tv-line:#2a3a30;background:var(--tv-bg);color:var(--tv-ink)}
.skin-neon{--tv-bg:#060e14;--tv-surface:#0a1922;--tv-accent:#67e8f9;--tv-muted:#9bb6c3;--tv-line:#23424d}
.skin-hud{--tv-bg:#151615;--tv-surface:#20221e;--tv-accent:#e8f56a;--tv-muted:#aaaFA4;--tv-line:#3c4131}
.skin-felt{--tv-bg:#082e26;--tv-surface:#0c3a30;--tv-accent:#e4c887;--tv-muted:#aec4b4;--tv-line:#56705a}
.skin-minimal{--tv-bg:#f4f5f7;--tv-surface:#fff;--tv-ink:#172027;--tv-muted:#5c6975;--tv-accent:#172027;--tv-line:#d3dae0;color-scheme:light}
.skin-midnight{--tv-bg:#0b0e13;--tv-surface:#131921;--tv-accent:#b6d6ff;--tv-muted:#a1aeba;--tv-line:#29333e}
.skin-orbit{--tv-bg:#0a1720;--tv-surface:#102632;--tv-accent:#92e4cc;--tv-muted:#9ebdb9;--tv-line:#294c50}
.skin-scoreboard{--tv-bg:#121214;--tv-surface:#1d1d21;--tv-accent:#ff827d;--tv-muted:#b7adb2;--tv-line:#423038}
.skin-amber{--tv-bg:#14110c;--tv-surface:#201c13;--tv-ink:#ffda95;--tv-accent:#f5b94f;--tv-muted:#c4ad85;--tv-line:#4b3c23}
.skin-royal{--tv-bg:#100f10;--tv-surface:#1b1918;--tv-accent:#e4c887;--tv-muted:#b7b0a4;--tv-line:#494033}
.tvs{display:flex;flex-direction:column;gap:clamp(20px,3vh,36px);padding:clamp(20px,3.2vw,64px);font-variant-numeric:tabular-nums;letter-spacing:0;isolation:isolate;background:radial-gradient(ellipse at 50% 0%,var(--tv-surface),var(--tv-bg) 65%)}
/* Pattern layer: Index's quiet grids + Assurestor's data geometry, adapted to each skin.
 * https://index.app / https://www.assurestor.com
 * https://21st.dev/@appica-dev/components/background-pattern
 * Pattern stays behind content, fades at center, and has no pointer or animation work.
 */
.tvs::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--tv-art,var(--tv-pattern));background-position:var(--tv-art-position,center);background-size:cover;background-repeat:no-repeat}
.skin-classic{--tv-pattern:url("/assets/tv-patterns/classic.svg")}
.skin-neon{--tv-pattern:url("/assets/tv-patterns/neon.svg")}
.skin-hud{--tv-pattern:url("/assets/tv-patterns/hud.svg")}
.skin-felt{--tv-pattern:url("/assets/tv-patterns/felt.svg")}
.skin-minimal{--tv-pattern:url("/assets/tv-patterns/minimal.svg")}
.skin-midnight{--tv-pattern:url("/assets/tv-patterns/midnight.svg")}
.skin-orbit{--tv-pattern:url("/assets/tv-patterns/orbit.svg")}
.skin-scoreboard{--tv-pattern:url("/assets/tv-patterns/scoreboard.svg")}
.skin-amber{--tv-pattern:url("/assets/tv-patterns/amber.svg")}
.skin-royal{--tv-pattern:url("/assets/tv-patterns/royal.svg")}
/* User-provided tournament displays: large edge imagery, dark center, existing clock hierarchy.
 * Original generated art replaces repeated geometry for these four skins.
 */
.skin-neon{--tv-art:linear-gradient(90deg,#060e1426,#060e1459 50%,#060e1426),url("/assets/tv-art/neon-v1.webp");--tv-art-position:68% center}
.skin-midnight{--tv-art:linear-gradient(90deg,#0b0e1326,#0b0e1359 50%,#0b0e1326),url("/assets/tv-art/midnight-v1.webp");--tv-art-position:68% center}
.skin-orbit{--tv-art:linear-gradient(90deg,#0a172026,#0a172040 50%,#0a172026),url("/assets/tv-art/orbit-v1.webp");--tv-art-position:30% center}
.skin-royal{--tv-art:linear-gradient(90deg,#100f1040,#100f1359 50%,#100f1040),url("/assets/tv-art/royal-v1.webp");--tv-art-position:70% center}
@media(min-width:768px){.tvs{--tv-art-position:center}}
.tvs *{min-width:0}
.tvs-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--tv-line)}
.tvs-title{flex:1 1 160px;font-size:clamp(18px,1.8vw,30px);font-weight:700;overflow-wrap:anywhere;word-break:keep-all}
.tvs-brand{display:grid;place-items:center;width:clamp(44px,4vw,64px);height:clamp(44px,4vw,64px);border-radius:10px;overflow:hidden}
.tvs-brand img{width:100%;height:100%;object-fit:contain;padding:4px}
.tvs-brand-name{font-size:clamp(14px,1.4vw,22px);color:var(--tv-accent);overflow-wrap:anywhere}
.tv-page.tvs .btn{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;background:var(--tv-surface);color:var(--tv-ink);border:1px solid var(--tv-line);padding:10px 18px}
.tvs-full{margin-left:auto}
.tvs-eyebrow,.tvs-level{font-size:clamp(14px,1.5vw,24px);font-weight:600;letter-spacing:.12em;color:var(--tv-accent);overflow-wrap:anywhere}
.tvs-eyebrow{text-align:center}
.tvs-eyebrow small{font-size:14px;color:var(--tv-muted)}
.tvs-level{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.tvs-status,.tvs-state{font-size:clamp(12px,1vw,16px);letter-spacing:.08em;color:var(--tv-muted);overflow-wrap:anywhere}
.tvs-status{padding:7px 12px;border:1px solid var(--tv-line);border-radius:30px}
.tvs[data-state="IN PROGRESS"] .tvs-status{color:var(--tv-accent)}
.tvs-time{font-family:Arial,sans-serif;font-size:clamp(68px,17vw,260px);font-weight:700;line-height:1.2;padding:.04em 0;letter-spacing:-.045em;text-align:center;white-space:nowrap}
.tvs-progress{position:relative;height:6px;border-radius:4px;background:var(--tv-line);overflow:hidden}
.tvs-progress i{display:block;width:calc(var(--p,0)*100%);height:100%;background:var(--tv-accent);border-radius:inherit;transition:width .25s linear}
.tvs-progress.thin{height:3px}
.tvs-label{margin:6px 0 0;text-align:center;font-size:clamp(12px,1.2vw,18px);letter-spacing:.1em;color:var(--tv-muted)}
.tvs-blinds{font-size:clamp(26px,4.3vw,76px);font-weight:600;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.tvs-blinds small{display:block;font-size:clamp(14px,1.8vw,26px);color:var(--tv-muted)}
.tvs-next{margin:0;font-size:clamp(14px,1.4vw,22px);line-height:1.6;text-align:center;color:var(--tv-muted);overflow-wrap:anywhere}
.tvs-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--tv-line);color:var(--tv-muted);font-size:clamp(12px,1vw,16px);line-height:1.5;overflow-wrap:anywhere}
.tvs-grid,.tvs-felt,.tvs-hud{flex:1;display:grid;gap:clamp(24px,4vw,72px);align-content:center}
.tvs-main,.tvs-plaque{display:grid;align-content:center;gap:clamp(14px,2vh,24px)}
.tvs-side{display:grid;gap:20px;align-content:center}
.tvs-card{padding:clamp(16px,2vw,28px);background:var(--tv-surface);border:1px solid var(--tv-line);border-radius:16px}
.tvs-card h2,.tvs-hud aside h2{font-size:clamp(14px,1.2vw,20px);line-height:1.5;letter-spacing:.08em;color:var(--tv-accent);margin:0 0 12px;overflow-wrap:anywhere}
.tvs-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--tv-line);font-size:clamp(14px,1.3vw,22px);line-height:1.5;overflow-wrap:anywhere}
.tvs-row:last-child{border-bottom:0}.tvs-row span{color:var(--tv-muted)}.tvs-muted{font-size:14px;color:var(--tv-muted);margin:0;overflow-wrap:anywhere}
.tvs-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--tv-line);border-radius:14px;background:var(--tv-surface)}
.tvs-metric{padding:clamp(12px,2vw,28px);text-align:center;overflow-wrap:anywhere}.tvs-metric+.tvs-metric{border-left:1px solid var(--tv-line)}
.tvs-metric span{display:block;font-size:clamp(12px,1vw,16px);line-height:1.5;letter-spacing:.06em;color:var(--tv-muted)}
.tvs-metric b{display:block;margin-top:8px;font-size:clamp(22px,3.8vw,64px);line-height:1.2}
@media(min-width:1024px){.tvs-grid,.tvs-felt,.tvs-hud{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr)}.tvs-main .tvs-time{font-size:clamp(68px,15vw,260px)}}
/* Classic: the venue board; Neon: a clean illuminated clock. */
.skin-classic .tvs-main{padding:clamp(16px,2.5vw,40px);border:1px solid var(--tv-line);border-radius:20px;background:color-mix(in srgb,var(--tv-surface) 88%,transparent)}
.skin-classic .tvs-time{color:var(--tv-accent);font-size:clamp(68px,13vw,240px)}
.tvs-corner{display:none}
.tvs-neon{flex:1;display:grid;align-content:center;justify-items:center;gap:clamp(20px,3vh,40px)}
.tvs-ring{--s:min(76vw,54vh,600px);width:var(--s);height:var(--s);max-width:100%;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--tv-accent) calc(var(--p,0)*360deg),var(--tv-line) 0);padding:5px;box-shadow:0 0 60px color-mix(in srgb,var(--tv-accent) 8%,transparent)}
.tvs-ring-in{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--tv-bg);text-align:center;padding:12px}
.tvs-ring .tvs-time{font-size:calc(var(--s)*.25);font-weight:600;letter-spacing:-.04em}
.skin-neon .tvs-time{text-shadow:0 0 28px #67e8f933}
.tvs-neon-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:1200px}
.tvs-chip{display:grid;gap:8px;text-align:center;padding:16px;border:1px solid var(--tv-line);border-radius:12px;background:var(--tv-surface)}
.tvs-chip small{font-size:12px;letter-spacing:.12em;color:var(--tv-muted)}.tvs-chip b{font-size:clamp(18px,2vw,34px);line-height:1.3;overflow-wrap:anywhere}
@media(min-width:768px){.tvs-neon-info{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* HUD: a broadcast timing console. */
.tvs-hud>section{display:grid;gap:16px;align-content:center}
.skin-hud .tvs-time{text-align:left;font-weight:700;font-style:italic;font-size:clamp(68px,15vw,250px)}
.skin-hud .tvs-eyebrow,.skin-hud .tvs-blinds{text-align:left}
.tvs-units{display:flex;justify-content:space-around;color:var(--tv-muted);font-size:12px;letter-spacing:.15em}
.tvs-segs{display:flex;gap:4px;height:12px}.tvs-segs i{min-width:0;flex-shrink:1;background:var(--tv-line);border-radius:2px}.tvs-segs i.done,.tvs-segs i.now{background:var(--tv-accent)}.tvs-segs i.brk{background:var(--tv-muted)}
/* Felt: subtle table texture, without a heavy wooden frame. */
.skin-felt{background:radial-gradient(ellipse at 50% 10%,#164b3d,var(--tv-bg) 75%)}
.tvs-suits{display:none}
.tvs-plaque{padding:clamp(16px,2.5vw,40px);border:1px solid var(--tv-accent);outline:1px solid var(--tv-line);outline-offset:6px;border-radius:24px;background:color-mix(in srgb,var(--tv-surface) 88%,transparent)}
.skin-felt .tvs-time{color:var(--tv-accent);font-family:Georgia,serif;font-weight:400;font-size:clamp(68px,13vw,230px)}
.tvs-ante{margin:0;text-align:center;color:var(--tv-accent);font-size:clamp(16px,1.8vw,28px)}
.tvs-min{flex:1;display:grid;align-content:center;gap:clamp(20px,3vh,40px)}
.skin-minimal .tvs-time{font-weight:400;font-size:clamp(76px,min(22vw,38vh),360px)}
.skin-minimal .tvs-progress{width:100%;max-width:900px;justify-self:center}
/* Midnight: dark studio panels and cool white data. */
.skin-midnight .tvs-main{padding:clamp(16px,2vw,32px);border-radius:18px;background:color-mix(in srgb,var(--tv-surface) 88%,transparent);border:1px solid var(--tv-line)}
.skin-midnight .tvs-metrics{background:var(--tv-bg)}
/* Orbit: clock on the left, stacked blinds on the right. */
.tvs-orbit{flex:1;display:grid;align-content:center;align-items:center;gap:clamp(24px,4vw,64px)}
.tvs-orbit-clock{display:grid;place-items:center}.skin-orbit .tvs-ring{--s:min(76vw,58vh,740px);padding:3px}
.tvs-orbit-info{display:grid;gap:24px}.skin-orbit .tvs-metrics{background:none;border:0;border-radius:0}
@media(min-width:1024px){.tvs-orbit{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.skin-orbit .tvs-metrics{grid-template-columns:1fr}.skin-orbit .tvs-metric{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:16px;border-left:0;border-bottom:1px solid var(--tv-line);padding:24px 0}.skin-orbit .tvs-metric b{margin:0;font-size:clamp(28px,4vw,68px)}.skin-orbit .tvs-next{text-align:left}}
/* Scoreboard: red corner rail and a large central countdown. */
.tvs-score{flex:1;display:grid;align-content:center;gap:20px;width:100%;max-width:1600px;align-self:center}
.tvs-score-clock{padding:clamp(12px,2vw,28px);border-left:5px solid var(--tv-accent);background:color-mix(in srgb,var(--tv-surface) 88%,transparent);border-radius:8px}
.skin-scoreboard .tvs-time{font-weight:900;font-size:clamp(68px,min(21vw,24vh),360px)}
/* Amber: a monospaced instrument, without flicker or looping animation. */
.skin-amber{font-family:ui-monospace,monospace;background:linear-gradient(0deg,#f5b94f03 1px,transparent 1px),var(--tv-bg);background-size:100% 5px}
.skin-amber .tvs-time{font-family:ui-monospace,monospace;font-weight:400;font-size:clamp(64px,14vw,250px);text-shadow:0 0 24px #f5b94f1a}
.skin-amber .tvs-card,.skin-amber .tvs-metrics{border-radius:4px}
/* Royal: a fine gold frame, centered serif numerals. */
.tvs-royal{flex:1;display:grid;align-content:center;gap:clamp(14px,1.6vh,22px);width:100%;max-width:1500px;align-self:center;border:1px solid var(--tv-line);padding:clamp(16px,2vw,32px);border-radius:4px}
.tvs-royal-mark{text-align:center;color:var(--tv-accent);font-size:clamp(24px,3vw,48px);line-height:1.2}
.skin-royal .tvs-time{font-family:Georgia,serif;font-weight:400;color:var(--tv-accent);font-size:clamp(68px,min(19vw,20vh),320px)}
.skin-royal .tvs-metrics{border:0;border-top:1px solid var(--tv-line);background:none;border-radius:0}
/* Picker: the preview owns the color; actions retain Holin's existing tokens. */
.skin-grid{display:grid;gap:16px;margin-top:24px}
.skin-card{display:flex;flex-direction:column;gap:0;min-width:0;overflow:hidden;padding:0;border:1px solid var(--border);border-radius:16px;background:#0f1c16}
.skin-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.skin-thumb{position:relative;aspect-ratio:16/9;border-radius:0;border:0;box-shadow:none;overflow:hidden}
.skin-thumb svg{display:block;width:100%;height:auto;max-width:100%;font-family:Arial,sans-serif;letter-spacing:0}
.skin-thumb text{fill:var(--tv-ink)}.skin-thumb .thumb-muted{fill:var(--tv-muted)}.skin-thumb .thumb-accent{fill:var(--tv-accent)}
.thumb-frame{fill:var(--tv-surface);stroke:var(--tv-line)}.thumb-track{fill:var(--tv-line)}.thumb-fill{fill:var(--tv-accent)}.thumb-divider{stroke:var(--tv-line)}
.thumb-ring-base,.thumb-ring{fill:var(--tv-bg);stroke:var(--tv-line);stroke-width:6}.thumb-ring{fill:none;stroke:var(--tv-accent)}
.skin-felt .thumb-clock,.skin-royal .thumb-clock{font-family:Georgia,serif;font-weight:400;fill:var(--tv-accent)}
.skin-hud .thumb-clock{font-style:italic}.skin-amber .thumb-clock{font-family:monospace;fill:var(--tv-accent)}.skin-classic .thumb-clock{fill:var(--tv-accent)}.skin-minimal .thumb-clock{font-weight:400}
.skin-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:18px;min-width:0}
.skin-card-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.skin-card-title b{font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.skin-number{font-size:12px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.skin-description{margin:0;font-size:14px;line-height:1.6;color:#a7b7ac;word-break:keep-all;overflow-wrap:anywhere}
.skin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:4px}
.skin-actions .btn{flex:1 1 108px;min-height:44px;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.5}
.skin-selected{flex:1 1 108px;text-align:center;font-size:12px;color:var(--accent);padding:12px 0;line-height:1.5}
@media(min-width:640px){.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1600px){.skin-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tvs-progress i{transition:none}}

/* Let peripheral imagery remain visible through the display panels. */
.skin-neon .tvs-chip,.skin-midnight .tvs-card{background:color-mix(in srgb,var(--tv-surface) 82%,transparent)}
.skin-midnight .tvs-main{background:color-mix(in srgb,var(--tv-surface) 78%,transparent)}
.skin-royal .tvs-royal{background:#100f1026}

/* Additional directions: user-approved variety, geometric media at the edges.
 * Existing Refero numeric hierarchy / Mobbin separated groups remain the foundation.
 */
.skin-hologram{--tv-bg:#08191c;--tv-surface:#10282c;--tv-ink:#f0fffc;--tv-accent:#b3ffe0;--tv-muted:#a3c6c2;--tv-line:#396466;--tv-pattern:url("/assets/tv-patterns/hologram.svg")}
.skin-deco{--tv-bg:#191511;--tv-surface:#252019;--tv-ink:#f3e7cf;--tv-accent:#dfba7b;--tv-muted:#c2b39b;--tv-line:#675338;--tv-pattern:url("/assets/tv-patterns/deco.svg")}
.skin-crimson{--tv-bg:#1b080d;--tv-surface:#2b1018;--tv-ink:#fff4f0;--tv-accent:#ff9b93;--tv-muted:#ceafb5;--tv-line:#68323f;--tv-pattern:url("/assets/tv-patterns/crimson.svg")}
.skin-mono{--tv-bg:#e9e9e5;--tv-surface:#f8f8f4;--tv-ink:#161718;--tv-accent:#161718;--tv-muted:#53565a;--tv-line:#b5b6b2;--tv-pattern:url("/assets/tv-patterns/mono.svg");color-scheme:light}
.tvs-hologram,.tvs-deco,.tvs-mono{flex:1;display:grid;align-content:center;gap:clamp(18px,2.5vh,32px);width:100%;max-width:1400px;align-self:center}
.tvs-holo-clock{padding:clamp(20px,3vw,44px);border:1px solid var(--tv-line);clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);background:linear-gradient(115deg,#b3ffe00d,transparent 45%,#acd7ff0d),#08191cc9}
.skin-hologram .tvs-time{font-weight:400;color:var(--tv-accent);font-size:clamp(68px,min(20vw,25vh),320px)}
.skin-hologram .tvs-metrics{background:#08191cc9;border-radius:0}
.tvs-deco{border:1px solid var(--tv-accent);outline:1px solid var(--tv-line);outline-offset:7px;padding:clamp(16px,2vw,32px);background:#191511d9}
.tvs-deco-mark{text-align:center;font-size:24px;line-height:1.2;color:var(--tv-accent)}
.skin-deco .tvs-time{font-family:Georgia,serif;font-weight:400;font-size:clamp(68px,min(19vw,22vh),320px);color:var(--tv-accent)}
.skin-deco .tvs-metrics{border-radius:0;border-width:1px 0;background:transparent}
.tvs-crimson{flex:1;display:grid;align-content:center;align-items:center;gap:clamp(24px,4vw,64px)}
.tvs-crimson-clock{display:grid;gap:24px;padding:clamp(16px,3vw,40px);background:#1b080dc9;border-left:4px solid var(--tv-accent)}
.skin-crimson .tvs-time{font-weight:900;font-size:clamp(68px,16vw,260px)}
.skin-crimson .tvs-metrics{border-radius:0;background:#1b080dd9}
.tvs-mono-clock{background:var(--tv-ink);color:var(--tv-surface);padding:clamp(16px,2vw,32px)}
.skin-mono .tvs-time{font-weight:900;font-size:clamp(68px,min(21vw,27vh),360px)}
.skin-mono .tvs-metrics{border-radius:0;background:var(--tv-surface);border-width:2px 0}
.skin-hologram .thumb-clock{font-weight:400;fill:var(--tv-accent)}
.skin-deco .thumb-clock{font-family:Georgia,serif;font-weight:400;fill:var(--tv-accent)}
.skin-crimson .thumb-clock,.skin-mono .thumb-clock{font-weight:900}
@media(min-width:1024px){.tvs-crimson{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.skin-crimson .tvs-time{font-size:clamp(68px,14vw,260px)}.skin-crimson .tvs-metrics{grid-template-columns:1fr}.skin-crimson .tvs-metric+.tvs-metric{border-left:0;border-top:1px solid var(--tv-line)}}

.skin-mono .thumb-clock{fill:var(--tv-surface)}

/* Secondary information: one compact operations row, linked tournament only.
 * Separated numeric groups reuse the inspected Mobbin / Refero hierarchy.
 */
.tvs-display-info{display:grid;gap:14px;border-top:1px solid var(--tv-line);padding-top:16px}
.tvs-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.tvs-info-grid>div{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}
.tvs-info-grid>div>span{font-size:14px;line-height:1.5;color:var(--tv-muted)}
.tvs-info-grid b{font-size:clamp(20px,1.8vw,30px);line-height:1.4;font-variant-numeric:tabular-nums}
.tvs-info-grid small{font-size:14px;font-weight:400;color:var(--tv-muted)}
.tvs-info-grid>div:first-child b{color:var(--tv-accent)}
.tvs-tour-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;min-width:0;overflow-wrap:anywhere}
.tvs-tour-info>b{font-size:clamp(16px,1.5vw,24px);line-height:1.5;word-break:keep-all}
.tvs-tour-details{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;line-height:1.6;color:var(--tv-muted)}
@media(min-width:768px){.tvs-info-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Broadcast view: reserve room for the information rail without scrolling. */
@media(min-width:1024px){
 .tv-page.tvs{gap:clamp(10px,1.4vh,20px);padding:clamp(20px,2.2vw,44px)}
 .tvs .tvs-head{padding-bottom:12px}.tvs .tvs-foot{padding-top:12px}
 .tvs .tvs-time{font-size:clamp(68px,min(14vw,18vh),240px)}
 .tvs .tvs-ring{--s:min(60vw,38vh,600px)}
 .tvs .tvs-ring .tvs-time{font-size:calc(var(--s)*.25)}
 .tvs .tvs-main,.tvs .tvs-plaque,.tvs .tvs-royal,.tvs .tvs-deco{gap:clamp(10px,1.4vh,18px);padding:clamp(16px,1.5vw,24px)}
 .tvs .tvs-metric{padding:12px 16px}.tvs .tvs-metric b{font-size:clamp(24px,2.8vw,48px)}
 .tvs .tvs-royal-mark{font-size:28px}
 .tvs .tvs-neon{gap:20px}.tvs .tvs-chip{padding:12px}
 .tvs .tvs-display-info{padding-top:12px;gap:8px}.tvs .tvs-info-grid{gap:8px 20px}
}

/* Six original generated scenes, locked to the user's cinematic edge imagery.
 * Existing Refero / Mobbin numeric hierarchy and verified layouts are reused.
 */
.skin-nexus{--tv-bg:#07191b;--tv-surface:#102b2d;--tv-ink:#f2fffd;--tv-accent:#9dfce3;--tv-muted:#aac5c8;--tv-line:#38555b;--tv-art:linear-gradient(90deg,#07191b26,#07191b66 50%,#07191b26),url("/assets/tv-art/nexus-v1.webp")}
.skin-cybercity{--tv-bg:#110c19;--tv-surface:#211628;--tv-ink:#fff5fb;--tv-accent:#ffa6d7;--tv-muted:#c7b0c6;--tv-line:#61415e;--tv-art:linear-gradient(90deg,#110c1926,#110c1966 50%,#110c1926),url("/assets/tv-art/cybercity-v1.webp")}
.skin-ion{--tv-bg:#0b1118;--tv-surface:#16222d;--tv-ink:#f1f8ff;--tv-accent:#b5dfff;--tv-muted:#adbbc9;--tv-line:#3b5264;--tv-art:linear-gradient(90deg,#0b111826,#0b111859 50%,#0b111826),url("/assets/tv-art/ion-v1.webp");--tv-art-position:70% center}
.skin-aurora{--tv-bg:#071815;--tv-surface:#112b27;--tv-ink:#f0fff8;--tv-accent:#a0f5c5;--tv-muted:#b1cabe;--tv-line:#37594c;--tv-art:linear-gradient(90deg,#07181526,#07181559 50%,#07181526),url("/assets/tv-art/aurora-v1.webp");--tv-art-position:25% center}
.skin-obsidian{--tv-bg:#110e0d;--tv-surface:#241c19;--tv-ink:#fff4e9;--tv-accent:#edb58d;--tv-muted:#c6b6a9;--tv-line:#654d3d;--tv-art:linear-gradient(90deg,#110e0d26,#110e0d59 50%,#110e0d26),url("/assets/tv-art/obsidian-v1.webp")}
.skin-sakura{--tv-bg:#170f15;--tv-surface:#291c25;--tv-ink:#fff3f7;--tv-accent:#efbacd;--tv-muted:#c9b1bf;--tv-line:#644655;--tv-art:linear-gradient(90deg,#170f1526,#170f1559 50%,#170f1526),url("/assets/tv-art/sakura-v1.webp");--tv-art-position:65% center}
.skin-nexus .tvs-time{font-weight:400;color:var(--tv-accent)}
.skin-nexus .tvs-holo-clock{background:#07191b9e}
.skin-nexus .tvs-metrics{background:#07191bbd;border-radius:0}
.skin-cybercity .tvs-time{font-weight:900}.skin-cybercity .tvs-score-clock{background:#110c199e;border-radius:0}
.skin-cybercity .tvs-metrics{background:#110c19bd;border-radius:0}
.skin-ion .tvs-main{padding:clamp(16px,2vw,32px);border:1px solid var(--tv-line);border-radius:12px;background:#0b1118bd}
.skin-ion .tvs-card,.skin-ion .tvs-metrics{background:#0b1118bd;border-radius:12px}
.skin-aurora .tvs-metrics{background:#071815bd;border-radius:0}
.skin-obsidian .tvs-royal{background:#110e0d80;border-color:var(--tv-line)}
.skin-obsidian .tvs-time{font-family:Georgia,serif;font-weight:400;color:var(--tv-accent)}
.skin-obsidian .tvs-metrics{background:#110e0d9e;border-radius:0;border-width:1px 0}
.skin-sakura .tvs-deco{background:#170f159e;border-color:var(--tv-line);outline:none}
.skin-sakura .tvs-time{font-family:Georgia,serif;font-weight:400;color:var(--tv-accent)}
.skin-sakura .tvs-metrics{background:#170f1580;border-radius:0;border-width:1px 0}
.skin-nexus .thumb-clock{font-weight:400;fill:var(--tv-accent)}
.skin-obsidian .thumb-clock,.skin-sakura .thumb-clock{font-family:Georgia,serif;font-weight:400;fill:var(--tv-accent)}
.skin-cybercity .thumb-clock{font-weight:900}
@media(min-width:768px){.skin-ion,.skin-aurora,.skin-sakura{--tv-art-position:center}}
@media(min-width:1024px){.skin-aurora .tvs-metrics{grid-template-columns:1fr}.skin-aurora .tvs-metric{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:16px;border-left:0;border-bottom:1px solid var(--tv-line)}.skin-aurora .tvs-metric b{margin:0}.skin-aurora .tvs-next{text-align:left}}

/* Championship trophy imagery: same readable clock and linked tournament rail. */
.skin-champion{--tv-bg:#120f0b;--tv-surface:#251f15;--tv-ink:#fff8ea;--tv-accent:#f0d28b;--tv-muted:#cbbda3;--tv-line:#675638;--tv-art:linear-gradient(90deg,#120f0b33,#120f0b59 50%,#120f0b33),url("/assets/tv-art/champion-v1.webp");--tv-art-position:25% center}
.skin-champion .tvs-time{font-family:Georgia,serif;font-weight:400;color:var(--tv-accent)}
.skin-champion .tvs-royal{background:#120f0b80;border-color:var(--tv-line)}
.skin-champion .tvs-metrics{background:#120f0b9e;border-radius:0;border-width:1px 0}
.skin-champion .thumb-clock{font-family:Georgia,serif;font-weight:400;fill:var(--tv-accent)}
.tvs-trophy{display:block;width:32px;height:32px;margin:auto}.thumb-trophy{color:var(--tv-accent)}
@media(min-width:768px){.skin-champion{--tv-art-position:center}}

/* Seasonal effects belong to the numeral caps, keeping data and clock updates intact.
 * User reference lock: snow / petals / leaves resting on letters; reflected summer light.
 * Falling particles collide with glyphs and accumulate in the overlay canvas.
 */
.skin-spring{--tv-bg:#180e18;--tv-surface:#2c1c29;--tv-ink:#fff2f8;--tv-accent:#f4bad7;--tv-muted:#d0b4c7;--tv-line:#624354;--tv-art:linear-gradient(90deg,#180e1833,#180e1859 50%,#180e1833),url("/assets/tv-art/spring-v1.webp")}
.skin-summer{--tv-bg:#071b20;--tv-surface:#0e2b32;--tv-ink:#fff8dc;--tv-accent:#ffdf91;--tv-muted:#bdd1cb;--tv-line:#3c5d5e;--tv-art:linear-gradient(90deg,#071b2026,#071b2059 50%,#071b2026),url("/assets/tv-art/summer-v1.webp")}
.skin-autumn{--tv-bg:#1a100c;--tv-surface:#2c1d13;--tv-ink:#fff0df;--tv-accent:#ffc18a;--tv-muted:#d0b8a4;--tv-line:#674835;--tv-art:linear-gradient(90deg,#1a100c33,#1a100c59 50%,#1a100c33),url("/assets/tv-art/autumn-v1.webp")}
.skin-winter{--tv-bg:#0a1724;--tv-surface:#132b40;--tv-ink:#d8f1ff;--tv-accent:#bdefff;--tv-muted:#b8cbde;--tv-line:#385570;--tv-art:linear-gradient(90deg,#0a172433,#0a172459 50%,#0a172433),url("/assets/tv-art/winter-v1.webp")}
.skin-rain{--tv-bg:#091922;--tv-surface:#142c37;--tv-ink:#e2f3f8;--tv-accent:#a6d9e9;--tv-muted:#b5cbd5;--tv-line:#355564;--tv-art:linear-gradient(90deg,#09192299,#091922b3 50%,#09192299),url("/assets/tv-art/cybercity-v1.webp")}
.tvs-season{flex:1;display:grid;align-content:center;gap:clamp(18px,2.5vh,30px);width:100%;max-width:1450px;align-self:center}
.tvs-season-clock{position:relative;isolation:isolate;display:grid;gap:20px;padding:clamp(16px,2.5vw,36px);border:1px solid var(--tv-line);background:color-mix(in srgb,var(--tv-bg) 76%,transparent);border-radius:14px}
.tvs-season-fall{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;border-radius:inherit}
.skin-animation-badge{display:inline-flex;align-items:center;min-width:0;padding:3px 8px;border:1px solid #547463;border-radius:4px;background:#233c30;color:#d5ebde;font-size:12px;line-height:1.5}
.tvs-season .tvs-metrics{background:color-mix(in srgb,var(--tv-bg) 82%,transparent)}
.tvs-season-time{display:flex;justify-content:center;align-items:baseline;gap:0;letter-spacing:0;font-weight:700;line-height:1.3;font-size:clamp(50px,16vw,260px)}
.tvs-digit,.tvs-colon{position:relative;display:block;flex:0 0 auto;text-align:center;line-height:1.3}
.tvs-digit{width:.74em}.tvs-colon{width:.44em}
.skin-winter .tvs-digit{color:#c4eaff;text-shadow:0 2px 0 #638aa6,0 0 24px #bdefff22}
.skin-summer .tvs-digit{color:#ffe9ab;text-shadow:0 0 24px #ffd27333}
@supports(background-clip:text){.skin-summer .tvs-digit{background:linear-gradient(125deg,#fff9dc 12%,#ffc65e 32%,#ffffff 43%,#ffeac2 48%,#f0b949 64%,#fff6d6 88%);background-clip:text;-webkit-background-clip:text;color:transparent}}
.skin-summer .tvs-season-clock{background:linear-gradient(135deg,transparent 60%,#ffdb6e0d 70%,transparent 77%),#071b20bd}
.skin-summer .thumb-clock{fill:url(#summer-thumb-ink)}

/* User's winter cabin reference: honey-gold windows against blue dusk. */
.skin-cabin{--tv-bg:#0e1928;--tv-surface:#172332;--tv-ink:#fff3de;--tv-accent:#f3cd91;--tv-muted:#dfd8cc;--tv-line:#ffffff38;--tv-art:linear-gradient(180deg,#09132140,#09132126 55%,#09132180),url("/assets/tv-art/cabin-v1.webp");--tv-art-position:75% center}
.tvs:has(.tvs-screen-weather){position:relative}
.skin-cabin .tvs-season-clock{background:#101a295e;border-color:#f3cd9145;box-shadow:0 16px 60px #050d1826}
.skin-cabin .tvs-digit,.skin-cabin .tvs-colon{color:#fff3de;text-shadow:0 2px 8px #0b1529,0 0 36px #e9b86226}
.skin-cabin .tvs-metrics{background:#101a299e}
.tvs .tvs-screen-weather{border-radius:0}
@media(min-width:768px){.skin-cabin{--tv-art-position:center}}
/* Font selection keeps the existing TV hierarchy and native radio keyboard behavior. */
@font-face{font-family:Holin DSEG7;src:url('/assets/tv-fonts/DSEG7Classic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Holin DSEG14;src:url('/assets/tv-fonts/DSEG14Classic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Holin Orbitron;src:url('/assets/tv-fonts/Orbitron.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:Holin Chakra;src:url('/assets/tv-fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
.font-digital7{--timer-font:'Holin DSEG7',monospace}
.font-digital14{--timer-font:'Holin DSEG14',monospace}
.font-orbitron{--timer-font:'Holin Orbitron',Arial,sans-serif}
.font-chakra{--timer-font:'Holin Chakra',Arial,sans-serif}
.font-mono{--timer-font:ui-monospace,'Courier New',monospace}
.font-serif{--timer-font:Georgia,'Times New Roman',serif}
.tvs:not(.font-default) .tvs-time,.tv-font-sample{font-family:var(--timer-font,Arial,sans-serif);font-weight:700;font-style:normal}
.tvs.font-digital7 .tvs-time,.tvs.font-digital14 .tvs-time{letter-spacing:0}
.tv-font-picker{margin:24px 0 32px}
.tv-font-picker fieldset{border:0;padding:0;margin:0;min-width:0}
.tv-font-picker legend{font-size:18px;font-weight:700}
.tv-font-picker p{font-size:14px;line-height:1.6;overflow-wrap:anywhere;word-break:keep-all}
.tv-font-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tv-font-option{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:18px 12px;border:1px solid var(--line,#34443b);border-radius:12px;cursor:pointer;background:#ffffff03;overflow-wrap:anywhere;word-break:keep-all}
.tv-font-option:has(:checked){border-color:#c9ee8b;background:#c9ee8b0a}
.tv-font-option:focus-within{outline:2px solid #c9ee8b;outline-offset:3px}
.tv-font-option input{position:absolute;right:10px;top:10px;width:18px;height:18px;margin:0;accent-color:#c9ee8b}
.tv-font-sample{font-size:clamp(22px,3vw,34px);line-height:1.6;letter-spacing:0;margin-top:10px}
.tv-font-option b{font-size:14px;line-height:1.5}
.tv-font-option>.muted{font-size:12px;line-height:1.6}
.tv-font-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.tv-font-actions .btn{min-height:44px;white-space:normal;overflow-wrap:anywhere}
@media(min-width:768px){.tv-font-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The entire sample card is the native radio's touch target. */
.tv-font-option input{inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tv-font-option::after{content:"";position:absolute;right:12px;top:12px;width:14px;height:14px;border:1px solid #829284;border-radius:50%;pointer-events:none}
.tv-font-option:has(:checked)::after{background:#c9ee8b;border-color:#c9ee8b;box-shadow:inset 0 0 0 3px #1b2c20}
/* Digital and geometric glyphs need their full advance width for collision masks. */
.tvs.font-digital7 .tvs-digit,.tvs.font-digital14 .tvs-digit,.tvs.font-orbitron .tvs-digit{width:.96em}
.tvs.font-mono .tvs-colon{width:.7em}
.tv-size-control{margin-top:24px;max-width:640px}
.tv-size-control label{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;min-height:44px}
.tv-size-control output{color:#c9ee8b;font-weight:700}
.tv-size-control input{display:block;width:100%;min-height:44px;padding:0;accent-color:#c9ee8b}
.tv-size-marks{display:flex;justify-content:space-between;gap:12px;color:var(--muted,#a0afa5);font-size:12px;line-height:1.5}
/* Original tournament venues: cool arena, red final table and gold/green casino hall. */
.skin-mainstage{--tv-bg:#071320;--tv-surface:#102338;--tv-ink:#edf6ff;--tv-accent:#7bc5ff;--tv-muted:#b3c9dd;--tv-line:#395670;--tv-art:linear-gradient(180deg,#07132026,#07132040 55%,#07132080),url('/assets/tv-art/mainstage-v1.webp');--tv-art-position:65% center}
.skin-mainstage .tvs-score-clock{background:#07132073;border-color:var(--tv-accent);border-radius:0}
.skin-mainstage .tvs-time{font-weight:900;font-size:clamp(68px,min(21vw,24vh),360px)}
.skin-mainstage .tvs-metrics{background:#071320a8;border-radius:0}
.skin-finale{--tv-bg:#190d0d;--tv-surface:#291717;--tv-ink:#fff4e6;--tv-accent:#edbf82;--tv-muted:#d6bfae;--tv-line:#795242;--tv-art:linear-gradient(180deg,#190d0d26,#190d0d40 55%,#190d0d73),url('/assets/tv-art/finale-v1.webp')}
.skin-finale .tvs-crimson-clock{background:#190d0d73;border-color:var(--tv-accent)}
.skin-finale .tvs-time{font-weight:900;font-size:clamp(68px,16vw,260px)}
.skin-finale .tvs-metrics{border-radius:0;background:#190d0d9e}
.skin-grandhall{--tv-bg:#0d1813;--tv-surface:#19251c;--tv-ink:#fff3dc;--tv-accent:#e3c38d;--tv-muted:#ccc4b3;--tv-line:#665f42;--tv-art:linear-gradient(180deg,#0d181326,#0d181340 55%,#0d181373),url('/assets/tv-art/grandhall-v1.webp');--tv-art-position:65% center}
.skin-grandhall .tvs-time{font-family:Georgia,serif;font-weight:400;font-size:clamp(68px,min(19vw,22vh),320px);color:var(--tv-accent)}
.skin-grandhall .tvs-metrics{border-radius:0;border-width:1px 0;background:#0d18138c}
.skin-grandhall .thumb-clock{font-family:Georgia,serif;font-weight:400;fill:var(--tv-accent)}
@media(min-width:768px){.skin-mainstage,.skin-grandhall{--tv-art-position:center}}
@media(min-width:1024px){.skin-finale .tvs-time{font-size:clamp(68px,14vw,260px)}.skin-finale .tvs-metrics{grid-template-columns:1fr}.skin-finale .tvs-metric+.tvs-metric{border-left:0;border-top:1px solid var(--tv-line)}}