/* Illustrated assets stay crisp at every supported viewport; layout/hitboxes are unchanged. */
img { image-rendering: auto; }
.lily { --art-shelf-x:0px; background: none; border-color: transparent; box-shadow: none; isolation: isolate; }
.lily::before { content: ''; position: absolute; inset: -12px -8px -10px; z-index: -1; background: url('ledge-painted-v2.png.webp') center / 100% 100% no-repeat; pointer-events: none; }
.lily.selected { border-color: transparent; }
.lily.selected::before { filter: drop-shadow(0 0 3px #fff8d9) drop-shadow(0 0 6px #f2c141); }
.quantity { transform: translateY(-12px); }
.pebble { border-radius: 0; box-shadow: none; background: url('../../assets/props/webp-transparent/Prop-Universal-Stone-S.webp') center / 210% 210% no-repeat; filter: drop-shadow(0 3px 2px #51382055); }
.instruction-icon { background: none; }
.speech { min-height: 110px; padding-top: 22px; padding-bottom: 22px; }
.speech-text { font-size: clamp(15px, 1.4vw, 19px); line-height: 1.16; }
.instruction-icon img { width: 44px; height: 44px; object-fit: contain; }
.instruction-icon img[src*="Stone-S"] { transform: scale(1.65); }
.hand { width: 76px; height: 90px; font-size: 0; background: none; filter: drop-shadow(0 4px 3px #59402370); }
.hand img { width: 100%; height: 100%; object-fit: contain; }
.tutorial-skip { border: 0; box-shadow: none; background: url('../../assets/ui/button-next-normal.webp') center / contain no-repeat; }
.level-token img { transform: scale(1.15); }
.level-number { font-size: 26px; -webkit-text-stroke-width: 2px; text-shadow: 0 2px 2px #6b482a55; }
.level-button .level-number { font-size: 34px; -webkit-text-stroke-width: 3px; }
.confetti i { width: 30px; height: 30px; border-radius: 0; background: url('../../assets/ui/ui-reward-star.webp') center / 145% 145% no-repeat !important; }
.confetti i:nth-child(odd) { left: 2px; }
.confetti i:nth-child(even) { left: calc(100% - 32px); }
.pim-marker {
  width: clamp(320px, 28vw, 390px); height: clamp(320px, 28vw, 390px);
  left: auto; right: calc(100% - 18px); bottom: -16px;
  filter: brightness(1.13) saturate(1.04) drop-shadow(0 0 5px #fff4ce99) drop-shadow(0 8px 5px #49331f66);
}
.guide { grid-template-columns: minmax(150px,210px) clamp(160px,16vw,220px); width: min(42vw,430px); }
.board .lily:first-child .pim-marker { top:auto; bottom:20px; right:calc(100% - 32px); width:clamp(170px,25vh,220px); height:clamp(170px,25vh,220px); }
.game:has(.lily.landing) .guide { visibility:hidden; }
body[data-wm-controls-game="11"] #wm-game-controls { left:auto; right:max(10px,env(safe-area-inset-right)); }
@media (orientation:landscape) and (min-width:761px) {
  body[data-wm-controls-game="11"] .hud { grid-template-columns:180px 1fr 280px; }
}
.ori[src="assets/ori.webp"] { scale: -1 1; }
.ori { filter: brightness(1.12) saturate(1.04) drop-shadow(0 0 5px #fff4ce88) drop-shadow(0 7px 5px #49331f55); }
.highfive, .final-highfive { filter: brightness(1.08) drop-shadow(0 0 6px #fff6d280) drop-shadow(0 8px 6px #60442148); }
.ambient-butterfly { position:absolute; width:54px; height:54px; pointer-events:none; animation: butterfly-drift 16s ease-in-out infinite; }
.ambient-butterfly img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 2px #49331f55); animation: butterfly-wings 1.4s ease-in-out infinite; }
.butterfly-one { right:6%; top:43%; }
.butterfly-two { left:5%; top:29%; width:40px; height:40px; animation-delay:-8s; }
.butterfly-two img { animation-delay:-.4s; }
.game:not([data-state="playing"]) .ambient-butterfly,
.game:not([data-state="playing"]) .ambient-butterfly img { animation-play-state:paused; }
@keyframes butterfly-drift { 0%,100% { transform:translate(0,0) rotate(-9deg); } 30% { transform:translate(-12px,-30px) rotate(8deg); } 65% { transform:translate(8px,-55px) rotate(-6deg); } }
@keyframes butterfly-wings { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.42); } }
@media (orientation:landscape) and (min-width:761px) {
  .board .lily:nth-child(1) { --art-shelf-x:-12%; }
  .board .lily:nth-child(3) { --art-shelf-x:12%; }
}
@media (max-width: 760px), (orientation: portrait) {
  .hand { width: 60px; height: 72px; }
  .instruction-icon img { width: 36px; height: 36px; }
  .level-token .level-number { font-size: 21px; }
  .speech { min-height: 85px; padding-top: 16px; padding-bottom: 16px; }
  .speech-text { font-size: clamp(14px, 4.2vw, 18px); }
  .quantity { transform: translateY(-9px); }
  .guide { grid-template-columns:1fr 140px; width:calc(100% - 28px); }
  .ori { max-height:140px; }
  .pim-marker { width:clamp(220px,54vw,250px); height:clamp(220px,54vw,250px); left:auto; right:calc(100% - 108px); bottom:-24px; }
  .board .lily:first-child .pim-marker { right:calc(100% - 70px); width:clamp(150px,24vh,200px); height:clamp(150px,24vh,200px); }
  body[data-wm-controls-game="11"] .progress { position:fixed; left:12px; top:80px; gap:3px; }
  body[data-wm-controls-game="11"] .level-path { position:fixed; right:10px; top:78px; gap:0; }
  body[data-wm-controls-game="11"] .level-token { width:38px; }
  body[data-wm-controls-game="11"] .guide { top:118px; }
  body[data-wm-controls-game="11"] .board { top:max(34%,270px); }
  .board .lily { --art-shelf-x:calc(var(--shelf-offset) + 46px); transform:translateX(var(--art-shelf-x)); }
  .board .lily.selected { transform:translateX(calc(var(--shelf-offset) + 46px)) scale(1.04); }
  .quantity { max-width:72%; margin-left:42px; }
  .ambient-butterfly { width:36px; height:36px; }
  .butterfly-one { right:2%; top:73%; }
  .butterfly-two { left:3%; top:33%; width:29px; height:29px; }
}
@media (max-height:700px) and (orientation:portrait) { .board { top:34%; } }
.board .lily.landing { animation:art-ledge-cheer 760ms ease both; }
.board .lily.landing .pim-marker { animation:juno-climb 760ms cubic-bezier(.2,.75,.25,1); }
@keyframes juno-climb { 0% { transform:translateY(95px) rotate(-5deg); } 55% { transform:translateY(-18px) rotate(3deg); } 100% { transform:translateY(0); } }
.board .lily.hint:not(.landing) { animation:art-hint 1.5s ease-in-out infinite alternate; }
@keyframes art-ledge-cheer { 0%,100% { transform:translateX(var(--art-shelf-x)) scale(1); } 50% { transform:translateX(var(--art-shelf-x)) scale(1.06); } }
@keyframes art-hint { from { transform:translateX(var(--art-shelf-x)) scale(1); } to { transform:translateX(var(--art-shelf-x)) scale(1.04); } }
@media (prefers-reduced-motion:reduce) { .ambient-butterfly { display:none; } }
.game[data-state="menu"] *, body:has(.game[data-state="menu"]) .hand { animation-play-state:paused !important; }