/* الواجهة: الشريط العلوي · لوحة الأمر (يسار) · المتصدرون (يمين) · آخر التعليقات (أسفل) · التراكبات · مؤشر الاتصال.
   كل المقاسات على مسرح 1920×1080 والهوامش الآمنة من --m-* (تُضبط من config.js). الخطوط كبيرة عمداً لتُقرأ على شاشة الجوال. */

/* ═════════ الشريط العلوي ═════════ */
#hud-top { top: var(--m-top); left: var(--m-left); right: var(--m-right); height: 120px; display: flex; align-items: center; justify-content: space-between; z-index: 20; }
#hud-round { width: 440px; height: 112px; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.round-line { display: flex; align-items: baseline; justify-content: center; gap: 12px; font-weight: 900; }
.round-line .lbl { font-size: 28px; color: var(--yellow-light); }
.round-line b { font-size: 46px; line-height: 1; color: var(--yellow); }
#stage-steps { display: flex; align-items: center; justify-content: center; gap: 0; }
.step { width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--ink); background: var(--brown-light); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .25s, background .25s; flex: none; }
.step svg { width: 30px; height: 30px; opacity: .55; }
.step + .step { margin-right: 22px; }
.step + .step::before { content: ''; position: absolute; right: -26px; top: 50%; width: 22px; height: 6px; margin-top: -3px; background: var(--ink); border-radius: 3px; opacity: .55; }
.step.done { background: var(--ok); } .step.done svg { opacity: 1; }
.step.now { background: var(--yellow); transform: scale(1.22); box-shadow: 0 0 0 5px rgba(255, 199, 44, .35); } .step.now svg { opacity: 1; }

#logo { flex: 1; height: 112px; margin: 0 22px; display: flex; align-items: center; justify-content: center; gap: 16px; border: 6px solid var(--ink); border-radius: 34px; background: linear-gradient(180deg, var(--red-light) 0%, var(--red) 45%, var(--red-dark) 100%); box-shadow: 0 8px 0 rgba(43, 20, 7, .55), inset 0 0 0 4px rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
#logo::after { content: ''; position: absolute; left: -20%; right: -20%; top: 0; height: 38%; background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); pointer-events: none; }
#logo .w { font-family: var(--f-display); font-weight: 900; color: var(--cream); font-size: 56px; line-height: 1.1; }
#logo .w.hl { font-size: 76px; color: var(--yellow); }
#logo .w.sm { font-size: 46px; }
#logo svg.ic { width: 70px; height: 70px; flex: none; }
#logo img { max-height: 96px; max-width: 100%; object-fit: contain; }

#hud-timer { width: 440px; height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#score-box { flex: 1; height: 104px; padding: 6px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#score-box .lbl { font-size: 25px; font-weight: 800; color: var(--yellow-light); }
#score-box b { font-size: 50px; line-height: 1.05; color: var(--cream); font-weight: 900; }
#score-box b.bump { animation: bump .3s ease-out; }
#timer-ring { position: relative; width: 112px; height: 112px; flex: none; }
#timer-ring svg { width: 112px; height: 112px; transform: rotate(-90deg); }
#timer-ring .bgc { fill: var(--brown-dark); stroke: var(--ink); stroke-width: 6; }
#timer-ring .tick { fill: none; stroke: var(--yellow); stroke-width: 12; stroke-linecap: round; transition: stroke .2s; }
#timer-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 56px var(--f-body); color: var(--cream); }
#timer-ring.low .tick { stroke: var(--red-light); } #timer-ring.low #timer-num { color: var(--red-light); animation: tick-pulse .5s ease-in-out infinite alternate; }
#timer-ring.reveal #timer-num { font-size: 34px; color: var(--yellow-light); }
@keyframes tick-pulse { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--yellow); } 100% { transform: scale(1); } }

/* ═════════ لوحة الأمر + الشخصية (يسار) ═════════ */
#panel-left { left: var(--m-left); top: calc(var(--m-top) + 140px); bottom: calc(var(--m-bottom) + 126px); width: 400px; z-index: 15; }
#cmd-card { position: absolute; left: 0; right: 0; top: 0; height: 392px; padding: 14px 16px 16px; display: flex; flex-direction: column; overflow: hidden; }
#cmd-card.alert { border-color: var(--red-dark); background: linear-gradient(180deg, #7a1f14 0%, #3b0f09 100%); animation: alert-glow .6s ease-in-out infinite alternate; }
@keyframes alert-glow { from { box-shadow: 0 8px 0 rgba(43, 20, 7, .55), 0 0 0 0 rgba(255, 90, 60, .0); } to { box-shadow: 0 8px 0 rgba(43, 20, 7, .55), 0 0 0 12px rgba(255, 90, 60, .45); } }
.cmd-head { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; flex: none; }
.cmd-head .num { width: 46px; height: 46px; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); font: 900 28px/38px var(--f-body); text-align: center; }
.cmd-head .name { font: 900 34px var(--f-body); color: var(--yellow-light); }
.cmd-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
.cmd-tag { font: 800 27px var(--f-body); color: var(--cream); opacity: .9; margin-bottom: 2px; }
.cmd-word { font-family: var(--f-display); font-weight: 900; color: var(--yellow); line-height: 1.12; white-space: nowrap; max-width: 100%; animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1); }
.cmd-alt { font: 800 29px var(--f-body); color: var(--yellow-light); margin-top: 6px; }
.cmd-hint { font: 800 28px var(--f-body); color: var(--cream); margin-top: 8px; }
.cmd-foot { flex: none; height: 62px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.bar { height: 28px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 4px solid var(--ink); overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(180deg, var(--yellow-light), var(--yellow) 50%, var(--orange)); transition: width .15s linear; border-radius: 10px; right: 0; left: auto; }
.bar.red > i { background: linear-gradient(180deg, #ff9a8a, var(--red)); }
.bar-num { font: 800 24px var(--f-body); color: var(--cream); text-align: center; line-height: 1; opacity: .9; direction: ltr; unicode-bidi: isolate; }
.opts { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, .28); border: 4px solid var(--ink); border-radius: 22px; padding: 4px 14px; height: 82px; }
.opt svg { width: 54px; height: 54px; flex: none; }
.opt .w { font: 900 56px/1 var(--f-display); color: var(--yellow); flex: 1; text-align: right; }
.opt .n { min-width: 62px; height: 48px; padding: 0 10px; border-radius: 24px; background: var(--cream); color: var(--ink); border: 4px solid var(--ink); font: 900 30px/40px var(--f-body); text-align: center; transition: transform .2s; }
.opt .n.bump { animation: bump .3s ease-out; }
.opt.lead { background: rgba(255, 199, 44, .28); border-color: var(--yellow-dark); }
.provs { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.provs .p { font: 900 40px/1 var(--f-display); color: var(--yellow); background: rgba(0, 0, 0, .28); border: 4px solid var(--ink); border-radius: 18px; padding: 6px 14px; }
.provs .p small { font: 800 22px var(--f-body); color: var(--cream); margin-right: 6px; }
.provs .p.lead { background: rgba(255, 199, 44, .3); border-color: var(--yellow-dark); }
.ev-count { font: 900 30px var(--f-body); color: var(--cream); }
@keyframes pop-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

#manager-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; }
#manager { position: absolute; right: -10px; bottom: -10px; width: 222px; height: 312px; }
#manager.img-mode { width: 230px; }
#speech { position: absolute; left: 0; bottom: 150px; width: 188px; min-height: 84px; padding: 10px 14px; background: var(--cream); color: var(--ink); border: 5px solid var(--ink); border-radius: 26px; font: 900 30px/1.25 var(--f-body); text-align: center; opacity: 0; transform: scale(.7) translateY(10px); transform-origin: 100% 100%; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 6px 0 rgba(43, 20, 7, .5); z-index: 3; }
#speech.show { opacity: 1; transform: none; }
#speech::after { content: ''; position: absolute; right: -18px; bottom: 22px; width: 26px; height: 26px; background: var(--cream); border: 5px solid var(--ink); border-left: none; border-bottom: none; transform: rotate(45deg) skew(8deg, 8deg); }

/* ═════════ المتصدرون (يمين) ═════════ */
#panel-right { right: var(--m-right); top: calc(var(--m-top) + 140px); bottom: calc(var(--m-bottom) + 126px); width: 400px; z-index: 15; padding: 0; overflow: hidden; }
.lb-head { height: 76px; display: flex; align-items: center; justify-content: center; gap: 12px; font: 900 40px var(--f-body); color: var(--yellow); background: rgba(0, 0, 0, .25); border-bottom: 5px solid var(--ink); }
.lb-head svg { width: 48px; height: 48px; }
#lb-rows { position: absolute; left: 0; right: 0; top: 92px; bottom: 10px; }
#lb-empty { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 800 30px var(--f-body); color: var(--yellow-light); opacity: .8; }
.lb-row { position: absolute; left: 12px; right: 12px; top: 0; height: 108px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 24px; background: rgba(255, 243, 214, .10); border: 4px solid rgba(0, 0, 0, .25); transition: transform .45s cubic-bezier(.3, 1.2, .4, 1), opacity .35s; will-change: transform; }
.lb-row.r1 { background: linear-gradient(90deg, rgba(255, 199, 44, .34), rgba(255, 138, 31, .26)); border-color: var(--yellow-dark); }
.lb-row.out { opacity: 0; }
.lb-row .rk { width: 52px; height: 52px; border-radius: 50%; border: 4px solid var(--ink); background: var(--cardboard); color: var(--ink); font: 900 30px/44px var(--f-body); text-align: center; flex: none; }
.lb-row.r1 .rk { background: var(--yellow); } .lb-row.r2 .rk { background: #D8E0E6; } .lb-row.r3 .rk { background: #E0A15E; }
.lb-row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.lb-row .nm .u { font: 900 30px/1.15 var(--f-body); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; }
.lb-row .nm .s { font: 900 40px/1.05 var(--f-body); color: var(--yellow); }
.lb-row .nm .s.bump { animation: bump .3s ease-out; }
.lb-row .fl { width: 46px; height: 46px; flex: none; }
.lb-row .fl svg { width: 100%; height: 100%; }

.av { position: relative; width: 78px; height: 78px; border-radius: 50%; border: 5px solid var(--ink); overflow: hidden; flex: none; background-size: cover; background-position: center; box-shadow: 0 0 0 4px var(--cardboard); }
.lb-row.r1 .av { box-shadow: 0 0 0 4px var(--yellow); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.av img.ok { opacity: 1; }

/* ═════════ آخر التعليقات (أسفل) ═════════ */
#feed { left: var(--m-left); right: var(--m-right); bottom: var(--m-bottom); height: 100px; z-index: 12; overflow: visible; pointer-events: none; }
.chip { position: absolute; right: 0; top: 10px; width: 348px; height: 80px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; border: 5px solid var(--ink); border-radius: 40px; background: linear-gradient(180deg, #8a4e26, var(--brown-dark)); box-shadow: 0 6px 0 rgba(43, 20, 7, .5); transition: transform .4s cubic-bezier(.3, 1.3, .4, 1), opacity .35s; will-change: transform; }
.chip .av { width: 58px; height: 58px; border-width: 4px; box-shadow: none; }
.chip .u { flex: 1; min-width: 0; font: 900 27px/1.1 var(--f-body); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; }
.chip .c { padding: 2px 14px; border-radius: 22px; border: 4px solid var(--ink); background: var(--yellow); color: var(--ink); font: 900 28px/1.2 var(--f-body); white-space: nowrap; }
.chip.vote .c { background: #8FD0F5; } .chip.event .c { background: var(--red-light); }
.chip .p { font: 900 26px var(--f-body); color: var(--ok); min-width: 54px; text-align: center; }
.chip.enter { transform: translateX(120px) scale(.6); opacity: 0; }
.chip.leave { opacity: 0; }

/* ═════════ تراكبات ═════════ */
#overlays { inset: 0; pointer-events: none; z-index: 40; }
#overlays > * { position: absolute; }
#banner { left: calc(var(--m-left) + 424px); width: calc(100% - var(--m-left) - var(--m-right) - 848px); top: 250px; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(-40px) scale(.8); }
#banner.show { animation: banner 1.7s ease both; }
@keyframes banner { 0% { opacity: 0; transform: translateY(-40px) scale(.7); } 14% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(30px) scale(.95); } }
#banner .b1 { font: 900 44px var(--f-body); color: var(--cream); background: var(--brown-dark); border: 5px solid var(--ink); border-radius: 30px; padding: 4px 30px; }
#banner .b2 { font: 900 112px/1.15 var(--f-display); color: var(--yellow); margin-top: 4px; }
#banner .b3 { font: 900 40px var(--f-body); color: var(--cream); margin-top: 6px; }
#float-layer { inset: 0; }
.float { position: absolute; font: 900 40px var(--f-body); color: var(--yellow); white-space: nowrap; will-change: transform, opacity; }
.float.green { color: var(--ok); } .float.red { color: var(--red-light); } .float.big { font-size: 64px; } .float.cream { color: var(--cream); }

#event-banner { position: absolute; left: 50%; top: 14px; width: 640px; margin-left: -320px; padding: 10px 22px; display: none; align-items: center; gap: 16px; border: 6px solid var(--ink); border-radius: 30px; background: linear-gradient(180deg, #ff6a55, var(--red-dark)); color: var(--cream); box-shadow: 0 8px 0 rgba(43, 20, 7, .5); z-index: 6; }
#event-banner.show { display: flex; animation: ev-in .4s cubic-bezier(.3, 1.5, .5, 1); }
#event-banner.good { background: linear-gradient(180deg, #5fe08a, #1f9a4a); } #event-banner.bad { background: linear-gradient(180deg, #8b8b8b, #4b4b4b); }
#event-banner.rush { background: linear-gradient(180deg, #ffc22c, #e07a00); color: var(--ink); }
#event-banner svg { width: 70px; height: 70px; flex: none; animation: siren .5s ease-in-out infinite alternate; }
#event-banner .t { font: 900 42px/1.1 var(--f-body); } #event-banner .h { font: 800 28px/1.2 var(--f-body); opacity: .95; }
#event-banner .col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#event-banner .bar { height: 20px; margin-top: 6px; border-width: 3px; }
@keyframes ev-in { from { transform: translateY(-30px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes siren { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.1); } }

#mult-badges { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 6; align-items: flex-start; }
.mb { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 10px; border: 5px solid var(--ink); border-radius: 26px; font: 900 30px var(--f-body); color: var(--ink); background: var(--yellow); box-shadow: 0 5px 0 rgba(43, 20, 7, .5); animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1); }
.mb svg { width: 34px; height: 34px; }
.mb.pts { background: linear-gradient(180deg, #7bf0a0, var(--ok)); } .mb.spd { background: linear-gradient(180deg, #a9e0ff, #4fb0ee); } .mb.abu { background: linear-gradient(180deg, #fff0a0, var(--yellow)); font-size: 34px; }

#gift-layer { left: calc(var(--m-left) + 424px); width: calc(100% - var(--m-left) - var(--m-right) - 848px); top: 168px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gift { position: relative; width: 600px; min-height: 120px; padding: 10px 18px; display: flex; align-items: center; gap: 16px; border: 6px solid var(--ink); border-radius: 36px; background: linear-gradient(180deg, #ffe38a, var(--yellow) 60%, var(--orange)); color: var(--ink); box-shadow: 0 8px 0 rgba(43, 20, 7, .55); animation: gift-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.gift.out { animation: gift-out .35s ease-in both; }
.gift .av { width: 92px; height: 92px; box-shadow: none; }
.gift .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gift .nm { font: 900 36px/1.15 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; }
.gift .gn { font: 900 30px/1.2 var(--f-body); color: var(--red-dark); }
.gift .eff { font: 800 24px/1.2 var(--f-body); }
.gift svg.gi { width: 84px; height: 84px; flex: none; animation: gift-bounce .6s ease-in-out infinite alternate; }
.gift.big { background: linear-gradient(180deg, #fff6c2, #ffd23c 50%, #ff9a1f); border-color: #8a3d00; transform-origin: 50% 0; }
@keyframes gift-in { from { transform: translateY(-80px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gift-out { to { transform: translateY(-40px) scale(.8); opacity: 0; } }
@keyframes gift-bounce { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-8px) rotate(6deg); } }

#abu-frame { inset: 0; display: none; border: 14px solid var(--yellow); box-shadow: inset 0 0 90px 10px rgba(255, 199, 44, .75); animation: abu-glow .7s ease-in-out infinite alternate; }
body.abu #abu-frame { display: block; }
@keyframes abu-glow { from { opacity: .55; } to { opacity: 1; } }

/* ═════════ مؤشر الاتصال ═════════ */
.conn { position: absolute; right: 14px; top: 12px; z-index: 7; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 14px; border: 4px solid var(--ink); border-radius: 19px; background: rgba(61, 31, 12, .88); font: 800 21px var(--f-body); color: var(--cream); transition: opacity .6s; }
.conn .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); border: 3px solid var(--ink); }
.conn.connecting .dot { background: var(--warn); animation: tick-pulse .5s ease-in-out infinite alternate; }
.conn.down .dot { background: var(--bad); animation: tick-pulse .8s ease-in-out infinite alternate; }
.conn.hide { opacity: 0; }

/* ═════════ أزرار الزاوية (تظهر عند تحريك الفأرة) + لوحة التجربة ═════════ */
#corner-btns { left: 14px; bottom: 14px; z-index: 90; display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .3s; }
body.show-ui #corner-btns, body.debug-on #corner-btns { opacity: 1; }
#btn-mute { width: 58px; padding: 6px; } #btn-mute svg { width: 100%; height: 36px; display: block; }
#audio-hint { font: 800 22px var(--f-body); color: var(--ink); background: var(--yellow-light); border: 4px solid var(--ink); border-radius: 14px; padding: 4px 12px; display: none; }
#audio-hint.show { display: block; }

#guides { inset: 0; pointer-events: none; z-index: 85; display: none; }
body.guides #guides { display: block; }
#guides .g { position: absolute; border: 3px dashed rgba(255, 0, 80, .9); }
#guides .t { position: absolute; font: 800 20px var(--f-body); color: #fff; background: rgba(255, 0, 80, .85); padding: 2px 10px; }

#debug { left: 14px; top: 14px; width: 470px; max-height: 1040px; overflow: auto; z-index: 95; display: none; padding: 14px; font-size: 22px; direction: rtl; }
body.debug-open #debug { display: block; }
#debug h3 { font: 900 30px var(--f-body); color: var(--yellow); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
#debug .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
#debug input[type=text], #debug input[type=number], #debug select { font: 700 22px var(--f-body); padding: 6px 10px; border: 4px solid var(--ink); border-radius: 12px; background: var(--cream); color: var(--ink); min-width: 0; flex: 1; direction: auto; }
#debug .stat { font: 700 19px/1.5 monospace; color: var(--yellow-light); direction: ltr; text-align: left; white-space: pre; background: rgba(0, 0, 0, .35); padding: 8px; border-radius: 10px; }
#debug hr { border: 0; border-top: 3px dashed rgba(255, 255, 255, .25); margin: 10px 0; }
#debug label { font-weight: 800; }