/* MiKO Watch Rewards Responsive V3
   Final responsive layer for listing + mission detail.
   Loaded after the reference styles so late desktop locks cannot squeeze mobile layouts. */

body.page-id-24577{
  overflow-x:hidden!important;
}

body.page-id-24577 .miko-basic-page,
body.page-id-24577 .miko-basic-shell,
body.page-id-24577 .mwr-page,
body.page-id-24577 .mwr-detail,
body.page-id-24577 .mwr-detail-layout,
body.page-id-24577 .mwr-detail-main,
body.page-id-24577 .mwr-detail-sidebar,
body.page-id-24577 .mwr-content-layout,
body.page-id-24577 .mwr-content-main,
body.page-id-24577 .mwr-sidebar{
  min-width:0!important;
  max-width:100%!important;
}

body.page-id-24577 img,
body.page-id-24577 iframe,
body.page-id-24577 video{
  max-width:100%!important;
}

/* More stable desktop/tablet interpolation */
@media (max-width:1180px){
  body.page-id-24577 .mwr-detail-layout{
    grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr)!important;
    gap:12px!important;
  }
  body.page-id-24577 .mwr-detail-sidebar{
    position:static!important;
    top:auto!important;
  }
  body.page-id-24577 .mwr-content-layout{
    grid-template-columns:minmax(0,2fr) minmax(270px,.9fr)!important;
  }
}

/* Tablet / phones: force a single content column.
   This deliberately overrides the late desktop reference lock. */
@media (max-width:900px){
  body.page-id-24577 .miko-basic-head__inner{
    width:calc(100% - 20px)!important;
    gap:10px!important;
  }
  body.page-id-24577 .miko-basic-logo{
    flex:0 0 auto!important;
  }
  body.page-id-24577 .miko-basic-logo img{
    width:96px!important;
    max-width:96px!important;
  }
  body.page-id-24577 .miko-basic-nav{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;
  }
  body.page-id-24577 .miko-basic-nav::-webkit-scrollbar{display:none!important}
  body.page-id-24577 .miko-basic-nav a{
    flex:0 0 auto!important;
    min-height:42px!important;
    padding-inline:10px!important;
  }

  body.page-id-24577 .miko-basic-shell{
    width:calc(100% - 18px)!important;
    padding-top:10px!important;
    padding-bottom:34px!important;
  }

  body.page-id-24577 .mwr-detail-layout,
  body.page-id-24577 .mwr-content-layout,
  body.page-id-24577 .mwr-featured-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    gap:12px!important;
  }

  body.page-id-24577 .mwr-detail-main,
  body.page-id-24577 .mwr-detail-sidebar,
  body.page-id-24577 .mwr-content-main,
  body.page-id-24577 .mwr-sidebar{
    width:100%!important;
    min-width:0!important;
  }

  body.page-id-24577 .mwr-detail-sidebar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    position:static!important;
  }
  body.page-id-24577 .mwr-detail-wallet,
  body.page-id-24577 .mwr-detail-recommended{
    grid-column:1/-1!important;
  }

  body.page-id-24577 .mwr-detail-hero{
    width:100%!important;
    min-height:96px!important;
    padding:14px 16px!important;
    gap:14px!important;
    background-size:auto,cover!important;
  }
  body.page-id-24577 .mwr-detail-hero>aside{
    display:none!important;
  }
  body.page-id-24577 .mwr-detail-hero p b{
    font-size:clamp(24px,4vw,30px)!important;
  }
  body.page-id-24577 .mwr-detail-hero p small{
    font-size:11px!important;
    line-height:1.45!important;
  }

  body.page-id-24577 .mwr-detail-mission{
    width:100%!important;
    padding:14px!important;
  }
  body.page-id-24577 .mwr-detail-mission>h1{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    font-size:clamp(22px,4vw,28px)!important;
    line-height:1.25!important;
  }
  body.page-id-24577 .mwr-detail-desc{
    overflow-wrap:anywhere!important;
    font-size:12px!important;
  }

  body.page-id-24577 .mwr-detail-player,
  body.page-id-24577 .mwr-detail-player .miko-video-player-frame{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-player-frame{
    aspect-ratio:16/9!important;
    min-height:0!important;
    height:auto!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-player-frame iframe{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }

  body.page-id-24577 .mwr-detail-scoregrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-detail-rules ul{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-detail-recommended>div{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  /* Listing page */
  body.page-id-24577 .mwr-top{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-feature-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
  }
  body.page-id-24577 .mwr-recommended-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-sidebar{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-wallet{
    grid-column:1/-1!important;
  }
  body.page-id-24577 .mwr-categories{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:2px 1px 6px!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;
  }
  body.page-id-24577 .mwr-categories::-webkit-scrollbar{display:none!important}
  body.page-id-24577 .mwr-categories button,
  body.page-id-24577 .mwr-category-all{
    flex:0 0 104px!important;
    min-width:104px!important;
    scroll-snap-align:start;
  }
}

/* Phone portrait */
@media (max-width:680px){
  body.page-id-24577 .miko-basic-head{
    position:sticky!important;
    top:0!important;
  }
  body.page-id-24577 .miko-basic-head__inner{
    width:100%!important;
    min-height:62px!important;
    padding:0 10px!important;
    gap:8px!important;
  }
  body.page-id-24577 .miko-basic-logo img{
    width:88px!important;
    max-width:88px!important;
  }
  body.page-id-24577 .miko-basic-nav{
    max-width:calc(100vw - 110px)!important;
  }
  body.page-id-24577 .miko-basic-nav a{
    min-height:40px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }

  body.page-id-24577 .miko-basic-shell,
  body.page-id-24577:has(.mwr-detail) .miko-basic-shell{
    width:100%!important;
    padding:8px 8px calc(34px + env(safe-area-inset-bottom))!important;
  }
  body.page-id-24577 .miko-basic-breadcrumb{
    max-width:100%!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    margin-inline:2px!important;
  }

  body.page-id-24577 .mwr-page{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    transform:none!important;
    padding:8px!important;
    border-radius:0!important;
  }

  body.page-id-24577 .mwr-detail-hero{
    min-height:84px!important;
    margin-bottom:10px!important;
    padding:12px 13px!important;
    border-radius:15px!important;
    background-image:linear-gradient(90deg,rgba(246,252,255,.99),rgba(232,247,255,.92)),var(--mwr-detail-hero-img,none)!important;
  }
  body.page-id-24577 .mwr-detail-hero p b{
    font-size:22px!important;
  }
  body.page-id-24577 .mwr-detail-hero p small{
    font-size:9.5px!important;
  }

  body.page-id-24577 .mwr-detail-layout{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.page-id-24577 .mwr-detail-main,
  body.page-id-24577 .mwr-detail-sidebar{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:10px!important;
  }

  body.page-id-24577 .mwr-detail-card,
  body.page-id-24577 .mwr-detail-side{
    width:100%!important;
    min-width:0!important;
    border-radius:15px!important;
  }

  body.page-id-24577 .mwr-detail-mission{
    padding:11px!important;
  }
  body.page-id-24577 .mwr-detail-meta{
    gap:6px!important;
    margin-bottom:8px!important;
  }
  body.page-id-24577 .mwr-detail-meta>span{
    padding:5px 8px!important;
    font-size:9px!important;
  }
  body.page-id-24577 .mwr-detail-meta em{
    width:100%!important;
    margin-left:0!important;
    font-size:9px!important;
  }
  body.page-id-24577 .mwr-detail-mission>h1{
    font-size:20px!important;
    line-height:1.28!important;
    padding-left:10px!important;
    border-left-width:4px!important;
  }
  body.page-id-24577 .mwr-detail-desc{
    font-size:11px!important;
    line-height:1.6!important;
  }

  body.page-id-24577 .mwr-detail-player .miko-video-player-frame{
    border-radius:11px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-start-overlay>span{
    width:58px!important;
    height:58px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-start-overlay>span svg{
    width:33px!important;
    height:33px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-start-overlay b{
    font-size:14px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-start-overlay small{
    font-size:9px!important;
    text-align:center!important;
    padding-inline:12px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-lock-badge{
    left:8px!important;
    right:8px!important;
    bottom:7px!important;
    font-size:8px!important;
    line-height:1.35!important;
    text-align:center!important;
  }

  body.page-id-24577 .mwr-detail-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.page-id-24577 .mwr-detail-actions>a,
  body.page-id-24577 .mwr-detail-actions>button{
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:8px!important;
    font-size:10px!important;
  }
  body.page-id-24577 .mwr-detail-actions>a:last-child{
    grid-column:1/-1!important;
  }

  body.page-id-24577 .mwr-detail-scorecard{
    padding:10px!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid article{
    min-width:0!important;
    min-height:72px!important;
    padding:9px!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid article>svg{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid b{
    font-size:12px!important;
    overflow-wrap:anywhere!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid small{
    font-size:8.5px!important;
  }

  body.page-id-24577 .mwr-detail-rules{
    padding:11px!important;
  }
  body.page-id-24577 .mwr-detail-rules header{
    align-items:flex-start!important;
  }
  body.page-id-24577 .mwr-detail-rules li{
    align-items:flex-start!important;
    font-size:9.5px!important;
    line-height:1.55!important;
  }

  body.page-id-24577 .mwr-detail-side{
    padding:11px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>header{
    grid-template-columns:48px minmax(0,1fr) 34px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>header>svg{
    width:46px!important;
    height:46px!important;
    padding:10px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>header div b{
    font-size:23px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div article{
    min-width:0!important;
  }

  body.page-id-24577 .mwr-detail-side-progress li{
    grid-template-columns:22px minmax(0,1fr) auto!important;
    gap:6px!important;
    min-width:0!important;
  }
  body.page-id-24577 .mwr-detail-side-progress li span{
    min-width:0!important;
    font-size:9px!important;
  }
  body.page-id-24577 .mwr-detail-side-progress li b{
    max-width:46vw!important;
    text-align:right!important;
    overflow-wrap:anywhere!important;
    font-size:9.5px!important;
  }

  body.page-id-24577 .mwr-detail-recommended>div{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-detail-recommended>div>a{
    grid-template-columns:112px minmax(0,1fr)!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
  }
  body.page-id-24577 .mwr-detail-recommended>div>a>span{
    height:66px!important;
  }
  body.page-id-24577 .mwr-detail-recommended>div>a p{
    min-width:0!important;
  }
  body.page-id-24577 .mwr-detail-recommended>div>a p b{
    font-size:10.5px!important;
  }

  body.page-id-24577 .mwr-detail-gifts .miko-gift-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-id-24577 .mwr-detail-comment-form{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-detail-comment-form textarea{
    min-height:92px!important;
    font-size:16px!important; /* prevents iOS input zoom */
  }
  body.page-id-24577 .mwr-detail-comment-form button{
    min-height:44px!important;
    justify-content:center!important;
  }

  /* Listing page on phones */
  body.page-id-24577 .mwr-title-card{
    min-height:0!important;
    padding:12px!important;
    gap:10px!important;
  }
  body.page-id-24577 .mwr-title-card h1{
    font-size:22px!important;
  }
  body.page-id-24577 .mwr-title-card p{
    font-size:10px!important;
    line-height:1.45!important;
  }
  body.page-id-24577 .mwr-feature-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.page-id-24577 .mwr-feature-links>a{
    min-width:0!important;
    min-height:82px!important;
  }
  body.page-id-24577 .mwr-featured-link,
  body.page-id-24577 .mwr-featured-player{
    min-height:280px!important;
  }
  body.page-id-24577 .mwr-featured-copy{
    left:14px!important;
    bottom:52px!important;
    width:75%!important;
  }
  body.page-id-24577 .mwr-featured-copy b{
    font-size:20px!important;
    line-height:1.15!important;
  }
  body.page-id-24577 .mwr-featured-copy small{
    font-size:10px!important;
  }
  body.page-id-24577 .mwr-recommended-list{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-content-layout{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.page-id-24577 .mwr-sidebar{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-wallet{
    grid-column:auto!important;
    min-width:0!important;
  }
  body.page-id-24577 .mwr-wallet>div,
  body.page-id-24577 .mwr-wallet>a{
    min-width:0!important;
  }
  body.page-id-24577 .mwr-wallet>a{
    white-space:normal!important;
    text-align:center!important;
  }

  /* Floating member dock is redundant here and blocks mission controls on iPhone. */
  body.page-id-24577 .miko-global-profile-dock{
    display:none!important;
  }

  body.page-id-24577 #miko-video-comments,
  body.page-id-24577 #mwr-video-grid{
    scroll-margin-top:78px!important;
  }
}

@media (max-width:480px){
  body.page-id-24577 .mwr-grid{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-card-media{
    height:auto!important;
    aspect-ratio:16/9!important;
  }
  body.page-id-24577 .mwr-featured-copy{
    width:82%!important;
  }
  body.page-id-24577 .mwr-featured-copy small{
    display:none!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid{
    grid-template-columns:1fr 1fr!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid article{
    display:flex!important;
    text-align:left!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div b{
    font-size:12px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div small{
    font-size:7.5px!important;
  }
}

@media (max-width:360px){
  body.page-id-24577 .miko-basic-logo img{
    width:78px!important;
    max-width:78px!important;
  }
  body.page-id-24577 .miko-basic-nav{
    max-width:calc(100vw - 98px)!important;
  }
  body.page-id-24577 .mwr-detail-scoregrid{
    grid-template-columns:1fr!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div article{
    border-left:0!important;
    border-top:1px solid #e7eef6!important;
    padding:8px!important;
  }
  body.page-id-24577 .mwr-detail-wallet>div article:first-child{
    border-top:0!important;
  }
}

/* Short landscape phones */
@media (max-width:900px) and (orientation:landscape){
  body.page-id-24577 .mwr-detail-hero{
    min-height:78px!important;
  }
  body.page-id-24577 .mwr-detail-player .miko-video-player-frame{
    max-height:78vh!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.page-id-24577 .mwr-detail *,
  body.page-id-24577 .mwr-page *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}