/* Steel Ball — final PC interaction/layout pass */
@media (min-width: 981px){
  /* Catalog cards: one exact geometry for every work */
  .catalog-grid{
    align-items:stretch !important;
  }
  .catalog-grid .card{
    height:610px !important;
    min-height:610px !important;
    max-height:610px !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .catalog-grid .card .card-cover{
    flex:0 0 435px !important;
    width:100% !important;
    height:435px !important;
    min-height:435px !important;
    max-height:435px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }
  .catalog-grid .card .card-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .catalog-grid .card:hover .card-cover img,
  .catalog-grid .card:focus-within .card-cover img{
    transform:none !important;
    filter:none !important;
  }
  .catalog-grid .card .card-info{
    flex:1 1 auto !important;
    min-height:175px !important;
    height:175px !important;
    max-height:175px !important;
    display:grid !important;
    grid-template-rows:34px 48px 38px !important;
    gap:7px !important;
    padding:14px 15px 13px !important;
    box-sizing:border-box !important;
  }
  .catalog-grid .card .manga-title{
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    margin:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  .catalog-grid .card .rating-container{
    height:48px !important;
    min-height:48px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 76px !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
  }
  .catalog-grid .card .rating-number{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:right !important;
  }
  .catalog-grid .card .rating-container .latest-rating{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    min-height:44px !important;
    padding:6px 5px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
  }
  .catalog-grid .card .catalog-card-bottom{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    margin:0 !important;
  }
  .catalog-grid .card .catalog-card-bottom > *{
    min-width:0 !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Latest updates: exact card and cover geometry, cover always on the right */
  .latest-grid{
    align-items:stretch !important;
  }
  .latest-manga-card{
    direction:ltr !important;
    width:100% !important;
    height:318px !important;
    min-height:318px !important;
    max-height:318px !important;
    grid-template-columns:minmax(0,1fr) 210px !important;
    overflow:hidden !important;
  }
  .latest-manga-cover{
    grid-column:2 !important;
    grid-row:1 !important;
    width:210px !important;
    height:318px !important;
    min-width:210px !important;
    min-height:318px !important;
    max-height:318px !important;
    overflow:hidden !important;
  }
  .latest-manga-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .latest-manga-card:hover .latest-manga-cover img,
  .latest-manga-card:focus-within .latest-manga-cover img{
    transform:none !important;
    filter:none !important;
  }
  .latest-manga-body{
    grid-column:1 !important;
    grid-row:1 !important;
    direction:rtl !important;
    width:auto !important;
    height:318px !important;
    min-height:318px !important;
    max-height:318px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* No image quality changes anywhere on PC */
  .card-cover img,
  .latest-manga-cover img,
  .hero-cover-image,
  .search-result-item img,
  .manga-mini-card img,
  .similar-card img,
  .explore-item img{
    image-rendering:auto !important;
    backface-visibility:visible !important;
  }
}

/* One visual language for the three main navigation choices */
.main-nav > a,
.explore-trigger{
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease !important;
}
.main-nav > a:hover,
.main-nav > a:focus-visible,
.explore-trigger:hover,
.explore-trigger:focus-visible,
.main-nav > a.active{
  color:#fff !important;
  background:rgba(226,184,87,.065) !important;
  border-color:rgba(226,184,87,.16) !important;
  box-shadow:none !important;
  transform:none !important;
  outline:none !important;
}
.main-nav > a:hover i,
.main-nav > a:focus-visible i,
.explore-trigger:hover i,
.explore-trigger:focus-visible i{
  transform:none !important;
}
.explore-trigger::after{display:none !important;content:none !important;}

/* Explore is click-open only; hovering cannot open or pin it. */
.explore-panel{
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateX(-50%) translateY(-6px) !important;
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease !important;
}
.explore.open .explore-panel{
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* =========================================================
   STEEL BALL — FINAL PC CATALOG CARD RESET
   Clean geometry: 4 equal cards, no inherited desktop overrides.
   ========================================================= */
@media (min-width: 769px){
  #all-manga-container.catalog-grid{
    display:grid !important;
    grid-template-columns:repeat(4, 280px) !important;
    grid-auto-rows:560px !important;
    gap:20px !important;
    width:1180px !important;
    max-width:calc(100vw - 40px) !important;
    margin:0 auto !important;
    justify-content:center !important;
    align-items:start !important;
    box-sizing:border-box !important;
  }

  #all-manga-container.catalog-grid > .card{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    height:560px !important;
    min-height:560px !important;
    max-height:560px !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
  }

  #all-manga-container.catalog-grid > .card .card-cover{
    flex:0 0 420px !important;
    width:280px !important;
    height:420px !important;
    min-height:420px !important;
    max-height:420px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
  }

  #all-manga-container.catalog-grid > .card .card-cover img{
    display:block !important;
    width:280px !important;
    height:420px !important;
    min-width:280px !important;
    min-height:420px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    image-rendering:auto !important;
  }

  #all-manga-container.catalog-grid > .card .card-info{
    flex:0 0 140px !important;
    width:280px !important;
    height:140px !important;
    min-height:140px !important;
    max-height:140px !important;
    padding:10px 14px 12px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-rows:34px 34px 34px !important;
    gap:4px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  #all-manga-container.catalog-grid > .card .manga-title{
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    line-height:1.15 !important;
    font-size:16px !important;
    font-weight:900 !important;
  }

  #all-manga-container.catalog-grid > .card .rating-container{
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 76px !important;
    gap:8px !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }

  #all-manga-container.catalog-grid > .card .rating-number{
    min-width:0 !important;
    height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:12px !important;
  }

  #all-manga-container.catalog-grid > .card .latest-rating{
    width:76px !important;
    min-width:76px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:2px !important;
    box-sizing:border-box !important;
    border-radius:8px !important;
  }

  #all-manga-container.catalog-grid > .card .catalog-card-bottom{
    width:100% !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    align-items:stretch !important;
    box-sizing:border-box !important;
  }

  #all-manga-container.catalog-grid > .card .catalog-card-bottom .chapter-num,
  #all-manga-container.catalog-grid > .card .catalog-type{
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  #all-manga-container.catalog-grid > .card .catalog-card-bottom .chapter-num{
    width:100% !important;
    padding:0 10px !important;
  }

  #all-manga-container.catalog-grid > .card .catalog-type{
    min-width:42px !important;
    padding:0 6px !important;
    font-size:10px !important;
  }

  /* Interaction stays on the frame. Artwork never zooms, shifts, or filters. */
  #all-manga-container.catalog-grid > .card:hover{
    transform:translateY(-4px) !important;
  }

  #all-manga-container.catalog-grid > .card:hover .card-cover img,
  #all-manga-container.catalog-grid > .card:focus-within .card-cover img{
    transform:none !important;
    filter:none !important;
  }
}

/* Final PC catalog sizing: slightly larger cards, exact equal geometry. */
@media (min-width: 769px){
  #all-manga-container.catalog-grid{
    width:min(1239px,calc(100vw - 40px)) !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    grid-auto-rows:600px !important;
    gap:13px !important;
    justify-content:center !important;
  }
  #all-manga-container.catalog-grid > .card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:600px !important;
    min-height:600px !important;
    max-height:600px !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover{
    width:100% !important;
    height:450px !important;
    min-height:450px !important;
    max-height:450px !important;
    flex-basis:450px !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  #all-manga-container.catalog-grid > .card .card-info{
    width:100% !important;
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    flex-basis:150px !important;
    grid-template-rows:36px 38px 38px !important;
    gap:5px !important;
    padding:11px 14px 12px !important;
  }
  #all-manga-container.catalog-grid > .card .manga-title{
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    font-size:17px !important;
  }
  #all-manga-container.catalog-grid > .card .rating-container{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    grid-template-columns:minmax(0,1fr) 82px !important;
    gap:9px !important;
  }
  #all-manga-container.catalog-grid > .card .rating-number{
    height:38px !important;
    min-height:38px !important;
  }
  #all-manga-container.catalog-grid > .card .latest-rating{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
  #all-manga-container.catalog-grid > .card .catalog-card-bottom{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
  #all-manga-container.catalog-grid > .card .catalog-card-bottom > *{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
  }
}

/* Favorite controls stay on top of surrounding decoration. */
.work-content{position:relative;z-index:10 !important;}
.work-favorite-btn{position:relative;z-index:20 !important;pointer-events:auto !important;}
.hero-actions{position:relative;z-index:20 !important;}
.hero-favorite-btn{position:relative;z-index:30 !important;pointer-events:auto !important;}
.hero-favorite-btn.is-loading,.work-favorite-btn.is-loading{opacity:.7;cursor:wait;}


/* ===== FINAL PC CARD TUNING — taller only ===== */
@media (min-width: 769px){
  #all-manga-container.catalog-grid > .card{
    height:620px !important;
    min-height:620px !important;
    max-height:620px !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover{
    height:450px !important;
    min-height:450px !important;
    max-height:450px !important;
    flex:0 0 450px !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
    filter:none !important;
  }
  #all-manga-container.catalog-grid > .card .card-info{
    height:170px !important;
    min-height:170px !important;
    max-height:170px !important;
    flex:1 1 auto !important;
    grid-template-rows:40px 50px 50px !important;
    gap:4px !important;
    padding:11px 14px 12px !important;
  }
  #all-manga-container.catalog-grid > .card:hover .card-cover img{
    transform:none !important;
    filter:none !important;
  }
}

/* FINAL PC CARD COVER SIZE — slightly larger cover, same card width and overall geometry */
@media (min-width: 769px){
  #all-manga-container.catalog-grid > .card{
    height:620px !important;
    min-height:620px !important;
    max-height:620px !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover{
    flex:0 0 462px !important;
    height:462px !important;
    min-height:462px !important;
    max-height:462px !important;
    aspect-ratio: auto !important;
  }
  #all-manga-container.catalog-grid > .card .card-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:fill !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
    image-rendering:auto !important;
  }
}

/* Favorite buttons must always receive pointer input above decorative layers. */
.hero-actions .hero-favorite-btn,
.work-content .work-favorite-btn{
  position:relative !important;
  z-index:100 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* FINAL PC GRID SPACING — balanced gaps after card enlargement */
@media (min-width:1200px){
  #all-manga-container.catalog-grid{
    width:auto !important;
    max-width:none !important;
    grid-template-columns:repeat(4,290px) !important;
    gap:30px !important;
    justify-content:center !important;
    margin-inline:auto !important;
  }
  #all-manga-container.catalog-grid > .card{
    width:290px !important;
    min-width:290px !important;
    max-width:290px !important;
  }
}

@media (min-width:981px) and (max-width:1199px){
  #all-manga-container.catalog-grid{
    width:auto !important;
    max-width:none !important;
    grid-template-columns:repeat(3,290px) !important;
    gap:28px !important;
    justify-content:center !important;
    margin-inline:auto !important;
  }
  #all-manga-container.catalog-grid > .card{
    width:290px !important;
    min-width:290px !important;
    max-width:290px !important;
  }
}

@media (min-width:769px) and (max-width:980px){
  #all-manga-container.catalog-grid{
    width:auto !important;
    max-width:none !important;
    grid-template-columns:repeat(2,300px) !important;
    gap:26px !important;
    justify-content:center !important;
    margin-inline:auto !important;
  }
  #all-manga-container.catalog-grid > .card{
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;
  }
}