*{box-sizing:border-box}body{margin:0;background:#10151f;color:#f1f5f9;font:15px system-ui,-apple-system,sans-serif}header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#192333;border-bottom:1px solid #344052}header strong{font-size:21px;color:#58e0cb}main{max-width:1400px;margin:auto;padding:16px}.videos{display:grid;grid-template-columns:2fr 1fr;gap:14px}.videoBox{background:#080d15;aspect-ratio:16/10;position:relative;border-radius:15px;overflow:hidden;border:1px solid #334155}.videoBox video{width:100%;height:100%;object-fit:cover}.local video{transform:scaleX(-1)}.tag{position:absolute;left:12px;top:12px;background:#0009;border-radius:6px;padding:6px 10px}#status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%;pointer-events:none;color:#cbd5e1}.bottom{display:grid;grid-template-columns:1fr 340px;gap:14px;margin-top:15px}.controls{display:flex;gap:10px;align-content:start;flex-wrap:wrap}button{border:0;border-radius:9px;padding:12px 16px;background:#0dbaa4;color:#061b1a;font-weight:700;cursor:pointer;min-height:45px}.secondary{background:#344256;color:white}.danger{background:#783444;color:white}.chat{border:1px solid #344052;border-radius:12px;overflow:hidden;background:#192333}#messages{height:180px;overflow:auto;padding:12px;overflow-wrap:anywhere}#messages div{margin-bottom:8px}#chatForm{display:flex;border-top:1px solid #344052}input{background:#111827;color:white;border:0;padding:12px;min-width:0;flex:1}#chatForm button{border-radius:0}.notice{color:#94a3b8;font-size:12px;line-height:1.5}@media(max-width:760px){header{padding:0 12px}.videos{display:block;position:relative}.remote{aspect-ratio:3/4}.local{position:absolute;right:12px;bottom:12px;width:32%;aspect-ratio:3/4;box-shadow:0 3px 20px #000a}.local .tag{font-size:11px;left:5px;top:5px}.bottom{display:block}.controls{margin-bottom:14px}.controls button{flex:1 1 42%}.chat #messages{height:120px}main{padding:10px}}
#chatOverlay{position:absolute;bottom:14px;left:5%;width:90%;padding:8px 12px;text-align:center;font-size:13px;line-height:1.35;overflow-wrap:anywhere;color:#fff;background:#000a;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:3}#chatOverlay.visible{opacity:1}#siteFooter{margin-top:18px;padding:20px 0;border-top:1px solid #334155;color:#94a3b8;font-size:13px;line-height:1.6}.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:1000;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px}.modalInner{max-width:650px;width:100%;max-height:90vh;overflow:auto;padding:24px;background:#1b2638;border:1px solid #475569;border-radius:14px;box-shadow:0 20px 60px #0008}.modalInner h2{margin-top:0}.modalInner #rulesText{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}.modalInner button{margin-top:18px}

.match-preferences{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#192333;padding:12px;border:1px solid #344052;border-radius:12px}.match-preferences label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:13px}.match-preferences select{width:100%;min-width:0;background:#111827;color:white;border:1px solid #475569;border-radius:8px;padding:11px;font:inherit}.match-hint{grid-column:1/-1;margin:0;color:#94a3b8;font-size:12px;line-height:1.4}@media(max-width:760px){.match-preferences{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.match-preferences select{padding:10px 5px}}

#uiLanguage{margin-left:12px;background:#111827;color:#f1f5f9;border:1px solid #475569;border-radius:8px;padding:7px;font-size:13px} .match-preferences .country-search{width:100%;flex:none;min-height:35px;border:1px solid #475569;border-radius:7px;padding:8px}.settings-language{border:1px solid #475569;border-radius:12px;margin:16px 0;padding:16px}.settings-language legend{font-weight:700;color:#58e0cb;padding:0 8px}@media(max-width:500px){header{gap:8px}header strong{font-size:16px}#uiLanguage{margin-left:3px;max-width:125px}}

.greeting-setting{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:13px}.greeting-setting input{width:100%;border:1px solid #475569;border-radius:8px;padding:11px 12px}.greeting-setting small{color:#94a3b8}.partner-greeting{position:absolute;z-index:5;top:49px;left:12px;right:12px;max-width:max-content;margin:auto;background:#081321d9;color:#fff;border:1px solid #5e8196;border-radius:9px;padding:9px 14px;text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;font-size:14px;line-height:1.35;pointer-events:none;box-shadow:0 3px 16px #0007}.partner-greeting[hidden]{display:none}

.ad-slot{width:min(100% - 24px,1200px);margin:14px auto;min-height:0;text-align:center;overflow:visible}.ad-slot iframe,.ad-slot img{max-width:100%}.ad-slot.ad-middle{margin:14px auto}.ad-slot.ad-bottom{margin:18px auto}@media(max-width:600px){.ad-slot{width:calc(100% - 16px);margin:10px auto}}

.site-logo{max-width:150px;max-height:56px;object-fit:contain;vertical-align:middle;margin-right:6px}

/* Video actions: mouse hover and keyboard focus */
.video-hover-actions{position:absolute;z-index:8;left:50%;bottom:56px;transform:translateX(-50%);display:flex;gap:9px;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;max-width:96%;pointer-events:none}
.video-hover-actions button{pointer-events:auto;white-space:nowrap;box-shadow:0 4px 14px #0009}
.remote:hover .video-hover-actions,.remote:focus-within .video-hover-actions{opacity:1;visibility:visible;pointer-events:auto}
@media(hover:none) and (pointer:coarse){.video-hover-actions{display:none}.videoBox.remote{cursor:pointer}}
@media(max-width:760px){.video-hover-actions{bottom:25px}.video-hover-actions button{font-size:12px;padding:10px}}

/* Device selectors and video fullscreen */
.device-settings{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:14px 0;padding:12px;border:1px solid #334155;border-radius:10px}
.device-settings label{display:flex;flex:1 1 180px;min-width:0;flex-direction:column;gap:6px}
.device-settings select{width:100%;min-width:0;padding:10px;background:#172334;color:#fff;border:1px solid #475569;border-radius:8px}
.video-fullscreen{position:absolute;z-index:12;right:10px;top:10px;min-width:35px;min-height:35px;padding:5px 9px;border-radius:8px;background:#071a2bbb;color:white;font-size:22px}
.remote-watermark{position:absolute;z-index:6;pointer-events:none;max-width:32%;max-height:22%;font-size:clamp(11px,1.5vw,19px);font-weight:700;color:white;text-shadow:0 1px 5px #000,0 0 2px #000;overflow-wrap:anywhere}
.remote-watermark img{display:block;max-width:100%;max-height:85px;object-fit:contain}
.remote-watermark.wm-top-left{top:12px;left:12px}.remote-watermark.wm-top-right{top:12px;right:56px}
.remote-watermark.wm-bottom-left{bottom:12px;left:12px}.remote-watermark.wm-bottom-right{bottom:12px;right:12px}
.remote:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;background:#000}
.remote:fullscreen video{width:100%;height:100%;object-fit:contain}
.remote:fullscreen .video-hover-actions{bottom:50px}
@media(max-width:700px){.device-settings{gap:8px}.remote-watermark{max-width:38%}}

/* Compact mouse-hover controls over partner video. Touch retains existing controls. */
.video-hover-actions{bottom:48px;gap:7px;max-width:calc(100% - 16px);padding:7px 9px;border-radius:14px;background:rgba(8,18,32,.75);backdrop-filter:blur(7px);align-items:center;justify-content:center}
.video-hover-actions .hover-icon-btn{width:38px;height:38px;min-width:38px;min-height:38px;padding:7px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.video-hover-actions .hover-icon-btn svg{width:21px;height:21px;flex-shrink:0}
.video-hover-actions .hover-icon-btn:hover,.video-hover-actions .hover-icon-btn:focus-visible{background:rgba(255,255,255,.28);outline:2px solid transparent}
.video-hover-actions .hover-icon-btn:focus-visible{outline-color:#fff}
.video-hover-actions .hover-icon-btn.hover-danger{background:rgba(180,35,50,.85)}
.video-hover-actions .hover-icon-btn.is-off{background:rgba(140,40,40,.8);opacity:.9}
@media(hover:none) and (pointer:coarse){.video-hover-actions{display:none!important}}
@media(max-width:760px){.video-hover-actions{gap:4px;padding:5px}.video-hover-actions .hover-icon-btn{width:33px;height:33px;min-width:33px;min-height:33px;padding:6px}.video-hover-actions .hover-icon-btn svg{width:19px;height:19px}}

/* Private chat toolbar */
.video-hover-actions #videoNext{width:52px;min-width:52px;background:rgba(15,118,110,.8)}
.video-hover-actions #videoNext:hover,.video-hover-actions #videoNext:focus-visible{background:#16a34a;color:white}
.video-hover-actions #videoPrivate{background:rgba(56,85,135,.85)}
.video-hover-actions #videoPrivate:hover{background:#2563eb}
.video-hover-actions [hidden]{display:none!important}
.video-hover-actions button:disabled{opacity:.35;cursor:not-allowed}
.controls button[hidden]{display:none!important}
#privateModal[hidden]{display:none!important}
#privateModal .controls{display:flex;gap:12px;justify-content:center}

/* Beta 16: searching animation in the remote video */
#status.is-searching{display:flex;flex-direction:column;align-items:center;gap:16px;z-index:5;color:#e2e8f0;font-weight:600;text-shadow:0 2px 7px #000}
#status.is-searching::before{content:"";display:block;width:64px;height:64px;border:5px dashed #4de0c9;border-radius:50%;animation:vr-search-spin 1.35s linear infinite;filter:drop-shadow(0 0 8px #0dbaa488)}
@keyframes vr-search-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#status.is-searching::before{animation-duration:4s}}

/* Beta 20: image-based country and language pickers, same appearance on Windows and mobile */
.flag-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)}
.flag-dropdown{position:relative;width:100%;min-width:0;color:#f1f5f9}
.flag-dropdown-button{display:flex;align-items:center;gap:9px;width:100%;min-height:39px;background:#111827;color:#f1f5f9;border:1px solid #475569;border-radius:8px;padding:8px 10px;font:inherit;text-align:left;cursor:pointer}
.flag-dropdown-button::after{content:'▾';margin-left:auto;color:#aab7c8}
.flag-dropdown-list{position:absolute;z-index:1100;top:calc(100% + 4px);left:0;right:0;min-width:220px;max-height:340px;overflow:hidden;background:#111827;border:1px solid #475569;border-radius:9px;box-shadow:0 14px 32px #0008;padding:5px}
.flag-dropdown-list[hidden]{display:none!important}.flag-dropdown-items{max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.flag-dropdown-search{box-sizing:border-box;width:100%;margin-bottom:5px;padding:9px;color:#fff;background:#1b2a3d;border:1px solid #526179;border-radius:7px}
.flag-dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px;color:#fff;background:transparent;border:0;border-radius:5px;text-align:left;cursor:pointer;font:inherit}
.flag-dropdown-item:hover,.flag-dropdown-item:focus-visible{background:#1c65bf}.flag-dropdown-item[hidden]{display:none}
.flag-icon{width:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#d9e6f5}
.flag-icon img{width:22px;height:16px;object-fit:cover;border-radius:2px}
.flag-language{display:inline-block;width:auto;min-width:120px;margin-left:12px}.flag-language .flag-dropdown-list{min-width:155px}
@media(max-width:500px){.flag-language{margin-left:3px;min-width:110px}.flag-dropdown-list{min-width:185px}}

.site-brand{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#58e0cb;font-size:21px;font-weight:700;max-height:58px}.site-brand:hover{opacity:.9}.site-brand:focus-visible{outline:2px solid #58e0cb;outline-offset:4px;border-radius:4px}.site-brand .site-logo{margin:0;max-width:min(210px,45vw);max-height:56px;display:block}@media(max-width:500px){.site-brand{font-size:16px}.site-brand .site-logo{max-width:150px;max-height:52px}}

/* Beta 25 — White Label dynamic accent */
:root {
  --accent: #58e0cb;
}

body button:not(.secondary):not(.danger) {
  background-color: var(--accent);
}

.site-brand,
header strong,
.settings-language legend {
  color: var(--accent);
}

.site-brand:focus-visible {
  outline-color: var(--accent);
}