/* ========================
   Cards — суурь стиль
======================== */
html, body{
  overflow-x: hidden;
}

.manga-card {
  background-color: #1c1c1c;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  min-width: 0;
}
#uploadProgress {
  pointer-events: none;
  user-select: none;  
}

.manga-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255,255,255,.1);
}

.manga-thumb { position: relative; overflow: hidden; }
.manga-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: filter .3s ease;
}
.manga-card:hover .manga-thumb img { filter: blur(1px) brightness(1.05); }

.manga-info {
  padding: 10px;
  color: #fff;
  gap: .2rem;
  display: flex;
  flex-direction: column;
}
.manga-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s ease;
}
.manga-card:hover .manga-title { color: #ffd700; }
.manga-author { font-size: .8rem; color: #aaa; margin-bottom: 2px; font-style: italic; }

.manga-stats {
  font-size: .7rem;
  color: #ddd;
  display: flex;
  align-items: center;
  margin-top: .4rem;
  border-top: 1px solid #2c2e3b;
  padding-top: .3rem;
  justify-content: space-between;
}

.rank-badge {
  position: absolute; top: 8px; left: 8px;
  background: linear-gradient(to right, gold, orange);
  color: #000; font-weight: 700;
  padding: 2px 6px; font-size: .8rem; border-radius: 20px;
}
.manga-card.rank-1 { border: 2px solid gold; }

/* ---- DESKTOP / DEFAULT ---- */
:root{
  --ctrl-h: 40px;
  --ctrl-bg: #2b2b2b;
  --ctrl-text: #fff;
  --ctrl-border: #444;
  --ctrl-radius: 10px;
}

.filter-controls{
  display:flex;
  align-items:center;
  margin-top: -40px;
}

/* SELECT—ийг жигд харагдуулах (Chrome/FF/Safari) */
.filter-controls .filter-actions select,
#sortSelect, #genreSelect{
  height: 40px;
  padding: 0 36px 0 12px;
  color: #fff;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 10px;
  font-size: 0.95rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.filter-controls .filter-actions select:hover{
  border-color:#666;
}
.filter-controls .filter-actions select:focus{
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
  border-color:#888;
}
.title-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;            /* зүүнд үлдээнэ */
}

.filter-actions{
  display:flex;
  align-items:center;
  gap:10px;                     /* 18+ ↔ selects зай */
  flex-wrap:nowrap;
}

.adult-badge{
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.15);
  overflow:hidden;
}
.adult-badge a{ display:block; width:100%; height:100%; }
.adult-badge img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* ========================
   GRID (мөр солигддог) — scroll БАЙХГҮЙ
======================== */
#mangaGrid,
#topRankedManga,
#adultsOnlyManga,
#historyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}

#mangaGrid .manga-card,
#topRankedManga .manga-card,
#adultsOnlyManga .manga-card,
#historyGrid .manga-card {
  width: 100%;  /* grid нүдийг дүүргэнэ */
}

/* ========================
   ROW SCROLL — зөвхөн эд
======================== */
#LastUpdated,
#reading-history,
.category-row {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 12px;
  padding: 5px 0 12px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;           
  scrollbar-color: #555 #111;      
}

/* Scroll row дотор картууд тогтмол өргөнтэй */
#LastUpdated .manga-card,
#reading-history .manga-card,
.category-row .manga-card {
  width: 170px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Scrollbar — WebKit */
#LastUpdated::-webkit-scrollbar,
#reading-history::-webkit-scrollbar,
.category-row::-webkit-scrollbar { height: 8px; }
#LastUpdated::-webkit-scrollbar-track,
#reading-history::-webkit-scrollbar-track,
.category-row::-webkit-scrollbar-track { background: #111; border-radius: 10px; }
#LastUpdated::-webkit-scrollbar-thumb,
#reading-history::-webkit-scrollbar-thumb,
.category-row::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
#LastUpdated::-webkit-scrollbar-thumb:hover,
#reading-history::-webkit-scrollbar-thumb:hover,
.category-row::-webkit-scrollbar-thumb:hover { background: #888; }

.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.empty{display:block;text-align:center;padding:28px;border:1px dashed rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.03)}
.empty.hidden{ display:none !important; }
.empty-emoji{font-size:28px;opacity:.9}
.empty-title{font-weight:700;margin:6px 0 4px}
.empty-actions .btn{display:inline-block;margin-top:8px;padding:8px 14px;border-radius:8px;background:#a22;color:#fff;text-decoration:none}

/* ========================
   Responsive
======================== */
/* === Mobile ≤640px === */
@media (max-width: 640px){

  /* desktop-ын -40px mobile дээр ална */
  .filter-controls{ 
    margin-top: 0 !important;
  }

  /* filter block */
  .filter-controls{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 12px;          /* ✅ доорх контенттой зай */
  }

  /* ✅ MANGA LIST mobile дээр hidden (ганцаараа сонин харагдахаас) */
  .page-manga-card .section-title{
    display: none;
  }

  /* ✅ Filter layout */
  .filter-actions{
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    align-items: center;
    column-gap: 45px;
  }
  .filter-actions > select{
    max-width: 320px;
    width: 100%;
    justify-self: start;
  }

  /* ✅ adult badge: emoji overlay */
  .adult-badge{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    position: relative;
    border-radius: 14px;             /* circle биш, жижиг card мэт */
    overflow: hidden;
    margin-left: 10px;
  }

  /* ✅ Select-үүд full width биш: “compact centered” */
  #sortSelect,
  #genreSelect{
    grid-column: 2;
    width: 100%;
    max-width: 320px;              /* ✅ ингэснээр урт биш харагдана */
    justify-self: start;           /* баруун баганад зүүнээс эхэлнэ */
    min-width: 0;
  }

  #sortSelect{ grid-row: 1; }
  #genreSelect{ grid-row: 2; }

  /* ✅ select styling */
  .filter-controls .filter-actions select{
    height: 38px;
    padding: 0 34px 0 12px;
    font-size: .9rem;
    border-radius: 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    background-size: 12px;
  }

  /* ✅ filter дууссаны дараа grid-ээс салгаад контент руу зай */
  section[aria-live="polite"]{
    margin-top: 12px;
  }

  /* iOS zoom хамгаалалт */
  .filter-controls .filter-actions select option{
    font-size: 16px;
  }
}

/* EXTRA SMALL */
@media (max-width: 400px){
  .filter-actions{
    grid-template-columns: 44px 1fr;
  }

  .adult-badge{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  #sortSelect,
  #genreSelect{
    max-width: 260px;              /* ✅ жижиг дэлгэц дээр бүр компакт */
  }

  .filter-actions > select{
    margin-left: 8px;
    max-width: 260px;
  }
  .filter-controls .filter-actions select{
    height: 36px;
    font-size: .86rem;
    padding-right: 32px;
  }
}

/* ≤768px */
@media (max-width: 768px) {
  .manga-thumb img { height: 160px; }
  .manga-title { font-size: .85rem; }
  .manga-author { font-size: .75rem; }
  .manga-stats { font-size: .7rem; }
  .rank-badge { font-size: .7rem; padding: 2px 5px; }
}

/* iPhone SE / 360px-аас доош бол 1 column */
@media (max-width: 360px) {
  #mangaGrid,
  #topRankedManga,
  #adultsOnlyManga,
  #historyGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .manga-thumb img { height: 200px; }
  .manga-title { font-size: 1rem; }
  .manga-author { font-size: .85rem; }
  .manga-stats { font-size: .8rem; }
}

@media (min-width: 361px) and (max-width: 420px) {
  #mangaGrid,
  #topRankedManga,
  #adultsOnlyManga,
  #historyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .manga-thumb img { height: 160px; }
}