/* Flipbook reader */
html,body.book{height:100%;overflow:hidden}
body.book{width:100%;background:radial-gradient(1200px 700px at 50% 40%, #2f6a4c 0%, #1E4733 55%, #132c20 100%);color:var(--cream);
  display:flex;flex-direction:column;touch-action:manipulation}

.bar{height:56px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;background:rgba(10,28,19,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(253,247,229,.08);z-index:5}
.bar .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:inherit}
.bar .brand img{width:38px;height:38px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:none}
.bar .brand span{font:600 17px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--cream);
  border:0;cursor:pointer;text-decoration:none;flex:none;transition:background .15s}
.tb:hover{background:rgba(255,255,255,.12)}
.tb svg{width:20px;height:20px}
.tb:disabled{opacity:.35;cursor:default}
.lang{display:flex;background:rgba(253,247,229,.12);border-radius:999px;padding:3px;flex:none;margin-right:2px}
.lang button{font:700 12px/1 var(--body);letter-spacing:.08em;color:var(--cream);background:transparent;border:0;
  padding:8px 11px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.lang button.on{background:var(--cream);color:var(--green-deep)}

.stage{flex:1;min-height:0;width:100%;align-self:stretch;position:relative;display:flex;align-items:center;justify-content:center;padding:10px 12px}
.stage.loading::after{content:"";width:42px;height:42px;border-radius:50%;border:4px solid rgba(253,247,229,.2);
  border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.book{position:relative;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.pg{background:#f3eee0;overflow:hidden}
.pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;user-select:none;-webkit-user-drag:none}
.pg.ready img{opacity:1}
.pg .links{position:absolute;inset:0}
.pg .links a{position:absolute;display:block;border-radius:3px;cursor:pointer;-webkit-tap-highlight-color:rgba(254,155,33,.3)}
.pg .links a:hover,.pg .links a:focus-visible{background:rgba(254,155,33,.22);outline:2px solid rgba(254,155,33,.8)}
.msg{text-align:center}

.foot{height:52px;flex:none;display:flex;align-items:center;justify-content:center;gap:6px;z-index:5}
.foot .count{font:500 14px/1 var(--body);min-width:120px;text-align:center;font-variant-numeric:tabular-nums;opacity:.9}
.hint{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);background:rgba(10,28,19,.75);color:var(--cream);
  font-size:13px;padding:8px 14px;border-radius:999px;pointer-events:none;transition:opacity .6s;white-space:nowrap;z-index:6}
.hint.hide{opacity:0}

/* modal */
.modal{position:fixed;inset:0;background:rgba(8,20,14,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.open{display:flex}
.modal .box{background:#fff;color:var(--ink);width:100%;max-width:460px;border-radius:20px;padding:22px 18px 22px;position:relative;
  max-height:calc(100vh - 32px);overflow:auto;text-align:left}
.modal h4{font:600 22px/1.2 var(--display);color:var(--green-deep);margin:0 0 14px;padding-right:30px}
.modal .close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--ink)}
.modal .embedbox{width:100%;height:76px;margin:8px 0 10px;font:13px/1.3 ui-monospace,Consolas,monospace;padding:10px;border-radius:10px;
  border:1px solid #d9cfb4;background:var(--cream);color:var(--ink);resize:none}
.modal .btn-ghost{color:var(--green-deep)}
.modal .qrimg{width:220px;height:220px;margin:4px auto 6px;display:block;border-radius:12px;border:1px solid #eadfc4;padding:8px;background:#fff}
.modal .qrurl{text-align:center;font:500 13px var(--body);color:#6b6766;margin:0 0 14px;word-break:break-all}
.modal .qrimg + .qrurl + .btn{display:flex;width:max-content;margin:0 auto}

@media (max-width:640px){
  .bar{gap:2px;padding:0 6px 0 8px}
  .bar .brand span{display:none}
  .bar .brand img{width:34px;height:34px}
  .tb{width:38px;height:38px}
  #btn-full{display:none}
  .lang button{padding:8px 9px}
  .stage{padding:6px 4px}
  .foot{height:48px}
}
@media (max-width:360px){ #btn-dl{display:none} }