/* ============================================================
   TibetLearn · game.css
   Shared styles for all game pages
   ============================================================ */

/* ── GAME HUD ── */
.game-hud {
  background: var(--cream2);
  border-bottom: 2px solid var(--gold);
  padding: 10px 32px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 78px; z-index: 50;
}
.hud-back {
  background: var(--cream); border: 1.5px solid var(--gold);
  color: var(--crimson); border-radius: 8px;
  padding: 6px 14px; font-size: 13px;
  font-family: Georgia, serif; cursor: pointer;
  transition: background 0.15s;
}
.hud-back:hover { background: var(--cream3); }
.hud-center { text-align: center; }
.hud-title    { font-size: 15px; font-weight: 700; color: var(--crimson); }
.hud-title-ti { font-family: 'Jomolhari', Georgia, serif; font-size: 11px; color: var(--gold); }
.hud-right { display: flex; align-items: center; gap: 20px; }
.hud-stat-val { font-size: 22px; font-weight: 700; color: var(--crimson); line-height: 1; }
.hud-stat-lbl { font-size: 9px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
.lives { display: flex; gap: 5px; align-items: center; }
.life-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--crimson); border: 1.5px solid var(--gold); transition: all 0.3s; }
.life-dot.lost { background: var(--gold-lt); border-color: var(--border); }

/* ── PROMPT BAR ── */
.game-prompt {
  background: var(--cream2); border-bottom: 1.5px solid var(--gold-lt);
  padding: 12px 32px;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.prompt-mascot { font-size: 32px; animation: mascot-bounce 2s ease-in-out infinite; }
@keyframes mascot-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.prompt-bubble {
  background: var(--cream2); border: 2px solid var(--gold);
  border-radius: 14px; padding: 8px 24px; text-align: center; position: relative;
}
.prompt-bubble::before {
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-right-color: var(--gold);
}
.prompt-bubble::after {
  content:''; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color: var(--cream2);
}
.prompt-instruction { font-size: 9px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; }
.prompt-letter { font-family: 'Jomolhari', Georgia, serif; font-size: 36px; color: var(--crimson); line-height: 1; }
.prompt-roman  { font-size: 11px; color: var(--lapis); font-style: italic; margin-top: 2px; }

/* ── GAME CANVAS AREA ── */
.game-canvas-wrap {
  background: var(--cream); position: relative; overflow: hidden;
  min-height: 400px;
}
canvas { display: block; }

/* ── BOTTOM BAR ── */
.game-bottom {
  background: var(--cream2); border-top: 2px solid var(--gold);
  padding: 10px 32px;
  display: flex; align-items: center; gap: 16px;
}
.game-level-lbl  { font-size: 9px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
.game-level-val  { font-size: 14px; font-weight: 700; color: var(--crimson); }
.game-progress-bg { flex:1; background: var(--gold-lt); border-radius:20px; height:10px; border:1px solid var(--gold); overflow:hidden; }
.game-progress-fill { height:100%; background:linear-gradient(90deg, var(--gold), var(--crimson)); border-radius:20px; transition:width 0.5s ease; }
.game-speed-lbl  { font-size: 9px; color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; }
.game-speed-val  { font-size: 14px; font-weight: 700; color: var(--lapis); }

/* ── OVERLAYS ── */
.game-overlay {
  position: fixed; inset: 0;
  background: rgba(253,248,240,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.game-overlay.hidden { display: none; }
.overlay-box {
  background: var(--cream2); border: 3px solid var(--gold);
  border-radius: 20px; padding: 36px 40px;
  text-align: center; max-width: 380px; width: 90%;
}
.overlay-icon  { font-size: 64px; margin-bottom: 12px; }
.overlay-title { font-family:'Jomolhari',Georgia,serif; font-size:28px; color:var(--crimson); margin-bottom:6px; }
.overlay-sub   { font-size:14px; color:var(--lapis); margin-bottom:6px; font-style:italic; }
.overlay-score { font-size:32px; font-weight:700; color:var(--gold); margin:16px 0; }
.overlay-score-lbl { font-size:11px; color:var(--crimson); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.overlay-btn {
  background: var(--crimson); color: #FFD700; border: none;
  border-radius: 12px; padding: 12px 32px;
  font-size: 15px; font-family: Georgia, serif;
  cursor: pointer; margin: 6px; transition: background 0.15s; font-weight:700;
}
.overlay-btn:hover { background: #6B1010; }
.overlay-btn.secondary {
  background: var(--cream); color: var(--crimson);
  border: 1.5px solid var(--gold);
}
.overlay-btn.secondary:hover { background: var(--cream3); }

/* ── SCORE POPUP ── */
.score-popup {
  position: absolute; font-size: 22px; font-weight: 700;
  color: var(--crimson); font-family: Georgia, serif;
  pointer-events: none; z-index: 80;
}

/* ── WRONG FLASH ── */
.wrong-flash {
  position: fixed; inset: 0;
  background: rgba(139,26,26,0.15);
  pointer-events: none; z-index: 150; opacity: 0;
}

/* ── QUIZ STYLES ── */
.quiz-wrap { max-width: 600px; margin: 0 auto; padding: 40px 24px; }
.quiz-image { text-align: center; font-size: 100px; margin-bottom: 12px; }
.quiz-question { text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.quiz-question-ti { font-family:'Jomolhari',Georgia,serif; text-align:center; font-size:14px; color:var(--gold); margin-bottom:28px; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz-btn {
  padding: 20px 14px; border-radius: 14px;
  border: 2px solid var(--border); background: var(--cream2);
  font-size: 22px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: all 0.15s; font-family:'Jomolhari',Georgia,serif;
  text-align: center;
}
.quiz-btn small { display:block; font-size:11px; color:var(--muted); font-family:Georgia,serif; font-weight:normal; margin-top:4px; }
.quiz-btn:hover { border-color: var(--gold); background: var(--cream3); transform: scale(1.02); }
.quiz-btn.correct { background:rgba(26,92,42,0.1); border-color:var(--jade); color:var(--jade); }
.quiz-btn.wrong   { background:rgba(139,26,26,0.1); border-color:var(--crimson); color:var(--crimson); }
.quiz-progress { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.quiz-progress-bg { flex:1; background:var(--gold-lt); border-radius:20px; height:8px; }
.quiz-progress-fill { height:100%; background:var(--gold); border-radius:20px; transition:width 0.4s; }
.quiz-count { font-size:12px; color:var(--muted); white-space:nowrap; }

/* ── DRAG DROP STYLES ── */
.dragdrop-wrap { max-width: 700px; margin: 0 auto; padding: 40px 24px; }
.dd-word-display { text-align:center; margin-bottom:32px; }
.dd-word-image { font-size:80px; margin-bottom:8px; }
.dd-word-en { font-size:20px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.dd-word-hint { font-size:13px; color:var(--muted); font-style:italic; }
.dd-drop-zone {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  min-height:70px; border:2px dashed var(--border);
  border-radius:14px; padding:12px; margin-bottom:24px;
  background:var(--cream2); transition:border-color 0.2s;
}
.dd-drop-zone.dragover { border-color:var(--gold); background:var(--cream3); }
.dd-slot {
  width:56px; height:56px; border:2px solid var(--border);
  border-radius:10px; background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:'Jomolhari',Georgia,serif; font-size:24px; color:var(--crimson);
}
.dd-syllables { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.dd-syllable {
  width:60px; height:60px; border:2px solid var(--gold);
  border-radius:12px; background:var(--cream2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Jomolhari',Georgia,serif; font-size:26px; color:var(--crimson);
  cursor:grab; transition:all 0.15s; user-select:none;
}
.dd-syllable:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(200,144,42,0.3); }
.dd-syllable.dragging { opacity:0.4; }
.dd-check-btn {
  display:block; margin:0 auto; background:var(--crimson); color:#FFD700;
  border:none; border-radius:10px; padding:12px 36px;
  font-size:15px; font-family:Georgia,serif; font-weight:700; cursor:pointer;
}

/* ── SOUNDS STYLES ── */
.sounds-wrap { max-width: 700px; margin: 0 auto; padding: 40px 24px; }
.sounds-play-btn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:var(--crimson); color:#FFD700; border:none;
  border-radius:50%; width:100px; height:100px; font-size:36px;
  margin:0 auto 32px; cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 20px rgba(139,26,26,0.3);
}
.sounds-play-btn:hover { transform:scale(1.08); }
.sounds-play-btn.playing { animation:pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.sounds-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sound-option {
  background:var(--cream2); border:2px solid var(--border);
  border-radius:14px; padding:20px 12px; text-align:center;
  cursor:pointer; transition:all 0.15s;
}
.sound-option:hover { border-color:var(--gold); transform:scale(1.03); }
.sound-option.correct { border-color:var(--jade); background:rgba(26,92,42,0.08); }
.sound-option.wrong   { border-color:var(--crimson); background:rgba(139,26,26,0.08); }
.sound-option-emoji { font-size:48px; display:block; margin-bottom:8px; }
.sound-option-en    { font-size:13px; font-weight:700; color:var(--ink); }
.sound-option-ti    { font-family:'Jomolhari',Georgia,serif; font-size:13px; color:var(--gold); }

/* ── COUNTING STYLES ── */
.counting-wrap { max-width: 700px; margin: 0 auto; padding: 40px 24px; }
.counting-question { text-align:center; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.counting-ti { font-family:'Jomolhari',Georgia,serif; text-align:center; font-size:13px; color:var(--gold); margin-bottom:24px; }
.counting-objects {
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  min-height:120px; background:var(--cream3); border-radius:16px;
  padding:20px; margin-bottom:28px; border:1.5px solid var(--border);
}
.count-obj { font-size:40px; animation:obj-pop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes obj-pop { from{transform:scale(0)} to{transform:scale(1)} }
.counting-options { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.count-btn {
  padding:16px 10px; border-radius:12px;
  border:2px solid var(--border); background:var(--cream2);
  cursor:pointer; transition:all 0.15s; text-align:center;
}
.count-btn:hover { border-color:var(--gold); transform:scale(1.03); }
.count-btn.correct { border-color:var(--jade); background:rgba(26,92,42,0.08); }
.count-btn.wrong   { border-color:var(--crimson); background:rgba(139,26,26,0.08); }
.count-btn-ti  { font-family:'Jomolhari',Georgia,serif; font-size:22px; color:var(--crimson); display:block; }
.count-btn-en  { font-size:18px; font-weight:700; color:var(--ink); display:block; }
.count-btn-rom { font-size:10px; color:var(--muted); display:block; margin-top:2px; }

/* ── TRACING STYLES ── */
.tracing-wrap { max-width: 800px; margin: 0 auto; padding: 32px 24px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.tracing-guide { background:var(--cream2); border:2px solid var(--border); border-radius:16px; padding:20px; text-align:center; }
.tracing-guide-letter { font-family:'Jomolhari',Georgia,serif; font-size:120px; color:rgba(139,26,26,0.15); line-height:1; }
.tracing-guide-label  { font-size:13px; color:var(--muted); font-style:italic; }
.tracing-canvas-wrap  { background:var(--cream); border:2px solid var(--gold); border-radius:16px; overflow:hidden; position:relative; }
canvas#trace-canvas   { display:block; width:100%; cursor:crosshair; }
.tracing-toolbar { display:flex; gap:8px; align-items:center; padding:10px 14px; background:var(--cream2); border-top:1px solid var(--border); flex-wrap:wrap; }
.trace-color { width:28px; height:28px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:transform 0.1s; flex-shrink:0; }
.trace-color:hover { transform:scale(1.2); }
.trace-color.selected { border-color:var(--ink); }
.trace-clear { margin-left:auto; padding:5px 12px; border-radius:8px; background:var(--crimson); color:#FFD700; border:none; font-size:11px; font-weight:700; cursor:pointer; font-family:Georgia,serif; }
.tracing-letters { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:20px; grid-column:1/-1; }
.trace-letter-btn {
  background:var(--cream2); border:1.5px solid var(--border);
  border-radius:10px; padding:10px 4px; text-align:center; cursor:pointer; transition:all 0.15s;
}
.trace-letter-btn:hover  { border-color:var(--gold); }
.trace-letter-btn.active { border-color:var(--crimson); background:rgba(139,26,26,0.06); }
.trace-letter-btn .ti    { font-size:20px; color:var(--crimson); display:block; }
.trace-letter-btn small  { font-size:9px; color:var(--muted); }

@media(max-width:700px) {
  .tracing-wrap   { grid-template-columns:1fr; }
  .sounds-grid    { grid-template-columns:1fr 1fr; }
  .counting-options { grid-template-columns:repeat(2,1fr); }
  .quiz-options   { grid-template-columns:1fr; }
}