/* ぴよぴよホームズ 歌集閲覧室 — 共通スタイル */
:root{
  --stage:#17130f;
  --stage-hi:#2b2219;
  --paper:#e9e4d8;
  --chrome:#d9ccb3;
  --chrome-dim:#8d7f6a;
  --kin:#c9a227;
  --serif:'Noto Serif JP','Hiragino Mincho ProN',serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --sans:'Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
  --vpad:72px;   /* 上下バーぶんの余白 */
  --hpad:18px;
}

@view-transition{ navigation:auto; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--stage);color:var(--chrome);overscroll-behavior:none}
body{font-family:var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}

.stage{
  position:fixed;inset:0;height:100dvh;overflow:hidden;
  touch-action:pinch-zoom;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background:
    radial-gradient(120% 70% at 50% 18%, var(--stage-hi) 0%, rgba(43,34,25,0) 65%),
    var(--stage);
}

/* ===== 机（本の置き場） ===== */
.desk{position:absolute;inset:0;display:grid;place-items:center;padding:var(--vpad) var(--hpad)}
.book{
  position:relative;
  aspect-ratio:var(--ratio);
  width:min(calc(100vw - 2*var(--hpad)), calc((100dvh - 2*var(--vpad)) * var(--ratio)));
  perspective:2200px;
  perspective-origin:50% 50%;
  transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.book.nudge{transition:none}

/* 残りページの厚み（左下にわずかに覗く） */
.stack{
  position:absolute;inset:0;border-radius:2px;
  background:#d9d2c3;
  box-shadow:-2px 2px 0 #cdc5b3, -4px 4px 0 #bfb6a3;
  transform:translate(calc(-3px * var(--rest,1)), calc(3px * var(--rest,1)));
  opacity:var(--rest,1);
  z-index:0;
}

/* ===== 紙 ===== */
.leaf{
  position:absolute;inset:0;border-radius:2px;overflow:hidden;
  background:var(--paper);
  transform-origin:100% 50%;              /* 右綴じ：右端が背 */
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
  will-change:transform;
}
.leaf img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none;z-index:1;
}
/* ::before = 下の紙に落ちる影（背側から）  ::after = めくれている紙の陰り */
.leaf::before,.leaf::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2}
.leaf::before{
  background:linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,.18) 30%, transparent 62%);
  opacity:var(--cast,0);
}
.leaf::after{
  background:linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.1) 40%, transparent 75%);
  opacity:var(--shade,0);
}
.leaf.under{z-index:1}
.leaf.top{z-index:2}
.leaf.over{z-index:3;visibility:hidden;transform:rotateY(90deg)}
.leaf.hidden{visibility:hidden}

/* ===== 上下のバー ===== */
.bar{
  position:absolute;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  transition:opacity .35s ease;
}
.bar-top{
  top:0;height:calc(58px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  background:linear-gradient(to bottom, rgba(23,19,15,.92), rgba(23,19,15,0));
}
.bar-bottom{
  bottom:0;height:calc(52px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  justify-content:center;
  background:linear-gradient(to top, rgba(23,19,15,.92), rgba(23,19,15,0));
}
.stage.quiet .bar{opacity:0;pointer-events:none}

.bar-title{display:flex;flex-direction:column;gap:3px;padding-left:4px;min-width:0}
.bar-series{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--chrome-dim);white-space:nowrap}
.bar-name{font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--chrome);white-space:nowrap}
.bar-close{
  flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  color:var(--chrome);text-decoration:none;border-radius:50%;
  font:300 28px/1 var(--serif);
}
.bar-close:active{background:rgba(255,255,255,.08)}
.bar-close:focus-visible,.bar a:focus-visible{outline:2px solid var(--kin);outline-offset:2px}
.counter{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--chrome-dim)}

/* 読み進み（右綴じなので右から満ちる） */
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06);z-index:6}
.progress i{position:absolute;right:0;top:0;bottom:0;width:0;background:var(--kin);opacity:.6;transition:width .3s ease}

/* ===== 最初のひとこと ===== */
.hint{
  position:absolute;top:100%;left:0;right:0;margin-top:16px;
  text-align:center;font-size:11px;letter-spacing:.12em;color:var(--chrome-dim);
  transition:opacity .45s ease;white-space:nowrap;
}
.hint.off{opacity:0}
.hint-arrow{display:inline-block;margin-left:4px;animation:nudge 1.5s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* 横持ち：バーの余白を詰めて本を大きく */
@media (orientation:landscape) and (max-height:520px){
  :root{--vpad:14px;--hpad:14px}
  .hint{display:none}
  .bar-top,.bar-bottom{background:none}
  .bar-bottom{justify-content:flex-start;padding-left:18px}
}

@media (prefers-reduced-motion:reduce){
  .hint-arrow{animation:none}
  .book{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}