/* app/static/css/hbbtv.css - VERSION LL-HLS COMPLÈTE AVEC FLUIDITÉ AMÉLIORÉE ET CORRECTIONS
   Professional, TV-friendly styling for TVAgri HbbTV interface avec optimisation LL-HLS
   - Large, high-contrast elements suitable for remote control navigation
   - Accessible focus states and ARIA-friendly visuals
   - Styles for video container, controls, live badge, offline/error states, QR, overlays
   - Transitions fluides pour toutes les actions
   - Bouton "Rejoindre le direct" plus professionnel
   - Netteté vidéo améliorée
   - Optimisations spécifiques pour la latence faible et LiveKit
*/

/* ============================================
   Theme variables: tweak these to change look
   ============================================ */
:root{
  --bg-color: #0b0f14;              /* app background */
  --panel-bg: rgba(0,0,0,0.55);     /* semi-transparent UI panels */
  --panel-bg-strong: rgba(0,0,0,0.75);
  --accent: #ff8c00;                /* primary accent (buttons) */
  --accent-strong: #d32f2f;         /* live badge / warning */
  --muted: #9aa6b2;                 /* secondary text */
  --text: #ffffff;                  /* primary text */
  --success: #4caf50;
  --danger: #e53935;
  --glass-border: rgba(255,255,255,0.06);
  --control-size: 56px;             /* base square size for remote-friendly buttons */
  --control-font-size: 20px;
  --radius: 8px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.6);
  --z-top: 10000;
  
  /* ⚡ Couleurs spécifiques LL-HLS */
  --llhls-excellent: #00ff00;       /* < 1.5s */
  --llhls-good: #ffff00;            /* < 3s */
  --llhls-medium: #ffa500;          /* < 6s */
  --llhls-poor: #ff0000;            /* > 6s */
  
  /* Transitions pour fluidité */
  --transition-fast: all 0.2s ease;
  --transition-smooth: all 0.3s ease-in-out;
}

/* ============================================
   Base & page layout - OPTIMISÉ LL-HLS
   ============================================ */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  background:linear-gradient(180deg,var(--bg-color), #030506 120%);
  color:var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:18px; /* base font for TV; use bigger sizes for labels */
  line-height:1.2;
  overflow:hidden; /* Éviter les scrollbars pour expérience TV pure */
  transition: var(--transition-smooth);
}

/* Make elements easier to navigate with remote (bigger clickable areas) */
button, a {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  transition: var(--transition-fast);
}

/* Container for the whole HbbTV interface */
#hbbtvInterface{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: var(--transition-smooth);
}

/* ============================================
   Welcome overlay - RAPIDE
   ============================================ */
#welcomeOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:var(--z-top);
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.55));
  text-align:center;
  padding:48px;
  animation: fadeIn 0.8s ease-out;
  transition: var(--transition-smooth);
}

.welcome-title{
  font-size:48px;
  font-weight:700;
  margin-bottom:8px;
  letter-spacing:1px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
  background: linear-gradient(135deg, #ff8c00, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: var(--transition-fast);
}
.welcome-subtitle{
  font-size:20px;
  color:var(--muted);
  margin-bottom:18px;
  transition: var(--transition-fast);
}
.welcome-hint{
  background:rgba(255,255,255,0.08);
  padding:12px 18px;
  border-radius:999px;
  color:var(--accent);
  font-weight:600;
  font-size:16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,140,0,0.3);
  transition: var(--transition-smooth);
}

/* ============================================
   Video container / player - LL-HLS OPTIMISÉ AVEC NETTETÉ
   ============================================ */
.video-container{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  transition: var(--transition-smooth);
}

/* The <video> element should fill the screen while keeping aspect ratio */
#mainVideo{
  width:100%;
  height:100%;
  object-fit: contain; /* Changé de cover à contain pour éviter crop et blur */
  background: #000;
  display:block;
  outline:none;
  /* Optimisations performances et netteté */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  image-rendering: crisp-edges; /* Améliore la netteté */
  transition: var(--transition-fast);
}

/* Watermark (top-right) */
.watermark{
  position:absolute;
  top:14px;
  right:18px;
  z-index:9000;
  background: rgba(0,0,0,0.6);
  color:rgba(255,255,255,0.9);
  padding:8px 12px;
  border-radius:6px;
  font-weight:700;
  font-size:14px;
  box-shadow:0 4px 18px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  transition: var(--transition-smooth);
}

/* Live badge (EN DIRECT) - VERSION LL-HLS */
.live-badge-llhls{
  position:absolute;
  top:14px;
  left:14px;
  z-index:10001;
  background: linear-gradient(135deg, var(--accent-strong), #ff4444);
  color:var(--text);
  padding:8px 14px;
  font-weight:800;
  border-radius:8px;
  box-shadow:0 6px 20px rgba(211,47,47,0.4);
  letter-spacing:1px;
  font-size:14px;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  animation: pulse 2s infinite;
  transition: var(--transition-smooth);
}

/* Animation de pulsation pour le live */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 6px 20px rgba(211,47,47,0.4); }
  50% { transform: scale(1.05); box-shadow: 0 6px 25px rgba(211,47,47,0.6); }
  100% { transform: scale(1); box-shadow: 0 6px 20px rgba(211,47,47,0.4); }
}

/* ============================================
   Tech info / session info panels - AVEC LATENCE LL-HLS
   ============================================ */
#techInfo{
  position:absolute;
  right:18px;
  top:80px;
  width:340px;
  max-width:36vw;
  color:var(--text);
  background:var(--panel-bg);
  border:1px solid var(--glass-border);
  padding:16px;
  border-radius:12px;
  z-index:9000;
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(10px);
  transition: var(--transition-smooth);
}

/* Status items avec indicateur latence */
.status-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom:12px;
  font-size:16px;
  color:var(--text);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition-fast);
}

.status-item:last-child{ 
  margin-bottom:0; 
  border-bottom: none;
}

/* Indicateur latence LL-HLS */
.latency-value{
  font-weight: bold;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
  transition: var(--transition-fast);
}

.latency-version{
  font-size: 11px;
  opacity: 0.7;
  transition: var(--transition-fast);
}

/* status indicator dot */
.status-indicator{
  display:inline-block;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--danger);
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

/* status states - OPTIMISÉ LL-HLS */
.status-online{ 
  background:var(--success); 
  animation: pulse 1.5s infinite;
}
.status-offline{ background:#666; }
.status-audio-on{ 
  background:#4caf50; 
  border:2px solid rgba(255,255,255,0.1); 
  box-sizing:border-box; 
}
.status-audio-off{ 
  background:#777; 
  border:2px solid rgba(0,0,0,0.25); 
  box-sizing:border-box; 
}

/* Session information (bottom-left) */
.session-info{
  position:absolute;
  left:18px;
  bottom:24px;
  width:34vw;
  max-width:600px;
  min-width:300px;
  z-index:9000;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  padding:18px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(8px);
  transition: var(--transition-smooth);
}

.session-title{
  font-size:22px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--text);
  transition: var(--transition-fast);
}
.expert-name{
  font-size:16px;
  color:var(--muted);
  margin-bottom:8px;
  transition: var(--transition-fast);
}
.session-description{
  font-size:15px;
  color:var(--muted);
  max-height:88px;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height: 1.4;
  transition: var(--transition-fast);
}

/* QR container (bottom-right) */
#qrContainer{
  position:absolute;
  right:18px;
  bottom:24px;
  z-index:9000;
  width:220px;
  background:var(--panel-bg);
  border:1px solid var(--glass-border);
  padding:12px;
  border-radius:10px;
  text-align:center;
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(8px);
  transition: var(--transition-smooth);
}
#qrContainer .qr-title{ 
  font-weight:700; 
  margin-bottom:8px; 
  font-size:14px; 
  color:var(--text); 
  transition: var(--transition-fast);
}
#qrCode{ 
  width:160px; 
  height:160px; 
  margin:0 auto 8px; 
  background:#fff; 
  border-radius:6px; 
  overflow:hidden; 
  border: 2px solid rgba(255,255,255,0.1);
  transition: var(--transition-smooth);
}
#qrLink{ 
  font-size:13px; 
  color:var(--muted); 
  word-break:break-all; 
  transition: var(--transition-fast);
}

/* ============================================
   Controls: central bottom cluster for remote - LL-HLS OPTIMISÉ
   ============================================ */
#hbbtvControls{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  gap:8px;
  align-items:center;
  padding:12px 16px;
  background:rgba(0,0,0,0.7);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
  backdrop-filter: blur(15px);
  transition: var(--transition-smooth);
}

/* Each control button - OPTIMISÉ LL-HLS */
#hbbtvControls button,
button.retry-btn,
#enableSoundBtn,
.back-to-live-btn{
  height:var(--control-size);
  min-width:var(--control-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  font-size:var(--control-font-size);
  color:var(--text);
  background:rgba(255,255,255,0.1);
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition: var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  font-weight: 600;
}

/* Bouton Retour au Direct spécial - PROFESSIONNEL ET NET */
.back-to-live-btn{
  background: linear-gradient(135deg, var(--accent-strong), #ff4444);
  color: white;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 16px;
  animation: pulse 2s infinite;
  transition: var(--transition-smooth);
  border: none; /* Nettoyage pour netteté */
  box-shadow: 0 4px 12px rgba(211,47,47,0.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-dot 1s infinite;
}

@keyframes pulse-dot {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.back-to-live-btn:hover,
.back-to-live-btn:focus{
  background: linear-gradient(135deg, #ff4444, var(--accent-strong));
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(211,47,47,0.5);
}

/* special action buttons */
#enableSoundBtn{
  position:absolute;
  bottom:90px;
  left:50%;
  transform:translateX(-50%);
  z-index:10002;
  background: linear-gradient(135deg, var(--accent), #ff6b00);
  color:#fff;
  font-weight:700;
  padding:14px 20px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(255,140,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 16px;
  transition: var(--transition-smooth);
}

/* Hover / focus effects for remote navigation - AMÉLIORÉ */
#hbbtvControls button:focus,
#hbbtvControls button:hover,
#enableSoundBtn:focus,
#enableSoundBtn:hover,
.retry-btn:focus,
.retry-btn:hover{
  transform:translateY(-4px) scale(1.05);
  background:rgba(255,255,255,0.2);
  box-shadow:0 12px 25px rgba(0,0,0,0.6);
  outline: none;
  border-color: rgba(255,255,255,0.3);
  transition: var(--transition-smooth);
}

/* Strong focus visible for accessibility / remote */
button:focus{
  outline: 3px solid rgba(255,140,0,0.8);
  outline-offset:3px;
  border-radius:8px;
  transition: var(--transition-fast);
}

/* Small labels under controls (if needed) */
.controls-label{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin-top:6px;
  transition: var(--transition-fast);
}

/* ============================================
   Offline / Error overlays - STYLISÉ
   ============================================ */
.offline-message{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10005;
  background:var(--panel-bg-strong);
  color:var(--text);
  padding:32px;
  border-radius:16px;
  width:min(780px,92%);
  text-align:center;
  border:1px solid var(--glass-border);
  box-shadow:0 25px 60px rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  animation: fadeIn 0.8s ease-out;
  transition: var(--transition-smooth);
}

.offline-message .offline-icon{ 
  font-size:52px; 
  margin-bottom:16px; 
  opacity: 0.8;
  transition: var(--transition-fast);
}
.offline-title{ 
  font-size:24px; 
  font-weight:800; 
  margin-bottom:12px; 
  color: var(--accent);
  transition: var(--transition-fast);
}
.offline-text{ 
  color:var(--muted); 
  margin-bottom:16px; 
  line-height: 1.5;
  transition: var(--transition-fast);
}

/* Error message */
#errorMessage{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:10005;
  background:linear-gradient(0deg, rgba(220,20,60,0.95), rgba(210,47,47,0.98));
  color:#fff;
  padding:14px 20px;
  border-radius:12px;
  font-weight:700;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:0 12px 35px rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  min-width: 300px;
  text-align: center;
  animation: slideUp 0.4s ease-out;
  transition: var(--transition-smooth);
}

@keyframes slideUp {
  from { transform: translateX(-50%) translateY(100px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.retry-btn{
  margin-left:12px;
  background:rgba(255,255,255,0.2);
  color:#fff;
  padding:8px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  transition: var(--transition-smooth);
}

/* Loading spinner */
.loading{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10003;
  color:var(--muted);
  text-align:center;
  display:none;
  transition: var(--transition-smooth);
}

.loading-spinner{
  width:72px;
  height:72px;
  border-radius:50%;
  border:8px solid rgba(255,255,255,0.08);
  border-top-color:var(--accent);
  animation:spin 1.2s linear infinite;
  margin:0 auto 12px;
  transition: var(--transition-fast);
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================
   Small-screen adjustments (emulators or dev)
   ============================================ */
@media (max-width:900px){
  :root{ 
    --control-size:48px; 
    --control-font-size:18px; 
    font-size:16px; 
  }
  #techInfo{ 
    width:300px; 
    right:12px; 
    top:64px; 
    padding: 12px;
  }
  .session-info{ 
    width:50vw; 
    left:12px; 
    bottom:14px; 
    padding:14px; 
  }
  #qrContainer{ 
    width:180px; 
    right:12px; 
    bottom:12px; 
  }
  #hbbtvControls{
    padding: 10px 14px;
    gap: 6px;
  }
}

/* ============================================
   Écrans très larges (TV 4K)
   ============================================ */
@media (min-width: 1920px) {
  :root{
    font-size: 22px;
    --control-size: 64px;
    --control-font-size: 22px;
  }
  
  .session-title{
    font-size: 26px;
  }
  
  .welcome-title{
    font-size: 56px;
  }
}

/* ============================================
   Reduced motion preference
   ============================================ */
@media (prefers-reduced-motion: reduce){
  #hbbtvControls button:focus,
  #hbbtvControls button:hover,
  #enableSoundBtn:focus,
  #enableSoundBtn:hover,
  .back-to-live-btn:focus,
  .back-to-live-btn:hover{
    transform:none;
    transition:none;
  }
  .loading-spinner{ animation:none; }
  .live-badge-llhls{ animation: none; }
  .status-online{ animation: none; }
}

/* ============================================
   Mode sombre/clair (pour compatibilité)
   ============================================ */
@media (prefers-color-scheme: light) {
  :root{
    --bg-color: #f0f2f5;
    --panel-bg: rgba(255,255,255,0.85);
    --text: #333333;
    --muted: #666666;
  }
  
  #hbbtvControls{
    background: rgba(255,255,255,0.9);
  }
  
  #hbbtvControls button{
    background: rgba(0,0,0,0.08);
    color: #333;
  }
}

/* ============================================
   Accessibility helpers
   ============================================ */
[role="application"]{ -webkit-tap-highlight-color: transparent; }
[aria-hidden="true"]{ visibility:hidden; opacity:0; pointer-events:none; }
[aria-live]{ outline:none; }

/* High contrast mode */
@media (prefers-contrast: high) {
  :root{
    --bg-color: #000000;
    --panel-bg: #000000;
    --text: #ffffff;
    --muted: #cccccc;
    --accent: #ffff00;
  }
  
  #hbbtvControls{
    background: #000000;
    border: 2px solid #ffffff;
  }
}

/* ============================================
   Utility helpers for JS to toggle states
   ============================================ */
.hidden{ display:none !important; }
.visible{ display:block !important; }

/* ============================================
   Small polish: ensure text contrast and legibility
   ============================================ */
.session-title, .welcome-title{ 
  text-shadow: 0 8px 28px rgba(0,0,0,0.6); 
}
.status-item span{ 
  text-shadow: 0 4px 12px rgba(0,0,0,0.45); 
}

/* Indicateurs de qualité de latence LL-HLS */
.latency-excellent { color: var(--llhls-excellent); }
.latency-good { color: var(--llhls-good); }
.latency-medium { color: var(--llhls-medium); }
.latency-poor { color: var(--llhls-poor); }

/* ============================================
   Optimisations performances
   ============================================ */
#hbbtvInterface {
  transform: translateZ(0);
  will-change: transform;
}

.video-container {
  contain: layout style paint;
}

/* ============================================
   End of file - LL-HLS OPTIMIZED WITH FLUIDITY AND FIXES
   ============================================ */

/* app/static/css/hbbtv.css - VERSION LL-HLS COMPLÈTE AVEC FLUIDITÉ AMÉLIORÉE ET CORRECTIONS
   (existing CSS content above should remain — this file appends/merges replay-specific styles)
*/

/* --------------------------
   Replay page specific styles
   -------------------------- */
.replay-container{
  width:100%;
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:100%;
  box-sizing:border-box;
}

/* Search bar (replay) */
.search-bar{
  width:100%;
  max-width:1200px;
  display:flex;
  background:var(--panel-bg);
  padding:12px;
  border-radius:12px;
  gap:12px;
  align-items:center;
  border:1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}
.search-input{
  flex:1;
  min-width:220px;
  padding:12px 14px;
  font-size:18px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(0,0,0,0.25);
  color:var(--text);
}
.sort-select{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  font-size:16px;
}

/* generic control buttons used on replay page */
.control-btn{
  padding:10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color:var(--text);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  cursor:pointer;
}
.control-btn.neutral{
  background: rgba(255,255,255,0.03);
  color:var(--muted);
}

/* Replay list grid */
.replay-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  width:100%;
}

/* Each replay card - remote-friendly */
.replay-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:14px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  cursor:pointer;
  transition: var(--transition-smooth);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:120px;
  outline: none;
}
.replay-card:focus,
.replay-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  border-color: rgba(255,140,0,0.18);
}
.replay-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.replay-desc{
  color:var(--muted);
  font-size:15px;
  line-height:1.4;
  max-height:3.6em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.replay-meta{
  font-size:14px;
  color:var(--muted);
}

/* hint text */
.replay-card .hint{
  color:var(--success);
  font-size:13px;
  margin-top:auto;
}

/* player modal fullscreen */
.player-container{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.95);
  z-index: var(--z-top);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  transition: var(--transition-smooth);
}
.player-container.hidden{
  display:none;
}

/* video styling */
.player-video{
  width:100%;
  max-width:1600px;
  height:calc(100vh - 120px);
  border-radius:12px;
  background:#000;
  object-fit:contain;
  box-shadow: 0 18px 60px rgba(0,0,0,0.8);
  outline:none;
}

/* close & player info */
.close-player{
  position:absolute;
  top:18px;
  right:18px;
  background:var(--accent-strong);
  color:var(--text);
  border:none;
  padding:12px 16px;
  border-radius:10px;
  font-size:18px;
  z-index: calc(var(--z-top) + 2);
  cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.player-info{
  position:absolute;
  top:18px;
  left:18px;
  background: var(--panel-bg);
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--glass-border);
  z-index: calc(var(--z-top) + 2);
  max-width:60%;
}
.player-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
}
.player-expert{
  font-size:15px;
  color:var(--muted);
}

/* error box inside player */
.offline-message{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index: calc(var(--z-top) + 3);
  width:min(720px, 92%);
  padding:18px;
  border-radius:12px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

/* no-replays box */
.no-replays{
  width:100%;
  max-width:720px;
  background:var(--panel-bg);
  padding:18px;
  border-radius:12px;
  text-align:center;
  border:1px solid var(--glass-border);
  color:var(--muted);
}

/* pagination */
.pagination{
  width:100%;
  max-width:1200px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.pagination-inner{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.page-link{
  padding:8px 12px;
  border-radius:8px;
  background: rgba(255,255,255,0.03);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.03);
  font-weight:700;
}
.page-link.current{
  background: linear-gradient(135deg, var(--accent), #ffb74d);
  color:#000;
}

/* responsive adjustments for HbbTV small/large screens */
@media (max-width: 900px){
  .player-video{
    height: calc(100vh - 100px);
    border-radius:8px;
  }
  .replay-card{ min-height:110px; }
  .search-input{ font-size:16px; padding:10px; }
}

@media (min-width: 1920px){
  .replay-card{ padding:18px; border-radius:14px; }
  .player-video{ max-width: 2000px; height: calc(100vh - 120px); }
  .player-title{ font-size:22px; }
}

/* Accessibility: visible focus for replay cards */
.replay-card:focus{
  outline: 3px solid rgba(255,140,0,0.9);
  outline-offset: 2px;
}

/* Small polish */
.hint{ font-size:13px; color:var(--muted); }

/* End of replay-specific styles */