/* Ported from legacy index.html; reader only. */
@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@400;600&family=Kanit:wght@400;600;800&display=swap');
        :root {
            --bg-core: #05000a;
            --neon-purple: #bd00ff;
            --neon-violet: #7a00ff;
            --neon-white: #f5e0ff;
            --text-main: #ffffff;
            --text-muted: #a0a0a0;
            --neon-hot: #ff6b00;
            --neon-gold: #ffd700;
        }

        * { box-sizing: border-box; }
        body {
            font-family: 'Pridi', sans-serif;
            background: radial-gradient(circle at 50% 30%, #1a0525 0%, #05000a 80%) fixed;
            margin: 0; padding: 0; color: var(--text-main);
            min-height: 100vh; overflow-x: hidden;
        }


        .tabs-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 30px auto; padding: 0 20px; z-index: 10; position: relative; }
        .tab-btn { padding: 10px 20px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50px; cursor: pointer; background: rgba(0,0,0,0.72); color: var(--text-muted); transition: background 0.18s, color 0.18s, border-color 0.18s; display: flex; align-items: center; gap: 8px; font-family: 'Kanit'; font-weight: 600; }
        .tab-btn.active { background: rgba(189, 0, 255, 0.22); color: #fff; border-color: var(--neon-purple); box-shadow: none; transform: none; }
        .tab-btn.tab-bookmark.active { background: rgba(255, 215, 0, 0.15); border-color: var(--neon-gold); box-shadow: none; }

        .img-tab { width: 64px; height: 64px; object-fit: contain; }

        .search-container { max-width: 600px; margin: 0 auto 30px; padding: 0 20px; position: relative; z-index: 10; }
        .search-box { width: 100%; background: rgba(0,0,0,0.6); border: 1px solid rgba(189, 0, 255, 0.3); border-radius: 50px; padding: 12px 25px; display: flex; align-items: center; gap: 15px; }
        .search-input { width: 100%; background: transparent; border: none; outline: none; color: #fff; font-size: 1.1rem; }

        .container { max-width: 1280px; margin: 0 auto; padding: 20px; position: relative; z-index: 10; }
        .manga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px; }

        /* --- 🃏 CARD STYLE --- */
        .manga-card { background: #12081f; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.18s, transform 0.18s; display: flex; flex-direction: column; height: 100%; cursor: pointer; position: relative; }
        .manga-card:hover { transform: translateY(-4px); border-color: var(--neon-purple); box-shadow: none; }
        .manga-card.hot-card { border-color: rgba(255,107,0,0.4); box-shadow: none; }
        .manga-card.hot-card:hover { border-color: var(--neon-hot); box-shadow: none; }
        .img-wrapper { position: relative; aspect-ratio: 2/3; background: #000; overflow: hidden; }
        .img-wrapper img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
        .img-wrapper img.loaded { opacity: 0.85; }
        
        /* Title multiline (Clamp 2 lines on mobile/desktop) */
        .manga-title { font-weight:600; color:var(--neon-white); font-size:1.1rem; white-space: pre-line; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

        /* --- 🏷️ BADGES --- */
        .new-badge { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #ff0055, #ff4081); color: white; padding: 4px 10px; font-size: 0.8rem; border-radius: 4px; z-index: 15; animation: pulse-red 2.8s infinite; font-weight: bold; }
        @keyframes pulse-red { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

        .hot-badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #ff6b00, #ff9f00); color: white; padding: 4px 10px; font-size: 0.8rem; border-radius: 4px; z-index: 15; animation: pulse-hot 2.4s infinite; font-weight: bold; display: flex; align-items: center; gap: 4px; }
        @keyframes pulse-hot { 0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,107,0,0.5); } 50% { transform: scale(1.07); box-shadow: 0 0 20px rgba(255,107,0,0.9); } }

        /* Bookmark button on card */
        .bookmark-btn { position: absolute; top: 10px; right: 10px; z-index: 25; background: rgba(0,0,0,0.7); border: none; color: #aaa; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: 0.2s; backdrop-filter: blur(4px); }
        .bookmark-btn:hover, .bookmark-btn.bookmarked { color: var(--neon-gold); text-shadow: 0 0 8px var(--neon-gold); }
        .bookmark-btn.bookmarked { background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.4); }

        .status-badge { font-size: 0.85rem; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; font-weight: 600; }
        .status-normal { color: var(--neon-purple); border: 1px solid rgba(189,0,255,0.3); }
        .status-catchup { color: #ff0055; border: 1px solid rgba(255,0,85,0.4); }
        .status-end { color: #00e676; border: 1px solid rgba(0,230,118,0.3); }
        .status-hot { color: var(--neon-hot); border: 1px solid rgba(255,107,0,0.4); background: rgba(255,107,0,0.08); }

/* Semantic buttons replace legacy inline onclick without changing its layout. */
.container { width:100%; }
.library-top { display:block; }
.tabs-container .tab-btn { font-size:1rem; min-height:0; }
.tab-btn.tab-bookmark { color:var(--neon-gold); }
.search-container { width:100%; }
.search-box { font-family:'Pridi',sans-serif; }
.search-box .search-input { margin:0; padding:0; border-radius:0; box-shadow:none; }
.search-box>span { color:var(--neon-purple); font-size:24px; }
.manga-card .card-heading { padding:15px; text-align:center; min-height:80px; display:flex; align-items:center; justify-content:center; }
.manga-card .title-button { font:inherit; border:0; padding:0; margin:0; background:none; color:inherit; min-height:0; text-align:center; width:100%; }
.manga-card .manga-title { font-size:1.1rem; font-weight:600; line-height:1.4; }
.manga-card .cover-button { display:block; width:100%; height:100%; border:0; border-radius:0; padding:0; background:none; aspect-ratio:auto; }
.manga-card .cover-button::after { content:none; }
.manga-card .cover-button:hover { background:none; }
.manga-card .card-footer { padding:12px; background:rgba(0,0,0,.3); }
.manga-card .bookmark-btn { padding:0; font-size:23px; z-index:35; }
.manga-card .new-badge { right:auto; left:10px; }
.status-season { background:rgba(0,191,255,.1);color:#00bfff;border-color:rgba(0,191,255,.3); }
.filters { max-width:560px; }
@media(max-width:600px){
 .manga-grid { grid-template-columns:repeat(2,1fr);gap:15px; }
 .img-tab { width:32px;height:32px; }
 .tabs-container { padding:0; gap:8px; }
 .tabs-container .tab-btn { padding:10px 12px;font-size:.8rem; }
 .search-container { padding:0; }
}
@media(prefers-reduced-motion:reduce){.new-badge,.hot-badge{animation:none}}

/* Original announcement presentation, driven by hidden attributes instead of old scripts. */
        .reader-announcement { display: none; max-width: 760px; margin: 22px auto -10px; padding: 0 18px; position: relative; z-index: 10; }
        .reader-announcement.is-visible { display: block; }
        .reader-announcement-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 11px 50px 11px 15px; border-radius: 12px; background: linear-gradient(135deg, rgba(35,5,55,0.96), rgba(12,3,24,0.98)); border: 1px solid rgba(255,215,0,0.38); color: #fff; box-shadow: 0 0 18px rgba(189,0,255,0.16); text-decoration: none; }
        .reader-announcement-card::after { content: ''; position: absolute; right: -34px; top: -44px; width: 118px; height: 118px; border-radius: 50%; background: rgba(255,215,0,0.09); }
        .reader-announcement-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,215,0,0.14); border: 1px solid rgba(255,215,0,0.42); color: var(--neon-gold); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: 0 0 auto; }
        .reader-announcement-body { min-width: 0; }
        .reader-announcement-title { font-family: 'Kanit'; font-weight: 900; font-size: 1rem; line-height: 1.2; margin-bottom: 2px; color: #ffe7a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .reader-announcement-text { font-family: 'Kanit'; font-weight: 600; font-size: 0.82rem; color: #eee4ff; opacity: 0.95; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .reader-announcement-cta { display: none; margin-left: auto; margin-right: 4px; flex: 0 0 auto; align-items: center; gap: 6px; border: 1px solid rgba(255,215,0,0.55); border-radius: 999px; background: rgba(255,215,0,0.14); color: #ffe7a8; padding: 6px 11px; font-family: 'Kanit'; font-size: 0.78rem; font-weight: 900; position: relative; z-index: 1; }
        .reader-announcement.has-link .reader-announcement-cta { display: inline-flex; }
        @media (max-width: 620px) {
            .reader-announcement-card { align-items: flex-start; padding-right: 48px; }
            .reader-announcement-cta { margin-left: 0; margin-top: 2px; padding: 5px 9px; font-size: 0.72rem; }
            .reader-announcement.has-link .reader-announcement-card { flex-wrap: wrap; }
            .reader-announcement.has-link .reader-announcement-body { flex-basis: calc(100% - 54px); }
        }
.reader-announcement{display:block;margin:18px auto}.reader-announcement-cta{display:inline-flex}.reader-announcement-card{padding-right:15px}

/* Suppress browser touch flashes on clickable card containers, retaining keyboard focus. */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
.ambient-lightning{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lightning-edge{position:absolute;top:0;height:100%;width:min(28vw,330px);fill:none;stroke-linecap:round;stroke-linejoin:round}
.lightning-left{left:0}.lightning-right{right:0}
.lightning-strike{opacity:.26;animation:lightning-bloom 14s ease-in-out infinite}
.lightning-right .lightning-strike{animation-delay:-7s}
.bolt-aura{stroke:#9c36ff;stroke-width:13;opacity:.09}
.bolt-rim{stroke:#b35cff;stroke-width:4;opacity:.24}
.bolt-core{stroke:url(#bolt-purple);stroke-width:1.35;opacity:.9}
@keyframes lightning-bloom{0%,28%,65%,100%{opacity:.16}42%{opacity:.88}50%{opacity:.38}}
.page-idle .lightning-strike{animation-play-state:paused}
@media(max-width:600px){.lightning-edge{width:22vw}.bolt-core{stroke-width:2}}
@media(prefers-reduced-motion:reduce){.lightning-strike{animation:none;opacity:.22}}

/* Ongoing releases: distinguish from the blue season-completed badge. */
.status-normal { color:#4ade80; border-color:rgba(74,222,128,.4); background:rgba(34,197,94,.09); }
.slide-speed { max-width:28rem; margin-bottom:1rem; }

/* User-provided illustrated navigation: artwork already includes the label. */
.tabs-container .tab-btn.art-tab{position:relative;display:flex;align-items:center;justify-content:center;width:156px;height:156px;flex:0 0 156px;padding:3px;border:2px solid transparent;border-radius:22px;background:transparent;box-shadow:none;transition:background .15s,border-color .15s}
.tabs-container .tab-btn.art-tab .img-tab{display:block;width:100%;height:100%;object-fit:contain}
.tabs-container .tab-btn.art-tab:hover{background:rgba(189,0,255,.08);border-color:rgba(210,110,255,.4)}
.tabs-container .tab-btn.art-tab.active{background:rgba(189,0,255,.1);border-color:#c556f3}
.tabs-container .art-tab #bookmark-count{position:absolute;top:4px;right:3px;min-width:25px;padding:2px 7px;background:#3d2910;color:#ffe377;border:1px solid #d4a329;border-radius:20px;font-size:13px}
@media(max-width:650px){.tabs-container .tab-btn.art-tab{width:112px;height:112px;flex-basis:112px;border-radius:16px}.tabs-container{gap:10px}}

/* Full-width cover, with the featured stories before navigation. */
main.container{max-width:none;padding:0}
.reader-cover{border-radius:0;width:100%;padding:20px 0!important}
.reader-cover> :not(#site-poster){width:calc(100% - 40px);max-width:1240px;margin-left:auto;margin-right:auto}
.reader-cover .library-top{margin-top:28px}
main>.library{max-width:1280px;margin:auto;padding:0 20px}
.page-loading{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#100619;color:#f3e9fa;text-align:center;padding:24px}
.page-loading>img{object-fit:contain;border-radius:50%}
.page-loading p{margin:0}
.loading-spinner{width:28px;height:28px;border:3px solid #69447d;border-top-color:#e7adff;border-radius:50%;animation:reader-loading .9s linear infinite}
.load-failed .loading-spinner{display:none}
@keyframes reader-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}}

/* Preserve the complete cover at its intrinsic aspect ratio, without zoom/crop. */
.reader-cover{min-height:calc(100vw * var(--cover-height-ratio,0))}
#site-poster{height:auto;bottom:auto;object-fit:contain;object-position:top center}
.manga-card .manga-title{display:block;-webkit-line-clamp:unset;white-space:pre-line;overflow-wrap:break-word;word-break:normal;line-break:strict;text-wrap:wrap}

.manga-title .title-phrase{display:inline-block;max-width:100%;vertical-align:top;text-wrap:pretty}