/* 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{
    display:block!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-height:none!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:unset!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;
  }
}

/* Mission description card — turn long source/caption text into a clean readable panel. */
body.page-id-24577 .mwr-detail-desc{
  position:relative!important;
  overflow:hidden!important;
  margin:14px 0 12px!important;
  padding:46px 16px 16px!important;
  border:1px solid #d9e8f6!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(32,144,255,.10),transparent 24%),
    radial-gradient(circle at 5% 95%,rgba(255,48,91,.055),transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 100%)!important;
  color:#3e5d7d!important;
  box-shadow:0 10px 24px rgba(18,74,126,.07),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
body.page-id-24577 .mwr-detail-desc::before{
  content:"✦  เกี่ยวกับวิดีโอนี้"!important;
  position:absolute!important;
  left:14px!important;
  top:11px!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:25px!important;
  padding:0 10px!important;
  border:1px solid #cfe5fa!important;
  border-radius:999px!important;
  background:linear-gradient(145deg,#edf7ff,#ffffff)!important;
  color:#116cc8!important;
  font-size:9.5px!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
  box-shadow:0 4px 10px rgba(19,95,165,.07)!important;
}
body.page-id-24577 .mwr-detail-desc::after{
  content:""!important;
  position:absolute!important;
  right:-42px!important;
  top:-48px!important;
  width:120px!important;
  height:120px!important;
  border-radius:50%!important;
  border:16px solid rgba(34,139,230,.045)!important;
  box-shadow:0 0 0 14px rgba(255,48,91,.018)!important;
  pointer-events:none!important;
}
body.page-id-24577 .mwr-detail-desc p{
  position:relative!important;
  z-index:1!important;
  margin:0 0 7px!important;
  padding:0!important;
  color:#456482!important;
  font-size:10.5px!important;
  line-height:1.58!important;
}
body.page-id-24577 .mwr-detail-desc p:last-child{margin-bottom:0!important}
body.page-id-24577 .mwr-detail-desc strong,
body.page-id-24577 .mwr-detail-desc b{
  color:#173d68!important;
  font-weight:900!important;
}
body.page-id-24577 .mwr-detail-desc a{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  max-width:100%!important;
  margin:2px 2px 2px 0!important;
  padding:3px 7px!important;
  border:1px solid #d5e8fa!important;
  border-radius:8px!important;
  background:#f1f8ff!important;
  color:#0b6ed0!important;
  font-size:9.5px!important;
  line-height:1.25!important;
  font-weight:850!important;
  text-decoration:none!important;
  overflow-wrap:anywhere!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
body.page-id-24577 .mwr-detail-desc a::before{
  content:""!important;
  display:block!important;
  width:5px!important;
  height:5px!important;
  flex:0 0 5px!important;
  border-radius:50%!important;
  background:#2b82d8!important;
  box-shadow:0 0 0 3px rgba(43,130,216,.08)!important;
}
body.page-id-24577 .mwr-detail-desc a::after{
  content:"↗"!important;
  margin-left:1px!important;
  color:#6d8baa!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1!important;
}
body.page-id-24577 .mwr-detail-desc a:hover{
  transform:translateY(-1px)!important;
  border-color:#9dcdf6!important;
  background:#eaf5ff!important;
  box-shadow:0 5px 12px rgba(17,102,184,.09)!important;
}
body.page-id-24577 .mwr-detail-desc br+br{
  display:block!important;
  content:""!important;
  margin-top:5px!important;
}
body.page-id-24577 .mwr-detail-mission>h1{
  font-size:26px!important;
  line-height:1.16!important;
  letter-spacing:-.25px!important;
}
body.page-id-24577 .mwr-detail-meta{
  gap:6px!important;
  margin-bottom:8px!important;
  font-size:9px!important;
}
body.page-id-24577 .mwr-detail-meta>span{
  padding:5px 8px!important;
}
body.page-id-24577 .mwr-detail-tags{
  gap:5px!important;
  margin:8px 0 10px!important;
}
body.page-id-24577 .mwr-detail-tags span{
  padding:4px 7px!important;
  font-size:8.5px!important;
}
@media(max-width:680px){
  body.page-id-24577 .mwr-detail-desc{
    margin:11px 0 10px!important;
    padding:42px 12px 13px!important;
    border-radius:13px!important;
  }
  body.page-id-24577 .mwr-detail-desc::before{
    left:10px!important;
    top:9px!important;
    min-height:23px!important;
    font-size:8.5px!important;
  }
  body.page-id-24577 .mwr-detail-desc p{
    font-size:10px!important;
    line-height:1.58!important;
  }
  body.page-id-24577 .mwr-detail-mission>h1{
    font-size:19px!important;
    line-height:1.22!important;
  }
  body.page-id-24577 .mwr-detail-desc a{
    padding:3px 6px!important;
    border-radius:7px!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;
  }
}