html[data-theme="dark"] body{background:#070b12!important;color:#e7edf7!important} html[data-theme="dark"] .site-footer,html[data-theme="dark"] .panel,html[data-theme="dark"] .page-card,html[data-theme="dark"] .admin-card,html[data-theme="dark"] .chat,html[data-theme="dark"] .participants,html[data-theme="dark"] .modal-box,html[data-theme="dark"] .settings-accordion,html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:#0d1420!important;color:#e7edf7!important;border-color:#263449!important} html[data-theme="light"] body{background:#f4f7fb!important;color:#182230!important} html[data-theme="light"] .site-footer,html[data-theme="light"] .panel,html[data-theme="light"] .page-card,html[data-theme="light"] .admin-card,html[data-theme="light"] .chat,html[data-theme="light"] .participants,html[data-theme="light"] .modal-box,html[data-theme="light"] .settings-accordion{background-color:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff!important;color:#182230!important;border-color:#cbd5e1!important} html[data-theme="light"] .muted,html[data-theme="light"] small{color:#64748b!important} /* EPICSOLO 1.8.5 — light-mode parity for surfaces that were previously hard-coded dark. */ html[data-theme="light"] body:has(.room-page), html[data-theme="light"] body.admin-page{background:#f4f7fb!important;color:#182230!important} html[data-theme="light"] .room-page .starter-panel, html[data-theme="light"] .room-page.layout-lobby .starter-panel, html[data-theme="light"] .room-page .settings-accordion, html[data-theme="light"] .room-page .watchers-dialog, html[data-theme="light"] .room-page .media-settings-dialog, html[data-theme="light"] .room-page .resize-dropdown, html[data-theme="light"] .room-page .participants, html[data-theme="light"] .room-page .visitors-panel, html[data-theme="light"] .room-page .visitor-actions, html[data-theme="light"] .room-page .chat-settings-button, html[data-theme="light"] .room-page .chat-managed-item, html[data-theme="light"] .room-page .settings-choice, html[data-theme="light"] .room-page .settings-font-controls button, html[data-theme="light"] .room-page .settings-link-card, html[data-theme="light"] .room-page .settings-primary-link{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .room-page .starter-video-wrap, html[data-theme="light"] .room-page .self-video-wrap, html[data-theme="light"] .room-page .visitor-video-frame, html[data-theme="light"] .room-page .visitor-tile{background:#eef2f7!important;border-color:#d7dee8!important} html[data-theme="light"] .room-page .browser-thumb, html[data-theme="light"] .room-page .browser-room{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .room-page .starter-offline, html[data-theme="light"] .room-page .lobby-cam-offline{background:#f8fafc!important;color:#64748b!important;border-color:#d7dee8!important} html[data-theme="light"] .room-page .lobby-solo-cam-card{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .room-page .global-message-form textarea, html[data-theme="light"] .room-page .chat-reaction-menu, html[data-theme="light"] .room-page .participant-meta-tooltip{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .admin-page .admin-nav button, html[data-theme="light"] .admin-page .admin-cam-card, html[data-theme="light"] .admin-page .admin-user-row, html[data-theme="light"] .admin-page .admin-table .thead, html[data-theme="light"] .admin-page .user-lookup-result, html[data-theme="light"] .admin-page .chat-log-content, html[data-theme="light"] .admin-page .user-context-menu, html[data-theme="light"] .admin-page .staff-context-menu, html[data-theme="light"] .admin-page .staff-own-context-menu{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .admin-page .admin-nav button:hover, html[data-theme="light"] .admin-page .admin-nav button.active, html[data-theme="light"] .admin-page .admin-table .thead{background:#eef3f8!important} html[data-theme="light"] .admin-page .admin-row, html[data-theme="light"] .admin-page .log-line, html[data-theme="light"] .admin-page .participant-row, html[data-theme="light"] .admin-page .watcher-row{background:transparent!important;color:#182230!important} html[data-theme="light"] .admin-page .admin-cam-actions button, html[data-theme="light"] .admin-page .user-lookup-actions button{background:#fff!important;color:#182230!important;border-color:#cbd5e1!important} html[data-theme="light"] .admin-page .admin-cam-media{background:#e8edf4!important} html[data-theme="light"] .admin-page .admin-cam-thumb-empty{background:#e8edf4!important} html[data-theme="light"] .admin-page .admin-notice, html[data-theme="light"] .admin-page .staff-notice{background:#f8fafc!important;color:#334155!important;border-color:#cbd5e1!important} html[data-theme="light"] .admin-page .admin-review-window{background:#fff!important;color:#182230!important;border-color:#d7dee8!important;box-shadow:0 24px 90px rgba(71,85,105,.22),0 0 0 100vmax rgba(15,23,42,.20)!important} html[data-theme="light"] .admin-page .admin-review-head{background:#f8fafc!important;color:#182230!important;border-bottom-color:#d7dee8!important} html[data-theme="light"] .admin-page .admin-review-window iframe{background:#f4f7fb!important} html[data-theme="light"] .admin-webcam-preview-page{background:#f4f7fb!important;color:#182230!important} html[data-theme="light"] .admin-webcam-preview-page .admin-preview-group{background:linear-gradient(145deg,#fff,#f5f8fc)!important;border-color:#d5deea!important} html[data-theme="light"] .admin-webcam-preview-page .admin-preview-card{background:#fff!important;color:#182230!important;border-color:#d5deea!important} html[data-theme="light"] .admin-webcam-preview-page .admin-preview-media{background:#e8edf4!important} /* Lobby artwork is selected by seasonal-theme.js from separate light/dark asset folders. */ html[data-theme="dark"] .lobby-room-card .preview, html[data-theme="dark"] .room-page.layout-lobby .starter-video-wrap{background-image:var(--lobby-background-image)!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important} html[data-theme="light"] .lobby-room-card .preview, html[data-theme="light"] .room-page.layout-lobby .starter-video-wrap{background-image:var(--lobby-background-image)!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important} html[data-theme="light"] .room-page.layout-lobby .starter-video-wrap{box-shadow:none!important} /* Light-mode parity for remaining dark utility/media/admin surfaces. */ html[data-theme="light"] .drag-drop-area, html[data-theme="light"] .cookie-details-close, html[data-theme="light"] .admin-ip-link, html[data-theme="light"] .visitor-badge, html[data-theme="light"] .live-badge, html[data-theme="light"] .visitor-floating-head, html[data-theme="light"] .admin-chat-gif, html[data-theme="light"] .private-webcam-request-actions, html[data-theme="light"] .ip-geo-grid, html[data-theme="light"] .epicsolo-bot-toast, html[data-theme="light"] .staff-guest-preview-card, html[data-theme="light"] .staff-guest-preview-media, html[data-theme="light"] .lobby-cam-media{background:#fff!important;color:#182230!important;border-color:#d7dee8!important} html[data-theme="light"] .chat-youtube-thumb{background:#eef2f7!important;border-color:#d7dee8!important} html[data-theme="light"] .visitor-badge, html[data-theme="light"] .live-badge{color:#334155!important} html[data-theme="light"] .epicsolo-bot-toast{box-shadow:0 18px 50px rgba(71,85,105,.20)!important} /* The maintenance/waiting page uses its own compact markup. */ html[data-theme="light"] body:has(.card) .card{background:#fff!important;color:#182230!important;border-color:#d7dee8!important;box-shadow:0 30px 100px rgba(71,85,105,.20)!important} html[data-theme="light"] body:has(.card) .bar{background:#e2e8f0!important} html[data-theme="light"] body:has(.card) .note{color:#64748b!important} html[data-theme="light"] body:has(.card){background:radial-gradient(circle at top,#f3f7fc 0,#eef2f7 48%,#e8edf4 100%)!important;color:#182230!important} /* Final theme parity layer: light means light, dark means dark. */ html[data-theme="light"] body, html[data-theme="light"] .room-page, html[data-theme="light"] .admin-page { background:#f4f7fb!important; color:#182230!important; } html[data-theme="light"] .room-page .starter-panel, html[data-theme="light"] .room-page .chat, html[data-theme="light"] .room-page .chat-panel, html[data-theme="light"] .room-page .participants, html[data-theme="light"] .room-page .visitors-panel, html[data-theme="light"] .room-page .settings-accordion, html[data-theme="light"] .room-page .settings-choice, html[data-theme="light"] .room-page .settings-link-card, html[data-theme="light"] .room-page .settings-primary-link, html[data-theme="light"] .room-page .chat-managed-item, html[data-theme="light"] .room-page .chat-input-row, html[data-theme="light"] .room-page .chat-heading, html[data-theme="light"] .room-page .browser-room, html[data-theme="light"] .room-page .browser-thumb, html[data-theme="light"] .room-page .room-card, html[data-theme="light"] .room-page .room-meta, html[data-theme="light"] .room-page .visitor-tile, html[data-theme="light"] .room-page .lobby-solo-cam-card{ background:#fff!important; color:#182230!important; border-color:#d7dee8!important; } html[data-theme="light"] .room-page .starter-video-wrap, html[data-theme="light"] .room-page .self-video-wrap, html[data-theme="light"] .room-page .visitor-video-frame, html[data-theme="light"] .room-page .lobby-cam-media, html[data-theme="light"] .room-page .starter-offline, html[data-theme="light"] .room-page .lobby-cam-offline { background-color:#eef2f7!important; color:#526173!important; border-color:#d7dee8!important; } html[data-theme="light"] .room-page input, html[data-theme="light"] .room-page select, html[data-theme="light"] .room-page textarea, html[data-theme="light"] .admin-page input, html[data-theme="light"] .admin-page select, html[data-theme="light"] .admin-page textarea { background:#fff!important; color:#182230!important; border-color:#cbd5e1!important; } html[data-theme="light"] .room-page .chat-reaction-menu, html[data-theme="light"] .room-page .participant-meta-tooltip, html[data-theme="light"] .room-page .watchers-dialog, html[data-theme="light"] .room-page .media-settings-dialog, html[data-theme="light"] .room-page .resize-dropdown, html[data-theme="light"] .room-page .emoji-picker, html[data-theme="light"] .room-page .gif-picker{ background:#fff!important; color:#182230!important; border-color:#d7dee8!important; box-shadow:0 18px 50px rgba(71,85,105,.18)!important; } html[data-theme="light"] .admin-page .admin-card, html[data-theme="light"] .admin-page .admin-nav, html[data-theme="light"] .admin-page .admin-cam-card, html[data-theme="light"] .admin-page .admin-user-row, html[data-theme="light"] .admin-page .admin-table, html[data-theme="light"] .admin-page .admin-review-window, html[data-theme="light"] .admin-page .admin-notice, html[data-theme="light"] .admin-page .staff-notice { background:#fff!important; color:#182230!important; border-color:#d7dee8!important; } html[data-theme="light"] .admin-page .admin-cam-media, html[data-theme="light"] .admin-page .admin-cam-thumb-empty, html[data-theme="light"] .admin-page .admin-preview-media { background:#eef2f7!important; } html[data-theme="dark"] body, html[data-theme="dark"] .room-page, html[data-theme="dark"] .admin-page { background:#070b12!important; color:#e7edf7!important; } html[data-theme="dark"] .room-page .starter-panel, html[data-theme="dark"] .room-page .chat, html[data-theme="dark"] .room-page .chat-panel, html[data-theme="dark"] .room-page .participants, html[data-theme="dark"] .room-page .visitors-panel, html[data-theme="dark"] .room-page .settings-accordion, html[data-theme="dark"] .room-page .settings-link-card, html[data-theme="dark"] .room-page .chat-managed-item, html[data-theme="dark"] .room-page .browser-room, html[data-theme="dark"] .room-page .room-card, html[data-theme="dark"] .room-page .lobby-solo-cam-card, html[data-theme="dark"] .admin-page .admin-card, html[data-theme="dark"] .admin-page .admin-cam-card, html[data-theme="dark"] .admin-page .admin-user-row { background:#0d1420!important; color:#e7edf7!important; border-color:#263449!important; } /* Instellingen / chat-popups altijd bovenop ALLES (ook de lobby-footercams). De modal leeft binnen .chat-panel; deze laag garandeert dat geen enkele footer-tile of hover-laag er ooit nog boven kan schilderen. */ .room-page .chat-panel{position:relative;z-index:2} .room-page .modal{z-index:100000!important} /* 1.9.97 FIX: de dialoog bleef alsnog ONDER de gezamenlijke-webcams-footer (.visitors-panel) uitkomen. De modal zit ín .room-main-grid, en die grid (z-index:1) én de footer (ook z-index:1, maar LATER in de DOM) zijn broertjes — daardoor schilderde de footer over élk vastgezet dialoog heen, ondanks z-index 100000. De grid wint nu expliciet van de footer; de vaste kop (z-index:5) en de zwevende webcam-viewers (z-index:5000) blijven er zoals voorheen boven. */ .room-page > .room-main-grid{position:relative;z-index:2!important} .room-page > .visitors-panel{z-index:1!important} .room-page #chatSettingsModal .modal-box{max-height:92vh;overflow:auto} .room-page .emoji-picker, .room-page .gif-picker, .room-page .chat-reaction-menu, .room-page .resize-dropdown, .room-page .participant-meta-tooltip{z-index:100001!important} /* ============================================================= 1.9.97 LEESBAARHEID: het ⚙ Instellingen-paneel van de livechat in de lichte modus. De componentcss (chat-settings-v1520.css) kleurt alle koppen/regels donker-thema-wit (#eef4ff) en lichtgrijs (#b8c6dc/#9eacc0), wat op de witte vlakken vrijwel onzichtbaar was — vooral de accordion- tabs ("Chat & meldingen", "Webcam & privacy", …) en de infobalken. ============================================================= */ html[data-theme="light"] .room-page #chatSettingsModal .chat-settings-box, html[data-theme="light"] .room-page #chatSettingsModal .settings-modal-header h2, html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary, html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary strong, html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion-body, html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion-body strong, html[data-theme="light"] .room-page #chatSettingsModal .settings-choice strong, html[data-theme="light"] .room-page #chatSettingsModal .chat-setting-toggle strong, html[data-theme="light"] .room-page #chatSettingsModal .settings-subsection h4, html[data-theme="light"] .room-page #chatSettingsModal .settings-select-label, html[data-theme="light"] .room-page #chatSettingsModal .settings-font-row strong, html[data-theme="light"] .room-page #chatSettingsModal .settings-link-card strong, html[data-theme="light"] .room-page #chatSettingsModal .settings-primary-link{color:#0f172a!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-subtitle, html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary small, html[data-theme="light"] .room-page #chatSettingsModal .settings-choice small, html[data-theme="light"] .room-page #chatSettingsModal .chat-setting-toggle small, html[data-theme="light"] .room-page #chatSettingsModal .settings-subsection p, html[data-theme="light"] .room-page #chatSettingsModal .settings-plain-help, html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-empty, html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-item, html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-item button{color:#475569!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary small, html[data-theme="light"] .room-page #chatSettingsModal .settings-choice small, html[data-theme="light"] .room-page #chatSettingsModal .chat-setting-toggle small{color:#475569!important;font-size:.86rem;line-height:1.4} html[data-theme="light"] .room-page #chatSettingsModal .settings-help-banner{color:#3730a3!important;background:#eef2ff!important;border-color:#c7d2fe!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-info-row{color:#1e3a5f!important;background:#eff6ff!important;border-color:#bfdbfe!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-status{color:#1e3a8a!important;background:#eff6ff!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary{background:#f5f7fb!important;border-color:#e2e8f0!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion summary:hover{background:#eef2ff!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion[open] summary{border-bottom-color:#e2e8f0!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-accordion-body{border-top-color:#e2e8f0!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-chevron{color:#475569!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-summary-icon{filter:none!important} html[data-theme="light"] .room-page #chatSettingsModal .settings-link-card{background:#fff!important;border-color:#d5deea!important} html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-item{background:#f1f5f9!important;border-color:#cbd5e1!important} html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-item button{color:#0f172a!important} html[data-theme="light"] .room-page #chatSettingsModal .chat-managed-item button:hover{color:#b91c1c!important} html[data-theme="light"] .room-page #chatSettingsModal .chat-access-entry button{background:#fff!important;color:#0f172a!important;border-color:#cbd5e1!important} html[data-theme="light"] .room-page #chatSettingsModal .chat-access-entry button:hover{border-color:#7c3aed!important;color:#5b21b6!important} html[data-theme="light"] .room-page #chatSettingsButton{background:#fff!important;color:#172033!important;border-color:#cbd5e1!important;box-shadow:0 1px 0 rgba(15,23,42,.10)} html[data-theme="light"] .room-page #chatSettingsButton:hover{background:#eef2ff!important;border-color:#7c3aed!important;color:#5b21b6!important;filter:none} /* Hover-toolknoppen op webcams in chatkamers: fullscreen / PiP / zweven. Dezelfde hover-flow als de audio-controls (zichtbaar bij :hover). */ .visitor-tool-btn{width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.45);border-radius:7px;background:rgba(8,13,22,.82);color:#e7eef9;font-size:14px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)} .visitor-tool-btn:hover{background:rgba(23,33,51,.92);border-color:rgba(148,163,184,.85);transform:translateY(-1px)} html[data-theme="light"] .visitor-tool-btn{background:rgba(255,255,255,.92);color:#172033;border-color:#cbd5e1} /* Global Messages-knop blijft in BEIDE thema's rood (alert-stijl accent). De licht-thema regels hierboven staan op .admin-nav button met !important; deze herstelregel heeft een hogere specificiteit en wint daarvan. */ html[data-theme="light"] body.admin-page .admin-nav button.global-messages-nav, html[data-theme="light"] .admin-nav button.global-messages-nav{background:#7f1d1d!important;color:#fff!important;border-color:#ef4444!important} html[data-theme="light"] body.admin-page .admin-nav button.global-messages-nav:hover, html[data-theme="light"] .admin-nav button.global-messages-nav:hover{background:#991b1b!important;border-color:#f87171!important} html[data-theme="light"] body.admin-page .admin-nav button.global-messages-nav.active, html[data-theme="light"] .admin-nav button.global-messages-nav.active{background:#991b1b!important;color:#fff!important;border-color:#f87171!important} /* LIGHT THEME: footer-merknaam ("EPICSOLO" + slogan) en ©-regel waren altijd wit (fallback op de donkere --text-fallback #f4f7fb). In light mode werd de merknaam dan bijna onzichtbaar op de lichte achtergrond. Nu expliciet donker in light — op élke pagina en in élke layout. LET OP: bewust vóór de footer-toggle-regels hieronder (cascade-volgorde). */ html[data-theme="light"] .site-footer strong, html[data-theme="light"] .site-footer > div, html[data-theme="light"] .site-footer nav a, html[data-theme="light"] .site-footer small, html[data-theme="light"] .site-footer .footer-disclaimer{color:#334155!important} html[data-theme="light"] .site-footer strong{color:#111827!important;letter-spacing:.08em} html[data-theme="light"] .site-footer nav a:hover{color:#111827!important} /* Footer in room-layouts netjes recht trekken: bij normale kamers loopt de footer synchroon met de room-contentbreedte; bij de full-bleed layouts (gast/bezoeker, beta-tester, lobby) pakt hij de volledige paginabreedte. */ @media(min-width:901px){ body:has(.room-page) > .site-footer{max-width:min(1600px,96vw)!important;margin-left:auto!important;margin-right:auto!important} body:has(.room-page.layout-bezoeker) > .site-footer, body:has(.room-page.layout-beta-tester) > .site-footer, body:has(.room-page.layout-lobby) > .site-footer{max-width:none!important} .site-footer > div,.site-footer > nav,.site-footer > small,.site-footer > .footer-disclaimer{width:100%} } /* EPIC HERO OVERLAY: "Webcam chatten bij EPICSOLO" met zwevende "Go EPIC. Go SOLO."-slogan als subtiel gekleurd text-element bovenin de titel (index.html). Werkt in beide thema's; reduced-motion = geen animatie. */ .epic-hero-go{display:block;font-size:clamp(13px,1.6vw,18px);font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#5eead4;opacity:.85;animation:epic-hero-go-pulse 4s ease-in-out infinite} .epic-hero-go b{color:#7dd3fc;font-weight:900} @keyframes epic-hero-go-pulse{0%,100%{opacity:.7}50%{opacity:1}} html[data-theme="light"] .epic-hero-go{color:#0f766e} html[data-theme="light"] .epic-hero-go b{color:#0369a1} @media (prefers-reduced-motion: reduce){.epic-hero-go{animation:none}} /* LIGHT THEME: staff-previewpanelen (kamerstarter/gast cams preview) wit ipv donker-marine, zodat ze leesbaar zijn op de lichte pagina. */ html[data-theme="light"] .staff-guest-preview-panel{background:linear-gradient(145deg,#f4f8fc,#edf2f8);border-color:#c6d3e3} html[data-theme="light"] .staff-guest-preview-count{border-color:#9fb2c9;color:#33465f} html[data-theme="light"] .staff-guest-preview-card{background:#fff;border-color:#c6d3e3} html[data-theme="light"] .staff-guest-preview-card:hover{border-color:#7d93b1;box-shadow:0 8px 22px rgba(15,23,42,.12)} html[data-theme="light"] .staff-guest-preview-media{background:#e6ecf4} html[data-theme="light"] .staff-guest-preview-body{color:#172033} html[data-theme="light"] .staff-guest-preview-name{color:#172033} html[data-theme="light"] .staff-guest-preview-meta{color:#5b6b80} html[data-theme="light"] .staff-guest-preview-meta span{border-color:#c6d3e3} html[data-theme="light"] .staff-guest-preview-live-badge{background:rgba(255,255,255,.92);border-color:rgba(4,120,87,.45);color:#047857} html[data-theme="light"] .staff-guest-preview-hover-hint{background:rgba(255,255,255,.92);border-color:#9fb2c9;color:#33465f} html[data-theme="light"] .staff-guest-preview-panel .visitor-empty{color:#5b6b80} /* Zelfde bewegende gouden ster op de LOBBY-kaart (klein, naast de favoriet-ster). */ .lobby-room-card .preview::after{ content:"✦";position:absolute;right:12px;top:8px;color:#ffd166;font-size:18px; text-shadow:0 0 8px rgba(255,209,102,.55); animation:solo-spark 2.4s ease-in-out infinite;pointer-events:none; } @keyframes solo-spark{0%,100%{transform:translateY(0) scale(1);opacity:.85}50%{transform:translateY(-4px) scale(1.15);opacity:1}} /* ============================================================= LAYOUT TOGGLES (alle desktop room-layouts) — bediend via de knoppen in .room-nav, persistente voorkeur in localStorage. 1) data-layout-side: webcams-links (standaard) <-> lijst-links 2) data-layout-footer: gezamenlijke-webcams onderaan (standaard) <-> bovenaan De regels zetten alleen RICHTING en VOLGORDE; groottes/hoogtes blijven onaangetast zodat elke bestaande layout behouden blijft. ============================================================= */ @media(min-width:901px){ /* --- 1) ZIJDE-WISSEL — TWEE EXIETENDE RICHTINGEN, niet één: ---- "cams-right" = CAMS RECHTS (lijst links) → areas: participants|chat|webcams "cams-left" = CAMS LINKS (lijst rechts) → areas: webcams|chat|participants Beide staten worden expliciet afgedwongen (ook over inline styles heen), zodat de wissel in ELKE layout symmetrisch werkt en nooit "iets doet". */ /* CAMS RECHTS: lijst smal links, cams breed rechts */ .room-page[data-layout-side="cams-right"] > .room-main-grid{ grid-template-columns:minmax(230px,.72fr) minmax(0,1fr) minmax(260px,.9fr)!important; grid-template-areas:"participants chat webcams"!important; } .room-page[data-layout-side="cams-right"] > .room-main-grid > .starter-panel{grid-area:webcams!important} .room-page[data-layout-side="cams-right"] > .room-main-grid > .participants{grid-area:participants!important} .room-page[data-layout-side="cams-right"] > .room-main-grid > .chat-panel, .room-page[data-layout-side="cams-right"] > .room-main-grid > .chat-panel > .chat{grid-area:chat!important} .room-page[data-layout-side="cams-right"] .room-main-grid[style]{ grid-template-areas:"participants chat webcams"!important; } /* CAMS LINKS: cams breed links, lijst smal rechts (gespiegeld) */ .room-page[data-layout-side="cams-left"] > .room-main-grid{ grid-template-columns:minmax(260px,.9fr) minmax(0,1fr) minmax(230px,.72fr)!important; grid-template-areas:"webcams chat participants"!important; } .room-page[data-layout-side="cams-left"] > .room-main-grid > .starter-panel{grid-area:webcams!important} .room-page[data-layout-side="cams-left"] > .room-main-grid > .participants{grid-area:participants!important} .room-page[data-layout-side="cams-left"] > .room-main-grid > .chat-panel, .room-page[data-layout-side="cams-left"] > .room-main-grid > .chat-panel > .chat{grid-area:chat!important} .room-page[data-layout-side="cams-left"] .room-main-grid[style]{ grid-template-areas:"webcams chat participants"!important; } /* GEBRUIKERSLIJST-GARANTIE (beide richtingen): de gastenlijst woont per layout soms als direct kind van .room-main-grid en soms ín .chat-panel. Zonder deze regels verdwijnt de lijst in de gespiegelde stand (lege kolom) óf valt de chat weg (starter-layout, cams links). Oplossing: het chatblok wordt display:contents zodat chat én lijst elk hun eigen grid-area krijgen — in élke layout (starter, gast, bezoeker, admin-review), onafhankelijk van welke JS-branch gelopen heeft. */ .room-page[data-layout-side="cams-right"] .chat-panel, .room-page[data-layout-side="cams-left"] .chat-panel{display:contents!important} .room-page[data-layout-side="cams-right"] .chat-panel > .chat, .room-page[data-layout-side="cams-left"] .chat-panel > .chat{grid-area:chat!important;width:100%;min-width:0;visibility:visible!important;opacity:1!important} .room-page[data-layout-side="cams-right"] .chat-panel > .participants, .room-page[data-layout-side="cams-left"] .chat-panel > .participants{ grid-area:participants!important;visibility:visible!important;opacity:1!important; width:100%;min-width:0;height:100%;max-height:none;align-self:stretch; display:flex!important;flex-direction:column!important;overflow:auto!important; } .room-page[data-layout-side="cams-right"] .chat-panel > .participants > *, .room-page[data-layout-side="cams-left"] .chat-panel > .participants > *{flex:none} .room-page[data-layout-side="cams-right"] .chat-panel > .participants ul, .room-page[data-layout-side="cams-left"] .chat-panel > .participants ul{flex:1 1 auto;min-height:0;overflow:auto} /* --- 2) FOOTER BOVEN: gezamenlijke webcams boven het hoofdblok --- */ /* LOBBY-GAST FIX (1.8.9): lobby-redesign-v185.css zet op de lobby-gast-pagina display:block !important met hogere specificity (.room-page.A.B), waardoor de footer-toggle hier niets deed (flex/order werden genegeerd). Deze regels hebben de zelfde plus hogere specificity en staan later in de cascade, zodat footer-top ook hier wint. Pagina-padding/marges blijven bewust overeind: alleen de stacking-richting verandert. */ .room-page[data-layout-footer="top"], .room-page.layout-lobby-guest[data-layout-footer="top"], .room-page.layout-bezoeker.layout-lobby[data-layout-footer="top"], .room-page.layout-beta-tester.layout-lobby[data-layout-footer="top"]{display:flex!important;flex-direction:column!important} .room-page[data-layout-footer="top"] > .visitors-panel, .room-page.layout-lobby-guest[data-layout-footer="top"] > .visitors-panel, .room-page.layout-bezoeker.layout-lobby[data-layout-footer="top"] > .visitors-panel, .room-page.layout-beta-tester.layout-lobby[data-layout-footer="top"] > .visitors-panel{order:-1!important;margin:0 0 14px 0!important} .room-page[data-layout-footer="top"] > .room-main-grid, .room-page.layout-lobby-guest[data-layout-footer="top"] > .room-main-grid{order:0} /* Admin lobby-review: staff-previewpanelen blijven ná de gezamenlijke cams (volgorde cams → starter-preview → gast-preview blijft intact). */ .room-page[data-layout-footer="top"] > #staffGuestPreviewPanel{order:0} } /* ============================================================= MOBIELE LAYOUT-TOGGLES (<901px): dezelfde knoppen in .room-nav bedienen hier de stapelvolgorde. Standaard mobiel: webcams boven, chat eronder, gasten onderaan ("gasten onder"). 1) side=cams-right → GASTEN BOVEN de chat (binnen het chatblok) 2) footer=top → gezamenlijke webcams boven het hoofdblok LET OP: de chat-panel kan op mobiel een grid zijn; order werkt alleen in flex. Daarom wordt het chatblok hier expliciet flex gemaakt. ============================================================= */ @media(max-width:900px){ .room-page .chat-panel{display:flex!important;flex-direction:column!important} .room-page .chat-panel > .participants{order:2!important} .room-page .chat-panel > .chat{order:1!important} .room-page[data-layout-side="cams-right"] .chat-panel > .participants{order:0!important} .room-page[data-layout-side="cams-right"] .chat-panel > .chat{order:1!important} .room-page[data-layout-footer="top"], .room-page.layout-lobby-guest[data-layout-footer="top"]{display:flex!important;flex-direction:column!important} .room-page[data-layout-footer="top"] > .visitors-panel, .room-page.layout-lobby-guest[data-layout-footer="top"] > .visitors-panel{order:-1!important;margin:0 0 12px 0!important} .room-page[data-layout-footer="top"] > .room-main-grid, .room-page.layout-lobby-guest[data-layout-footer="top"] > .room-main-grid{order:0} .room-page[data-layout-footer="top"] > #staffGuestPreviewPanel{order:0} } /* ============================================================= EPIC CHEATS: %hawaiiie (minion), %snake en %tetris. Decoratieve overlays: pointer-events:none, bovenop alles, geen scroll. ============================================================= */ .epic-hawaii-overlay{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 9vh;overflow:hidden} .epic-hawaii-label{margin-bottom:18px;padding:8px 16px;border-radius:999px;background:rgba(8,20,14,.86);border:1px solid rgba(110,231,183,.5);color:#a7f3d0;font-weight:900;letter-spacing:.14em;font-size:13px;text-align:center;animation:epic-hawaii-pulse 1.6s ease-in-out infinite} @keyframes epic-hawaii-pulse{0%,100%{opacity:.75;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}} @keyframes epic-hawaii-skirt-sway{0%,100%{transform:translateX(-50%) rotate(5deg)}50%{transform:translateX(-50%) rotate(-5deg)}} @keyframes epic-hawaii-arm-l{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-42deg)}} @keyframes epic-hawaii-arm-r{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(42deg)}} @keyframes epic-hawaii-sway{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-6px)}} /* 1.10.1 — %kinderspeeltuin: dancing baby. Overlay blokkeert de pagina niet (pointer-events:none); alleen het kruisje is klikbaar. Elke klik verdubbelt het aantal baby's; ESC sluit de speeltuin weer af. Werkt in dark én light. */ .epic-dancingbaby-overlay{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden} .epic-dancingbaby-unit{position:fixed;width:150px;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));animation:epic-dancingbaby-pop .28s ease} .epic-dancingbaby-img{display:block;width:150px;height:auto;pointer-events:none} .epic-dancingbaby-close{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;border:2px solid #fecaca;background:#7f1d1d;color:#fff;font-size:15px;font-weight:900;line-height:1;cursor:pointer;pointer-events:auto;box-shadow:0 4px 12px rgba(0,0,0,.5);padding:0} .epic-dancingbaby-close:hover{background:#ef4444;transform:scale(1.1)} @keyframes epic-dancingbaby-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} @media (prefers-reduced-motion: reduce){.epic-dancingbaby-unit{animation:none}} .epic-cheat-game-overlay{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden} .epic-cheat-game-overlay.playable{pointer-events:auto;display:flex;align-items:center;justify-content:center;background:rgba(4,8,14,.72);backdrop-filter:blur(2px)} .epic-cheat-game-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:18px;background:rgba(10,19,32,.96);border:1px solid #2b3c57;box-shadow:0 30px 100px rgba(0,0,0,.5)} .epic-cheat-game-title{font-weight:900;letter-spacing:.12em;color:#e7eef9;font-size:18px} .epic-cheat-game-title .epic-cheat-game-sub{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:#8ea2bd;margin-top:4px;text-align:center} .epic-cheat-game-canvas{display:block;border-radius:10px;border:1px solid #22344d;background:#0a1320;touch-action:none;-webkit-user-select:none;user-select:none} .epic-cheat-game-bar{display:flex;align-items:center;gap:10px;width:100%;max-width:360px} .epic-cheat-game-bar b.epic-cheat-game-score{font-size:20px;color:#6ee7b7;min-width:56px} .epic-cheat-game-bar .epic-cheat-game-best{color:#93a7c2;font-size:11px;flex:1} .epic-cheat-game-bar button{border:1px solid #394b66;background:#141b28;color:#e7eef9;border-radius:9px;padding:7px 10px;font-size:12px;cursor:pointer} .epic-cheat-game-bar button:hover{border-color:#6074a0} /* 1.10 — de BOT-melding (pop-up én inline) moet zijn regeloverslagen behouden; anders klapt bv. de %help-gamelijst in één alinea ineukt. */ #epicsoloBotText{white-space:pre-line} .epicsolo-bot-notification #epicsoloBotText{white-space:pre-line} .epic-cheat-game-bar button.epic-cheat-game-stop{border-color:#7f1d1d;color:#fecaca} .epic-cheat-game-bar button.epic-cheat-game-stop:hover{border-color:#ef4444;color:#fee2e2} .epic-cheat-game-pauselabel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:18px;background:rgba(4,8,16,.82);backdrop-filter:blur(2px);color:#e7eef9;font-weight:900;font-size:20px;letter-spacing:.16em;text-align:center;pointer-events:auto;cursor:pointer;touch-action:manipulation} .epic-cheat-game-pauselabel span{font-size:12px;font-weight:700;letter-spacing:.06em;color:#93a7c2} .epic-cheat-game-pauselabel.hidden{display:none} /* 1.10 — Lingo: hint met de eerste letter + 10-seconden timerbalk. */ .epic-lingo-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;color:#8ea2bd} /* 1.10 — staffOnly-regels blijven voor admins/mods zichtbaar, maar gemarkeerd. */ .chat-staff-only{position:relative;border-left:3px solid #f59e0b!important;padding-left:8px} .chat-staff-only-tag{display:inline-block;margin:2px 0 4px;padding:1px 7px;border-radius:999px;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.55);color:#fbbf24;font-size:9.5px;font-weight:900;letter-spacing:.14em} html[data-theme="light"] .chat-staff-only-tag{background:#fef3c7;border-color:#d97706;color:#92400e} .epic-lingo-hint b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#15803d;border:1px solid #22c55e;color:#fff;font-size:15px;font-weight:900} .epic-lingo-hint span{letter-spacing:.34em;color:#5f7391} .epic-lingo-timer{position:relative;height:18px;border-radius:999px;background:#141b28;border:1px solid #394b66;overflow:hidden} .epic-lingo-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#a3e635);transition:width .12s linear} .epic-lingo-timer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#e7eef9;text-shadow:0 1px 2px rgba(0,0,0,.6)} .epic-lingo-timer.epic-lingo-timer-low i{background:linear-gradient(90deg,#f97316,#ef4444)} .epic-lingo-timer.epic-lingo-timer-low{border-color:#ef4444} html[data-theme="light"] .epic-cheat-game-bar button.epic-cheat-game-stop{background:#fff;color:#991b1b;border-color:#fca5a5} html[data-theme="light"] .epic-cheat-game-pauselabel{background:rgba(255,255,255,.9);color:#172033} html[data-theme="light"] .epic-cheat-game-pauselabel span{color:#475569} html[data-theme="light"] .epic-lingo-hint{color:#475569} html[data-theme="light"] .epic-lingo-timer{background:#eef2f7;border-color:#c6d3e3} html[data-theme="light"] .epic-cheat-game-box{background:rgba(255,255,255,.97);border-color:#c6d3e3} html[data-theme="light"] .epic-cheat-game-title{color:#172033} html[data-theme="light"] .epic-cheat-game-bar button{background:#fff;color:#172033;border-color:#c6d3e3} /* LIGHT: overige cheat/overlay-eilandjes leesbaar maken (geen donkergaten) */ html[data-theme="light"] .epic-cheat-game-overlay.playable{background:rgba(226,234,244,.78)} html[data-theme="light"] .epic-hawaii-label{background:rgba(255,255,255,.94);border-color:#6ee7b7;color:#065f46} html[data-theme="light"] .visitor-tool-btn{background:rgba(255,255,255,.92);color:#172033;border-color:#cbd5e1} html[data-theme="light"] .visitor-tool-btn:hover{background:#fff;border-color:#94a3b8} @keyframes epic-snake-crawl{0%{left:-70px;transform:translateY(0) scaleX(1)}49%{transform:translateY(-8px) scaleX(1)}50%{left:calc(100% + 70px);transform:translateY(0) scaleX(-1)}99%{transform:translateY(-8px) scaleX(-1)}100%{left:-70px;transform:scaleX(1)}} @keyframes epic-tetris-fall{0%{top:-60px;transform:rotate(0)}100%{top:calc(100% + 60px);transform:rotate(220deg)}} @media (prefers-reduced-motion: reduce){ .epic-hawaii-label{animation:none} } /* 1.9.94 FIX gastweergave darkmode-glitch: de basis-iframe/head-regels in de inline