:root{
  --ink:#1a1a1f;
  --panel:#37353d;
  --panel-alt:#403e46;
  --cover-bg:#e7e5df;
  --muted:#a9a5ac;
  --stamp:#c9382c;
  --dot:rgba(255,255,255,0.045);

  --colL:43%;
  --colR:57%;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  background:#0c0c0f;
  color:#f1efe9;
  font-family:'Inter',sans-serif;
  min-height:100vh;

  display:flex;
  justify-content:center;

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

a{
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

/* =========================
   SITE WRAPPER
   ========================= */

.site-wrap{
  width:100%;
  max-width:480px;
  background:var(--ink);
  min-height:100vh;

  box-shadow:0 0 60px rgba(0,0,0,0.6);
}

/* =========================
   HEADER
   ========================= */

header.site-header{
  display:grid;
  grid-template-columns:var(--colL) var(--colR);

  background:
    radial-gradient(
      var(--dot) 1.2px,
      transparent 1.2px
    ) 0 0/10px 10px,
    linear-gradient(
      135deg,
      #2a2830,
      #161519
    );

  border-bottom:3px solid var(--stamp);
}

.logo-holder{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  padding:14px 16px;

  border-right:1px solid rgba(255,255,255,0.08);
}

.logo-holder a{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  width:100%;
  min-width:0;
}

.logo-holder img{
  width:100%;
  max-width:325px;
  height:auto;

  aspect-ratio:650 / 223;
  object-fit:contain;

  -webkit-user-drag:none;
  user-drag:none;
}

/* =========================
   SITE TITLE
   ========================= */

.site-title-wrap{
  display:flex;
  align-items:center;

  min-width:0;
  max-width:100%;

  padding:10px 8px;

  overflow:hidden;
}

.site-title{
  margin:0;
  padding:0;

  font-family:'Inter',sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1.1;

  color:#f1efe9;

  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;

  letter-spacing:0;

  max-width:100%;
  min-width:0;
}

/* =========================
   MAIN
   ========================= */

main{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* =========================
   SERIES CARD
   ========================= */

.series-card{
  display:grid;
  grid-template-columns:var(--colL) var(--colR);

  border-bottom:1px solid rgba(255,255,255,0.06);

  min-width:0;
}

/* =========================
   COVER
   ========================= */

.cover-cell{
  background:#201f25;

  padding:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  min-width:0;
}

.cover-link{
  width:100%;

  aspect-ratio:2 / 3;

  border-radius:6px;
  overflow:hidden;

  position:relative;

  background:var(--cover-bg);

  border:3px solid rgba(255,255,255,0.35);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.15),
    0 6px 16px rgba(0,0,0,0.4);

  display:flex;
  align-items:center;
  justify-content:center;
}

.cover-link img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  -webkit-user-drag:none;
  user-drag:none;
}

.cover-link span{
  font-size:0.72rem;
  color:#8a8781;

  text-align:center;

  padding:10px;
}

/* =========================
   SERIES INFO
   ========================= */

.info-cell{
  display:flex;
  flex-direction:column;

  min-width:0;
  width:100%;
}

/* =========================
   ALL SERIES TITLES
   CONSISTENT HEIGHT
   ONE LINE
   ========================= */

.series-name{
  background:#0f0e12;

  padding:14px 8px;

  font-family:'Inter','Noto Sans SC','Noto Sans Arabic',sans-serif;
  font-weight:800;

  /*
   * Use a readable base font size.
   * JavaScript can reduce it individually
   * when a title needs additional space.
   */
  font-size:1rem;

  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.1;

  border-bottom:1px solid rgba(255,255,255,0.08);

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  color:#f1efe9;

  width:100%;
  min-width:0;
  max-width:100%;

  height:54px;
  min-height:54px;
  flex-shrink:0;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}

/* Text wrapper used for accurate title fitting */
.series-name .series-name-text{
  display:inline-block;

  width:max-content;
  max-width:none;

  flex:0 0 auto;

  white-space:nowrap;
  text-align:center;
  line-height:inherit;
}

/* Keep one-shots titles consistent */
.series-name.one-shots-title{
  font-size:1rem;
  white-space:nowrap;
}

/* =========================
   CHAPTER LIST
   ========================= */

.chapter-list{
  list-style:none;
  min-width:0;
}

.chapter-list li{
  min-width:0;
}

.chapter-list li a{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:14px 16px;

  font-weight:600;

  font-size:clamp(
    0.85rem,
    3.6vw,
    1.25rem
  );

  background:var(--panel);

  border-bottom:1px solid rgba(255,255,255,0.05);

  min-width:0;

  transition:
    background-color .12s ease,
    color .12s ease;
}

.chapter-list li:nth-child(even) a{
  background:var(--panel-alt);
}

.chapter-title,
.volume-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.chapter-date{
  font-size:0.7em;
  font-weight:600;

  color:var(--muted);

  white-space:nowrap;
  flex-shrink:0;
}

/* =========================
   FOOTER
   ========================= */

footer{
  background:#0f0e12;
  border-top:3px solid var(--stamp);
}

.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.footer-links a{
  padding:18px 6px;

  text-align:center;

  font-family:'Anton',sans-serif;

  font-size:clamp(
    0.85rem,
    4.5vw,
    1.4rem
  );

  text-transform:uppercase;

  border-right:1px solid rgba(255,255,255,0.1);

  transition:
    background-color .12s ease,
    color .12s ease;
}

.footer-links a:last-child{
  border-right:none;
}

.copyright{
  text-align:center;
  padding:14px;

  font-size:0.78rem;

  color:var(--muted);
  letter-spacing:0.5px;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width:560px){

  .logo-holder{
    padding:10px;
    min-width:0;
  }

  .logo-holder img{
    width:100%;
    max-width:130px;
    height:auto;
  }

  .site-title-wrap{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;
    width:100%;

    padding:8px 6px;

    overflow:hidden;
  }

  .site-title{
    margin:0;
    padding:0;

    font-family:'Inter',sans-serif;
    font-weight:800;

    font-size:clamp(
      10px,
      4.2vw,
      20px
    );

    line-height:1.05;
    letter-spacing:0;

    color:#f1efe9;

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

    min-width:0;
    max-width:100%;
  }

  /* Same title height for all mobile cards */
  .series-name{
    padding:12px 5px;

    font-size:0.95rem;

    height:48px;
    min-height:48px;

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

    letter-spacing:0;
  }

  .series-name.one-shots-title{
    font-size:0.95rem;
  }
}

/* =========================
   VERY SMALL PHONES
   ========================= */

@media (max-width:360px){

  .series-name{
    padding-left:3px;
    padding-right:3px;

    font-size:0.9rem;

    height:44px;
    min-height:44px;
  }

  .series-name.one-shots-title{
    font-size:0.9rem;
  }
}

/* =========================
   CLICK / TAP COLOR FEEDBACK
   ========================= */

a:active{
  color:#fff;
}

.cover-link:active{
  background:var(--stamp);
}

.series-name:active{
  background:var(--stamp);
  color:#fff;
}

.chapter-list li a:active{
  background:var(--stamp);
  color:#fff;
}

.chapter-list li a:active .chapter-date{
  color:#fff;
}

.footer-links a:active{
  background:var(--stamp);
  color:#fff;
}