/* ============================================================
   YKS Hızlı Okuma — Gym Egzersizleri Özel Stilleri
   ============================================================ */

/* General Gym Layout */
.gym-menu-dashboard {
  animation: fadeIn var(--transition-base) forwards;
}

.gym-module-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-glow-primary) !important;
}

.gym-module-container {
  animation: fadeIn var(--transition-base) forwards;
}

/* Module 2: Sakkadik (Saccadic) Jump Area */
.gym-saccadic-court {
  position: relative;
  width: 100%;
  height: 350px;
  background: hsla(225, 25%, 8%, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.gym-saccadic-dot {
  position: absolute;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--text-inverse);
  transition: transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 150ms ease, border-radius 150ms ease;
  transform: translate(-50%, -50%);
  user-select: none;
  box-shadow: var(--shadow-md);
}

.gym-saccadic-center-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

/* Module 3: Masking (Geri Dönüş Engelleme) Layout */
.gym-masking-viewport {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  line-height: 2.2;
  font-size: 1.25rem;
  color: var(--text-primary);
  user-select: none;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: hsla(225, 25%, 8%, 0.25);
  border: 1px solid var(--glass-border);
}

.gym-masking-word {
  display: inline-block;
  margin-right: 0.4em;
  transition: opacity 200ms ease, filter 200ms ease, color 200ms ease, transform 200ms ease;
}

.gym-masking-word.masked-fade {
  opacity: 0.12;
}

.gym-masking-word.masked-blur {
  opacity: 0.25;
  filter: blur(5px);
}

.gym-masking-word.masked-block {
  background: var(--bg-tertiary);
  color: var(--bg-tertiary);
  opacity: 0.3;
  border-radius: var(--radius-sm);
}

.gym-masking-word.active-highlight {
  color: var(--color-primary-light);
  font-weight: 700;
  text-shadow: 0 0 12px hsla(210, 100%, 60%, 0.5);
  transform: scale(1.06);
}

/* Module 4: ÖSYM Reflex Tape */
.gym-reflex-viewport {
  width: 100%;
  height: 140px;
  background: hsla(225, 25%, 8%, 0.65);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.gym-reflex-laser-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--color-danger), transparent);
  box-shadow: 0 0 8px var(--color-danger);
  z-index: 10;
  pointer-events: none;
}

.gym-reflex-tape-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.gym-reflex-word-box {
  position: absolute;
  top: 30px; /* Centered inside 140px viewport (height is 80px) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  font-size: var(--text-xl);
  font-weight: 700;
  height: 80px;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
  cursor: pointer;
  user-select: none;
  background: hsla(225, 20%, 15%, 0.4);
  border: 1px solid var(--glass-border);
}

.gym-reflex-word-box:hover {
  background: hsla(220, 20%, 90%, 0.05);
  transform: scale(1.03);
}

.gym-reflex-word-box.clicked-correct {
  background: hsla(145, 70%, 55%, 0.25) !important;
  border: 1.5px solid var(--color-success) !important;
  color: var(--color-success-light) !important;
  transform: scale(1.1) rotate(1deg) !important;
}

.gym-reflex-word-box.clicked-wrong {
  background: hsla(0, 80%, 60%, 0.25) !important;
  border: 1.5px solid var(--color-danger) !important;
  color: var(--color-danger-light) !important;
  transform: scale(0.95) !important;
}

/* Module 5: Radial / Triangular Schulte Matris */
.gym-schulte-outer-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 440px;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background: hsla(225, 25%, 8%, 0.4);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gym-schulte-radial-center {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: bold;
  box-shadow: var(--shadow-glow-accent);
  z-index: 20;
}

.gym-schulte-node {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-full);
  background: var(--bg-card-solid);
  border: 1.5px solid var(--glass-border);
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-sm);
}

.gym-schulte-node:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-primary);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--shadow-glow-primary);
}

.gym-schulte-node.node-correct {
  background: var(--color-success) !important;
  border-color: var(--color-success-light) !important;
  color: var(--text-inverse) !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
  box-shadow: var(--shadow-glow-success) !important;
}

.gym-schulte-node.node-wrong {
  animation: gym-shake 200ms ease;
  background: var(--color-danger) !important;
  border-color: var(--color-danger-light) !important;
  color: var(--text-inverse) !important;
}

/* Triangular Schulte Layout */
.gym-schulte-triangular-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.gym-schulte-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* Shake Animation */
@keyframes gym-shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  25% { transform: translate(-50%, -50%) translateX(-6px); }
  75% { transform: translate(-50%, -50%) translateX(6px); }
}