:root {
  --bg: #08080f;
  --card: #14141f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Vazirmatn', sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(168,85,247,0.14), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(34,211,238,0.12), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(244,63,94,0.08), transparent 45%),
    var(--bg);
  color: #e2e8f0;
  min-height: 100vh;
}
.gradient-text {
  background: linear-gradient(90deg, #a855f7, #22d3ee, #f43f5e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.code-block {
  font-family: 'JetBrains Mono', 'Vazirmatn', monospace;
  background: #0b0b14;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cbd5e1;
  max-height: 260px;
  overflow-y: auto;
}
.mono-fa { font-family: 'Vazirmatn', 'JetBrains Mono', monospace; }
.glow-p { box-shadow: 0 0 18px rgba(168,85,247,0.5); }
.glow-c { box-shadow: 0 0 18px rgba(34,211,238,0.5); }
.trophy-glow { box-shadow: 0 0 30px rgba(245,158,11,0.15); }
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); animation: shine 3.5s infinite;
}
@keyframes shine { 0% { left: -60%; } 40%,100% { left: 130%; } }
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.attack-pulse { animation: apulse 1.1s infinite; }
@keyframes apulse { 0%,100% { opacity: 1; text-shadow: 0 0 10px rgba(244,63,94,0.6);} 50% { opacity: .6; } }
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti {
  position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px;
  animation: fall 3.5s linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
select option { background: #1e293b; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.4); border-radius: 4px; }
details summary::-webkit-details-marker { display: none; }
input:focus, textarea:focus, select:focus { outline: none; }
@media (max-width: 640px) {
  .code-block { font-size: 11.5px; }
}