/* ===========================
   SayKorean — Level 1 Styles
   =========================== */

/* TOPBAR */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  background: #fff;
  border-bottom: 1px solid #e4eaf3;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar .logo { font-size: 18px; font-weight: 600; color: #185FA5; }
.topbar .logo span { color: #D85A30; }
.progress-wrap { flex: 1; max-width: 280px; margin: 0 28px; }
.progress-label { font-size: 11px; color: #888; margin-bottom: 4px; }
.progress-bar { height: 7px; background: #e4eaf3; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: #185FA5; border-radius: 99px; transition: width 0.4s ease; }
.level-badge {
  background: #E6F1FB;
  color: #0C447C;
  font-size: 12px;
  padding: 5px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

/* PAGE LAYOUT */
.page { max-width: 720px; margin: 0 auto; padding: 28px 20px; }

/* SECTION BLOCK */
.section-block {
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
}
.section-block h3 { font-size: 16px; font-weight: 600; color: #1a1a2e; margin-bottom: 4px; }
.section-sub { font-size: 12px; color: #888; margin-bottom: 18px; }

/* TABS */
.tab-row { display: flex; gap: 8px; margin-bottom: 18px; }
.tab-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #e4eaf3;
  background: #f4f7fb;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}
.tab-btn.on { background: #185FA5; color: #fff; border-color: #185FA5; }
.tab-btn:hover:not(.on) { border-color: #378ADD; color: #185FA5; }

/* CHARACTER GRID */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

/* CHARACTER CARD */
.char-card {
  background: #f4f7fb;
  border: 1px solid #e4eaf3;
  border-radius: 10px;
  padding: 12px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;

  /* key: relative so the speaker button can sit in the corner */
  position: relative;
  overflow: visible;
}
.char-card:hover { border-color: #378ADD; background: #f0f6ff; }
.char-card.active { border: 2px solid #185FA5; background: #E6F1FB; }

.char-big { font-size: 28px; color: #185FA5; font-weight: 600; line-height: 1; }
.char-rom { font-size: 10px; color: #378ADD; margin-top: 4px; }
.char-eng { font-size: 10px; color: #aaa; margin-top: 2px; }

/* ---- SPEAKER BUTTON — small, top-right corner ---- */
.speak-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;        /* 1/4 of original ~40px area */
  line-height: 1;
  color: #9bbcdc;
  border-radius: 4px;
  transition: color 0.15s, transform 0.1s;
  z-index: 2;
}
.speak-btn:hover { color: #185FA5; transform: scale(1.2); }
.speak-btn.playing {
  color: #D85A30;
  animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.3); }
}

/* DETAIL BOX */
.detail-box {
  background: #E6F1FB;
  border: 1px solid #B5D4F4;
  border-radius: 10px;
  padding: 18px;
  margin-top: 16px;
  display: none;
}
.detail-box.show { display: flex; align-items: center; gap: 18px; }
.detail-left { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 72px; }
.detail-big { font-size: 54px; color: #185FA5; font-weight: 600; line-height: 1; text-align: center; }
.detail-speak-btn {
  background: #185FA5;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.detail-speak-btn:hover { background: #0C447C; }
.detail-speak-btn.playing { background: #D85A30; }
.detail-info { flex: 1; }
.detail-title { font-size: 13px; font-weight: 600; color: #042C53; margin-bottom: 8px; }
.detail-syllables { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.detail-syl {
  background: #fff;
  border: 1px solid #B5D4F4;
  border-radius: 6px;
  padding: 5px 10px;
  text-align: center;
}
.ds-kr { font-size: 18px; color: #185FA5; font-weight: 600; }
.ds-rom { font-size: 10px; color: #378ADD; }
.detail-tip { font-size: 12px; color: #185FA5; }
.voice-info {
  font-size: 11px;
  color: #378ADD;
  margin-top: 10px;
  padding: 5px 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #B5D4F4;
  display: inline-block;
}

/* QUIZ */
.quiz-box {
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 14px;
  padding: 24px;
}
.quiz-q { font-size: 13px; color: #888; margin-bottom: 4px; }
.quiz-char { font-size: 64px; color: #185FA5; font-weight: 600; text-align: center; margin: 14px 0; }
.quiz-listen-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 18px;
  background: #E6F1FB;
  color: #185FA5;
  border: 2px solid #185FA5;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.quiz-listen-btn:hover { background: #B5D4F4; }
.quiz-listen-btn.playing { background: #185FA5; color: #fff; }

.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-opt {
  background: #f4f7fb;
  border: 1px solid #e4eaf3;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  color: #1a1a2e;
  transition: all 0.15s;
}
.quiz-opt:hover { border-color: #378ADD; background: #E6F1FB; color: #185FA5; }
.quiz-opt.correct { background: #EAF3DE; border-color: #639922; color: #27500A; font-weight: 600; }
.quiz-opt.wrong   { background: #FCEBEB; border-color: #E24B4A; color: #501313; }

.quiz-result { text-align: center; margin-top: 14px; font-size: 14px; font-weight: 600; min-height: 22px; }
.quiz-result.ok { color: #3B6D11; }
.quiz-result.no { color: #A32D2D; }

.quiz-next {
  display: none;
  margin: 14px auto 0;
  background: #185FA5;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.quiz-next:hover { background: #0C447C; }
.quiz-next.show { display: block; }

.score-row { display: flex; gap: 20px; justify-content: center; margin-top: 16px; }
.score-item { text-align: center; }
.score-num { font-size: 22px; font-weight: 700; }
.score-lbl { font-size: 11px; color: #888; margin-top: 2px; }
.score-ok { color: #3B6D11; }
.score-no { color: #A32D2D; }

/* ---- PRONUNCIATION RULES ---- */
.pron-card {
  background: #f8fbff;
  border: 1px solid #D6E6F7;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.pron-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.pron-icon  { font-size: 20px; }
.pron-title { font-size: 14px; font-weight: 700; color: #042C53; }
.pron-desc  { font-size: 12px; color: #6B8DB5; margin-bottom: 12px; line-height: 1.5; }
.pron-examples { display: flex; flex-direction: column; gap: 8px; }
.pron-example {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e4eaf3; border-radius: 8px;
  padding: 8px 12px;
}
.pron-ex-written  { font-size: 18px; font-weight: 700; color: #185FA5; min-width: 44px; }
.pron-ex-arrow    { font-size: 14px; color: #B5D4F4; }
.pron-ex-pron     { font-size: 18px; font-weight: 700; color: #D85A30; min-width: 44px; }
.pron-ex-rom      { font-size: 11px; color: #6B8DB5; min-width: 60px; }
.pron-ex-meaning  { font-size: 12px; color: #888; flex: 1; }
.pron-speak-btn {
  background: none; border: 1.5px solid #D6E6F7; border-radius: 6px;
  padding: 3px 8px; font-size: 12px; cursor: pointer;
  color: #6B8DB5; transition: border-color .15s, color .15s;
}
.pron-speak-btn:hover, .pron-speak-btn.playing { border-color: #378ADD; color: #185FA5; }

/* ---- DICTATION ---- */
.dict-top {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.dict-play-btn {
  background: #185FA5; color: #fff; border: none;
  border-radius: 10px; padding: 10px 22px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.dict-play-btn:hover    { background: #0C447C; }
.dict-play-btn.playing  { background: #D85A30; }
.dict-counter { font-size: 13px; color: #A0BDD9; font-weight: 600; margin-left: auto; }

.dict-slots-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.dict-slots {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.dict-slot {
  width: 72px; height: 72px;
  border: 2.5px dashed #B5D4F4;
  border-radius: 12px;
  background: #f4f8fd;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #185FA5;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.dict-slot.drag-over { border-color: #378ADD; background: #E6F1FB; }
.dict-slot.filled    { border-style: solid; border-color: #185FA5; background: #E6F1FB; }
.dict-slot.correct   { border-color: #22C55E; background: #F0FDF4; color: #166534; }
.dict-slot.wrong     { border-color: #EF4444; background: #FEF2F2; color: #991B1B; }

.dict-cards-area { margin-bottom: 16px; }
.dict-cards-label { font-size: 11px; color: #A0BDD9; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; text-align: center; }
.dict-cards {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  min-height: 56px;
}
.dict-card {
  width: 64px; height: 64px;
  background: #fff; border: 2px solid #D6E6F7;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #185FA5;
  cursor: grab; user-select: none;
  transition: border-color .15s, background .15s, transform .1s, box-shadow .1s;
  box-shadow: 0 2px 6px rgba(55,138,221,.08);
}
.dict-card:hover    { border-color: #378ADD; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(55,138,221,.15); }
.dict-card.selected { border-color: #378ADD; background: #E6F1FB; box-shadow: 0 0 0 3px #B5D4F4; }
.dict-card.dragging { opacity: .4; transform: scale(.95); }

.dict-meaning {
  text-align: center; font-size: 15px; font-weight: 700;
  color: #185FA5; min-height: 24px; margin-bottom: 6px;
}
.dict-result {
  text-align: center; font-size: 15px; font-weight: 700;
  min-height: 24px; margin-bottom: 14px;
}
.dict-result.ok   { color: #22C55E; }
.dict-result.no   { color: #EF4444; }
.dict-result.warn { color: #F59E0B; }

.dict-btns {
  display: flex; justify-content: center; gap: 12px;
}
.dict-check-btn {
  background: #185FA5; color: #fff; border: none;
  border-radius: 10px; padding: 10px 28px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.dict-check-btn:hover { background: #0C447C; }
.dict-next-btn {
  background: #378ADD; color: #fff; border: none;
  border-radius: 10px; padding: 10px 28px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.dict-next-btn:hover { background: #185FA5; }

/* ---- SYLLABLE COMBINER ---- */
.combine-workspace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.combine-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.combine-slot-label { font-size: 11px; color: #888; font-weight: 600; }

.combine-drop {
  width: 90px; height: 90px;
  border: 2px dashed #B5D4F4;
  border-radius: 14px;
  background: #f4f7fb;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.combine-drop.drag-over  { border-color: #185FA5; background: #E6F1FB; }
.combine-drop.filled     { border-style: solid; border-color: #185FA5; background: #E6F1FB; }
.combine-drop-jong       { border-color: #c8dff5; background: #fafcff; }
.combine-drop-jong.filled { border-color: #D85A30; background: #FEF3E2; }
.combine-drop-jong .combine-filled-kr  { color: #D85A30; }
.combine-drop-jong .combine-filled-rom { color: #BA7517; }

.combine-clear-btn {
  font-size: 10px; color: #aaa; background: none; border: none;
  cursor: pointer; margin-top: 4px; padding: 2px 6px;
  border-radius: 4px; transition: color 0.15s, background 0.15s;
}
.combine-clear-btn:hover { color: #E24B4A; background: #FCEBEB; }

.grid-hint { font-size: 10px; color: #bbb; font-weight: 400; margin-left: 4px; }

.combine-hint { font-size: 11px; color: #aaa; text-align: center; line-height: 1.5; pointer-events: none; }

.combine-filled { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.combine-filled-kr  { font-size: 34px; color: #185FA5; font-weight: 700; line-height: 1; }
.combine-filled-rom { font-size: 11px; color: #378ADD; }

.combine-op { font-size: 26px; color: #B5D4F4; font-weight: 300; margin-top: 20px; }

.combine-result-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 100px;
}
.combine-result-char {
  font-size: 64px; color: #185FA5; font-weight: 700; line-height: 1;
  min-width: 80px; text-align: center;
}
.combine-result-rom { font-size: 14px; color: #378ADD; min-height: 20px; }
.combine-speak-btn {
  background: #185FA5; color: #fff; border: none;
  border-radius: 8px; padding: 7px 18px;
  font-size: 13px; cursor: pointer;
  transition: background 0.15s;
}
.combine-speak-btn:hover   { background: #0C447C; }
.combine-speak-btn.playing { background: #D85A30; }

/* Mini source grids */
.combine-grids {
  display: flex; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid #e4eaf3;
  padding-top: 18px; margin-top: 4px;
}
.combine-grid-col { flex: 1; min-width: 200px; }
.combine-grid-label { font-size: 12px; color: #888; font-weight: 600; margin-bottom: 10px; }
.mini-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mini-card {
  width: 52px; height: 52px;
  background: #f4f7fb;
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #185FA5; font-weight: 700;
  cursor: grab;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  user-select: none;
}
.mini-card:hover    { border-color: #378ADD; background: #f0f6ff; transform: scale(1.08); }
.mini-card.selected { border: 2px solid #185FA5; background: #E6F1FB; }
.mini-card.dragging { opacity: 0.4; transform: scale(0.95); }