/* ============================================================
   css/novel.css - 小说/漫画频道样式（系列详情、章节列表、漫画阅读器）
   ------------------------------------------------------------
   从 novel.php 的 <head> 内联 <style> 抽出（约 11KB）：内联样式每次都要随
   HTML 重下，外置后可缓存 30 天；位于 <head>，仍是渲染阻塞加载，不会闪样式。
   ============================================================ */
    body.novel-page { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100vh; }
    /* 章节列表与互动卡由 JS 渲染：首屏骨架比成稿矮 ~310px，会把 footer 从视口内推出去（实测桌面 CLS 0.018）。
       先给主容器预留一屏，footer 天然落在首屏之外；成稿本就高于一屏，不会多出空白。 */
    .novel-page main { min-height: 100vh; }
    .font-lcd { font-family: 'Orbitron', 'Microsoft YaHei', sans-serif; }
    .font-mono { font-family: 'Share Tech Mono', monospace; }
    .gl-clip { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
    .gl-clip-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
    .cyber-input { background: rgba(0,0,0,.55); border:1px solid rgb(var(--color-main) / .3); color:#fff;
        padding: 9px 14px; border-radius:8px; width:100%; transition: all .3s ease; }

    /* ---------- 系列详情 ---------- */
    .nv-hex { color: rgb(var(--nc)); }
    #nv-banner { position:relative; height: 300px; overflow:hidden; border:1px solid rgba(var(--nc), .4); }
    #nv-banner img { width:100%; height:100%; object-fit:cover; filter: brightness(.75); }
    #nv-banner::after { content:''; position:absolute; inset:0;
        background: linear-gradient(to top, #050505 2%, rgba(5,5,5,.25) 55%, transparent); }
    .nv-chap-row { display:flex; align-items:center; gap:12px; padding: 13px 16px; cursor:pointer;
        border:1px solid rgba(255,255,255,.08); border-left:3px solid rgba(var(--nc), .5); background: rgba(0,0,0,.4);
        transition: all .25s; }
    .nv-chap-row:hover { background: rgba(var(--nc), .1); border-color: rgba(var(--nc), .5); transform: translateX(4px); }
    .nv-chap-row.is-read { opacity:.55; }
    .nv-chap-row .idx { font-family:'Share Tech Mono',monospace; color: rgb(var(--nc)); font-size:11px; min-width:44px; }

    /* ---------- 阅读器 ---------- */
    #nv-reader-bar { position:sticky; top:0; z-index:50; background: rgba(5,5,5,.92); backdrop-filter: blur(10px);
        border-bottom:1px solid rgba(var(--nc), .35); }
    #nv-progress { position:fixed; top:0; left:0; height:2px; z-index:60; background:rgb(var(--nc));
        box-shadow: 0 0 8px rgb(var(--nc)); width:0; transition: width .15s linear; }
    #nv-content { font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun','Noto Serif CJK SC',serif; font-size: var(--nv-fs, 17px); line-height:2.0; color:#d7dee5; }
    #nv-content p { margin: 0 0 1.2em; text-indent: 2em; }
    #nv-content h1,#nv-content h2,#nv-content h3 { font-family:'Orbitron','Microsoft YaHei',sans-serif; color:#fff; margin:1.6em 0 .8em; letter-spacing:.05em; }
    #nv-content img { max-width:100%; border:1px solid rgba(var(--nc), .4); margin:.8em 0; }
    #nv-content blockquote { border-left:3px solid rgb(var(--nc)); padding:6px 14px; margin:1em 0; color:#aab4bd; background:rgba(0,0,0,.35); }
    .nv-fs-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
        font-family:'Share Tech Mono',monospace; border:1px solid rgba(var(--nc), .5); color:rgb(var(--nc));
        background:rgba(0,0,0,.5); cursor:pointer; transition:all .2s; }
    .nv-fs-btn:hover { background:rgba(var(--nc), .18); color:#fff; }
    .nv-btn { display:inline-flex; align-items:center; gap:7px; padding: 10px 18px; cursor:pointer;
        font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:1px; color: rgb(var(--nc));
        background: rgba(0,0,0,.6); border:1px solid rgba(var(--nc), .5);
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        transition: all .25s; white-space:nowrap; }
    .nv-btn:hover { background: rgba(var(--nc), .16); box-shadow: 0 0 16px rgba(var(--nc), .5); color:#fff; }
    .nv-btn:disabled { opacity:.3; cursor:not-allowed; box-shadow:none; }
    .view { animation: nvFade .5s cubic-bezier(.2,.8,.2,1); }
    @keyframes nvFade { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

    /* ---------- 漫画专辑卡片 ---------- */
    .nv-album-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:16px; }
    .nv-album { position:relative; cursor:pointer; border:1px solid rgba(var(--nc), .35); background: rgba(0,0,0,.5);
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        transition: all .25s; }
    .nv-album:hover { transform: translateY(-4px); border-color: rgb(var(--nc)); box-shadow: 0 10px 26px rgba(var(--nc), .3); }
    .nv-album-cover { position:relative; aspect-ratio: 3/4; overflow:hidden; background:#0a0a0a; }
    .nv-album-cover img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
    .nv-album:hover .nv-album-cover img { transform: scale(1.06); }
    .nv-album-kind { position:absolute; top:8px; left:8px; z-index:2; font-family:'Share Tech Mono',monospace;
        font-size:9px; letter-spacing:1px; padding:2px 8px; color: rgb(var(--nc));
        background: rgba(0,0,0,.78); border:1px solid rgba(var(--nc), .6); }
    .nv-album-body { padding:10px 12px 12px; }
    .nv-album-title { font-size:13px; font-weight:700; color:#fff; line-height:1.35; }
    .nv-album-sub { font-family:'Share Tech Mono',monospace; font-size:10px; color: rgb(var(--nc)); margin-top:3px; }
    .nv-album-meta { font-family:'Share Tech Mono',monospace; font-size:9px; color:#6b7280; letter-spacing:1px; margin-top:6px; }
    .nv-album-intro { font-size:11px; color:#9ca3af; line-height:1.55; margin-top:6px;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

    /* ---------- LCD 电子屏数字（斜体电子表字体 + 辉光 + 扫描线） ---------- */
    .nv-lcd-cell { position:relative; overflow:hidden; text-align:center; padding:12px 4px 9px;
        background: #03070a;
        background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
        border:1px solid rgba(var(--nc), .3);
        box-shadow: inset 0 0 18px rgba(0,0,0,.9), inset 0 0 4px rgba(var(--nc), .15); }
    .nv-lcd-cell::after { content:''; position:absolute; inset:0; pointer-events:none;
        background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 45%, transparent 60%); }
    .nv-lcd-num { position:relative; z-index:1; font-size: clamp(26px, 3.2vw, 40px); line-height:1.1;
        color: rgb(var(--nc));
        text-shadow: 0 0 6px rgba(var(--nc), .8), 0 0 18px rgba(var(--nc), .45), 0 0 32px rgba(var(--nc), .25);
        animation: nvLcdFlicker 4.5s infinite steps(1); }
    .nv-lcd-label { position:relative; z-index:1; margin-top:5px; font-size:10px; letter-spacing:2px; color:#8b98a5; }
    @keyframes nvLcdFlicker { 0%,100% { opacity:1; } 92% { opacity:1; } 93% { opacity:.72; } 94% { opacity:1; } 97% { opacity:.85; } 98% { opacity:1; } }

    /* ---------- 专辑角标（与视频区同表现：右上、发光、左下圆角） ---------- */
    .nv-badge { position:absolute; top:0; right:0; z-index:10; padding:2px 8px;
        font-size:10px; font-weight:900; letter-spacing:2px; border-bottom-left-radius:6px; }
    .nv-badge-hot { background:#ff003c; color:#fff; box-shadow:0 0 10px rgba(255,0,60,.8); }
    .nv-badge-new { background:#ffd000; color:#1a1300; box-shadow:0 0 10px rgba(255,208,0,.8); }

    /* ---------- 全屏漫画阅读器 ---------- */
    #cm-viewer { position:fixed; inset:0; z-index:9999; background: rgba(2,3,4,.97);
        display:flex; flex-direction:column; user-select:none; -webkit-user-select:none; }
    #cm-viewer.hidden { display:none !important; }
    #cm-top { display:flex; align-items:center; gap:12px; padding:10px 16px; flex:none;
        background: rgba(0,0,0,.65); border-bottom:1px solid rgba(var(--nc), .3); backdrop-filter: blur(8px); }
    #cm-top button { width:36px; height:36px; flex:none; display:inline-flex; align-items:center; justify-content:center;
        font-size:16px; color: rgb(var(--nc)); background: rgba(0,0,0,.5); border:1px solid rgba(var(--nc), .5);
        cursor:pointer; transition: all .2s; }
    #cm-top button:hover { background: rgba(var(--nc), .18); color:#fff; }
    #cm-title-wrap { flex:1; min-width:0; text-align:center; }
    #cm-series { font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:3px; color:#6b7280; }
    #cm-title { font-size:13px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #cm-zoom-ctrls { display:flex; align-items:center; gap:6px; flex:none; }
    #cm-zoom-label { font-family:'Share Tech Mono',monospace; font-size:10px; color: rgb(var(--nc)); min-width:44px; text-align:center; }
    #cm-stage { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; }
    #cm-img { max-width:100%; max-height:100%; object-fit:contain; will-change: transform; transition: opacity .2s; }
    .cm-zone { position:absolute; top:0; bottom:0; width:15%; z-index:5; cursor:pointer; }
    #cm-zone-l { left:0; } #cm-zone-r { right:0; }
    #cm-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        color: rgb(var(--nc)); font-size:34px; pointer-events:none; }
    #cm-loading i { animation: cmSpin 1s linear infinite; }
    @keyframes cmSpin { to { transform: rotate(360deg); } }
    #cm-bottom { display:flex; align-items:center; gap:14px; padding:12px 16px; flex:none;
        background: rgba(0,0,0,.65); border-top:1px solid rgba(var(--nc), .3); backdrop-filter: blur(8px); }
    .cm-nav { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; flex:none;
        font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:1px; white-space:nowrap;
        color: rgb(var(--nc)); background: rgba(0,0,0,.5); border:1px solid rgba(var(--nc), .5); cursor:pointer; transition: all .2s; }
    .cm-nav:hover { background: rgba(var(--nc), .16); color:#fff; }
    .cm-nav:disabled { opacity:.3; cursor:not-allowed; }
    #cm-slider { flex:1; min-width:0; -webkit-appearance:none; appearance:none; height:3px; outline:none; cursor:pointer;
        background: rgba(var(--nc), .25); }
    #cm-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px;
        background: rgb(var(--nc)); border:2px solid #000; box-shadow: 0 0 8px rgb(var(--nc)); cursor:pointer; }
    #cm-slider::-moz-range-thumb { width:14px; height:14px; border-radius:0;
        background: rgb(var(--nc)); border:2px solid #000; box-shadow: 0 0 8px rgb(var(--nc)); cursor:pointer; }
    #cm-page { font-family:'Share Tech Mono',monospace; font-size:11px; color:#9ca3af; min-width:64px; text-align:center; flex:none; }
    @media (max-width: 640px) {
        #cm-top { gap:8px; padding:8px 10px; }
        #cm-top button { width:32px; height:32px; font-size:14px; }
        #cm-bottom { gap:8px; padding:10px; }
        .cm-nav { padding:7px 10px; font-size:10px; }
        #cm-page { min-width:52px; font-size:10px; }
        .cm-zone { width:22%; }
    }