/* Kingdomino product story. Original game assets, Meeple's current brand system. */
.kingdomino-page { --kd-cut: polygon(1.2% 3%, 100% 0, 98.8% 100%, 0 97%); }
html:has(body.kingdomino-page) { scrollbar-gutter: stable; }
.kd-section { padding: clamp(68px, 7.5vw, 124px) var(--gutter); }
.kd-section h2 { font-size: clamp(40px, 4.8vw, 76px); line-height: 1.03; letter-spacing: -.045em; }
.kd-section em { font-style: normal; color: var(--orange); }
.kd-section p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; }
.kd-section [id], #kd-play, #overview, #features, #board-game, #rewards { scroll-margin-top: 105px; }
.kd-button.button { --button-fill: var(--orange); min-height: 64px; padding: 10px 30px; background: transparent; color: var(--cocoa); font-size: 16px; letter-spacing: -.01em; gap: 28px; box-shadow: none; }
.kd-button.button::before { transition: transform .35s var(--ease), background .25s; }
.kd-button.button:is(:hover, :focus-visible)::before { transform: scale(1.035,1.09); }
.kd-button.button:is(:hover, :focus-visible) { background: transparent; color: var(--cocoa); }

.kd-hero { min-height: 680px; height: 100svh; max-height: 1100px; position: relative; isolation: isolate; overflow: hidden; background: var(--cocoa); color: white; --focus: var(--cream); }
.kd-hero-media { position: absolute; inset: -3% 0; z-index: -2; transform: translateY(var(--kd-parallax,0)); }
.kd-hero-media > img, .kd-hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kd-hero-media video { opacity: 0; transition: opacity .7s ease; }
.kd-hero-media video.is-playing { opacity: 1; }
.kd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#2a1a12ba,transparent 29%,#2a1a1250 58%,#2a1a12e8); }
.kd-hero-content { position: absolute; left: 50%; bottom: max(112px,14%); transform: translateX(-50%); width: min(690px,calc(100% - 48px)); text-align: center; }
.kd-hero h1 { width: min(620px,100%); margin: 0 auto 22px; line-height: 0; }
.kd-hero h1 img { width: 100%; height: auto; }
.kd-hero-content > p { max-width: 510px; margin: auto; text-wrap: balance; font-size: clamp(19px,1.7vw,24px); line-height: 1.5; text-shadow: 0 2px 12px #0008; }
.kd-hero-actions { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 26px; }
.kd-hero-actions .kd-button { min-width: 200px; }
.kd-discover { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; font-size: 14px; }
.kd-platforms { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px 38px; padding: 34px var(--gutter) 42px; background: var(--latte); color: var(--cocoa); }
.kd-store-links { display: flex; gap: clamp(14px,1.8vw,28px); align-items: center; flex: 0 1 auto; justify-content: center; }
.kd-store-links a { display: grid; place-items: center; min-height: 56px; transition: transform .3s var(--ease); }
.kd-store-links img { height: 46px; width: auto; max-width: 170px; object-fit: contain; }
.kd-store-links a:hover { transform: translateY(-4px); }
.kd-switch { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-left: 30px; border-left: 1px solid #6b4a363b; }
.kd-switch img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.kd-switch span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; min-height: 26px; }
.kd-switch svg { width: 14px; height: 14px; }
.kd-switch:hover span { text-decoration: underline; }

.kd-overview { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(36px,5vw,85px); align-items: center; }
.kd-intro-copy p { margin: 27px 0 18px; color: var(--walnut); }
.kd-trailer { position: relative; display: block; aspect-ratio: 16/9; transform: rotate(-1.2deg); transition: transform .5s var(--ease); filter: drop-shadow(0 20px 28px #2a1a121d); }
.kd-trailer > img { width: 100%; height: 100%; object-fit: cover; clip-path: var(--kd-cut); }
.kd-trailer:is(:hover,:focus-visible) { transform: rotate(0deg) scale(1.025); }
.kd-play-icon { display: grid; place-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 85px; height: 72px; background: white; color: var(--cocoa); clip-path: var(--button-clip); transition: color .3s, background .3s; }
.kd-play-icon svg { width: 30px; height: 30px; transform: translateX(-1px); }
.kd-trailer:hover .kd-play-icon { background: var(--cocoa); color: white; }
.kd-features { background: var(--cocoa); color: var(--cream); --focus: var(--orange); }
.kd-feature-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.kd-feature-tabs:not([hidden]) { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-bottom: 36px; }
.kd-feature-tab { min-height: 74px; padding: 12px 14px; background: transparent; color: var(--cream); font-family: var(--font-heading); font-size: 16px; line-height: 1.2; position: relative; isolation: isolate; }
.kd-feature-tab::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--button-clip); background: #f5ecdd0b; transition: background .25s; }
.kd-feature-tab:hover::before { background: #f5ecdd21; }
.kd-feature-tab[aria-selected="true"] { color: var(--cocoa); font-weight: 700; }
.kd-feature-tab[aria-selected="true"]::before { background: var(--orange); }
.kd-feature-deck { display: grid; gap: 48px; }
.kd-feature-panel { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: clamp(30px,4vw,66px); align-items: center; }
.kd-feature-deck.is-enhanced { gap: 0; }
.kd-feature-deck.is-enhanced .kd-feature-panel { grid-area: 1/1; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.kd-feature-deck.is-enhanced .kd-feature-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.kd-feature-image { display: block; background: transparent; padding: 0; width: 100%; position: relative; aspect-ratio: 1.85; }
.kd-feature-image > img { width: 100%; height: 100%; object-fit: contain; background: #141414; clip-path: var(--kd-cut); }
.kd-feature-copy h3 { font-size: clamp(30px,3.15vw,50px); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 22px; }
.kd-feature-copy p { color: var(--latte); }
.kd-reviews { --review-gap: clamp(32px,4vw,64px); background: var(--latte); padding-top: 56px; padding-bottom: 56px; }
.kd-review-group { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--review-gap); }
.kd-review-group[aria-hidden="true"] { display: none; }
.kd-reviews:focus-visible { outline: 2px solid var(--cocoa); outline-offset: -8px; }
.kd-reviews.is-marquee { overflow: hidden; padding-inline: 0; cursor: grab; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.kd-reviews.is-dragging { cursor: grabbing; }
.kd-reviews.is-marquee .kd-review-track { display: flex; width: max-content; animation: kd-reviews-drift 72s linear infinite; animation-play-state: paused; will-change: transform; }
.kd-reviews.is-marquee .kd-review-group { display: flex; flex: none; gap: var(--review-gap); padding-inline: calc(var(--review-gap)/2); min-width: 100vw; justify-content: space-around; }
.kd-reviews.is-marquee .kd-review { flex: 0 0 clamp(290px,32vw,460px); padding-right: 25px; border-right: 1px solid #6b4a3630; }
.kd-reviews.is-in-view:not(.is-dragging):not(.is-coasting):not(.page-hidden):not(:focus-visible) .kd-review-track { animation-play-state: running; }
.menu-open .kd-review-track, .dialog-open .kd-review-track { animation-play-state: paused!important; }
@media (hover: hover) { .kd-reviews:not(.is-released):hover .kd-review-track { animation-play-state: paused!important; } }
@keyframes kd-reviews-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kd-review { margin: 0; display: flex; flex-direction: column; align-items: start; }
.kd-review-score { font-family: var(--font-heading); font-size: 50px; font-weight: 700; line-height: 1; letter-spacing: -.05em; margin-bottom: 18px; }
.kd-review blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--walnut); }
.kd-review figcaption { margin-top: auto; font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.kd-board { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 7vw; align-items: center; }
.kd-box-art { position: relative; }
.kd-box-art::before { content: ''; position: absolute; inset: 5% -2% 8% 2%; clip-path: polygon(0 8%,95% 0,100% 92%,8% 100%); background: var(--latte); transform: rotate(-5deg); }
.kd-box-art img { position: relative; width: 100%; height: auto; transform: rotate(-4deg); transition: transform .7s var(--ease); }
.kd-box-art:hover img { transform: rotate(0deg) translateY(-7px); }
.kd-game-facts { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 30px 0; padding: 22px 0; border-block: 1px solid #6b4a3633; }
.kd-game-facts > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.kd-game-facts dd { margin: 0; font-family: var(--font-heading); font-size: 34px; font-weight: 700; line-height: 1.1; }
.kd-game-facts dt { color: var(--walnut); font-size: 13px; }
.kd-board-copy > p { color: var(--walnut); }
.kd-credits { margin: 24px 0; font-size: 15px; display: flex; gap: 30px; flex-wrap: wrap; }
.kd-credits dt { color: var(--walnut); margin-bottom: 3px; }
.kd-credits dd { margin: 0; font-weight: 700; }
.kd-board-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; }
.kd-board-actions > a:last-child img { max-width: 112px; max-height: 75px; height: auto; width: auto; }
.kd-rewards { position: relative; isolation: isolate; overflow: hidden; background: var(--cocoa); color: var(--cream); }
.kd-rewards-scenery { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kd-rewards::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#2a1a12b3,#2a1a1240 65%,#2a1a1280); }
.kd-rewards h2 { margin-bottom: 48px; }
.kd-reward-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: stretch; }
.kd-reward { color: var(--cocoa); position: relative; isolation: isolate; padding: 45px 36px; }
.kd-reward::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cream); clip-path: var(--kd-cut); }
.kd-reward h3 { font-size: clamp(26px,2.5vw,40px); line-height: 1.06; letter-spacing: -.035em; margin-bottom: 18px; }
.kd-reward p { color: var(--walnut); font-size: 16px; }
.kd-castle-reward { display: grid; grid-template-columns: minmax(0,1fr) 33%; align-items: center; gap: 16px; }
.kd-castle { width: 100%; max-width: 220px; height: auto; margin-left: 0; justify-self: center; transform: rotate(4deg); pointer-events: none; }
.kd-castle-reward .kd-reward-copy { position: relative; z-index: 1; min-width: 0; }
.kd-code-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; gap: 12px; margin-top: 24px; padding: 8px 12px 8px 16px; border: 1px dashed var(--walnut); background: var(--latte); }
.kd-code-wrap code { user-select: all; font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.kd-code-wrap button { background: transparent; color: var(--cocoa); flex: 0 0 36px; width: 36px; height: 38px; }
.kd-code-wrap button:hover { color: var(--orange); }
.kd-code-wrap button svg { width: 21px; height: 21px; }
.kd-copy-status { min-height: 26px; margin-top: 8px; font-size: 12px!important; }
.kd-insider-reward { display: flex; align-items: flex-start; gap: 20px; }
.kd-profile-reward { width: 112px; height: auto; flex: none; }
.kd-insider-reward h3 { font-size: clamp(26px,2.2vw,34px); }
.kd-insider-reward .kd-button { margin-top: 22px; font-size: 15px; padding-inline: 24px; }

.kd-media-dialog { background: var(--cocoa); color: var(--cream); border: 1px solid #f5ecdd30; padding: 18px 24px 20px; width: min(1180px,94vw); max-height: 94dvh; overflow: auto; --focus: var(--orange); }
.kd-media-dialog::backdrop { background: #141414e0; backdrop-filter: blur(8px); }
.kd-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.kd-dialog-bar h2 { font-size: 24px; line-height: 1.2; }
.kd-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; background: var(--cream); color: var(--cocoa); clip-path: var(--button-clip); flex: none; }
.kd-dialog-close:focus-visible { clip-path: none; }
.kd-media-content iframe { width: 100%; height: auto; max-height: 70dvh; aspect-ratio: 16/9; object-fit: contain; display: block; border: 0; background: #141414; }
.kd-youtube-fallback:not([hidden]) { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; min-height: 40px; font-size: 14px; text-decoration: underline; }

@media (max-width: 1120px) {
  .kd-platforms { justify-content: center; }
  .kd-store-links { flex: 0 1 auto; }
  .kd-insider-reward { display: block; }
  .kd-profile-reward { width: 100px; float: right; margin: -10px -8px 12px 12px; }
  .kd-reward { padding: 38px 28px; }
}
@media (max-width: 900px) {
  .kd-overview { grid-template-columns: 1fr; gap: 44px; }
  .kd-intro-copy { max-width: 720px; }
  .kd-trailer { max-width: 100%; }
  .kd-feature-heading { display: block; }
  .kd-feature-tabs:not([hidden]) { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 30px; }
  .kd-feature-panel { grid-template-columns: 1fr; gap: 26px; }
  .kd-feature-copy { max-width: 670px; }
  .kd-feature-copy h3 { margin-bottom: 14px; }
  .kd-feature-copy p { min-height: 90px; }
  .kd-board { gap: 35px; }
  .kd-game-facts { gap: 20px; }
  .kd-reward-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .kd-castle-reward { grid-template-columns: 1fr; overflow: hidden; }
  .kd-castle-reward .kd-reward-copy { padding-right: 14px; }
  .kd-castle { width: 135px; margin: 0; position: absolute; right: 18px; bottom: 24px; opacity: .22; }
}
@media (max-width: 600px) {
  .kd-hero { min-height: 620px; height: 90svh; max-height: 820px; }
  .kd-hero-content { bottom: 125px; }
  .kd-hero h1 { margin-bottom: 20px; }
  .kd-hero-actions { flex-direction: column; gap: 15px; margin-top: 25px; }
  .kd-hero-actions .kd-button { min-width: 230px; }
  .kd-discover { left: var(--gutter); transform: none; font-size: 12px; gap: 8px; }
  .kd-discover svg { width: 18px; }
  .kd-platforms { padding: 30px var(--gutter); gap: 22px; }
  .kd-store-links { width: 100%; justify-content: space-between; gap: 10px; }
  .kd-store-links a { flex: 1; min-width: 0; min-height: 44px; }
  .kd-store-links img { width: 100%; height: auto; max-height: 37px; }
  .kd-switch { padding: 0; border: 0; flex-direction: row; gap: 18px; }
  .kd-switch img { height: 31px; }
  .kd-switch span { font-size: 11px; }
  .kd-section h2 { font-size: clamp(39px,10.2vw,58px); }
  .kd-feature-tab { font-size: 13px; padding-inline: 8px; min-height: 65px; }
  .kd-feature-copy p { min-height: 120px; }
  .kd-feature-copy h3 { font-size: 31px; }
  .kd-reviews:not(.is-marquee) .kd-review-group { grid-template-columns: 1fr; gap: 28px; }
  .kd-review { display: grid; grid-template-columns: 75px 1fr; gap: 0 20px; align-items: start; }
  .kd-review-score { grid-column: 1; grid-row: 1/3; font-size: 38px; }
  .kd-review blockquote { grid-column: 2; margin-bottom: 10px; font-size: 15px; }
  .kd-review figcaption { grid-column: 2; }
  .kd-reviews:not(.is-marquee) .kd-review + .kd-review { padding-top: 26px; border-top: 1px solid #6b4a3630; }
  .kd-reviews.is-marquee .kd-review { display: flex; flex-direction: column; gap: 0; }
  .kd-board { grid-template-columns: 1fr; gap: 45px; }
  .kd-box-art { max-width: 390px; margin-inline: auto; }
  .kd-game-facts { gap: 35px; }
  .kd-board-actions { gap: 15px; }
  .kd-board-actions .kd-button { min-height: 60px; padding: 10px 22px; gap: 16px; font-size: 15px; }
  .kd-board-actions > a:last-child img { max-width: 80px; }
  .kd-reward-grid { grid-template-columns: 1fr; gap: 24px; }
  .kd-rewards h2 { margin-bottom: 30px; }
  .kd-reward { padding: 40px 25px; }
  .kd-castle-reward { grid-template-columns: minmax(0,1fr) 24%; }
  .kd-castle { width: 100%; opacity: 1; position: relative; right: auto; bottom: auto; margin-left: 0; transform: rotate(3deg); }
  .kd-castle-reward .kd-reward-copy { padding-right: 0; }
  .kd-castle-reward h3 { max-width: 190px; }
  .kd-profile-reward { width: 95px; }
  .kd-reward h3 { font-size: 29px; }
  .kd-reward p { font-size: 15px; }
  .kd-insider-reward .kd-button { padding-inline: 22px; }
  .kd-media-dialog { padding: 12px; }
  .kd-dialog-bar h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kingdomino-page *, .kingdomino-page *::before { transition-duration: .001ms!important; animation: none!important; }
  .kd-hero-media, .kd-box-art img, .kd-trailer:is(:hover,:focus-visible) { transform: none; }
}
.motion-paused .kd-hero-media, .motion-paused .kd-box-art img, .motion-paused .kd-trailer:is(:hover,:focus-visible) { transform: none; }
.motion-paused .kd-feature-panel, .motion-paused .kd-feature-tab::before { transition: none; }
.motion-paused .kd-button.button, .motion-paused .kd-button.button::before,
.motion-paused .kd-store-links a { transition: none; transform: none; }
@media (forced-colors: active) {
  .kd-hero, .kd-features, .kd-platforms, .kd-reviews, .kd-rewards, .kd-media-dialog { background: Canvas; color: CanvasText; }
  .kd-section em, .kd-section p { color: CanvasText; }
  .kd-hero::after, .kd-rewards::after, .kd-box-art::before, .kd-reward::before { display: none; }
  .kd-hero-media, .kd-rewards-scenery { opacity: .15; }
  .kd-feature-tab, .kd-button.button { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; clip-path: none; }
  .kd-feature-tab[aria-selected="true"] { border: 3px solid Highlight; }
  .kd-feature-tab::before, .kd-button::before { display: none; }
}