.reader-actions { display: flex; justify-content: flex-end; gap: 12px; }
.reader-actions button { min-width: 38px; border: 0; border-bottom: 1px solid #777168; padding: 4px 1px; background: transparent; color: #5e5a53; font: 600 11px/1.2 Arial, sans-serif; letter-spacing: .08em; cursor: pointer; }
.reader-actions button:hover { color: var(--ink); }
.reader-actions button:focus-visible, .contents-panel button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.contents-panel { position: fixed; z-index: 1200; top: 52px; right: max(24px, calc((100vw - 1050px) / 2)); width: 220px; padding: 22px 20px 18px; background: #eee5d4 url("style/paper-grain.svg"); box-shadow: 0 14px 38px rgb(48 39 28 / 24%); }
.contents-panel[hidden] { display: none; }
.contents-panel p { margin: 0 0 15px; padding-bottom: 10px; border-bottom: 1px solid #9c917f; font-size: 17px; font-weight: 600; letter-spacing: .08em; }
.contents-panel button { display: block; width: 100%; border: 0; padding: 9px 0; background: transparent; color: #514b42; font: 500 13px/1.4 inherit; text-align: left; cursor: pointer; }
.contents-panel button:hover { color: var(--blue); }
.swipe-hint { position: fixed; z-index: 1300; left: 50%; bottom: 82px; translate: -50% 0; padding: 10px 16px; background: #28251f; color: #f4ecdd; box-shadow: 0 8px 24px rgb(34 28 20 / 30%); font: 600 12px/1 Arial, sans-serif; letter-spacing: .08em; animation: swipe-hint-in 2.8s cubic-bezier(.16,1,.3,1) both; pointer-events: none; }
.swipe-hint[hidden] { display: none; }
@keyframes swipe-hint-in { 0% { opacity: 0; transform: translateY(12px); } 14%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 700px) { .book-header { grid-template-columns: 1fr auto; } .book-header h1 { justify-self: start; } .reader-actions { grid-column: 2; grid-row: 1; } .reader-actions button { min-width: 44px; min-height: 44px; font-size: 11px; } .contents-panel { top: calc(52px + env(safe-area-inset-top)); right: max(9px, env(safe-area-inset-right)); width: min(260px, calc(100vw - 18px)); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; } }

/* Keep the entire desktop composition in one coordinate system on touch screens. */
.phone-spread .room { position: absolute; left: var(--mobile-canvas-left); top: var(--mobile-canvas-top); width: 1050px; height: 780px; padding: 18px 24px 16px; grid-template-rows: 24px minmax(0, 1fr) 24px; transform-origin: 0 0; transform: scale(var(--mobile-canvas-scale)); }
.phone-spread .stage { min-width: 0; overflow: visible; padding: 12px 0; }
.phone-spread .book-rig { width: 768px; height: 640px; min-width: 768px; transform: none; }
.phone-spread #book { width: 768px !important; min-width: 768px !important; max-width: 768px !important; height: 640px !important; }
.phone-spread .book[data-layout="landscape"][data-edge="front"] { translate: -25% 0; }
.phone-spread .book[data-layout="landscape"][data-edge="back"] { translate: 25% 0; }
.phone-spread .book-header { width: 100%; grid-template-columns: 1fr auto 1fr; min-height: 0; }
.phone-spread .book-header > span:first-child { display: inline; }
.phone-spread .book-header h1 { font-size: 16px; justify-self: center; }
.phone-spread .reader-actions { grid-column: 3; grid-row: 1; }
.phone-spread .reader-actions button { min-height: 0; min-width: 38px; }
.phone-spread .controls { position: absolute; width: 100%; grid-template-columns: 56px 1fr 56px; }
.phone-spread .controls button { width: 56px; height: 132px; font-size: 22px; }
.phone-spread .status { position: absolute; bottom: 14px; }
.phone-spread .contents-panel { position: absolute; top: 52px; right: 24px; width: 220px; }
.phone-spread { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.source-note { position: fixed; z-index: 1400; right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); margin: 0; color: #625e57; font: 500 10px/1.4 Arial, sans-serif; letter-spacing: .04em; pointer-events: none; }
@media (pointer: coarse) { html, body, .phone-spread .book, .phone-spread .stf__parent { touch-action: pan-x pan-y pinch-zoom; } .source-note { font-size: 9px; } }