*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:system-ui,"Segoe UI",Tahoma,Arial,sans-serif;color:#fff}
body:not(.ifr){-webkit-user-select:none;user-select:none}
#app{position:relative;width:100%;height:100%;background:#000;overflow:hidden;direction:rtl}
#stage{position:absolute;inset:0;background:#000}
#stage video,#stage .video-js,#stage .plyr,#stage .dplayer,#stage .jwplayer{width:100%!important;height:100%!important}
#stage video{object-fit:contain;background:#000}
#stage .plyr{display:flex;flex-direction:column;justify-content:center}
#stage .plyr--video{background:#000}
#poster{position:absolute;inset:0;background:#0b0f17 center/cover no-repeat;transition:opacity .4s;z-index:2}
#poster::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.15),rgba(0,0,0,.78))}
#app.shown #poster{opacity:0;pointer-events:none}
#wm{position:absolute;top:12px;left:12px;max-width:22%;max-height:14%;opacity:.8;pointer-events:none;z-index:4}

/* splash */
#splash,#cd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:5;cursor:pointer;text-align:center;padding:16px}
#cd{cursor:default;background:#07090d}
#app.started #splash{display:none}
.ttl{font-size:clamp(15px,3.6vw,26px);font-weight:700;text-shadow:0 2px 12px #000;max-width:90%}
#bigplay{width:clamp(64px,13vw,96px);height:clamp(64px,13vw,96px);border-radius:50%;border:0;background:var(--accent);box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:pointer;display:grid;place-items:center;transition:transform .15s;animation:pulse 2s infinite}
#bigplay:hover{transform:scale(1.07)}
#bigplay svg{width:48%;height:48%;fill:#fff;margin-inline-start:-4%}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent),0 10px 40px rgba(0,0,0,.5)}70%{box-shadow:0 0 0 24px transparent,0 10px 40px rgba(0,0,0,.5)}100%{box-shadow:0 0 0 0 transparent,0 10px 40px rgba(0,0,0,.5)}}
#count{font-size:clamp(18px,5vw,34px);font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums;direction:ltr;text-shadow:0 2px 12px #000}
[hidden]{display:none!important}

/* spinner + message */
#spin{position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:sp .8s linear infinite;z-index:6;pointer-events:none}
@keyframes sp{to{transform:rotate(360deg)}}
#msg{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;background:rgba(0,0,0,.82);text-align:center;padding:20px}
#msg p{margin:0;font-size:15px;line-height:1.7;max-width:420px}
#retry{border:0;background:var(--accent);color:#fff;font:inherit;font-weight:600;padding:9px 22px;border-radius:999px;cursor:pointer}


/* iframe engine */
#fr{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* third-party skins: use the accent colour where they allow it */
.plyr{--plyr-color-main:var(--accent)}
.video-js .vjs-big-play-button{background-color:var(--accent);border-color:var(--accent)}
.vjs-theme-city .vjs-play-progress,.video-js .vjs-play-progress{background:var(--accent)}