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

*{
  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;
  -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;
}

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


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

.site-wrap{
  width:100%;
  max-width:480px;
  min-height:100vh;
  background:var(--ink);
  box-shadow:0 0 60px rgba(0,0,0,.6);
}


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

header.site-header{
  display:grid;
  grid-template-columns:43% 57%;
  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);
  min-width:0;
}

.logo-holder{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  padding:14px 16px;
  border-right:1px solid rgba(255,255,255,.08);
}

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

.logo-holder img{
  display:block;
  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;
  justify-content:center;
  min-width:0;
  max-width:100%;
  padding:10px 8px;
  overflow:hidden;
}

.site-title{
  margin:0;
  padding:0;
  max-width:100%;
  font-family:'Inter',sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1.1;
  color:#f1efe9;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}


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

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


/* =========================================================
   SERIES INFORMATION
========================================================= */

.series-info-box{
  display:flex;
  align-items:flex-start;
  width:100%;
  min-width:0;
  gap:25px;
  padding:20px 20px 10px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.10);
}


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

.series-cover{
  flex:0 0 190px;
  width:190px;
  min-width:190px;
  background:#201f25;
  border-radius:8px;
  overflow:hidden;
}

.series-cover img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2 / 3;
  object-fit:cover;
  border-radius:8px;
  background:var(--cover-bg);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.15),
    0 6px 16px rgba(0,0,0,.4);
}


/* =========================================================
   SERIES DETAILS
========================================================= */

.series-details{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0;
}

.series-details h1{
  margin:0 0 14px;
  font-family:'Inter',sans-serif;
  font-size:32px;
  font-weight:800;
  line-height:1.2;
  color:#f1efe9;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}


/* =========================================================
   SERIES META
========================================================= */

.series-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
}

.meta-item{
  display:block;
  width:auto;
  max-width:100%;
  padding:9px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:13px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.meta-label{
  font-weight:700;
}


/* =========================================================
   GENRE SECTION
========================================================= */

.genre-section{
  width:100%;
  min-width:0;
  padding:10px 20px 12px;
  margin:0;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.section-title{
  margin:0 0 9px;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}

.genre-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  width:100%;
}

.genre-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 13px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-section{
  width:100%;
  min-width:0;
  margin:0;
  padding:13px 20px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
}

.summary-title{
  margin:0 0 8px;
  font-size:19px;
  font-weight:700;
  line-height:1.3;
}

.summary-text{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#f1efe9;
  opacity:.9;
}


/* =========================================================
   CHAPTER SECTION
========================================================= */

.chapter-section{
  display:block !important;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  box-sizing:border-box;
  overflow:hidden;
}

.chapter-section h2{
  display:block !important;
  width:100%;
  margin:0;
  padding:18px 20px 14px;
  font-size:22px;
  font-weight:700;
  line-height:1.3;
}


/* =========================================================
   CHAPTER CONTROLS
========================================================= */

.chapter-controls{
  display:flex;
  width:100%;
  gap:10px;
  margin:0;
  padding:0 10px 18px;
  flex-wrap:wrap;
  box-sizing:border-box;
}


/* =========================================================
   CHAPTER SEARCH
========================================================= */

.chapter-search{
  flex:1 1 200px;
  min-width:0;
  width:auto;
  height:44px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#25252b;
  color:#f5f5f7;
  font-family:inherit;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
  appearance:none;
  -webkit-appearance:none;
  transition:
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.chapter-search::placeholder{
  color:rgba(255,255,255,.55);
}

.chapter-search:hover{
  border-color:rgba(255,255,255,.25);
}

.chapter-search:focus{
  border-color:rgba(255,255,255,.35);
  background:#292930;
  box-shadow:
    0 0 0 2px rgba(201,56,44,.18),
    0 3px 10px rgba(0,0,0,.25);
}


/* =========================================================
   CHAPTER SELECT
========================================================= */

.chapter-select{
  flex:0 0 190px;
  width:190px;
  height:44px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#25252b;
  color:#f5f5f7;
  font-family:inherit;
  font-size:14px;
  outline:none;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
  cursor:pointer;
  appearance:auto;
  -webkit-appearance:auto;
  transition:
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.chapter-select:hover{
  border-color:rgba(255,255,255,.25);
}

.chapter-select:focus{
  border-color:rgba(255,255,255,.35);
  background:#292930;
  box-shadow:
    0 0 0 2px rgba(201,56,44,.18),
    0 3px 10px rgba(0,0,0,.25);
}

.chapter-select option{
  background:#25252b;
  color:#f5f5f7;
}


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

.chapter-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:10px;
  list-style:none;
  background:#201f25;
}

.chapter-list li{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}


/* =========================================================
   CHAPTER CARD
========================================================= */

.chapter-list li a,
.chapter-link{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:68px !important;
  height:auto !important;
  padding:8px 10px !important;
  margin:0 !important;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.10);
  background:var(--card);
  color:#f1efe9 !important;
  text-decoration:none;
  overflow:hidden;
  box-sizing:border-box;
  transition:
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .12s ease;
}


/* ALTERNATING CHAPTER CARDS */

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


/* CHAPTER HOVER */

.chapter-list li a:hover,
.chapter-link:hover{
  background:var(--stamp) !important;
  border-color:var(--stamp);
  color:#fff !important;
}


/* CHAPTER NUMBER */

.chapter-link .chapter-number,
.chapter-list li a .chapter-number{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 0 3px !important;
  padding:0 !important;
  text-align:center !important;
  font-family:'Inter',sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  color:#f1efe9 !important;
  visibility:visible !important;
  opacity:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  flex:none !important;
}


/* CHAPTER TITLE */

.chapter-link .chapter-name,
.chapter-list li a .chapter-name{
  display:-webkit-box !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 0 3px !important;
  padding:0 !important;
  text-align:center !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#f1efe9 !important;
  visibility:visible !important;
  opacity:.92 !important;
  white-space:normal !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  flex:none !important;
}


/* CHAPTER DATE */

.chapter-link .chapter-date,
.chapter-list li a .chapter-date{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:var(--muted) !important;
  visibility:visible !important;
  opacity:.65 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  flex:none !important;
}


/* CHAPTER HOVER TEXT */

.chapter-list li a:hover .chapter-number,
.chapter-list li a:hover .chapter-name,
.chapter-list li a:hover .chapter-date,
.chapter-link:hover .chapter-number,
.chapter-link:hover .chapter-name,
.chapter-link:hover .chapter-date{
  color:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   LOADING / ERROR / NO RESULTS
========================================================= */

.loading,
.error,
.no-results{
  display:flex !important;
  align-items:center;
  justify-content:center;
  grid-column:1 / -1;
  width:100%;
  min-height:200px;
  text-align:center;
  padding:30px 10px;
  margin:0;
  opacity:.7;
}

.error{
  color:#ff6b6b;
}


/* =========================================================
   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(.85rem, 4.5vw, 1.4rem);
  text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.1);
  transition:
    background-color .12s ease,
    color .12s ease;
}

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

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

.copyright{
  text-align:center;
  padding:14px;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.5px;
}


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

@media(max-width:600px){

  .site-wrap{
    max-width:480px;
  }

  /* HEADER */

  .logo-holder{
    padding:10px 10px;
  }

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

  .site-title-wrap{
    padding:8px 6px;
    overflow:visible;
  }

  .site-title{
    width:max-content;
    max-width:100%;
    font-size:clamp(10px, 4.2vw, 20px);
    line-height:1.05;
    white-space:nowrap;
    overflow:visible;
  }

  /* SERIES INFORMATION */

  .series-info-box{
    gap:14px;
    padding:15px 15px 8px;
  }

  .series-cover{
    flex:0 0 120px;
    width:120px;
    min-width:120px;
  }

  .series-cover img{
    border-radius:7px;
  }

  .series-details{
    min-width:0;
  }

  .series-details h1{
    font-size:23px;
    line-height:1.2;
    margin-bottom:10px;
  }

  .series-meta{
    display:block;
    width:100%;
  }

  .meta-item{
    width:100%;
    margin-bottom:7px;
    padding:7px 9px;
    font-size:12px;
  }

  /* GENRE */

  .genre-section{
    padding:8px 15px 10px;
  }

  .section-title{
    font-size:17px;
    margin-bottom:8px;
  }

  .genre-list{
    gap:6px;
  }

  .genre-card{
    padding:6px 10px;
    font-size:12px;
  }

  /* SUMMARY */

  .summary-section{
    padding:11px 15px;
  }

  .summary-title{
    font-size:18px;
    margin-bottom:7px;
  }

  .summary-text{
    font-size:13px;
    line-height:1.55;
  }

  /* CHAPTER SECTION */

  .chapter-section{
    width:100%;
    margin:0;
    border-radius:8px;
  }

  .chapter-section h2{
    font-size:20px;
    padding:14px 15px 12px;
  }

  /* CHAPTER CONTROLS */

  .chapter-controls{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:8px;
    margin:0;
    padding:0 8px 14px;
  }

  .chapter-search,
  .chapter-select{
    flex:none;
    width:100%;
    min-width:0;
    height:43px;
    font-size:13px;
  }

  .chapter-search{
    padding:9px 12px;
  }

  .chapter-select{
    padding:9px 12px;
  }

  /* CHAPTER LIST */

  .chapter-list{
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }

  /* CHAPTER CARD */

  .chapter-list li a,
  .chapter-link{
    width:100% !important;
    min-height:66px !important;
    height:auto !important;
    padding:7px 10px !important;
    border-radius:7px;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    margin-bottom:3px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:11px !important;
    font-weight:600 !important;
    line-height:1.3 !important;
    margin-bottom:3px !important;
    -webkit-line-clamp:2 !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:9px !important;
    line-height:1.2 !important;
    text-align:left !important;
  }
}


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

@media(max-width:380px){

  .series-info-box{
    gap:11px;
    padding:13px 12px 7px;
  }

  .series-cover{
    flex:0 0 105px;
    width:105px;
    min-width:105px;
  }

  .series-details h1{
    font-size:20px;
  }

  .meta-item{
    padding:6px 8px;
    font-size:11px;
  }

  .genre-section{
    padding:7px 12px 9px;
  }

  .summary-section{
    padding:10px 12px;
  }

  .chapter-section h2{
    font-size:19px;
    padding:13px 12px 11px;
  }

  .chapter-controls{
    gap:7px;
    padding:0 7px 13px;
  }

  .chapter-search,
  .chapter-select{
    height:41px;
    font-size:12px;
  }

  .chapter-list{
    gap:7px;
    padding:7px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:63px !important;
    padding:6px 9px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:15px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:10px !important;
    line-height:1.25 !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:8px !important;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media(min-width:601px) and (max-width:800px){

  .site-wrap{
    max-width:800px;
  }

  header.site-header{
    min-height:105px;
  }

  .logo-holder{
    padding:16px 20px;
  }

  .logo-holder img{
    max-width:220px;
  }

  .site-title-wrap{
    padding:16px 20px;
  }

  .site-title{
    font-size:1.5rem;
  }

  /* SERIES */

  .series-info-box{
    gap:20px;
    padding:20px 20px 10px;
  }

  .series-cover{
    flex:0 0 180px;
    width:180px;
    min-width:180px;
  }

  .series-details h1{
    font-size:28px;
  }

  .meta-item{
    padding:8px 10px;
    font-size:12px;
  }

  /* CHAPTER */

  .chapter-controls{
    gap:8px;
    padding:0 8px 16px;
  }

  .chapter-search{
    flex:1 1 160px;
    height:42px;
    font-size:13px;
  }

  .chapter-select{
    flex:0 0 180px;
    width:180px;
    height:42px;
    font-size:13px;
  }

  .chapter-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    padding:8px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:58px !important;
    padding:7px 8px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:15px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:11px !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:9px !important;
  }
}


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

a:active{
  color:#fff;
}

.chapter-list li a:active,
.chapter-link:active{
  background:var(--stamp) !important;
  border-color:var(--stamp);
  color:#fff !important;
}

.chapter-list li a:active .chapter-number,
.chapter-list li a:active .chapter-name,
.chapter-list li a:active .chapter-date,
.chapter-link:active .chapter-number,
.chapter-link:active .chapter-name,
.chapter-link:active .chapter-date{
  color:#fff !important;
  opacity:1 !important;
}

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


/* =========================================================
   PROTECTION
========================================================= */

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

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


/* =========================================================
   VOLUME LIST — SAME AS CHAPTER LIST
========================================================= */

.volume-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:10px;
  list-style:none;
  background:#201f25;
}

.volume-list li{
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
}


/* VOLUME CARD — SAME AS CHAPTER CARD */

.volume-list li a,
.volume-link{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:68px !important;
  height:auto !important;
  padding:8px 10px !important;
  margin:0 !important;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.10);
  background:var(--card);
  color:#f1efe9 !important;
  text-decoration:none;
  overflow:hidden;
  box-sizing:border-box;
  transition:
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    box-shadow .12s ease;
}


/* ALTERNATING VOLUME CARDS */

.volume-list li:nth-child(even) a,
.volume-list li:nth-child(even) .volume-link{
  background:var(--card-alt);
}


/* VOLUME HOVER */

.volume-list li a:hover,
.volume-link:hover{
  background:var(--stamp) !important;
  border-color:var(--stamp);
  color:#fff !important;
}


/* VOLUME NUMBER */

.volume-link .volume-number,
.volume-list li a .volume-number{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 0 3px !important;
  padding:0 !important;
  text-align:center !important;
  font-family:'Inter',sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  color:#f1efe9 !important;
  visibility:visible !important;
  opacity:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  flex:none !important;
}


/* VOLUME TITLE */

.volume-link .volume-name,
.volume-list li a .volume-name{
  display:-webkit-box !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 0 3px !important;
  padding:0 !important;
  text-align:center !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:#f1efe9 !important;
  visibility:visible !important;
  opacity:.92 !important;
  white-space:normal !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  flex:none !important;
}


/* VOLUME DATE */

.volume-link .volume-date,
.volume-list li a .volume-date{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:var(--muted) !important;
  visibility:visible !important;
  opacity:.65 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  flex:none !important;
}


/* VOLUME HOVER TEXT */

.volume-list li a:hover .volume-number,
.volume-list li a:hover .volume-name,
.volume-list li a:hover .volume-date,
.volume-link:hover .volume-number,
.volume-link:hover .volume-name,
.volume-link:hover .volume-date{
  color:#fff !important;
  opacity:1 !important;
}

@media(max-width:600px){

  .volume-list{
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }

  .volume-list li a,
  .volume-link{
    min-height:66px !important;
    padding:7px 10px !important;
    border-radius:7px;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:16px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:11px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:9px !important;
  }
}

@media(min-width:601px) and (max-width:800px){

  .volume-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:8px;
  }

  .volume-list li a,
  .volume-link{
    min-height:58px !important;
    padding:7px 8px !important;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:15px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:11px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:9px !important;
  }
}


/* =========================================================
   ACTIVE / CLICKED EPISODE CARD
========================================================= */

.chapter-list li.active a,
.chapter-list li.active .chapter-link{
  background:var(--stamp) !important;
  border-color:var(--stamp) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.chapter-list li.active a .chapter-number,
.chapter-list li.active a .chapter-name,
.chapter-list li.active a .chapter-date,
.chapter-list li.active .chapter-number,
.chapter-list li.active .chapter-name,
.chapter-list li.active .chapter-date{
  color:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   CHAPTER SELECT - CUSTOM ARROW (moved left from the edge)
========================================================= */

.chapter-select{
  appearance:none !important;
  -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:16px 16px !important;
  padding-right:40px !important;
}


/* =========================================================
   EPISODE BOX - SMALL EVEN GAP ON LEFT & RIGHT (4px)
   (change the 4px values below to make the gap bigger/smaller)
========================================================= */

.episode-box{
  padding-left:4px !important;
  padding-right:4px !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.episode-box::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.episode-box .chapter-list,
.episode-box .chapter-list li,
.episode-box .chapter-list li a{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* =========================================================
   EPISODE BOX - NO BLANK AREA WHILE AUTO-SCROLLING TO ACTIVE CARD
   (smooth-scrolling across ~1000 cards makes the phone skip
   drawing them, so the scroll jumps instantly instead)
========================================================= */

.episode-box{
  scroll-behavior:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  transform:translateZ(0);
  will-change:scroll-position;
}

.episode-box .chapter-list{
  scroll-behavior:auto !important;
}

.episode-box .chapter-list li{
  content-visibility:visible !important;
  contain:none !important;
}


/* =========================================================
   EPISODE LIST SKELETON (shown until list is ready & scrolled)
========================================================= */

.episode-box-wrap{
  position:relative;
  width:100%;
}

.episode-skeleton{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:7px 4px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:10px;
  background:#25242a;
  opacity:1;
  transition:opacity .25s ease;
}

.episode-skeleton.hide{
  opacity:0;
  pointer-events:none;
}

.episode-skeleton .sk-card{
  flex:0 0 68px;
  height:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:#2c2b32;
  box-sizing:border-box;
}

.episode-skeleton .sk-line{
  display:block;
  height:9px;
  border-radius:5px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.06) 75%
  );
  background-size:200% 100%;
  animation:sk-shimmer 1.2s linear infinite;
}

.episode-skeleton .sk-title{ width:34%; height:12px; }
.episode-skeleton .sk-name { width:72%; }
.episode-skeleton .sk-date { width:28%; align-self:flex-start; margin-left:12px; }

@keyframes sk-shimmer{
  from{ background-position:200% 0; }
  to  { background-position:-200% 0; }
}


/* =========================================================
   EPISODE HEADER + SORT ORDER TOGGLE
========================================================= */

.chapter-section .chapter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding-right:20px;
}

.chapter-section .chapter-head h2{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}

.sort-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#25252b;
  color:#f5f5f7;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease;
}

.sort-toggle svg{
  display:block;
  width:16px;
  height:16px;
  flex:none;
  transition:transform .18s ease;
}

.sort-toggle:hover{
  border-color:rgba(255,255,255,.30);
  background:#292930;
}

.sort-toggle:active{
  background:var(--stamp);
  border-color:var(--stamp);
  color:#fff;
}

.sort-toggle:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.35);
  box-shadow:
    0 0 0 2px rgba(201,56,44,.18),
    0 3px 10px rgba(0,0,0,.25);
}

/* Oldest first: flip the arrow */
.sort-toggle.is-oldest svg{
  transform:rotate(180deg);
}

@media(max-width:600px){
  .chapter-section .chapter-head{
    padding-right:15px;
  }

  .sort-toggle{
    height:34px;
    padding:0 10px;
    font-size:12px;
  }
}

@media(max-width:380px){
  .chapter-section .chapter-head{
    padding-right:12px;
  }

  .sort-toggle{
    padding:0 9px;
  }
}