:root{
  /* ===== نظام الألوان (Token System) ===== */
  --bg-deep:      #12101c;   /* خلفية أساسية شبه سوداء بلمسة بنفسجية */
  --bg-panel:     #1b1830;   /* لون البطاقات */
  --bg-panel-2:   #241f3d;   /* عناصر داخل البطاقات */
  --line:         #322c52;   /* حدود خفيفة */
  --text-main:    #f1eefc;
  --text-dim:     #a79fc9;
  --accent-teal:  #2fd6c0;   /* البريء / التأكيد */
  --accent-teal-d:#1aa896;
  --accent-red:   #ff4d67;   /* الأمبوستر / الخطر */
  --accent-red-d: #cf2c46;
  --accent-gold:  #f4c94f;   /* السر / الكلمة */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-soft: 0 12px 34px rgba(0,0,0,.45);
  --font-display: "Cairo", "Tajawal", sans-serif;
  --font-body: "Tajawal", "Cairo", sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg-deep);
  color:var(--text-main);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* خلفية جوية بسيطة: توهجات هادئة بدل الأنماط الجاهزة */
.bg-fx{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(600px 500px at 15% -10%, rgba(47,214,192,.12), transparent 60%),
    radial-gradient(600px 500px at 110% 20%, rgba(255,77,103,.12), transparent 60%),
    radial-gradient(900px 800px at 50% 120%, rgba(244,201,79,.07), transparent 60%),
    radial-gradient(1000px 900px at 50% 50%, #1a1730, var(--bg-deep) 70%);
}

/* لوحة الفضاء المتحركة: نجوم + غبار كوني + شهب، مرسومة عبر canvas في script.js */
#space-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  width:100%; height:100%; display:block;
  transition:transform .25s ease-out;
}

#app{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 40px;
}

.screen{ display:none; width:100%; max-width:480px; animation:fadeIn .35s ease; }
.screen.active{ display:block; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.card{
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel) 60%, var(--bg-panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 22px;
  box-shadow:var(--shadow-soft);
}

/* ===== الترويسة ===== */
.brand{ text-align:center; margin-bottom:22px; }
.brand-eye{ font-size:38px; display:inline-block; margin-bottom:6px; filter:drop-shadow(0 0 14px rgba(47,214,192,.45)); }
.brand h1{ font-family:var(--font-display); font-weight:900; font-size:26px; margin:4px 0 6px; letter-spacing:.5px; }
.tagline{ color:var(--text-dim); font-size:13.5px; margin:0; }

.section-title{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 10px; }
.section-title.small{ font-size:14px; color:var(--text-dim); margin-top:22px; }

/* ===== التبويبات ===== */
.tabs{ display:flex; gap:8px; background:var(--bg-panel-2); padding:5px; border-radius:999px; margin-bottom:20px; }

/* ===== شعار حالة الوضع المحلي + دليل الإعداد ===== */
.setup-banner{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(244,201,79,.10); border:1px solid rgba(244,201,79,.45);
  color:var(--text-main); border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:16px; font-size:12.5px; line-height:1.6;
}
.setup-banner strong{ color:var(--accent-gold); font-family:var(--font-display); font-size:13.5px; }

.setup-guide{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-md);
  margin-bottom:20px; overflow:hidden;
}
.setup-guide summary{
  cursor:pointer; padding:12px 14px; font-size:13.5px; font-weight:700;
  font-family:var(--font-display); color:var(--accent-teal); list-style:none;
  display:flex; align-items:center; gap:8px;
}
.setup-guide summary::-webkit-details-marker{ display:none; }
.setup-guide[open] summary{ border-bottom:1px solid var(--line); }
.setup-guide-body{ padding:14px 16px 16px; font-size:12.8px; color:var(--text-dim); line-height:1.75; }
.setup-guide-body p{ margin:10px 0 6px; color:var(--text-main); }
.setup-guide-body ol, .setup-guide-body ul{ margin:0 0 10px; padding-inline-start:20px; }
.setup-guide-body li{ margin-bottom:5px; }
.setup-guide-body .code-inline{
  background:var(--bg-deep); border:1px solid var(--line); color:var(--accent-gold);
  padding:1px 6px; border-radius:6px; font-size:11.5px; direction:ltr; display:inline-block;
  font-family:monospace;
}
.setup-guide-body .setup-note{ color:var(--accent-teal); font-size:12px; margin-top:10px; }

.tab-btn{
  flex:1; border:none; background:transparent; color:var(--text-dim);
  font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:10px 6px; border-radius:999px; cursor:pointer; transition:all .2s ease;
}
.tab-btn.active{ background:var(--accent-teal); color:#0b1a18; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ===== الحقول ===== */
.field-label{ display:block; font-size:12.5px; color:var(--text-dim); margin:14px 2px 6px; }
.text-input{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--line);
  color:var(--text-main); font-family:var(--font-body); font-size:15px;
  padding:13px 14px; border-radius:var(--radius-md); outline:none;
  transition:border-color .2s ease;
}
.text-input:focus{ border-color:var(--accent-teal); }
.code-input{ text-align:center; letter-spacing:6px; font-weight:700; font-size:20px; text-transform:uppercase; }

/* ===== الأزرار ===== */
.btn{
  width:100%; border:none; cursor:pointer; font-family:var(--font-display);
  font-weight:700; font-size:15.5px; padding:14px 16px; border-radius:var(--radius-md);
  margin-top:18px; transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:linear-gradient(135deg, var(--accent-teal), var(--accent-teal-d)); color:#08201d; box-shadow:0 8px 22px rgba(47,214,192,.25); }
.btn-accent{ background:var(--accent-gold); color:#2a1d02; width:auto; padding:13px 22px; margin-top:0; white-space:nowrap; }
.btn-danger{ background:linear-gradient(135deg, var(--accent-red), var(--accent-red-d)); color:#2a0208; }
.hidden{ display:none !important; }

.error-msg{ color:var(--accent-red); font-size:13px; text-align:center; margin:14px 0 0; min-height:16px; }

/* ===== اللوبي ===== */
.room-code-box{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--bg-panel-2); border:1px dashed var(--line);
  border-radius:var(--radius-md); padding:16px; margin-bottom:22px;
}
.room-code-label{ font-size:12px; color:var(--text-dim); }
.room-code-value{ font-family:var(--font-display); font-size:34px; font-weight:900; letter-spacing:8px; color:var(--accent-teal); }

.player-list, .vote-list, .clue-log, .score-list{ list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:8px; }

.player-list li, .vote-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 14px; font-size:14.5px;
}
.player-list li .tag-host{ font-size:11px; background:var(--accent-gold); color:#2a1d02; padding:2px 8px; border-radius:999px; font-weight:700; }
.player-list li .tag-you{ color:var(--accent-teal); font-size:12px; }

.hint-text{ text-align:center; color:var(--text-dim); font-size:13px; margin:16px 0 0; }

/* ===== رمز QR للمضيف (شاشة اللوبي) ===== */
.qr-box{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:22px; padding:14px; background:var(--bg-panel-2);
  border:1px solid var(--line); border-radius:var(--radius-md);
}
.qr-box .hint-text{ margin:0; }
#qr-canvas{ background:#fff; padding:10px; border-radius:var(--radius-sm); line-height:0; }

/* ===== شاشة الكلمة السرية (البطاقة القابلة للقلب) ===== */
.word-card-wrap{ text-align:center; }
.round-label{ color:var(--text-dim); font-size:13px; margin:0 0 18px; }

.flip-card{ width:100%; max-width:280px; height:190px; margin:0 auto; perspective:1200px; cursor:pointer; }
.flip-card-inner{
  position:relative; width:100%; height:100%; text-align:center;
  transition:transform .7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d;
}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }

.flip-face{
  position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:16px; border:1px solid var(--line);
}
.flip-front{ background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel)); color:var(--text-dim); font-size:13.5px; }
.flip-icon{ font-size:34px; }
.flip-back{ background:linear-gradient(160deg, #2a2350, #1c1836); transform:rotateY(180deg); }

.secret-label{ font-size:12.5px; color:var(--text-dim); }
.secret-word{ font-family:var(--font-display); font-weight:900; font-size:30px; color:var(--accent-gold); word-break:break-word; }
.flip-card.is-impostor .secret-word{ color:var(--accent-red); }

/* ===== شاشة التلميحات ===== */
.clue-header{ display:flex; justify-content:center; margin-bottom:16px; }
.round-pill{ background:var(--bg-panel-2); border:1px solid var(--line); padding:6px 16px; border-radius:999px; font-size:13px; color:var(--text-dim); }

.turn-indicator{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
.turn-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-teal); color:#08201d; font-family:var(--font-display); font-weight:900; font-size:20px;
  box-shadow:0 0 0 4px rgba(47,214,192,.18);
}
.turn-text{ font-size:15px; margin:0; }
.turn-text #turn-player-name{ color:var(--accent-teal); font-weight:700; }

/* عدّاد 15 ثانية دائري، مُزامَن عبر turnStartedAt */
.turn-timer{ position:relative; width:52px; height:52px; margin-top:2px; }
.turn-timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.tt-bg{ fill:none; stroke:var(--bg-panel-2); stroke-width:4; }
.tt-bar{
  fill:none; stroke:var(--accent-teal); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:106.8; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear;
}
.turn-timer.urgent .tt-bar{ stroke:var(--accent-red); }
.turn-timer #tt-seconds{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-family:var(--font-display); font-size:13px;
}

.clue-input-row{ display:flex; gap:8px; }
.clue-input-row .text-input{ flex:1; }

.clue-log li{
  background:var(--bg-panel-2); border-radius:var(--radius-sm); padding:10px 14px;
  font-size:13.5px; display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line);
}
.clue-log li .clue-round-tag{ color:var(--text-dim); font-size:11.5px; white-space:nowrap; }

/* ===== شاشة التصويت ===== */
.vote-list li{ cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.vote-list li:hover{ border-color:var(--accent-teal); }
.vote-list li.selected{ border-color:var(--accent-red); background:rgba(255,77,103,.12); }
.vote-list li.disabled{ opacity:.45; pointer-events:none; }

/* جدول سجل التلميحات المعروض أثناء التصويت */
.clue-table{ width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
.clue-table th, .clue-table td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; }
.clue-table th{ color:var(--text-dim); font-weight:700; font-family:var(--font-display); font-size:12px; }
.clue-table tbody tr:last-child td{ border-bottom:none; }

/* ===== شاشة النتائج ===== */
.result-block{ background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; margin-bottom:14px; text-align:center; }
.result-label{ font-size:12.5px; color:var(--text-dim); margin:0 0 6px; }
.result-value{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:0; }
.result-value.danger{ color:var(--accent-red); }
.result-sub{ font-size:12.5px; color:var(--text-dim); margin:8px 0 0; }
.impostor-reveal{ border-color:rgba(255,77,103,.4); }

.score-list li{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:14px;
}
.score-list li .score-points{ font-family:var(--font-display); font-weight:800; color:var(--accent-teal); }
.score-list li .score-delta{ font-size:11.5px; color:var(--text-dim); margin-inline-start:6px; }

/* ===== إشعار عائم ===== */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text-main);
  padding:12px 20px; border-radius:999px; font-size:13.5px; opacity:0; pointer-events:none;
  transition:all .3s ease; z-index:50; box-shadow:var(--shadow-soft); max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== إتاحة الوصول ===== */
:focus-visible{ outline:2px solid var(--accent-teal); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===================================================================
   البطاقة الرئيسية: كل الأزرار ظاهرة معًا بترتيب عمودي بلا تبويبات
=================================================================== */
.home-divider{
  height:1px; background:var(--line); margin:22px 0 18px; border:none;
}
.btn-share{
  background:linear-gradient(135deg, var(--accent-gold), #d9a72a); color:#2a1d02;
  box-shadow:0 8px 22px rgba(244,201,79,.25);
}

/* ===================================================================
   زر عائم صغير: العودة لموقع ألعاب أيمن (أسفل اليسار)
   نمط مميز (خروج/عودة) — محايد وبإطار منقّط، مختلف بصريًا عن أزرار
   اللعبة الأساسية (تيل/ذهبي)، وأصغر حجمًا من أزرار التعليمات العلوية.
=================================================================== */
.back-site-btn{
  position:fixed; left:14px; bottom:14px; z-index:40;
  display:flex; align-items:center; gap:5px;
  background:rgba(27,24,48,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1.5px dashed var(--line); color:var(--text-dim);
  border-radius:999px; padding:7px 13px; font-family:var(--font-display);
  font-weight:700; font-size:11.5px; text-decoration:none;
  box-shadow:var(--shadow-soft);
  transition:border-color .2s ease, color .2s ease, transform .15s ease;
}
.back-site-btn:hover{ border-color:var(--text-dim); color:var(--text-main); }
.back-site-btn:active{ transform:scale(.95); }
@media (max-width:480px){
  .back-site-btn span{ display:none; }
  .back-site-btn{ padding:8px 10px; }
}
.btn-outline{
  background:transparent; color:var(--accent-teal); border:1.5px solid var(--accent-teal);
  box-shadow:none;
}
.btn-outline:hover{ background:rgba(47,214,192,.08); }
.home-btn-hint{ margin-top:8px; font-size:11.5px; line-height:1.6; }

/* ===================================================================
   شاشة عرض للبث (لوحة تحكم المشاهد)
=================================================================== */
#screen-spectator.active{ max-width:960px; width:100%; }

.spectator-dashboard{
  display:grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto auto;
  gap:16px;
}
.spec-panel{
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow-soft);
}
.spec-panel-title{
  font-family:var(--font-display); font-weight:800; font-size:14.5px;
  margin:0 0 12px; color:var(--accent-teal);
}

.spec-players{ grid-column:1; grid-row:1; }
.spec-voting{ grid-column:1; grid-row:2; }
.spec-hints{ grid-column:2; grid-row:1 / span 2; display:flex; flex-direction:column; }

.spec-players-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:8px; }
.spec-player-box{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 4px; text-align:center; font-size:11.5px; font-weight:700;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.spec-player-box.is-turn{ border-color:var(--accent-gold); box-shadow:0 0 0 2px rgba(244,201,79,.25); color:var(--accent-gold); }

.spec-hints-log{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
  flex:1; max-height:440px; overflow-y:auto;
}
.spec-hints-log li{
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:13px; line-height:1.6;
}
.spec-hints-log .spec-hints-empty{ text-align:center; color:var(--text-dim); }

.spec-vote-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.spec-vote-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:13.5px;
}
.spec-vote-list .spec-vote-count{ font-family:var(--font-display); font-weight:800; color:var(--accent-teal); }
.spec-vote-list .spec-vote-empty{ text-align:center; color:var(--text-dim); justify-content:center; }

@media (max-width: 720px){
  .spectator-dashboard{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .spec-players{ grid-column:1; grid-row:1; }
  .spec-hints{ grid-column:1; grid-row:2; }
  .spec-voting{ grid-column:1; grid-row:3; }
  .spec-hints-log{ max-height:320px; }
}

/* نافذة كشف الأدوار الخاصة بالمشاهد */
.spec-reveal-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.spec-reveal-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; font-size:14px;
}
.spec-reveal-list li.is-impostor{
  border-color:var(--accent-red); background:rgba(255,77,103,.12);
  color:var(--accent-red); font-weight:800;
}

/* ===================================================================
   زر قوانين اللعبة + النافذة المنبثقة
=================================================================== */
.help-buttons-bar{
  position:fixed; top:14px; left:14px; z-index:60;
  display:flex; align-items:center; gap:8px;
}
.rules-btn{
  display:flex; align-items:center; gap:6px;
  background:rgba(27,24,48,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); color:var(--text-main);
  border-radius:999px; padding:9px 16px; font-family:var(--font-display);
  font-weight:700; font-size:13px; cursor:pointer; box-shadow:var(--shadow-soft);
  transition:border-color .2s ease, transform .15s ease;
}
.rules-btn:hover{ border-color:var(--accent-teal); }
.rules-btn:active{ transform:scale(.96); }

.modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,8,18,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal-overlay.hidden{ display:none; }
.modal-box{
  position:relative; width:100%; max-width:440px; max-height:82vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 22px 24px; box-shadow:var(--shadow-soft);
  animation:fadeIn .25s ease;
}
.modal-close{
  position:absolute; top:14px; left:14px; width:30px; height:30px; border-radius:50%;
  background:var(--bg-panel-2); border:1px solid var(--line); color:var(--text-dim);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ color:var(--accent-red); border-color:var(--accent-red); }
.modal-title{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  margin:0 0 16px; text-align:center; color:var(--accent-gold);
}
.rules-list{ padding-inline-start:20px; margin:0; line-height:1.95; font-size:14px; color:var(--text-main); }
.rules-list li{ margin-bottom:8px; }

/* ===================================================================
   تلميحك السري الدائم (طوال الجولة)
=================================================================== */
.persistent-hint{
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:10px;
  background:rgba(27,24,48,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--accent-gold); border-radius:999px; padding:9px 20px;
  box-shadow:var(--shadow-soft); max-width:90vw;
}
.persistent-hint .ph-label{ font-size:12px; color:var(--text-dim); white-space:nowrap; }
.persistent-hint .ph-word{
  font-family:var(--font-display); font-weight:900; font-size:16px; color:var(--accent-gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.persistent-hint.is-impostor{ border-color:var(--accent-red); }
.persistent-hint.is-impostor .ph-word{ color:var(--accent-red); }

/* ===================================================================
   شعار الترويسة (أعلى المنتصف) — مثبّت فوق الواجهة، يطفو ويتوهج
=================================================================== */
.site-header{
  position:fixed;
  top:10px;
  left:0;
  right:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 16px;
  z-index:30;
  pointer-events:none; /* عنصر زخرفي مثبّت — لا يعترض النقر على ما تحته */
}
/* حجز مساحة أعلى البطاقة الرئيسية حتى لا يتداخل الشعار المثبّت مع محتوى #app */
#app{ padding-top:104px; }
.header-logo{
  max-height:78px;
  width:auto;
  max-width:min(90vw, 320px);
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(47,214,192,.55)) drop-shadow(0 0 24px rgba(47,214,192,.35)) drop-shadow(0 6px 18px rgba(0,0,0,.45));
  animation:bannerFloat 4.2s ease-in-out infinite, bannerGlow 3s ease-in-out infinite;
  will-change:transform, filter;
}
.site-header.logo-missing{ display:none; } /* لا يوجد main-banner.png بعد — يختفي بأمان بدل ترك مساحة فارغة أو أيقونة مكسورة */

/* طفو رأسي هادئ + نبضة توهج نيون مستمرة، بلا تأثير على تخطيط الصفحة */
@keyframes bannerFloat{
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-10px); }
  100% { transform:translateY(0); }
}
@keyframes bannerGlow{
  0%   { filter:drop-shadow(0 0 8px rgba(47,214,192,.5)) drop-shadow(0 0 18px rgba(47,214,192,.28)) drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
  50%  { filter:drop-shadow(0 0 16px rgba(47,214,192,.85)) drop-shadow(0 0 36px rgba(47,214,192,.5)) drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
  100% { filter:drop-shadow(0 0 8px rgba(47,214,192,.5)) drop-shadow(0 0 18px rgba(47,214,192,.28)) drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
}
@media (max-width:480px){
  #app{ padding-top:88px; }
  .header-logo{ max-height:56px; }
  .rules-btn span{ display:none; }
  .rules-btn{ padding:9px 12px; }
}

/* ===================================================================
   الشعار العائم (الجانب الأيسر) — حركة تعويم CSS بحتة
=================================================================== */
.floating-logo{
  position:fixed;
  left:26px;
  top:50%;
  z-index:5;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft), 0 0 0 4px rgba(47,214,192,.10);
  animation:floatLogo 4.5s ease-in-out infinite;
  pointer-events:none;
}
.floating-logo-icon{ font-size:28px; }
@keyframes floatLogo{
  0%   { transform:translateY(-50%) translateY(0) rotate(-2deg); }
  50%  { transform:translateY(-50%) translateY(-16px) rotate(2deg); }
  100% { transform:translateY(-50%) translateY(0) rotate(-2deg); }
}
@media (max-width:900px){
  .floating-logo{ display:none; } /* عنصر زخرفي فقط — يُخفى لتوفير المساحة على الشاشات الضيقة */
}

/* ===================================================================
   التوقيع العائم (الجانب الأيمن) — شعار دائري صغير + مقبض TikTok
   يطفو رأسيًا باستمرار. مثبّت (fixed) في أسفل يمين الشاشة، أسفل لوحة
   المتصدرين حتى لا يتداخل معها.
=================================================================== */
.signature-badge{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  animation:signatureBob 3.6s ease-in-out infinite;
  pointer-events:none;
}
.signature-img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid var(--accent-teal);
  box-shadow:var(--shadow-soft), 0 0 0 4px rgba(47,214,192,.14);
  background:var(--bg-panel-2);
  animation:signatureGlow 2.6s ease-in-out infinite;
}
.signature-fallback{ display:none; }
.signature-handle{
  font-family:var(--font-display);
  font-weight:700;
  font-size:11px;
  color:var(--text-dim);
  background:rgba(27,24,48,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:2px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}
/* في حال عدم توفر signature-logo.png، نعرض دائرة بديلة أنيقة بحرف "@" بدل صورة مكسورة */
.signature-badge.signature-missing .signature-img{ display:none; }
.signature-badge.signature-missing .signature-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid var(--accent-teal);
  box-shadow:var(--shadow-soft), 0 0 0 4px rgba(47,214,192,.14);
  background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  color:var(--accent-gold);
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
}
@keyframes signatureBob{
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-14px); }
  100% { transform:translateY(0); }
}
/* هالة نيون نابضة حول التوقيع، بنفس لون هوية اللعبة */
@keyframes signatureGlow{
  0%   { box-shadow:var(--shadow-soft), 0 0 0 4px rgba(47,214,192,.14), 0 0 10px rgba(47,214,192,.35); }
  50%  { box-shadow:var(--shadow-soft), 0 0 0 7px rgba(47,214,192,.24), 0 0 26px rgba(47,214,192,.75); }
  100% { box-shadow:var(--shadow-soft), 0 0 0 4px rgba(47,214,192,.14), 0 0 10px rgba(47,214,192,.35); }
}
/* نفس التوهج النابض لبديل الحرف "@" في حال غياب signature-logo.png */
.signature-badge.signature-missing .signature-fallback{
  animation:signatureGlow 2.6s ease-in-out infinite;
}
@media (max-width:480px){
  .signature-badge{ right:14px; bottom:14px; }
  .signature-img, .signature-badge.signature-missing .signature-fallback{ width:46px; height:46px; }
  .signature-handle{ font-size:10px; padding:2px 7px; }
}

/* ===================================================================
   شارة رمز الغرفة الدائمة
=================================================================== */
.room-code-chip{
  position:fixed;
  top:14px;
  right:18px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(27,24,48,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  box-shadow:var(--shadow-soft);
}
.room-code-chip .chip-label{ font-size:11.5px; color:var(--text-dim); }
.room-code-chip .chip-value{
  font-family:var(--font-display); font-weight:900; font-size:16px;
  letter-spacing:3px; color:var(--accent-teal);
}
@media (max-width:760px){
  .room-code-chip{ top:10px; right:50%; transform:translateX(50%); }
}

/* ===================================================================
   لوحة المتصدرين الحيّة (الجانب الأيمن)
=================================================================== */
.leaderboard-panel{
  position:fixed;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:230px;
  max-height:70vh;
  overflow-y:auto;
  background:rgba(27,24,48,.66);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px 14px;
  box-shadow:var(--shadow-soft);
}
.leaderboard-title{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  margin:0 0 12px; text-align:center; color:var(--accent-gold);
}
.leaderboard-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.leaderboard-list li{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px 10px; font-size:13px;
}
.leaderboard-list li.is-you{ border-color:var(--accent-teal); }
.leaderboard-list li .lb-rank{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  background:var(--bg-deep); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.leaderboard-list li:nth-child(1) .lb-rank{ background:var(--accent-gold); color:#2a1d02; }
.leaderboard-list li:nth-child(2) .lb-rank{ background:#c9c9d6; color:#1a1a1f; }
.leaderboard-list li:nth-child(3) .lb-rank{ background:#c98a52; color:#2a1502; }
.leaderboard-list li .lb-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-list li .lb-score{ font-family:var(--font-display); font-weight:800; color:var(--accent-teal); }
.leaderboard-list li.lb-empty{ color:var(--text-dim); justify-content:center; }

@media (max-width:900px){
  .leaderboard-panel{
    position:static;
    transform:none;
    width:100%;
    max-width:480px;
    margin:0 auto 4px;
    max-height:none;
  }
}

/* ===================================================================
   توقيع المطوّر
=================================================================== */
.dev-credit{
  position:relative;
  width:100%;
  text-align:center;
  padding:10px 16px 22px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:12.5px;
  color:var(--text-dim);
  letter-spacing:.3px;
}

@media (max-width:380px){
  .card{ padding:22px 16px; }
  .brand h1{ font-size:22px; }
  .room-code-value{ font-size:28px; letter-spacing:6px; }
}

/* ===================================================================
   شاشة الدخول السينمائية (تغبيش + عنوان يتلاشى)
   تُخفي الواجهة خلفها عبر backdrop-filter: blur() فقط — لا تلمس أي
   حالة لعبة أو مزامنة. تُدار توقيتاتها بالكامل من script.js:
   عرض 3 ثوانٍ، ثم إخفاء العنوان والتغبيش بسلاسة، ثم إزالة العنصر.
=================================================================== */
.intro-splash{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  background:rgba(18,16,28,.55);
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
  opacity:1;
  transition:opacity .9s ease, -webkit-backdrop-filter .9s ease, backdrop-filter .9s ease;
}
.intro-splash.intro-fade-out{
  opacity:0;
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  pointer-events:none;
}
.intro-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px, 9vw, 74px);
  letter-spacing:.5px;
  color:var(--text-main);
  opacity:0;
  transform:translateY(10px) scale(.96);
  animation:introTitleIn .9s ease forwards .15s;
  text-shadow:
    0 0 18px rgba(47,214,192,.55),
    0 0 42px rgba(47,214,192,.3),
    0 10px 30px rgba(0,0,0,.5);
}
@keyframes introTitleIn{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .intro-splash, .intro-title{ animation:none !important; transition:none !important; opacity:1; }
}