/* Neon XO - Saudi Unhinged Edition Styles */

:root {
  --font-cairo: 'Cairo', -apple-system, sans-serif;
  --font-tajawal: 'Tajawal', -apple-system, sans-serif;
  --font-orbitron: 'Orbitron', monospace;
  
  /* الثيم الافتراضي: نيون الرياض */
  --bg-primary: #090a12;
  --board-bg: rgba(13, 14, 26, 0.88);
  --cell-bg: rgba(21, 24, 45, 0.75);
  --cell-border: rgba(56, 189, 248, 0.25);
  --cell-hover: rgba(56, 189, 248, 0.18);
  --color-x: #00f0ff;
  --color-x-glow: rgba(0, 240, 255, 0.65);
  --color-o: #ff007f;
  --color-o-glow: rgba(255, 0, 127, 0.65);
  --color-accent: #ffd700;
}

/* ثيم 2: مجلس وشاهي كرك */
body.theme-arcade {
  --bg-primary: #120e0a;
  --board-bg: rgba(28, 19, 13, 0.9);
  --cell-bg: rgba(43, 29, 19, 0.75);
  --cell-border: rgba(251, 191, 36, 0.3);
  --cell-hover: rgba(251, 191, 36, 0.18);
  --color-x: #f59e0b;
  --color-x-glow: rgba(245, 158, 11, 0.7);
  --color-o: #10b981;
  --color-o-glow: rgba(16, 185, 129, 0.7);
  --color-accent: #fbbf24;
}

/* ثيم 3: درباوي مفلوت */
body.theme-synthwave {
  --bg-primary: #14081c;
  --board-bg: rgba(28, 11, 41, 0.9);
  --cell-bg: rgba(48, 18, 74, 0.75);
  --cell-border: rgba(192, 132, 252, 0.3);
  --cell-hover: rgba(192, 132, 252, 0.18);
  --color-x: #fb923c;
  --color-x-glow: rgba(251, 146, 60, 0.7);
  --color-o: #c084fc;
  --color-o-glow: rgba(192, 132, 252, 0.7);
  --color-accent: #f43f5e;
}

/* ثيم 4: بسطة الطيبين */
body.theme-chalk {
  --bg-primary: #0c1812;
  --board-bg: rgba(15, 29, 22, 0.92);
  --cell-bg: rgba(24, 43, 34, 0.75);
  --cell-border: rgba(241, 245, 249, 0.25);
  --cell-hover: rgba(241, 245, 249, 0.12);
  --color-x: #f8fafc;
  --color-x-glow: rgba(248, 250, 252, 0.5);
  --color-o: #fef08a;
  --color-o-glow: rgba(254, 240, 138, 0.5);
  --color-accent: #cbd5e1;
}

body {
  font-family: var(--font-cairo);
  background-color: var(--bg-primary);
  transition: background-color 0.4s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.font-cairo {
  font-family: var(--font-cairo);
}

.font-tajawal {
  font-family: var(--font-tajawal);
}

.font-orbitron {
  font-family: var(--font-orbitron);
}

/* تصميم خانات اللوحة */
.cell {
  position: relative;
  border-radius: 1.25rem;
  background-color: var(--cell-bg);
  border: 1.5px solid var(--cell-border);
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.cell:active:not(.taken) {
  transform: scale(0.93);
  background-color: var(--cell-hover);
}

.cell.taken {
  cursor: default;
}

/* نبض الخانة الفائزة */
.cell.win-cell {
  animation: cellPulse 1.1s infinite alternate ease-in-out;
  border-color: var(--color-accent);
  box-shadow: 0 0 28px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 215, 0, 0.35);
}

@keyframes cellPulse {
  0% { transform: scale(1); filter: brightness(1); }
  100% { transform: scale(1.05); filter: brightness(1.35); }
}

/* رموز الـ X و O */
.symbol-x {
  color: var(--color-x);
  text-shadow: 0 0 14px var(--color-x-glow);
}

.symbol-o {
  color: var(--color-o);
  text-shadow: 0 0 14px var(--color-o-glow);
}

/* رسم ليزر علامة X */
.svg-x line {
  stroke: var(--color-x);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px var(--color-x-glow));
}

.svg-x line.line-1 {
  animation: drawStroke 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.svg-x line.line-2 {
  animation: drawStroke 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards;
}

/* رسم ليزر علامة O */
.svg-o circle {
  stroke: var(--color-o);
  stroke-width: 12;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 8px var(--color-o-glow));
  animation: drawStroke 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

/* تفعيل زر المود النشط */
.mode-btn.active-mode {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* سيف الفوز الناري */
.win-strike-anim {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: strikeReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes strikeReveal {
  to {
    stroke-dashoffset: 0;
  }
}

/* اهتزاز الشاشة عند الحسم */
.shake-screen {
  animation: shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* النوافذ المنبثقة */
.modal-overlay {
  animation: fadeIn 0.2s ease-out forwards;
}

.modal-overlay.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* كروت اللاعبين المتوهجة */
.player-card.active {
  border-color: currentColor;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.25);
}

#player-x-card.active {
  border-color: var(--color-x);
  box-shadow: 0 0 18px var(--color-x-glow);
}

#player-o-card.active {
  border-color: var(--color-o);
  box-shadow: 0 0 18px var(--color-o-glow);
}

/* فقاعة التعليق */
@keyframes pulseSlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.animate-pulse-slow {
  animation: pulseSlow 3s infinite ease-in-out;
}