.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.library-mode {
  width: 100vw;
  max-width: none;
  max-height: none;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% 20%, #514178, #201538 66%, #100a20);
}
.library-mode > .topbar,
.library-mode > .shade,
.library-mode > .fireflies { display: none; }
.story-library {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-content: center;
  gap: clamp(18px, 4vh, 34px);
  padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  overflow: auto;
}
.story-library h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 7vw, 4.4rem);
  color: #fff7db;
  text-shadow: 0 5px 0 #25183c, 0 10px 30px #0008;
}
.story-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 390px));
  gap: clamp(16px, 3vw, 34px);
  justify-content: center;
}
.story-book {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  aspect-ratio: 1.18;
  padding: 10px;
  overflow: hidden;
  border: 3px solid #ffe38c;
  border-radius: 30px;
  background: #281b44;
  color: white;
  box-shadow: 0 18px 45px #0007, inset 0 0 0 2px #ffffff22;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform .2s, box-shadow .2s;
}
.story-book > * { pointer-events: none; }
.story-book:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 25px 55px #0009, 0 0 28px #ffe38c55; }
.story-book:active { transform: scale(.97); }
.story-book-art {
  min-height: 0;
  border-radius: 21px;
  background-position: center;
  background-size: cover;
}
.story-book-masha .story-book-art { background-image: url('assets/forest-cottage.png'); }
.story-book-monster .story-book-art { background-image: url('assets/monster/bedroom.png'); }
.story-book strong {
  padding: 13px 54px 5px 8px;
  text-align: left;
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  line-height: 1.05;
}
.story-play {
  position: absolute;
  right: 17px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding-left: 3px;
  border-radius: 50%;
  background: #ffd75c;
  color: #2b1845;
  box-shadow: 0 5px 14px #0005;
}

.monster-mode { width: 100vw; max-width: none; max-height: none; min-height: 100dvh; background: #171024; }
.monster-mode > .topbar,
.monster-mode > .shade,
.monster-mode > .fireflies,
.monster-mode > .story-card,
.monster-mode > .scene-art,
.monster-mode > .choices,
.monster-mode > .next-button { display: none !important; }
.monster-game {
  position: absolute;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #171024;
  touch-action: none;
  user-select: none;
}
.monster-topbar {
  position: absolute;
  z-index: 80;
  top: max(8px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.monster-topbar button { pointer-events: auto; }
.monster-round {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  padding: 0;
  border: 2px solid #ffffff77;
  border-radius: 50%;
  background: #24163dbb;
  color: white;
  font-size: 1.35rem;
  box-shadow: 0 6px 18px #0006;
  backdrop-filter: blur(7px);
}
.monster-progress { flex: 1; display: flex; justify-content: center; gap: 7px; }
.monster-progress i { width: 9px; height: 9px; border-radius: 50%; background: #ffffff5e; box-shadow: 0 2px 5px #0008; }
.monster-progress i.active { width: 28px; border-radius: 8px; background: #ffd75c; }
.monster-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100dvh * 1.7779));
  height: max(100dvh, calc(100vw / 1.7779));
  transform: translate(-50%, -50%);
  background-image: url('assets/monster/bedroom.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.monster-scene.monster-scene-reveal { animation: monsterSceneReveal .58s ease-out both; }
@keyframes monsterSceneReveal {
  from { opacity: .28; filter: brightness(.65) blur(2px); }
  to { opacity: 1; filter: none; }
}
.monster-tap-pop {
  position: absolute;
  z-index: 140;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  filter: drop-shadow(0 4px 6px #0007);
  animation: monsterTapPop .8s ease-out forwards;
}
@keyframes monsterTapPop {
  0% { opacity: 0; scale: .35; }
  38% { opacity: 1; scale: 1.15; }
  100% { opacity: 0; translate: 0 -52px; scale: .82; }
}
.monster-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #10071f50, transparent 22%, transparent 72%, #10071f45);
}
.monster-scene.lamp-off::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #100b28a8;
  mix-blend-mode: multiply;
}
.monster-scene.wardrobe-open { animation: wardrobeReveal .85s ease-in-out; }
@keyframes wardrobeReveal { 45% { filter: brightness(.72); transform: translate(-50%, -50%) scale(1.025); } }
.monster-scene.wardrobe-knock { animation: wardrobeKnock .55s ease-in-out 2; }
@keyframes wardrobeKnock {
  25% { transform: translate(calc(-50% - 5px), -50%); }
  75% { transform: translate(calc(-50% + 5px), -50%); }
}
.monster-actors,
.monster-objects { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.monster-objects { z-index: 25; }
.monster-sprite {
  position: absolute;
  background-repeat: no-repeat;
  filter: drop-shadow(0 8px 5px #0005);
  pointer-events: none;
}
.monster-hotspot {
  position: absolute;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 3px solid #ffe48f9c;
  border-radius: 26px;
  background: #ffe48f12;
  box-shadow: 0 0 0 7px #ffe48f1c, 0 0 24px #ffe48f99;
  cursor: pointer;
  pointer-events: auto;
  animation: monsterPulse 1.4s ease-in-out infinite;
}
.monster-hotspot.subtle { border-color: transparent; background: transparent; box-shadow: none; animation: none; }
@keyframes monsterPulse { 50% { transform: scale(1.055); box-shadow: 0 0 0 11px #ffe48f12, 0 0 35px #ffe48f; } }
.monster-choices {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: max(12px, calc((100% - 100dvh) / 2 + 10px + env(safe-area-inset-bottom)));
  width: min(74%, 720px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  pointer-events: none;
}
.monster-choices:empty { display: none; }
.monster-choice {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: 8px;
  overflow: hidden;
  border: 3px solid #ffe28c;
  border-radius: 24px;
  background: #fff2d9ed;
  color: #2b183c;
  box-shadow: 0 10px 28px #0007;
  cursor: pointer;
  pointer-events: auto;
}
.monster-choice:hover { transform: translateY(-3px); }
.monster-choice:disabled { opacity: .62; cursor: default; }
.monster-choice-emoji { display: grid; place-items: center; height: 100%; font-size: clamp(3rem, 9vh, 5.6rem); }
.monster-choice-person { height: clamp(112px, 34vh, 200px); }
.monster-choice-person .monster-choice-art { position: absolute; inset: 4px; background-repeat: no-repeat; }
.monster-choice.selected { border-color: #82e3a9; box-shadow: 0 0 28px #55d78b; }
.monster-cue {
  position: absolute;
  z-index: 70;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.monster-cue.hand::before {
  content: '☝️';
  display: block;
  font-size: clamp(3.5rem, 13vh, 7rem);
  filter: drop-shadow(0 7px 6px #0007);
  animation: handSwipe 1.25s ease-in-out infinite;
}
.monster-cue.cue-wardrobe {
  left: 86%;
  top: 52%;
  width: 48px;
  height: 48px;
  border: 5px solid #ffe174;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #ffe1742e, 0 0 30px #ffe174;
  animation: wardrobeHint 1.35s ease-in-out infinite;
}
@keyframes wardrobeHint { 50% { transform: translate(-50%, -50%) scale(1.28); opacity: .58; } }
.door-call {
  display: grid;
  place-items: center;
  border: 2px solid #fff8 !important;
  background: #281941bd !important;
  box-shadow: 0 5px 18px #0007 !important;
  font-size: clamp(1.6rem, 5vw, 3rem);
}
@keyframes handSwipe { 0%,100% { transform: translateX(-42px) rotate(-12deg); } 50% { transform: translateX(42px) rotate(10deg); } }
.monster-cue.wardrobe-hand { left: 86%; top: 50%; }
.monster-cue.target-icon {
  top: 15%;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 3px solid white;
  border-radius: 50%;
  background: #281941d9;
  font-size: 3rem;
  box-shadow: 0 7px 25px #0008;
}
.clothes-item {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 100px);
  height: clamp(64px, 9vw, 100px);
  padding: 0;
  border: 3px solid #ffffffaa;
  border-radius: 50%;
  background: #382151d4;
  font-size: clamp(2.7rem, 8vw, 5rem);
  box-shadow: 0 8px 22px #0007;
  pointer-events: auto;
  cursor: pointer;
}
.clothes-item.correct { animation: itemFly .65s ease-in forwards; }
@keyframes itemFly { to { transform: translateY(-100px) scale(.15) rotate(35deg); opacity: 0; } }
.pile-clothes-item {
  position: absolute;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 9px 8px #1b0c2770);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transition: filter .18s ease, opacity .38s ease;
}
.pile-clothes-item.pile-mittens { background-size: 112% auto; background-position: left center; }
.pile-clothes-item.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 13px 10px #1b0c2790) brightness(1.08);
}
.pile-clothes-item.removed { opacity: 0; pointer-events: none; }
.pile-clothes-item:not(.removed)::after {
  content: '';
  position: absolute;
  inset: 22%;
  border: 3px solid #fff1a1c9;
  border-radius: 50%;
  animation: pileHint 1.65s ease-out infinite;
  pointer-events: none;
}
@keyframes pileHint { 75%, 100% { inset: -5%; opacity: 0; } }
.monster-cue.pile-hand { left: 78%; top: 22%; }
.clothes-falling .pile-clothes-item { animation: clothesDrop .62s cubic-bezier(.2,.75,.25,1.15) both; }
@keyframes clothesDrop {
  from { translate: 0 -72vh; opacity: .15; }
  78% { translate: 0 2.5vh; opacity: 1; }
  to { translate: 0 0; opacity: 1; }
}
.drag-item {
  position: absolute;
  z-index: 55;
  display: grid;
  place-items: center;
  width: clamp(68px, 9vw, 96px);
  height: clamp(68px, 9vw, 96px);
  border: 3px solid white;
  border-radius: 22px;
  background: #fff1d8ee;
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  box-shadow: 0 9px 25px #0007;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.drag-item.dragging { cursor: grabbing; scale: 1.12; z-index: 75; }
.drag-item.placed { animation: placed .45s ease-in forwards; }
@keyframes placed { to { transform: scale(.35); opacity: 0; } }
.drag-item.home-picture {
  min-width: 62px;
  min-height: 62px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 8px 7px #170b2575);
}
.drag-item.home-picture.settled { animation: homeSettle .38s ease-out; }
@keyframes homeSettle { 50% { scale: 1.12; filter: drop-shadow(0 0 20px #ffe579); } }
.home-item-art {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
.home-tent .home-item-art {
  clip-path: polygon(46% 0, 56% 0, 100% 20%, 100% 100%, 0 100%, 0 45%, 16% 22%);
}
.home-monster {
  z-index: 50;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  filter: drop-shadow(0 9px 9px #170b2570);
  transition: filter .18s ease, transform .25s ease;
}
.home-monster.dragging {
  cursor: grabbing;
  transform: scale(1.08);
  filter: drop-shadow(0 14px 12px #170b2590) brightness(1.06);
}
.home-monster.resting { transform: rotate(-7deg) scale(.92); }
.home-monster.cozy { transform: translateY(6%) scale(.9); }
.home-monster.home-monster-react { animation: homeMonsterReact .72s cubic-bezier(.2,.85,.3,1.25); }
@keyframes homeMonsterReact {
  35% { transform: translateY(-7%) rotate(-3deg) scale(1.08); filter: drop-shadow(0 0 24px #ffe46f); }
  68% { transform: translateY(0) rotate(3deg) scale(1.04); }
}
.home-reaction {
  position: absolute;
  z-index: 105;
  left: 67%;
  top: 25%;
  pointer-events: none;
  font-size: clamp(2.8rem, 7vw, 6rem);
  filter: drop-shadow(0 5px 7px #0007);
  animation: homeReactionPop 1.1s ease-out forwards;
}
@keyframes homeReactionPop {
  0% { opacity: 0; transform: translate(-35%, 35%) scale(.25) rotate(-18deg); }
  38% { opacity: 1; transform: translate(0, 0) scale(1.18) rotate(5deg); }
  100% { opacity: 0; transform: translate(18%, -60%) scale(.9) rotate(10deg); }
}
.home-done {
  position: absolute;
  z-index: 110;
  right: 3%;
  bottom: max(4%, calc((100% - 100dvh) / 2 + env(safe-area-inset-bottom) + 10px));
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  padding: 0;
  border: 4px solid white;
  border-radius: 50%;
  background: #ffd34f;
  box-shadow: 0 0 0 9px #ffd34f42, 0 8px 28px #0008;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  cursor: pointer;
  pointer-events: auto;
  animation: homeDonePulse 1.25s ease-in-out infinite;
}
@keyframes homeDonePulse { 50% { scale: 1.12; box-shadow: 0 0 0 16px #ffd34f20, 0 8px 30px #0008; } }
.monster-drop-target {
  position: absolute;
  left: 42%;
  top: 20%;
  width: 28%;
  height: 63%;
  border-radius: 45%;
  border: 4px dashed #fff5a8;
  box-shadow: 0 0 26px #ffd25d77;
}
.monster-final-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(62%, 540px);
}
.monster-final-actions .monster-choice { min-height: 74px; font-size: 2rem; }

@media (orientation: landscape) and (max-height: 520px) {
  html, body { overflow: hidden; }
  .story-library { gap: 10px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .story-library h1 { font-size: clamp(1.7rem, 7vh, 2.5rem); }
  .story-shelf { grid-template-columns: repeat(2, minmax(0, 330px)); gap: 18px; }
  .story-book { height: min(72vh, 280px); aspect-ratio: 1.42; border-radius: 22px; padding: 7px; }
  .story-book-art { border-radius: 16px; }
  .story-book strong { font-size: clamp(.92rem, 3.5vh, 1.2rem); padding-top: 7px; }
  .story-play { width: 37px; height: 37px; right: 12px; bottom: 9px; }
  .monster-round { width: 44px; height: 44px; flex-basis: 44px; }
  .monster-choice { min-height: 86px; border-radius: 19px; }
  .monster-choice-person { height: min(31vh, 150px); }
  .monster-choices { bottom: max(8px, calc((100% - 100dvh) / 2 + 8px + env(safe-area-inset-bottom))); gap: 9px; }
  .monster-cue.target-icon { top: 17%; width: 60px; height: 60px; font-size: 2.35rem; }
}

@media (orientation: portrait) {
  .story-shelf { grid-template-columns: minmax(0, 430px); }
  .story-book { min-height: 280px; aspect-ratio: 1.25; }
  .monster-scene { width: max(100vw, calc(100dvh * 1.7779)); height: max(100dvh, calc(100vw / 1.7779)); }
}