/* Mobile discoveries: state classes override sticky touch hover. */
@media(hover:none),(pointer:coarse){
 .m26-flip-inner{pointer-events:none}
 .m26-page .m26-tool-card:not(.is-tool-open) .m26-tool-discover{opacity:0;pointer-events:none}
 .m26-page .m26-tool-card:not(.is-tool-open) .m26-tool-art{opacity:0;transform:translateY(10px) scale(.8)}
 .m26-page .m26-card .m26-beacon-doctor:not(.is-mobile-lit)::after,
 .m26-page .m26-card .m26-beacon-police:not(.is-mobile-lit)::after{opacity:0;animation:none}
 .m26-page .m26-card .is-mobile-lit::after{animation:m26-beacon-glow 1.4s ease-in-out infinite alternate}
 .m26-stage-grid .m26-stage-card::before{transition:transform .8s ease,opacity .8s ease;opacity:0}
 .m26-stage-grid .m26-stage-card.is-host-open::before{opacity:1}
 .m26-page .m26-tool-art{transition:transform .8s ease,opacity .8s ease}
 .m26-page .m26-hint-button[aria-expanded=true] .m26-hint-answer{animation-duration:.7s}
}
@media(prefers-reduced-motion:reduce){
 .m26-stage-grid .m26-stage-card::before{transition:none}
}

/* On mobile, stickers fade away before the card turns; returning restarts the delay. */
@media (hover:none), (pointer:coarse){
 .m26-discovered .m26-sticker-pop{animation:m26-mobile-sticker-first 7s ease both}
 .m26-discovered .m26-sticker-pop + .m26-sticker-pop{animation-name:m26-mobile-sticker-second}
}
@keyframes m26-mobile-sticker-first{
 0%,21%{opacity:0;transform:translateY(-12px) scale(1.2) rotate(-10deg)}
 36%,80%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
 96%,100%{opacity:0;transform:translateY(0) scale(.96)}
}
@keyframes m26-mobile-sticker-second{
 0%,44%{opacity:0;transform:translateY(-12px) scale(1.2) rotate(-10deg)}
 59%,80%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
 96%,100%{opacity:0;transform:translateY(0) scale(.96)}
}

.m26-host-toggle{display:none}
@media(hover:none),(pointer:coarse){
 .m26-page .m26-host-toggle{display:inline-block;align-self:flex-start;margin:8px 0 0;padding:6px 12px;border:1px dashed #b35c7d;border-radius:18px;background:#fffdf6;color:#944365;font-size:14px;line-height:1.5}
 .m26-stage-grid .m26-stage-card:not(.is-host-open)::before{transform:translateY(15px) rotate(0deg)!important;opacity:0}
 .m26-stage-grid .m26-stage-card.is-host-open::before{transform:translateY(-108px) rotate(12deg)!important;opacity:1}
 .m26-stage-grid .m26-stage-card:nth-child(2).is-host-open::before{transform:translateY(-108px) rotate(-12deg)!important}
}

/* 1.0.1: explicit sticker state also works with reduced-motion settings. */
@media(hover:none),(pointer:coarse){
 .m26-page .m26-stage-grid .m26-stage-card::before,
 .m26-page .m26-stage-grid .m26-stage-card:nth-child(2)::before{
  transform:translateY(var(--host-y,15px)) rotate(var(--host-angle,0deg))!important;
  opacity:1!important;transition:transform .12s linear!important;
 }
 .m26-page .m26-flip-front .m26-sticker-pop{animation:none!important;opacity:0!important;transform:scale(.96);transition:opacity .7s ease,transform .7s ease}
 .m26-page .m26-flip-front[data-stickers="1"] .m26-sticker-pop[data-sticker-number="1"],
 .m26-page .m26-flip-front[data-stickers="2"] .m26-sticker-pop{opacity:1!important;transform:scale(1)}
 .m26-page .m26-flip-card[aria-pressed="true"] .m26-sticker-pop{opacity:0!important}
}
@media(prefers-reduced-motion:reduce){
 .m26-page .m26-stage-grid .m26-stage-card::before{transition:none!important}
 .m26-page .m26-flip-front .m26-sticker-pop{transform:none!important;transition:opacity .3s}
 .m26-page .m26-card .is-mobile-lit::after{animation:none!important;opacity:.45}
}

/* Reservation notices: keep the opening-state message readable on mobile. */
.m26-reservation-mobile-break{display:none!important}
@media(max-width:650px){.m26-reservation-mobile-break{display:inline!important}}

/* Unified title. The image is swapped only after it loads successfully. */
.m26-title-image{display:block!important;width:100%!important;height:auto!important;max-width:100%;border:0!important;border-radius:18px;box-shadow:none!important}
.m26-work-title{width:min(360px,85%);margin:0 auto 24px!important}
.m26-footer-brand .m26-title-image{width:min(220px,65vw)!important;margin:0 auto;transform-origin:50% 70%}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .m26-footer-brand:hover .m26-title-image{animation:m26-title-sway 1.6s ease-in-out infinite}
}
@media(prefers-reduced-motion:no-preference){
 .m26-footer-brand:focus-visible .m26-title-image{animation:m26-title-sway 1.6s ease-in-out infinite}
}
@keyframes m26-title-sway{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-4px) rotate(-3deg)}75%{transform:translateX(4px) rotate(3deg)}}

/* C: a readable Japanese label with no mid-word wrapping, at every viewport. */
.m26-page .m26-menu-toggle{
 width:72px;height:72px;min-width:72px;flex:0 0 72px;
 padding:10px 6px;gap:6px;border:2px solid #789b7d;
 border-radius:18px;background:#fffdf7;color:#234c3b;
}
.m26-page .m26-menu-toggle span{
 width:28px;height:3px;flex-shrink:0;border-radius:3px;background:#234c3b;
}
.m26-page .m26-menu-toggle small{
 display:block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;
 font-size:13px;line-height:1.3;letter-spacing:0;font-weight:700;
 margin:2px 0 0;text-align:center;color:#234c3b;
}

/* The existing SVG key-and-outline renderer leaves the page background visible. */
.m26-title-image{background:transparent!important;border-radius:0!important}