/* ── Custom Properties ───────────────────────────────── */
:root {
  --bg:          #f0fdf1;   /* mint-sage page background (matches Stitch design) */
  --surface:     #ffffff;   /* card/panel background */
  --primary:     #146a65;   /* teal — primary action */
  --primary-dk:  #005e58;   /* darker teal for hover */
  --correct:     #6dc87a;   /* soft green — correct feedback */
  --wrong:       #f08080;   /* soft coral red — wrong feedback */
  --accent:      #ffdbd0;   /* peach — secondary/decoration accent */
  --text:        #22372a;   /* near-black for readability */
  --text-muted:  #4e6455;   /* secondary text */
  --radius:      14px;      /* standard border radius */
  --shadow:      0 2px 12px rgba(34,55,42,0.08);
}

/* ── Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Rubik', 'Arial Hebrew', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  direction: rtl;
}

#root { min-height: 100vh; display: flex; flex-direction: column; }

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ── Entry Screen ────────────────────────────────────── */
.entry-screen { background: var(--bg); }

.entry-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 2.5rem;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.game-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  direction: ltr;
}

.game-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: -0.8rem;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.name-input {
  border: 2px solid #a0b8a6;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  direction: rtl;
  background: #e8f8ea;
  color: var(--text);
  transition: border-color 0.2s;
}
.name-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
}

.grade-selector {
  display: flex;
  gap: 0.75rem;
}

.grade-btn {
  flex: 1;
  padding: 0.65rem 0;
  border: 2px solid #a0b8a6;
  border-radius: 10px;
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.grade-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
}
.grade-btn:not(.active):hover { border-color: var(--primary); color: var(--text); }

.start-btn {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #672f1c;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.start-btn:hover:not(:disabled) { background: #ffc8b8; }
.start-btn:active:not(:disabled) { transform: scale(0.97); }
.start-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Exercise Screen ─────────────────────────────────── */
.exercise-screen {
  background: var(--bg);
  gap: 1.25rem;
  justify-content: flex-start;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

/* Answer grid — 2x2, RTL-safe CSS Grid (NOT flexbox) */
.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 480px;
}

.answer-btn {
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid #a0b8a6;
  border-radius: 12px;
  background: var(--surface);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  direction: rtl;
}
.answer-btn:hover:not(:disabled) { border-color: var(--primary); background: #e0f3e3; }
.answer-btn.correct  { background: #d4f5d8; border-color: var(--correct); color: #1a6e29; }
.answer-btn.wrong    { background: #fde8e8; border-color: var(--wrong); color: #8b1a1a; }
.answer-btn:disabled { cursor: default; }

/* ── Animations ──────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

@keyframes popIn {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.75; }
}

.shake   { animation: shake 0.4s ease; }
.pop-in  { animation: popIn 0.3s ease; }
.pulsing { animation: pulse 0.8s ease infinite; }

/* ── Complete Screen ─────────────────────────────────── */
.complete-screen { background: var(--bg); }

/* ── Exercise Screen — extended ──────────────────────── */
.question-counter {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
  align-self: flex-end;
  padding-left: 0.5rem;
}

/* English text card */
.text-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.english-text {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  text-align: center;
  direction: ltr;
}

/* TTS button */
.tts-btn {
  background: var(--primary);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 1.4rem;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.tts-btn:hover  { background: var(--primary-dk); }
.tts-btn:active { transform: scale(0.93); }
/* .pulsing class is already defined above */

/* Options label */
.options-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  align-self: flex-start;
  max-width: 480px;
  width: 100%;
}

/* .answer-grid and .answer-btn are already defined above */

/* ── Feedback ─────────────────────────────────────────── */
.feedback-correct,
.feedback-wrong {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.feedback-correct { border: 2px solid var(--correct); }
.feedback-wrong   { border: 2px solid var(--wrong); }

.star-burst { font-size: 2rem; animation: popIn 0.35s ease; }

.feedback-msg {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.feedback-msg.encouragement { color: var(--text-muted); font-weight: 500; }

/* Next button */
.next-btn {
  padding: 0.65rem 2.5rem;
  border: none;
  border-radius: 10px;
  background: var(--correct);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  direction: ltr;
}
.next-btn:hover  { filter: brightness(1.08); }
.next-btn:active { transform: scale(0.96); }
.next-btn--neutral { background: var(--primary); }

/* Loading / error */
.loading-msg, .error-msg {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
  padding: 3rem 1rem;
}
.error-msg { color: var(--wrong); }

/* ── Level Complete Screen ─────────────────────────── */
.complete-screen {
  background: var(--bg);
}

.complete-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 2rem 2.5rem;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.complete-celebration {
  font-size: 3rem;
  animation: popIn 0.5s ease;
}

.complete-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
}

.score-display {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-muted);
  direction: ltr;
}
.score-number { font-size: 2.5rem; font-weight: 700; color: var(--text); }
.score-sep    { font-size: 1.1rem; }
.score-total  { font-size: 2.5rem; font-weight: 700; color: var(--text-muted); }

/* Star rating */
.star-row {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  justify-content: center;
}
.star { font-size: 2.2rem; }
.star--filled { filter: drop-shadow(0 0 4px rgba(255, 180, 0, 0.5)); }
.star--empty  { opacity: 0.3; filter: grayscale(1); }

.complete-message {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  padding: 0 0.5rem;
}

/* Action buttons */
.complete-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.action-btn {
  width: 100%;
  padding: 0.85rem;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.action-btn:active { transform: scale(0.97); }

.action-btn--primary   { background: var(--primary); color: #fff; }
.action-btn--primary:hover   { background: var(--primary-dk); }
.action-btn--secondary { background: #e8eaf6; color: var(--text-muted); }
.action-btn--secondary:hover { background: #d8daee; }

/* ── Exercise Header ─────────────────────────────────── */
.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 480px;
}
.type-badge {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: #e0f3e3;
  color: var(--primary);
  font-weight: 600;
}

/* ── Question instruction ────────────────────────────── */
.question-instruction {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  max-width: 480px;
  width: 100%;
}

/* ── Type 1: Focus word highlight ────────────────────── */
.focus-word {
  background: #fff3cd;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  color: #7a5200;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: #e8a800;
  text-decoration-thickness: 2px;
}

/* ── Type 3: Blank sentence ─────────────────────────── */
.blank-sentence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  line-height: 2;
}
.blank-zone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 4px 14px;
  border: 2px dashed #a0b8a6;
  border-radius: 10px;
  background: #f5fdf6;
  color: #a0b8a6;
  font-style: italic;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 4px;
}
.blank-zone.blank-ready {
  background: #fffbe6;
  border: 2px solid #e8a800;
  color: #7a5200;
  font-style: normal;
  font-weight: 700;
}
.blank-zone.blank-correct {
  background: #d4f5d8;
  border: 2px solid var(--correct);
  color: #1a6e29;
  font-style: normal;
  font-weight: 700;
  cursor: default;
}
.blank-zone.blank-wrong {
  background: #fde8e8;
  border: 2px solid var(--wrong);
  color: #8b1a1a;
  font-style: normal;
  font-weight: 700;
  animation: shake 0.4s ease;
  cursor: default;
}

/* Type 3 blank: underline style (replaces old boxed blank-zone) */
.blank-underline {
  display: inline-block;
  min-width: 90px;
  border-bottom: 3px solid var(--primary);
  padding: 2px 8px 0;
  margin: 0 4px;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  vertical-align: bottom;
  line-height: 1.6;
}
.blank-underline:empty::before { content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0'; }
.blank-underline.blank-filled  { border-bottom-color: #e8a800; color: #7a5200; }
.blank-underline.blank-correct { border-bottom-color: var(--correct); color: #1a6e29; cursor: default; }
.blank-underline.blank-wrong   { border-bottom-color: var(--wrong); color: #8b1a1a; cursor: default; animation: shake 0.4s ease; }

/* Type 3 word options: use answer-grid with ltr direction */
.answer-grid--ltr .answer-btn { direction: ltr; }
.answer-btn--selected { background: #fffbe6 !important; border-color: #e8a800 !important; color: #7a5200 !important; }

/* Floating drag ghost */
.drag-ghost {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  padding: 10px 20px;
  background: #fffbe6;
  border: 2px solid #e8a800;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #7a5200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  direction: ltr;
}

/* ── Type 4: Build sentence ──────────────────────────── */
.answer-builder {
  min-height: 72px;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 2px dashed #a0b8a6;
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  direction: rtl;
  transition: border-color 0.2s, background 0.2s;
}
.answer-builder.builder-correct {
  background: #d4f5d8;
  border: 2px solid var(--correct);
}
.answer-builder.builder-wrong {
  background: #fde8e8;
  border: 2px solid var(--wrong);
  animation: shake 0.4s ease;
}
.builder-placeholder {
  color: #a0b8a6;
  font-style: italic;
  font-size: 0.9rem;
}

/* Placed words in builder (Stitch-style: white box, teal bottom border) */
.placed-word {
  display: inline-block;
  unicode-bidi: isolate;
  padding: 8px 16px;
  background: var(--surface);
  border: 1.5px solid #a0b8a6;
  border-bottom: 4px solid var(--primary);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  direction: rtl;
  box-shadow: 0 2px 6px rgba(20,106,101,0.10);
  transition: all 0.15s;
  user-select: none;
}
.placed-word--draggable { cursor: grab; }
.placed-word--draggable:active { cursor: grabbing; }
.placed-word--draggable:hover  { border-color: var(--primary); border-bottom-color: var(--primary); background: #e0f3e3; }
.placed-correct { border-bottom-color: var(--correct); }
.placed-wrong   { border-bottom-color: var(--wrong); }

/* Drop position indicator during reorder drag */
.drop-indicator {
  width: 3px;
  height: 40px;
  background: var(--primary);
  border-radius: 3px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Type 4 word bank: 3-column grid */
.answer-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.answer-btn--used {
  background: #f0f4f1 !important;
  border-color: #d8ddd9 !important;
  color: #b8c4bb !important;
  cursor: default !important;
}

/* Check button */
.check-btn {
  padding: 0.75rem 2.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.check-btn:hover:not(:disabled)  { background: var(--primary-dk); }
.check-btn:active:not(:disabled) { transform: scale(0.97); }
.check-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── CAMPAIGN MAP ─────────────────────────────────────────────────────────── */

.campaign-map-screen {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #e4f5e5 0%, #f0fdf1 50%);
}

.map-header {
  flex-shrink: 0;
  background: #146a65;
  color: #fff;
  font-family: 'Rubik', sans-serif;
  padding: 0.9rem 1.25rem 0.7rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(20, 106, 101, 0.25);
}

.map-header-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.map-header-sub {
  font-size: 0.78rem;
  opacity: 0.8;
  margin-top: 0.1rem;
}

.map-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Rubik', sans-serif;
  color: #146a65;
  font-size: 1.2rem;
}

/* Scrollable area — contains the path column */
.map-scroll-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 4rem;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* The absolutely-positioned path column */
.map-path-col {
  position: relative;
  width: 300px;
  flex-shrink: 0;
}

/* SVG fills the whole column */
.map-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

/* Milestone emoji badge */
.map-milestone-badge {
  position: absolute;
  z-index: 5;
  font-size: 1.6rem;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 2px solid #d1ead2;
  transform: rotate(10deg);
}

/* Level bubble — absolutely positioned via inline style */
.level-bubble {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  z-index: 10;
  transition: transform 0.12s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
}

.level-bubble:active { transform: scale(0.91); }

.bubble-number {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.bubble-lock {
  font-size: 0.75rem;
  margin-top: 2px;
  opacity: 0.65;
}

/* Locked: grey */
.bubble-locked {
  background: #d1d5db;
  color: #9ca3af;
  box-shadow: none;
}

/* Active: teal + pulse glow */
.bubble-active {
  background: #146a65;
  color: #fff;
  box-shadow: 0 4px 16px rgba(20, 106, 101, 0.45);
  animation: pulse-glow 1.8s ease-out infinite;
}

/* Completed: peach */
.bubble-complete {
  background: #ffdbd0;
  color: #146a65;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0    rgba(20, 106, 101, 0.60); }
  60%  { box-shadow: 0 0 0 14px rgba(20, 106, 101, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(20, 106, 101, 0);    }
}

/* Stars row — rendered below the bubble, outside it */
.bubble-stars {
  position: absolute;
  z-index: 11;
  display: flex;
  gap: 3px;
  font-size: 0.95rem;
}

.star-on { color: #f59e0b; }