/* TOP design concepts.
   Preview with:
   /?design=candy
   /?design=candypro
   /?design=partybox
   /?design=playroom
   /?design=parade
   /?design=neon
*/

html.home-design-candy .landing-home,
html.home-design-candypro .landing-home,
html.home-design-partybox .landing-home,
html.home-design-playroom .landing-home,
html.home-design-parade .landing-home,
html.home-design-neon .landing-home {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

/* Final TOP overrides for the NOTE-inspired direction. Keep these at the end. */
html.home-design-candy .landing-home .public-nav,
html.home-design-candypro .landing-home .public-nav,
html.home-design-partybox .landing-home .public-nav,
html.home-design-playroom .landing-home .public-nav,
html.home-design-parade .landing-home .public-nav,
html.home-design-neon .landing-home .public-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html.home-design-candy .landing-home .home-copy .eyebrow,
html.home-design-candypro .landing-home .home-copy .eyebrow,
html.home-design-partybox .landing-home .home-copy .eyebrow,
html.home-design-playroom .landing-home .home-copy .eyebrow,
html.home-design-parade .landing-home .home-copy .eyebrow,
html.home-design-neon .landing-home .home-copy .eyebrow {
  display: none;
}

@media (max-width: 760px) {
  html.home-design-candy .landing-home .public-nav,
  html.home-design-candypro .landing-home .public-nav,
  html.home-design-partybox .landing-home .public-nav,
  html.home-design-playroom .landing-home .public-nav,
  html.home-design-parade .landing-home .public-nav,
  html.home-design-neon .landing-home .public-nav {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
  }

  html.home-design-candy .landing-home .public-nav .brand-link,
  html.home-design-candypro .landing-home .public-nav .brand-link,
  html.home-design-partybox .landing-home .public-nav .brand-link,
  html.home-design-playroom .landing-home .public-nav .brand-link,
  html.home-design-parade .landing-home .public-nav .brand-link,
  html.home-design-neon .landing-home .public-nav .brand-link {
    flex: 0 0 100%;
    min-width: 0;
    white-space: normal;
  }

  html.home-design-candy .landing-home .public-nav .public-links,
  html.home-design-candypro .landing-home .public-nav .public-links,
  html.home-design-partybox .landing-home .public-nav .public-links,
  html.home-design-playroom .landing-home .public-nav .public-links,
  html.home-design-parade .landing-home .public-nav .public-links,
  html.home-design-neon .landing-home .public-nav .public-links {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  html.home-design-candy .landing-home .public-nav .sound-control,
  html.home-design-candypro .landing-home .public-nav .sound-control,
  html.home-design-partybox .landing-home .public-nav .sound-control,
  html.home-design-playroom .landing-home .public-nav .sound-control,
  html.home-design-parade .landing-home .public-nav .sound-control,
  html.home-design-neon .landing-home .public-nav .sound-control {
    display: none;
  }
}

/* Pink POP logo v4: reduce white outline so the pink fill reads first. */
.landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff3f95;
  filter: drop-shadow(0 6px 0 #ffcf26) drop-shadow(7px 10px 0 #20c8dc) drop-shadow(0 15px 16px rgba(69, 33, 31, 0.13));
  -webkit-text-fill-color: #ff3f95;
  text-shadow:
    0 2px 0 #fff,
    2px 0 0 #fff,
    0 -2px 0 #fff,
    -2px 0 0 #fff,
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    5px 5px 0 #4b241c,
    8px 8px 0 #ffcf26,
    11px 11px 0 #20c8dc;
  -webkit-text-stroke: 0;
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 5px 0 #ffcf26) drop-shadow(5px 7px 0 #20c8dc);
    text-shadow:
      0 2px 0 #fff,
      2px 0 0 #fff,
      0 -2px 0 #fff,
      -2px 0 0 #fff,
      4px 4px 0 #4b241c,
      6px 6px 0 #ffcf26,
    8px 8px 0 #20c8dc;
  }
}

/* Pink POP logo v6 final: unmistakably pink fill with simpler pop shadows. */
.landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff1688;
  filter: drop-shadow(0 11px 18px rgba(255, 22, 136, 0.20));
  -webkit-text-fill-color: #ff1688;
  text-shadow:
    2px 2px 0 #ffffff,
    5px 5px 0 #4b241c,
    8px 8px 0 #ffcf26,
    11px 11px 0 #20c8dc;
  -webkit-text-stroke: 0;
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    text-shadow:
      1px 1px 0 #ffffff,
      4px 4px 0 #4b241c,
      6px 6px 0 #ffcf26,
      8px 8px 0 #20c8dc;
  }
}

/* Pink POP logo v8: match the higher-specificity home design selectors. */
html.home-design-candy .landing-home .home-showcase-hero .home-copy h1,
html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1,
html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1,
html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1,
html.home-design-parade .landing-home .home-showcase-hero .home-copy h1,
html.home-design-neon .landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff1688;
  filter: drop-shadow(0 10px 18px rgba(255, 22, 136, 0.18));
  -webkit-text-fill-color: #ff1688;
  text-shadow:
    2px 2px 0 #ffffff,
    5px 5px 0 #4b241c,
    8px 8px 0 #ffcf26,
    11px 11px 0 #20c8dc;
  -webkit-text-stroke: 0;
}

html.home-design-candy .landing-home .home-showcase-hero .home-copy h1::before,
html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1::before,
html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1::before,
html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1::before,
html.home-design-parade .landing-home .home-showcase-hero .home-copy h1::before,
html.home-design-neon .landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #20c8dc 0 33%, #ffcf26 33% 66%, #ff1688 66% 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 #4b241c, 0 10px 0 rgba(32, 200, 220, 0.62);
}

html.home-design-candy .landing-home .home-showcase-hero .home-copy h1::after,
html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1::after,
html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1::after,
html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1::after,
html.home-design-parade .landing-home .home-showcase-hero .home-copy h1::after,
html.home-design-neon .landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 45% 45%, #fff 0 14%, transparent 16%),
    linear-gradient(45deg, #ff1688 0 48%, #ffcf26 49% 100%);
  filter: drop-shadow(0 4px 0 #4b241c) drop-shadow(4px 6px 0 #20c8dc);
}

@media (max-width: 760px) {
  html.home-design-candy .landing-home .home-showcase-hero .home-copy h1,
  html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1,
  html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1,
  html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1,
  html.home-design-parade .landing-home .home-showcase-hero .home-copy h1,
  html.home-design-neon .landing-home .home-showcase-hero .home-copy h1 {
    text-shadow:
      1px 1px 0 #ffffff,
      4px 4px 0 #4b241c,
      6px 6px 0 #ffcf26,
      8px 8px 0 #20c8dc;
  }
}

/* Image logo from yurupa-pink-pop-logo-reference. This must stay after text-logo rules. */
html.home-design-candy .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
html.home-design-parade .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
html.home-design-neon .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
.landing-home .home-showcase-hero .home-copy h1.home-logo-title {
  background: none;
  color: inherit;
  display: block;
  filter: none;
  line-height: 1;
  margin: 0 0 20px;
  max-width: min(570px, 43vw);
  position: relative;
  text-shadow: none;
  transform: rotate(-1.6deg);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.landing-home .home-showcase-hero .home-copy h1.home-logo-title::before,
.landing-home .home-showcase-hero .home-copy h1.home-logo-title::after {
  content: none;
  display: none;
}

.landing-home .home-showcase-hero .home-copy h1.home-logo-title span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.landing-home .home-showcase-hero .home-copy h1.home-logo-title img {
  display: block;
  height: auto;
  max-width: 100%;
  width: clamp(360px, 40vw, 560px);
}

@media (max-width: 760px) {
  html.home-design-candy .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  html.home-design-candypro .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  html.home-design-partybox .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  html.home-design-playroom .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  html.home-design-parade .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  html.home-design-neon .landing-home .home-showcase-hero .home-copy h1.home-logo-title,
  .landing-home .home-showcase-hero .home-copy h1.home-logo-title {
    margin: 4px 0 20px;
    max-width: 92vw;
    transform: rotate(-1.2deg);
  }

  .landing-home .home-showcase-hero .home-copy h1.home-logo-title img {
    width: min(345px, 92vw);
  }
}

/* Pink POP logo v3: keep the fill clearly pink on real browsers. */
.landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff4f9a;
  filter: drop-shadow(0 8px 0 #ffcf26) drop-shadow(8px 12px 0 #22c7d9) drop-shadow(0 18px 18px rgba(69, 33, 31, 0.15));
  -webkit-text-fill-color: #ff4f9a;
  text-shadow:
    0 4px 0 #fff,
    4px 0 0 #fff,
    0 -4px 0 #fff,
    -4px 0 0 #fff,
    3px 3px 0 #fff,
    -3px 3px 0 #fff,
    3px -3px 0 #fff,
    -3px -3px 0 #fff,
    7px 7px 0 #4b241c,
    10px 10px 0 #ffcf26,
    13px 13px 0 #22c7d9;
  -webkit-text-stroke: 1px #c91868;
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 6px 0 #ffcf26) drop-shadow(5px 8px 0 #22c7d9);
    text-shadow:
      0 3px 0 #fff,
      3px 0 0 #fff,
      0 -3px 0 #fff,
      -3px 0 0 #fff,
      2px 2px 0 #fff,
      -2px 2px 0 #fff,
      2px -2px 0 #fff,
      -2px -2px 0 #fff,
      5px 5px 0 #4b241c,
      8px 8px 0 #ffcf26,
      10px 10px 0 #22c7d9;
    -webkit-text-stroke: 1px #c91868;
  }
}

/* Richer playable-feeling game previews. Keep this block at the end. */
.landing-home .home-game-preview-showcase {
  min-height: 540px;
}

.landing-home .preview-card {
  padding: 16px 18px 18px;
}

.landing-home .preview-dj {
  top: 0;
  width: 49%;
}

.landing-home .preview-search {
  top: 18px;
  width: 44%;
}

.landing-home .preview-match {
  top: 238px;
  width: 49%;
}

.landing-home .preview-kitchen {
  top: 270px;
  width: 45%;
}

.landing-home .preview-card-title {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  margin-bottom: 12px;
  min-width: 0;
}

.landing-home .preview-card-title img {
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid rgba(37, 23, 46, 0.16);
  border-radius: 14px;
  box-shadow: 0 7px 15px rgba(37, 23, 46, 0.12);
  display: block;
  object-fit: cover;
  width: 46px;
}

.landing-home .preview-card-title div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.landing-home .preview-card-title strong {
  color: #25172e;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-home .preview-card-title span {
  color: rgba(37, 23, 46, 0.62);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-home .preview-card-title em,
.landing-home .preview-status-row span {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid color-mix(in srgb, var(--preview-accent), #fff 50%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--preview-accent), #25172e 28%);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 5px 9px;
  white-space: nowrap;
}

.landing-home .preview-play-button {
  align-items: center;
  background: var(--preview-accent);
  border-radius: 999px;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.landing-home .preview-play-button::before {
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent;
  content: "";
  margin-left: 3px;
}

.landing-home .preview-named-players span {
  font-size: 11px;
  height: 30px;
  width: 30px;
}

.landing-home .preview-named-players span:last-child {
  background: #25172e;
  border-color: #25172e;
  color: #fff;
  width: 42px;
}

.landing-home .preview-bubble {
  background: #fff;
  border: 1px solid rgba(37, 23, 46, 0.14);
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 8px 18px rgba(37, 23, 46, 0.08);
  color: rgba(37, 23, 46, 0.76);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  margin: 10px 0 0;
  max-width: 86%;
  padding: 8px 10px;
}

.landing-home .preview-bubble-right {
  border-radius: 14px 14px 4px 14px;
  margin-left: auto;
}

.landing-home .preview-word-row span {
  align-items: center;
  color: rgba(37, 23, 46, 0.76);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  justify-content: center;
  min-width: 44px;
  padding: 0 10px;
  width: auto;
}

.landing-home .preview-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.landing-home .preview-topic {
  margin-bottom: 10px;
  padding: 12px 14px;
}

.landing-home .preview-topic b {
  color: #25172e;
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.landing-home .preview-topic i {
  width: 48%;
}

.landing-home .preview-answer-grid {
  gap: 8px;
}

.landing-home .preview-answer-grid span {
  align-items: center;
  color: rgba(37, 23, 46, 0.80);
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 54px;
  padding-top: 16px;
}

.landing-home .preview-answer-grid span::before {
  left: 50%;
  right: auto;
  top: 10px;
  transform: translateX(-50%);
  width: 22px;
}

.landing-home .preview-kitchen .preview-bubble {
  margin-top: 8px;
}

.landing-home .preview-kitchen .preview-card-title,
.landing-home .preview-search .preview-card-title {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.landing-home .preview-kitchen .preview-card-title img,
.landing-home .preview-search .preview-card-title img {
  border-radius: 13px;
  width: 42px;
}

@media (max-width: 1080px) {
  .landing-home .home-game-preview-showcase {
    min-height: 500px;
  }
}

@media (max-width: 760px) {
  .landing-home .home-game-preview-showcase {
    min-height: 0;
  }

  .landing-home .preview-card {
    min-height: 292px;
    padding: 16px;
  }

  .landing-home .preview-card-title {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .landing-home .preview-card-title em {
    justify-self: start;
    grid-column: 2;
    margin-top: 2px;
  }

  .landing-home .preview-card-title img {
    width: 42px;
  }

  .landing-home .preview-bubble {
    max-width: 100%;
  }

  .landing-home .preview-answer-grid span {
    min-height: 46px;
  }
}

/* B refined: TOP game-preview showcase */
.landing-home .home-hero-showcase {
  gap: 24px;
}

.landing-home .home-showcase-hero {
  align-items: center;
  display: grid;
  gap: clamp(24px, 4vw, 54px);
  grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr);
  width: 100%;
}

.landing-home .home-game-preview-showcase {
  aspect-ratio: 1.58 / 1;
  min-height: 390px;
  position: relative;
  width: 100%;
}

.landing-home .preview-card {
  --preview-accent: #ff4f9a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 252, 245, 0.88)),
    #fff;
  border: 2px solid rgba(37, 23, 46, 0.86);
  border-radius: 22px;
  box-shadow:
    0 14px 28px rgba(37, 23, 46, 0.12),
    6px 7px 0 rgba(37, 23, 46, 0.10);
  overflow: hidden;
  padding: 20px;
  position: absolute;
}

.landing-home .preview-card::before {
  background: linear-gradient(90deg, var(--preview-accent), rgba(255, 255, 255, 0.55));
  content: "";
  height: 9px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.landing-home .preview-card-bar {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.landing-home .preview-card-bar span {
  background: rgba(37, 23, 46, 0.18);
  border-radius: 999px;
  height: 7px;
  width: 7px;
}

.landing-home .preview-dj {
  --preview-accent: #8c63ff;
  left: 2%;
  top: 0;
  transform: rotate(-2deg);
  width: 48%;
}

.landing-home .preview-search {
  --preview-accent: #23c8dc;
  right: 0;
  top: 22px;
  transform: rotate(3deg);
  width: 43%;
}

.landing-home .preview-match {
  --preview-accent: #ff4f9a;
  left: 0;
  top: 178px;
  transform: rotate(1deg);
  width: 49%;
}

.landing-home .preview-kitchen {
  --preview-accent: #ffbd31;
  right: 4%;
  top: 210px;
  transform: rotate(-1.5deg);
  width: 44%;
}

.landing-home .preview-head,
.landing-home .preview-players,
.landing-home .preview-chip-row,
.landing-home .preview-food-row {
  align-items: center;
  display: flex;
}

.landing-home .preview-head {
  gap: 12px;
}

.landing-home .preview-symbol {
  align-items: center;
  background: var(--preview-accent);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.landing-home .preview-lines {
  display: grid;
  flex: 1;
  gap: 7px;
}

.landing-home .preview-lines i,
.landing-home .preview-topic i,
.landing-home .preview-small-list i,
.landing-home .preview-side-dots i {
  background: rgba(37, 23, 46, 0.18);
  border-radius: 999px;
  display: block;
  height: 7px;
}

.landing-home .preview-lines i:first-child {
  width: 72%;
}

.landing-home .preview-lines i:last-child {
  width: 46%;
}

.landing-home .preview-head strong,
.landing-home .preview-timer,
.landing-home .preview-hit-ring {
  color: #25172e;
  font-weight: 900;
  letter-spacing: 0;
}

.landing-home .preview-wave {
  align-items: center;
  display: flex;
  gap: 5px;
  height: 40px;
  margin: 12px 0;
}

.landing-home .preview-wave i {
  background: linear-gradient(180deg, #ff63b0, #24c7dc);
  border-radius: 999px;
  display: block;
  flex: 1;
}

.landing-home .preview-wave i:nth-child(1) { height: 16px; }
.landing-home .preview-wave i:nth-child(2) { height: 28px; }
.landing-home .preview-wave i:nth-child(3) { height: 20px; }
.landing-home .preview-wave i:nth-child(4) { height: 34px; }
.landing-home .preview-wave i:nth-child(5) { height: 24px; }
.landing-home .preview-wave i:nth-child(6) { height: 30px; }
.landing-home .preview-wave i:nth-child(7) { height: 18px; }
.landing-home .preview-wave i:nth-child(8) { height: 26px; }

.landing-home .preview-url,
.landing-home .preview-search-box {
  background: rgba(37, 23, 46, 0.05);
  border: 1px solid rgba(37, 23, 46, 0.12);
  border-radius: 999px;
  height: 34px;
}

.landing-home .preview-url::before,
.landing-home .preview-search-box span {
  background: rgba(37, 23, 46, 0.26);
  border-radius: 999px;
  content: "";
  display: block;
  height: 7px;
  margin: 13px 16px;
  width: 54%;
}

.landing-home .preview-players {
  gap: 8px;
  margin-top: 14px;
}

.landing-home .preview-players span {
  align-items: center;
  background: #fff;
  border: 2px solid rgba(37, 23, 46, 0.2);
  border-radius: 999px;
  color: #25172e;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.landing-home .preview-players span:nth-child(1) { background: #ffd7e9; }
.landing-home .preview-players span:nth-child(2) { background: #dff7ff; }
.landing-home .preview-players span:nth-child(3) { background: #fff1b8; }
.landing-home .preview-players span:nth-child(4) { background: #dbf8df; }
.landing-home .preview-players span:nth-child(5) { background: #eadfff; }

.landing-home .preview-search {
  padding-right: 76px;
}

.landing-home .preview-search-box {
  margin: 0 0 14px;
}

.landing-home .preview-hit-ring {
  align-items: center;
  background:
    radial-gradient(circle, #fff 56%, transparent 58%),
    conic-gradient(#23c8dc 0 78%, rgba(37, 23, 46, 0.12) 78% 100%);
  border-radius: 999px;
  display: flex;
  font-size: 22px;
  height: 58px;
  justify-content: center;
  position: absolute;
  right: 16px;
  top: 54px;
  width: 58px;
}

.landing-home .preview-hit-ring::after {
  bottom: -14px;
  color: #23a8c0;
  content: "HIT";
  font-size: 10px;
  font-weight: 900;
  position: absolute;
}

.landing-home .preview-chip-row {
  gap: 8px;
  margin: 10px 0 14px;
}

.landing-home .preview-chip-row span {
  background: rgba(35, 200, 220, 0.16);
  border: 1px solid rgba(35, 200, 220, 0.32);
  border-radius: 999px;
  height: 24px;
  width: 52px;
}

.landing-home .preview-chip-row span:nth-child(2) { background: rgba(94, 211, 154, 0.18); }
.landing-home .preview-chip-row span:nth-child(3) { background: rgba(255, 211, 79, 0.22); }
.landing-home .preview-chip-row span:nth-child(4) { background: rgba(37, 23, 46, 0.06); }

.landing-home .preview-small-list {
  display: grid;
  gap: 8px;
}

.landing-home .preview-small-list i:nth-child(1) { width: 88%; }
.landing-home .preview-small-list i:nth-child(2) { width: 62%; }
.landing-home .preview-small-list i:nth-child(3) { width: 74%; }

.landing-home .preview-topic {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(37, 23, 46, 0.12);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 16px;
}

.landing-home .preview-topic i:first-child { width: 76%; }
.landing-home .preview-topic i:last-child { width: 54%; }

.landing-home .preview-answer-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, 1fr);
}

.landing-home .preview-answer-grid span {
  background: #fff;
  border: 2px solid var(--preview-accent);
  border-radius: 12px;
  min-height: 66px;
  position: relative;
}

.landing-home .preview-answer-grid span::before {
  background: rgba(37, 23, 46, 0.18);
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 13px;
  position: absolute;
  right: 13px;
  top: 18px;
}

.landing-home .preview-answer-grid span:nth-child(2) { border-color: #ffbd31; }
.landing-home .preview-answer-grid span:nth-child(3) { border-color: #23c8dc; }
.landing-home .preview-answer-grid span:nth-child(4) { border-color: #5ed39a; }

.landing-home .preview-side-dots {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  margin-top: 12px;
}

.landing-home .preview-side-dots i {
  background: #ff4f9a;
  height: 9px;
  width: 9px;
}

.landing-home .preview-side-dots i:nth-child(2) { background: #23c8dc; }
.landing-home .preview-side-dots i:nth-child(3) { background: #ffbd31; }
.landing-home .preview-side-dots i:nth-child(4) { background: #5ed39a; }

.landing-home .preview-timer {
  background: #fff;
  border: 1px solid rgba(37, 23, 46, 0.12);
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
}

.landing-home .preview-food-row {
  gap: 12px;
  margin-bottom: 12px;
}

.landing-home .preview-food-row span {
  background: #f44949;
  border-radius: 999px;
  box-shadow: inset 0 -5px 0 rgba(37, 23, 46, 0.08);
  height: 32px;
  width: 36px;
}

.landing-home .preview-food-row span:nth-child(2) {
  background: #f3b544;
  border-radius: 48% 48% 54% 54%;
}

.landing-home .preview-food-row span:nth-child(3) {
  background: #ff7a54;
  border-radius: 16px;
  width: 48px;
}

.landing-home .preview-food-row span:nth-child(4) {
  background: #69c96d;
  border-radius: 45% 55% 44% 56%;
}

.landing-home .preview-plate-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 14px;
}

.landing-home .preview-plate-grid i {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(37, 23, 46, 0.12);
  border-radius: 12px;
  height: 46px;
}

.landing-home .preview-progress {
  background: rgba(37, 23, 46, 0.08);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.landing-home .preview-progress span {
  background: linear-gradient(90deg, #ffbd31, #ff7a54);
  border-radius: inherit;
  display: block;
  height: 100%;
  width: 72%;
}

@media (max-width: 1080px) {
  .landing-home .home-showcase-hero {
    grid-template-columns: 1fr;
  }

  .landing-home .home-game-preview-showcase {
    min-height: 360px;
  }

  .landing-home .preview-dj,
  .landing-home .preview-match {
    left: 0;
  }

  .landing-home .preview-search,
  .landing-home .preview-kitchen {
    right: 0;
  }
}

@media (max-width: 760px) {
  .landing-home .home-hero-showcase {
    padding-top: 24px;
  }

  .landing-home .home-showcase-hero {
    gap: 18px;
  }

  .landing-home .home-game-preview-showcase {
    display: grid;
    gap: 12px;
    grid-auto-columns: minmax(245px, 76vw);
    grid-auto-flow: column;
    min-height: 0;
    overflow-x: auto;
    padding: 4px 4px 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .landing-home .home-game-preview-showcase::-webkit-scrollbar {
    display: none;
  }

  .landing-home .preview-card {
    min-height: 182px;
    padding: 16px;
    position: relative;
    scroll-snap-align: start;
    transform: none;
    width: auto;
  }

  .landing-home .preview-dj,
  .landing-home .preview-search,
  .landing-home .preview-match,
  .landing-home .preview-kitchen {
    left: auto;
    right: auto;
    top: auto;
  }

  .landing-home .preview-search {
    padding-right: 68px;
  }

  .landing-home .preview-answer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-home .preview-kitchen .preview-food-row {
    gap: 8px;
  }
}

/* Reflect the NOTE direction: lighter header, no decorative English chip, show the product itself. */
.landing-home .public-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

html.home-design-candy .landing-home .public-nav,
html.home-design-candypro .landing-home .public-nav,
html.home-design-partybox .landing-home .public-nav,
html.home-design-playroom .landing-home .public-nav,
html.home-design-parade .landing-home .public-nav,
html.home-design-neon .landing-home .public-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.landing-home .home-copy .eyebrow {
  display: none;
}

.landing-home .preview-card {
  animation: yurupaPreviewFloat 7s ease-in-out infinite;
  will-change: transform;
}

.landing-home .preview-search {
  animation-delay: -1.8s;
}

.landing-home .preview-match {
  animation-delay: -3.3s;
}

.landing-home .preview-kitchen {
  animation-delay: -4.9s;
}

@keyframes yurupaPreviewFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-home .preview-card {
    animation: none;
  }
}

@media (max-width: 760px) {
  html.home-design-candy .landing-home .public-nav .brand-link,
  html.home-design-candypro .landing-home .public-nav .brand-link,
  html.home-design-partybox .landing-home .public-nav .brand-link,
  html.home-design-playroom .landing-home .public-nav .brand-link,
  html.home-design-parade .landing-home .public-nav .brand-link,
  html.home-design-neon .landing-home .public-nav .brand-link {
    flex-basis: 100%;
    min-width: 0;
    white-space: normal;
  }

  html.home-design-candy .landing-home .public-nav .public-links,
  html.home-design-candypro .landing-home .public-nav .public-links,
  html.home-design-partybox .landing-home .public-nav .public-links,
  html.home-design-playroom .landing-home .public-nav .public-links,
  html.home-design-parade .landing-home .public-nav .public-links,
  html.home-design-neon .landing-home .public-nav .public-links {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .landing-home .public-nav .sound-control {
    margin-left: 0;
  }
}

html.home-design-candy .landing-home .home-hero,
html.home-design-candypro .landing-home .home-hero,
html.home-design-partybox .landing-home .home-hero,
html.home-design-playroom .landing-home .home-hero,
html.home-design-parade .landing-home .home-hero,
html.home-design-neon .landing-home .home-hero {
  position: relative;
  z-index: 1;
}

html.home-design-candy .landing-home .home-copy h1,
html.home-design-candypro .landing-home .home-copy h1,
html.home-design-partybox .landing-home .home-copy h1,
html.home-design-playroom .landing-home .home-copy h1,
html.home-design-parade .landing-home .home-copy h1,
html.home-design-neon .landing-home .home-copy h1 {
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", system-ui, sans-serif;
  font-size: 9.5rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.88;
  margin: 0.05em 0 0.14em;
  max-width: none;
  position: relative;
  width: fit-content;
}

html.home-design-candy .landing-home .home-copy h1::after,
html.home-design-candypro .landing-home .home-copy h1::after,
html.home-design-partybox .landing-home .home-copy h1::after,
html.home-design-playroom .landing-home .home-copy h1::after,
html.home-design-parade .landing-home .home-copy h1::after,
html.home-design-neon .landing-home .home-copy h1::after {
  display: none;
}

html.home-design-candy .public-nav .brand-link,
html.home-design-candypro .public-nav .brand-link,
html.home-design-partybox .public-nav .brand-link,
html.home-design-playroom .public-nav .brand-link,
html.home-design-parade .public-nav .brand-link,
html.home-design-neon .public-nav .brand-link {
  flex-shrink: 0;
  white-space: nowrap;
}

html.home-design-candy .public-nav .public-links,
html.home-design-candypro .public-nav .public-links,
html.home-design-partybox .public-nav .public-links,
html.home-design-playroom .public-nav .public-links,
html.home-design-parade .public-nav .public-links,
html.home-design-neon .public-nav .public-links {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

/* A案: Candy Ticket */
html.home-design-candy .landing-home {
  background:
    linear-gradient(120deg, rgba(255, 79, 160, 0.16) 0 12%, transparent 12% 100%),
    linear-gradient(300deg, rgba(38, 202, 219, 0.16) 0 15%, transparent 15% 100%),
    repeating-linear-gradient(135deg, rgba(255, 202, 58, 0.22) 0 12px, transparent 12px 32px),
    linear-gradient(180deg, #fff8fb 0%, #fff6dd 48%, #eafcff 100%);
}

html.home-design-candy .landing-home::before {
  background:
    linear-gradient(90deg, #ff4fa0 0 20%, #ffcb3d 20% 40%, #36d4e6 40% 60%, #58dfa2 60% 80%, #9d6bff 80% 100%);
  border: 3px solid #25172e;
  box-shadow: 0 18px 0 rgba(37, 23, 46, 0.1);
  content: "";
  height: 86px;
  left: -8vw;
  position: absolute;
  right: -8vw;
  top: 138px;
  transform: rotate(-3deg);
  z-index: 0;
}

html.home-design-candy .landing-home::after {
  background:
    radial-gradient(circle, rgba(37, 23, 46, 0.2) 2px, transparent 2.5px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(255, 79, 160, 0.26) 2px, transparent 2.5px) 11px 11px / 22px 22px;
  content: "";
  height: 220px;
  opacity: 0.52;
  position: absolute;
  right: -26px;
  top: 250px;
  transform: rotate(8deg);
  width: 280px;
  z-index: 0;
}

html.home-design-candy .public-nav {
  border: 2px solid #25172e;
  box-shadow: 0 10px 0 rgba(37, 23, 46, 0.12);
}

html.home-design-candy .landing-home .eyebrow {
  background: #25172e;
  border: 0;
  box-shadow: 0 9px 0 rgba(255, 79, 160, 0.22);
  color: #fff;
}

html.home-design-candy .landing-home .home-copy h1 {
  color: #ffffff;
  filter: drop-shadow(0 14px 0 rgba(37, 23, 46, 0.09));
  text-shadow:
    0 0 0 #25172e,
    5px 5px 0 #ff4fa0,
    10px 10px 0 #36d4e6,
    14px 14px 0 #25172e;
  -webkit-text-stroke: 4px #25172e;
}

html.home-design-candy .landing-home .home-copy h1::before {
  background:
    conic-gradient(from -25deg, #ffcb3d 0 25%, #ff4fa0 25% 50%, #36d4e6 50% 75%, #58dfa2 75% 100%);
  border: 3px solid #25172e;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #25172e;
  content: "";
  height: 0.38em;
  position: absolute;
  right: -0.34em;
  top: -0.02em;
  transform: rotate(10deg);
  width: 0.38em;
}

html.home-design-candy .landing-home .home-copy p {
  color: #25172e;
  font-weight: 700;
  opacity: 0.82;
}

html.home-design-candy .landing-home .home-points span {
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #25172e;
}

html.home-design-candy .landing-home .home-card,
html.home-design-candy .landing-home .home-game-section {
  border: 1px solid rgba(37, 23, 46, 0.14);
  box-shadow: 0 18px 46px -24px rgba(37, 23, 46, 0.42);
}

/* A1 Pro Pattern 1: Candy Pro */
html.home-design-candypro .landing-home {
  background:
    linear-gradient(116deg, rgba(255, 82, 153, 0.12) 0 13%, transparent 13% 100%),
    linear-gradient(302deg, rgba(37, 205, 224, 0.12) 0 15%, transparent 15% 100%),
    repeating-linear-gradient(135deg, rgba(255, 203, 61, 0.16) 0 10px, transparent 10px 36px),
    linear-gradient(180deg, #fffafd 0%, #fff8e9 50%, #edfaff 100%);
}

html.home-design-candypro .landing-home::before {
  background:
    linear-gradient(90deg, #ff4f9a 0 18%, #ffc83d 18% 36%, #36cfe2 36% 54%, #62dda2 54% 72%, #9d6bff 72% 100%);
  border: 2px solid #25172e;
  border-radius: 999px;
  box-shadow:
    0 10px 0 rgba(255, 255, 255, 0.92),
    0 22px 42px rgba(37, 23, 46, 0.16);
  content: "";
  height: 72px;
  left: -7vw;
  position: absolute;
  right: -7vw;
  top: 142px;
  transform: rotate(-1.8deg);
  z-index: 0;
}

html.home-design-candypro .landing-home::after {
  background:
    radial-gradient(circle, rgba(255, 79, 154, 0.24) 2px, transparent 2.5px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(37, 23, 46, 0.16) 2px, transparent 2.5px) 12px 12px / 24px 24px;
  content: "";
  height: 240px;
  opacity: 0.46;
  position: absolute;
  right: -34px;
  top: 258px;
  transform: rotate(6deg);
  width: 320px;
  z-index: 0;
}

html.home-design-candypro .public-nav {
  border: 1px solid rgba(37, 23, 46, 0.16);
  box-shadow: 0 16px 38px -26px rgba(37, 23, 46, 0.42);
}

html.home-design-candypro .landing-home .eyebrow {
  background: #25172e;
  border: 0;
  box-shadow: 0 8px 0 rgba(255, 79, 154, 0.18);
  color: #ffffff;
}

html.home-design-candypro .landing-home .home-copy h1 {
  color: #ffffff;
  filter: drop-shadow(0 13px 0 rgba(37, 23, 46, 0.08));
  text-shadow:
    0 0 0 #25172e,
    3px 3px 0 #ff4f9a,
    6px 6px 0 #25cde0,
    10px 10px 0 #25172e;
  -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 3.5px #25172e;
}

html.home-design-candypro .landing-home .home-copy h1::before {
  background:
    linear-gradient(135deg, #ff4f9a 0 25%, #ffc83d 25% 50%, #25cde0 50% 75%, #62dda2 75% 100%);
  border: 3px solid #25172e;
  border-radius: 18px;
  box-shadow: 4px 4px 0 #25172e;
  content: "";
  height: 0.34em;
  position: absolute;
  right: -0.36em;
  top: 0.01em;
  transform: rotate(9deg);
  width: 0.34em;
}

html.home-design-candypro .landing-home .home-copy p {
  color: #25172e;
  font-weight: 700;
  opacity: 0.84;
}

html.home-design-candypro .landing-home .home-points span {
  border: 2px solid #25172e;
  box-shadow: 0 7px 16px -12px rgba(37, 23, 46, 0.4);
}

html.home-design-candypro .landing-home .home-card,
html.home-design-candypro .landing-home .home-game-section {
  border: 1px solid rgba(37, 23, 46, 0.12);
  box-shadow: 0 24px 54px -30px rgba(37, 23, 46, 0.45);
}

/* A1 Pro Pattern 2: Party Box */
html.home-design-partybox .landing-home {
  background:
    linear-gradient(90deg, rgba(255, 80, 165, 0.08) 0 1px, transparent 1px 100%) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(51, 207, 224, 0.08) 0 1px, transparent 1px 100%) 0 0 / 54px 54px,
    linear-gradient(126deg, rgba(255, 205, 61, 0.22) 0 16%, transparent 16% 100%),
    linear-gradient(306deg, rgba(91, 223, 160, 0.2) 0 16%, transparent 16% 100%),
    linear-gradient(180deg, #fffdf7 0%, #fff4fb 44%, #ecfbff 100%);
}

html.home-design-partybox .landing-home::before {
  background:
    linear-gradient(90deg, #ffffff 0 10%, #ff50a5 10% 26%, #ffffff 26% 34%, #ffcd3d 34% 50%, #ffffff 50% 58%, #33cfe0 58% 74%, #ffffff 74% 82%, #5bdfa0 82% 100%);
  border: 2px solid #25172e;
  border-radius: 24px;
  box-shadow:
    8px 8px 0 rgba(37, 23, 46, 0.1),
    0 18px 38px -24px rgba(37, 23, 46, 0.38);
  content: "";
  height: 76px;
  left: -4vw;
  position: absolute;
  right: 8vw;
  top: 142px;
  transform: rotate(-2.5deg);
  z-index: 0;
}

html.home-design-partybox .landing-home::after {
  background:
    linear-gradient(45deg, transparent 0 46%, rgba(37, 23, 46, 0.14) 46% 50%, transparent 50% 100%) 0 0 / 36px 36px,
    conic-gradient(from 45deg, rgba(255, 80, 165, 0.34) 0 25%, transparent 25% 50%, rgba(51, 207, 224, 0.3) 50% 75%, transparent 75% 100%) 18px 18px / 36px 36px;
  content: "";
  height: 250px;
  opacity: 0.42;
  position: absolute;
  right: -36px;
  top: 254px;
  transform: rotate(-5deg);
  width: 330px;
  z-index: 0;
}

html.home-design-partybox .public-nav {
  border: 2px solid #25172e;
  box-shadow: 0 10px 0 rgba(255, 205, 61, 0.2);
}

html.home-design-partybox .landing-home .eyebrow {
  background: #ffffff;
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #ffcd3d;
  color: #25172e;
}

html.home-design-partybox .landing-home .home-copy h1 {
  color: #fffdf7;
  filter: drop-shadow(0 13px 0 rgba(37, 23, 46, 0.08));
  text-shadow:
    0 0 0 #25172e,
    3px 3px 0 #ffcd3d,
    6px 6px 0 #ff50a5,
    10px 10px 0 #25172e;
  -webkit-text-fill-color: #fffdf7;
  -webkit-text-stroke: 3.5px #25172e;
}

html.home-design-partybox .landing-home .home-copy h1::before {
  background:
    linear-gradient(90deg, #ff50a5 0 22%, #ffcd3d 22% 44%, #33cfe0 44% 66%, #5bdfa0 66% 88%, #9d6bff 88% 100%);
  border: 3px solid #25172e;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #25172e;
  content: "";
  height: 0.26em;
  position: absolute;
  right: -0.5em;
  top: 0.22em;
  transform: rotate(8deg);
  width: 0.62em;
}

html.home-design-partybox .landing-home .home-copy p {
  color: #25172e;
  font-weight: 700;
  opacity: 0.84;
}

html.home-design-partybox .landing-home .home-points span {
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #33cfe0;
}

html.home-design-partybox .landing-home .home-card,
html.home-design-partybox .landing-home .home-game-section {
  border: 1px solid rgba(37, 23, 46, 0.12);
  box-shadow: 0 24px 54px -30px rgba(37, 23, 46, 0.42);
}

/* A案バリエーション2: Playroom Stickers */
html.home-design-playroom .landing-home {
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(46, 205, 222, 0.1) 48px 50px),
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(255, 89, 164, 0.1) 48px 50px),
    linear-gradient(135deg, rgba(255, 211, 67, 0.16) 0 18%, transparent 18% 100%),
    linear-gradient(315deg, rgba(116, 225, 164, 0.18) 0 16%, transparent 16% 100%),
    linear-gradient(180deg, #fffafd 0%, #f2fbff 48%, #fff7e6 100%);
}

html.home-design-playroom .landing-home::before {
  background:
    linear-gradient(90deg, #ffffff 0 14%, #ff59a4 14% 28%, #ffffff 28% 42%, #2ecdde 42% 56%, #ffffff 56% 70%, #ffd343 70% 84%, #ffffff 84% 100%);
  border: 3px solid #25172e;
  border-radius: 999px;
  box-shadow: 0 12px 0 rgba(37, 23, 46, 0.12);
  content: "";
  height: 58px;
  left: -6vw;
  position: absolute;
  right: 28vw;
  top: 156px;
  transform: rotate(-5deg);
  z-index: 0;
}

html.home-design-playroom .landing-home::after {
  background:
    linear-gradient(45deg, #ff59a4 0 25%, transparent 25% 100%) 0 0 / 42px 42px,
    linear-gradient(135deg, #2ecdde 0 25%, transparent 25% 100%) 21px 21px / 42px 42px,
    linear-gradient(45deg, transparent 0 72%, #ffd343 72% 100%) 0 0 / 42px 42px;
  content: "";
  height: 230px;
  opacity: 0.38;
  position: absolute;
  right: -38px;
  top: 238px;
  transform: rotate(7deg);
  width: 300px;
  z-index: 0;
}

html.home-design-playroom .public-nav {
  border: 2px solid #25172e;
  box-shadow: 0 10px 0 rgba(46, 205, 222, 0.18);
}

html.home-design-playroom .landing-home .eyebrow {
  background: #ffffff;
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #ffd343;
  color: #25172e;
}

html.home-design-playroom .landing-home .home-copy h1 {
  color: #ffffff;
  filter: drop-shadow(0 14px 0 rgba(37, 23, 46, 0.08));
  text-shadow:
    0 0 0 #25172e,
    4px 4px 0 #ffd343,
    8px 8px 0 #ff59a4,
    12px 12px 0 #25172e;
  -webkit-text-stroke: 4px #25172e;
}

html.home-design-playroom .landing-home .home-copy h1::before {
  background:
    linear-gradient(135deg, #2ecdde 0 42%, #ffffff 42% 58%, #ff59a4 58% 100%);
  border: 3px solid #25172e;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #25172e;
  content: "";
  height: 0.28em;
  position: absolute;
  right: -0.44em;
  top: 0.16em;
  transform: rotate(-12deg);
  width: 0.55em;
}

html.home-design-playroom .landing-home .home-copy p {
  color: #25172e;
  font-weight: 700;
  opacity: 0.8;
}

html.home-design-playroom .landing-home .home-points span {
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #2ecdde;
}

html.home-design-playroom .landing-home .home-card,
html.home-design-playroom .landing-home .home-game-section {
  border: 1px solid rgba(37, 23, 46, 0.14);
  box-shadow: 0 18px 46px -24px rgba(37, 23, 46, 0.38);
}

/* A案バリエーション3: Parade Pop */
html.home-design-parade .landing-home {
  background:
    linear-gradient(102deg, rgba(255, 87, 127, 0.15) 0 11%, transparent 11% 100%),
    linear-gradient(284deg, rgba(40, 214, 188, 0.16) 0 13%, transparent 13% 100%),
    repeating-linear-gradient(135deg, rgba(37, 23, 46, 0.055) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #fffaf4 0%, #fff1f8 44%, #eefcff 100%);
}

html.home-design-parade .landing-home::before {
  background:
    repeating-linear-gradient(90deg, #ff577f 0 28px, #ffca3a 28px 56px, #28d6bc 56px 84px, #6f7cff 84px 112px);
  border: 3px solid #25172e;
  box-shadow:
    0 9px 0 #ffffff,
    0 18px 0 rgba(37, 23, 46, 0.14);
  content: "";
  height: 66px;
  left: -8vw;
  position: absolute;
  right: -8vw;
  top: 146px;
  transform: rotate(2deg);
  z-index: 0;
}

html.home-design-parade .landing-home::after {
  background:
    conic-gradient(from 45deg, #ff577f 0 25%, transparent 25% 50%, #28d6bc 50% 75%, transparent 75% 100%) 0 0 / 34px 34px,
    linear-gradient(90deg, transparent 0 42%, rgba(37, 23, 46, 0.16) 42% 46%, transparent 46% 100%) 0 0 / 52px 52px;
  content: "";
  height: 236px;
  opacity: 0.34;
  position: absolute;
  right: -34px;
  top: 260px;
  transform: rotate(-7deg);
  width: 318px;
  z-index: 0;
}

html.home-design-parade .public-nav {
  border: 2px solid #25172e;
  box-shadow: 0 10px 0 rgba(255, 87, 127, 0.18);
}

html.home-design-parade .landing-home .eyebrow {
  background: #ffca3a;
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #25172e;
  color: #25172e;
}

html.home-design-parade .landing-home .home-copy h1 {
  color: #fffbf0;
  filter: drop-shadow(0 14px 0 rgba(37, 23, 46, 0.09));
  text-shadow:
    0 0 0 #25172e,
    5px 5px 0 #ff577f,
    9px 9px 0 #ffca3a,
    13px 13px 0 #25172e;
  -webkit-text-stroke: 4px #25172e;
}

html.home-design-parade .landing-home .home-copy h1::before {
  background:
    linear-gradient(90deg, #ff577f 0 22%, #ffca3a 22% 44%, #28d6bc 44% 66%, #6f7cff 66% 88%, #ff577f 88% 100%);
  border: 3px solid #25172e;
  border-radius: 16px;
  box-shadow: 4px 4px 0 #25172e;
  content: "";
  height: 0.24em;
  position: absolute;
  right: -0.5em;
  top: 0.26em;
  transform: rotate(8deg);
  width: 0.68em;
}

html.home-design-parade .landing-home .home-copy p {
  color: #25172e;
  font-weight: 700;
  opacity: 0.82;
}

html.home-design-parade .landing-home .home-points span {
  border: 2px solid #25172e;
  box-shadow: 3px 3px 0 #ffca3a;
}

html.home-design-parade .landing-home .home-card,
html.home-design-parade .landing-home .home-game-section {
  border: 1px solid rgba(37, 23, 46, 0.14);
  box-shadow: 0 18px 46px -24px rgba(37, 23, 46, 0.4);
}

/* B案: Neon Stage */
html.home-design-neon .landing-home {
  background:
    linear-gradient(116deg, rgba(255, 207, 70, 0.18) 0 10%, transparent 10% 100%),
    linear-gradient(294deg, rgba(55, 217, 232, 0.16) 0 14%, transparent 14% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 74px),
    linear-gradient(180deg, #211529 0%, #15151f 54%, #221b16 100%);
}

html.home-design-neon .landing-home::before {
  background:
    repeating-linear-gradient(90deg, #ffcf46 0 34px, #ff4fa0 34px 68px, #37d9e8 68px 102px, #7df2a1 102px 136px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.58);
  border-top: 3px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 48px rgba(255, 79, 160, 0.2);
  content: "";
  height: 52px;
  left: -8vw;
  opacity: 0.9;
  position: absolute;
  right: -8vw;
  top: 186px;
  transform: rotate(3deg);
  z-index: 0;
}

html.home-design-neon .landing-home::after {
  background:
    linear-gradient(45deg, transparent 0 42%, rgba(255, 255, 255, 0.18) 42% 46%, transparent 46% 100%) 0 0 / 38px 38px,
    linear-gradient(135deg, transparent 0 42%, rgba(255, 207, 70, 0.22) 42% 46%, transparent 46% 100%) 19px 19px / 38px 38px;
  content: "";
  height: 280px;
  left: -40px;
  opacity: 0.58;
  position: absolute;
  top: 260px;
  transform: rotate(-8deg);
  width: 340px;
  z-index: 0;
}

html.home-design-neon .public-nav {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 18px 38px -24px rgba(255, 255, 255, 0.72);
}

html.home-design-neon .landing-home .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  box-shadow: none;
}

html.home-design-neon .landing-home .home-copy h1 {
  background: linear-gradient(92deg, #ffcf46 0%, #ff4fa0 36%, #37d9e8 68%, #7df2a1 100%);
  background-clip: text;
  color: #ffcf46;
  filter:
    drop-shadow(0 0 18px rgba(255, 79, 160, 0.34))
    drop-shadow(0 16px 0 rgba(0, 0, 0, 0.22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #ffffff;
}

html.home-design-neon .landing-home .home-copy h1::before {
  background: linear-gradient(90deg, #ffcf46, #ff4fa0, #37d9e8, #7df2a1);
  border-radius: 999px;
  box-shadow:
    0 0 18px rgba(255, 79, 160, 0.52),
    0 0 28px rgba(55, 217, 232, 0.38);
  bottom: -0.17em;
  content: "";
  height: 0.08em;
  left: 0.04em;
  position: absolute;
  right: 0.02em;
}

html.home-design-neon .landing-home .home-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

html.home-design-neon .landing-home .home-points span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  color: #ffffff;
}

html.home-design-neon .landing-home .home-card,
html.home-design-neon .landing-home .home-game-section {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 58px -30px rgba(0, 0, 0, 0.62);
}

html.home-design-neon .landing-home .home-game-section {
  background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 900px) {
  html.home-design-candy .landing-home .home-copy h1,
  html.home-design-candypro .landing-home .home-copy h1,
  html.home-design-partybox .landing-home .home-copy h1,
  html.home-design-playroom .landing-home .home-copy h1,
  html.home-design-parade .landing-home .home-copy h1,
  html.home-design-neon .landing-home .home-copy h1 {
    font-size: 7rem;
  }

  html.home-design-candy .landing-home::before,
  html.home-design-candypro .landing-home::before,
  html.home-design-partybox .landing-home::before,
  html.home-design-playroom .landing-home::before,
  html.home-design-parade .landing-home::before,
  html.home-design-neon .landing-home::before {
    top: 126px;
  }
}

@media (max-width: 560px) {
  html.home-design-candy .landing-home .home-copy h1,
  html.home-design-candypro .landing-home .home-copy h1,
  html.home-design-partybox .landing-home .home-copy h1,
  html.home-design-playroom .landing-home .home-copy h1,
  html.home-design-parade .landing-home .home-copy h1,
  html.home-design-neon .landing-home .home-copy h1 {
    font-size: 4.6rem;
  }

  html.home-design-candy .landing-home .home-copy h1,
  html.home-design-candypro .landing-home .home-copy h1,
  html.home-design-partybox .landing-home .home-copy h1,
  html.home-design-playroom .landing-home .home-copy h1,
  html.home-design-parade .landing-home .home-copy h1 {
    text-shadow:
      0 0 0 #25172e,
      3px 3px 0 #ff4fa0,
      6px 6px 0 #36d4e6,
      9px 9px 0 #25172e;
    -webkit-text-stroke-width: 3px;
  }

  html.home-design-candy .landing-home::before,
  html.home-design-candypro .landing-home::before,
  html.home-design-partybox .landing-home::before,
  html.home-design-playroom .landing-home::before,
  html.home-design-parade .landing-home::before,
  html.home-design-neon .landing-home::before {
    height: 42px;
    top: 160px;
  }

  html.home-design-candy .landing-home::after,
  html.home-design-candypro .landing-home::after,
  html.home-design-partybox .landing-home::after,
  html.home-design-playroom .landing-home::after,
  html.home-design-parade .landing-home::after,
  html.home-design-neon .landing-home::after {
    display: none;
  }

  html.home-design-candy .landing-home .home-game-section .home-card-head,
  html.home-design-candypro .landing-home .home-game-section .home-card-head,
  html.home-design-partybox .landing-home .home-game-section .home-card-head,
  html.home-design-playroom .landing-home .home-game-section .home-card-head,
  html.home-design-parade .landing-home .home-game-section .home-card-head,
  html.home-design-neon .landing-home .home-game-section .home-card-head {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  html.home-design-candy .landing-home .home-game-section .home-card-head h2,
  html.home-design-candypro .landing-home .home-game-section .home-card-head h2,
  html.home-design-partybox .landing-home .home-game-section .home-card-head h2,
  html.home-design-playroom .landing-home .home-game-section .home-card-head h2,
  html.home-design-parade .landing-home .home-game-section .home-card-head h2,
  html.home-design-neon .landing-home .home-game-section .home-card-head h2 {
    white-space: nowrap;
  }
}

/* Final TOP overrides for the NOTE-inspired direction. Keep these at the end. */
html.home-design-candy .landing-home .public-nav,
html.home-design-candypro .landing-home .public-nav,
html.home-design-partybox .landing-home .public-nav,
html.home-design-playroom .landing-home .public-nav,
html.home-design-parade .landing-home .public-nav,
html.home-design-neon .landing-home .public-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html.home-design-candy .landing-home .home-copy .eyebrow,
html.home-design-candypro .landing-home .home-copy .eyebrow,
html.home-design-partybox .landing-home .home-copy .eyebrow,
html.home-design-playroom .landing-home .home-copy .eyebrow,
html.home-design-parade .landing-home .home-copy .eyebrow,
html.home-design-neon .landing-home .home-copy .eyebrow {
  display: none;
}

@media (max-width: 760px) {
  html.home-design-candy .landing-home .public-nav,
  html.home-design-candypro .landing-home .public-nav,
  html.home-design-partybox .landing-home .public-nav,
  html.home-design-playroom .landing-home .public-nav,
  html.home-design-parade .landing-home .public-nav,
  html.home-design-neon .landing-home .public-nav {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
  }

  html.home-design-candy .landing-home .public-nav .brand-link,
  html.home-design-candypro .landing-home .public-nav .brand-link,
  html.home-design-partybox .landing-home .public-nav .brand-link,
  html.home-design-playroom .landing-home .public-nav .brand-link,
  html.home-design-parade .landing-home .public-nav .brand-link,
  html.home-design-neon .landing-home .public-nav .brand-link {
    flex: 0 0 100%;
    min-width: 0;
    white-space: normal;
  }

  html.home-design-candy .landing-home .public-nav .public-links,
  html.home-design-candypro .landing-home .public-nav .public-links,
  html.home-design-partybox .landing-home .public-nav .public-links,
  html.home-design-playroom .landing-home .public-nav .public-links,
  html.home-design-parade .landing-home .public-nav .public-links,
  html.home-design-neon .landing-home .public-nav .public-links {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

/* Final game-preview sizing. Must stay after design concept variants. */
.landing-home .home-game-preview-showcase {
  min-height: 640px;
}

.landing-home .preview-match {
  top: 286px;
}

.landing-home .preview-kitchen {
  top: 326px;
}

@media (max-width: 1080px) {
  .landing-home .home-game-preview-showcase {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .landing-home .home-game-preview-showcase {
    min-height: 0;
  }
}

/* DJ Wolf feature preview refresh. Remove this block to revert the 2026-06-08 TOP mock direction. */
.landing-home .home-showcase-hero {
  overflow: hidden;
  position: relative;
}

.landing-home .home-showcase-hero::before {
  background:
    radial-gradient(circle at 15% 35%, rgba(255, 221, 65, 0.50) 0 10px, transparent 11px),
    radial-gradient(circle at 82% 22%, rgba(32, 200, 220, 0.45) 0 8px, transparent 9px),
    radial-gradient(circle at 72% 72%, rgba(255, 90, 145, 0.32) 0 12px, transparent 13px),
    linear-gradient(135deg, rgba(255, 93, 152, 0.16), rgba(255, 210, 64, 0.08) 48%, rgba(39, 205, 224, 0.14));
  border-radius: 36px;
  content: "";
  inset: 12px 10px auto 18%;
  min-height: 168px;
  pointer-events: none;
  position: absolute;
  transform: rotate(-3deg);
  z-index: 0;
}

.landing-home .home-showcase-hero::after {
  background:
    linear-gradient(90deg, #ff5f93 0 20%, #ffbf28 20% 40%, #25cde0 40% 60%, #8ade62 60% 80%, #9b7bff 80% 100%);
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(37, 23, 46, 0.14);
  content: "";
  height: 18px;
  left: clamp(22px, 8vw, 96px);
  pointer-events: none;
  position: absolute;
  top: 22px;
  transform: rotate(-2deg);
  width: min(280px, 42vw);
  z-index: 1;
}

.landing-home .home-showcase-hero > * {
  position: relative;
  z-index: 2;
}

.landing-home .home-showcase-hero .home-copy h1 {
  color: #fff8f0;
  display: inline-block;
  filter: drop-shadow(0 15px 22px rgba(37, 23, 46, 0.16));
  line-height: 0.95;
  margin-bottom: 22px;
  paint-order: stroke fill;
  position: relative;
  text-shadow:
    4px 4px 0 #ff4f8f,
    8px 8px 0 #ffc22e,
    12px 12px 0 #27c8dd,
    16px 16px 22px rgba(37, 23, 46, 0.18);
  transform: rotate(-2deg);
  -webkit-text-stroke: 4px #45211f;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 24% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 62% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #ff7ca9, #ffc343);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 9px 20px rgba(255, 79, 143, 0.22);
  content: "";
  height: 24px;
  position: absolute;
  right: -38px;
  top: -8px;
  transform: rotate(10deg);
  width: 74px;
  z-index: -1;
}

.landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 16%, transparent 18%),
    linear-gradient(45deg, #ffe24b, #ffae1f);
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
  content: "";
  display: block;
  height: 38px;
  left: -28px;
  position: absolute;
  top: -12px;
  transform: rotate(14deg);
  width: 38px;
  z-index: -1;
}

.landing-home .home-game-preview-showcase {
  min-height: 610px;
}

.landing-home .preview-card {
  border-color: rgba(69, 33, 31, 0.12);
}

.landing-home .preview-dj.preview-feature {
  left: 0;
  min-height: 380px;
  padding: 20px;
  top: 18px;
  transform: rotate(-2.4deg);
  width: min(62%, 420px);
  z-index: 5;
}

.landing-home .preview-dj.preview-feature .preview-card-title {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  margin-bottom: 16px;
}

.landing-home .preview-dj.preview-feature .preview-card-title img {
  border-radius: 18px;
  width: 58px;
}

.landing-home .preview-dj.preview-feature .preview-card-title strong {
  font-size: 19px;
}

.landing-home .preview-dj.preview-feature .preview-card-title span {
  font-size: 12px;
}

.landing-home .preview-dj.preview-feature .preview-head {
  border: 2px solid rgba(255, 102, 151, 0.16);
  border-radius: 18px;
  padding: 12px;
}

.landing-home .preview-dj.preview-feature .preview-wave {
  height: 72px;
  margin-top: 14px;
}

.landing-home .preview-dj.preview-feature .preview-wave i {
  width: 11%;
}

.landing-home .preview-dj.preview-feature .preview-url {
  height: 18px;
  margin: 14px 0 12px;
}

.landing-home .preview-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.landing-home .preview-reaction-row span {
  background: #fff;
  border: 1px solid rgba(37, 23, 46, 0.12);
  border-radius: 999px;
  box-shadow: 0 7px 14px rgba(37, 23, 46, 0.07);
  color: rgba(37, 23, 46, 0.76);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
}

.landing-home .preview-search {
  left: auto;
  right: 4px;
  top: 48px;
  transform: rotate(2.2deg);
  width: min(43%, 300px);
  z-index: 3;
}

.landing-home .preview-match {
  left: auto;
  right: 8%;
  top: 332px;
  transform: rotate(-1.2deg);
  width: min(46%, 326px);
  z-index: 4;
}

.landing-home .preview-kitchen {
  display: none;
}

@media (max-width: 1080px) {
  .landing-home .home-game-preview-showcase {
    min-height: 600px;
  }

  .landing-home .preview-dj.preview-feature {
    width: min(64%, 400px);
  }

  .landing-home .preview-search {
    width: min(44%, 286px);
  }

  .landing-home .preview-match {
    right: 4%;
    top: 332px;
    width: min(48%, 316px);
  }
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero {
    overflow: visible;
  }

  .landing-home .home-showcase-hero::before {
    inset: 44px -24px auto 18px;
    min-height: 120px;
  }

  .landing-home .home-showcase-hero::after {
    height: 14px;
    left: 22px;
    top: 14px;
    width: 188px;
  }

  .landing-home .home-showcase-hero .home-copy h1 {
    margin-bottom: 18px;
    text-shadow:
      3px 3px 0 #ff4f8f,
      6px 6px 0 #ffc22e,
      9px 9px 0 #27c8dd,
      12px 12px 18px rgba(37, 23, 46, 0.16);
    -webkit-text-stroke: 3px #45211f;
  }

  .landing-home .home-showcase-hero .home-copy h1::before {
    height: 18px;
    right: -24px;
    top: -5px;
    width: 54px;
  }

  .landing-home .home-showcase-hero .home-copy h1::after {
    height: 28px;
    left: -16px;
    top: -8px;
    width: 28px;
  }

  .landing-home .home-game-preview-showcase {
    grid-auto-columns: minmax(276px, 84vw);
    min-height: 0;
  }

  .landing-home .preview-dj.preview-feature,
  .landing-home .preview-search,
  .landing-home .preview-match {
    left: auto;
    min-height: auto;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
  }

  .landing-home .preview-dj.preview-feature {
    padding: 16px;
  }

  .landing-home .preview-dj.preview-feature .preview-wave {
    height: 50px;
    margin-top: 10px;
  }

  .landing-home .preview-dj.preview-feature .preview-url {
    height: 12px;
    margin: 10px 0 8px;
  }

  .landing-home .preview-dj.preview-feature .preview-reaction-row,
  .landing-home .preview-dj.preview-feature .preview-bubble {
    display: none;
  }

  .landing-home .preview-dj.preview-feature .preview-card-title {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .landing-home .preview-dj.preview-feature .preview-card-title img {
    width: 48px;
  }

  .landing-home .preview-dj.preview-feature .preview-card-title strong {
    font-size: 16px;
  }
}

/* Slimmer logo and compact 3-screen mock. Remove this block to revert the 2026-06-08 slim adjustment. */
.landing-home .home-showcase-hero {
  align-items: center;
}

.landing-home .home-showcase-hero::before {
  inset: 44px 12px auto 17%;
  min-height: 122px;
  opacity: 0.9;
}

.landing-home .home-showcase-hero::after {
  height: 15px;
  top: 58px;
  width: min(300px, 38vw);
}

.landing-home .home-showcase-hero .home-copy h1 {
  background: linear-gradient(180deg, #fff 0%, #fff2c8 52%, #ffd34f 53%, #ffef9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 11px 0 rgba(69, 33, 31, 0.10));
  line-height: 0.92;
  margin: 8px 0 24px;
  paint-order: stroke fill;
  text-shadow:
    3px 3px 0 #ff5798,
    6px 6px 0 #26c8dc,
    9px 9px 0 rgba(255, 191, 40, 0.88);
  transform: rotate(-1.4deg);
  -webkit-text-stroke: 5px #45211f;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 82% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #ff6ca2, #ffc13a 52%, #25cde0);
  height: 20px;
  right: -34px;
  top: 4px;
  width: 86px;
}

.landing-home .home-showcase-hero .home-copy h1::after {
  height: 32px;
  left: -20px;
  top: 0;
  width: 32px;
}

.landing-home .home-game-preview-showcase {
  min-height: 370px;
}

.landing-home .preview-dj.preview-feature {
  left: 0;
  min-height: 0;
  padding: 16px;
  top: 36px;
  width: min(56%, 390px);
}

.landing-home .preview-dj.preview-feature .preview-card-title {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  margin-bottom: 11px;
}

.landing-home .preview-dj.preview-feature .preview-card-title img {
  border-radius: 16px;
  width: 50px;
}

.landing-home .preview-dj.preview-feature .preview-card-title strong {
  font-size: 17px;
}

.landing-home .preview-dj.preview-feature .preview-card-title span {
  font-size: 11px;
}

.landing-home .preview-dj.preview-feature .preview-head {
  padding: 10px 12px;
}

.landing-home .preview-dj.preview-feature .preview-wave {
  height: 48px;
  margin-top: 10px;
}

.landing-home .preview-dj.preview-feature .preview-url {
  height: 12px;
  margin: 10px 0 9px;
}

.landing-home .preview-dj.preview-feature .preview-reaction-row {
  gap: 6px;
  margin-bottom: 8px;
}

.landing-home .preview-dj.preview-feature .preview-reaction-row span {
  font-size: 11px;
  padding: 5px 9px;
}

.landing-home .preview-dj.preview-feature .preview-bubble {
  font-size: 11px;
  margin-top: 7px;
  max-width: 100%;
  padding: 7px 9px;
}

.landing-home .preview-search {
  right: 0;
  top: 28px;
  width: min(40%, 276px);
}

.landing-home .preview-search .preview-card-title,
.landing-home .preview-match .preview-card-title {
  margin-bottom: 8px;
}

.landing-home .preview-search .preview-search-box {
  height: 34px;
  margin-bottom: 8px;
}

.landing-home .preview-search .preview-hit-ring {
  height: 58px;
  right: 14px;
  top: 72px;
  width: 58px;
}

.landing-home .preview-match {
  right: 5%;
  top: 194px;
  width: min(42%, 292px);
}

.landing-home .preview-match .preview-topic {
  margin-bottom: 8px;
  padding: 10px 12px;
}

.landing-home .preview-match .preview-answer-grid span {
  min-height: 44px;
}

@media (max-width: 1080px) {
  .landing-home .home-game-preview-showcase {
    min-height: 370px;
  }

  .landing-home .preview-dj.preview-feature {
    width: min(57%, 372px);
  }

  .landing-home .preview-search {
    width: min(42%, 268px);
  }

  .landing-home .preview-match {
    right: 2%;
    top: 194px;
    width: min(45%, 288px);
  }
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero::before {
    inset: 48px -20px auto 18px;
    min-height: 92px;
  }

  .landing-home .home-showcase-hero::after {
    top: 20px;
    width: 176px;
  }

  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 8px 0 rgba(69, 33, 31, 0.10));
    margin: 10px 0 30px;
    text-shadow:
      2px 2px 0 #ff5798,
      4px 4px 0 #26c8dc,
      6px 6px 0 rgba(255, 191, 40, 0.88);
    -webkit-text-stroke: 3px #45211f;
  }

  .landing-home .home-showcase-hero .home-copy h1::before {
    height: 16px;
    right: -22px;
    top: 2px;
    width: 62px;
  }

  .landing-home .home-showcase-hero .home-copy h1::after {
    height: 25px;
    left: -13px;
    top: -2px;
    width: 25px;
  }

  .landing-home .home-game-preview-showcase {
    grid-auto-columns: minmax(260px, 80vw);
  }

  .landing-home .preview-dj.preview-feature,
  .landing-home .preview-search,
  .landing-home .preview-match {
    min-height: 182px;
    top: auto;
    width: auto;
  }

  .landing-home .preview-dj.preview-feature .preview-bubble,
  .landing-home .preview-dj.preview-feature .preview-reaction-row {
    display: none;
  }
}

/* Pink POP logo polish. Remove this block to revert only the logo color treatment. */
.landing-home .home-showcase-hero .home-copy h1 {
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
    linear-gradient(180deg, #fff6fb 0%, #ff9fca 18%, #ff4f9a 56%, #ff2f82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 0 rgba(69, 33, 31, 0.10)) drop-shadow(0 17px 18px rgba(255, 68, 142, 0.18));
  text-shadow:
    0 3px 0 #ffffff,
    3px 0 0 #ffffff,
    0 -3px 0 #ffffff,
    -3px 0 0 #ffffff,
    5px 5px 0 #542736,
    9px 9px 0 #23c8dc,
    13px 13px 0 #ffd34f;
  -webkit-text-stroke: 5px #ffffff;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #25cde0 0 34%, #ffdf4f 34% 66%, #ff67aa 66% 100%);
  border-color: #fff;
  box-shadow: 0 8px 0 rgba(84, 39, 54, 0.18), 0 14px 22px rgba(255, 79, 154, 0.22);
}

.landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 48% 48%, #fff 0 13%, transparent 15%),
    linear-gradient(45deg, #fff45c 0%, #ffbf2f 58%, #ff74ab 100%);
  filter: drop-shadow(0 4px 0 rgba(84, 39, 54, 0.24));
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 7px 0 rgba(69, 33, 31, 0.10));
    text-shadow:
      0 2px 0 #ffffff,
      2px 0 0 #ffffff,
      0 -2px 0 #ffffff,
      -2px 0 0 #ffffff,
      3px 3px 0 #542736,
      6px 6px 0 #23c8dc,
      9px 9px 0 #ffd34f;
    -webkit-text-stroke: 3px #ffffff;
  }
}

/* Pink POP logo v2, based on the generated logo reference. */
.landing-home .home-showcase-hero .home-copy h1 {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0 8%, transparent 9% 100%),
    linear-gradient(180deg, #ffb6d3 0%, #ff6dac 28%, #ff3d91 62%, #f51f7c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ff4f9a;
  filter: drop-shadow(0 12px 0 #ffcf26) drop-shadow(10px 14px 0 #22c7d9) drop-shadow(0 20px 22px rgba(69, 33, 31, 0.14));
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 4px 0 #fff,
    4px 0 0 #fff,
    0 -4px 0 #fff,
    -4px 0 0 #fff,
    3px 3px 0 #fff,
    -3px 3px 0 #fff,
    3px -3px 0 #fff,
    -3px -3px 0 #fff,
    8px 8px 0 #4b241c,
    12px 12px 0 #ffcf26,
    16px 16px 0 #22c7d9;
  -webkit-text-stroke: 3px #d92575;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #22c7d9 0 33%, #ffcf26 33% 66%, #ff4f9a 66% 100%);
  border: 4px solid #fff;
  box-shadow: 0 6px 0 #4b241c, 0 12px 0 rgba(34, 199, 217, 0.65);
  height: 22px;
  right: -42px;
  top: 8px;
  width: 96px;
}

.landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 45% 45%, #fff 0 14%, transparent 16%),
    linear-gradient(45deg, #ff4f9a 0 48%, #ffcf26 49% 100%);
  filter: drop-shadow(0 4px 0 #4b241c) drop-shadow(4px 6px 0 #22c7d9);
  height: 34px;
  width: 34px;
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 7px 0 #ffcf26) drop-shadow(6px 9px 0 #22c7d9);
    text-shadow:
      0 3px 0 #fff,
      3px 0 0 #fff,
      0 -3px 0 #fff,
      -3px 0 0 #fff,
      2px 2px 0 #fff,
      -2px 2px 0 #fff,
      2px -2px 0 #fff,
      -2px -2px 0 #fff,
      5px 5px 0 #4b241c,
      8px 8px 0 #ffcf26,
      10px 10px 0 #22c7d9;
    -webkit-text-stroke: 2px #d92575;
  }

  .landing-home .home-showcase-hero .home-copy h1::before {
    height: 17px;
    right: -24px;
    top: 4px;
    width: 66px;
  }

  .landing-home .home-showcase-hero .home-copy h1::after {
    height: 25px;
    width: 25px;
  }
}

/* Pink POP logo v5 final: placed at the true end so it wins the cascade. */
.landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff3f95;
  filter: drop-shadow(0 6px 0 #ffcf26) drop-shadow(7px 10px 0 #20c8dc) drop-shadow(0 15px 16px rgba(69, 33, 31, 0.13));
  -webkit-text-fill-color: #ff3f95;
  text-shadow:
    0 2px 0 #fff,
    2px 0 0 #fff,
    0 -2px 0 #fff,
    -2px 0 0 #fff,
    2px 2px 0 #fff,
    -2px 2px 0 #fff,
    2px -2px 0 #fff,
    -2px -2px 0 #fff,
    5px 5px 0 #4b241c,
    8px 8px 0 #ffcf26,
    11px 11px 0 #20c8dc;
  -webkit-text-stroke: 0;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #20c8dc 0 33%, #ffcf26 33% 66%, #ff3f95 66% 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 #4b241c, 0 10px 0 rgba(32, 200, 220, 0.62);
}

.landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 45% 45%, #fff 0 14%, transparent 16%),
    linear-gradient(45deg, #ff3f95 0 48%, #ffcf26 49% 100%);
  filter: drop-shadow(0 4px 0 #4b241c) drop-shadow(4px 6px 0 #20c8dc);
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    filter: drop-shadow(0 5px 0 #ffcf26) drop-shadow(5px 7px 0 #20c8dc);
    text-shadow:
      0 2px 0 #fff,
      2px 0 0 #fff,
      0 -2px 0 #fff,
      -2px 0 0 #fff,
      4px 4px 0 #4b241c,
      6px 6px 0 #ffcf26,
      8px 8px 0 #20c8dc;
  }
}

/* Pink POP logo v7 final override. This block must stay last. */
.landing-home .home-showcase-hero .home-copy h1 {
  background: none;
  color: #ff1688;
  filter: drop-shadow(0 10px 18px rgba(255, 22, 136, 0.18));
  -webkit-text-fill-color: #ff1688;
  text-shadow:
    2px 2px 0 #ffffff,
    5px 5px 0 #4b241c,
    8px 8px 0 #ffcf26,
    11px 11px 0 #20c8dc;
  -webkit-text-stroke: 0;
}

.landing-home .home-showcase-hero .home-copy h1::before {
  background:
    radial-gradient(circle at 18% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 48% 50%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 78% 50%, #fff 0 4px, transparent 5px),
    linear-gradient(90deg, #20c8dc 0 33%, #ffcf26 33% 66%, #ff1688 66% 100%);
  border: 3px solid #fff;
  box-shadow: 0 5px 0 #4b241c, 0 10px 0 rgba(32, 200, 220, 0.62);
}

.landing-home .home-showcase-hero .home-copy h1::after {
  background:
    radial-gradient(circle at 45% 45%, #fff 0 14%, transparent 16%),
    linear-gradient(45deg, #ff1688 0 48%, #ffcf26 49% 100%);
  filter: drop-shadow(0 4px 0 #4b241c) drop-shadow(4px 6px 0 #20c8dc);
}

@media (max-width: 760px) {
  .landing-home .home-showcase-hero .home-copy h1 {
    text-shadow:
      1px 1px 0 #ffffff,
      4px 4px 0 #4b241c,
      6px 6px 0 #ffcf26,
      8px 8px 0 #20c8dc;
  }
}

/* Room pages share the TOP nav markup, but should not inherit concept mock borders. */
.hub-room-home .public-nav {
  border: 0 !important;
  box-shadow: none !important;
}