#answerBook{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:auto;background:#201c2c url('assets/tarot-table.webp') center/cover no-repeat;color:#f6e1bc;isolation:isolate}
#answerBook::backdrop{background:#171320}
.book-room-shade{position:absolute;inset:0;background:linear-gradient(#16122250,transparent 45%,#1c112043);z-index:-1;pointer-events:none}
.book-layout{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:76px 18px 22px}
#bookBack{position:absolute;top:24px;left:28px;z-index:10;border:1px solid #c8a674;border-radius:30px;background:#211c29b8;color:#f3dfb9;padding:10px 22px;font:16px/1.5 SimSun,serif}
.book-heading{display:block;text-align:center;flex:none}
#bookTitle{font:400 clamp(22px,2.1vw,36px)/1.5 SimSun,'Noto Serif SC',serif;letter-spacing:.12em;margin:0;text-shadow:0 2px 9px #160e24}
.book-heading::after{content:'✧';display:block;color:#c4a06b;margin-top:7px;font-size:15px}
#bookStage{position:relative;width:min(88vw,calc((100dvh - 260px)*2.23),1500px);aspect-ratio:2.23;container-type:inline-size;flex:none;perspective:1500px;filter:drop-shadow(0 18px 15px #100a1677)}
.book-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.book-right-copy{position:absolute;left:54.5%;top:12%;width:31%;height:62%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#4d291b;pointer-events:none}
.book-response-label{font:400 clamp(10px,1.1cqw,18px)/1.5 SimSun,serif;letter-spacing:.12em;white-space:nowrap;margin:0 0 16px;color:#815c32}
.book-response-label::before,.book-response-label::after{content:' — ';color:#bc965d}
#bookAnswer{font:400 clamp(12px,2.6cqw,42px)/1.7 SimSun,'Noto Serif SC',serif;margin:0;letter-spacing:.035em;text-wrap:balance;overflow-wrap:anywhere}
.book-answer-star{color:#b78d4d;font-size:clamp(12px,1.4cqw,22px);margin-top:16px}
#bookNumber{position:absolute;left:71%;bottom:16%;color:#ad7e3e;font:400 clamp(9px,1cqw,15px)/1.5 Georgia,serif;letter-spacing:.18em;pointer-events:none}
#bookTap{position:absolute;inset:0;border:0;background:transparent;border-radius:12px;cursor:pointer;z-index:4;touch-action:manipulation}
#bookTap:focus-visible{outline:2px solid #f3d69e;outline-offset:8px}
.book-stopped #bookTap{cursor:default}
#bookTurning{position:absolute;inset:0;pointer-events:none;perspective:1500px;z-index:3}
.book-turning-sheet{position:absolute;left:49.4%;top:4.5%;width:44.8%;height:82.5%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform;pointer-events:none}
.book-sheet-front,.book-sheet-back{position:absolute;inset:0;border-radius:35% 5% 6% 2% / 5% 4% 3% 3%;background:linear-gradient(90deg,#b58d59 0%,#e6c99d 3%,#fae8ca 13%,#f6dfb9 75%,#ddbb85 99%);box-shadow:4px 5px 9px #40281140;backface-visibility:hidden;border:1px solid #d4b27c}
.book-sheet-front::before,.book-sheet-back::before{content:'';position:absolute;inset:6%;border:1px solid #c59f6677;border-radius:6px}
.book-sheet-front::after,.book-sheet-back::after{content:'✧';position:absolute;top:42%;left:49%;font-size:25px;color:#c0975e}
.book-sheet-back{transform:rotateY(180deg);background:linear-gradient(90deg,#efcf9d,#f9e8cc 25%,#efd6b2 85%,#b68c56)}
#answerBook:not(.book-stopped) .book-right-copy{visibility:hidden}
.book-footer{text-align:center;flex:none;max-width:94vw}
#bookHint{font:400 clamp(12px,1.15vw,18px)/1.8 SimSun,serif;letter-spacing:.07em;margin:0 0 16px;color:#f3e2c6;text-shadow:0 1px 8px #1c0d20}
#bookActions{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}
#bookActions[hidden]{display:none}
#bookActions button{min-width:170px;padding:11px 28px;border-radius:30px;border:1px solid #b38a58;background:#f9e9cd;color:#4b2b22;font:400 clamp(15px,1.4vw,22px)/1.5 SimSun,serif;box-shadow:inset 0 0 0 3px #fdf5e5,0 5px 15px #170e242e;transition:transform .2s,background .2s}
#bookActions button:hover:enabled{transform:translateY(-2px);background:#ffe0ac}
#answerBook button:focus-visible{outline:3px solid #e8c17f;outline-offset:5px}
#bookActions button:disabled{color:#5c4836;opacity:.75}
#bookSaveStatus{font:13px/1.7 sans-serif;color:#f0d9ad;margin:10px 0 0;min-height:22px}
@media(max-width:700px){.book-layout{padding:84px 8px 24px;gap:28px}#bookBack{left:16px;top:18px;font-size:13px;padding:8px 17px}#bookTitle{font-size:21px;letter-spacing:.03em}#bookStage{width:97vw}.book-right-copy{top:10%;height:64%}.book-response-label{margin-bottom:7px;font-size:9px;letter-spacing:0}.book-response-label::before,.book-response-label::after{content:''}#bookAnswer{font-size:clamp(11px,3.15cqw,18px);line-height:1.65;letter-spacing:0}.book-answer-star{font-size:10px;margin-top:5px}#bookActions{gap:12px}#bookActions button{min-width:130px;padding:10px 17px}#bookHint{font-size:12px;letter-spacing:.02em}#bookNumber{font-size:8px;bottom:14%}}
@media(max-height:600px) and (min-width:701px){.book-layout{padding:58px 15px 8px;gap:8px}#bookTitle{font-size:22px}.book-heading::after{margin-top:0}#bookStage{width:min(85vw,calc((100dvh - 190px)*2.23))}#bookHint{margin-bottom:6px;font-size:12px}#bookActions button{font-size:14px;padding:7px 20px}#bookSaveStatus{min-height:18px;margin-top:4px}.book-response-label{margin-bottom:7px}.book-answer-star{margin-top:5px}}
@media(prefers-reduced-motion:reduce){#bookActions button{transition:none}.book-turning-sheet{display:none}}
#answerBook #bookTap:focus-visible{outline:none}
#bookStage:has(#bookTap:focus-visible) .book-art{filter:drop-shadow(0 0 4px #f0ca86)}
#answerBook:not(.book-stopped) #bookNumber{visibility:hidden}
.book-turning-sheet{top:3%;height:83%;width:44.5%}
.book-sheet-front,.book-sheet-back{box-shadow:2px 3px 6px #40281130;border-color:#d3b48180}
.book-sheet-front::after,.book-sheet-back::after{display:none}
#bookTurning{perspective:6000px;clip-path:inset(-3% -4% -4%)}