/* ============================================================
   غرفة التدريب المباشر — قاعة مظلمة (كل المؤثرات CSS بدون صور)
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#05070D; --ink:#F3F6FB; --soft:#9AA8BC; --line:rgba(255,255,255,.10); --glass:rgba(16,22,36,.72);
  --gold:#F5C044; --gold-2:#E09B12; --silver:#C9D3DF; --bronze:#D58A4E;
  --blue:#3B82F6; --green:#22C55E; --red:#EF4444; --yellow:#EAB308;
  --font:'Tajawal','Inter',sans-serif; --tb-h:58px;
}
html,body{ height:100%; }
body.lr{
  font-family:var(--font); color:var(--ink); background:var(--bg); overflow:hidden;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.hidden{ display:none !important; }
button{ font-family:inherit; }

/* ---------------- القاعة ---------------- */
.hall{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 10%, #141B2C 0%, #0A0E18 45%, #030409 100%); }
.hall-img{ position:absolute; inset:-30px; background-size:cover; background-position:center; filter:blur(10px) brightness(.45) saturate(.9); opacity:0; transition:opacity 1.2s; }
.hall-img.on{ opacity:.55; }
/* أرضية بمنظور عميق */
.floor{
  position:absolute; left:-50%; right:-50%; bottom:-8%; height:62%;
  transform:perspective(520px) rotateX(68deg); transform-origin:50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(120,150,210,.10) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(120,150,210,.10) 0 1px, transparent 1px 70px),
    radial-gradient(60% 70% at 50% 0%, rgba(80,100,150,.35), rgba(10,14,24,0) 70%);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 92%);
          mask-image:linear-gradient(to top, #000 10%, transparent 92%);
}
/* الإضاءة المسلّطة من الأعلى على الوسط */
.spot{
  position:absolute; left:50%; top:-12%; width:min(1100px,150vw); height:118%; transform:translateX(-50%);
  background:radial-gradient(50% 42% at 50% 72%, rgba(255,236,190,.20), rgba(255,236,190,0) 70%),
             linear-gradient(to bottom, rgba(255,240,205,.16), rgba(255,240,205,.03) 70%, transparent);
  clip-path:polygon(41% 0, 59% 0, 86% 100%, 14% 100%);
  filter:blur(18px); opacity:.85; transition:opacity 1s, filter 1s;
}
.hall.lit .spot{ opacity:1; filter:blur(12px) brightness(1.7); }
.hall.live .spot{ opacity:.95; }
/* أضواء ملونة خافتة تتحرك ببطء على الجوانب */
.beam{ position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter:blur(70px); opacity:.30; mix-blend-mode:screen; }
.b1{ background:#3B5BFF; left:-20vmax; top:8%; animation:drift1 19s ease-in-out infinite alternate; }
.b2{ background:#C026D3; right:-22vmax; top:22%; animation:drift2 23s ease-in-out infinite alternate; }
.b3{ background:#0EA5E9; right:-14vmax; bottom:-24vmax; opacity:.20; animation:drift1 27s ease-in-out infinite alternate-reverse; }
@keyframes drift1{ 0%{ transform:translate(0,0); } 100%{ transform:translate(7vmax,10vmax); } }
@keyframes drift2{ 0%{ transform:translate(0,0); } 100%{ transform:translate(-8vmax,-9vmax); } }
.hall.lit .beam{ opacity:.42; }
/* الحواف أغمق من الوسط */
.vignette{ position:absolute; inset:0; background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.92) 100%); }

/* ---------------- الشريط العلوي ---------------- */
.tb{
  position:relative; z-index:10; height:var(--tb-h); display:flex; align-items:center; gap:8px; padding:0 12px;
  background:linear-gradient(to bottom, rgba(5,7,13,.85), rgba(5,7,13,.35)); border-bottom:1px solid rgba(255,255,255,.05);
}
.tb svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.tb-logo{ display:flex; flex:none; }
.tb-logo img{ width:40px; height:40px; border-radius:50%; display:block; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.tb-icon{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--ink);
  border:1px solid var(--line); background:rgba(255,255,255,.05); cursor:pointer; text-decoration:none; }
.tb-icon:hover{ background:rgba(255,255,255,.12); }
.tb-title{ font-weight:800; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.tb-fill{ flex:1; min-width:0; }
.tb-pill{ display:flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:20px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); font:700 .95rem 'Inter',sans-serif; letter-spacing:1px; flex:none; }
.tb-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
#muteBtn .x{ display:none; }
#muteBtn.muted .x{ display:block; } #muteBtn.muted .wave{ display:none; }
#muteBtn.muted{ color:#F87171; }

/* ---------------- المسرح ---------------- */
.stage{ position:relative; z-index:2; height:calc(100vh - var(--tb-h)); height:calc(100dvh - var(--tb-h)); overflow:hidden; }
.scr{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; overflow-y:auto;
  animation:scrIn .45s ease both; }
@keyframes scrIn{ from{ opacity:0; transform:translateY(10px) scale(.99); } to{ opacity:1; transform:none; } }
#scrLoading p{ color:var(--soft); margin-top:14px; }
.spin{ width:42px; height:42px; border-radius:50%; border:4px solid rgba(255,255,255,.12); border-top-color:var(--gold); animation:sp 1s linear infinite; }
@keyframes sp{ to{ transform:rotate(360deg); } }

.card{ width:min(440px,100%); background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:22px; padding:28px 24px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.55); margin:auto; }
.card h1{ font-size:1.45rem; font-weight:900; margin-bottom:8px; line-height:1.5; }
.card-logo{ width:64px; height:64px; border-radius:50%; margin-bottom:12px; }
.muted{ color:var(--soft); margin-bottom:18px; }
.form{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.form input{ width:100%; height:54px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.35); color:var(--ink);
  font:600 1.15rem var(--font); padding:0 16px; outline:none; text-align:center; }
.form input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,192,68,.25); }
.code-in{ font:800 2.2rem 'Inter',sans-serif !important; letter-spacing:.45em; height:70px !important; }
.err{ color:#FCA5A5; min-height:1.4em; margin-top:10px; font-weight:600; }
.or{ display:flex; align-items:center; gap:10px; color:var(--soft); margin:14px 0 2px; }
.or::before,.or::after{ content:''; flex:1; height:1px; background:var(--line); }
.room-tag{ display:inline-block; font:800 1.1rem 'Inter',sans-serif; letter-spacing:2px; padding:6px 14px; border-radius:10px;
  background:rgba(245,192,68,.12); color:var(--gold); border:1px solid rgba(245,192,68,.35); margin-bottom:14px; }
.msg-ico{ font-size:3rem; margin-bottom:8px; }
#scrMsg .btn{ margin-top:16px; }

.btn{ height:52px; border-radius:14px; border:0; cursor:pointer; font-weight:800; font-size:1.08rem; padding:0 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s, filter .2s; }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.55; cursor:default; }
.btn-block{ width:100%; }
.btn-xl{ height:60px; font-size:1.25rem; }
.btn-gold{ background:linear-gradient(180deg,#FFD66B,var(--gold-2)); color:#2A1B00; box-shadow:0 8px 24px rgba(224,155,18,.35); }
.btn-gold:hover{ filter:brightness(1.07); }
.btn-light{ background:#fff; color:#1E2F40; }

/* ---------------- الانتظار ---------------- */
.lobby{ width:min(1100px,100%); display:flex; flex-direction:column; align-items:center; gap:14px; height:100%; padding-top:2vh; }
.lobby-status{ display:flex; align-items:center; gap:10px; font-size:1.3rem; font-weight:800; color:#FFE7B0; }
.pulse{ width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(245,192,68,.6); animation:pl 1.6s infinite; }
@keyframes pl{ 70%{ box-shadow:0 0 0 14px rgba(245,192,68,0); } 100%{ box-shadow:0 0 0 0 rgba(245,192,68,0); } }
.count-big{ display:flex; align-items:baseline; gap:12px; text-shadow:0 6px 30px rgba(0,0,0,.6); }
.count-big b{ font:900 clamp(3.4rem,10vw,6.5rem)/1 'Inter',sans-serif; background:linear-gradient(180deg,#fff,#FFD98A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.count-big span{ font-size:clamp(1.1rem,2.6vw,1.6rem); font-weight:800; color:var(--soft); }
.people{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:980px; padding:8px 4px 24px; overflow-y:auto; }
.pp{ position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  background:hsl(var(--h) 55% 42%); box-shadow:inset 0 -6px 12px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.4); animation:popIn .4s cubic-bezier(.3,1.6,.6,1) both; }
.pp i, .av i{ position:absolute; bottom:1px; inset-inline-end:1px; width:13px; height:13px; border-radius:50%; background:var(--green); border:2px solid #0B0F18; }
.pp.me{ box-shadow:0 0 0 3px var(--gold), 0 6px 16px rgba(0,0,0,.4); }
@keyframes popIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }

.rank-list{ width:min(620px,100%); overflow-y:auto; padding:4px 4px 24px; display:flex; flex-direction:column; gap:7px; }
.rl-h{ text-align:center; color:var(--soft); font-weight:800; margin-bottom:4px; }
.rl-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.rl-row.me{ background:rgba(245,192,68,.14); border-color:rgba(245,192,68,.45); }
.rl-row.off{ opacity:.45; } .rl-row.off .av i{ background:#64748B; }
.md{ width:36px; flex:none; text-align:center; font-size:1.5rem; }
.md.num{ font:800 1.05rem 'Inter',sans-serif; color:var(--soft); }
.md.crown{ filter:drop-shadow(0 0 8px rgba(245,192,68,.7)); }
.av{ position:relative; width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; background:hsl(var(--h) 55% 42%); }
.nm{ flex:1; min-width:0; font-weight:700; font-size:1.08rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt{ font:800 1.1rem 'Inter',sans-serif; color:#FFE19A; }

/* ---------------- السؤال ---------------- */
#scrQuestion{ justify-content:flex-start; }
.q-wrap{ width:min(1050px,100%); display:flex; flex-direction:column; align-items:center; gap:14px; min-height:100%; }
.q-top{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.q-meta{ display:flex; flex-direction:column; gap:6px; }
.q-num{ font-weight:900; font-size:1.25rem; color:#FFE7B0; }
.q-type{ font-weight:700; color:var(--soft); }
.timer{ position:relative; width:118px; height:118px; flex:none; display:grid; place-items:center; }
.timer svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.timer .tr-bg{ fill:rgba(0,0,0,.35); stroke:rgba(255,255,255,.1); stroke-width:9; }
.timer .tr-fg{ fill:none; stroke:var(--gold); stroke-width:9; stroke-linecap:round; transition:stroke .3s; }
.timer b{ position:relative; font:900 3rem 'Inter',sans-serif; }
.timer.hot .tr-fg{ stroke:var(--red); }
.timer.hot b{ color:#FCA5A5; animation:beat 1s infinite; }
@keyframes beat{ 0%,100%{ transform:scale(1); } 15%{ transform:scale(1.18); } 30%{ transform:scale(1); } 45%{ transform:scale(1.1); } }
.q-text{ font-size:clamp(1.4rem,3.4vw,2.3rem); font-weight:900; text-align:center; line-height:1.55; text-shadow:0 4px 24px rgba(0,0,0,.7); }
.q-body{ width:100%; flex:1; display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; }
.q-body.locked{ pointer-events:none; }
.q-state{ padding:12px 20px; border-radius:16px; font-weight:800; font-size:1.15rem; text-align:center; display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.q-state small{ font-weight:600; color:var(--soft); font-size:.92rem; }
.q-state.ok{ background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.45); color:#BBF7D0; }
.q-state.bad{ background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.45); color:#FECACA; }

/* اختيارات */
.ch-img{ width:clamp(130px,24vh,230px); aspect-ratio:1; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6)); animation:popIn .5s both; }
.ch-img svg{ width:100%; height:100%; }
.ch-opts{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt{ min-height:78px; border:0; border-radius:16px; cursor:pointer; color:#fff; font-size:clamp(1.1rem,2.4vw,1.45rem); font-weight:800;
  display:flex; align-items:center; gap:14px; padding:12px 18px; text-align:start; box-shadow:0 6px 0 rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.35);
  transition:transform .12s, opacity .25s, filter .2s; }
.opt:hover{ filter:brightness(1.1); }
.opt:active{ transform:translateY(3px); }
.opt .shape{ font-size:1.4rem; width:34px; flex:none; text-align:center; opacity:.9; }
.opt.c0{ background:#E5484D; } .opt.c1{ background:#2F6FE0; } .opt.c2{ background:#D9A20B; } .opt.c3{ background:#1E9E5A; }
.opt.tf-yes{ background:#1E9E5A; justify-content:center; min-height:120px; font-size:1.8rem; }
.opt.tf-no{ background:#E5484D; justify-content:center; min-height:120px; font-size:1.8rem; }
.opt.chosen{ outline:4px solid #fff; transform:scale(1.02); }
.opt.dim{ opacity:.3; }
.opt:disabled{ cursor:default; }

/* تحدي النقر */
.arena{ position:relative; width:100%; flex:1; min-height:300px; border-radius:20px; background:rgba(255,255,255,.035); border:1px dashed rgba(255,255,255,.14); overflow:hidden; }
.arena-count{ font:800 1.3rem 'Inter',sans-serif; color:var(--soft); text-align:center; }
.arena .arena-count{ position:absolute; top:10px; inset-inline-start:14px; }
.arena-count b{ color:#FFE19A; font-size:1.6rem; }
.target{ position:absolute; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:radial-gradient(circle, #fff 0 16%, #EF4444 17% 34%, #fff 35% 52%, #EF4444 53% 70%, #fff 71%);
  box-shadow:0 0 0 4px rgba(255,255,255,.25), 0 0 26px rgba(239,68,68,.7); animation:tgIn .25s cubic-bezier(.3,1.7,.6,1) both; touch-action:none; }
.target.hit{ animation:tgHit .25s forwards; }
@keyframes tgIn{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes tgHit{ to{ transform:scale(1.6); opacity:0; } }

/* النقر المزدوج */
.boxes{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; padding:10px; }
.gbox{ width:clamp(110px,18vw,160px); aspect-ratio:1; border:0; background:none; cursor:pointer; padding:0; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.gbox svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.gbox .lid{ transition:transform .45s cubic-bezier(.3,1.5,.6,1); transform-origin:50% 40%; }
.gbox .star{ opacity:0; transition:opacity .3s .15s, transform .5s .1s; transform-origin:50% 50%; }
.gbox.open .lid{ transform:translateY(-26px) rotate(-14deg); }
.gbox.open .star{ opacity:1; transform:translateY(-12px) scale(1.15); }
.gbox.shake{ animation:shake .4s; }
@keyframes shake{ 20%,60%{ transform:rotate(-6deg); } 40%,80%{ transform:rotate(6deg); } }
.ch-hint{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); background:rgba(0,0,0,.8); color:#FFE7B0; padding:12px 20px; border-radius:14px;
  font-weight:800; font-size:1.15rem; opacity:0; pointer-events:none; white-space:nowrap; z-index:5; }
.ch-hint.show{ animation:hintA 1.5s; }
@keyframes hintA{ 10%,75%{ opacity:1; } 100%{ opacity:0; } }

/* السحب والإفلات */
.dd{ width:100%; display:flex; flex-direction:column; gap:16px; align-items:center; }
.dd-tray{ min-height:118px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:10px; width:100%; border-radius:18px; background:rgba(255,255,255,.04); }
.dd-item{ width:clamp(84px,13vw,110px); aspect-ratio:1; border-radius:16px; background:rgba(255,255,255,.08); border:1px solid var(--line); padding:8px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.dd-item svg{ width:100%; height:100%; pointer-events:none; }
.dd-item.lifting{ opacity:.25; }
.dd-ghost{ position:fixed; z-index:100; pointer-events:none; opacity:.95; transform:scale(1.08); box-shadow:0 20px 40px rgba(0,0,0,.6); background:rgba(40,52,80,.95); }
.dd-zones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; width:100%; }
.dd-zone{ border-radius:18px; border:2px dashed rgba(255,255,255,.25); padding:10px; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:160px; transition:background .15s, border-color .15s; }
.dd-zone.over{ background:rgba(245,192,68,.14); border-color:var(--gold); }
.dd-slot{ flex:1; display:grid; place-items:center; min-height:100px; }
.dd-name{ font-weight:800; font-size:1.1rem; text-align:center; }
.dd-ok{ margin-top:4px; min-width:200px; }

/* الزر الأيمن */
.desk{ position:relative; width:100%; flex:1; min-height:300px; border-radius:20px; background:linear-gradient(160deg,#1C4E8A,#0E2C55); border:1px solid var(--line); overflow:hidden;
  display:grid; place-items:center; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.desk-obj{ width:130px; height:130px; padding:10px; border-radius:16px; cursor:default; touch-action:none; -webkit-touch-callout:none; outline:none; }
.desk-obj svg{ width:100%; height:100%; pointer-events:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.desk-obj.sel{ background:rgba(255,255,255,.18); box-shadow:0 0 0 2px rgba(255,255,255,.5); }
.ctx{ position:absolute; z-index:4; min-width:200px; background:#F5F7FA; color:#1B2433; border-radius:10px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.5); animation:popIn .14s both; transform-origin:top right; }
.ctx button{ display:block; width:100%; text-align:start; border:0; background:none; padding:11px 14px; font-size:1.08rem; font-weight:700; color:inherit; border-radius:7px; cursor:pointer; }
.ctx button:hover{ background:#DCE8F7; }
.ctx button.chosen{ background:#2F6FE0; color:#fff; }

/* سباق الكتابة */
.type-target{ font-size:clamp(1.8rem,5vw,3rem); font-weight:900; letter-spacing:.02em; padding:16px 26px; border-radius:18px; background:rgba(0,0,0,.35); border:1px solid var(--line); direction:rtl; }
.type-target span{ color:rgba(255,255,255,.55); transition:color .1s; }
.type-target span.ok{ color:#4ADE80; } .type-target span.bad{ color:#F87171; text-decoration:underline; }
.type-target span.cur{ color:#fff; border-bottom:3px solid var(--gold); }
.type-row{ display:flex; gap:10px; width:min(620px,100%); }
.type-in{ flex:1; min-width:0; height:62px; border-radius:16px; border:2px solid rgba(255,255,255,.2); background:rgba(0,0,0,.45); color:#fff; font:700 1.5rem var(--font); padding:0 16px; outline:none; }
.type-in:focus{ border-color:var(--gold); }
.type-row .btn{ height:62px; }

/* ---------------- النتيجة ---------------- */
.rv{ width:min(680px,100%); display:flex; flex-direction:column; align-items:center; gap:14px; }
.rv-me{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:1.6rem; font-weight:900; animation:popIn .5s cubic-bezier(.3,1.5,.6,1) both; }
.rv-me .big{ font-size:3rem; line-height:1; }
.rv-me.ok{ color:#86EFAC; } .rv-me.bad{ color:#FCA5A5; } .rv-me.none{ color:#FCD34D; }
.rv-me b{ color:#FFE19A; font-family:'Inter',sans-serif; }
.rv-me small{ font-size:1.05rem; color:var(--ink); font-weight:700; }
.rv-correct{ color:var(--soft); font-size:1.1rem; text-align:center; }
.rv-correct b{ color:#fff; }
.rv-h{ font-size:1.25rem; font-weight:900; color:#FFE7B0; margin-top:4px; }
.top5{ list-style:none; width:100%; display:flex; flex-direction:column; gap:9px; }
.t5{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  animation:slideIn .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay:var(--d); }
@keyframes slideIn{ from{ opacity:0; transform:translateX(-40px) scale(.95); } to{ opacity:1; transform:none; } }
.t5.p1{ background:linear-gradient(90deg,rgba(245,192,68,.28),rgba(245,192,68,.08)); border-color:rgba(245,192,68,.6); box-shadow:0 0 40px rgba(245,192,68,.22); transform-origin:center; }
.t5.p1 .nm{ font-size:1.3rem; }
.t5.p2{ border-color:rgba(201,211,223,.45); } .t5.p3{ border-color:rgba(213,138,78,.45); }
.t5.me{ outline:2px solid var(--gold); }
.gain{ font:700 .95rem 'Inter',sans-serif; color:#86EFAC; }
.rv-rank{ font-size:1.15rem; font-weight:700; color:var(--soft); padding:10px 18px; border-radius:14px; background:rgba(0,0,0,.35); text-align:center; }
.rv-rank b{ color:#fff; font-family:'Inter',sans-serif; font-size:1.3rem; }

/* ---------------- المنصة ---------------- */
.final{ width:min(820px,100%); display:flex; flex-direction:column; align-items:center; gap:22px; }
.final-h{ font-size:clamp(1.8rem,5vw,2.8rem); font-weight:900; background:linear-gradient(180deg,#fff,#FFD06A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; width:100%; direction:ltr; }
.pd{ flex:1; max-width:230px; display:flex; flex-direction:column; align-items:center; gap:10px; animation:riseUp .9s cubic-bezier(.2,1.1,.4,1) both; }
.pd2{ animation-delay:.5s; } .pd3{ animation-delay:.2s; } .pd1{ animation-delay:.9s; }
@keyframes riseUp{ from{ opacity:0; transform:translateY(80px); } to{ opacity:1; transform:none; } }
.pd-who{ display:flex; flex-direction:column; align-items:center; gap:4px; direction:rtl; text-align:center; max-width:100%; }
.pd-who .av{ width:64px; height:64px; font-size:1.4rem; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.pd1 .pd-who .av{ width:84px; height:84px; font-size:1.8rem; box-shadow:0 0 0 4px var(--gold), 0 0 40px rgba(245,192,68,.6); }
.pd2 .pd-who .av{ box-shadow:0 0 0 3px var(--silver); } .pd3 .pd-who .av{ box-shadow:0 0 0 3px var(--bronze); }
.pd-crown{ font-size:2.4rem; animation:float 2.4s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(245,192,68,.8)); }
@keyframes float{ 50%{ transform:translateY(-6px) rotate(-4deg); } }
.pd-who .nm{ font-size:1.15rem; max-width:100%; }
.pd.me .nm{ color:#FFE19A; }
.pd-block{ width:100%; border-radius:12px 12px 0 0; display:grid; place-items:start center; padding-top:12px; font:900 2.4rem 'Inter',sans-serif; color:rgba(0,0,0,.45);
  box-shadow:inset 0 10px 20px rgba(255,255,255,.25), 0 20px 40px rgba(0,0,0,.5); }
.pd1 .pd-block{ height:170px; background:linear-gradient(180deg,#FFE08A,#C98A10); }
.pd2 .pd-block{ height:120px; background:linear-gradient(180deg,#EEF2F7,#8E9AAB); }
.pd3 .pd-block{ height:88px; background:linear-gradient(180deg,#F1B888,#9A5A2A); }
.pd.empty{ visibility:hidden; }

.confetti{ position:fixed; inset:0; z-index:50; pointer-events:none; }

/* ---------------- الهاتف ---------------- */
@media (max-width:640px){
  :root{ --tb-h:54px; }
  .tb{ gap:6px; padding:0 8px; }
  .tb-title{ display:none; }
  .tb-logo img{ width:36px; height:36px; }
  .tb-icon{ width:38px; height:38px; }
  .scr{ padding:12px; }
  .timer{ width:84px; height:84px; } .timer b{ font-size:2.1rem; }
  .q-wrap{ gap:10px; }
  .ch-opts{ grid-template-columns:1fr; gap:9px; }
  .opt{ min-height:62px; }
  .ch-opts.tf{ grid-template-columns:1fr 1fr; }
  .opt.tf-yes,.opt.tf-no{ min-height:100px; }
  .pp{ width:44px; height:44px; font-size:.95rem; }
  .dd-zones{ grid-template-columns:repeat(2,1fr); }
  .dd-zone{ min-height:130px; } .dd-slot{ min-height:80px; }
  .dd-item{ width:76px; }
  .type-row{ flex-direction:column; }
  .pd-block{ font-size:1.8rem; }
  .pd1 .pd-block{ height:130px; } .pd2 .pd-block{ height:92px; } .pd3 .pd-block{ height:66px; }
  .pd-who .nm{ font-size:.95rem; }
}
@media (prefers-reduced-motion:reduce){ .beam{ animation:none; } }

/* ---------------- القاعة (صفحة المتدرب) ---------------- */
.hall-area{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; }
#hallWrap{ flex:1; min-height:0; }
.scr{ z-index:3; }
/* بطاقات الدخول تظهر فوق القاعة المعتمة */
.scr:not(#scrFinal){ background:rgba(2,5,13,.6); }
#scrFinal{ background:rgba(2,5,13,.74); }

/* لوحة الإجابة: فوق أسفل القاعة على الشاشات العريضة */
.apanel{ position:absolute; z-index:2; left:50%; bottom:66px; transform:translateX(-50%); width:min(920px,94%); max-height:calc(100% - 84px); overflow-y:auto;
  background:rgba(6,14,32,.92); border:1px solid #24426e; border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; align-items:center; gap:12px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(0,0,0,.6); animation:deskIn .35s ease both; }
@keyframes deskIn{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }
.apanel .q-top{ width:100%; }
.apanel .q-num{ font-size:1rem; } .apanel .q-type{ font-size:.85rem; }
.apanel .q-wrap{ gap:10px; }
.apanel .timer{ width:74px; height:74px; }
.apanel .timer b{ font-size:1.9rem; }
.apanel .q-text{ font-size:clamp(1.1rem,2.2vw,1.45rem); }
.apanel .arena{ min-height:240px; }
.apanel.is-compact .q-body, .apanel.is-rv .q-body, .apanel.is-rv .q-state{ display:none; }
.apanel.is-compact, .apanel.is-rv{ width:auto; min-width:min(420px,94%); padding:10px 18px; }
.apanel.is-compact .q-top, .apanel.is-compact .q-text, .apanel.is-rv .q-top, .apanel.is-rv .q-text{ display:none !important; }
.rv{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.apanel .rv-me{ font-size:1.25rem; }
.apanel .rv-me .big{ font-size:2rem; }
.apanel .rv-me small{ font-size:.95rem; }
.apanel .rv-correct{ font-size:1rem; }
.rv-hint{ color:var(--soft); font-size:.92rem; }

/* ترتيبي ونقاطي + التفاعلات */
.mine{ position:absolute; z-index:2; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; }
.mine-score{ background:rgba(6,18,42,.85); border:1px solid #24426e; border-radius:20px; padding:7px 14px; font-weight:700; white-space:nowrap; }
.mine-score b{ color:#FFE19A; font-family:'Inter',sans-serif; }
.react{ width:44px; height:44px; flex:none; border-radius:50%; background:rgba(6,18,42,.85); border:1px solid #24426e; font-size:1.35rem; cursor:pointer; line-height:1; transition:transform .15s; }
.react:hover{ border-color:#6cbcff; }
.react.sent{ transform:scale(1.25); }
.react:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.av.ph{ overflow:hidden; background:#12233e; }
.av.ph img{ width:100%; height:100%; object-fit:cover; display:block; }

.pinfo{ display:none; }
/* الشاشات الضيقة أو العمودية: القاعة في الأعلى، ثم الترتيب والتفاعلات، ثم لوحة الإجابة */
@media (max-width:760px), (max-aspect-ratio:4/3){
  body.in-hall:not(.desk-open) .pinfo{ display:flex; order:3; flex-direction:column; align-items:center; gap:8px; padding:14px 16px 24px; text-align:center; }
  .pinfo h2{ font-size:1.3rem; font-weight:900; line-height:1.5; }
  .pinfo p{ color:var(--soft); }
  .pi-top{ width:min(420px,100%); margin-top:6px; }
  .pi-h{ font-weight:900; color:#FFE7B0; margin-bottom:6px; }
  .pi-top ol{ list-style:none; display:flex; flex-direction:column; gap:6px; }
  .pi-top li{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--line); }
  .pi-top li.me{ border-color:#fff; }
  .pi-top li .nm{ flex:1; text-align:start; font-size:1rem; }
  .pi-top li b{ font-family:'Inter',sans-serif; color:#FFE19A; }
  .hall-area{ overflow-y:auto; background:#02050d; }
  #hallWrap{ flex:none; height:56.25vw; max-height:62%; }
  .mine{ position:static; transform:none; order:2; flex:none; justify-content:center; flex-wrap:wrap; padding:8px; }
  .mine-score{ font-size:.92rem; }
  .apanel{ position:static; transform:none; order:3; width:100%; max-height:none; flex:1 0 auto; border-radius:0; border-width:1px 0 0; box-shadow:none; animation:none; }
  .apanel.is-compact, .apanel.is-rv{ width:100%; }
  .apanel .q-text{ font-size:clamp(1.15rem,4.6vw,1.6rem); }
  .apanel .ch-opts{ gap:8px; }
  .apanel .opt{ min-height:62px; }
}

/* في القاعة الضوء يأتي من كشاف القبة نفسه (hall.js)، لا من أعلى الشاشة */
body.in-hall .hall .spot{ display:none; }