:root { --primary: #cc0000; --gold: #ffcc00; --dark-bg: #050505; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body { background: #000; width: 100vw; height: 100vh; margin: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: 'Roboto Condensed'; }

    /* --- COMMON STYLES --- */
    #tv-wrapper { width: 100%; height: 100%; background: #000; position: relative; display: flex; flex-direction: column; }
    .header { height: 75px; background: linear-gradient(180deg, #b00, #800); display: flex; align-items: center; border-bottom: 4px solid var(--gold); padding: 0 15px; z-index: 50; flex-shrink:0; }
    .logo-box { width: 100px; height: 100px; background: white; padding: 5px; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 5px; box-shadow: 2px 8px 10px rgba(0,0,0,0.6); margin-top: 40px; z-index: 100; border: 1px solid #ccc; }
    .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .company-name { height: 50px; font-family: 'Oswald'; font-size: 22px; font-weight: 800; color: #fff100; text-transform: uppercase; text-shadow: 3px 3px 0 #000; background: rgb(5 32 95 / 94%); padding: 0 10px; border-radius: 8px; border: 1px solid rgb(255 240 240 / 88%); display: flex; align-items: center; margin-right: 10px; white-space: nowrap; overflow: hidden; }
    
    /* --- HEADER FLASH & BREAKING --- */
    .breaking-slider { flex: 1; background: #00000000; height: 65px; overflow: hidden; position: relative; border-left: 6px solid var(--gold); display: flex; align-items: center; border-radius: 4px; margin-right: 10px; }
    .breaking-text { position: absolute; white-space: nowrap; color: #fff100; font-family: 'Oswald'; font-weight: 700; text-transform: uppercase; font-size: 50px;  animation: slide 5s linear infinite; width: 100%; text-align: center; }
    @keyframes slide { from { left: 100%; } to { left: -100%; } }
    
    #flashContainer { position: absolute; width: 100%; height: 100%; z-index: 10; display: none; align-items: center; justify-content: center; background: #ffffff00; }
    #breakingFlashBody {
        color: #fff; font-family: 'Oswald', sans-serif; font-weight: 800; font-size: 50px;
        text-transform: uppercase; text-shadow: 2px 7px 8px #000; text-align: center;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 98%; display: block;
    }
    .zoom-effect { animation: zoomIn 0.3s ease-out forwards; }
    @keyframes zoomIn { 0% { transform: scale(3); opacity: 0; filter: blur(5px); } 100% { transform: scale(1); opacity: 1; filter: blur(0); } }

    /* Live Meta */
    .live-meta { display: flex; align-items: center; gap: 1px; margin-left: auto; color: white; font-family: 'Oswald'; }
    #time { font-weight: 700; font-size: 22px; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5); border-right: 2px solid var(--gold); padding-right: 5px; margin-right: 5px; }
    .live-badge { background: #000; padding: 5px 15px; font-weight: 900; font-size: 18px; animation: pulse .7s infinite; border: 2px solid white; border-radius: 30px; }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

    /* --- FLASH SCREEN STYLES (OFF AIR) --- */
    .off-air-container {
    width: 100vw; 
    height: 100vh;
    
    /* 🔥 NEWS STYLE FLASHING BACKGROUND 🔥 */
    background: linear-gradient(-45deg, #660000, #990000, #ff0000, #660000);
    background-size: 400% 400%;
    animation: newsFlash 3s ease infinite;
    
    /* Layout Properties (Same as before) */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    overflow: hidden; 
    position: relative;
    color: white; /* Text color white kar diya taaki red par dikhe */
}

/* 🔥 Animation Keyframes 🔥 */
@keyframes newsFlash {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
    .flash-content { max-width: 90%; animation: zoomEffect 8s infinite alternate ease-in-out; }
    .flash-title { font-family: 'Oswald', sans-serif; font-size: 60px; color: #fff; text-transform: uppercase; font-weight: 800; line-height: 1.2; text-shadow: 4px 4px 0px rgba(0,0,0,0.3); margin-bottom: 10px; }
    .flash-subtitle { font-family: 'Roboto Condensed', sans-serif; font-size: 20px; color: #ffcc00; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; background: rgba(0,0,0,0.4); padding: 5px 20px; border-radius: 50px; display: inline-block; }
    .off-air-footer { position: absolute; bottom: 30px; font-family: 'Roboto', sans-serif; color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
    @keyframes zoomEffect { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.05); opacity: 1; } }

    /* --- STAGE & ADS --- */
    .stage { flex: 1; background: #000; position: relative; overflow: hidden; width: 100%; display: flex; justify-content: center; align-items: center; }
    .stage iframe { width: 100%; height: 100%; border: none; z-index: 2; opacity: 0; }
    .bg-text { position: absolute; color: #333; font-size: 30px; font-weight: bold; text-transform: uppercase; z-index: 1; font-family: 'Oswald'; text-align: center; }

    #adContainer { position: absolute; inset: 0; background: #000; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; }
    #adVideo { width: 100%; height: 100%; object-fit: contain; }
    .ad-label { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; font-family: sans-serif; border: 1px solid white; z-index: 10000; }
    
    /* --- SIDE AD PANEL --- */
    #sideAd { 
        position: absolute; right: -25%; top: 75px; bottom: 0px; width: 20%; 
        background: #000; z-index: 100; transition: right 0.5s ease-in-out; 
        border-left: 4px solid var(--gold); 
        display: flex; flex-direction: column;
    }
    .side-ad-active #sideAd { right: 0; }
    .side-ad-active .stage { width: 80% !important; margin-right: 20%; }

    /* Side News Styles */
    .side-news-wrap { height: 100%; overflow: hidden; padding: 10px; display: flex; flex-direction: column; background: #010b52; }
    .side-news-title { font-family: 'Oswald'; color: var(--gold); border-bottom: 2px solid #cc0000; padding-bottom: 5px; margin-bottom: 10px; font-size: 18px; text-align:center; letter-spacing: 1px; }
    .side-news-list { list-style: none; padding: 0; margin: 0; animation: scrollUp 26s linear infinite; }
    .side-news-list li { color: #fff; border-bottom: 1px solid #fff; padding: 10px 0; font-size: 18px; line-height: 1.4; font-family: 'poppins'; }
    .side-news-list li:before { content: '➤ '; color: #FCFF00;margin-right: 5px; }
    @keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }

    /* FOOTER */
    .footer { height: 50px; background: #010b1f; border-top: 4px solid var(--gold); display: flex; z-index: 50; flex-shrink: 0; }
    .lbl-news { width: 140px; background: var(--gold); color: #000; display: flex; align-items: center; justify-content: center; font-family: 'Oswald'; font-weight: 800; font-size: 30px; letter-spacing: 1px; }
    .ticker-wrap { flex: 1; overflow: hidden; display: flex; align-items: center; background: #0d0cb0; }
    .ticker-move { display: flex; animation: tick 30s linear infinite; white-space: nowrap; }
    .t-item { color: #fff; font-size: 24px; font-weight: 600; margin-right: 60px; display: flex; align-items: center; text-transform: uppercase; font-family: 'Roboto Condensed'; }
    .t-item::before { content: '🔴'; margin-right: 10px; font-size: 18px; }
    @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

    /* REC Button */
    .admin-rec-box { position: fixed; bottom: 80px; right: 20px; z-index: 2147483647; background: rgba(0,0,0,0.9); border: 2px solid #ffcc00; border-radius: 50px; display: flex; align-items: center; padding: 10px 25px; gap: 10px; box-shadow: 0 0 25px rgba(255,0,0,0.8); cursor: pointer; }
    .btn-rec { background: transparent; color: white; border: none; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; text-transform: uppercase; }
    .rec-dot { width: 15px; height: 15px; background: red; border-radius: 50%; animation: pulse 1s infinite; }
    .not-rec .rec-dot { background: #555; animation: none; }

    @media (max-width: 1024px) {
        body { display: flex; justify-content: center; align-items: center; }
        #tv-wrapper { width: 1280px; height: 720px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; box-shadow: none; }
        .flash-title { font-size: 40px; }
    }
    
    
    
    @media (max-width: 480px) {
  .flash-title {
    font-size:  22px;
  }
  
  .off-air-footer {
  position: absolute;
  bottom: 10px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 14px;
  }
  .flash-subtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  color: #ffcc00;
  }
  
 }