/* الشاشات الأربع: التحميل · انتظار الاتصال · العدّ التنازلي · النتائج */
#screens { inset: 0; z-index: 80; pointer-events: none; }
#screens > .screen { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; pointer-events: auto; }
#screens > .screen.on { display: flex; animation: scr-in .4s ease both; }
@keyframes scr-in { from { opacity: 0; } to { opacity: 1; } }

/* التحميل */
#screen-loading { background: radial-gradient(ellipse at 50% 40%, #8a4e26 0%, #3D1F0C 70%); z-index: 3; }
#screen-loading .big-logo { display: flex; align-items: center; gap: 28px; font-family: var(--f-display); font-weight: 900; }
#screen-loading .big-logo .w { font-size: 120px; color: var(--cream); } #screen-loading .big-logo .w.hl { font-size: 170px; color: var(--yellow); } #screen-loading .big-logo .w.sm { font-size: 96px; }
#screen-loading .big-logo svg { width: 190px; height: 190px; animation: bag-hop .7s ease-in-out infinite alternate; }
#screen-loading img { max-width: 900px; max-height: 300px; }
#screen-loading .msg { margin-top: 36px; font: 900 44px var(--f-body); color: var(--yellow-light); }
#screen-loading .bar { width: 640px; margin-top: 26px; height: 34px; border-radius: 17px; }
#screen-loading .err { margin-top: 28px; max-width: 1200px; font: 800 30px/1.5 var(--f-body); color: #ffd7cf; background: rgba(168, 35, 26, .55); border: 5px solid var(--ink); border-radius: 22px; padding: 14px 26px; display: none; white-space: pre-line; text-align: center; }
@keyframes bag-hop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-26px) rotate(6deg); } }

/* انتظار الاتصال */
#screen-waiting { background: rgba(43, 20, 7, .84); z-index: 2; gap: 0; }
#screen-waiting .wm { position: absolute; right: 240px; bottom: 90px; width: 420px; height: 590px; }
#screen-waiting .col { display: flex; flex-direction: column; align-items: center; margin-left: 260px; }
#screen-waiting h1 { font: 900 84px var(--f-display); color: var(--yellow); }
#screen-waiting .hint { margin-top: 12px; font: 800 40px var(--f-body); color: var(--cream); }
#screen-waiting .try { margin-top: 26px; display: flex; align-items: center; gap: 14px; font: 800 34px var(--f-body); color: var(--yellow-light); background: rgba(0, 0, 0, .35); border: 5px solid var(--ink); border-radius: 26px; padding: 8px 26px; }
#screen-waiting .try .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--warn); border: 4px solid var(--ink); animation: tick-pulse .6s ease-in-out infinite alternate; }
#screen-waiting .url { margin-top: 16px; font: 700 26px monospace; direction: ltr; color: #e3c79a; opacity: .85; max-width: 900px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-waiting .err { margin-top: 12px; font: 800 28px var(--f-body); color: #ffb3a6; min-height: 36px; }
#screen-waiting .btn { margin-top: 26px; }

/* العدّ التنازلي */
#screen-intro { background: rgba(43, 20, 7, .55); z-index: 1; }
#screen-intro .t { font: 900 90px var(--f-display); color: var(--cream); }
#screen-intro .n { font: 900 360px/1 var(--f-display); color: var(--yellow); }
#screen-intro .n.pop { animation: intro-pop .9s ease-out; }
@keyframes intro-pop { 0% { transform: scale(2.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { transform: scale(.95); opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }

/* النتائج */
#screen-results { background: radial-gradient(ellipse at 50% 35%, rgba(138, 78, 38, .96) 0%, rgba(43, 20, 7, .97) 75%); z-index: 4; justify-content: flex-start; padding-top: var(--m-top); }
#screen-results .rt { font: 900 76px var(--f-display); color: var(--yellow); margin-top: 6px; }
#screen-results .podium { display: flex; align-items: flex-end; justify-content: center; gap: 34px; margin-top: 14px; height: 470px; direction: rtl; }
.pod { width: 340px; display: flex; flex-direction: column; align-items: center; position: relative; animation: pod-rise .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.pod.p1 { animation-delay: .5s; } .pod.p2 { animation-delay: .25s; } .pod.p3 { animation-delay: 0s; }
@keyframes pod-rise { from { transform: translateY(160px); opacity: 0; } to { transform: none; opacity: 1; } }
.pod .av { width: 150px; height: 150px; border-width: 7px; box-shadow: 0 0 0 7px var(--cardboard); }
.pod.p1 .av { width: 210px; height: 210px; box-shadow: 0 0 0 9px var(--yellow), 0 0 50px 8px rgba(255, 199, 44, .75); }
.pod .crown { width: 110px; height: 110px; margin-bottom: -26px; z-index: 2; animation: gift-bounce .8s ease-in-out infinite alternate; }
.pod .nm { margin-top: 12px; font: 900 40px/1.15 var(--f-body); color: var(--cream); max-width: 330px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.pod .title { font: 900 36px var(--f-display); color: var(--yellow); margin-top: 2px; }
.pod .pts { font: 900 46px var(--f-body); color: var(--yellow-light); }
.pod .step { width: 100%; margin-top: 10px; border: 6px solid var(--ink); border-radius: 22px 22px 0 0; display: flex; align-items: center; justify-content: center; font: 900 84px var(--f-display); color: var(--ink); background: linear-gradient(180deg, var(--cardboard), var(--cardboard-dark)); }
.pod.p1 .step { height: 150px; background: linear-gradient(180deg, var(--yellow-light), var(--yellow-dark)); } .pod.p2 .step { height: 110px; background: linear-gradient(180deg, #E4EBF0, #A9B6C1); } .pod.p3 .step { height: 80px; }
#screen-results .none { font: 900 58px var(--f-body); color: var(--yellow-light); margin: 80px 0; }
#screen-results .stats { display: flex; gap: 22px; margin-top: 26px; }
.stat { min-width: 270px; padding: 12px 22px; border: 6px solid var(--ink); border-radius: 28px; background: linear-gradient(180deg, var(--brown), var(--brown-dark)); box-shadow: 0 8px 0 rgba(0, 0, 0, .5); text-align: center; animation: pod-rise .6s ease both; }
.stat:nth-child(2) { animation-delay: .1s; } .stat:nth-child(3) { animation-delay: .2s; } .stat:nth-child(4) { animation-delay: .3s; }
.stat .k { font: 800 28px var(--f-body); color: var(--yellow-light); }
.stat .v { font: 900 52px/1.2 var(--f-display); color: var(--cream); display: flex; align-items: center; justify-content: center; gap: 12px; }
.stat .v svg { width: 60px; height: 60px; }
#screen-results .next { margin-top: 26px; display: flex; align-items: center; gap: 30px; }
#screen-results .next .timer { font: 900 46px var(--f-body); color: var(--yellow-light); }
#screen-results .next .timer b { font-size: 64px; color: var(--yellow); margin: 0 8px; }