/* =============================================================
   games/g01-multiplication/style.css
   Game-specific styles for the Multiplication Quiz.
   Inherits all CSS custom properties from shared/css/base.css.
   ============================================================= */

/* ── Page background ─────────────────────────────────────────── */
body {
  background: linear-gradient(160deg, #c9e8ff 0%, #e8f4fd 50%, #ffe8f0 100%);
}

/* ══════════════════════════════════════════════════════════════
   START SCREEN
   ══════════════════════════════════════════════════════════════ */
.start-screen {
  gap: var(--space-lg);
}

.start-screen__title {
  font-size:   clamp(2.2rem, 8vw, 4rem);
  font-weight: var(--font-weight-bold);
  text-align:  center;
  line-height: 1.1;
  color:       var(--color-primary);
  text-shadow: 0 3px 12px rgba(92, 124, 250, 0.22);
}

.start-screen__subtitle {
  font-size:  var(--font-size-md);
  color:      var(--color-text-light);
  text-align: center;
}

/* Difficulty card */
.difficulty-card {
  width:       100%;
  max-width:   500px;
  text-align:  center;
  gap:         var(--space-md);
  display:     flex;
  flex-direction: column;
  align-items: center;
}

.difficulty-card__label {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.difficulty-card__level {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  min-height:  2rem;
  transition:  color var(--transition-normal);
}

.difficulty-card__slider {
  width: 100%;
}

.difficulty-card__hints {
  display:         flex;
  justify-content: space-between;
  width:           100%;
  font-size:       var(--font-size-xs);
  color:           var(--color-text-light);
  font-weight:     var(--font-weight-bold);
  padding-inline:  var(--space-xs);
}

.difficulty-card__timer-info {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════
   GAME SCREEN
   ══════════════════════════════════════════════════════════════ */
.game-screen {
  gap:        var(--space-md);
  padding:    var(--space-md);
}

/* Top status bar */
.status-bar {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  width:           100%;
  max-width:       var(--content-max-width);
  padding:         var(--space-sm) var(--space-md);
  background:      rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  border-radius:   var(--radius-full);
  box-shadow:      var(--shadow-sm);
}

.status-bar__progress {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.status-bar__score {
  font-size:   var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
}

/* Progress dots */
.progress-dots {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: var(--content-max-width);
}

.progress-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.5);
  border:        2px solid rgba(92,124,250,0.3);
  transition:    background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink:   0;
}

.progress-dot--correct {
  background:   var(--color-success);
  border-color: var(--color-success);
}

.progress-dot--wrong {
  background:   var(--color-danger);
  border-color: var(--color-danger);
}

.progress-dot--active {
  background:   var(--color-primary);
  border-color: var(--color-primary);
  transform:    scale(1.3);
}

/* Timer ring */
.timer-wrap {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}

.timer-ring {
  width:    120px;
  height:   120px;
  position: relative;
  flex-shrink: 0;
}

.timer-ring svg {
  transform: rotate(-90deg); /* start arc at top */
}

.timer-ring__track {
  fill:         none;
  stroke:       rgba(0,0,0,0.08);
  stroke-width: 10;
}

.timer-ring__arc {
  fill:            none;
  stroke:          var(--timer-color-safe);
  stroke-width:    10;
  stroke-linecap:  round;
  transition:      stroke var(--transition-slow);
  /* circumference set by JS */
}

.timer-ring__number {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items:     center;
  justify-content: center;
  font-size:   2rem;
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
  transition:  color var(--transition-slow);
}

/* Timer animation states (added by JS) */
.timer-ring--warn   .timer-ring__arc    { stroke: var(--timer-color-warn); }
.timer-ring--warn   .timer-ring__number { color:  var(--timer-color-warn); }

.timer-ring--alert  .timer-ring__arc    { stroke: var(--timer-color-alert); }
.timer-ring--alert  .timer-ring__number { color:  var(--timer-color-alert); }
.timer-ring--alert                      { animation: kmg-pulse 0.7s ease-in-out infinite; }

.timer-ring--danger .timer-ring__arc    { stroke: var(--timer-color-danger); }
.timer-ring--danger .timer-ring__number { color:  var(--timer-color-danger); }
.timer-ring--danger                     { animation: kmg-blink 0.5s step-start infinite; }

/* Question card */
.question-card {
  width:           100%;
  max-width:       500px;
  text-align:      center;
  padding:         var(--space-xl) var(--space-lg);
  animation:       kmg-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.question-card__equation {
  font-size:   clamp(2.8rem, 12vw, 5rem);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.question-card__prompt {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-light);
  margin-top: var(--space-sm);
}

/* Answer buttons grid */
.answers-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-md);
  width:                 100%;
  max-width:             580px;
}

.answer-btn {
  min-height:    90px;
  border-radius: var(--radius-md);
  font-size:     var(--font-size-xl);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-text);
  box-shadow:    var(--shadow-md);
  transition:    transform var(--transition-fast),
                 box-shadow var(--transition-fast),
                 background var(--transition-fast);
  position:      relative;
  overflow:      hidden;
}

/* Per-button accent colours (assigned by index in JS) */
.answer-btn--0 { background: var(--color-btn-a); }
.answer-btn--1 { background: var(--color-btn-b); }
.answer-btn--2 { background: var(--color-btn-c); }

.answer-btn:active:not(:disabled) {
  transform:  scale(0.94);
  box-shadow: none;
}

/* Feedback states */
.answer-btn--correct {
  background: var(--color-success) !important;
  color:      #fff !important;
  animation:  kmg-pop-in 0.25s ease both;
}

.answer-btn--wrong {
  background: var(--color-danger) !important;
  color:      #fff !important;
  animation:  kmg-shake 0.4s ease both;
}

.answer-btn--dimmed {
  opacity: 0.35;
  pointer-events: none;
}

.answer-btn:disabled {
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   RESULT SCREEN
   ══════════════════════════════════════════════════════════════ */
.result-screen {
  gap:        var(--space-lg);
  text-align: center;
}

.result-screen__title {
  font-size:   clamp(2rem, 7vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  animation:   kmg-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result-card {
  width:     100%;
  max-width: 480px;
  gap:       var(--space-lg);
  display:   flex;
  flex-direction: column;
  align-items: center;
}

.result-card__stars {
  font-size:   4rem;
  line-height: 1;
  letter-spacing: 0.1em;
  animation:   kmg-pop-in 0.5s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result-card__score-big {
  font-size:   clamp(3rem, 14vw, 6rem);
  font-weight: var(--font-weight-bold);
  color:       var(--color-primary);
  line-height: 1;
  animation:   kmg-pop-in 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.result-card__score-label {
  font-size:  var(--font-size-md);
  color:      var(--color-text-light);
}

.result-card__message {
  font-size:   var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text);
}

.result-card__percent {
  font-size:  var(--font-size-md);
  color:      var(--color-text-light);
}

.result-actions {
  display:   flex;
  flex-direction: column;
  gap:       var(--space-md);
  width:     100%;
  max-width: 360px;
  align-items: center;
}

/* ── Responsive tweaks for smaller tablets / phones ─────────── */
@media (max-width: 540px) {
  .answers-grid {
    grid-template-columns: 1fr;
  }

  .answer-btn {
    min-height: 75px;
    font-size:  var(--font-size-xl);
  }

  .timer-ring {
    width:  96px;
    height: 96px;
  }

  .progress-dots {
    gap: 4px;
  }

  .progress-dot {
    width:  10px;
    height: 10px;
  }
}

@media (min-width: 768px) {
  .answers-grid {
    gap: var(--space-lg);
  }

  .answer-btn {
    min-height: 110px;
    font-size:  var(--font-size-xxl);
  }

  .timer-ring {
    width:  140px;
    height: 140px;
  }
}