/* ═══════════════════════════════════════════════
   Riddle — Styles
   ═══════════════════════════════════════════════ */

.menu { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:18px; }
.menu-title { font-size:clamp(38px,10vw,56px); font-weight:700; letter-spacing:4px; color:var(--navy); }
.menu-sub { font-size:14px; font-weight:300; color:var(--text-dim); letter-spacing:1.5px; }
.menu-how { max-width:380px; text-align:center; font-size:13px; font-weight:400; line-height:1.7; color:var(--text-mid); padding:16px 20px; border-radius:var(--radius-md); background:var(--bg-subtle); border:1px solid var(--border); }
.menu-start { padding:16px 40px; border-radius:var(--radius-md); border:none; background:var(--navy); color:var(--white); font-size:14px; font-weight:700; letter-spacing:2.5px; cursor:pointer; font-family:var(--font); box-shadow:var(--shadow-md); margin-top:8px; }
.menu-start:hover { opacity:.88; }

.game { display:none; flex-direction:column; align-items:center; width:100%; max-width:500px; padding:20px 16px 32px; gap:20px; }
.game.active { display:flex; }

/* Riddle card */
.rd-card {
  width:100%; padding:28px 24px; border-radius:var(--radius-lg);
  background:var(--bg-white); border:1.5px solid var(--border);
  box-shadow:var(--shadow-md); text-align:center;
}
.rd-category {
  font-size:11px; font-weight:600; letter-spacing:2.5px; color:var(--teal);
  margin-bottom:12px;
}
.rd-text {
  font-size:clamp(16px,4.5vw,20px); font-weight:500; line-height:1.7;
  color:var(--navy); min-height:80px;
}
.rd-loading {
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--text-dim); font-size:14px; font-weight:400; min-height:80px;
}
.rd-spinner {
  width:20px; height:20px; border:2.5px solid var(--border-md);
  border-top-color:var(--teal); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Hint */
.rd-hint-btn {
  padding:10px 24px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--bg);
  color:var(--text-mid); font-size:12px; font-weight:600;
  letter-spacing:1.5px; cursor:pointer; font-family:var(--font);
  transition:all var(--transition);
}
.rd-hint-btn:hover { background:var(--bg-subtle); border-color:var(--border-md); }
.rd-hint-btn:disabled { opacity:0.4; cursor:default; }
.rd-hint-btn.rd-hint-btn--mc {
  background:var(--sky); color:var(--white); border-color:var(--sky);
  animation:rd-pulse 1.5s ease-in-out infinite;
}
.rd-hint-btn.rd-hint-btn--mc:hover { opacity:0.88; background:var(--sky); }
@keyframes rd-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(91,184,245,0.4); }
  50% { box-shadow:0 0 0 8px rgba(91,184,245,0); }
}

.rd-hint-box {
  width:100%; padding:16px 20px; border-radius:var(--radius-md);
  background:rgba(80,194,195,0.12); border:2px solid rgba(80,194,195,0.35);
  font-size:15px; font-weight:500; color:var(--navy); line-height:1.6;
  text-align:center; display:none;
  box-shadow:0 2px 12px rgba(80,194,195,0.1);
}
.rd-hint-box.visible { display:block; }

/* Answer input */
.rd-input-row {
  display:flex; gap:8px; width:100%;
}
.rd-input {
  flex:1; padding:14px 18px; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--bg-white);
  font-size:15px; font-weight:500; font-family:var(--font);
  color:var(--navy); outline:none; transition:border-color var(--transition);
}
.rd-input:focus { border-color:var(--sky); }
.rd-input::placeholder { color:var(--text-dim); font-weight:400; }
.rd-submit {
  padding:14px 22px; border-radius:var(--radius-md); border:none;
  background:var(--navy); color:var(--white); font-size:13px;
  font-weight:700; letter-spacing:1.5px; cursor:pointer;
  font-family:var(--font); white-space:nowrap;
  transition:opacity var(--transition);
}
.rd-submit:hover { opacity:.88; }
.rd-submit:disabled { opacity:0.4; cursor:default; }

/* Feedback */
.rd-feedback {
  width:100%; padding:16px 20px; border-radius:var(--radius-md);
  text-align:center; font-size:14px; font-weight:600;
  letter-spacing:1px; display:none;
}
.rd-feedback.visible { display:block; }
.rd-feedback.correct {
  background:rgba(80,194,195,0.12); border:1px solid rgba(80,194,195,0.3);
  color:#2a9a7a;
}
.rd-feedback.wrong {
  background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2);
  color:var(--error);
}
.rd-answer-reveal {
  margin-top:8px; font-size:13px; font-weight:400; color:var(--text-mid);
}

/* Next / back buttons */
.rd-actions { display:flex; gap:10px; }
.rd-next {
  padding:14px 32px; border-radius:var(--radius-md); border:none;
  background:var(--navy); color:var(--white); font-size:13px;
  font-weight:700; letter-spacing:2px; cursor:pointer;
  font-family:var(--font); box-shadow:var(--shadow-sm);
}
.rd-next:hover { opacity:.88; }
.rd-back {
  padding:14px 24px; border-radius:var(--radius-md);
  border:2px solid var(--border); background:var(--bg);
  color:var(--navy); font-size:13px; font-weight:600;
  letter-spacing:1.5px; cursor:pointer; font-family:var(--font);
}

/* Score */
.rd-score {
  font-size:12px; font-weight:600; letter-spacing:2px; color:var(--text-dim);
}

/* Footer */
.foot { display:flex; justify-content:center; gap:16px; padding:8px 0; width:100%; }
.foot-btn { background:none; border:none; font-size:18px; color:var(--text-dim); cursor:pointer; padding:6px; font-family:var(--font); transition:color var(--transition); }
.foot-btn:hover { color:var(--navy); }

/* Error */
.rd-error {
  width:100%; padding:14px 20px; border-radius:var(--radius-md);
  background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.15);
  font-size:13px; color:var(--error); text-align:center; display:none;
}
.rd-error.visible { display:block; }

/* Multiple choice */
.rd-mc {
  width:100%; display:none; flex-direction:column; gap:0;
  border-radius:var(--radius-lg); overflow:hidden;
  border:2px solid var(--sky); box-shadow:0 4px 20px rgba(91,184,245,0.15);
  background:var(--bg-white);
}
.rd-mc.visible { display:flex; }
.rd-mc-label {
  padding:12px 20px; background:var(--sky); color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-align:center;
}
.rd-mc-btn {
  width:100%; padding:16px 20px; border:none; background:var(--bg-white);
  border-bottom:1px solid var(--border);
  font-size:15px; font-weight:500; font-family:var(--font);
  color:var(--navy); cursor:pointer; text-align:center;
  transition:all var(--transition);
}
.rd-mc-btn:last-child { border-bottom:none; }
.rd-mc-btn:hover { background:rgba(91,184,245,0.08); color:var(--navy); }
.rd-mc-btn:active { background:rgba(91,184,245,0.15); }