/* ============================================================
   تحدي الحروف — Premium UI V1.3.14
   تحسين بصري فعلي للواجهة دون تغيير منطق اللعبة.
   RTL / Mobile First
   ============================================================ */
:root{
  --v14-ink:#10213f;
  --v14-muted:#64748b;
  --v14-primary:#2563eb;
  --v14-primary-2:#7c3aed;
  --v14-success:#16a34a;
  --v14-danger:#dc2626;
  --v14-warning:#f59e0b;
  --v14-surface:rgba(255,255,255,.94);
  --v14-border:rgba(148,163,184,.24);
  --v14-shadow:0 18px 55px rgba(15,23,42,.10);
  --v14-shadow-hover:0 25px 70px rgba(37,99,235,.16);
}

html{background:#f5f8ff;}
body{
  background:
    radial-gradient(circle at 8% 5%,rgba(37,99,235,.10),transparent 28rem),
    radial-gradient(circle at 92% 12%,rgba(124,58,237,.08),transparent 30rem),
    linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%);
  color:var(--v14-ink);
}

/* Barre de progression lors du chargement/navigation */
#v14-page-progress{
  position:fixed;z-index:2147483000;top:0;right:0;left:0;height:3px;
  transform:scaleX(0);transform-origin:right center;
  background:linear-gradient(90deg,var(--v14-primary),var(--v14-primary-2));
  box-shadow:0 0 14px rgba(37,99,235,.45);opacity:0;transition:transform .45s ease,opacity .2s ease;
}
#v14-page-progress.is-loading{opacity:1;transform:scaleX(.72)}
#v14-page-progress.is-done{opacity:0;transform:scaleX(1);transition:transform .25s ease,opacity .35s ease .15s}

/* Navigation */
.main-navbar{
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(148,163,184,.20)!important;
  box-shadow:0 8px 35px rgba(15,23,42,.07)!important;
  backdrop-filter:blur(18px) saturate(150%);
}
.nav-item{position:relative;overflow:hidden;}
.nav-item::after{
  content:"";position:absolute;right:14px;left:14px;bottom:3px;height:2px;border-radius:9px;
  background:linear-gradient(90deg,var(--v14-primary),var(--v14-primary-2));
  transform:scaleX(0);transition:transform .25s ease;
}
.nav-item:hover::after,.nav-item.active::after{transform:scaleX(1)}

/* Conteneurs et sections */
.rooms-shell,.game-primary-panel,.result-page,.tournament-page,.ranking-page,.home-page .hero,.info-page,.auth-page{
  position:relative;
}
.rooms-shell,.game-primary-panel{
  border:1px solid var(--v14-border)!important;
  box-shadow:var(--v14-shadow)!important;
}

/* Entrée progressive des blocs */
.v14-reveal{opacity:0;transform:translateY(16px);animation:v14Reveal .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--v14-delay,0ms)}
@keyframes v14Reveal{to{opacity:1;transform:none}}

/* Cartes : mouvement subtil et lumière */
.room-mode-card,.live-stat-card,.score-breakdown-item,.home-player-card,.rooms-player,.room-chat-card,.room-audio-card{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.room-mode-card:hover,.live-stat-card:hover,.home-player-card:hover,.room-chat-card:hover,.room-audio-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--v14-shadow-hover)!important;
  border-color:rgba(37,99,235,.28)!important;
}
.room-mode-card{overflow:hidden;position:relative;}
.room-mode-card::before{
  content:"";position:absolute;top:-60px;right:-60px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.12),transparent 70%);pointer-events:none;
}

/* Boutons */
button,.btn,.rooms-link-btn,.mode-btn,.ranking-button,.info-button{
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease!important;
}
button:hover,.btn:hover,.rooms-link-btn:hover,.mode-btn:hover,.ranking-button:hover,.info-button:hover{
  filter:saturate(1.08);box-shadow:0 12px 26px rgba(15,23,42,.12)!important;
}
button:active,.btn:active,.rooms-link-btn:active,.mode-btn:active{transform:translateY(1px) scale(.985)!important}
.v14-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:v14Ripple .55s ease-out;pointer-events:none}
@keyframes v14Ripple{to{transform:scale(4);opacity:0}}

/* Champs */
input:not([type=checkbox]):not([type=radio]),textarea,select{
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{
  border-color:rgba(37,99,235,.62)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10),0 8px 24px rgba(37,99,235,.06)!important;
  outline:none!important;
}

/* Messages */
.alert,.rooms-alert,#room-message,#result-message{
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.24)!important;
  box-shadow:0 12px 35px rgba(15,23,42,.08)!important;
  animation:v14MessageIn .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes v14MessageIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.alert-success{background:linear-gradient(135deg,#f0fdf4,#ecfdf5)!important;border-color:#bbf7d0!important}
.alert-danger{background:linear-gradient(135deg,#fff7f7,#fef2f2)!important;border-color:#fecaca!important}
.alert-warning{background:linear-gradient(135deg,#fffaf0,#fffbeb)!important;border-color:#fde68a!important}
.alert-info{background:linear-gradient(135deg,#eff6ff,#f5f3ff)!important;border-color:#bfdbfe!important}

/* Toast global */
#v14-toast-stack{position:fixed;z-index:2147482000;top:82px;left:18px;width:min(390px,calc(100vw - 36px));display:grid;gap:10px;pointer-events:none}
.v14-toast{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;padding:13px 14px;border:1px solid rgba(148,163,184,.24);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 20px 50px rgba(15,23,42,.16);backdrop-filter:blur(16px);animation:v14ToastIn .35s cubic-bezier(.2,.8,.2,1)}
.v14-toast.is-out{animation:v14ToastOut .25s ease forwards}
.v14-toast-icon{font-size:22px;line-height:1}.v14-toast-title{font-weight:900;color:var(--v14-ink);font-size:14px}.v14-toast-text{color:#475569;font-size:13px;line-height:1.65;margin-top:2px}.v14-toast-close{border:0!important;background:transparent!important;box-shadow:none!important;min-height:28px!important;width:28px;padding:0!important;color:#64748b;font-size:18px;cursor:pointer}
.v14-toast.success{border-right:4px solid var(--v14-success)}.v14-toast.error{border-right:4px solid var(--v14-danger)}.v14-toast.warning{border-right:4px solid var(--v14-warning)}.v14-toast.info{border-right:4px solid var(--v14-primary)}
@keyframes v14ToastIn{from{opacity:0;transform:translateX(-24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes v14ToastOut{to{opacity:0;transform:translateX(-24px) scale(.96)}}

/* HUD du jeu */
.live-game-hud{gap:10px!important}
.live-stat-card{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.92))!important;position:relative;overflow:hidden}
.live-stat-card::after{content:"";position:absolute;inset:auto -25px -40px auto;width:90px;height:90px;border-radius:50%;background:rgba(37,99,235,.06);pointer-events:none}
.score-card{box-shadow:0 10px 28px rgba(22,163,74,.08)!important}
.timer-card{box-shadow:0 10px 28px rgba(245,158,11,.08)!important}
.live-score-feedback{font-weight:900!important;min-height:30px!important}
.live-score-feedback.is-positive{animation:v14ScoreGain .55s ease!important}
.live-score-feedback.is-negative{animation:v14ScoreLoss .55s ease!important}
.live-score-feedback.is-coupon{animation:v14Coupon .6s cubic-bezier(.2,.8,.2,1)!important}
@keyframes v14ScoreGain{0%{opacity:0;transform:translateY(8px) scale(.75)}45%{opacity:1;transform:translateY(-3px) scale(1.18)}100%{opacity:1;transform:none}}
@keyframes v14ScoreLoss{0%{opacity:0;transform:translateY(-8px) scale(.75)}45%{opacity:1;transform:translateY(3px) scale(1.15)}100%{opacity:1;transform:none}}
@keyframes v14Coupon{0%{opacity:0;transform:scale(.7) rotate(-4deg)}55%{opacity:1;transform:scale(1.15) rotate(2deg)}100%{opacity:1;transform:none}}
.score-breakdown-item.deduction{animation:v14DeductionPulse 1s ease}
@keyframes v14DeductionPulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.20)}45%{box-shadow:0 0 0 8px rgba(220,38,38,.07)}100%{box-shadow:none}}

/* Aide */
.room-help-button,.help-button{transition:transform .18s ease,box-shadow .2s ease,background .2s ease!important}
.room-help-button:not(:disabled):hover,.help-button:not(:disabled):hover{transform:translateY(-2px) scale(1.03)!important;box-shadow:0 8px 20px rgba(124,58,237,.20)!important}
.room-help-button.help-done,.help-button.help-done{animation:v14HelpDone .45s ease}
@keyframes v14HelpDone{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:none}}

/* Responsive */
@media(max-width:700px){
  #v14-toast-stack{top:70px;left:10px;width:calc(100vw - 20px)}
  .v14-toast{padding:11px 12px}
  .room-mode-card:hover,.live-stat-card:hover,.home-player-card:hover,.room-chat-card:hover,.room-audio-card:hover{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #v14-page-progress{display:none}
}

.v14-value-change{animation:v14ValueChange .45s cubic-bezier(.2,.8,.2,1)}
.v14-deduction-flash{animation:v14DeductionFlash .7s ease}
@keyframes v14ValueChange{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.18);filter:brightness(1.08)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes v14DeductionFlash{0%{box-shadow:0 0 0 0 rgba(220,38,38,.28)}45%{box-shadow:0 0 0 9px rgba(220,38,38,.08)}100%{box-shadow:none}}