/* ============================================================
   Bộ Thủ (Radical Explorer) – Modern Interactive Design
   Matches visual quality of pinyin_chart.css + landing.css
   ============================================================ */

/* ── Category colour palette ───────────────────────────────── */
:root {
  /* thân thể – red (body parts: 心口手) */
  --cat-than-the:        #c62828;
  --cat-than-the-bg:     #fff5f5;
  --cat-than-the-light:  #ffcdd2;
  --cat-than-the-grad:   linear-gradient(135deg, #c62828, #e53935);

  /* hành động – orange (actions: 力行走) */
  --cat-hanh-dong:       #e65100;
  --cat-hanh-dong-bg:    #fff8f0;
  --cat-hanh-dong-light: #ffccbc;
  --cat-hanh-dong-grad:  linear-gradient(135deg, #e65100, #ff7043);

  /* thiên nhiên – green (nature: 木水火山) */
  --cat-thien-nhien:       #2e7d32;
  --cat-thien-nhien-bg:    #f0fdf4;
  --cat-thien-nhien-light: #a5d6a7;
  --cat-thien-nhien-grad:  linear-gradient(135deg, #1b5e20, #43a047);

  /* con người – blue (people: 人女子) */
  --cat-con-nguoi:       #1565c0;
  --cat-con-nguoi-bg:    #eff6ff;
  --cat-con-nguoi-light: #90caf9;
  --cat-con-nguoi-grad:  linear-gradient(135deg, #0d47a1, #1e88e5);

  /* vật thể – amber-brown (objects: 土石金) */
  --cat-vat-the:       #6d4c41;
  --cat-vat-the-bg:    #fdf8f0;
  --cat-vat-the-light: #d7ccc8;
  --cat-vat-the-grad:  linear-gradient(135deg, #4e342e, #8d6e63);

  /* thực vật – lime green (plants: 草竹木) */
  --cat-thuc-vat:       #558b2f;
  --cat-thuc-vat-bg:    #f5fff0;
  --cat-thuc-vat-light: #c5e1a5;
  --cat-thuc-vat-grad:  linear-gradient(135deg, #33691e, #7cb342);

  /* động vật – purple (animals: 虫鱼马) */
  --cat-dong-vat:       #6a1b9a;
  --cat-dong-vat-bg:    #fdf4ff;
  --cat-dong-vat-light: #ce93d8;
  --cat-dong-vat-grad:  linear-gradient(135deg, #4a148c, #8e24aa);

  /* nét & số – teal */
  --cat-net-so:       #0f766e;
  --cat-net-so-bg:    #ecfeff;
  --cat-net-so-light: #99f6e4;
  --cat-net-so-grad:  linear-gradient(135deg, #0f766e, #0ea5a4);

  /* trừu tượng – warm brown */
  --cat-truu-tuong:       #7c2d12;
  --cat-truu-tuong-bg:    #fff7ed;
  --cat-truu-tuong-light: #fed7aa;
  --cat-truu-tuong-grad:  linear-gradient(135deg, #7c2d12, #c2410c);

  /* thuộc tính – indigo */
  --cat-thuoc-tinh:       #1d4ed8;
  --cat-thuoc-tinh-bg:    #eff6ff;
  --cat-thuoc-tinh-light: #bfdbfe;
  --cat-thuoc-tinh-grad:  linear-gradient(135deg, #1e40af, #2563eb);

  /* khác – slate (misc: 口言) */
  --cat-khac:       #37474f;
  --cat-khac-bg:    #f5f7f9;
  --cat-khac-light: #b0bec5;
  --cat-khac-grad:  linear-gradient(135deg, #263238, #546e7a);
}

/* ── Fade-in animation ─────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .45s ease both; }


/* ── Hero ───────────────────────────────────────────────────── */
.radical-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  color: #fff;
  border-radius: 1.25rem;
  padding: 2.75rem 2rem 3rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.radical-hero::before {
  /* subtle ink-wash texture */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(99,102,241,.18) 0, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(244,63,94,.10) 0, transparent 50%);
  pointer-events: none;
}
.radical-hero h1 { font-weight: 900; letter-spacing: -.5px; }
.radical-hero .lead { opacity: .85; }

/* Decorative CJK glyph in the hero */
.radical-hero-deco {
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11rem;
  line-height: 1;
  opacity: .07;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

/* Stat badges in hero */
.radical-hero .stat-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 2rem;
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 600;
}


/* ── Sticky filter bar ──────────────────────────────────────── */
.radical-filter-bar {
  position: sticky;
  top: 58px;                /* clear the navbar */
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  padding: .55rem 0;
  margin-bottom: 2rem;
  display: flex;
  overflow-x: auto;
  gap: .45rem;
  scrollbar-width: none;
}
.radical-filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  flex-shrink: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 2rem;
  background: #fff;
  color: #475569;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .9rem;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.filter-btn:first-child { margin-left: .25rem; }
.filter-btn:last-child  { margin-right: .25rem; }
.filter-btn:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); }
.filter-btn.active { color: #fff; border-color: transparent; transform: translateY(-1px); }

/* Active colour per category */
.filter-btn.active[data-cat="thân thể"]    { background: var(--cat-than-the-grad); box-shadow: 0 4px 12px rgba(198,40,40,.3); }
.filter-btn.active[data-cat="hành động"]   { background: var(--cat-hanh-dong-grad); box-shadow: 0 4px 12px rgba(230,81,0,.3); }
.filter-btn.active[data-cat="thiên nhiên"] { background: var(--cat-thien-nhien-grad); box-shadow: 0 4px 12px rgba(46,125,50,.3); }
.filter-btn.active[data-cat="con người"]   { background: var(--cat-con-nguoi-grad); box-shadow: 0 4px 12px rgba(21,101,192,.3); }
.filter-btn.active[data-cat="vật thể"]     { background: var(--cat-vat-the-grad); box-shadow: 0 4px 12px rgba(109,76,65,.3); }
.filter-btn.active[data-cat="thực vật"]    { background: var(--cat-thuc-vat-grad); box-shadow: 0 4px 12px rgba(85,139,47,.3); }
.filter-btn.active[data-cat="động vật"]    { background: var(--cat-dong-vat-grad); box-shadow: 0 4px 12px rgba(106,27,154,.3); }
.filter-btn.active[data-cat="nét & số"]    { background: var(--cat-net-so-grad); box-shadow: 0 4px 12px rgba(15,118,110,.3); }
.filter-btn.active[data-cat="trừu tượng"]  { background: var(--cat-truu-tuong-grad); box-shadow: 0 4px 12px rgba(124,45,18,.3); }
.filter-btn.active[data-cat="thuộc tính"]  { background: var(--cat-thuoc-tinh-grad); box-shadow: 0 4px 12px rgba(29,78,216,.3); }
.filter-btn.active[data-cat="khác"]        { background: var(--cat-khac-grad); box-shadow: 0 4px 12px rgba(55,71,79,.3); }
.filter-btn.active[data-cat="all"]         { background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 4px 12px rgba(79,70,229,.3); }

/* Category counter badge inside filter button */
.cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.08);
  border-radius: 1rem;
  font-size: .72rem;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
}
.filter-btn.active .cat-count { background: rgba(255,255,255,.25); }


/* ── Category section heading ──────────────────────────────── */
.category-section { margin-bottom: 3rem; }
.category-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid transparent;
}

/* Coloured dot icon for each category */
.cat-icon-dot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.cat-icon-dot.than-the    { background: var(--cat-than-the-grad); }
.cat-icon-dot.hanh-dong   { background: var(--cat-hanh-dong-grad); }
.cat-icon-dot.thien-nhien { background: var(--cat-thien-nhien-grad); }
.cat-icon-dot.con-nguoi   { background: var(--cat-con-nguoi-grad); }
.cat-icon-dot.vat-the     { background: var(--cat-vat-the-grad); }
.cat-icon-dot.thuc-vat    { background: var(--cat-thuc-vat-grad); }
.cat-icon-dot.dong-vat    { background: var(--cat-dong-vat-grad); }
.cat-icon-dot.net-so      { background: var(--cat-net-so-grad); }
.cat-icon-dot.truu-tuong  { background: var(--cat-truu-tuong-grad); }
.cat-icon-dot.thuoc-tinh  { background: var(--cat-thuoc-tinh-grad); }
.cat-icon-dot.khac        { background: var(--cat-khac-grad); }

.category-section.than-the    .category-heading { border-bottom-color: var(--cat-than-the-light); }
.category-section.hanh-dong   .category-heading { border-bottom-color: var(--cat-hanh-dong-light); }
.category-section.thien-nhien .category-heading { border-bottom-color: var(--cat-thien-nhien-light); }
.category-section.con-nguoi   .category-heading { border-bottom-color: var(--cat-con-nguoi-light); }
.category-section.vat-the     .category-heading { border-bottom-color: var(--cat-vat-the-light); }
.category-section.thuc-vat    .category-heading { border-bottom-color: var(--cat-thuc-vat-light); }
.category-section.dong-vat    .category-heading { border-bottom-color: var(--cat-dong-vat-light); }
.category-section.net-so      .category-heading { border-bottom-color: var(--cat-net-so-light); }
.category-section.truu-tuong  .category-heading { border-bottom-color: var(--cat-truu-tuong-light); }
.category-section.thuoc-tinh  .category-heading { border-bottom-color: var(--cat-thuoc-tinh-light); }
.category-section.khac        .category-heading { border-bottom-color: var(--cat-khac-light); }


/* ── Radical tile grid ─────────────────────────────────────── */
.radical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .75rem;
}

/* Individual radical tile */
.radical-tile {
  position: relative;
  border-radius: 1rem;
  border: 1.5px solid transparent;
  padding: .75rem .5rem .6rem;
  text-align: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
}
.radical-tile:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,.13);
}

/* Category-tinted backgrounds and border colours */
.radical-tile.than-the    { background: var(--cat-than-the-bg); }
.radical-tile.hanh-dong   { background: var(--cat-hanh-dong-bg); }
.radical-tile.thien-nhien { background: var(--cat-thien-nhien-bg); }
.radical-tile.con-nguoi   { background: var(--cat-con-nguoi-bg); }
.radical-tile.vat-the     { background: var(--cat-vat-the-bg); }
.radical-tile.thuc-vat    { background: var(--cat-thuc-vat-bg); }
.radical-tile.dong-vat    { background: var(--cat-dong-vat-bg); }
.radical-tile.net-so      { background: var(--cat-net-so-bg); }
.radical-tile.truu-tuong  { background: var(--cat-truu-tuong-bg); }
.radical-tile.thuoc-tinh  { background: var(--cat-thuoc-tinh-bg); }
.radical-tile.khac        { background: var(--cat-khac-bg); }

.radical-tile:hover.than-the    { border-color: var(--cat-than-the); }
.radical-tile:hover.hanh-dong   { border-color: var(--cat-hanh-dong); }
.radical-tile:hover.thien-nhien { border-color: var(--cat-thien-nhien); }
.radical-tile:hover.con-nguoi   { border-color: var(--cat-con-nguoi); }
.radical-tile:hover.vat-the     { border-color: var(--cat-vat-the); }
.radical-tile:hover.thuc-vat    { border-color: var(--cat-thuc-vat); }
.radical-tile:hover.dong-vat    { border-color: var(--cat-dong-vat); }
.radical-tile:hover.net-so      { border-color: var(--cat-net-so); }
.radical-tile:hover.truu-tuong  { border-color: var(--cat-truu-tuong); }
.radical-tile:hover.thuoc-tinh  { border-color: var(--cat-thuoc-tinh); }
.radical-tile:hover.khac        { border-color: var(--cat-khac); }

/* Radical glyph in tile */
.radical-tile .tile-glyph {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: .25rem;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "STSong", serif;
}
.than-the    .tile-glyph { color: var(--cat-than-the); }
.hanh-dong   .tile-glyph { color: var(--cat-hanh-dong); }
.thien-nhien .tile-glyph { color: var(--cat-thien-nhien); }
.con-nguoi   .tile-glyph { color: var(--cat-con-nguoi); }
.vat-the     .tile-glyph { color: var(--cat-vat-the); }
.thuc-vat    .tile-glyph { color: var(--cat-thuc-vat); }
.dong-vat    .tile-glyph { color: var(--cat-dong-vat); }
.net-so      .tile-glyph { color: var(--cat-net-so); }
.truu-tuong  .tile-glyph { color: var(--cat-truu-tuong); }
.thuoc-tinh  .tile-glyph { color: var(--cat-thuoc-tinh); }
.khac        .tile-glyph { color: var(--cat-khac); }

/* Canonical form badge (shown when radical ≠ canonical) */
.tile-canonical {
  position: absolute;
  top: .3rem;
  right: .35rem;
  font-size: .6rem;
  color: #94a3b8;
  font-family: "Noto Serif CJK SC", "STSong", serif;
}

/* Meaning line */
.tile-meaning {
  font-size: .68rem;
  color: #64748b;
  line-height: 1.2;
  margin-bottom: .2rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Word count pill */
.tile-count {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 1rem;
  padding: .05rem .45rem;
  color: #fff;
}

/* Readings below word count */
.tile-readings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: .1rem;
  line-height: 1.1;
}
.tile-pinyin {
  font-size: .75rem;
  color: #5b8fd9;
  font-weight: 500;
}
.tile-vi-pron {
  font-size: .62rem;
  color: #999;
}
.than-the    .tile-count { background: var(--cat-than-the); }
.hanh-dong   .tile-count { background: var(--cat-hanh-dong); }
.thien-nhien .tile-count { background: var(--cat-thien-nhien); }
.con-nguoi   .tile-count { background: var(--cat-con-nguoi); }
.vat-the     .tile-count { background: var(--cat-vat-the); }
.thuc-vat    .tile-count { background: var(--cat-thuc-vat); }
.dong-vat    .tile-count { background: var(--cat-dong-vat); }
.net-so      .tile-count { background: var(--cat-net-so); }
.truu-tuong  .tile-count { background: var(--cat-truu-tuong); }
.thuoc-tinh  .tile-count { background: var(--cat-thuoc-tinh); }
.khac        .tile-count { background: var(--cat-khac); }


/* ── Detail modal ───────────────────────────────────────────── */
#radicalModal .modal-content {
  border-radius: 1.25rem;
  border: none;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

/* Coloured modal header strip */
#radicalModal .modal-header {
  border-radius: 0;
  border-bottom: none;
  padding: 1.5rem 1.75rem 1.25rem;
}

.modal-header-than-the    { background: var(--cat-than-the-grad); color: #fff; }
.modal-header-hanh-dong   { background: var(--cat-hanh-dong-grad); color: #fff; }
.modal-header-thien-nhien { background: var(--cat-thien-nhien-grad); color: #fff; }
.modal-header-con-nguoi   { background: var(--cat-con-nguoi-grad); color: #fff; }
.modal-header-vat-the     { background: var(--cat-vat-the-grad); color: #fff; }
.modal-header-thuc-vat    { background: var(--cat-thuc-vat-grad); color: #fff; }
.modal-header-dong-vat    { background: var(--cat-dong-vat-grad); color: #fff; }
.modal-header-net-so      { background: var(--cat-net-so-grad); color: #fff; }
.modal-header-truu-tuong  { background: var(--cat-truu-tuong-grad); color: #fff; }
.modal-header-thuoc-tinh  { background: var(--cat-thuoc-tinh-grad); color: #fff; }
.modal-header-khac        { background: var(--cat-khac-grad); color: #fff; }

/* Modal glyph (radical character, oversized) */
.modal-radical-glyph {
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 900;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "STSong", serif;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Radical pinyin + Sino-Vietnamese in modal header */
.modal-radical-readings {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}
.modal-radical-pinyin {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: .01em;
}
.modal-radical-vi-pron {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}

/* Stroke count badge */
.stroke-badge {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2rem;
  padding: .25rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.modal-cat-badge {
  background: rgba(255,255,255,.92);
  color: #0f172a;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  padding: .22rem .62rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: none;
}


/* ── HanziWriter rice-grid ──────────────────────────────────── */
.hw-rice-grid {
  position: relative;
  display: inline-block;
  border: 2px solid #e2e8f0;
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
}
/* rice pattern lines drawn via CSS outlines */
.hw-rice-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,200,200,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,200,200,.4) 1px, transparent 1px),
    linear-gradient(rgba(200,200,200,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,200,200,.2) 1px, transparent 1px);
  background-size: 50% 50%, 50% 50%, 100% 100%, 100% 100%;
  pointer-events: none;
}
/* diagonal rice lines */
.hw-rice-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(200,200,200,.18) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(200,200,200,.18) 1px, transparent 1px);
  background-size: 100% 100%;
  pointer-events: none;
}
#radical-hw-container {
  display: block;
  width: 160px;
  height: 160px;
}


/* ── Word cards in modal ────────────────────────────────────── */
.radical-words-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: .6rem;
}
.radical-word-card {
  border-radius: .85rem;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  padding: .6rem .65rem .55rem;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .18s;
}
.radical-word-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
  border-color: #94a3b8;
}
.radical-word-card .wc-word {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  font-family: "Noto Serif CJK SC", "STSong", serif;
  margin-bottom: .15rem;
}
.radical-word-card .wc-readings {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.radical-word-card .wc-pinyin {
  font-size: .75rem;
  font-weight: 600;
  color: #4f46e5;
  line-height: 1.2;
}
.radical-word-card .wc-vi-pron {
  font-size: .68rem;
  color: #94a3b8;
}
.radical-word-card .wc-def {
  font-size: .7rem;
  color: #64748b;
  margin-top: .1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.radical-word-card .wc-def-note {
  font-size: .62rem;
  color: #94a3b8;
}
.radical-word-card .wc-level {
  font-size: .62rem;
  font-weight: 700;
  border-radius: .4rem;
  padding: .05rem .35rem;
  margin-top: .3rem;
  display: inline-block;
}
/* HSK level colours */
.hsk-1 { background: #d1fae5; color: #059669; }
.hsk-2 { background: #dbeafe; color: #2563eb; }
.hsk-3 { background: #fef3c7; color: #d97706; }
.hsk-4 { background: #ede9fe; color: #7c3aed; }
.hsk-5 { background: #fee2e2; color: #dc2626; }
.hsk-6 { background: #f1f5f9; color: #475569; }


/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 576px) {
  .radical-hero { padding: 1.75rem 1.25rem 2rem; }
  .radical-hero-deco { font-size: 7rem; right: -.5rem; }
  .radical-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .5rem; }
  .radical-tile .tile-glyph { font-size: 1.85rem; }
  .modal-radical-glyph { font-size: 3.5rem; }
}