:root{
  --cream:#fbf6ee; --paper:#fffdf9; --sand:#f1e4cf; --wood:#8a5a32; --wood-d:#5b3a1f; --ink:#3a2715;
  --muted:#8b6f55; --accent:#c9853f; --shadow:0 10px 30px rgba(91,58,31,.14);
  --fh:"Mitr",system-ui,sans-serif; --fb:"Sarabun",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--cream);color:var(--ink);font-family:var(--fb);-webkit-tap-highlight-color:transparent}
body{overflow:hidden}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- library (its own single scroller, fills the frame) ---------- */
.library{position:fixed;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(1200px 400px at 50% -120px,#f3e2c6 0,rgba(243,226,198,0) 70%),var(--cream);
  padding:clamp(16px,3vw,36px) clamp(14px,4vw,48px) 24px}
.lib-head{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto 14px}
.lib-logo{width:56px;height:56px;border-radius:50%;box-shadow:0 4px 14px rgba(91,58,31,.25);flex:none}
.eyebrow{margin:0;font:500 11px/1 var(--fh);letter-spacing:.22em;color:var(--accent)}
.lib-titles h1{margin:4px 0 2px;font:500 clamp(22px,3.2vw,32px)/1.15 var(--fh);color:var(--wood-d)}
.tagline{margin:0;color:var(--muted);font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;max-width:1180px;margin:0 auto 18px}
.chip{border:1px solid #e3cfb1;background:var(--paper);border-radius:999px;padding:6px 14px;font:400 14px var(--fh);color:var(--wood);cursor:pointer;transition:background .15s,color .15s}
.chip[aria-pressed=true]{background:var(--wood);border-color:var(--wood);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:clamp(14px,2vw,24px);max-width:1180px;margin:0 auto}
.card{display:flex;flex-direction:column;background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;border:1px solid #f0e3cf}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(91,58,31,.2)}
.cover{position:relative;aspect-ratio:2/3;background:var(--sand);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.cover.land img{object-fit:contain;background:#efe2cc}
.tag{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font:500 12px var(--fh);padding:3px 10px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.info strong{font:500 15px/1.35 var(--fh);color:var(--wood-d)}
.info .sub{font-size:13px;color:var(--muted);line-height:1.35}
.meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:auto;font-size:12px;color:var(--muted)}
.lb{font:600 10.5px/1 var(--fb);letter-spacing:.04em;padding:4px 6px;border-radius:6px;background:#f4e7d3;color:var(--wood)}
.lb.EN{background:#e6eef3;color:#3d5f74}.lb.ZH{background:#f7e2df;color:#9a3d32}
.actions{display:flex;gap:6px;padding:0 12px 12px}
.btn{flex:1;text-align:center;border:none;border-radius:10px;padding:8px 6px;font:500 13px var(--fh);cursor:pointer;text-decoration:none}
.btn.read{background:var(--wood);color:#fff}
.btn.dl{flex:0 0 auto;background:#f4e7d3;color:var(--wood);padding:8px 10px}
.lib-foot{max-width:1180px;margin:28px auto 0;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- reader (fixed, full height, no page scroll) ---------- */
.reader{position:fixed;inset:0;display:flex;flex-direction:column;background:#f4ebdc;
  background:radial-gradient(ellipse at 50% 40%,#fbf5ea 0,#efe2cc 100%);touch-action:none;user-select:none;-webkit-user-select:none}
.r-top{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));transition:opacity .2s}
.r-title{flex:1;min-width:0;font:500 15px var(--fh);color:var(--wood-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ib{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:38px;min-width:38px;padding:0 8px;border-radius:12px;border:none;
  background:rgba(255,253,249,.85);color:var(--wood-d);cursor:pointer;text-decoration:none;font:500 13px var(--fh);box-shadow:0 1px 4px rgba(91,58,31,.12)}
.ib:hover{background:#fff}
.ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;cursor:pointer}
.view{position:absolute;left:50%;top:50%;display:flex;transform:translate(-50%,-50%);will-change:transform,opacity}
.view img{display:block;width:50%;height:100%;object-fit:fill;background:#fff;-webkit-user-drag:none;pointer-events:none}
.view.single img{width:100%}
.view{box-shadow:0 14px 40px rgba(70,42,18,.28);border-radius:6px;overflow:hidden;background:#fff}
.view.spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:36px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.10) 45%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.10) 55%,rgba(0,0,0,0) 100%)}
.view.in-next{animation:inNext .18s ease-out}
.view.in-prev{animation:inPrev .18s ease-out}
.view.out{animation:out .18s ease-in forwards}
@keyframes inNext{from{opacity:0;transform:translate(calc(-50% + 28px),-50%)}}
@keyframes inPrev{from{opacity:0;transform:translate(calc(-50% - 28px),-50%)}}
@keyframes out{to{opacity:0}}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:64px;border:none;border-radius:14px;background:rgba(255,253,249,.7);
  color:var(--wood-d);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.0;transition:opacity .2s}
.stage:hover .nav{opacity:1}
.nav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nav.prev{left:10px}.nav.next{right:10px}
.nav:disabled{visibility:hidden}
@media (hover:none){.nav{display:none}}
.r-bot{flex:none;display:flex;align-items:center;gap:12px;padding:8px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));transition:opacity .2s}
.reader.chrome-off .r-top,.reader.chrome-off .r-bot{opacity:0;pointer-events:none}
#seek{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--wood) var(--p,0%),#dcc7a8 var(--p,0%))}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--wood);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
#seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--wood);border:3px solid #fff}
.counter{display:flex;align-items:center;gap:2px;font:500 13px var(--fh);color:var(--wood-d);white-space:nowrap}
#jump{width:3.4em;text-align:right;border:none;background:transparent;font:inherit;color:inherit;padding:2px;border-radius:6px}
#jump:focus{outline:2px solid var(--accent);background:#fff}