/* Keep decorative text boxes as small as their actual contents. */
.hero-caption { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.title-line { width: max-content; }
.companion-status { width: max-content; }
.footer { font-size: 12px; }
.instruction { font-size: 13.2px; }
.debug-toggle { font-size: 10.8px; }

.radio { text-align: left; transition: transform .12s, box-shadow .12s; }
.radio-led { width: 5px; height: 5px; border: 1px solid var(--ink); border-radius: 50%; background: #6d6579; }
.radio.is-playing .radio-led { background: #e6ff8f; box-shadow: 0 0 0 2px #e6ff8f40; }
.radio.is-playing .dial { transform: rotate(45deg); }
.radio.is-held .dial { background: #e6ff8f; }
.radio.is-playing .speaker { animation: speaker-breathe .7s ease-in-out infinite alternate; }
/* Move along the rotated shadow: displacement + remaining offset = 8px 9px. */
.radio.is-pressed { transform: rotate(-12deg) translate(5px, 5px); box-shadow: 3px 4px 0 var(--ink); }
.radio .dial { transition: transform .25s, background .15s; }
.sound-waves { position: absolute; right: -25px; top: 25px; display: flex; align-items: center; gap: 3px; opacity: 0; transform: rotate(12deg); }
.sound-waves i { width: 2px; height: 10px; background: var(--ink); border-radius: 2px; }
.sound-waves i:nth-child(2) { height: 19px; }
.sound-waves i:nth-child(3) { height: 27px; }
.radio.is-playing .sound-waves { opacity: .6; }
.radio.is-playing .sound-waves i { animation: radio-wave 1.1s ease-in-out infinite alternate; }
.radio.is-playing .sound-waves i:nth-child(2) { animation-delay: -.3s; }
.radio.is-playing .sound-waves i:nth-child(3) { animation-delay: -.6s; }
@keyframes speaker-breathe { to { transform: scale(.975); } }
@keyframes radio-wave { to { transform: scaleY(.4); opacity: .3; } }

.book {
  right: 6%; top: 59%; width: 144px; height: 169px; padding: 0;
  background: transparent; border: 0; box-shadow: none;
  transform: rotate(9deg); text-align: left; perspective: 650px;
}
.book-underlay { position: absolute; inset: 4px -3px -4px 5px; background: #f9f0d3; border: 1.5px solid; transition: translate .12s; }
.book-cover {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 13px 12px 10px 17px; border: 2px solid; border-radius: 2px 5px 5px 2px;
  background: var(--orange); box-shadow: 8px 9px 0 var(--ink);
  transform-origin: left; transition: transform .45s, opacity .28s, translate .12s, box-shadow .12s;
}
.book-cover::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 1px solid #20231e55; }
.book-kicker { font-size: 5px; letter-spacing: .55px; }
.book-title { margin-top: 12px; font-size: 27px; line-height: .96; letter-spacing: -1.6px; font-weight: 800; }
.book-cover-line { width: 29px; margin-top: 12px; border-top: 1px solid; }
.book-cover-caption { margin-top: 7px; font-size: 6px; line-height: 1.5; }
.book-cover-index { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font: 6px monospace; }
.book-cover-index > span { font-size: 16px; }
.book-hint { position: absolute; bottom: -28px; right: 0; font-size: 7px; letter-spacing: 1px; opacity: .65; white-space: nowrap; }
.book-spread { position: absolute; inset: 0; display: none; border: 2px solid; border-radius: 3px 7px 7px 3px; box-shadow: 8px 9px 0 var(--ink); background: var(--paper); transition: translate .12s, box-shadow .12s; }
.book-page { position: relative; width: 50%; padding: 16px 14px; background: #fbf5df; display: flex; flex-direction: column; }
.page-left { border-radius: 1px 0 0 1px; background: linear-gradient(90deg, #f4ecd4 92%, #d7cdb1); }
.page-right { border-left: 1px solid #958c7045; background: linear-gradient(90deg, #ded3b5, #fbf5df 10%); border-radius: 0 5px 5px 0; }
.page-kicker { font-size: 6px; letter-spacing: .9px; }
.page-doodle { font-size: 58px; text-align: center; font-weight: 500; line-height: 1; margin-top: 20px; color: #e17e4c; transform: rotate(-13deg); }
.page-number { margin-top: auto; font: 7px monospace; opacity: .55; }
.page-right .page-number { text-align: right; }
.page-heading { margin-top: 6px; font-size: 17px; line-height: 1.06; letter-spacing: -.65px; font-weight: 750; }
.page-copy { margin-top: 10px; font-size: 9px; line-height: 1.5; }
.book.is-open { width: 282px; height: 176px; transform: rotate(0deg); }
.book.is-open .book-spread { display: flex; }
.book.is-open .book-underlay { display: none; }
.book.is-open .book-cover { transform: rotateY(-178deg); opacity: 0; pointer-events: none; box-shadow: none; }
.book.is-held .book-cover { background: #fb925e; }
/* Press the surfaces inside the rotated book; keep its measured frame stable. */
.book.is-pressed .book-cover,
.book.is-pressed .book-spread,
.book.is-pressed .book-underlay { translate: 4px 4px; }
.book:not(.is-open).is-pressed .book-cover,
.book.is-open.is-pressed .book-spread { box-shadow: 4px 5px 0 var(--ink); }
.turning-page { display: none; position: absolute; top: 2px; bottom: 2px; right: 2px; width: calc(50% - 2px); background: #f1e7cc; transform-origin: left; pointer-events: none; border-right: 1px solid #958c7045; }
.book.is-open.is-turning .turning-page { display: block; animation: page-turn .55s ease-in-out both; }
@keyframes page-turn { from { transform: rotateY(0deg); opacity: .9; } to { transform: rotateY(-180deg); opacity: 0; } }

.litter { position: absolute; left: 24%; top: 77%; width: 112px; height: 80px; pointer-events: none; }
.banana-peel { position: absolute; width: 59px; height: 59px; scale: .75; overflow: visible; }
.peel-one { left: 0; top: 0; transform: rotate(-23deg); }
.peel-two { left: 49px; top: 22px; transform: rotate(24deg); }
.paper-pile { position: absolute; left: 47px; top: 1px; width: 35px; height: 29px; transform: rotate(14deg); }
.paper-scrap { position: absolute; left: 6px; top: 4px; width: 24px; height: 20px; background: #fbf5df; clip-path: polygon(10% 0, 85% 8%, 100% 62%, 68% 100%, 0 77%); transform: rotate(-17deg); box-shadow: 2px 2px 0 #20231e55; }
.paper-scrap::before { content: ''; position: absolute; inset: 5px 4px; border-top: 1px solid #8a89776b; border-bottom: 1px solid #8a89776b; transform: skew(-17deg) rotate(12deg); }
.paper-corner { position: absolute; left: 12px; top: 11px; width: 13px; height: 11px; border-top: 1px solid #b7b29c; transform: rotate(42deg); background: #e3dcc8; clip-path: polygon(0 0, 100% 0, 0 100%); }
.litter-speck { position: absolute; width: 3px; height: 2px; background: #677143; left: 0; bottom: 1px; transform: rotate(-25deg); }
.paper-pile::after { content: ''; position: absolute; left: 9px; top: 23px; width: 22px; height: 3px; background: #20231e28; transform: rotate(-12deg); }
.litter.is-kicked { animation: litter-kick .55s ease-out; }
@keyframes litter-kick { 30% { transform: translate(8px, 4px) rotate(30deg); } 70% { transform: translate(-2px, 0) rotate(-8deg); } }

.speech {
  position: absolute; left: 0; top: 0; max-width: 240px; width: max-content;
  padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 11px;
  background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: 13.2px; font-weight: 550; line-height: 1.4; text-align: center;
  z-index: 45; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.speech::after { content: ''; position: absolute; bottom: -6px; left: calc(50% + var(--tail-x, 0px) - 5px); width: 9px; height: 9px; background: var(--paper); border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); }
.speech.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.speech.visible { opacity: 1; }
body.is-hidden .radio.is-playing .speaker,
body.is-hidden .radio.is-playing .sound-waves i { animation-play-state: paused; }
@media (min-width: 1700px) { .book { right: 9%; } }
@media (max-height: 800px) and (min-width: 1000px) { .book { right: 4%; } }
@media (max-width: 1050px) { .book { right: 5%; top: 68%; width: 120px; height: 151px; } .book-title { font-size: 24px; } .book.is-open { width: 260px; height: 176px; } }
@media (pointer: coarse), (max-width: 700px) {
  .book, .litter { display: none; }
  .footer, .companion-status { font-size: 9.6px; }
  .debug-toggle { font-size: 8.4px; }
}