/* V2.5: auto-scroll controls only. Original torn-paper sections are unchanged. */
/* Auto-scroll must be instant per animation frame; CSS smooth-scroll would fight it. */
html.show-scrolling { scroll-behavior:auto!important; }
.bottom-bar { gap:7px; }
.presentation-toggle {
  -webkit-appearance:none; appearance:none; flex:0 0 45px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:45px; height:44px; padding:1px 0 0; gap:4px;
  border:0; border-radius:3px; background:transparent; color:#9d3a59;
  font-family:var(--sans); font-size:9px; line-height:1.2;
  -webkit-tap-highlight-color:transparent;
}
.presentation-toggle svg { width:17px; height:17px; }
.presentation-toggle .show-play,.presentation-toggle .show-replay { display:none; }
.presentation-toggle[aria-pressed="false"] .show-pause { display:none; }
.presentation-toggle[aria-pressed="false"] .show-play { display:block; }
[data-show-state="ended"] .presentation-toggle .show-play { display:none; }
[data-show-state="ended"] .presentation-toggle .show-replay { display:block; }
.presentation-toggle:focus-visible { outline:2px solid #b7486a; outline-offset:1px; }
.presentation-toggle:active { background:#f2d5e0; }
.presentation-toggle:disabled { opacity:.55; }
.show-hint {
  position:fixed; z-index:65; left:50%; bottom:calc(82px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,6px); max-width:calc(100vw - 56px);
  display:flex; align-items:center; gap:8px; padding:8px 13px;
  font-size:10px; line-height:1.65; letter-spacing:.025em; white-space:nowrap;
  border:1px solid rgba(226,190,204,.65); border-radius:30px;
  background:rgba(255,250,250,.96); color:#9a425e;
  box-shadow:0 2px 13px rgba(106,46,66,.06);
  opacity:0; pointer-events:none; transition:opacity .4s ease,transform .4s ease;
}
.show-hint.is-visible { opacity:1; transform:translate(-50%,0); }
.show-hint:before { content:""; width:4px; height:4px; border-radius:50%; background:#c8567b; flex-shrink:0; }
@media(max-width:374px) {
  .bottom-bar { gap:6px; padding-left:10px; padding-right:10px; }
  .bottom-bar .bottom-date { flex-basis:51px; margin-right:0; }
  .presentation-toggle { flex-basis:39px; min-width:39px; }
  .bottom-bar .action-btn { font-size:10px; }
}
@media(max-width:340px) {
  .bottom-bar .bottom-date { flex-basis:44px; padding-right:6px; }
  .bottom-bar .action-btn { padding:8px 3px; gap:3px; }
  .bottom-bar .action-btn .icon { width:14px; height:14px; }
}

.bottom-bar { gap:6px; }
.bottom-bar .bottom-date { flex-basis:48px; margin-right:0; }
@media(max-width:374px) { .bottom-bar .bottom-date{flex-basis:42px} .bottom-bar{gap:5px} }
@media(prefers-reduced-motion:reduce) {.show-hint{transition:none} }