/* ═══════════════════════════════════════════════════
   ghepcau_cn.css – Ghép Câu tiếng Trung (Phase 6)
   Chỉ chứa style riêng gc-* ; nền tảng dùng chinese.css + quiz_cn.css
   ═══════════════════════════════════════════════════ */

.gc-zone{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
}

/* ── Gợi ý pinyin của câu ── */
.gc-hint-pinyin{
  font-size:15px;
  color:#f0d27a;
  background:rgba(201,162,39,.07);
  border:1px dashed rgba(201,162,39,.35);
  border-radius:10px;
  padding:9px 14px;
  letter-spacing:.4px;
}

/* ── Bản dịch tiếng Việt ── */
.gc-hint-vi{
  font-size:14px;
  color:#8fb8e0;
  background:rgba(56,120,190,.08);
  border:1px dashed rgba(90,150,210,.35);
  border-radius:10px;
  padding:9px 14px;
  line-height:1.5;
}

/* ── Khu vực câu đang ghép ── */
.gc-target{
  min-height:74px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px;
  border-radius:12px;
  background:rgba(10,25,45,.55);
  border:2px dashed rgba(90,150,210,.4);
  transition:border-color .2s;
}
.gc-target.gc-full{ border-style:solid; border-color:rgba(90,200,140,.55); }

.gc-target-empty{
  font-size:13px;
  color:#4a6a8a;
  font-style:italic;
  padding:6px 4px;
}

/* ── Kho chữ ── */
.gc-bank{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 0;
  min-height:52px;
}

/* ── Chip chữ Hán (to, vuông) ── */
.gc-chip{
  appearance:none;
  border:1px solid rgba(90,150,210,.45);
  background:linear-gradient(180deg,#16304e,#102540);
  color:#dcecfb;
  font-size:26px;
  font-weight:600;
  min-width:52px;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  line-height:1.2;
  transition:transform .12s, background .15s, border-color .15s, opacity .15s;
}
.gc-chip:hover{ transform:translateY(-2px); border-color:#6fb1ff; }
.gc-chip:active{ transform:scale(.95); }
.gc-chip:focus-visible{ outline:2px solid #6fb1ff; outline-offset:2px; }

.gc-target .gc-chip{
  background:linear-gradient(180deg,#1d3a5e,#16304e);
  border-color:rgba(120,180,240,.6);
}

/* Chip khóa bởi gợi ý (chữ đầu câu) */
.gc-chip.gc-locked{
  background:linear-gradient(180deg,#3a3113,#2c250e);
  border-color:#c9a227;
  color:#ffe9a0;
  cursor:default;
}
.gc-chip.gc-locked:hover{ transform:none; }

/* Trạng thái sau khi chấm */
.gc-target.gc-right .gc-chip{ border-color:#4ade80; color:#c8f7d8; }
.gc-target.gc-wrong .gc-chip{ border-color:#f87171; color:#ffd6d6; }
.gc-chip[disabled]{ cursor:default; opacity:.85; }
.gc-bank .gc-chip[disabled]{ opacity:.35; }

/* ── Nút hành động ── */
.gc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gc-check{
  flex:1;
  min-width:150px;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:#04121f;
  background:linear-gradient(135deg,#f6d365,#fda085);
  transition:filter .15s, transform .12s;
}
.gc-check:hover{ filter:brightness(1.08); }
.gc-check:active{ transform:scale(.98); }
.gc-check[disabled]{ filter:grayscale(.6); opacity:.5; cursor:default; }

.gc-clear{
  border:1px solid rgba(150,170,200,.35);
  background:transparent;
  color:#9fb8d5;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.gc-clear:hover{ background:rgba(120,160,210,.1); }
.gc-clear[disabled]{ opacity:.4; cursor:default; }

/* ── Công cụ (gợi ý / nghe) ── */
.gc-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gc-hint-btn,
.gc-speak-btn{
  border:1px solid rgba(201,162,39,.5);
  background:rgba(201,162,39,.08);
  color:#f0d27a;
  border-radius:9px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s;
}
.gc-hint-btn:hover{ background:rgba(201,162,39,.18); }
.gc-hint-btn[disabled]{ opacity:.4; cursor:default; }
.gc-speak-btn{
  border-color:rgba(90,150,210,.5);
  background:rgba(56,120,190,.08);
  color:#8fb8e0;
}
.gc-speak-btn:hover{ background:rgba(56,120,190,.18); }

/* ── Ô lộ đáp án sau khi chấm ── */
.gc-reveal{
  display:none;
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.7;
  background:rgba(10,25,45,.6);
  border:1px solid rgba(90,150,210,.3);
  color:#c9ddf2;
}
.gc-reveal.show{ display:block; }
.gc-reveal .gc-cn{ font-size:22px; color:#fff; font-weight:700; }
.gc-reveal .gc-py{ color:#f0d27a; }
.gc-reveal .gc-word{ color:#6fb1ff; font-weight:700; }

/* ── Mobile ── */
@media (max-width:600px){
  .gc-chip{ font-size:22px; min-width:46px; padding:7px 10px; }
  .gc-check{ min-width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .gc-chip, .gc-check{ transition:none; }
}