/* ===== شاشة الغرفة (Room Screen) ===== */

/* ---------- زرار الشريط السفلي + تأثير "فيه فيديو شغال" ---------- */
#screen_btn{position:relative;}
#screen_btn.scr_live i.fa-tv{background:linear-gradient(135deg,#22d3ee,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 5px rgba(168,85,247,.6));animation:scrIcon 1.6s ease-in-out infinite;}
#screen_btn.scr_live::before{content:'';position:absolute;left:50%;top:44%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(168,85,247,.85);animation:scrRing 1.8s ease-out infinite;pointer-events:none;}
#screen_btn.scr_new i.fa-tv{animation:scrShake .9s ease-in-out infinite;}
#screen_btn.scr_new::before{border-color:rgba(236,72,153,.95);animation-duration:1s;}
#screen_btn .scr_eq{position:absolute;top:2px;right:50%;margin-right:-22px;display:flex;align-items:flex-end;gap:2px;height:11px;padding:2px 3px;border-radius:7px;background:#ec4899;box-shadow:0 0 8px rgba(236,72,153,.8);pointer-events:none;}
#screen_btn .scr_eq i{display:block;width:2px;background:#fff;border-radius:1px;animation:scrEq .8s ease-in-out infinite;}
#screen_btn .scr_eq i:nth-child(1){height:4px;animation-delay:0s;}
#screen_btn .scr_eq i:nth-child(2){height:8px;animation-delay:.2s;}
#screen_btn .scr_eq i:nth-child(3){height:5px;animation-delay:.4s;}
@keyframes scrRing{0%{transform:scale(.55);opacity:.95;}100%{transform:scale(1.5);opacity:0;}}
/* [PERF] الهالة بقت filter ثابتة (بتترستر مرة) والأنيميشن بقى transform بس */
@keyframes scrIcon{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@keyframes scrShake{0%,100%{transform:rotate(0) scale(1.1);}20%{transform:rotate(-12deg) scale(1.15);}40%{transform:rotate(10deg) scale(1.15);}60%{transform:rotate(-7deg) scale(1.1);}80%{transform:rotate(5deg) scale(1.1);}}
@keyframes scrEq{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1.7);}}
@keyframes scrBars{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}

/* ---------- النافذة ---------- */
.scr_root{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147482000;display:flex;align-items:flex-end;justify-content:center;font-family:inherit;}
.scr_back{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(5,6,18,.62);}
.scr_pop{position:relative;width:100%;max-width:560px;max-height:96vh;max-height:96dvh;display:flex;flex-direction:column;background:#12122a;color:#e9e9f7;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -10px 40px rgba(0,0,0,.55);}
@media (min-width:701px){
	.scr_root{align-items:center;}
	.scr_pop{border-radius:22px;max-height:90vh;}
}
.scr_head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(90deg,#1f1b4d,#2a1f5c 55%,#33236b);flex:0 0 auto;}
.scr_ttl{display:flex;align-items:center;gap:10px;min-width:0;}
.scr_ttl b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr_logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;background:linear-gradient(135deg,#22d3ee,#8b5cf6 60%,#d946ef);flex:0 0 auto;}
.scr_sp{flex:1;}
.scr_eye{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:14px;background:rgba(255,255,255,.1);font-size:15px;font-weight:bold;}
.scr_eye em{font-style:normal;}
.scr_hbtn{width:38px;height:38px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.scr_hbtn:hover{background:rgba(255,255,255,.22);}

/* الشاشة نفسها */
.scr_stage{position:relative;width:100%;aspect-ratio:16/9;background:#06061a;flex:0 0 auto;overflow:hidden;}
.scr_media,.scr_media iframe,.scr_video{position:absolute;left:0;top:0;width:100%;height:100%;border:0;}
.scr_video{object-fit:contain;background:#000;}
.scr_block{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
.scr_idle{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 18px;background:radial-gradient(circle at 25% 20%,rgba(59,63,150,.45),transparent 55%),radial-gradient(circle at 80% 85%,rgba(147,51,234,.4),transparent 55%),linear-gradient(160deg,#0e0e26,#1a1238);}
.scr_idle_t{font-size:15px;opacity:.85;line-height:1.6;}
.scr_bars{display:flex;align-items:flex-end;gap:7px;height:50px;}
.scr_bars i{display:block;width:12px;height:100%;border-radius:8px;background:linear-gradient(180deg,#22d3ee,#d946ef);transform-origin:bottom;animation:scrBars 1.1s ease-in-out infinite;}
.scr_bars i:nth-child(2){animation-delay:.25s;height:78%;}
.scr_bars i:nth-child(3){animation-delay:.5s;height:60%;}
.scr_tap{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:20px;padding:10px 18px;background:rgba(0,0,0,.72);color:#fff;font-size:14px;cursor:pointer;font-family:inherit;}
.scr_prog{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);}
.scr_prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#d946ef);}

/* الجزء السفلي */
.scr_body{padding:12px 12px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0;}
.scr_now{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.scr_now_t{flex:1;min-width:0;font-size:16px;font-weight:bold;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.scr_nbtn{flex:0 0 auto;min-width:46px;height:42px;border:0;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer;}
.scr_nbtn:hover{background:rgba(255,255,255,.2);}
.scr_tabs{display:flex;gap:6px;padding:6px;border-radius:18px;background:#1b1b36;margin-bottom:12px;}
.scr_tab{flex:1;border:0;border-radius:13px;padding:11px 4px;background:transparent;color:#b9b9d6;font-size:15px;font-weight:bold;cursor:pointer;font-family:inherit;white-space:nowrap;}
.scr_tab.on{background:linear-gradient(135deg,#2d4f7d,#3d3a8c);color:#fff;}
.scr_cnt{font-style:normal;display:inline-block;min-width:22px;padding:1px 6px;border-radius:12px;background:rgba(255,255,255,.14);font-size:13px;text-align:center;}
.scr_panel{display:none;}
.scr_panel.on{display:block;}
.scr_row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;}
.scr_in{flex:1 1 180px;min-width:0;height:48px;border-radius:14px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#fff;padding:0 14px;font-size:15px;font-family:inherit;outline:none;box-sizing:border-box;}
.scr_in::placeholder{color:#8f8fb0;}
.scr_in:focus{border-color:#a855f7;}
.scr_sbtn{flex:0 0 52px;height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,#22d3ee,#4f6bed);color:#fff;font-size:18px;cursor:pointer;}
.scr_ubtn{flex:1 1 100%;height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;font-size:16px;font-weight:bold;cursor:pointer;font-family:inherit;}
@media (min-width:480px){.scr_ubtn{flex:0 0 auto;padding:0 18px;}}
.scr_info{margin-top:10px;padding:12px 14px;border-radius:14px;background:#201a46;font-size:13.5px;line-height:1.8;color:#d6d3f0;}
.scr_up{margin-top:10px;font-size:13px;}
.scr_up_bar{height:6px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden;margin-bottom:6px;}
.scr_up_bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22d3ee,#d946ef);transition:width .2s;}
.scr_results{margin-top:8px;}
.scr_item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:#1b1b36;margin-top:8px;}
.scr_res{cursor:pointer;}
.scr_res:hover{background:#25254a;}
.scr_th{flex:0 0 84px;height:48px;border-radius:10px;overflow:hidden;background:#2a2a50;display:flex;align-items:center;justify-content:center;color:#8f8fb0;font-size:20px;}
.scr_th img{width:100%;height:100%;object-fit:cover;display:block;}
.scr_mid{flex:1;min-width:0;}
.scr_it{font-size:14px;font-weight:bold;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.scr_im{font-size:12px;color:#a5a5c8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scr_ib{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.scr_del:hover{background:#c0392b;}
.scr_addi{background:linear-gradient(135deg,#22d3ee,#8b5cf6);}
.scr_empty{padding:22px 10px;text-align:center;color:#9d9dc2;font-size:14px;}
.scr_toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,20px);max-width:90%;padding:10px 18px;border-radius:14px;background:rgba(0,0,0,.88);color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s; /* [PERF] بدل transition:all */z-index:10;text-align:center;}
.scr_toast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- الوضع المصغّر (الفيديو يكمّل والشات شغال) ---------- */
.scr_root.mini{pointer-events:none;align-items:flex-end;justify-content:flex-start;}
.scr_root.mini .scr_back{display:none;}
.scr_root.mini .scr_pop{pointer-events:auto;width:250px;max-width:70vw;margin:0 10px 74px 10px;border-radius:16px;}
.scr_root.mini .scr_body,.scr_root.mini .scr_eye,.scr_root.mini .scr_logo{display:none;}
.scr_root.mini .scr_head{padding:6px 8px;}
.scr_root.mini .scr_ttl b{font-size:13px;}
.scr_root.mini .scr_hbtn{width:30px;height:30px;font-size:12px;}
@media (min-width:701px){.scr_root.mini{align-items:flex-end;}}