/* CMB OVERZICHT - opmaak (zelfde sfeer als de CMB-speler, zonder frames) */
:root { --cyan:#63f6ff; --magenta:#ff5bc8; --gold:#ffd166; --white:#f7f7ff; --muted:#a8aac8; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; background: #05060d; color: var(--white); font-family: 'Segoe UI', system-ui, 'Noto Color Emoji', sans-serif; }
body {
    background: radial-gradient(circle at 10% 20%, #12333b 0, transparent 35%), radial-gradient(circle at 90% 80%, #32142f 0, transparent 35%), linear-gradient(135deg, #05060d, #120d27, #070812);
    background-attachment: fixed;
    display: flex; justify-content: center; align-items: flex-start; padding: 4px 12px 24px; position: relative;
}
body { scrollbar-width: thin; }

/* Achtergrond: één geheel, de tegels liggen eroverheen */
#ov-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ov-bg-media { position: absolute; inset: 0; }
.ov-bg-media img, .ov-bg-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-bg-dark { position: absolute; inset: 0; background: #000; }

.ov-app { width: 100%; max-width: 1180px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; padding-top: 30px; }

/* Topmenu (standaard verborgen via beheer) */
.ov-roof { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; gap: 6px; align-items: flex-start; justify-content: center; }
.ov-roof-link { background: rgba(12,14,26,.75); backdrop-filter: blur(10px); border: 1px solid rgba(99,246,255,.28); border-top: none; border-radius: 0 0 8px 8px; padding: 0 13px; font-family: 'Inter','Segoe UI',sans-serif; font-size: 10.5px; font-weight: 600; color: var(--cyan); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; height: 24px; display: inline-flex; align-items: center; white-space: nowrap; transition: .2s; }
.ov-roof-link:hover { filter: brightness(1.35); transform: translateY(1px); }

/* Kop: logo, titel, weer, tijd, midden */
.ov-topbar { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 0 4px; }
.ov-topbar > * { min-width: 0; }
.ov-logo { width: 48px; height: 48px; border-radius: 14px; background: #0c0e1a; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--cyan); flex-shrink: 0; overflow: hidden; }
.ov-logo img { width: 100%; height: 100%; object-fit: cover; }
.ov-brand-content { display: flex; align-items: center; }
.ov-brand-text h1 { font-size: clamp(18px, 4vw, 22px); font-weight: 900; line-height: 1.1; letter-spacing: .05em; }
.ov-brand-text span { font-size: clamp(10px, 2.5vw, 12px); letter-spacing: .15em; text-transform: uppercase; }
.ov-widget-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ov-widget-item small { display: block; font-size: 12px; text-transform: uppercase; font-weight: bold; margin-bottom: 2px; }
.ov-widget-item span { font-size: clamp(20px, 4.5vw, 25px); font-weight: 800; line-height: 1.1; }
.ov-widget-sub { font-size: 12px; margin-top: 3px; font-weight: 600; white-space: nowrap; text-transform: capitalize; }
.ov-topbar > :first-child { text-align: left; align-items: flex-start; }
.ov-topbar > :last-child { text-align: right; align-items: flex-end; }
.ov-mid-notify { text-align: center; font-size: 13px; }
.ov-sec-door { cursor: default; }

/* Sitebrede tekstregel */
.ov-line { width: 100%; text-align: center; padding: 6px 10px; background: rgba(8,10,22,.45); border-radius: 10px; border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.ov-line.is-scroll { white-space: nowrap; text-align: left; }
.ov-line-run { display: inline-block; padding-left: 100%; animation: ovRun 25s linear infinite; }
@keyframes ovRun { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ov-line:hover .ov-line-run { animation-play-state: paused; }

/* Tegels: 2 naast elkaar (1 op telefoon) */
.ov-grid { display: grid; grid-template-columns: repeat(var(--ov-cols, 2), minmax(0, 340px)); justify-content: center; gap: 16px 16px; align-items: start; width: 100%; margin-top: 4px; }
.ov-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }
.ov-empty a { color: var(--cyan); }
.ov-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ov-name { text-align: center; font-weight: 800; letter-spacing: .04em; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.ov-info { text-align: center; line-height: 1.45; padding: 0 6px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }

.ov-tile {
    --tb: var(--ov-acc, #63f6ff);
    position: relative; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
    background: rgba(10,12,24,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: var(--ov-bw, 2px) solid var(--tb); transition: transform .2s, box-shadow .2s;
}
.ov-tile:hover { transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in srgb, var(--tb) 55%, transparent), 0 10px 30px rgba(0,0,0,.55); }
.ov-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; cursor: pointer; }
.ov-top { display: grid; grid-template-columns: 30% 1fr; gap: 8px; align-items: stretch; }
.ov-logobox { border-radius: 12px; background: rgba(5,6,14,.7); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 1 1 0; min-height: 0; }
.ov-logobox img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ov-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.ov-logo-ph { font-size: 26px; color: var(--muted); }
.ov-prev { position: relative; border-radius: 10px; overflow: hidden; background: #05060d; border: 1px solid rgba(255,255,255,.1); aspect-ratio: 16 / 10; }
.ov-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-prev iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; pointer-events: none; background: #05060d; }
.ov-prev-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

.ov-ctl { display: flex; align-items: center; justify-content: space-between; gap: 6px; position: relative; z-index: 3; }
.ov-nostream { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.ov-btn {
    width: 34px; height: 34px; border-radius: 10px; background: rgba(12,14,26,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--tb); cursor: pointer; touch-action: manipulation;
    border: var(--ov-bw, 2px) solid var(--tb); display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0;
    box-shadow: 0 0 15px color-mix(in srgb, var(--tb) 28%, transparent); transition: transform .15s, background .2s;
}
.ov-btn:hover { background: rgba(30,34,60,.95); }
.ov-btn:active { transform: scale(.92); }
.ov-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ov-play .i-pause { display: none; }
.ov-tile.is-playing .ov-play .i-play { display: none; }
.ov-tile.is-playing .ov-play .i-pause { display: block; }
.ov-play .i-buf { display: none; position: absolute; inset: -5px; border-radius: 13px; border: 2px solid transparent; border-top-color: var(--tb); animation: ovSpin .8s linear infinite; }
.ov-tile.is-buf .ov-play .i-buf { display: block; }
.ov-tile.is-err .ov-play { border-color: #ff5470; color: #ff5470; }
/* Artiest en nummer, klein onderin de tegel */
.ov-np { position: relative; z-index: 3; pointer-events: none; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.85); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.ov-np[hidden] { display: none; }
@keyframes ovSpin { to { transform: rotate(360deg); } }

.ov-volwrap { display: flex; align-items: center; }
.ov-vol { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; align-items: center; gap: 5px; white-space: nowrap; background: rgba(12,14,26,.9); border: 1px solid color-mix(in srgb, var(--tb) 70%, transparent); border-radius: 12px; padding: 5px 7px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.ov-volwrap.open .ov-vol { display: flex; }
.ov-vm { width: 24px; height: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--white); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; }
.ov-vtrack { display: flex; gap: 5px; align-items: center; }
.ov-vi { width: 14px; height: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; color: rgba(255,255,255,.25); }
.shape-blocks .ov-vi { border: 1px solid var(--tb); border-radius: 2px; }
.shape-blocks .ov-vi.active { background: var(--tb); box-shadow: 0 0 6px var(--tb); }
.shape-dots .ov-vi { border: 1px solid var(--tb); border-radius: 50%; }
.shape-dots .ov-vi.active { background: var(--tb); box-shadow: 0 0 6px var(--tb); }
.shape-stars .ov-vi::before { content: "★"; font-size: 13px; }
.shape-stars .ov-vi.active { color: var(--gold); text-shadow: 0 0 6px var(--gold); }
.shape-hearts .ov-vi::before { content: "♥"; font-size: 13px; }
.shape-hearts .ov-vi.active { color: var(--magenta); text-shadow: 0 0 6px var(--magenta); }

/* Onderkant */
.ov-sub-footer { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 4px 6px; font-size: 11px; color: var(--muted); letter-spacing: .1em; margin-top: 4px; gap: 10px; }
#ov-bl { flex: 0 0 50%; max-width: 50%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ov-br { flex: 0 0 50%; max-width: 50%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-pl-center-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 6px; position: relative; z-index: 10; width: 100%; }
.ov-pl-toggle-btn { width: 22px; height: 22px; background: rgba(5,6,14,.8); border: 1px solid var(--ov-acc, #63f6ff); transform: rotate(45deg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ov-pl-toggle-btn span { transform: rotate(-45deg); font-size: 11px; color: var(--ov-acc, #63f6ff); }
.ov-platform-bar { display: none; gap: 8px; margin-top: 10px; padding: 4px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.ov-platform-bar.open { display: flex; }
.ov-pl-item { width: 42px; height: 42px; border-radius: 12px; background: rgba(12,14,26,.7); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 16px; transition: transform .2s, border-color .2s; position: relative; overflow: hidden; }
.ov-pl-item:hover { transform: translateY(-3px); border-color: var(--ov-acc, #63f6ff); }
.ov-pl-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-pl-item .ov-pl-txt { position: relative; z-index: 1; text-shadow: 0 1px 3px #000, 0 0 2px #000; padding: 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ov-pl-item.wide { width: 78px; font-size: 10px; font-weight: 900; letter-spacing: .08em; }

.ov-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(5,6,14,.88); backdrop-filter: blur(22px); display: none; align-items: center; justify-content: center; padding: 16px; }
.ov-lightbox.open { display: flex; }
.ov-lightbox-modal { background: #090a16; border: 1px solid rgba(99,246,255,.45); box-shadow: 0 25px 70px rgba(0,0,0,.95); border-radius: 20px; max-width: 620px; width: 100%; position: relative; }
.ov-lightbox-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,23,68,.88); border: 2px solid rgba(255,255,255,.4); color: #fff; font-size: 18px; font-weight: bold; cursor: pointer; }

@media (max-width: 760px) {
    .ov-grid { grid-template-columns: minmax(0, 360px) !important; }
    .ov-app { padding-top: 32px; }
    .ov-topbar { flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; }
    .ov-topbar > * { flex: 1 1 40%; }
    .ov-topbar > .ov-mid-notify { flex: 1 1 100%; order: 9; }
    .ov-topbar > :first-child { flex: 0 0 auto; }
    .ov-pl-item { width: 36px; height: 36px; font-size: 14px; }
    .ov-pl-item.wide { width: 68px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ov-line-run { animation: none; padding-left: 0; } .ov-tile { transition: none; } }