/* Yalla China — literary pages (classics, literature, hubs): aged paper, dark brown ink, candlelight. */
.lx{
  --ink:#3b2412; --ink-soft:#6b4a2b; --paper:#f3e6c4; --paper-2:#e8d4a2; --edge:#c9a96e;
  --seal:#9e1b1b; --gold:#b8862b; --leather:#2a170b;
  --f-ar:"Amiri","Noto Naskh Arabic","Traditional Arabic","Times New Roman",serif;
  --f-zh:"Songti SC","STSong","SimSun","Noto Serif SC","Noto Serif CJK SC",serif;
  --f-en:Georgia,"Times New Roman",serif;
  position:relative; color:var(--ink); font-family:var(--f-ar);
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(255,248,225,.75), transparent 70%),
    radial-gradient(900px 600px at 100% 100%, rgba(140,98,40,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,84,30,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  min-height:70vh; overflow:hidden;
}
.lx [lang="zh"], .lx .zh { font-family:var(--f-zh); }
.lx [lang="en"], .lx .en { font-family:var(--f-en); }

/* hero — dark leather binding with gold lettering */
.lx-hero{background:radial-gradient(900px 300px at 50% 0%, #5a3418 0%, var(--leather) 70%);color:#f5e3b5;text-align:center;padding:40px 16px 34px;border-bottom:4px double var(--gold)}
.lx-hero h1{font-size:clamp(26px,5vw,40px);margin:0 0 6px;color:#f3d48a;text-shadow:0 2px 0 rgba(0,0,0,.35);text-wrap:balance}
.lx-hero .sub{font-size:15px;opacity:.9;max-width:640px;margin:0 auto;line-height:1.8}
.lx-hero .orn{display:block;color:var(--gold);letter-spacing:.6em;margin-bottom:8px;font-size:14px}

.lx-wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:26px 16px 70px}
.lx-crumb{font-size:14px;margin-bottom:16px}
.lx-crumb a{color:var(--seal);font-weight:700;text-decoration:none}
.lx-note{font-size:13px;color:var(--ink-soft);background:rgba(255,250,235,.6);border:1px dashed var(--edge);border-radius:10px;padding:10px 14px;margin-bottom:22px;line-height:1.8}
.lx-note a{color:var(--seal);font-weight:700}

/* cards: works, books, hub icons */
.lx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.lx-card{position:relative;display:block;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#fbf3dc,#f1e2b8);border:1px solid var(--edge);border-radius:6px;padding:20px 18px 16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 14px rgba(70,40,10,.12);transition:transform .2s ease, box-shadow .2s ease}
.lx-card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(160,120,60,.35);border-radius:3px;pointer-events:none}
.lx-card:hover,.lx-card:focus-visible{transform:translateY(-4px) rotate(-.3deg);box-shadow:0 16px 30px rgba(70,40,10,.22),0 0 0 2px rgba(184,134,43,.35)}
.lx-card .t{font-size:21px;font-weight:700;line-height:1.5}
.lx-card .zh{font-size:17px;color:var(--seal);margin-top:2px}
.lx-card .m{font-size:13px;color:var(--ink-soft);margin-top:10px;line-height:1.7}
.lx-card .seal{position:absolute;top:12px;inset-inline-end:12px;width:30px;height:30px;border-radius:6px;background:var(--seal);color:#fbe9c9;display:grid;place-items:center;font-family:var(--f-zh);font-size:15px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.lx-card .sum{font-size:14px;line-height:1.9;margin-top:10px}
.lx-card details summary{cursor:pointer;color:var(--seal);font-weight:700;font-size:13px;margin-top:8px}

/* chapter list */
.lx-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.lx-ch{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:rgba(255,250,232,.75);border:1px solid var(--edge);border-radius:8px;padding:12px 14px;transition:transform .15s ease, background .15s, box-shadow .15s}
.lx-ch:hover,.lx-ch:focus-visible{transform:translateX(-3px);background:#fff8e4;box-shadow:0 8px 18px rgba(70,40,10,.16)}
[dir="ltr"] .lx-ch:hover,[dir="ltr"] .lx-ch:focus-visible{transform:translateX(3px)}
.lx-ch .n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--seal);color:#fbe9c9;display:grid;place-items:center;font-size:13px;font-weight:700;font-family:var(--f-en);font-variant-numeric:tabular-nums}
.lx-ch .tt{font-size:17px;font-weight:700;line-height:1.45}
.lx-ch .zh{display:block;font-size:13px;color:var(--ink-soft);margin-top:1px}

/* reader — book pages */
.lx-langs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lx-langs label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;background:rgba(255,250,232,.8);border:1px solid var(--edge);border-radius:20px;padding:6px 14px;cursor:pointer}
.lx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.lx-page{position:relative;background:linear-gradient(180deg,#fdf6e1,#f4e5bd);border:1px solid var(--edge);border-radius:4px;padding:30px 28px;box-shadow:0 18px 40px rgba(70,40,10,.18), 0 0 0 6px rgba(255,248,225,.5) inset;min-width:0}
.lx-page h3{font-size:13px;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 6px;text-align:center}
.lx-page h2{font-size:22px;text-align:center;margin:0 0 6px;color:var(--seal)}
.lx-page .orn{text-align:center;color:var(--gold);margin:0 0 16px}
.lx-page p{margin:0 0 14px;line-height:2.05;overflow-wrap:anywhere}
.lx-page.zh p{font-size:19px;text-indent:2em}
.lx-page.ar p{font-size:19px}
.lx-page.en p{font-size:17px}
.lx-pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}
.lx-pager a{display:inline-flex;flex-direction:column;gap:2px;padding:12px 18px;border-radius:8px;background:var(--leather);color:#f3d48a;text-decoration:none;font-weight:700;border:1px solid var(--gold);max-width:48%}
.lx-pager a small{font-size:12px;color:#d9c08a;font-weight:400}
.lx-pager a:hover,.lx-pager a:focus-visible{background:#4a2a12}
.lx-empty{text-align:center;padding:60px 16px;color:var(--ink-soft);font-size:17px}
.lx-search{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.lx-search input{flex:1 1 260px;min-width:0;padding:12px 16px;border:1px solid var(--edge);border-radius:8px;background:#fffaf0;font:inherit;font-size:16px;color:var(--ink)}
.lx-search button{padding:12px 20px;border:1px solid var(--gold);border-radius:8px;background:var(--leather);color:#f3d48a;font:inherit;font-weight:700;cursor:pointer}

/* big hub icons */
.lx-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:900px;margin:0 auto}
.lx-hub a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 22px;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,#fbf3dc,#efdcae);border:1px solid var(--edge);border-radius:10px;box-shadow:0 10px 24px rgba(70,40,10,.16);transition:transform .2s ease, box-shadow .2s ease}
.lx-hub a:hover,.lx-hub a:focus-visible{transform:translateY(-6px);box-shadow:0 22px 40px rgba(70,40,10,.26),0 0 0 2px rgba(184,134,43,.45)}
.lx-hub .ico{font-size:52px;line-height:1;filter:drop-shadow(0 4px 6px rgba(70,40,10,.25))}
.lx-hub .t{font-size:24px;font-weight:700}
.lx-hub .zh{font-size:16px;color:var(--seal)}
.lx-hub .s{font-size:14px;color:var(--ink-soft);line-height:1.8}
.lx-hub .n{font-size:13px;font-weight:700;color:var(--seal)}

/* candle — desktop only, beside the page */
.lx-candle{position:fixed;bottom:30px;inset-inline-start:26px;z-index:2;width:46px;pointer-events:none;display:none}
.lx-candle .flame{position:relative;width:18px;height:38px;margin:0 auto;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 80%, #fff 0%, #ffe9a8 25%, #ffb347 55%, rgba(255,120,30,.6) 75%, transparent 80%);
  filter:blur(.3px);transform-origin:50% 100%;animation:lxFlicker 2.4s infinite ease-in-out}
.lx-candle .wick{width:2px;height:8px;background:#2b1b10;margin:-2px auto 0}
.lx-candle .wax{width:40px;height:120px;margin:0 auto;border-radius:6px 6px 4px 4px;background:linear-gradient(90deg,#efe2c4 0%,#fffaf0 40%,#e6d4ab 100%);box-shadow:inset 0 6px 6px -4px rgba(0,0,0,.15)}
.lx-candle .wax::before{content:"";display:block;width:12px;height:22px;margin-inline-start:22px;border-radius:0 0 8px 8px;background:#fbf3df}
.lx-candle .holder{width:70px;height:12px;margin:0 -12px;border-radius:50%;background:linear-gradient(#b8862b,#6b4a1b)}
.lx-glow{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:radial-gradient(520px 520px at 60px calc(100% - 160px), rgba(255,190,90,.28), transparent 70%);animation:lxGlow 2.4s infinite ease-in-out}
[dir="rtl"] .lx-glow{background:radial-gradient(520px 520px at calc(100% - 60px) calc(100% - 160px), rgba(255,190,90,.28), transparent 70%)}
@keyframes lxFlicker{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.96,1.04) rotate(1.5deg)}50%{transform:scale(1.03,.97) rotate(-.5deg)}75%{transform:scale(.98,1.03) rotate(1deg)}}
@keyframes lxGlow{0%,100%{opacity:.9}50%{opacity:.7}}
@media (min-width:1280px){.lx-candle,.lx-glow{display:block}}
@media (prefers-reduced-motion:reduce){.lx-candle .flame,.lx-glow{animation:none}.lx-card,.lx-ch,.lx-hub a{transition:none}.lx-card:hover,.lx-ch:hover,.lx-hub a:hover{transform:none}}