.manual-preview { display: flex; align-items: center; gap: 12px; padding: 5px 14px; background: #142b21; border: 1px solid #e7d0a629; border-radius: 8px; color: #f5efdc; font: inherit; cursor: pointer; text-align: left; }
.manual-preview img { display: block; width: 38px; height: 51px; object-fit: contain; box-shadow: 0 3px 8px #0005; }
.manual-preview > span { max-width: 88px; font-size: 12px; line-height: 1.5; }
.manual-preview:hover { background: #1d3a2c; border-color: #efc472; }
.manual-preview:focus-visible { outline: 2px solid #efc472; outline-offset: 4px; }
body.viewer-open { overflow: hidden; }
dialog { color: #f5efdc; background: #081b16; border: 1px solid #dfbf763d; border-radius: 10px; padding: 22px; max-height: calc(100svh - 24px); max-width: calc(100vw - 24px); }
dialog::backdrop { background: #010907e8; }
dialog button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
dialog button:focus-visible { outline: 2px solid #efc472; outline-offset: 4px; }
#manual-dialog { width: min(1120px, calc(100vw - 24px)); overflow-y: auto; }
.manual-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.manual-header h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.manual-header p { color: #b6c3ae; font-size: 13px; margin: 8px 0 0; }
.manual-header button, .detail-controls button { border: 1px solid #dfbf763d; border-radius: 5px; padding: 11px 14px; background: #142b21; font-size: 12px; white-space: nowrap; }
.manual-page { position: relative; width: min(100%, 1000px); margin: auto; background: #faf5e9; overflow: hidden; }
.manual-page > img { display: block; width: 100%; height: auto; }
#manual-hotspots { position: absolute; inset: 0; }
.hotspot { position: absolute; border: 2px solid transparent; border-radius: 7px; background: transparent; transition: background .2s, border-color .2s; min-width: 30px; min-height: 30px; }
.hotspot:hover, .hotspot:focus-visible { background: #eac17b25; border-color: #a2752b; outline: none; }
.hotspot span { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #193a2bed; color: #ffe2aa; box-shadow: 0 2px 6px #0004; font-size: 19px; }
#manual-shortcuts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
#manual-shortcuts button { border: 1px solid #dfbf763d; background: #142b21; border-radius: 4px; padding: 12px 16px; font-size: 12px; }
#manual-shortcuts button:hover { border-color: #efc472; }
#detail-dialog { width: min(1180px, calc(100vw - 24px)); overflow-y: auto; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 28px; align-items: start; }
#detail-crop { position: relative; width: 100%; overflow: hidden; background: #faf5e9; }
#detail-image { display: block; position: absolute; height: auto; max-width: none; }
#detail-copy { color: #c4d0bc; font-size: 16px; line-height: 1.8; }
#detail-copy p { margin: 0 0 16px; }
#detail-copy .copy-label { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; color: #efc472; }
.detail-controls { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
#intro-dialog { width: min(760px, calc(100vw - 24px)); padding: 14px; background: #081b16dd; overflow: hidden; border-color: #dfbf762e; }
#intro-dialog::backdrop { background: #010907a8; }
#skip-intro { display: block; margin-left: auto; padding: 10px 14px; border: 1px solid #dfbf763d; border-radius: 5px; background: #142b21; color: #e6d4aa; font-size: 12px; }
#intro-stage { position: relative; height: 320px; width: 100%; overflow: hidden; }
#rick-actor { position: absolute; width: clamp(140px, 28vw, 220px); height: auto; bottom: 14px; left: 12px; transform-origin: 45% 92%; opacity: 0; }
#intro-target { position: absolute; right: 32px; bottom: 38px; width: clamp(70px, 14vw, 110px); height: auto; box-shadow: 0 8px 30px #0006; transform: rotate(-4deg); }
#dynamite-prop { position: absolute; width: 38px; height: 22px; transform-origin: center; }
#dynamite-prop i { position: absolute; width: 33px; height: 9px; left: 0; border-radius: 5px; background: linear-gradient(#e86b4e, #9f261b); border: 1px solid #5d170f; box-shadow: inset 0 1px #ffa888; }
#dynamite-prop i:nth-child(2) { top: 7px; left: 4px; }
#dynamite-prop i:nth-child(3) { top: 14px; }
#dynamite-prop::before { content: ""; position: absolute; width: 5px; height: 29px; left: 14px; top: -3px; z-index: 1; background: #755a36; border-radius: 2px; }
#dynamite-prop::after { content: ""; position: absolute; width: 6px; height: 6px; right: -6px; top: -4px; background: #ffdc77; border-radius: 50%; box-shadow: 0 0 9px 3px #fa8d35; }
#smoke-puff { position: absolute; width: 1px; height: 1px; }
#smoke-puff i { position: absolute; width: 56px; height: 56px; border-radius: 45%; background: radial-gradient(circle at 35% 30%, #fff4d5, #b9af94 65%, #978a72); }
@media (max-width: 850px) {
 .manual-preview { gap: 7px; padding: 5px 9px; }
 .manual-preview > span { font-size: 10px; max-width: 70px; }
 .about-link { font-size: 12px; }
}
@media (max-width: 700px) {
 .dock { grid-template-columns: 1fr 1.1fr 1fr; }
 .visitors { min-width: 0; padding: 8px; }
 .visitors strong { font-size: 18px; }
 .about-link { font-size: 10px; padding: 8px; gap: 5px; }
 .about-link .arrow { font-size: 18px; }
 .manual-preview { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 5px; }
 .manual-preview img { width: 25px; height: 33px; }
 .manual-preview > span { font-size: 9px; max-width: none; }
 .contact-link { grid-column: 1 / -1; }
 .detail-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
 dialog { padding: 14px; }
 .manual-header h2 { font-size: 19px; }
 .manual-header p { font-size: 11px; }
 .manual-header { align-items: flex-start; gap: 12px; }
 #detail-copy { font-size: 15px; }
 .hotspot span { width: 17px; height: 17px; font-size: 14px; right: 0; top: 0; }
 #manual-shortcuts { justify-content: flex-start; gap: 8px; }
 #manual-shortcuts button { padding: 12px; }
 #intro-stage { height: 290px; }
 #intro-target { right: 14px; bottom: 42px; }
}
@media (prefers-reduced-motion: no-preference) {
 #manual-dialog[open] { animation: manual-open .24s ease-out; }
 #detail-dialog[open] { animation: detail-open .2s ease-out; }
 @keyframes manual-open { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
 @keyframes detail-open { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .hotspot { transition: none; } }