/* Sunshine play: dawn scenery and a four-screen fan. */
main { position: relative; isolation: isolate; }
.sunrise-backdrop {
  position: absolute; inset: 0 0 auto; height: 940px; z-index: -1;
  background: linear-gradient(90deg, #faf9f0ed 0%, #faf9f0a6 38%, #faf9f038 70%), url('assets/sunrise-game.webp') center 52% / cover no-repeat;
  mask-image: linear-gradient(#000 0%, #000 70%, transparent 100%);
  pointer-events: none;
}
.site-header { background: #faf9f0e8; }
.hero { grid-template-columns: .93fr 1.07fr; gap: 42px; min-height: 744px; padding-top: 45px; padding-bottom: 62px; }
.hero-description { color: #4a5e45; }
.hero-tags { border-color: #b7c7a8; }
.hero-visual.campfire-visual { width: 100%; min-width: 0; min-height: 0; margin: 0; transform: none; position: relative; align-self: center; padding-bottom: 16px; }
.scene-kicker { display: flex; gap: 8px; align-items: center; color: #355534; font-size: 9px; letter-spacing: 1.8px; font-weight: 750; margin: 0 0 16px 14px; }
.scene-kicker svg { width: 20px; height: 20px; color: #a0792d; }
.campfire-frame { overflow: hidden; border-radius: 48px 48px 38px 38px; border: 5px solid #fffaf0c9; background: #e5edc8; box-shadow: 0 18px 50px #5062301a; }
.campfire-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.campfire-caption { display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; margin: -35px 30px 0; width: fit-content; padding: 16px 22px; background: #fffdf0f5; border: 1px solid #e2dcb8; border-radius: 20px; color: var(--ink); font-size: 13px; line-height: 1.7; }
.campfire-caption svg { width: 36px; height: 36px; color: #aa852c; stroke-width: 1.3; }
.word-strip { background: #e8eedbbf; }
.product-stage { grid-template-columns: .9fr 1.1fr; }
.product-description { padding-inline: 40px; }
.product-tabs { max-width: 100%; }
.product-tabs button { padding-inline: 12px; }
.screen-gallery { justify-content: center; min-width: 0; padding: 30px 10px 20px; background: linear-gradient(#fff8d79c, #eaf0ced4), url('assets/sunrise-game.webp') 65% center / cover; }
.screen-gallery:before { display: none; }
.screen-gallery .screen-marker { margin: 0 0 5px; font-size: 9px; color: #526039; letter-spacing: 1.6px; }
.fan-stage { position: relative; width: 100%; aspect-ratio: 1.18; max-width: 660px; isolation: isolate; }
.fan-card { position: absolute; left: 50%; bottom: 6%; display: block; width: 28%; padding: 0; border: 4px solid #345c3e; border-radius: 20px; overflow: hidden; background: #fff4ce; transform-origin: 50% 96%; box-shadow: 0 9px 17px #29412430; transition: filter .2s, border-color .2s; }
.fan-card img { width: 100%; height: auto; aspect-ratio: 9 / 20; object-fit: contain; object-position: top; }
.fan-card:hover, .fan-card:focus-visible { filter: brightness(1.04); border-color: #a2c76a; }
.fan-card:focus-visible { outline-offset: 3px; outline-color: #fffdf0; }
.fan-loading { width: 25%; left: 37%; transform: translateX(-50%) rotate(-21deg); z-index: 1; bottom: 9%; }
.fan-home { width: 29%; left: 41%; transform: translateX(-50%) rotate(-8deg); z-index: 2; bottom: 9%; }
.fan-wallet { width: 28%; left: 63%; transform: translateX(-50%) rotate(18deg); z-index: 3; bottom: 9%; }
.fan-reward { width: 31%; left: 55%; transform: translateX(-50%) rotate(5deg); z-index: 4; }
.screen-links { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 6; margin: 0 0 10px; }
.screen-links button { font-size: 10px; font-weight: 750; color: #28513a; padding: 7px 10px; border-radius: 30px; border: 1px solid #7490554d; background: #fffcedd9; }
.screen-links button:hover { background: #d6eaae; }
.screen-links button[data-screen=reward] { background: #315c3d; color: #fff9de; border-color: #315c3d; }
.screen-gallery .screen-caption { font-size: 10px; margin: 0; color: #526039; }
.screen-dialog { max-height: 90dvh; }
.screen-dialog-bar { position: sticky; top: 0; z-index: 2; padding: 14px 54px 14px 17px; background: #fff9e9; border-bottom: 1px solid #d9decd; }
.screen-dialog-bar h2 { font-size: 14px; letter-spacing: -.2px; line-height: 1.5; margin: 0; }
.screen-dialog .dialog-close { position: absolute; top: 3px; right: 4px; float: none; margin: 0; }
.how-section { background: #eff0df; }
.contact-section { background: linear-gradient(#edf0ddd9, #edf0dded), url('assets/sunrise-game.webp') center 65% / cover; }
@media (max-width: 1150px) {
  .hero { gap: 28px; min-height: 680px; }
  .hero-visual.campfire-visual { width: 100%; margin: 0; transform: none; }
  .campfire-frame { border-radius: 34px; }
  .scene-kicker { font-size: 8px; letter-spacing: 1.1px; }
  .campfire-caption { margin-left: 18px; margin-right: 18px; font-size: 11px; padding: 13px 17px; }
  .product-description { padding-inline: 28px; }
  .product-tabs button { padding-inline: 9px; }
}
@media (min-width: 721px) and (max-width: 950px) {
  .hero { min-height: 660px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero h1 { font-size: 63px; }
  .scene-kicker { font-size: 6px; }
  .campfire-caption { gap: 15px; font-size: 10px; padding: 11px 14px; }
  .campfire-caption svg { width: 28px; }
  .product-stage { grid-template-columns: 1fr; }
  .product-description { padding: 35px; }
  .feature-panel { min-height: 310px; max-width: 100%; }
  .screen-gallery { min-height: 620px; }
  .fan-stage { width: min(600px, 100%); }
}
@media (max-width: 720px) {
  .sunrise-backdrop { height: 1150px; background-position: 62% top; background-image: linear-gradient(#faf9f0cc, #faf9f08c 55%, #faf9f0e6), url('assets/sunrise-game.webp'); }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 32px; padding-top: 36px; padding-bottom: 37px; }
  .hero h1 { font-size: clamp(59px, 16vw, 84px); }
  .hero-visual.campfire-visual { max-width: 500px; justify-self: center; padding-bottom: 0; }
  .scene-kicker { font-size: 7px; letter-spacing: 1.2px; margin-bottom: 12px; margin-left: 7px; }
  .campfire-frame { border-width: 3px; border-radius: 30px; }
  .campfire-caption { font-size: 11px; margin-top: -27px; padding: 11px 16px; border-radius: 16px; gap: 22px; }
  .campfire-caption svg { width: 28px; height: 28px; }
  .product-stage { grid-template-columns: 1fr; }
  .product-description { padding: 27px 25px 31px; }
  .screen-gallery { padding: 29px 5px 25px; min-height: 0; }
  .screen-gallery .screen-marker { font-size: 7px; margin-bottom: 10px; }
  .fan-stage { aspect-ratio: 1.1; }
  .fan-card { border-width: 2px; border-radius: 11px; }
  .screen-links { gap: 5px; margin: 8px 6px 12px; }
  .screen-links button { padding: 6px 8px; font-size: 9px; }
  .screen-gallery .screen-caption { font-size: 9px; }
}
@media (max-width: 380px) {
  .product-description { padding-inline: 20px; }
  .screen-links { max-width: 255px; }
  .screen-links button { font-size: 8px; padding: 6px 7px; }
  .scene-kicker { font-size: 6px; letter-spacing: .8px; }
}