/* v4: centered compact player, responsive 16:9 video, pure black canvas. */
:root { color-scheme: dark; --gold:#ffce00; font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
html,body { width:100%; min-width:320px; min-height:100%; margin:0; background:#000; color:#fff; }
.shell { background:#000; width:100%; min-height:100vh; padding:clamp(12px,2.5vw,32px); }
.event-stage { width:100%; max-width:1440px; margin-inline:auto; }
/* The banner and the card use the SAME containing block and width. */
.event-header { width:100%; min-height:clamp(104px,13vw,190px); display:flex; align-items:center; gap:clamp(12px,2.8vw,38px); padding:clamp(10px,1.8vw,24px); background:#000; }
.anniversary-logo { display:block; width:clamp(100px,18vw,245px); height:auto; flex:none; object-fit:contain; }
.event-heading { flex:1; min-width:0; }
.event-heading h1 { margin:0 0 8px; font-size:clamp(18px,3vw,40px); line-height:1.35; font-weight:800; }
.event-heading p { margin:0; color:#d4d4d4; font-size:clamp(12px,1.75vw,23px); }
.player-panel { width:100%; max-width:960px; margin:0 auto; padding:clamp(5px,0.8vw,12px); border:1px solid #282828; background:#101010; border-radius:clamp(12px,1.6vw,22px); box-shadow:0 14px 42px #0008; }
.video-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius:clamp(8px,1vw,14px); isolation:isolate; }
#video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
/* Do not render a poster as a container background: it can leak out as vertical strips. */
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; padding:16px; background:transparent; z-index:2; }
.overlay[hidden],button[hidden] { display:none!important; }
.overlay:not(.is-error) h2,.overlay:not(.is-error) p { display:none; }
.overlay #start-button { display:grid; place-items:center; width:clamp(64px,7vw,96px); height:clamp(64px,7vw,96px); border:2px solid #fff9; border-radius:50%; background:rgba(255,206,0,.96); color:#000; cursor:pointer; box-shadow:0 5px 28px #000a; transition:transform .15s ease; }
.overlay #start-button svg { display:block; margin-left:3px; }
@media(hover:hover) { .overlay #start-button:hover { transform:scale(1.07); } }
.overlay button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.overlay.is-error { background:rgba(0,0,0,.88); }
.overlay.is-error h2 { margin:0 0 12px; font-size:clamp(18px,2vw,26px); }
.overlay.is-error p { max-width:460px; margin:0 0 18px; color:#ddd; line-height:1.5; }
.overlay .secondary { border:0; border-radius:24px; padding:12px 24px; background:var(--gold); color:#000; cursor:pointer; font-weight:700; }
@media(max-width:700px) {
 .shell { padding:10px; }
 .event-header { padding:10px 2px 14px; gap:10px; min-height:95px; }
 .anniversary-logo { width:clamp(90px,28vw,145px); }
 .event-heading h1 { font-size:clamp(16px,4.4vw,25px); margin-bottom:4px; }
 .event-heading p { font-size:clamp(11px,2.8vw,16px); }
 .player-panel { padding:5px; border-radius:12px; }
 .video-wrap { border-radius:8px; }
}
@media(max-width:360px) { .anniversary-logo { width:85px; } .event-heading h1 { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .overlay #start-button { transition:none; } }


/* Anniversary frame (v5): preserve the original header and 960px player. */
.event-stage {
  border:1px solid rgba(255,206,0,.35);
  border-radius:24px;
  overflow:hidden;
  background:#050505;
  box-shadow:0 0 0 1px rgba(255,206,0,.05),0 18px 55px #000;
}
.event-header { border-bottom:1px solid rgba(255,206,0,.16); }
/* Side columns deliberately stay empty. */
.player-panel {
  margin-block:clamp(24px,3vw,42px) clamp(24px,3vw,42px);
  border-color:rgba(255,206,0,.55);
  box-shadow:0 0 0 4px rgba(255,206,0,.045),0 14px 42px #000a;
}
.anniversary-footer { position:relative; width:100%; overflow:hidden; background:#060503; }
.connectivity-banner { display:block; width:100%; height:auto; min-height:135px; max-height:320px; object-fit:cover; object-position:center; }
.anniversary-footer-caption {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(15px,2vw,28px);
  border-top:1px solid rgba(255,206,0,.18);
  color:#d1a62a; background:#090704;
  font-size:clamp(9px,1vw,12px); letter-spacing:.15em;
}
@media(max-width:700px) {
  .event-stage { border-radius:15px; }
  .player-panel { margin-block:22px 24px; }
  .connectivity-banner { min-height:95px; max-height:190px; }
  .anniversary-footer-caption { letter-spacing:.07em; }
}


/* Version 6: simplified Persian header, broader desktop frame, mobile viewport layout. */
:root { font-family: Tahoma, "Noto Sans Arabic", "Segoe UI", sans-serif; }
.shell { padding:clamp(10px,1.5vw,22px); }
.event-stage { max-width:1720px; }
.event-header { min-height:clamp(94px,9vw,134px); }
.event-heading h1 { font-family:Tahoma,"Noto Sans Arabic",sans-serif; font-weight:700; letter-spacing:0; font-size:clamp(19px,2.3vw,32px); }
.player-panel { max-width:960px; }
.anniversary-footer { margin-top:auto; }
.connectivity-banner { max-height:350px; }
.banner-message { position:absolute; z-index:1; right:3.5%; top:14%; text-align:left; color:#f4cc48; font:800 clamp(15px,2.2vw,34px)/1.15 "Segoe UI",Arial,sans-serif; letter-spacing:.03em; text-shadow:0 2px 10px #000; }
.banner-message strong { display:block; max-width:330px; font-size:.48em; line-height:1.4; color:#fff; letter-spacing:.08em; }
@media (max-width:700px) {
 html,body { min-height:100%; }
 .shell { height:100dvh; min-height:460px; padding:7px; }
 .event-stage { height:100%; min-height:0; display:flex; flex-direction:column; border-radius:15px; }
 .event-header { flex:0 0 auto; min-height:76px; padding:8px 10px; }
 .anniversary-logo { width:clamp(76px,21vw,108px); }
 .event-heading h1 { font-size:clamp(16px,4.5vw,23px); }
 .player-panel { flex:0 0 auto; max-width:100%; margin:clamp(12px,3vh,28px) auto 0; padding:4px; }
 .anniversary-footer { flex:0 0 auto; margin-top:auto; }
 .connectivity-banner { width:100%; height:clamp(132px,25dvh,220px); min-height:0; max-height:none; object-fit:cover; object-position:center bottom; }
 .banner-message { top:auto; bottom:10px; left:0; right:0; text-align:center; font-size:clamp(15px,4.5vw,21px); text-shadow:0 2px 5px #000,0 0 13px #000; }
 .banner-message strong { max-width:none; margin-top:4px; font-size:.69em; }
}
@media(max-width:700px) and (max-height:570px) { .shell { min-height:0; } .event-header { min-height:57px; } .anniversary-logo { width:70px; } .player-panel { margin-top:8px; } .connectivity-banner { height:clamp(78px,20dvh,132px); } }

/* v7: copy is in a dedicated opaque band, never layered over artwork. */
.anniversary-footer { display:flex; flex-direction:column; background:#050403; }
.banner-message { position:static; display:block; width:100%; max-width:none; text-align:center; padding:12px 14px 15px; box-sizing:border-box; background:#050403; color:#ffce40; font:700 clamp(14px,1.8vw,23px)/1.35 Tahoma,Arial,sans-serif; letter-spacing:.03em; text-shadow:none; border-top:1px solid rgba(255,206,0,.23); }
.banner-message strong { display:inline; max-width:none; font-size:inherit; line-height:inherit; color:inherit; letter-spacing:inherit; }
@media(max-width:700px) {
 .banner-message { position:static; padding:9px 8px 12px; font-size:clamp(12px,3.3vw,16px); line-height:1.25; }
 .banner-message strong { display:inline; font-size:inherit; margin:0; }
 .connectivity-banner { height:clamp(100px,20dvh,180px); }
}

/* v8 desktop kiosk layout: all content stays inside the viewport; no scrolling.
   The player scales down only if vertical space is insufficient. Mobile v7 rules stay intact. */
@media (min-width:701px) {
  html, body { height:100%; overflow:hidden; }
  .shell {
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    padding:clamp(8px,1.25vh,18px);
  }
  .event-stage {
    height:100%;
    min-height:0;
    display:grid;
    grid-template-rows:clamp(80px,13dvh,120px) minmax(0,1fr) clamp(115px,25dvh,255px);
  }
  .event-header {
    height:100%;
    min-height:0;
    padding:6px clamp(12px,2vw,28px);
    overflow:hidden;
  }
  .anniversary-logo {
    width:clamp(90px,9vw,142px);
    max-height:100%;
    object-fit:contain;
  }
  .player-panel {
    width:min(960px, calc(100% - 28px), calc((100dvh - clamp(80px,13dvh,120px) - clamp(115px,25dvh,255px) - 74px) * 16 / 9));
    max-width:960px;
    min-width:0;
    align-self:center;
    justify-self:center;
    margin:0;
    padding:clamp(4px,.6dvh,8px);
  }
  .anniversary-footer { height:100%; min-height:0; margin:0; overflow:hidden; }
  .connectivity-banner {
    flex:1 1 0;
    height:0;
    min-height:0;
    max-height:none;
    width:100%;
    object-fit:cover;
    object-position:center bottom;
  }
  .banner-message {
    flex:0 0 auto;
    padding:clamp(5px,.9dvh,10px) 10px;
    font-size:clamp(12px,1.45vw,20px);
  }
}

/* v9: full, uncropped artwork behind the player on desktop. */
@media (min-width:701px) {
  .event-stage { position:relative; isolation:isolate; grid-template-rows:clamp(80px,13dvh,120px) minmax(0,1fr); }
  .event-header { position:relative; z-index:3; background:#050505; }
  .anniversary-footer { position:absolute; z-index:0; inset:clamp(80px,13dvh,120px) 0 0; height:auto; display:flex; align-items:stretch; justify-content:flex-end; pointer-events:none; background:transparent; }
  .connectivity-banner { position:absolute; inset:0; width:100%; height:100%; max-height:none; min-height:0; object-fit:contain; object-position:center bottom; opacity:.5; }
  .banner-message { position:relative; z-index:1; align-self:flex-end; width:100%; background:#050403; }
  .player-panel { position:relative; z-index:2; align-self:center; margin-bottom:clamp(35px,7dvh,85px); width:min(960px, calc(100% - 28px), calc((100dvh - clamp(80px,13dvh,120px) - 125px) * 16 / 9)); background:#101010; }
}

/* v10: move the desktop video player up by exactly 20px without changing layout flow. */
@media (min-width:701px) {
  .player-panel { transform:translateY(-20px); }
}

/* v11: slightly taller desktop header; retains fixed-height stage and -20px player shift. */

/* v12: desktop player begins exactly 30px after the header ends. */
@media (min-width:701px) {
  .player-panel {
    align-self:start;
    margin-top:30px;
    margin-bottom:0;
    transform:none;
    /* Reserve space for the gap and bottom message on short displays. */
    width:min(960px, calc(100% - 28px), calc((100dvh - clamp(80px,13dvh,120px) - 110px) * 16 / 9));
  }
}