/* ستايل مسرح السحب: مشترك بين /display و /demo
   هوية عبق الغيم: فحمي (#2D3035) + شامبين ذهبي + أبيض */

:root{
  --ink:#1B1D22;
  --ink-2:#2D3035;          /* فحمي الشعار */
  --line:rgba(255,255,255,.10);
  --gold:#C9A96A;           /* شامبين */
  --gold-2:#E6D3A8;         /* شامبين فاتح */
  --muted:rgba(255,255,255,.52);
}

body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px 20px 26px;gap:20px;overflow:hidden;height:100vh;
  background:
    radial-gradient(1100px 620px at 50% -18%, rgba(201,169,106,.13), transparent 62%),
    radial-gradient(760px 520px at 12% 108%, rgba(201,169,106,.07), transparent 60%),
    var(--ink);
}

/* الشعار */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.brand img{width:min(290px,58vw);height:auto;display:block;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.45))}
.brand .rule{width:min(210px,44vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75}

/* التعليمات والعدّاد */
.instruction{text-align:center}
.instruction .lead{font-size:clamp(14px,1.8vw,17px);color:var(--muted);font-weight:500;
  letter-spacing:.3px}
.instruction .kw{font-size:clamp(36px,6.2vw,64px);font-weight:800;line-height:1.14;margin-top:4px;
  background:linear-gradient(100deg,var(--gold-2),var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.counter{display:flex;align-items:baseline;gap:11px;justify-content:center;margin-top:8px}
.counter b{font-size:clamp(52px,8vw,104px);font-weight:700;color:#fff;line-height:1;
  letter-spacing:-2px;text-shadow:0 0 26px rgba(201,169,106,.3)}
.counter span{font-size:clamp(15px,1.9vw,22px);font-weight:500;color:var(--muted)}
.closed .kw{background:none;color:rgba(255,255,255,.32)}

/* العجلة */
.stage{position:relative;width:min(430px,58vh,80vw);aspect-ratio:1}
canvas{width:100%;height:100%;display:block;border-radius:50%;
  box-shadow:0 0 0 1px rgba(201,169,106,.35), 0 0 0 11px rgba(201,169,106,.07),
             0 26px 80px rgba(0,0,0,.6)}
.pointer{position:absolute;top:-7px;left:50%;transform:translateX(-50%);z-index:3;width:0;height:0;
  border-inline-start:15px solid transparent;border-inline-end:15px solid transparent;
  border-top:28px solid var(--gold-2);filter:drop-shadow(0 3px 6px rgba(0,0,0,.65))}
.hub{position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;
  background:var(--ink-2);border:1px solid rgba(201,169,106,.4);display:grid;place-items:center;
  z-index:2;padding:9px;box-shadow:0 6px 22px rgba(0,0,0,.5)}
.hub img{width:100%;height:auto;opacity:.95}

/* السلوت */
.slot-stage{position:relative;width:min(460px,84vw);height:450px;overflow:hidden;
  border-radius:26px;border:1px solid rgba(201,169,106,.28);background:#15171B;
  box-shadow:inset 0 0 70px rgba(0,0,0,.7), 0 26px 80px rgba(0,0,0,.55)}
.reel{position:absolute;top:0;left:0;right:0;will-change:transform}
.slot-row{height:90px;display:flex;align-items:center;justify-content:center;padding:0 24px;
  font-size:25px;font-weight:700;color:rgba(255,255,255,.42);
  border-bottom:1px solid rgba(255,255,255,.035)}
.slot-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* top = CENTER_ROW * ROW_H = 2 * 90، لازم يطابق draw.js بالضبط */
.slot-window{position:absolute;top:180px;left:13px;right:13px;height:90px;
  border-radius:16px;border:1.5px solid var(--gold);background:rgba(201,169,106,.09);
  pointer-events:none;z-index:2;box-shadow:0 0 40px rgba(201,169,106,.22)}
.slot-fade{position:absolute;left:0;right:0;height:130px;pointer-events:none;z-index:3}
.slot-fade.t{top:0;background:linear-gradient(#15171B,rgba(21,23,27,0))}
.slot-fade.b{bottom:0;background:linear-gradient(rgba(21,23,27,0),#15171B)}
.slot-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:15px}

/* الفائز */
/* فارغ = بلا ارتفاع، حتى لا يقتطع مساحة الأسماء قبل السحب */
.winner{text-align:center;padding:0 20px;width:100%;align-self:stretch}
.winner:empty{display:none}
body.has-winner .instruction{display:none}   /* الفائز يحل محل التعليمات */
.winner .cap{font-size:16px;color:var(--gold);letter-spacing:7px;font-weight:700}
/* الحجم يُضبط بـ fitText في الجافاسكربت ليملأ العرض؛ القيمة هنا احتياطية */
.winner .who{display:inline-block;max-width:100%;font-size:clamp(48px,11vw,150px);
  font-weight:800;line-height:1.1;letter-spacing:-1px;
  background:linear-gradient(100deg,var(--gold-2),var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* drop-shadow يتوهّج حول النص المتدرّج نفسه، بعكس text-shadow مع color:transparent */
  filter:drop-shadow(0 0 20px rgba(201,169,106,.55));
  animation:reveal .7s cubic-bezier(.2,.9,.3,1.4) both,
            glow 2.6s ease-in-out .7s infinite}
@keyframes glow{
  50%{filter:drop-shadow(0 0 40px rgba(230,211,168,.9)) drop-shadow(0 0 12px rgba(201,169,106,.6))}
}
.winner .handle{font-size:clamp(22px,3.2vw,40px);font-weight:700;margin-top:10px;color:var(--gold);
  text-shadow:0 0 16px rgba(201,169,106,.45);
  animation:glowSoft 2.6s ease-in-out .7s infinite}
@keyframes glowSoft{50%{text-shadow:0 0 26px rgba(230,211,168,.75);color:var(--gold-2)}}
@keyframes reveal{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}

.offline{position:fixed;bottom:14px;inset-inline-start:14px;font-size:12px;color:var(--muted)}
.hidden{display:none!important}

@media (max-width:640px){
  body{padding:14px 12px 22px;gap:14px;justify-content:flex-start}
  .brand img{width:min(210px,56vw)}
  .instruction .kw{font-size:clamp(28px,9vw,42px)}
  .counter b{font-size:clamp(44px,13vw,72px);letter-spacing:-1px}
  .counter span{font-size:clamp(13px,3.6vw,17px)}
  .stage{width:min(84vw,340px)}
  .slot-stage{width:min(84vw,340px);height:330px}   /* 5 × 66 */
  .slot-window{top:132px}          /* 2 × 66 */
  .slot-row{height:66px;font-size:19px}
  .slot-window{height:66px}
  .slot-fade{height:96px}
  .hub{width:70px;height:70px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ الأشكال الإضافية ============ */
.stage-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:15px;padding:40px 0}

/* شبكة وامضة + إقصاء تدريجي */
.grid-stage,.elim-stage{position:relative;width:min(1280px,96vw);
  flex:1 1 0;min-height:0;overflow-y:auto;
  padding:14px;border-radius:24px;border:1px solid rgba(201,169,106,.22);background:#15171B;
  box-shadow:inset 0 0 60px rgba(0,0,0,.6), 0 22px 70px rgba(0,0,0,.5)}
.grid-wrap,.elim-wrap{display:grid;gap:8px}
.cell{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);
  font-size:15px;font-weight:600;color:rgba(255,255,255,.62);
  transition:background .12s,color .12s,border-color .12s,opacity .35s,transform .25s}
.cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
[data-dense="1"] .cell{min-height:38px;font-size:13px;padding:6px 8px}

.cell.lit{background:linear-gradient(135deg,#B08F52,#E6D3A8);color:#231D10;
  border-color:transparent;box-shadow:0 0 22px rgba(201,169,106,.45)}
.cell.out{opacity:.16;transform:scale(.94);color:rgba(255,255,255,.35)}
.cell.won{background:linear-gradient(135deg,#B08F52,#E6D3A8);color:#231D10;opacity:1;
  border-color:transparent;transform:scale(1.06);
  box-shadow:0 0 34px rgba(201,169,106,.6);animation:pop .45s cubic-bezier(.2,.9,.3,1.5)}
@keyframes pop{from{transform:scale(.86)}to{transform:scale(1.06)}}

/* بطاقات تنقلب */
.cards-stage{width:min(660px,92vw)}
.cards-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{aspect-ratio:3/4.05;perspective:900px;transition:opacity .35s,transform .3s}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.3,.8,.3,1.1)}
.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;
  display:grid;place-items:center;padding:10px;text-align:center}
.card-back{background:linear-gradient(150deg,#2D3035,#1B1D22);
  border:1px solid rgba(201,169,106,.3)}
.card-back img{width:76%;height:auto;opacity:.5}
.card-front{background:linear-gradient(150deg,#B08F52,#E6D3A8);color:#231D10;
  transform:rotateY(180deg);font-weight:800;font-size:clamp(13px,1.6vw,17px);line-height:1.35;
  word-break:break-word}
.card.lit .card-back{border-color:var(--gold-2);box-shadow:0 0 26px rgba(201,169,106,.5)}
.card.flip .card-in{transform:rotateY(180deg)}
.card.dim{opacity:.25}
.card.won{transform:scale(1.06)}

/* شريط أفقي */
.ticker-stage{position:relative;width:min(940px,96vw);height:150px;overflow:hidden;
  border-radius:22px;border:1px solid rgba(201,169,106,.25);background:#15171B;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7), 0 22px 70px rgba(0,0,0,.5)}
.ticker-track{position:absolute;top:0;bottom:0;left:0;display:flex;direction:ltr;will-change:transform}
.tick-cell{width:240px;flex:0 0 240px;display:flex;align-items:center;justify-content:center;
  direction:rtl;padding:0 14px;font-size:21px;font-weight:700;color:rgba(255,255,255,.42);
  border-inline-end:1px solid rgba(255,255,255,.04)}
.tick-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tick-cell.at{color:var(--gold-2)}
.ticker-window{position:absolute;top:10px;bottom:10px;left:50%;transform:translateX(-50%);
  width:240px;border-radius:16px;border:1.5px solid var(--gold);
  background:rgba(201,169,106,.09);pointer-events:none;z-index:2;
  box-shadow:0 0 40px rgba(201,169,106,.22)}
.ticker-fade{position:absolute;top:0;bottom:0;width:110px;pointer-events:none;z-index:3}
.ticker-fade.s{left:0;background:linear-gradient(90deg,#15171B,rgba(21,23,27,0))}
.ticker-fade.e{right:0;background:linear-gradient(270deg,#15171B,rgba(21,23,27,0))}

@media (max-width:640px){
  .grid-stage,.elim-stage{width:96vw;padding:10px}
  .grid-wrap,.elim-wrap{gap:6px}
  .cell{min-height:40px;font-size:13px}
  .cards-wrap{grid-template-columns:repeat(4,1fr);gap:8px}
  .ticker-stage{width:96vw;height:118px}
  .tick-cell{width:170px;flex:0 0 170px;font-size:17px}
  .ticker-window{width:170px}
  .ticker-fade{width:70px}
}

/* زر السحب على شاشة العرض: خافت ويتلاشى عند السكون حتى لا يظهر أثناء البث */
/* في الزاوية، لا في المنتصف: اسم الفائز يظهر وسط الشاشة والزر كان يغطيه */
.draw-btn{position:fixed;bottom:18px;inset-inline-end:18px;z-index:20;
  font-family:inherit;font-size:13px;font-weight:800;padding:11px 24px;border-radius:999px;
  border:1px solid rgba(201,169,106,.45);background:rgba(45,48,53,.9);color:var(--gold-2);
  cursor:pointer;backdrop-filter:blur(8px);transition:opacity .5s,transform .15s;
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
.draw-btn:hover:not(:disabled){background:linear-gradient(135deg,#B08F52,#E6D3A8);color:#231D10;
  transform:translateY(-1px)}
.draw-btn:disabled{opacity:.5;cursor:wait}
.draw-btn.faded{opacity:.12}
.draw-btn.faded:hover{opacity:1}
@media (max-width:640px){ .draw-btn{bottom:12px;inset-inline-end:12px;padding:10px 20px;font-size:12px} }

/* زر كتم الصوت */
.mute-btn{position:fixed;bottom:18px;inset-inline-end:150px;z-index:20;width:42px;height:42px;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(201,169,106,.4);background:rgba(45,48,53,.9);color:var(--gold-2);
  backdrop-filter:blur(8px);transition:opacity .5s,transform .15s}
.mute-btn:hover{transform:translateY(-1px);background:rgba(201,169,106,.25)}
.mute-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.mute-btn.faded{opacity:.12}
.mute-btn.faded:hover{opacity:1}
@media (max-width:640px){ .mute-btn{bottom:12px;inset-inline-end:120px;width:38px;height:38px} }

/* إثبات حضور الفائز */
.claim{margin-top:14px;text-align:center;min-height:0}
.claim:empty{display:none}
.claim .ask{font-size:clamp(17px,2.3vw,26px);color:var(--muted);font-weight:500}
.claim .big{font-family:'IBM Plex Mono',monospace;font-size:clamp(84px,13vw,180px);
  font-weight:700;line-height:.95;color:#fff;letter-spacing:-4px;
  text-shadow:0 0 34px rgba(201,169,106,.35)}
/* آخر خمس ثوانٍ: نبضة حمراء تشد الانتباه */
.claim .big.urgent{color:#FF9A93;text-shadow:0 0 40px rgba(196,86,79,.6);
  animation:pulseNum .9s ease-in-out infinite}
@keyframes pulseNum{50%{transform:scale(1.09)}}
.claim .bar{width:min(440px,78vw);height:10px;margin:14px auto 0;border-radius:99px;
  background:rgba(255,255,255,.1);overflow:hidden}
.claim .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:99px;transition:width .25s linear}
.claim .ok{font-size:clamp(28px,4.4vw,52px);font-weight:800;color:#5FD08A;
  text-shadow:0 0 26px rgba(95,208,138,.5);animation:reveal .5s cubic-bezier(.2,.9,.3,1.4) both}
.claim .no{font-size:clamp(24px,3.6vw,44px);font-weight:800;color:#E07B73}
.claim .sub{font-size:clamp(15px,1.9vw,20px);color:var(--muted);margin-top:7px}
@media (max-width:640px){
  .claim{margin-top:10px}
  .claim .big{font-size:clamp(64px,22vw,120px);letter-spacing:-2px}
  .claim .ask{font-size:clamp(14px,4vw,19px)}
  .claim .bar{width:82vw;height:8px}
  .claim .ok{font-size:clamp(22px,7vw,34px)}
  .claim .no{font-size:clamp(19px,6vw,30px)}
}