/* Wondermaths opening standard, approved 2026-09-09. */
.wm-story-opening > .wm-story-title {
  display:block!important; position:absolute!important; z-index:20!important;
  top:max(18px,env(safe-area-inset-top))!important; left:50%!important;
  right:auto!important; bottom:auto!important; transform:translateX(-50%)!important;
  width:max-content!important; max-width:calc(100% - 190px)!important; height:auto!important;
  margin:0!important; padding:12px 28px 16px!important; overflow:visible!important;
  border:3px solid #d6ad65!important; border-radius:30px 24px 32px 25px!important;
  background:linear-gradient(145deg,#fffbedf5,#f8dfa8f5)!important;
  box-shadow:0 4px 0 #75502740,0 8px 22px #5b3a1f26!important;
  color:#654023!important; font:900 clamp(27px,3.2vw,44px)/1.14 Georgia,serif!important;
  text-align:center!important; text-wrap:balance; letter-spacing:normal!important;
  text-transform:none!important; text-shadow:none!important; clip:auto!important;
  opacity:1!important; visibility:inherit!important; pointer-events:none;
}
.wm-story-opening > button.wm-story-play {
  display:block!important; position:absolute!important; z-index:21!important;
  left:50%!important; right:auto!important; top:auto!important;
  bottom:max(20px,env(safe-area-inset-bottom))!important;
  width:176px!important; height:176px!important; min-width:176px!important; min-height:176px!important;
  max-width:none!important; max-height:none!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:50%!important;
  background:transparent url('button-play-normal.webp') center/contain no-repeat!important;
  box-shadow:none!important; filter:drop-shadow(0 7px 5px #51352255)!important;
  transform:translateX(-50%)!important; animation:none!important; transition:filter .15s!important;
  touch-action:manipulation; cursor:pointer;
  font-size:0!important; color:transparent!important; text-shadow:none!important;
}
.wm-story-opening > button.wm-story-play > * {visibility:hidden!important}
.wm-story-opening > button.wm-story-play::before,
.wm-story-opening > button.wm-story-play::after {content:none!important}
.wm-story-opening > button.wm-story-play:active:not(:disabled) {
  transform:translateX(-50%) translateY(3px) scale(.97)!important;
  background-image:url('button-play-pressed.webp')!important;
}
.wm-story-opening > button.wm-story-play:focus-visible {outline:4px solid #79538d!important;outline-offset:5px!important}
.wm-story-opening > button.wm-story-play:disabled {background-image:url('button-play-disabled.webp')!important}
.wm-story-opening h1:not(.wm-story-title) {display:none!important}
.wm-story-opening .intro-title:not(.wm-story-title),
.wm-story-opening .opening-copy[hidden],
.wm-story-opening .start[hidden],
.wm-story-opening[hidden] {display:none!important}
@media(orientation:portrait),(max-width:600px) {
  .wm-story-opening > .wm-story-title {
    top:max(14px,env(safe-area-inset-top))!important; left:14px!important; transform:none!important;
    max-width:calc(100% - 110px)!important; padding:11px 14px 14px!important;
    border-radius:24px 20px 26px 21px!important; font-size:clamp(23px,6vw,29px)!important;
  }
  .wm-story-opening > button.wm-story-play {
    width:148px!important;height:148px!important;min-width:148px!important;min-height:148px!important;
    bottom:max(18px,env(safe-area-inset-bottom))!important;
  }
  .wm-story-opening[data-wm-title="Muva: Same Number Baskets"] > .wm-story-title {
    left:auto!important;right:14px!important;max-width:55%!important;font-size:20px!important;
  }
  .wm-story-opening[data-wm-title="Aro: Cloud Corridor"] > .wm-story-title {
    max-width:calc(100% - 150px)!important;
  }
}