/* ============================================================
   TIER ENGINE — generic per-location styles shared by every registered
   tier (Tier 2, 3, 4, ...). Loaded after styles.css. The accordion shell,
   quiz modal, progress bars, and completion banner all reuse styles.css's
   .accordion- / .drill-btn / .progress- / .complete-banner / .quiz- classes
   — this file only covers what those don't: the sentence card grid and its
   breakdown panel.
   ============================================================ */
.te-card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(105px,1fr)); gap:6px; }
.te-card{
  border:1px solid rgba(238,231,216,0.2);
  border-radius:8px;
  padding:6px 7px;
  background: rgba(0,0,0,0.15);
  text-align:center;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  cursor:pointer;
}
.te-card.locked{ opacity:0.45; cursor:default; }
.te-card .g{ font-size:0.92rem; margin-bottom:2px; line-height:1.25; }
.te-card .en{ font-size:0.62rem; color: var(--chalk-dim); line-height:1.2; }
.te-card button{
  margin-top:4px; font-size:0.64rem; padding:3px 6px; border-radius:5px; border:none;
  background: var(--yellow); color:#2a2110; cursor:pointer; font-weight:600;
}
.te-card button:disabled{ background: rgba(238,231,216,0.15); color: var(--chalk-dim); cursor:not-allowed; font-weight:normal; }
.te-breakdown-panel{
  margin-bottom:8px; padding:7px 9px; border-radius:8px;
  border:1px solid rgba(238,231,216,0.18); background: rgba(0,0,0,0.18);
}
.te-breakdown-panel .bp-title{ font-size:0.75rem; color: var(--chalk-dim); margin-bottom:5px; }
.te-breakdown-panel .bp-roman{ color: var(--blue); font-style:italic; }
.te-breakdown-panel .bp-chunks{ display:flex; flex-wrap:wrap; gap:6px; }
.te-chunk-btn{
  border:1px solid rgba(238,231,216,0.25); border-radius:8px;
  background: rgba(238,231,216,0.06); color: var(--chalk);
  padding:5px 9px; font-size:0.8rem; cursor:pointer; text-align:left;
}
.te-chunk-btn:hover{ border-color: var(--blue); }
.te-chunk-btn .gloss{ font-size:0.64rem; color: var(--blue); margin-left:5px; }
.te-breakdown-panel .bp-callback{ margin-top:5px; font-size:0.64rem; color: var(--blue); }
.te-review-note{
  display:none; margin-bottom:8px; padding:7px 10px; border-radius:8px;
  background: rgba(143,214,148,0.1); border:1px solid #8fd694;
  font-size:0.72rem; color: var(--chalk);
}
.te-review-note.show{ display:block; }

/* ============================================================
   DIALOGUE MODE (Tier 3+) — NPC-line + reply cards, forced-recall "???",
   speaker-icon breakdown panel, scene banner, and the extra lines the
   shared quiz overlay shows for "what do you say back?" questions.
   Visual standard: NPC line = white, reply = yellow, romanization = blue
   italic (bp-roman), Learn button = yellow, 5 cards per row (2 on phones).
   ============================================================ */
.te-card-grid.dlg{ grid-template-columns: repeat(5, 1fr); }
@media (max-width:560px){ .te-card-grid.dlg{ grid-template-columns: repeat(2, 1fr); } }
.te-card.dlg{ position:relative; min-height:82px; padding:6px; }
.te-card.dlg.next{ border-color: var(--blue); background: rgba(127,166,176,0.1); }
.te-card.dlg.learned{
  border-color: var(--yellow); background: rgba(232,193,90,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
.te-card.dlg.learned:active{ transform: scale(0.96); }
.te-card.dlg.learned.pulse{ box-shadow: 0 0 0 2px var(--yellow); }
.te-card.dlg .dlg-npc{ font-size:0.74rem; color: var(--chalk); margin-bottom:3px; line-height:1.2; }
.te-card.dlg .dlg-reply{ font-size:0.74rem; font-weight:600; line-height:1.25; color: var(--yellow); }
.te-card.dlg.locked .dlg-reply::before{ content:"🔒 "; }
.te-card.dlg button{ width:100%; margin-top:5px; font-size:0.6rem; padding:3px 4px; }
.te-breakdown-panel .dlg-npc-block{
  padding-bottom:7px; margin-bottom:7px; border-bottom:1px dashed rgba(238,231,216,0.2);
}
.te-breakdown-panel .dlg-npc-title{ font-size:0.8rem; color: var(--chalk-dim); margin-bottom:5px; }
.te-breakdown-panel .dlg-npc-title b{ color: var(--chalk); font-weight:600; }
.te-breakdown-panel .dlg-reply-title{ font-size:0.8rem; font-weight:600; margin-bottom:5px; color: var(--yellow); }
.te-breakdown-panel .dlg-reply-title em{ color: var(--chalk-dim); font-weight:normal; }
.te-dlg-hint{ text-align:center; font-size:0.7rem; color: var(--chalk-dim); margin-bottom:8px; }
.te-npc-banner{
  display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:8px 12px; border-radius:10px;
  background: rgba(232,193,90,0.08); border:1px solid rgba(232,193,90,0.25);
  font-size:0.78rem; color: var(--chalk-dim);
}
.te-npc-banner .avatar{ font-size:1.6rem; }
.quiz-box .quiz-npc-en{ font-size:0.78rem; color: var(--chalk-dim); margin-bottom:14px; }
.quiz-box .quiz-ask{ font-size:0.8rem; color: var(--chalk-dim); margin-bottom:8px; }

/* Small one-line note next to a scene's name ("30 TP carried over from Tier 2") */
.te-carry-note{ font-size:0.68rem; font-weight:normal; color: var(--chalk-dim); margin-left:8px; }
.te-carry-note:empty{ display:none; }

/* Tier headings (top of every tier's board) and the small theme sub-label on
   each tier tab: "Tier 1  Word learning", "Tier 2  Travel", ...
   Vertical space is expensive (it's directly tied to scrolling), so a tab is
   ONE line — name and theme side by side, never stacked. The tabs share the
   row by content width (not equal thirds) so the longer themes get room. */
.tier-heading{ text-align:center; font-size:0.95rem; font-weight:600; color: var(--yellow); margin-bottom:8px; }
.tier-tabs .tier-tab{ flex:1 1 auto; white-space:nowrap; padding-left:8px; padding-right:8px; }
.tier-tab .tier-tab-name{ display:inline; }
.tier-tab .tier-tab-sub{ display:inline; margin:0 0 0 6px; font-size:0.68rem; font-weight:normal; color: var(--chalk-dim); }
.tier-tab.active .tier-tab-sub{ color: var(--yellow); opacity:0.85; }
@media (max-width:480px){
  /* Phones: scale the text with the screen width so all three tabs stay on one line */
  .tier-tabs .tier-tab{ padding-left:4px; padding-right:4px; font-size: clamp(0.68rem, 3.2vw, 0.85rem); }
  .tier-tab .tier-tab-sub{ margin-left:4px; font-size: clamp(0.5rem, 2.5vw, 0.68rem); }
}