/* BUILD 35: one shared, maintainable activity and service detail layout. */

/* A single, continuous black silhouette, rather than stepped text-shadow copies. */
.rbh-interior .rbh-play-page .rbh-hero h1 {
  filter:drop-shadow(5px 6px 0 #020202) !important;
  -webkit-filter:drop-shadow(5px 6px 0 #020202) !important;
}
.rbh-interior .rbh-play-page .rbh-hero h1 .rbh-play-line {
  text-shadow:none !important;
  -webkit-text-stroke:2px #050505 !important;
  paint-order:stroke fill !important;
}
@media(max-width:700px){
  .rbh-interior .rbh-play-page .rbh-hero h1 {
    filter:drop-shadow(3px 4px 0 #020202) !important;
    -webkit-filter:drop-shadow(3px 4px 0 #020202) !important;
  }
  .rbh-interior .rbh-play-page .rbh-hero h1 .rbh-play-line {
    -webkit-text-stroke:1.5px #050505!important;
  }
}

/* This is an actual white parallelogram with an inset image, not two conflicting
   borders or SVG masks. Parallel inset edges leave white visible at the bottom. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame {
  padding:0!important;margin:0!important;border:0!important;
  position:relative!important;isolation:isolate!important;
  background:#fff!important;
  -webkit-clip-path:polygon(10% 0%,96% 0%,99% 2%,90% 98%,87% 100%,4% 100%,1% 98%,10% 2%)!important;
  clip-path:polygon(10% 0%,96% 0%,99% 2%,90% 98%,87% 100%,4% 100%,1% 98%,10% 2%)!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open {
  position:absolute!important;
  inset:6px!important;
  display:block!important;
  box-sizing:border-box!important;
  width:auto!important;height:auto!important;
  border:0!important;padding:0!important;margin:0!important;
  background:transparent!important;
  overflow:hidden!important;
  border-radius:0!important;
  -webkit-clip-path:polygon(10% 0%,96% 0%,99% 2%,90% 98%,87% 100%,4% 100%,1% 98%,10% 2%)!important;
  clip-path:polygon(10% 0%,96% 0%,99% 2%,90% 98%,87% 100%,4% 100%,1% 98%,10% 2%)!important;
}
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open img {
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;
  border:0!important;border-radius:0!important;
  clip-path:none!important;-webkit-clip-path:none!important;
  transform:none!important;
}
@media(max-width:700px){
  .rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-play-hero-open {inset:4px!important;}
}

/* Prevent decorative photo shadows from darkening their separate captions. */
.rbh-interior .rbh-play-page .rbh-play-gallery-slide {
  isolation:isolate!important;
  background:#222327!important;
  box-shadow:0 2px 0 #0e0e0f!important;
}
.rbh-interior .rbh-play-page .rbh-play-gallery-photo,
.rbh-interior .rbh-play-page .rbh-play-gallery-photo:hover,
.rbh-interior .rbh-play-page .rbh-play-gallery-photo:focus-visible {
  transform:none!important;
  box-shadow:none!important;
  filter:none!important;
  position:relative!important;
  z-index:0!important;
}
.rbh-interior .rbh-play-page .rbh-play-gallery-photo img {box-shadow:none!important;filter:none!important;}
.rbh-interior .rbh-play-page .rbh-play-gallery-slide figcaption {
  position:relative!important;
  z-index:1!important;
  flex:1 0 auto!important;
  background:#222327!important;
  color:#f5f5f5!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

/* The yellow shape retains its original exact dimensions and red eight-stud brick.
   The texture is rendered on an inverse-skewed surface, so the LEGO elements are
   upright, like the hero texture, and not warped with the slanted title banner. */
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon {
  position:relative!important;
  background-color:#ffe400!important;
  background-image:none!important;
  isolation:isolate!important;
}
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon::after,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:url('/assets/yellow-texture.webp') center / auto 280px repeat;
  opacity:.23;
  mix-blend-mode:multiply;
  transform:skewX(17deg);
  transform-origin:center;
  clip-path:inset(0);
}
.rbh-page .rbh-card-carousel .rbh-activity-header .rbh-ribbon::before,
.rbh-interior .rbh-play-page .rbh-play-panel > .rbh-ribbon::before {
  z-index:2!important;
}
/* Small positive tracking only after capital I where followed by another letter. */
.rbh-spaced-i {display:inline-block!important;margin-right:.07em!important;letter-spacing:normal!important;}

/* Preserve the same charcoal panels; steps can be offered without changing the layout. */
.rbh-interior .rbh-play-page .rbh-service-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:21px;
}
.rbh-interior .rbh-play-page .rbh-service-steps > div {
  min-width:0;
  background:#212226;
  border:1px solid #393b40;
  border-radius:13px;
  padding:13px;
}
.rbh-interior .rbh-play-page .rbh-service-steps strong {
  display:block;
  font:900 clamp(13px,1.2vw,17px)/1.2 Arial,sans-serif;
  color:#ffe400;
  margin-bottom:7px;
}
.rbh-interior .rbh-play-page .rbh-service-steps span {
  display:block;
  color:#f0f0f2;
  font-size:clamp(13px,1.1vw,16px);
  line-height:1.4;
}
.rbh-interior .rbh-play-page .rbh-service-extra {text-align:center;margin-top:14px;}
.rbh-interior .rbh-play-page .rbh-service-extra a {color:#ffe400;font-weight:700;}
@media(max-width:700px){
  .rbh-interior .rbh-play-page .rbh-service-steps {
    grid-template-columns:repeat(1,minmax(0,1fr));gap:8px;margin-top:15px;
  }
  .rbh-interior .rbh-play-page .rbh-service-steps > div {padding:9px 12px;}
  .rbh-interior .rbh-play-page .rbh-service-steps span {font-size:13px;}
}

/* Approved Play Tables Rove sticker, placed below the last panel in the corner;
   the actual character pixels were not redrawn. Only edge black was made transparent. */
.rbh-interior .rbh-play-page .rbh-comic-rove {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  width:clamp(112px,17vw,205px);
  height:auto;
  margin:-4px max(18px,calc((100vw - 1200px)/2 + 20px)) 0 auto;
  padding:0;
  text-decoration:none;
  color:#ffe400;
  filter:drop-shadow(1px 4px 0 #0a0a0a);
}
.rbh-interior .rbh-play-page .rbh-comic-rove img {
  width:100%;height:auto;object-fit:contain;display:block;
}
.rbh-interior .rbh-play-page .rbh-comic-rove span {
  font:900 clamp(11px,1.6vw,15px)/1.15 Arial,sans-serif;
  text-align:center;
}
.rbh-interior .rbh-play-page .rbh-comic-rove:hover {filter:drop-shadow(0 0 7px #ffe40088);}
.rbh-interior .rbh-play-page .rbh-comic-rove:focus-visible {outline:2px solid #ffe400;outline-offset:4px;border-radius:10px;}
@media(max-width:700px){
  .rbh-interior .rbh-play-page .rbh-comic-rove {width:126px;margin:2px 14px 0 auto;}
}

/* White border is a single visible stroke on the exact same continuous contour.
   It is not a second background frame or shadow behind the photograph. */
.rbh-interior .rbh-play-page .rbh-play-hero .rbh-hero-frame .rbh-hero-outline {
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  z-index:5!important;pointer-events:none!important;
  overflow:visible!important;
}