/* ---------- Mobile first: base styles are for a phone held upright ---------- */
:root {
  --bg1:#0f3d52; --bg2:#06212e; --bg3:#04161f; --fg:#e8f3f6; --muted:#9cc3cf; --accent:#3fb8c9; --on-accent:#04212c;
  --chip:rgba(6,33,46,.6);
  --tap:44px;
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --st:env(safe-area-inset-top,0px);  --sb:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body {
  height:100vh; height:100dvh;
  background:var(--bg2) radial-gradient(ellipse at 50% 30%, var(--bg1), var(--bg2) 75%);
  color:var(--fg); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
header, footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:0 0 auto; }
header { padding:calc(6px + var(--st)) calc(12px + var(--sr)) 6px calc(12px + var(--sl)); }
footer { padding:6px calc(12px + var(--sr)) calc(8px + var(--sb)) calc(12px + var(--sl)); }
header h1 { margin:0; font-size:15px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
header h1 span { display:none; color:var(--muted); font-weight:400; }
.tools { display:flex; gap:8px; }

.btn {
  appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:var(--fg);
  height:var(--tap); min-width:var(--tap); padding:0 12px; border-radius:calc(var(--tap) / 2);
  cursor:pointer; font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  text-decoration:none; touch-action:manipulation;
}
.btn:active { background:rgba(255,255,255,.2); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn .lbl { display:none; }

.stage { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:4px 12px; position:relative; }
#book { margin:0 auto; }
.page { background:#dfe9ec; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.4); }
.page img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

.nav { display:flex; align-items:center; gap:8px; width:100%; }
#pageNum { min-width:64px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; font-size:14px; }
#first, #last, .side { display:none; }
input[type=range] { flex:1 1 0; min-width:0; accent-color:var(--accent); height:var(--tap); margin:0; }

/* Start-up loader: every page is downloaded before the book opens, so turns never wait */
.loader {
  position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--bg2) radial-gradient(ellipse at 50% 30%, var(--bg1), var(--bg2) 75%); transition:opacity .4s ease;
}
.loader.done { opacity:0; pointer-events:none; }
.loader img { height:min(42vh, 260px); aspect-ratio:1241/1754; object-fit:cover; border-radius:4px; filter:blur(3px); box-shadow:0 12px 32px rgba(0,0,0,.45); }
.loader .bar { width:min(260px, 60vw); height:4px; border-radius:2px; background:rgba(255,255,255,.15); overflow:hidden; }
.loader .bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s ease; }
.loader .txt { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }

/* ---------- Rotate prompt (phones held upright) ---------- */
.rotate {
  position:fixed; inset:0; z-index:50; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center;
  padding:calc(24px + var(--st)) 28px calc(24px + var(--sb));
  background:var(--bg3);
}
.rotate h2 { margin:0; font-size:20px; font-weight:600; }
.rotate p { margin:0; color:var(--muted); max-width:300px; }
.rotate .phone {
  width:58px; height:96px; border:3px solid var(--fg); border-radius:12px; position:relative;
  animation:turn 2.4s ease-in-out infinite;
}
.rotate .phone::after { content:""; position:absolute; left:50%; bottom:6px; width:14px; height:3px; margin-left:-7px; border-radius:2px; background:var(--fg); }
@keyframes turn { 0%,20% { transform:rotate(0) } 50%,80% { transform:rotate(-90deg) } 100% { transform:rotate(0) } }
@media (prefers-reduced-motion:reduce) { .rotate .phone { animation:none; transform:rotate(-90deg); } }
.rotate .primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; padding:0 22px; }
.rotate .primary[hidden] { display:none; }
/* Landscape only on phones and tablets (any touch-first device held upright) */
@media (orientation:portrait) and (pointer:coarse) {
  .rotate { display:flex; }
}

/* ---------- Phone in landscape: controls move to side rails, book fills height ---------- */
@media (orientation:landscape) and (max-height:500px) {
  :root { --tap:40px; --rail:calc(60px); }
  header { position:fixed; top:0; right:0; z-index:20; padding:calc(8px + var(--st)) calc(10px + var(--sr)) 0 0; }
  header h1 { display:none; }
  .tools { flex-direction:column; }
  footer, .nav { display:contents; }
  #prev, #next, input[type=range] { display:none; }
  .side { display:inline-flex; position:fixed; top:50%; transform:translateY(-50%); z-index:20; }
  .side.prev { left:calc(10px + var(--sl)); } .side.next { right:calc(10px + var(--sr)); }
  #pageNum { position:fixed; left:calc(6px + var(--sl)); bottom:calc(10px + var(--sb)); width:var(--rail); min-width:0; font-size:12px; z-index:20; }
  #first { display:inline-flex; position:fixed; top:calc(8px + var(--st)); left:calc(10px + var(--sl)); z-index:20; }   /* start over */
  #home { position:fixed; right:calc(10px + var(--sr)); bottom:calc(10px + var(--sb)); z-index:20; }   /* back to all catalogues; clear of the next arrow */
  .stage { padding:8px calc(var(--rail) + var(--sr)) calc(8px + var(--sb)) calc(var(--rail) + var(--sl)); }
}

/* ---------- Upright phone or tablet: the book is drawn sideways (book.js sets html.rot), so the
   reader just turns the device — this also works with rotation lock on. The page is rotated 90deg
   clockwise: its top edge is the screen's right edge. --vw/--vh are the real screen size from JS. ---------- */
html.rot, html.rot body { overflow:hidden; }
html.rot body {
  position:fixed; top:0; left:0; width:var(--vh); height:var(--vw);
  transform-origin:0 0; transform:rotate(90deg) translateY(-100%);
  /* safe areas turn with the page: the notch (screen top) is now on the left */
  --sl:env(safe-area-inset-top,0px); --sr:env(safe-area-inset-bottom,0px); --st:0px; --sb:0px;
}
html.rot .rotate { display:none; }
html.rot .toast { max-width:calc(var(--vh) - 32px); }
/* phones: same side-rail layout as a phone held in landscape (media queries can't see the rotation) */
html.rot-phone { --tap:40px; --rail:calc(60px); }
html.rot-phone header { position:fixed; top:0; right:0; z-index:20; padding:calc(8px + var(--st)) calc(10px + var(--sr)) 0 0; }
html.rot-phone header h1 { display:none; }
html.rot-phone .tools { flex-direction:column; }
html.rot-phone footer, html.rot-phone .nav { display:contents; }
html.rot-phone #prev, html.rot-phone #next, html.rot-phone input[type=range] { display:none; }
html.rot-phone .side { display:inline-flex; position:fixed; top:50%; transform:translateY(-50%); z-index:20; }
html.rot-phone .side.prev { left:calc(10px + var(--sl)); } html.rot-phone .side.next { right:calc(10px + var(--sr)); }
html.rot-phone #pageNum { position:fixed; left:calc(6px + var(--sl)); bottom:calc(10px + var(--sb)); width:var(--rail); min-width:0; font-size:12px; z-index:20; }
html.rot-phone #first { display:inline-flex; position:fixed; top:calc(8px + var(--st)); left:calc(10px + var(--sl)); z-index:20; }
html.rot-phone #home { position:fixed; right:calc(10px + var(--sr)); bottom:calc(10px + var(--sb)); z-index:20; }
html.rot-phone .stage { padding:8px calc(var(--rail) + var(--sr)) calc(8px + var(--sb)) calc(var(--rail) + var(--sl)); }

/* ---------- Words under the icon-only buttons on phones (data-cap set by book.js) ---------- */
@media (orientation:landscape) and (max-height:500px) {
  #first::after, #home::after { content:attr(data-cap); position:absolute; left:50%; transform:translateX(-50%); font-size:10px; line-height:1; color:var(--muted); white-space:nowrap; pointer-events:none; }
  #first::after { top:100%; margin-top:3px; }
  #home::after { bottom:100%; margin-bottom:3px; }
}
html.rot-phone #first::after, html.rot-phone #home::after { content:attr(data-cap); position:absolute; left:50%; transform:translateX(-50%); font-size:10px; line-height:1; color:var(--muted); white-space:nowrap; pointer-events:none; }
html.rot-phone #first::after { top:100%; margin-top:3px; }
html.rot-phone #home::after { bottom:100%; margin-bottom:3px; }

/* ---------- First-visit hint: how to turn pages (book.js adds it once per browser) ---------- */
.hint {
  position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:25;
  padding:16px 22px 14px; border-radius:16px; background:rgba(0,0,0,.66); color:#fff; text-align:center;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
}
.hint.show { opacity:1; }
.hint p { margin:0; font-size:15px; font-weight:500; }
.hint .swipe { position:relative; width:130px; height:36px; margin:0 auto 10px; }
.hint .swipe::before { content:""; position:absolute; left:12px; right:12px; top:50%; height:2px; margin-top:-1px; border-radius:1px; background:rgba(255,255,255,.25); }
.hint .swipe i {
  position:absolute; top:50%; left:96px; width:26px; height:26px; margin-top:-13px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 0 0 7px rgba(255,255,255,.18);
  animation:swipe 1.7s ease-in-out infinite;     /* fingertip moving right → left = next page */
}
@keyframes swipe { 0% { left:96px; opacity:0 } 15% { opacity:1 } 70% { left:8px; opacity:1 } 100% { left:8px; opacity:0 } }

/* turning-phone icon in the "turn sideways" hint; the page is drawn rotated 90deg, so -90deg looks
   upright on the screen and -180deg looks like the phone turned to the left */
.toast .turn { display:inline-block; vertical-align:-5px; width:13px; height:20px; margin-right:10px; border:2px solid currentColor; border-radius:3px; animation:turnSide 2.4s ease-in-out infinite; }
@keyframes turnSide { 0%,20% { transform:rotate(-90deg) } 50%,80% { transform:rotate(-180deg) } 100% { transform:rotate(-90deg) } }
@media (prefers-reduced-motion:reduce) { .hint .swipe i { animation:none; left:8px; } .toast .turn { animation:none; transform:rotate(-180deg); } }

/* ---------- Tablet / desktop ---------- */
@media (min-width:641px) and (min-height:501px) {
  header { padding:calc(10px + var(--st)) calc(16px + var(--sr)) 10px calc(16px + var(--sl)); }
  footer { padding:10px 16px calc(12px + var(--sb)); }
  header h1 span { display:inline; }
  .btn .lbl { display:inline; }
  .nav { width:auto; margin:0 auto; gap:10px; }
  #first, #last { display:inline-flex; }
  input[type=range] { flex:0 0 auto; width:min(320px, 30vw); }
  .side { display:inline-flex; position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%; }
  .side.prev { left:12px; } .side.next { right:12px; }
  .stage { padding:8px 72px; }
}
@media (hover:hover) { .btn:hover { background:rgba(255,255,255,.16); } }
body.at-first #prev, body.at-first #sidePrev, body.at-first #first,
body.at-last #next, body.at-last #sideNext, body.at-last #last { visibility:hidden; pointer-events:none; }

.toast {
  position:fixed; left:50%; bottom:calc(16px + var(--sb)); transform:translate(-50%, 20px); z-index:40;
  width:max-content; max-width:calc(100vw - 32px); padding:10px 14px; border-radius:12px;
  background:rgba(232,243,246,.96); color:var(--bg2); font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }