/* ===== RESET & BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg-dark: #0f0f1a;
  --bg-card: #1a1a2e;
  --bg-panel: #16213e;
  --accent: #00d4ff;
  --accent2: #ff2e63;
  --accent3: #7b2cbf;
  --gold: #ffd700;
  --text: #eaeaea;
  --text-dim: #a0a0b0;
  --success: #00ff88;
  --danger: #ff4444;
  --warning: #ffaa00;
}
html, body {
  width:100%; height:100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  overflow-x:hidden;
  direction: rtl;
}
body[dir="ltr"] { direction: ltr; }

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  position:fixed; top:12px; left:12px; z-index:9999;
  display:flex; gap:6px;
}
.lang-toggle button {
  background: var(--bg-panel);
  border:1px solid var(--accent);
  color: var(--text);
  padding:6px 14px;
  border-radius:20px;
  cursor:pointer;
  font-weight:bold;
  transition:.2s;
}
.lang-toggle button.active {
  background: var(--accent);
  color: var(--bg-dark);
}

/* ===== SCREENS ===== */
.screen {
  display:none;
  width:100%; min-height:100vh;
  padding:20px;
}
.screen.active { display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ===== LANDING ===== */
.landing-bg {
  position:relative; width:100%; height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.landing-bg::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, rgba(0,212,255,0.15), transparent 60%);
  animation: pulseBg 4s ease-in-out infinite;
}
@keyframes pulseBg {
  0%,100% { opacity:0.6; transform:scale(1); }
  50% { opacity:1; transform:scale(1.1); }
}
.particles {
  position:absolute; inset:0;
  background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:0.15;
  animation: drift 20s linear infinite;
}
@keyframes drift { from { background-position:0 0; } to { background-position:40px 40px; } }

.landing-content {
  position:relative; z-index:2; text-align:center;
}
.game-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight:900;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 0 40px rgba(0,212,255,0.3);
  margin-bottom:10px;
  animation: titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { filter: drop-shadow(0 0 10px rgba(0,212,255,0.5)); }
  to { filter: drop-shadow(0 0 30px rgba(255,46,99,0.6)); }
}
.game-subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--text-dim);
  margin-bottom:30px;
}
.landing-buttons {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}

/* ===== BUTTONS ===== */
.btn-primary, .btn-secondary {
  padding:14px 32px;
  border:none; border-radius:12px;
  font-size:1.1rem; font-weight:bold;
  cursor:pointer; transition:.2s;
  text-transform:none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,212,255,0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,212,255,0.5);
}
.btn-secondary {
  background: var(--bg-panel);
  color: var(--text);
  border:1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.05);
}

/* ===== CARD BOX ===== */
.card-box {
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:30px 40px;
  max-width:700px; width:100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  text-align:center;
}
.card-box h2 {
  font-size:1.8rem; margin-bottom:20px;
  color: var(--accent);
}
.card-box input {
  width:100%; padding:14px 16px; margin:8px 0;
  background: var(--bg-panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  color: var(--text);
  font-size:1rem;
}
.card-box input::placeholder { color: var(--text-dim); }
.card-box input:focus {
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15);
}

/* ===== TRACK SELECT ===== */
.track-options {
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:20px 0;
}
.track-card {
  background: var(--bg-panel);
  border:2px solid transparent;
  border-radius:16px;
  padding:24px; width:240px;
  cursor:pointer; transition:.25s;
}
.track-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,212,255,0.2);
}
.track-icon { font-size:3rem; margin-bottom:10px; }
.track-card h3 { color: var(--gold); margin-bottom:6px; }
.track-card p { color: var(--text-dim); font-size:0.9rem; }

/* ===== RULES ===== */
.rules-box { max-width:800px; text-align:right; }
body[dir="ltr"] .rules-box { text-align:left; }
.rules-content ul { margin:10px 20px 20px; line-height:1.8; }
.rules-content li { margin:6px 0; }
.trap-list { background: var(--bg-panel); border-radius:12px; padding:16px; margin-top:16px; }
.trap-item { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:0.95rem; }
.trap-item span:first-child { font-size:1.3rem; }

/* ===== CARD SELECT ===== */
.select-header {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1100px; margin-bottom:16px;
  padding:10px 20px;
  background: var(--bg-panel); border-radius:12px;
}
.select-header h2 { color: var(--accent); font-size:1.3rem; }
.select-counter { font-size:1.3rem; font-weight:bold; color: var(--gold); }
.select-timer {
  font-size:1.5rem; font-weight:bold; color: var(--danger);
  background: rgba(255,68,68,0.1); padding:4px 14px; border-radius:20px;
}
.cards-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  width:100%; max-width:1100px;
  max-height:60vh; overflow-y:auto; padding:10px;
}
.card-item {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-card));
  border:2px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:12px;
  cursor:pointer; transition:.2s;
  position:relative; min-height:120px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.card-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-item.selected {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(0,255,136,0.3);
}
.card-item .card-diff { font-size:0.7rem; padding:2px 8px; border-radius:6px; display:inline-block; margin-top:4px; }
.card-diff.easy   { background: var(--success); color:#000; }
.card-diff.medium { background: var(--warning); color:#000; }
.card-diff.hard   { background: var(--danger);  color:#fff; }
.card-item .card-subject { font-size:0.75rem; color: var(--text-dim); margin-top:2px; }
.card-item .card-preview {
  font-size:0.78rem; color: var(--text);
  margin-top:6px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-item .card-num {
  position:absolute; top:6px; left:6px;
  background: var(--accent3); color:#fff;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:bold;
}
body[dir="ltr"] .card-item .card-num { left:auto; right:6px; }
/* card number shown inline on the face (smaller, below subject) */
.card-face-num {
  font-size:0.7rem; color: var(--accent); font-weight:bold;
  margin-top:2px; opacity:0.7;
}
/* quota-blocked: greyed out, not clickable */
.card-item.quota-blocked {
  opacity:0.35; cursor:not-allowed; pointer-events:none;
}
/* quota indicator bar */
.quota-indicators {
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  width:100%; max-width:1100px; padding:4px 10px 8px;
}
.quota-badge {
  background: var(--bg-panel); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:4px 14px; font-size:0.82rem; color: var(--text-dim);
  transition:.2s;
}
.quota-badge.quota-full {
  border-color: var(--success); color: var(--success);
  background: rgba(0,255,136,0.08);
}

/* ===== ARENA ===== */
.arena-header {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:12px 20px;
  background: var(--bg-panel); border-radius:12px; margin-bottom:12px;
}
.player-score-box {
  text-align:center; padding:8px 18px;
  background: var(--bg-card); border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
}
.player-score-box.ai-box { border-color: var(--accent2); }
.player-name { font-size:0.85rem; color: var(--text-dim); }
.player-score { font-size:1.8rem; font-weight:bold; color: var(--gold); }
.trap-count { font-size:0.8rem; color: var(--accent); }
.round-info { text-align:center; }
.round-num { font-size:1rem; color: var(--text-dim); }
.turn-indicator {
  font-size:1.1rem; font-weight:bold; color: var(--success);
  margin-top:4px;
}

.arena-body {
  display:flex; gap:12px; width:100%; flex:1;
}
.arena-left {
  flex:1; display:flex; flex-direction:column; gap:12px;
  min-width:0;
}
.arena-right {
  width:340px; display:flex; flex-direction:column; align-items:center;
  background: var(--bg-panel); border-radius:12px; padding:10px;
}
#minigame-canvas {
  width:100%; height:auto; border-radius:8px;
  background: radial-gradient(circle at center, #0d1b2a, #000);
  border:1px solid rgba(0,212,255,0.15);
}
.minigame-score {
  margin-top:8px; font-size:1.1rem; color: var(--gold);
}

.battle-ground {
  flex:1; background: var(--bg-card); border-radius:12px;
  border:2px dashed rgba(255,255,255,0.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; min-height:200px;
}
.ground-label {
  position:absolute; top:8px; color: var(--text-dim); font-size:0.8rem;
}
.played-cards {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  padding:20px;
}
.played-card {
  width:80px; height:110px;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:bold; color:#fff;
  box-shadow: 0 4px 15px rgba(0,212,255,0.3);
  animation: throwIn 0.4s ease-out;
}
@keyframes throwIn {
  from { transform: translateY(-80px) rotate(-10deg) scale(0.5); opacity:0; }
  to { transform: translateY(0) rotate(0) scale(1); opacity:1; }
}

.hand-area {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  padding:10px; background: var(--bg-panel); border-radius:12px;
  min-height:100px;
}
.hand-card {
  width:60px; height:85px;
  background: linear-gradient(135deg, #1e3a5f, #0f3460);
  border-radius:8px; border:1px solid rgba(0,212,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; font-weight:bold; color: var(--accent);
  cursor:pointer; transition:.2s;
}
.hand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,212,255,0.3);
}
.hand-card.disabled { opacity:0.4; pointer-events:none; }

/* ===== MODAL ===== */
.modal {
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,0.85);
  align-items:center; justify-content:center;
  padding:20px;
}
.modal.active { display:flex; }
.modal-content {
  background: var(--bg-card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  width:100%; max-width:700px; max-height:90vh;
  display:flex; flex-direction:column;
  overflow-y:auto;
  animation: modalPop 0.3s ease-out;
}
@keyframes modalPop {
  from { transform: scale(0.85); opacity:0; }
  to { transform: scale(1); opacity:1; }
}
.modal-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.subject-tag {
  background: var(--accent3); color:#fff;
  padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:bold;
}
.timer-bar {
  flex:1; height:6px; background: rgba(255,255,255,0.1); border-radius:3px; overflow:hidden;
}
#timer-fill {
  height:100%; width:100%; background: var(--success);
  transition: width 0.9s linear, background 0.3s;
}
.timer-text { font-weight:bold; color: var(--accent); min-width:40px; text-align:center; }
.close-modal {
  background:none; border:none; color: var(--text-dim);
  font-size:1.3rem; cursor:pointer;
}
.modal-body { padding:20px; }
.question-text {
  font-size:1.15rem; line-height:1.7; margin-bottom:18px;
  color: var(--text); text-align:right;
}
body[dir="ltr"] .question-text { text-align:left; }
.options-grid { display:flex; flex-direction:column; gap:10px; }
.option-btn {
  background: var(--bg-panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:14px 18px;
  color: var(--text); font-size:1rem;
  cursor:pointer; text-align:right; transition:.2s;
}
body[dir="ltr"] .option-btn { text-align:left; }
.option-btn:hover { border-color: var(--accent); background: rgba(0,212,255,0.08); }
.option-btn.correct { border-color: var(--success); background: rgba(0,255,136,0.12); }
.option-btn.wrong { border-color: var(--danger); background: rgba(255,68,68,0.12); }
.option-btn:disabled { cursor:default; }

.trap-actions {
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.trap-btn {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background: var(--bg-panel); color: var(--text);
  font-size:1.1rem; cursor:pointer; transition:.2s;
}
.trap-btn:hover { background: var(--accent); color:#fff; }
.trap-btn:disabled { opacity:0.3; cursor:not-allowed; }

.trap-feedback {
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  color: #fff; font-weight: bold; font-size: 0.95rem;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 12px;
  text-align: center; animation: popIn 0.3s ease-out;
}

.modal-footer {
  padding:16px 20px; border-top:1px solid rgba(255,255,255,0.06);
}
.explanation-box { background: rgba(0,212,255,0.06); border-radius:12px; padding:14px; }
.explanation-box h4 { color: var(--accent); margin-bottom:6px; }
.explanation-box p { color: var(--text-dim); line-height:1.6; }

/* ===== OVERLAY ===== */
.overlay {
  display:none; position:fixed; inset:0; z-index:2000;
  background: rgba(0,0,0,0.9);
  align-items:center; justify-content:center;
}
.overlay.active { display:flex; }
.overlay-content {
  background: var(--bg-card); border-radius:20px;
  padding:40px; text-align:center; max-width:500px; width:100%;
  animation: modalPop 0.3s ease-out;
}
.result-scores { font-size:1.3rem; margin:20px 0; }
.result-scores div { margin:8px 0; }

/* ===== LEADERBOARD ===== */
.leaderboard-table { width:100%; border-collapse:collapse; margin:16px 0; }
.leaderboard-table th, .leaderboard-table td {
  padding:10px 14px; text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.leaderboard-table th { color: var(--accent); font-size:0.85rem; }
.leaderboard-table td { color: var(--text-dim); }
.leaderboard-table tr:nth-child(1) td { color: var(--gold); font-weight:bold; }
.leaderboard-table tr:nth-child(2) td { color: #c0c0c0; }
.leaderboard-table tr:nth-child(3) td { color: #cd7f32; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--accent3); border-radius:4px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .arena-body { flex-direction:column; }
  .arena-right { width:100%; height:220px; }
  #minigame-canvas { height:180px; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 600px) {
  .card-box { padding:20px; }
  .track-options { flex-direction:column; align-items:center; }
  .track-card { width:100%; max-width:280px; }
  .arena-header { flex-wrap:wrap; gap:8px; justify-content:center; }
  .hand-card { width:48px; height:70px; font-size:0.9rem; }
}

/* ===== EFFECTS ===== */
.flash-success { animation: flashGreen 0.4s ease; }
@keyframes flashGreen { 0% { box-shadow:0 0 0 rgba(0,255,136,0); } 50% { box-shadow:0 0 40px rgba(0,255,136,0.6); } 100% { box-shadow:0 0 0 rgba(0,255,136,0); } }
.flash-danger { animation: flashRed 0.4s ease; }
@keyframes flashRed { 0% { box-shadow:0 0 0 rgba(255,68,68,0); } 50% { box-shadow:0 0 40px rgba(255,68,68,0.6); } 100% { box-shadow:0 0 0 rgba(255,68,68,0); } }

.shake { animation: shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }

.pop-in { animation: popIn 0.3s ease-out; }
@keyframes popIn { from{transform:scale(0.6);opacity:0;} to{transform:scale(1);opacity:1;} }

.floating-score {
  position:absolute; font-size:1.4rem; font-weight:bold; color: var(--gold);
  pointer-events:none; animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp { from{transform:translateY(0);opacity:1;} to{transform:translateY(-40px);opacity:0;} }