/* ============================================================
   themes.css — темы оформления 字里行间
   1. Светлая тема (宣纸)
   2. Темы читалки (宣纸 / 墨 / 竹简 / 黛夜)
   3. Кнопка темы и выбор темы читалки
   4. Блок «История недели» и украшения главной
   5. Прогресс чтения
   ============================================================ */

/* ---------- 0. ТЁМНАЯ ТЕМА: токены, которые раньше были только в светлой.
   Правила ниже используют ink, hair, wx, cinnabar; без тёмных значений они
   давали прозрачные фоны (напр. плашка «本周故事» в тёмной теме). */
html[data-theme="dark"] {
    --ink0: #12161e;
    --ink0-rgb: 18 22 30;
    --surf2-rgb: 23 28 38;
    --ink1: #171c26;
    --ink2: #202734;
    --ink3: #2a3242;
    --hair: rgba(255, 255, 255, .10);
    --wx: 236, 235, 229;
    --cinnabar: #e2603f;
    --cinnabar2: #ff8363;
}

/* ---------- 1. СВЕТЛАЯ ТЕМА · 宣纸 ---------- */
html[data-theme="light"] {
    --ink0: #ece5d2;
    --ink0-rgb: 236 229 210;
    --surf2-rgb: 255 253 248;
    --ink1: #faf6ea;
    --ink2: #f1e9d5;
    --ink3: #e2d7ba;
    --tx: #2d2721;
    --tx2: #857b66;
    --hair: rgba(148, 108, 46, .30);
    --wx: 48, 41, 30;
    --gold: #a97a1f;
    --cinnabar: #cf3d22;
    --cinnabar2: #d84a2b;
    --jade: #2c9465;
}

html[data-theme="light"] body {
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(216, 162, 74, .18), transparent 60%),
        radial-gradient(900px 700px at -10% 100%, rgba(226, 73, 47, .12), transparent 55%),
        radial-gradient(1400px 900px at 50% 40%, rgba(120, 140, 100, .12), transparent 70%),
        var(--ink0);
}

html[data-theme="light"] ::selection {
    background: rgba(226, 73, 47, .30)
}

html[data-theme="light"] * {
    scrollbar-color: rgba(48, 41, 30, .22) transparent;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(48, 41, 30, .22);
    background-clip: padding-box;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(48, 41, 30, .38);
    background-clip: padding-box;
}

/* шапка и панель читалки — светлое стекло */
html[data-theme="light"] .top {
    background: rgba(250, 246, 234, .96);
    border-bottom: 1px solid var(--hair);
}

html[data-theme="light"] .rbar {
    background: rgba(250, 246, 234, .97);
}

/* чернильная строка кистью — в светлой теме тёмные чернила */
html[data-theme="light"] .brush-line {
    color: #57492f;
}

html[data-theme="light"] .continue-strip .zh {
    color: #b03a20;
}

/* мягкие тени вместо чёрных */
html[data-theme="light"] .card:hover {
    box-shadow: 0 18px 42px rgba(101, 78, 38, .2), 0 4px 12px rgba(101, 78, 38, .12);
}

html[data-theme="light"] .gtile:hover {
    box-shadow: 0 8px 22px rgba(101, 78, 38, .18);
}

/* ---------- 2. ТЕМЫ ЧИТАЛКИ ---------- */

/* 墨 · чернила (тёмная) */
.sheet[data-rtheme="ink"] {
    --rs-bg1: #1e222b;
    --rs-bg2: #141820;
    --rs-tx: #e7dfcc;
    --rs-sub: #c8a86a;
    --rs-sub2: #9a8f76;
    --rs-accent: #cf9250;
    --rs-btn: rgba(255, 255, 255, .10);
    --rs-hair: rgba(255, 255, 255, .12);
    --rs-py: #cba36a;
    --rs-lit: #ff8a5f;
    --rs-jade: #5cc795;
    --rs-seal-bg: #c9402a;
    --rs-seal-tx: #fff6ea;
    --rs-glyph: rgba(255, 255, 255, .06);
    --rs-shadow: rgba(0, 0, 0, .6);
}

/* 竹简 · бамбуковые дощечки (сепия) */
.sheet[data-rtheme="bamboo"] {
    --rs-bg1: #eeddb2;
    --rs-bg2: #dec692;
    --rs-tx: #42331a;
    --rs-sub: #7d5a24;
    --rs-sub2: #96805a;
    --rs-accent: #8a6224;
    --rs-btn: rgba(255, 250, 235, .5);
    --rs-hair: rgba(122, 86, 34, .26);
    --rs-py: #8a6224;
    --rs-lit: #a03415;
    --rs-jade: #2e7d57;
    --rs-seal-bg: #b0341c;
    --rs-seal-tx: #fdf1dc;
    --rs-glyph: rgba(122, 86, 34, .13);
    --rs-shadow: rgba(90, 65, 25, .35);
}

/* 黛夜 · индиго-ночь */
.sheet[data-rtheme="night"] {
    --rs-bg1: #202a3e;
    --rs-bg2: #161d2c;
    --rs-tx: #cdd7ea;
    --rs-sub: #90a5cf;
    --rs-sub2: #707fa0;
    --rs-accent: #7e9bd4;
    --rs-btn: rgba(255, 255, 255, .08);
    --rs-hair: rgba(150, 175, 220, .16);
    --rs-py: #9cb3dd;
    --rs-lit: #ff7a5c;
    --rs-jade: #63c99a;
    --rs-seal-bg: #c9402a;
    --rs-seal-tx: #fff6ea;
    --rs-glyph: rgba(160, 185, 230, .08);
    --rs-shadow: rgba(5, 10, 20, .65);
}

/* ---------- 3. КНОПКА ТЕМЫ / ВЫБОР ТЕМЫ ЧИТАЛКИ ---------- */
.theme-btn .sun-i,
.theme-btn .moon-i {
    display: none;
}

html[data-theme="light"] .theme-btn .sun-i {
    display: block;
}

html:not([data-theme="light"]) .theme-btn .moon-i {
    display: block;
}

.theme-btn {
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1)
}

.theme-btn:hover {
    transform: rotate(18deg) scale(1.08)
}

/* выпадашка тем читалки */
.rt-wrap {
    position: relative;
}

.rt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ink2);
    border: 1px solid rgb(var(--wx) / .09);
    font-weight: 800;
    font-size: 13px;
    transition: .2s;
}

.rt-btn:hover {
    background: var(--ink3);
}

.rt-btn .rt-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--wx) / .25);
    background: linear-gradient(160deg, #f7efdb, #ecdfc2);
}

.rt-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 208px;
    background: var(--ink1);
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    padding: 8px;
    z-index: 50;
    display: none;
}

.rt-menu.on {
    display: block;
    animation: rtIn .18s ease;
}

@keyframes rtIn {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.rt-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    transition: .15s;
}

.rt-item:hover {
    background: var(--ink2);
}

.rt-item.on {
    background: color-mix(in srgb, var(--gold) 16%, var(--ink2));
    box-shadow: inset 0 0 0 1px var(--hair);
}

.rt-item .sw {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--wx) / .25);
    flex: none;
}

.rt-item .sw[data-th="paper"] {
    background: linear-gradient(160deg, #f7efdb, #ecdfc2);
}

.rt-item .sw[data-th="ink"] {
    background: linear-gradient(160deg, #262b36, #141820);
}

.rt-item .sw[data-th="bamboo"] {
    background: linear-gradient(160deg, #eeddb2, #d9bd85);
}

.rt-item .sw[data-th="night"] {
    background: linear-gradient(160deg, #273349, #161d2c);
}

.rt-item small {
    margin-left: auto;
    color: var(--tx2);
    font-family: 'Noto Serif SC';
    font-size: 13px;
}

.rt-item.on small {
    color: var(--gold);
}

/* свотчи в настройках */
.ap-swatches {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ap-sw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--hair);
    background: var(--ink2);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx2);
    transition: .2s;
    min-width: 76px;
}

.ap-sw:hover {
    transform: translateY(-2px);
}

.ap-sw.on {
    border-color: var(--gold);
    color: var(--tx);
    box-shadow: 0 6px 18px rgba(216, 162, 74, .18);
}

.ap-sw i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--wx) / .2);
}

.ap-sw[data-th="paper"] i {
    background: linear-gradient(160deg, #f7efdb, #ecdfc2);
}

.ap-sw[data-th="ink"] i {
    background: linear-gradient(160deg, #262b36, #141820);
}

.ap-sw[data-th="bamboo"] i {
    background: linear-gradient(160deg, #eeddb2, #d9bd85);
}

.ap-sw[data-th="night"] i {
    background: linear-gradient(160deg, #273349, #161d2c);
}

.ap-sw .zh {
    font-size: 14px;
}

/* сегмент выбора светлой/тёмной темы приложения */
.ap-seg {
    display: inline-flex;
    background: var(--ink2);
    border: 1px solid rgb(var(--wx) / .09);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.ap-seg button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 9px;
    font-weight: 800;
    font-size: 13px;
    color: var(--tx2);
    transition: .2s;
}

.ap-seg button.on {
    background: var(--gold);
    color: #241a08;
}

/* ---------- 4. «ИСТОРИЯ НЕДЕЛИ» ---------- */
.week-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--hair);
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(216, 162, 74, .12), transparent 60%),
        var(--ink1);
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease, box-shadow .3s;
}

.week-hero.in {
    opacity: 1;
    transform: none;
}

.week-hero:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.week-info {
    padding: clamp(22px, 3.6vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.week-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.week-seal {
    background: linear-gradient(150deg, var(--cin2), var(--cin));
    color: #fff6ea;
    font-family: 'Noto Serif SC';
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    padding: 8px 9px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(226, 73, 47, .35);
    transform: rotate(-4deg);
}

.week-tag {
    font-family: 'Unbounded';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
}

.week-tag small {
    display: block;
    letter-spacing: .35em;
    color: var(--tx2);
    font-size: 10px;
    margin-top: 2px;
}

.week-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.week-title .zh {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    color: var(--tx);
}

.week-title .ru {
    font-family: 'Unbounded';
    font-weight: 900;
    font-size: clamp(16px, 2vw, 21px);
    color: var(--tx2);
}

.week-desc {
    color: var(--tx2);
    line-height: 1.65;
    font-size: 13.5px;
    max-width: 480px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.week-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--tx2);
}

.week-meta .chip.g {
    position: static;
    background: color-mix(in srgb, var(--gc, var(--gold)) 82%, #000);
    color: #fff;
}

.week-meta .chip.l {
    position: static;
    background: rgb(var(--wx) / .10);
}

.week-cta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.week-cta .btn.pri {
    box-shadow: 0 8px 22px rgba(226, 73, 47, .30);
}

.week-cta .week-note {
    font-size: 11.5px;
    color: var(--tx2);
}

/* обложка справа */
.week-cover {
    position: relative;
    min-height: 240px;
    overflow: hidden;
}

.week-cover svg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
}

.week-cover .glyph {
    position: absolute;
    top: -30px;
    right: 6px;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 160px;
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    pointer-events: none;
    transform: rotate(6deg);
}

/* вертикальная китайская подпись на кромке обложки */
.week-vert {
    position: absolute;
    left: 14px;
    top: 16px;
    writing-mode: vertical-rl;
    font-family: 'Noto Serif SC';
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .42em;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    z-index: 2;
}

.week-cover .rate-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
}

@media (max-width: 760px) {
    .week-hero {
        grid-template-columns: 1fr;
    }

    .week-cover {
        min-height: 130px;
        order: -1;
    }

    .week-cover .glyph {
        font-size: 110px;
        top: -24px;
    }

    .week-vert {
        writing-mode: horizontal-tb;
        letter-spacing: .3em;
    }
}

/* ---------- 5. ПРОГРЕСС ЧТЕНИЯ ---------- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}

.read-progress.on {
    opacity: 1;
}

.read-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--cinnabar), var(--gold));
    box-shadow: 0 0 12px rgba(216, 162, 74, .55);
    transition: width .12s linear;
}

/* ---------- декор: вертикальная подпись в hero главной ---------- */
.shelf-head {
    position: relative;
}

.shelf-head::after {
    content: '字里行间';
    position: absolute;
    right: 0;
    top: 0;
    writing-mode: vertical-rl;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 21px;
    letter-spacing: .5em;
    color: rgb(var(--wx) / .10);
    user-select: none;
    pointer-events: none;
}

@media (max-width: 900px) {
    .shelf-head::after {
        display: none;
    }
}