@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/play-assets/assets/fonts/nunito/Nunito-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/play-assets/assets/fonts/nunito/Nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
  --wb-play-ink: #26334a;
  --wb-play-muted: #667085;
  --wb-play-paper: #fffdf8;
  --wb-play-surface: #ffffff;
  --wb-play-warm: #fff2dc;
  --wb-play-mint: #dff7ed;
  --wb-play-sky: #e1f3ff;
  --wb-play-coral: #ff7a59;
  --wb-play-honey: #f7b84b;
  --wb-play-border: rgba(125, 76, 30, .16);
  --wb-play-shadow: 0 18px 40px rgba(38, 51, 74, .12);
  --wb-play-soft-shadow: 0 10px 24px rgba(38, 51, 74, .09);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

.wb-public-body {
  --wb-play-ink: var(--wb-public-text, var(--wb-text, #26334a));
  --wb-play-muted: var(--wb-public-muted, var(--wb-muted, #667085));
  --wb-play-paper: var(--wb-public-page-bg, var(--wb-bg, #fffdf8));
  --wb-play-surface: var(--wb-public-surface, var(--wb-surface, #ffffff));
  --wb-play-warm: var(--wb-public-accent-softer, var(--wb-surface-2, #fff2dc));
  --wb-play-mint: var(--wb-public-accent-soft, var(--wb-surface-2, #dff7ed));
  --wb-play-sky: var(--wb-public-surface-muted, var(--wb-surface-2, #e1f3ff));
  --wb-play-coral: var(--wb-public-tone-highlight, var(--wb-warning, #ff7a59));
  --wb-play-honey: var(--wb-public-tone-accent, var(--wb-accent, #f7b84b));
  --wb-play-border: var(--wb-public-border, var(--wb-border, rgba(125, 76, 30, .16)));
  --wb-play-shadow: var(--wb-shadow-lg, 0 18px 40px rgba(38, 51, 74, .12));
  --wb-play-soft-shadow: var(--wb-shadow-md, 0 10px 24px rgba(38, 51, 74, .09));
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--wb-play-warm) 72%, transparent), transparent 30rem),
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--wb-play-sky) 62%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--wb-play-paper) 88%, var(--wb-play-warm)) 0%, var(--wb-play-paper) 48%, color-mix(in srgb, var(--wb-play-paper) 84%, var(--wb-play-mint)) 100%);
  color: var(--wb-play-ink);
  font-family: "Nunito", system-ui, sans-serif;
  line-height: 1.55;
  margin: 0;
  min-width: 0;
  overflow-x: clip;
}

.wb-public-body a {
  color: var(--wb-public-accent-text, var(--wb-accent, #3b6f90));
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.wb-public-body a:focus-visible,
.wb-public-body button:focus-visible,
.wb-public-body iframe:focus-visible {
  outline: 3px solid rgba(59, 111, 144, .42);
  outline-offset: 4px;
}

.wb-public-body .wb-public-site-header {
  align-items: center;
  background: linear-gradient(110deg, color-mix(in srgb, var(--wb-play-surface) 96%, var(--wb-play-sky)), color-mix(in srgb, var(--wb-play-surface) 92%, var(--wb-play-warm)) 58%, color-mix(in srgb, var(--wb-play-surface) 94%, var(--wb-play-mint)));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 72%, var(--wb-play-sky));
  border-radius: 0 0 24px 24px;
  box-shadow: 0 14px 34px rgba(38, 51, 74, .13), inset 0 -3px 0 color-mix(in srgb, var(--wb-play-honey) 28%, transparent);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1220px;
  padding: 10px 22px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.wb-public-body .wb-public-site-header::after {
  background: linear-gradient(90deg, var(--wb-play-honey), var(--wb-play-coral), #7fcfb2, #70bce8);
  border-radius: 999px;
  bottom: -1px;
  content: "";
  height: 3px;
  left: 24px;
  opacity: .7;
  position: absolute;
  right: 24px;
}

.wb-public-body .wb-navbar-brand {
  align-items: center;
  border-radius: 18px;
  color: var(--wb-play-ink);
  display: inline-flex;
  gap: 11px;
  font-weight: 900;
  min-height: 58px;
  padding: 4px 10px 4px 4px;
  text-decoration: none;
  white-space: nowrap;
}

.wb-public-body .wb-navbar-brand img {
  background: var(--wb-play-surface);
  border: 3px solid color-mix(in srgb, var(--wb-play-surface) 84%, transparent);
  border-radius: 17px;
  box-shadow: 0 8px 18px rgba(17, 138, 178, .2);
  display: block;
  height: 58px;
  object-fit: contain;
  transform: rotate(-2deg);
  width: 58px;
}

.wb-public-body .wb-navbar-identity > span {
  display: grid;
  font-size: 0;
  line-height: 1;
}

.wb-public-body .wb-navbar-identity > span::before {
  color: var(--wb-play-ink);
  content: "WEBBLOCKS";
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.wb-public-body .wb-navbar-identity > span::after {
  background: linear-gradient(135deg, var(--wb-play-honey), var(--wb-play-coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  content: "PLAY";
  font-size: 1.58rem;
  font-weight: 900;
  letter-spacing: .02em;
  margin-top: 3px;
}

.wb-public-body .wb-navbar-links {
  min-width: 0;
}

.wb-public-body .wb-navbar-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-public-body .wb-navbar-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--wb-play-ink);
  display: inline-flex;
  font-size: .94rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  min-height: 42px;
  padding: 11px 14px;
  text-decoration: none;
}

.wb-public-body .wb-navbar-link:hover,
.wb-public-body .wb-navbar-link.is-active {
  background: linear-gradient(135deg, var(--wb-play-honey), var(--wb-play-coral));
  border-color: color-mix(in srgb, var(--wb-play-surface) 78%, transparent);
  box-shadow: 0 8px 18px rgba(255, 122, 89, .23);
  color: #ffffff;
}

.wb-public-body .wb-navbar-toggle {
  background: var(--wb-play-sky);
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  color: var(--wb-play-ink);
  min-height: 44px;
  min-width: 44px;
}

.wb-public-body .wb-cms-navbar-mobile-menu {
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-shadow);
  min-width: min(82vw, 320px);
  padding: 8px;
}

.wb-public-body main[data-wb-slot="main"] {
  margin-inline: auto;
  max-width: 1180px;
  padding: 30px 18px 46px;
  width: 100%;
}

.wb-public-body main[data-wb-slot="main"] > * + * {
  margin-top: 22px;
}

body.wb-page-home main[data-wb-slot="main"] > .wb-slider-height-fill {
  block-size: clamp(320px, 36vw, 448px);
  min-block-size: clamp(320px, 36vw, 448px);
}

body.wb-page-games main[data-wb-slot="main"] > .wb-stack > .wb-slider-height-fill {
  block-size: clamp(320px, 36vw, 520px);
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: none;
  min-block-size: clamp(320px, 36vw, 520px);
}

body.wb-page-home main[data-wb-slot="main"] > .wb-slider .wb-slide::after {
  background: linear-gradient(180deg, transparent 68%, rgb(8 16 22 / .12));
}

body.wb-page-home main[data-wb-slot="main"] > .wb-slider .wb-slide-content {
  padding: clamp(16px, 2.4vw, 26px) clamp(20px, 3.5vw, 38px);
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 72%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--wb-play-surface) 82%, transparent);
  box-shadow: var(--wb-play-soft-shadow);
  backdrop-filter: blur(8px);
}

body.wb-page-games main[data-wb-slot="main"] > .wb-stack > .wb-slider .wb-slide::after {
  background: linear-gradient(180deg, transparent 68%, rgb(8 16 22 / .12));
}

body.wb-page-games main[data-wb-slot="main"] > .wb-stack > .wb-slider .wb-slide-content {
  padding: clamp(16px, 2.4vw, 26px) clamp(20px, 3.5vw, 38px);
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 72%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--wb-play-surface) 82%, transparent);
  box-shadow: var(--wb-play-soft-shadow);
  backdrop-filter: blur(8px);
}

body.wb-public-body .wb-card.wb-promo {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--wb-play-surface) 18%, transparent), color-mix(in srgb, var(--wb-play-surface) 42%, transparent) 34%, color-mix(in srgb, var(--wb-play-surface) 42%, transparent) 66%, color-mix(in srgb, var(--wb-play-surface) 18%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--wb-play-surface) 4%, transparent), color-mix(in srgb, var(--wb-play-surface) 12%, transparent)),
    url("/play-assets/assets/webblocks-play/images/hero-games.webp") center / cover no-repeat,
    linear-gradient(135deg, var(--wb-play-warm), var(--wb-play-sky) 58%, var(--wb-play-mint));
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-shadow);
  margin: 0 auto;
  min-height: clamp(260px, 28vw, 340px);
  overflow: hidden;
}

body.wb-public-body .wb-card.wb-promo .wb-card-body {
  min-height: clamp(260px, 28vw, 340px);
  padding: clamp(44px, 7vw, 86px) clamp(18px, 5vw, 72px);
}

.wb-public-body .wb-eyebrow,
.wb-play-kicker {
  color: var(--wb-public-tone-highlight, var(--wb-public-accent-text, var(--wb-accent, #8a4b14)));
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.wb-public-body .wb-promo-title {
  color: var(--wb-play-ink);
  font-size: clamp(2.25rem, 7vw, 5.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: .96;
  margin: 0;
  text-wrap: balance;
}

.wb-public-body .wb-promo-text {
  color: var(--wb-play-muted);
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  font-weight: 750;
  margin: 0 auto;
  max-width: 660px;
  text-wrap: pretty;
}

.wb-public-body h2[data-wb-public-block-type="header"] {
  color: var(--wb-play-ink);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 4px;
  text-align: center;
}

.wb-public-body .wb-rich-text-readable {
  color: var(--wb-play-muted);
  font-size: 1.08rem;
  margin-inline: auto;
  max-width: 760px;
}

.wb-public-body .wb-rich-text-readable p {
  color: var(--wb-play-muted);
  font-weight: 750;
  margin: 0;
}

.wb-public-body .wb-rich-text-readable .wb-play-kicker {
  color: var(--wb-play-muted);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.wb-play-game-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 4px;
}

.wb-play-game-card {
  background: var(--wb-play-surface);
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-soft-shadow);
  color: var(--wb-play-ink);
  display: flex;
  min-height: 340px;
  overflow: hidden;
  text-decoration: none;
  transform: translateY(0);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wb-play-game-card:nth-child(3n + 1) {
  background: linear-gradient(180deg, var(--wb-play-surface), color-mix(in srgb, var(--wb-play-warm) 68%, var(--wb-play-surface)));
}

.wb-play-game-card:nth-child(3n + 2) {
  background: linear-gradient(180deg, var(--wb-play-surface), color-mix(in srgb, var(--wb-play-mint) 68%, var(--wb-play-surface)));
}

.wb-play-game-card:nth-child(3n) {
  background: linear-gradient(180deg, var(--wb-play-surface), color-mix(in srgb, var(--wb-play-sky) 68%, var(--wb-play-surface)));
}

.wb-play-game-card:hover,
.wb-play-game-card:focus-visible {
  border-color: rgba(255, 122, 89, .48);
  box-shadow: 0 20px 44px rgba(38, 51, 74, .16);
  transform: translateY(-3px);
}

.wb-play-game-card .wb-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
  padding: 14px 14px 20px;
  width: 100%;
}

.wb-play-game-card-image {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(125, 76, 30, .12);
  border-radius: 8px;
  box-shadow: inset 0 -12px 30px rgba(255, 255, 255, .22);
  display: block;
  height: auto;
  max-height: 190px;
  object-fit: cover;
  width: 100%;
}

.wb-play-game-card-title {
  color: var(--wb-play-ink);
  font-size: 1.42rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.wb-play-game-card-text {
  color: var(--wb-play-muted);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
}

.wb-play-button,
.wb-play-pill-link {
  align-items: center;
  align-self: flex-start;
  background: var(--wb-public-accent, var(--wb-accent, #2f7d68));
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--wb-public-accent, var(--wb-accent, #2f7d68)) 22%, transparent);
  color: var(--wb-public-accent-on, var(--wb-accent-on, #fff));
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  line-height: 1.1;
  margin-top: auto;
  min-height: 46px;
  padding: 13px 18px;
  text-decoration: none;
}

.wb-play-button:hover,
.wb-play-pill-link:hover,
.wb-play-button:focus-visible,
.wb-play-pill-link:focus-visible {
  background: var(--wb-public-accent-hover, var(--wb-accent-hover, #256a59));
  color: var(--wb-public-accent-on, var(--wb-accent-on, #fff));
}

.wb-public-body .wb-card .wb-btn-primary[href^="/games/"] {
  align-self: flex-start;
  background: linear-gradient(135deg, var(--wb-play-honey), var(--wb-play-coral));
  border: 2px solid color-mix(in srgb, var(--wb-play-surface) 78%, transparent);
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(255, 122, 89, .24);
  color: #ffffff;
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  min-height: 46px;
  min-width: 92px;
  padding: 13px 24px;
}

.wb-public-body .wb-card .wb-btn-primary[href^="/games/"]:hover,
.wb-public-body .wb-card .wb-btn-primary[href^="/games/"]:focus-visible {
  background: linear-gradient(135deg, #ffc86a, #ff6e54);
  box-shadow: 0 14px 26px rgba(255, 122, 89, .3);
  color: #ffffff;
  transform: translateY(-1px);
}

.wb-play-frame-section {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wb-play-warm) 86%, transparent), color-mix(in srgb, var(--wb-play-mint) 86%, transparent));
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-shadow);
  margin: 18px auto 26px;
  max-width: min(1240px, calc(100vw - 72px));
  overflow: hidden;
  padding: clamp(8px, 2vw, 14px);
  width: min(1240px, calc(100vw - 72px));
}

.wb-play-game-frame {
  aspect-ratio: 16 / 9;
  background: var(--wb-play-surface);
  border: 0;
  border-radius: 8px;
  display: block;
  height: clamp(360px, 62vh, 620px);
  max-height: 620px;
  min-height: 360px;
  overflow: hidden;
  width: 100%;
}

.wb-play-game-detail.wb-play-game-focus {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.wb-play-game-focus .wb-play-game-intro {
  margin: 0 auto 10px;
  max-width: 760px;
  text-align: center;
}

.wb-play-game-focus .wb-play-game-intro .wb-play-kicker {
  color: var(--wb-public-tone-highlight, var(--wb-public-accent-text, var(--wb-accent, #8a4b14)));
  font-size: .78rem;
  letter-spacing: .08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.wb-play-game-focus .wb-play-game-title {
  color: var(--wb-play-ink);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  text-wrap: balance;
}

.wb-play-game-focus .wb-play-game-subtitle {
  color: var(--wb-play-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 750;
  line-height: 1.32;
  margin: 6px auto 0;
  max-width: 620px;
  text-wrap: pretty;
}

.wb-play-game-focus .wb-play-frame-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--wb-play-warm) 92%, transparent), color-mix(in srgb, var(--wb-play-sky) 82%, transparent) 54%, color-mix(in srgb, var(--wb-play-mint) 90%, transparent));
  border-color: var(--wb-play-border);
  box-shadow: var(--wb-play-shadow);
  margin: 10px auto 16px;
  max-width: min(1240px, calc(100vw - 72px));
  padding: clamp(8px, 1.35vw, 14px);
  width: min(1240px, calc(100vw - 72px));
}

.wb-play-game-focus .wb-play-game-frame {
  aspect-ratio: 3 / 2;
  background: var(--wb-play-paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-play-surface) 72%, transparent);
  height: auto;
  max-height: none;
  min-height: 0;
}

html.wb-play-game-expanded,
body.wb-play-game-expanded {
  overflow: hidden;
}

.wb-play-frame-section.is-game-expanded {
  --wb-application-min-height: 0px;
  background: var(--wb-play-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  height: 100dvh;
  inset: 0;
  margin: 0;
  max-width: none;
  min-block-size: 0;
  padding: 0;
  position: fixed;
  width: 100vw;
  z-index: 10000;
}

.wb-play-frame-section.is-game-expanded .wb-application__frame-wrap {
  block-size: 100%;
  height: 100vh;
  height: 100dvh;
  min-block-size: 0;
}

.wb-play-frame-section.is-game-expanded .wb-play-game-frame,
.wb-play-game-focus .wb-play-frame-section.is-game-expanded .wb-play-game-frame {
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  width: 100%;
}

.wb-play-game-support-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: min(980px, calc(100vw - 72px));
}

.wb-play-game-support-card {
  background: color-mix(in srgb, var(--wb-play-surface) 90%, transparent);
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-soft-shadow);
  color: var(--wb-play-muted);
  padding: clamp(14px, 2vw, 18px);
}

.wb-play-game-support-card .wb-play-kicker {
  color: var(--wb-public-tone-highlight, var(--wb-public-accent-text, var(--wb-accent, #8a4b14)));
  font-size: .76rem;
  letter-spacing: .08em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.wb-play-game-support-card h2 {
  color: var(--wb-play-ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 8px;
}

.wb-play-game-support-card p {
  font-size: .98rem;
  font-weight: 750;
  line-height: 1.42;
  margin: 0;
}

.wb-play-game-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wb-play-game-next-links .wb-play-pill-link {
  min-height: 40px;
  padding: 11px 14px;
}

.wb-play-game-support {
  align-items: stretch;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wb-play-surface) 86%, var(--wb-play-sky)), color-mix(in srgb, var(--wb-play-surface) 92%, var(--wb-play-warm)));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 78%, var(--wb-play-sky));
  border-radius: 8px;
  box-shadow: var(--wb-play-soft-shadow);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  margin: 18px auto 0;
  max-width: min(1060px, calc(100vw - 72px));
  overflow: hidden;
  padding: clamp(14px, 2.4vw, 22px);
}

.wb-play-game-support h2 {
  color: var(--wb-play-ink);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.wb-play-game-support > .wb-grid {
  grid-column: 1 / -1;
  width: 100%;
}

.wb-play-game-support > .wb-grid > .wb-card {
  background: color-mix(in srgb, var(--wb-play-surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 72%, transparent);
  border-radius: 8px;
  box-shadow: none;
}

.wb-play-game-support .wb-card-body {
  gap: 12px;
}

.wb-play-game-support ol.wb-stack {
  color: var(--wb-play-ink);
  font-weight: 800;
  line-height: 1.32;
  margin: 0;
  padding-left: 1.35rem;
}

.wb-play-game-support ol.wb-stack li::marker {
  color: var(--wb-public-tone-highlight, var(--wb-public-accent-text, var(--wb-accent, #8a4b14)));
  font-weight: 900;
}

.wb-play-game-support a.wb-card[href^="/games/"] {
  background: color-mix(in srgb, var(--wb-play-surface) 76%, var(--wb-play-sky));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 70%, transparent);
  color: var(--wb-play-ink);
  min-height: 76px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.wb-play-game-support a.wb-card[href^="/games/"]:hover,
.wb-play-game-support a.wb-card[href^="/games/"]:focus-visible {
  background: color-mix(in srgb, var(--wb-play-surface) 64%, var(--wb-play-mint));
  border-color: color-mix(in srgb, var(--wb-play-coral) 48%, var(--wb-play-border));
  color: var(--wb-play-ink);
  transform: translateY(-2px);
}

.wb-play-game-support a.wb-card[href^="/games/"] .wb-card-body {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 76px;
  padding: 8px;
}

.wb-play-game-support a.wb-card[href^="/games/"] img {
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 64%, transparent);
  border-radius: 8px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 96px;
}

.wb-play-game-support a.wb-card[href^="/games/"] strong {
  color: var(--wb-play-ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.1;
}

.wb-play-game-support a.wb-card[href^="/games/"] small {
  color: var(--wb-play-muted);
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.22;
}

.wb-play-support-kicker {
  color: var(--wb-public-tone-highlight, var(--wb-public-accent-text, var(--wb-accent, #8a4b14)));
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.wb-play-howto,
.wb-play-next-panel {
  background: color-mix(in srgb, var(--wb-play-surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 72%, transparent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
}

.wb-play-step-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-play-step-list li {
  align-items: center;
  background: color-mix(in srgb, var(--wb-play-surface) 72%, var(--wb-play-mint));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 60%, transparent);
  border-radius: 8px;
  color: var(--wb-play-ink);
  display: grid;
  font-size: 1rem;
  font-weight: 800;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.28;
  min-height: 56px;
  padding: 9px 11px;
}

.wb-play-step-number {
  align-items: center;
  background: linear-gradient(135deg, var(--wb-play-honey), var(--wb-play-coral));
  border: 2px solid color-mix(in srgb, var(--wb-play-surface) 88%, transparent);
  border-radius: 999px;
  box-shadow: 0 7px 14px rgba(255, 122, 89, .2);
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.wb-play-next-game-list {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.wb-play-next-game {
  align-items: center;
  background: color-mix(in srgb, var(--wb-play-surface) 76%, var(--wb-play-sky));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 70%, transparent);
  border-radius: 8px;
  color: var(--wb-play-ink);
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 76px;
  padding: 8px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.wb-play-next-game:hover,
.wb-play-next-game:focus-visible {
  background: color-mix(in srgb, var(--wb-play-surface) 64%, var(--wb-play-mint));
  border-color: color-mix(in srgb, var(--wb-play-coral) 48%, var(--wb-play-border));
  color: var(--wb-play-ink);
  transform: translateY(-2px);
}

.wb-play-next-game img {
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 64%, transparent);
  border-radius: 8px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 96px;
}

.wb-play-next-game span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wb-play-next-game strong {
  color: var(--wb-play-ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.1;
}

.wb-play-next-game small {
  color: var(--wb-play-muted);
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.22;
}

.wb-play-info-card {
  background: color-mix(in srgb, var(--wb-play-surface) 92%, transparent);
  border: 1px solid var(--wb-play-border);
  border-radius: 8px;
  box-shadow: var(--wb-play-soft-shadow);
  color: var(--wb-play-muted);
  margin-inline: auto;
  max-width: 840px;
  padding: clamp(18px, 3vw, 28px);
}

.wb-play-info-card p {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 8px 0 0;
}

.wb-play-link-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.wb-play-pill-link {
  background: var(--wb-play-sky);
  box-shadow: none;
  color: var(--wb-public-accent-text, var(--wb-accent, #2e607f));
  margin-top: 0;
  min-height: 44px;
}

.wb-play-pill-link:hover,
.wb-play-pill-link:focus-visible {
  background: var(--wb-public-accent-soft, var(--wb-accent-soft, #ccecff));
  color: var(--wb-public-accent-text, var(--wb-accent, #214c67));
}

.wb-public-body footer[data-wb-slot="footer"] {
  background: radial-gradient(circle at 12% 100%, color-mix(in srgb, var(--wb-play-honey) 24%, transparent), transparent 13rem), radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--wb-play-sky) 74%, transparent), transparent 18rem), linear-gradient(135deg, color-mix(in srgb, var(--wb-play-surface) 84%, var(--wb-play-warm)), color-mix(in srgb, var(--wb-play-surface) 78%, var(--wb-play-mint)));
  border: 1px solid color-mix(in srgb, var(--wb-play-border) 74%, var(--wb-play-sky));
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 34px rgba(38, 51, 74, .08);
  color: var(--wb-play-muted);
  margin: 18px auto 0;
  max-width: 1180px;
  overflow: hidden;
  padding: 28px 22px 34px;
  position: relative;
  text-align: center;
}

.wb-public-body footer[data-wb-slot="footer"]::before {
  background: linear-gradient(90deg, var(--wb-play-honey), var(--wb-play-coral), #7fcfb2, #70bce8);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.wb-public-body footer[data-wb-slot="footer"] .wb-cluster { gap: 14px 20px; }

.wb-public-body footer[data-wb-slot="footer"] p {
  color: var(--wb-play-ink);
  font-size: 1rem;
  font-weight: 850;
  margin: 0;
}

.wb-public-body footer[data-wb-slot="footer"] .wb-btn {
  background: var(--wb-play-surface);
  border: 2px solid color-mix(in srgb, var(--wb-play-coral) 42%, var(--wb-play-border));
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(38, 51, 74, .09);
  color: var(--wb-play-ink);
  font-weight: 900;
  min-height: 46px;
  padding-inline: 20px;
}

.wb-public-body footer[data-wb-slot="footer"] .wb-btn:hover,
.wb-public-body footer[data-wb-slot="footer"] .wb-btn:focus-visible {
  background: linear-gradient(135deg, var(--wb-play-honey), var(--wb-play-coral));
  border-color: transparent;
  color: #ffffff;
}

.wb-play-footer-note {
  font-weight: 800;
  margin: 0;
}

/* Game detail pages share one outer rail. Individual surfaces keep their own
   internal padding, but their visible left/right edges stay aligned. */
.wb-public-body:has(.wb-play-game-frame) {
  --wb-play-page-gutter: 18px;
  --wb-play-page-rail: 1180px;
}

.wb-public-body:has(.wb-play-game-frame) .wb-public-site-header,
.wb-public-body:has(.wb-play-game-frame) main[data-wb-slot="main"],
.wb-public-body:has(.wb-play-game-frame) footer[data-wb-slot="footer"] {
  max-width: var(--wb-play-page-rail);
  width: min(calc(100% - var(--wb-play-page-gutter) - var(--wb-play-page-gutter)), var(--wb-play-page-rail));
}

.wb-public-body:has(.wb-play-game-frame) main[data-wb-slot="main"] {
  padding-left: 0;
  padding-right: 0;
}

.wb-public-body:has(.wb-play-game-frame) .wb-play-game-focus .wb-play-frame-section,
.wb-public-body:has(.wb-play-game-frame) .wb-play-game-support {
  max-width: 100%;
  width: 100%;
}

@media (max-width: 980px) {
  .wb-public-body .wb-public-site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .wb-public-body .wb-navbar-nav {
    justify-content: flex-start;
  }

  .wb-play-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wb-play-game-focus .wb-play-game-frame {
    height: auto;
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .wb-public-body .wb-public-site-header {
    border-radius: 0 0 18px 18px;
    padding: 7px 10px 9px;
  }

  .wb-public-body .wb-navbar-brand { min-height: 52px; }

  .wb-public-body .wb-navbar-brand img {
    border-radius: 15px;
    height: 52px;
    width: 52px;
  }

  .wb-public-body .wb-navbar-identity > span::after { font-size: 1.4rem; }

  .wb-public-body .wb-navbar-links {
    display: none;
  }

  .wb-public-body footer[data-wb-slot="footer"] {
    border-radius: 22px 22px 0 0;
    margin-top: 8px;
    padding: 26px 16px 30px;
  }

  .wb-public-body footer[data-wb-slot="footer"] .wb-cluster { flex-direction: column; }

  .wb-public-body main[data-wb-slot="main"] {
    padding: 18px 12px 34px;
  }

  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="balloon-pop/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="blockfall/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="cloud-garden/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="color-catcher/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="fruit-train/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="little-gardener/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="little-mail-carrier/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="melody-garden/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="color-fish-path/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="mini-match/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="paint-workshop/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="shape-sorter/index.html"]),
  .wb-public-body main[data-wb-slot="main"]:has(.wb-play-game-frame[src*="word-picnic/index.html"]) {
    padding-left: 0;
    padding-right: 0;
    padding-top: 6px;
  }

  .wb-public-body .wb-promo .wb-card-body {
    padding: 28px 18px;
  }

  .wb-play-game-grid {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .wb-play-game-card {
    min-height: 0;
  }

  .wb-play-game-card .wb-card-body {
    padding: 12px 12px 18px;
  }

  .wb-play-game-card-image {
    max-height: 170px;
  }

  .wb-play-game-frame {
    aspect-ratio: 10 / 14;
    height: clamp(460px, 68vh, 600px);
    max-height: 600px;
    min-height: 460px;
  }

  .wb-play-game-focus .wb-play-game-intro {
    margin-bottom: 12px;
  }

  .wb-play-game-focus .wb-play-frame-section {
    margin-bottom: 14px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    width: calc(100vw - 24px);
  }

  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="balloon-pop/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="blockfall/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="cloud-garden/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="color-catcher/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="fruit-train/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="little-gardener/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="little-mail-carrier/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="melody-garden/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="color-fish-path/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="mini-match/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="paint-workshop/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="shape-sorter/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="sliding-puzzle/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="tic-tac-toe/index.html"]),
  .wb-play-game-focus .wb-play-frame-section:has(.wb-play-game-frame[src*="word-picnic/index.html"]) {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    margin-top: 0;
    max-width: 100vw;
    padding: 0;
    width: 100vw;
  }

  .wb-play-game-focus .wb-play-game-frame {
    height: clamp(520px, 72vh, 640px);
    max-height: 640px;
    min-height: 520px;
  }

  .wb-play-game-focus .wb-play-game-frame[src*="balloon-pop/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="blockfall/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="cloud-garden/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="color-catcher/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="fruit-train/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="little-gardener/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="little-mail-carrier/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="melody-garden/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="color-fish-path/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="mini-match/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="paint-workshop/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="shape-sorter/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="sliding-puzzle/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="tic-tac-toe/index.html"],
  .wb-play-game-focus .wb-play-game-frame[src*="word-picnic/index.html"] {
    aspect-ratio: auto;
    border-radius: 0;
    height: clamp(520px, calc(100svh - 88px), 780px);
    max-height: none;
    min-height: min(520px, calc(100svh - 88px));
  }

  @supports (height: 100dvh) {
    .wb-play-game-focus .wb-play-game-frame[src*="balloon-pop/index.html"] {
      height: clamp(520px, calc(100dvh - 88px), 780px);
      min-height: min(520px, calc(100dvh - 88px));
    }

    .wb-play-game-focus .wb-play-game-frame[src*="cloud-garden/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="blockfall/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="color-catcher/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="fruit-train/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="little-gardener/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="little-mail-carrier/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="melody-garden/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="color-fish-path/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="mini-match/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="paint-workshop/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="shape-sorter/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="sliding-puzzle/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="tic-tac-toe/index.html"],
    .wb-play-game-focus .wb-play-game-frame[src*="word-picnic/index.html"] {
      height: clamp(520px, calc(100dvh - 88px), 780px);
      min-height: min(520px, calc(100dvh - 88px));
    }
  }

  .wb-play-game-support-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .wb-play-game-support {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 24px);
    padding: 12px;
  }

  .wb-play-next-game {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .wb-play-game-support a.wb-card[href^="/games/"] .wb-card-body {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .wb-play-next-game img {
    width: 82px;
  }

  .wb-play-game-support a.wb-card[href^="/games/"] img {
    width: 82px;
  }

  .wb-public-body:has(.wb-play-game-frame) {
    --wb-play-page-gutter: 12px;
  }

  .wb-public-body:has(.wb-play-game-frame) main[data-wb-slot="main"] {
    padding-left: 0;
    padding-right: 0;
  }

  .wb-public-body:has(.wb-play-game-frame) .wb-play-game-focus .wb-play-frame-section,
  .wb-public-body:has(.wb-play-game-frame) .wb-play-game-support {
    max-width: 100%;
    width: 100%;
  }

  .wb-play-link-pills {
    flex-direction: column;
  }

  .wb-play-pill-link {
    align-self: stretch;
  }
}

/*
 * Play games own a 3:2 desktop canvas while the generic Application Block is
 * intentionally stored with an automatic ratio. Keep this host-specific
 * contract in the Play theme, then switch to a viewport-driven play surface
 * on narrow screens so controls remain reachable.
 */
.wb-public-body .wb-application[data-wb-application^="play-"] .wb-application__frame-wrap {
  aspect-ratio: 3 / 2;
}

@media (max-width: 980px) {
  .wb-public-body .wb-application[data-wb-application^="play-"] {
    --wb-application-min-height: clamp(620px, calc(100svh - 88px), 780px);
  }

  .wb-public-body .wb-application[data-wb-application^="play-"] .wb-application__frame-wrap {
    aspect-ratio: auto;
    block-size: clamp(620px, calc(100svh - 88px), 780px);
    min-block-size: var(--wb-application-min-height);
  }

  .wb-public-body .wb-application[data-wb-application^="play-"] .wb-application__frame {
    block-size: 100%;
    min-block-size: var(--wb-application-min-height);
  }

  @supports (height: 100dvh) {
    .wb-public-body .wb-application[data-wb-application^="play-"] {
      --wb-application-min-height: clamp(620px, calc(100dvh - 88px), 780px);
    }

    .wb-public-body .wb-application[data-wb-application^="play-"] .wb-application__frame-wrap {
      block-size: clamp(620px, calc(100dvh - 88px), 780px);
    }
  }
}