@import url("variable/variables.css");
@import url("component/topNav.css");
@import url("component/footer.css");
@import url("component/modal.css");

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

/* reset css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--base-font);
  color: var(--textBody);
  background: var(--surfaceBase);
  font-size: var(--textBodyLarge);
  font-weight: 400;
  line-height: 1.4;
  padding-top: 72px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--textLink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.mainContainer {
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 600px);
}

.container-fuild {
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.container {
  /* width: min(100% - 48px, 1176px); */
  width: min(100% - 24px, 1210px);
  margin-inline: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.h1Title {
  font-size: 40px;
  color: var(--textHeading);
  font-weight: 700;
  line-height: 106%;
}
.headBoxContainer .h1Title{
  margin-bottom: 12px;
}

.h2Title {
  font-size: 32px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.h3Title {
  font-size: 30px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.1;
  margin-bottom: var(--space-md);
  font-family: var(--base-font);
}

/* hero banner style */
.heroBanner {
  background-image: url(../images/home-banner-mobile.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 120px;
}

.heroBanner .heroBannerContent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
  gap: 25px;
}

.heroBanner .bannerContent {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.heroBanner .heroBannerContent .bannerImgBtn {
  display: block;
  max-width: 250px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.heroBanner .heroBannerContent .bannerImg {
  display: block;
  width: 100%;
  max-width: 250px;
  position: relative;
  margin: 0 auto;
  pointer-events: none;
}

.heroBanner .heroBannerContent .rightCol {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.heroBanner .heroBannerContent .rightCol .musicGameIcon {
  max-width: 80px;
}

.heroBanner .heroBannerContent .rightCol .herobannerDesc {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  max-width: 300px;
}

.heroBanner .heroBannerContent .musicGameIcon {
  max-width: 65px;
  position: relative;
  z-index: 1;
  transition: transform .5s;
}

.heroBanner .bannerContent .btn {
  margin-top: 60px;
  margin-bottom: 20px;
}
a.bannerSubTitle:hover{
  text-decoration: none;
}
.bannerSubTitle {
  font-size: var(--textBodySmall);
  font-family: var(--base-font);
  font-weight: 800;
  color: var(--textBodyLink);
  line-height: 1.2;
  margin: 0;
}

.bannerSubTitle.colorInverse {
  color: var(--textInverse);
}

.bannerSubTitle.fontWeightMedium {
  font-weight: 600;
}

.underlineText {
  text-decoration: underline;
}

/* Hero Stairs Game subtitle — Figma 506×96, Baloo 2 Bold 40px */
.heroBanner .stairsGameLink {
  display: inline-block;
  box-sizing: border-box;
  max-width: 506px;
  font-family: var(--base-font);
  font-weight: 700;
  font-size: 40px;
  line-height: 120%;
  letter-spacing: 0;
  color: #ffff00;
  text-decoration: none;
}

.heroBanner a.stairsGameLink:hover {
  text-decoration: none;
  color: #ffff00;
}

/* Hero "Music, Puzzles and Brain Development" — Figma 281×74 */
.heroBanner .musicPuzzlesLink {
  display: inline-block;
  box-sizing: border-box;
  width: 281px;
  max-width: 100%;
  font-family: var(--base-font);
  font-weight: 800;
  font-size: 32px;
  line-height: 37px;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  /* Clear Baloo 2 descenders (p, g) — CSS offset:0 was cutting through glyphs */
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
}

.heroBanner a.musicPuzzlesLink:hover {
  text-decoration: underline;
}

.productBanner {
  background-image: url(../images/product-banner-mobile.png);
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size: 100% 100%;
  background-position: bottom center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 300px;
  height: auto;
  padding: 30px 0 60px;
}

.productBanner.teamsBanner{
  background-image: url(../images/teamsBanner-mobile.png);
}

.productBanner.shopBanner {
  background-image: url(../images/product-banner-mobile.png);
}

.productBanner.teamsBanner .heroBannerContent > div,
.productBanner.shopBanner .heroBannerContent > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}


.productBanner .heroBannerContent {
  text-align: center;
  max-width: 100%;
  padding-bottom: 30px;
}

.productBanner .bannerSubTitle {
  font-weight: 600;
}

.middleSection {
  padding: 30px 0;
  background-image: url(../images/page-bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
}

/* Magic Flute product page — no page watermark background */
.middleSection.theme-feathers {
  background-image: none;
}

.gameCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 20px;
  align-items: stretch;
}

.gameCards .gameCardItem {
  font-family: var(--secondary-font);
  font-size: var(--textBodyMedium);
  padding: 18px 26px;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  height: 100%;
  min-height: 510px;
  position: relative;
}

.gameCards .gameCardItem>a {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  grid-row: 2;
  grid-column: 1;
}

.gameCards .gameCardItem:hover {
  background-color: #1A1A1A;
  box-shadow: 0px 6px 0px 0px var(--shadowColorDark);
  z-index: 1;
}

.gameCards .gameCardItem a:hover {
  text-decoration: none;
}

.gameCards .gameCardItem:hover .cardHeader h3 {
  color: var(--textInverse);
}

.gameCards .gameCardItem:hover h3 strong {
  color: var(--btnSecondary);
}

.gameCards .gameCardItem:hover .cardSubTitle {
  color: var(--textInverse);
}

.gameCards .gameCardItem:hover .cardBody,
.gameCards .gameCardItem:hover .cardContent {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.gameCards .gameCardItem:hover .gameOverview {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gameCards .gameCardItem .cardBody {
  position: relative;
  grid-row: 3;
  grid-column: 1;
}

.gameCards .gameCardItem .cardContent {
  position: relative;
  grid-row: 3;
  grid-column: 1;
  /* max-height: 280px; */
  /* overflow-y: auto; */
  /* height: 150px; */
}

/* Custom scrollbar for card content when it overflows */
.gameCards .gameCardItem .cardContent::-webkit-scrollbar {
  width: 6px;
}

.gameCards .gameCardItem .cardContent::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.gameCards .gameCardItem .cardContent::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.gameCards .gameCardItem .cardContent::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.gameCards .gameCardItem .cardContent .testimonialTitle {
  font-size: 16px;
  font-weight: 700;
  color: var(--textBody);
  line-height: 95%;
  text-align: center;
  margin-bottom: 12px;
  font-family: var(--caveat-font);
  max-width: 260px;
  margin-right: auto;
  margin-left: auto;
}

.sectionCol .testimonialTitle {
  font-size: 32px;
  font-weight: 700;
  color: var(--textBody);
  line-height: 95%;
  text-align: center;
  margin-bottom: 17px;
  font-family: var(--caveat-font);
  min-height: 45px;
}

.sectionCol .testimonialAuthor {
  font-size: 20px;
}

.gameCards .gameCardItem .cardContent .testimonialAuthor,
.sectionCol .testimonialAuthor {
  display: block;
}

/* Homepage Magic Flute quote only — Figma Caveat script, 261×45 */
.kmg-home-products .gameCardMagicFlute .cardContent .testimonialTitle {
  width: 261px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.kmg-home-products .gameCardMagicFlute .cardContent .testimonialAuthor {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0 0 0 0.25em;
}

.gameCards .gameCardItem .awardList {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.gameCards .gameCardItem .awardList li {
  font-size: 12px;
  font-weight: 600;
  color: var(--textBody);
  line-height: 113%;
  margin-bottom: 0;
  font-family: var(--secondary-font);
}

.gameCards .gameCardItem .cardHeader {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  grid-row: 1;
  grid-column: 1;
}

.gameCards .gameCardItem p {
  font-size: var(--textBodyMedium);
}

.gameCards .gameCardItem .cardSubTitle {
  font-size: var(--textBodySmall);
  color: var(--textHeading);
  text-align: center;
  font-weight: 700;
  margin-bottom: 0px;
}

.gameCards .gameCardItem h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.2;
  text-align: center;
  font-family: var(--secondary-font);
  margin: 0px;
}
.gameCards .gameCardItem h3 a{
  font-size: 20px;
  font-weight: 700;
  font-family: var(--secondary-font);
}
.gameCards .gameCardItem h3 a .game-name{
  font-size: 20px;
  font-weight: 700;
  font-family: var(--secondary-font);
}
.gameCards .gameCardItem h3 a .game-description{
  font-size: 15px;
  font-weight: 700;
  font-family: var(--secondary-font);
  color:inherit;
}

.gameCards .gameCardItem h3 strong {
  display: block;
  font-size: 24px;
  font-family: var(--secondary-font);
  /* font-size: 32px; */
  font-weight: 900;
  color: var(--textHighLight);
  line-height: 112%;
}

.gameCards .gameCardItem h3 .game-name,
.gameCards .gameCardItem h3 .game-desc,
.gameCards .gameCardItem h3 .game-description {
  display: block;
  margin: 0;
  color: inherit;
  text-align: center;
  line-height: 1.2;
}

.gameCards .gameCardItem h3 .game-name {
  font-size: inherit;
  font-weight: inherit;
}

.gameCards .gameCardItem h3 .game-desc {
  font-size: var(--textBodySmall);
  font-weight: 700;
}

.gameCards .gameCardItem .cardContent p {
  color: var(--textBody);
  font-size: var(--textLabelSmall);
  margin-bottom: 5px;
  font-family: var(--secondary-font);
  font-weight: 600;
}
.gameCards .gameCardItem:hover .cardContent p{
  color: #fff;
}

.gameCards .gameCardItem .cardContent p span {
  display: block;
}

.gameCards .gameCardItem .cardImg {
  max-width: 93px;
  width: 93px;
  height: 135px;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  grid-row: 2;
  grid-column: 1;
}

.gameCards .gameCardItem .gameOverview {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 264px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 2;
  grid-row: 3;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  height: auto;
  margin-top: 84px;
}

.gameCards .gameCardItem .gameOverview .priceTag {
  font-size: 32px;
  font-weight: 700;
  color: var(--textInverse);
  margin: 0 0 6px;
  text-align: center;
}
.gameCards .gameCardItem .gameOverview .priceTag .edd_price{
  font-size: 24px;
}
.gameCards .gameCardItem .gameOverview .btn {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 8px 24px;
  border-radius: 999px;
}

/* Shop archive — Buy pinned to bottom of fixed-height card (Figma 374×540) */
.post-type-archive-download .gameCards .gameCardItem {
  display: flex !important;
  flex-direction: column;
  grid-template-rows: none;
  align-content: stretch;
  min-height: 510px;
  height: 100%;
  padding: 20px 29px;
  gap: 10px;
  border-radius: 20px;
  box-sizing: border-box;
}

.post-type-archive-download .gameCards .gameCardItem .cardHeader {
  flex: 0 0 auto;
}

.post-type-archive-download .gameCards .gameCardItem > a {
  flex: 0 0 auto;
  grid-row: auto;
  grid-column: auto;
}

.post-type-archive-download .gameCards .gameCardItem .cardImg {
  grid-row: auto;
  grid-column: auto;
}

.post-type-archive-download .gameCards .gameCardItem .cardContent {
  flex: 1 1 auto;
  grid-row: auto;
  grid-column: auto;
  max-height: none;
  overflow: visible;
  margin: 0;
}

.post-type-archive-download .gameCards .gameCardItem .gameOverview {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto;
  grid-row: auto;
  grid-column: auto;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  width: 100%;
  max-width: 256px;
  align-self: center;
  gap: 16px;
}

@media screen and (min-width: 768px) {
  .middleSection.kmg-home-products .gameCards .gameCardItem:hover .gameOverview {
    position: relative;
    bottom: auto;
    top: auto;
    transform: none;
  }
}

.mt-30 {
  margin-top: 30px;
}

.titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.viewAll {
  font-size: var(--textBodySmall);
  font-family: var(--secondary-font);
  font-weight: 800;
  white-space: nowrap;
  margin-bottom: var(--space-sm);
}

/* common styles */
.cardBox {
  background-color: var(--cardBg);
  border-radius: var(--radius-lg);
  box-shadow: 0px 6px 0px 0px var(--shadowColorLight);
  padding: 22px;
  position: relative;
  transition: transform 0.5s, background-color 0.5s, box-shadow 0.5s;
}
.userTestimonials .user-review{
  background-color: #EFF8FF;
}
p,
ul,
ol {
  font-size: var(--textBodySmall);
  font-weight: 400;
  color: var(--textBody);
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.text-inverse {
  color: var(--textInverse);
}

.d-none {
  display: none !important;
}

.d-flex {
  display: flex !important;
}

.flex-1 {
  flex: 1;
}

.align-item-center,
.align-items-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: end !important;
}

.justify-space-between {
  justify-content: space-between !important;
}

.font-secondary {
  font-family: var(--secondary-font);
}

.btn {
  font-family: var(--secondary-font);
  font-size: var(--textButtonMedium);
  font-weight: 700;
  color: var(--textInverse);
  border-radius: var(--radius-xl);
  padding: 5px 20px;
  line-height: 1.1;
  border: 2px solid transparent;
  background-color: var(--btnPrimary);
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color .4s;
}

.btn-primary {
  background-color: var(--btnPrimary);
  border-color: var(--btnPrimary);
  color: var(--textInverse);
}

.btn-primary:hover {
  background-color: var(--btnPrimaryActive);
  border-color: var(--btnPrimaryActive);
}

.btn-outline-primary {
  background-color: var(--surfaceBase);
  border-color: var(--btnPrimary);
  color: var(--btnPrimary);
}

.btn-outline-primary:hover {
  background-color: var(--btnPrimary);
  border-color: var(--btnPrimary);
  color: var(--textInverse);
}

.btn-secondary {
  background-color: var(--btnSecondary);
  border-color: var(--btnSecondary);
}

.btn-secondary:hover {
  background-color: var(--btnSecondaryActive);
  border-color: var(--btnSecondaryActive);
}

.btn-outline-secondary {
  background-color: var(--surfaceBase);
  border-color: var(--btnSecondary);
  color: var(--btnSecondary);
}

.btn-outline-secondary:hover {
  background-color: var(--btnSecondary);
  border-color: var(--btnSecondary);
  color: var(--textInverse);
}

.section-spacing {
  margin-bottom: 25px;
}

.p-0 {
  padding: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.w-100 {
  width: 100%;
}

.roundness-xl {
  border-radius: var(--radius-xl);
}

.formContainer {
  display: flex;
  flex-direction: column;
}

.formContainer .formRow {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.formContainer .formRow .formCol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formContainer .formRow .formCol .inputLabel,
.formContainer .formRow .formCol .inpuSubLabel {
  font-family: var(--secondary-font);
  color: var(--textHeading);
  font-size: var(--textBodySmall);
  line-height: 1.1;
}


.formContainer .formRow .formCol .inputLabel {
  font-weight: 700;
}

.formContainer .formRow .formCol .inpuSubLabel {
  font-weight: 500;
}

.formContainer .formRow .formCol .formInput {
  font-family: var(--secondary-font);
  color: var(--textHeading);
  font-size: var(--textBodySmall);
  line-height: 1.2;
  font-weight: 400;
  background-color: var(--surfaceBase);
  border: 2px solid var(--borderColor);
  border-radius: var(--radius-xl);
  padding: 7px 20px;
  outline: none;
}

.formContainer .formRow .formCol .formInput:focus {
  border-color: var(--borderActiveColor);
  background-color: #CDEAFF;
}

.formContainer .formRow .formCol .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.formContainer .formRow .formCol .input-wrapper.icon-left .formInput {
  padding-left: 50px;
  width: 100%;
}

.formContainer .formRow .formCol .input-wrapper.icon-right .formInput {
  padding-right: 50px;
  width: 100%;
}

.formContainer .formRow .formCol .input-wrapper .icon {
  font-size: var(--textBodyMedium);
  /* color: var(--textBody); */
  color: #676767;
  position: absolute;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.formContainer .formRow .formCol .input-wrapper.icon-left .icon {
  left: 20px;
}

.formContainer .formRow .formCol .input-wrapper.icon-right .icon {
  right: 20px;
}

.formContainer .btnRow {
  display: flex;
  gap: 20px;
  flex-direction: column;
  margin-top: 20px;
}

.formContainer .btnRow .btn {
  font-size: var(--textBodySmall);
  padding-top: 10px;
  padding-bottom: 10px;
}

.formContainer .passwordHint {
  display: flex;
  gap: 15px;
  padding: 20px 15px;
  font-family: var(--secondary-font);
  background-color: var(--surfaceMedium);
  border-radius: var(--radius-lg);
}

.formContainer .passwordHint .iconBox {
  background-color: #AADBFF;
  color: var(--textLink);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formContainer .passwordHint .passwordTitle {
  font-size: var(--textBodySmall);
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.1;
}

.formContainer .passwordHint ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.formContainer .passwordHint ul li {
  font-size: var(--textBodySmall);
  color: var(--textBody);
  font-weight: 500;
  display: flex;
  margin-bottom: 5px;
  gap: 10px;
}

.formContainer .passwordHint ul li i {
  color: #0CEB00;
}

.formContainer .radioInput {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid #c3c3c3;
  background-color: var(--surfaceBase);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  box-sizing: border-box;
  position: relative;
}

.formContainer .radioInput input[type="radio"] {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.formContainer .radioInput::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--textLink);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.formContainer .radioInput:has(input:checked) {
  border-color: var(--textLink);
  background-color: var(--surfaceBase);
}

.formContainer .radioInput:has(input:checked)::after {
  transform: scale(1);
}

/* --------------------------------- */

.clientsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 10px;
  margin-top: 40px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.clientsList .clientItem {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: auto;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.clientsList .clientImg {
  display: block;
  width: auto;
  height: auto;
  max-height: 85px;
  max-width: 100%;
  object-fit: contain;
}

.teamGameCard .gameImgBox,
.teamsPage .gameImgBox {
  background-image: url(../images/game-img-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: min(100%, 300px);
  max-width: 100%;
  aspect-ratio: 6 / 7;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 60px;
  padding: 0 0 6px;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.teamGameCard .gameImgBox img,
.teamsPage .gameImgBox img {
  max-width: 72%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

/* testimonials style */
.userTestimonials {
  display: flex;
  flex-direction: column;
  gap: 35px;
  margin-top: 50px;
}

.productBanner.reviewsHero + .middleSection .userTestimonials,
.middleSection.reviewsGamePage .userTestimonials {
  margin-top: 0;
}

.reviewsGameTitle {
  margin-top: 0;
  color: #3B2F4A;
  font-size: 40px;
  font-family: var(--base-font);
}

.userTestimonials .user-review {
  padding: 20px 25px;
  font-family: var(--secondary-font);
}

.userTestimonials .user-review p,
.userTestimonials .user-review ul,
.userTestimonials .user-review ol {
  font-size: 16px;
  font-weight: 400;
  /* color: var(--textHeading); */
  color:#000000;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  font-family: var(--secondary-font);
}

.userTestimonials .user-review ul,
.userTestimonials .user-review ol {
  margin-left: 15px;
}

.userTestimonials .user-review ul li,
.userTestimonials .user-review ol li {
  margin-bottom: 5px;
}

.userTestimonials .user-review .userBlock {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: var(--space-sm);
  min-width: 0;
}

.userTestimonials .user-review .userBlock > div:last-child {
  flex: 1;
  min-width: 0;
}

.userTestimonials .user-review .userBlock .user-img {
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.userTestimonials .user-review .user-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.2;
  margin-bottom: var(--space-xs);
  font-family: var(--secondary-font);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.userTestimonials .user-review .user-tag {
  font-family: var(--base-font);
  font-size: 20px;
  color: #767676;
  line-height: 1.1;
}

.userTestimonials .user-review .userTitle {
  color: var(--textHighLight);
  min-height: 33px;
  line-height: 100%;
  display: flex;
  align-items: center;
}

.tabs-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 80px;
  z-index: 10;
  margin-bottom: 50px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.testimonial-tabs-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  --testimonial-header-height: 72px;
  top: calc(var(--testimonial-header-height) + 8px);
}

@media screen and (min-width: 768px) {
  .testimonial-tabs-wrapper {
    --testimonial-header-height: 92px;
  }
}

@media screen and (min-width: 992px) {
  .testimonial-tabs-wrapper {
    --testimonial-header-height: 90px;
  }
}

@media screen and (min-width: 1200px) {
  .testimonial-tabs-wrapper {
    --testimonial-header-height: 96px;
  }
}

@media screen and (min-width: 1400px) {
  .testimonial-tabs-wrapper {
    --testimonial-header-height: 100px;
  }
}

body.admin-bar .testimonial-tabs-wrapper {
  top: calc(var(--testimonial-header-height) + 40px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .testimonial-tabs-wrapper {
    top: calc(var(--testimonial-header-height) + 54px);
  }
}

.tabs-wrapper::-webkit-scrollbar {
  display: none;
}

.tabs {
  display: inline-flex;
  background: var(--surfaceBase);
  border: 1px solid var(--borderColor);
  border-radius: 50px;
  padding: 2px;
  flex-shrink: 0;
  max-width: 100%;
}

.testimonial-tabs-wrapper .tabs {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.testimonial-tabs-wrapper .tabs::-webkit-scrollbar {
  display: none;
}

.tabs .tab-item {
  border: none;
  background: transparent;
  padding: 10px 25px;
  font-size: 15px;
  font-family: var(--secondary-font);
  font-weight: 700;
  color: var(--textHeading);
  border-radius: 50px;
  cursor: pointer;
  transition: 0.3s;
  line-height: 1;
}

.tabs .tab-item.active {
  background: #0092FF;
  color: var(--textInverse);
}

.tab-content .content {
  display: none;
}

.tab-content .content.active {
  display: block;
}

/* teams style */
.teamGameCard {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: space-between;
  padding: 30px 10px;
  margin-bottom: 35px;
}

.teamGameCard .gameCardItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.teamGameCard .gameCardItem ul,
.teamGameCard .gameCardItem ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.teamGameCard .gameContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.teamGameCard .cardHeader .gameTitle,
.teamGameCard .cardHeader .gameName {
  line-height: 1.1;
  font-weight: 700;
  color: var(--textHeading);
}

.teamGameCard .cardHeader .gameName {
  font-size: var(--textHeadingSmall);
  margin-bottom: 15px;
}

.teamGameCard .cardHeader .gameTitle {
  font-size: 32px;
  margin-bottom: var(--space-xs);
}

.teamGameCard .cardHeader .gameSubTitle {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--textBodyLarge);
}

.teamGameCard .gameContent .subTitle,
.teamGameCard .gameContent .paraTitle {
  font-size: var(--textBodyLarge);
  font-family: var(--base-font);
  font-weight: 600;
}

.teamGameCard .gameContent .subTitle {
  color: var(--textHeading);
}

.teamGameCard .gameContent .paraTitle {
  color: var(--textLink);
  margin-bottom: 0;
}

.teamGameCard .gameContent p:not(.subTitle):not(.paraTitle),
.teamGameCard .gameContent li {
  font-family: var(--secondary-font);
  font-size: var(--textBodyMedium);
  font-weight: 600;
  color: var(--textHeading);
  margin-bottom: 5px;
}

/* game preview styles */
.gamePreview {
  font-family: var(--secondary-font);
  overflow: visible;
}
.gamePreview.theme-feathers{
  padding-top: 12px;
}

.gamePreview .gamePreviewTop {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 28px;
  position: relative;
  padding-top: 24px;
  margin-bottom: 72px;
}

.gamePreview .titleWrap {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  max-width: 100%;
}

.gamePreview .titleWrap .h1Title {
  font-family: var(--base-font);
  font-size: clamp(32px, 4.2vw, 68px);
  font-weight: 800;
  color: var(--textHeading);
  line-height: 1.05;
  margin-bottom: 0;
  white-space: normal;
  letter-spacing: -0.5px;
}

.gamePreview .titleWrap .heroStars {
  position: absolute;
  top: -30px;
  right: -75px;
  width: clamp(75px, 8vw, 115px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.gamePreview .heroStars {
  position: absolute;
  top: -30px;
  right: -75px;
  width: clamp(75px, 8vw, 115px);
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.gamePreview .h1Title {
  font-family: var(--base-font);
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.05;
}

.gamePreview .gamePreviewTop .leftCol {
  flex: 1 1 540px;
  order: 2;
  min-width: 0;
  width: 100%;
  max-width: 600px;
  margin-right: 0;
}

.gamePreview .gamePreviewTop .rightCol {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 1;
  min-width: 0;
  width: 100%;
  max-width: 474px;
  position: relative;
  overflow: visible;
  padding-top: 65px;
}

/* Magic Flute — Figma: 42px gap from header to feather tip */
.gamePreview.theme-feathers .gamePreviewTop {
  padding-top: 42px;
}

/* Figma Game preview blob group — 473.35×561.57 (asset 474×562) */
.gamePreview .gamePreviewTop .rightCol::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 474px;
  height: 562px;
  max-width: none;
  background-image: url(../images/game-img-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}

.gamePreview .gamePreviewTop .gameImgBox {
  position: relative;
  width: auto;
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 0;
  padding: 0;
  overflow: visible;
  background: none;
  z-index: 1;
}

.gamePreview .gamePreviewTop .gameImgBox::before,
.gamePreview .gamePreviewTop .gameImgBox::after {
  content: none;
  display: none;
}

.gamePreview .gamePreviewTop .gameImgBox .gameImgBg {
  display: none;
}

.gamePreview .gamePreviewTop .gameImgBox .coverImg {
  position: relative;
  z-index: 1;
  display: block;
  width: 305px;
  max-width: 90%;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 80, 200, 0.16);
  border: none;
}

/* Magic Flute cover — Figma FLUTE_PHOTO_NEW 305×432, radius 20 */
.gamePreview.theme-feathers .gamePreviewTop .gameImgBox .coverImg {
  width: 305px;
  height: 432px;
  max-width: none;
  object-fit: cover;
  border-radius: 20px;
}

.gamePreview .featherPlayBtn {
  display: none;
}

.gamePreview .gamePreviewTop .sectionCol {
  text-align: center;
  width: 100%;
  max-width: 100%;
  position: relative;
  bottom: auto;
  z-index: 1;
}

.gamePreview .gamePreviewTop .testimonialTitle {
  font-family: var(--caveat-font), 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  font-style: normal;
  color: #3B2F4A !important;
  line-height: 1.15;
  margin: 0 auto;
  text-align: center;
  /* white-space: nowrap; */
  display: block;
  width: 100%;
}

.gamePreview .gamePreviewTop .testimonialAuthor {
  display: block;
  font-family: var(--caveat-font), 'Caveat', cursive;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  color: #3B2F4A;
  margin-top: 4px;
  line-height: 1.15;
  text-align: center;
}

/* Magic Flute quote under the cover — Figma 308×69 */
.gamePreview.theme-feathers .gamePreviewTop .sectionCol {
  max-width: 308px;
  margin-left: auto;
  margin-right: auto;
}

.gamePreview.theme-feathers .gamePreviewTop .testimonialTitle {
  width: 308px;
  max-width: 308px;
  font-size: 20px;
  line-height: 1.15;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.gamePreview.theme-feathers .gamePreviewTop .testimonialAuthor {
  display: inline;
  font-size: inherit;
  margin: 0 0 0 0.25em;
  max-width: none;
  text-align: inherit;
}

.gamePreview .gameOverview {
  background-color: var(--cardBg);
  border-radius: 20px;
  padding: 24px 24px 28px;
  display: grid;
  gap: 14px 16px;
  grid-template-columns: 1fr;
  margin-bottom: 0;
  max-width: 580px;
}

.gamePreview .gameOverview .priceTag,
.gamePreview .subTitle {
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
}

.gamePreview .gameOverview .priceTag {
  grid-column: 1 / -1;
  font-family: var(--secondary-font);
  font-size: 40px;
  font-weight: 700;
  color: var(--btnSecondary);
  text-align: left;
  margin-bottom: 0px;
  line-height: 1;
}

.gamePreview .gameOverview .btn {
  text-align: center;
  width: 100%;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
}

.gamePreview .gameOverview .btn-secondary {
  background-color: var(--btnSecondary);
  border-color: var(--btnSecondary);
}

.gamePreview .gameOverview .btn-secondary:hover {
  background-color: var(--btnSecondaryActive);
  border-color: var(--btnSecondaryActive);
}

/* Nutcracker — Figma "Get the game": card 582×326, inner stack 370×165, gap 12 */
.gamePreview .getGamePanel {
  box-sizing: border-box;
  width: 100%;
  max-width: 582px;
  min-height: 326px;
  margin-top: 24px;
  padding: 20px;
  background: #E4F3FF;
  border-radius: 20px;
  font-family: var(--secondary-font);
  display: flex;
  flex-direction: column;
}

.gamePreview .getGameTitle {
  margin: 0 0 8px;
  font-family: var(--base-font);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--textHeading);
}

.gamePreview .getGameText {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 400;
  line-height: 149%;
  color: #5B5B5B;
  font-family: var(--secondary-font);
}

/* Figma Hug 370.28 × 164.76, vertical gap 12 */
.gamePreview .getGameBody {
  width: 100%;
  max-width: 370px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.gamePreview .getGameAction {
  display: flex;
  justify-content: center;
  margin: 0;
}

.gamePreview .getGameBuyForm {
  width: 280px;
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

/* Figma Buy Now — Fixed 280×43, #FB58A9, radius 90, Nunito Sans 700 20px */
.gamePreview .getGameBuyBtn,
.gamePreview .getGameBuyForm .getGameBuyBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 280px;
  max-width: 100%;
  height: 43px;
  min-height: 43px;
  margin: 0 auto !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 90px !important;
  background-color: #FB58A9 !important;
  color: #fff !important;
  font-family: var(--secondary-font); /* Nunito Sans */
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer;
}

.gamePreview .getGameBuyBtn:hover,
.gamePreview .getGameBuyForm .getGameBuyBtn:hover {
  background-color: var(--btnPrimaryActive) !important;
  border-color: var(--btnPrimaryActive) !important;
  color: var(--textInverse) !important;
}

.gamePreview .getGamePlatforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #FB58A9;
}

.gamePreview .getGamePlatforms li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #353535;
  line-height: 1.2;
}

.gamePreview .getGamePlatforms li i {
  color: #159F4A;
  font-size: 16px;
  line-height: 1;
}

.gamePreview .getGameOr {
  text-align: center;
  font-size: 14px;
  color: #5B5B5B;
  margin: 0;
  font-weight: 400;
  line-height: 100%;
}

.gamePreview .getGameStores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0px 16px;
}

.gamePreview .getGameStores .storeBadge {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
}

/* Figma store badges — App Store / Google Play 131.57 × 37.76 */
.gamePreview .getGameStores .storeBadge img {
  display: block;
  width: 132px;
  height: 38px;
  max-width: 100%;
  object-fit: contain;
}

.gamePreview .subTitle {
  font-size: 20px;
  color: var(--textHeading);
}

.gamePreview ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gamePreview .headBoxContainer {
  background: none;
  border-radius: 0;
  position: relative;
  text-align: left;
  padding: 8px 0 20px;
  max-width: 580px;
}

.mainContainer .gamePreview .gamePreviewTop .leftCol .headBoxContainer {
  width: 100%;
  max-width: 576px;
  background-color: transparent;
  /* background-image: url(../images/gameBg.png); */
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #E4F3FF 49.52%, rgba(255, 255, 255, 0.00) 100%);
}

.gamePreview .headBoxContainer p {
  font-size: var(--textBodySmall);
  color: var(--textBody);
  line-height: 129%;
  margin-bottom: 12px;
}

.gamePreview .headBoxContainer .welcomeLead {
  margin-bottom: 18px;
}

.gamePreview .headBoxContainer .welcomeLead .welcomeText {
  font-size: 22px;
  font-weight: 800;
  color: var(--textHeading);
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.gamePreview .headBoxContainer .welcomeLead .welcomeSub {
  font-size: 22px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.3;
}

.gamePreview .headBoxContainer .welcomeLead strong {
  font-weight: 800;
  letter-spacing: 0.02em;
  display: block;
}

.gamePreview .headBoxContainer .heroDesc {
  font-size: 19px;
  font-family: var(--secondary-font);
  font-weight: 400;
  color: var(--textBody);
  line-height: 1.5;
  margin-bottom: 28px;
}

.gamePreview .nutcrackerGames {
  background-color: var(--cardBg);
  border-radius: var(--radius-xl);
  padding: 48px 24px 20px;
  margin-bottom: 48px;
  overflow: visible;
}

.gamePreview .nutcrackerGames .gameItemsRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-bottom: 48px;
  padding: 0;
}

.gamePreview .nutcrackerGames .gameItemsRow .gameImgCol,
.gamePreview .nutcrackerGames .gameItemsRow .gameImgCol img:not(.starImg):not(.featherPlayImg) {
  border-radius: var(--radius-xl);
}

.gamePreview .nutcrackerGames .gameItemsRow .gameImgCol {
  box-shadow: 10px 10px 0px #AADBFF;
  transform: rotate(-2.95deg);
  display: flex;
  position: relative;
  max-width: min(420px, 100%);
  transition: transform 0.3s ease;
}

/* .gamePreview .nutcrackerGames .gameItemsRow .gameImgCol img:not(.starImg):not(.featherPlayImg) {
  width: 100%;
  height: auto;
  display: block;
} */

.gamePreview .nutcrackerGames .gameItemsRow p {
  font-size: var(--textBodySmall);
  margin-left: auto;
  text-align: center;
  /* color: var(--textHeading); */
  color: #5B5B5B;
  line-height: 1.4;
}

.gamePreview .nutcrackerGames .gameItemsRow:nth-of-type(2n) .gameImgCol {
  transform: rotate(1.7deg);
  box-shadow: -15px 15px 0px 0px #AADBFF;
}

.gamePreview .nutcrackerGames .gameItemsRow:nth-of-type(2n) p {
  margin-left: 0;
}

.gamePreview .gameItemsRow .gameImgCol .starImg {
  max-width: 48px;
  border-radius: 0 !important;
  position: absolute;
  z-index: 1;
  top: -20px;
}

.gamePreview .gameItemsRow .gameImgCol .starImg.left {
  left: -12px;
}

.gamePreview .gameItemsRow .gameImgCol .starImg.right {
  right: -12px;
}

.gamePreview.theme-stars .decor-feather,
.gamePreview.theme-feathers .decor-star {
  display: none;
}

.gamePreview.theme-feathers .titleWrap .heroStars,
.gamePreview.theme-feathers .heroStars {
  width: 184px;
  max-width: 184px;
  height: auto;
  top: -48px;
  right: -100px;
}

.gamePreview.theme-feathers .gameItemsRow .gameImgCol .starImg {
  display: none;
}

.gamePreview.theme-feathers .featherPlayBtn {
  display: block;
  position: absolute;
  width: 100px;
  height: 120px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 6;
  overflow: visible;
  pointer-events: auto;
}

.gamePreview.theme-feathers .featherPlayBtn.right {
  top: -28px;
  right: -22px;
}

/* Figma node 1669:11858 — feather + play on top-left of cover */
.gamePreview.theme-feathers .featherPlayBtn.left {
  top: -57px;
  left: -68px;
  right: auto;
}

.gamePreview.theme-feathers .featherPlayIcon {
  position: absolute;
  bottom: 0;
  width: 63px;
  height: 63px;
  object-fit: contain;
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  transform: scale(1);
  transform-origin: center;
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 2;
}

.gamePreview.theme-feathers .featherPlayIcon--default {
  opacity: 1;
}

.gamePreview.theme-feathers .featherPlayIcon--hover {
  opacity: 0;
}

.gamePreview.theme-feathers .featherPlayBtn.right .featherPlayIcon {
  right: 6px;
  left: auto;
}

.gamePreview.theme-feathers .featherPlayBtn.left .featherPlayIcon {
  left: 22px;
  right: auto;
}

.gamePreview.theme-feathers .featherPlayBtn:hover .featherPlayIcon--default,
.gamePreview.theme-feathers .featherPlayBtn:focus-visible .featherPlayIcon--default {
  opacity: 0;
  transform: scale(1.06);
}

.gamePreview.theme-feathers .featherPlayBtn:hover .featherPlayIcon--hover,
.gamePreview.theme-feathers .featherPlayBtn:focus-visible .featherPlayIcon--hover {
  opacity: 1;
  transform: scale(1.06);
}

/* Figma Rotating Feather1 — 89×133, sit tight on play, 20° ↔ -20° */
.gamePreview.theme-feathers .featherPlayImg {
  position: absolute;
  bottom: 55px;
  width: 75px;
  height: 129px;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 4px 8px rgba(40, 10, 0, 0.22));
  animation: featherRotate 1600ms ease-in-out 1ms infinite alternate;
}

.gamePreview.theme-feathers .featherPlayBtn.right .featherPlayImg {
  right: 0;
  left: auto;
}

.gamePreview.theme-feathers .featherPlayBtn.left .featherPlayImg {
  left: 0px;
  right: auto;
}
.gamePreview.theme-feathers .featherPlayBtn.left.kmg-flute-feather3-trigger .featherPlayImg {
  left: 12px;
  right: auto;
  bottom: 55px;
}
.gamePreview.theme-feathers .gameImgCol .featherPlayBtn {
  width: 92px;
  height: 120px;
}

.gamePreview.theme-feathers .gameImgCol .featherPlayBtn.right {
  top: -84px;
  right: -30px;
}

.gamePreview.theme-feathers .gameImgCol .featherPlayBtn.left {
  top: -82px;
  left: 12px;
  right: auto;
}

.gamePreview.theme-feathers .gameImgCol .featherPlayImg {
  bottom: 58px;
  width: 73px;
  height: 129px;
}

@keyframes featherRotate {
  /* Default: tilted toward top-right */
  from {
    transform: rotate(20deg);
  }
  /* Variant2 (Figma): -20° */
  to {
    transform: rotate(-20deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gamePreview.theme-feathers .featherPlayImg {
    animation: none;
  }
}

/* Magic Flute frame popups (biography + tale) — Figma outer 800×600, paper 673.78×568 */
.kmg-flute-frame-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10012;
  background: rgba(22, 30, 39, 0.55);
}

.kmg-flute-frame-modal[hidden] {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.kmg-flute-frame-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kmg-flute-frame-modal .kmg-flute-bio-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(800px, calc(100% - 24px));
  height: min(600px, calc(100vh - 24px));
  max-width: 800px;
  max-height: 600px;
  margin: 0;
  /* Figma: paper left 63.11, top 29 → bottom 600-29-568 = 3 */
  padding: 29px 63px 3px;
  border-radius: 30px;
  background: linear-gradient(180deg, #1C258C 0%, #2BCAF6 100%);
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}

.kmg-flute-frame-modal.show .kmg-flute-bio-dialog {
  transform: scale(1);
}

/* Paper-Big / Feather1 frames — Figma 673.78 × 568 */
.kmg-flute-frame-modal .kmg-flute-bio-paper {
  position: relative;
  box-sizing: border-box;
  width: 673.78px;
  max-width: 100%;
  height: 568px;
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
  background: none;
  display: block;
  overflow: visible;
}

.kmg-flute-frame-modal .kmg-flute-bio-slides {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  text-align: center;
  line-height: 0;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 0;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide[hidden] {
  display: block !important;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide-img {
  display: block;
  width: 673.78px;
  max-width: 100%;
  height: 568px;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .kmg-flute-frame-modal .kmg-flute-bio-slide {
    transition: none;
  }
}

.kmg-flute-frame-modal .kmg-flute-bio-exit {
  position: absolute;
  top: -3%;
  right: 10%;
  z-index: 3;
  width: 80px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.kmg-flute-frame-modal .kmg-flute-bio-exit img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.kmg-flute-frame-modal .kmg-flute-bio-exit-label {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(11px, 2.2vw, 14px);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  color: #000000;
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.15s ease;
}

.kmg-flute-frame-modal .kmg-flute-bio-exit:hover .kmg-flute-bio-exit-label,
.kmg-flute-frame-modal .kmg-flute-bio-exit:focus-visible .kmg-flute-bio-exit-label {
  color: #9b2396;
}

/* Feather 3 MP4 already includes blue frame + parchment — fill dialog edge-to-edge */
.kmg-flute-feather3-modal .kmg-flute-feather3-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(800px, calc(100% - 24px));
  height: min(600px, calc(100vh - 24px));
  max-width: 800px;
  max-height: 600px;
  margin: 0;
  padding: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  transform: scale(0.94);
  transition: transform 0.3s ease;
}

.kmg-flute-feather3-modal.show .kmg-flute-feather3-dialog {
  transform: scale(1);
}

.kmg-flute-feather3-modal .kmg-flute-feather3-video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: transparent;
  border: 0;
}

.kmg-flute-feather3-modal .kmg-flute-bio-exit {
  top: 18px;
  right: 128px;
  z-index: 4;
}

.gamePreview.theme-feathers .kmg-flute-feather3-trigger {
  cursor: pointer;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--photo,
.kmg-flute-frame-modal .kmg-flute-bio-slide--signature,
.kmg-flute-frame-modal .kmg-flute-bio-slide--family,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-photo,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-aside,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  width: 100%;
  text-align: left;
}

.kmg-flute-frame-modal .kmg-flute-bio-photo,
.kmg-flute-frame-modal .kmg-flute-bio-story-photo {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 2px;
}

/* Title slide — Poor Richard (Figma: Wolfgang Amadeus / Mozart) */
.kmg-flute-frame-modal.modal h2.kmg-flute-bio-title,
.kmg-flute-frame-modal h2.kmg-flute-bio-title,
.kmg-flute-frame-modal .kmg-flute-bio-title {
  margin: 0 0 40px;
  max-width: 440px;
  font-family: var(--poor-richard-font);
  font-size: 60px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  color: #663300;
  text-wrap: balance;
}

.kmg-flute-frame-modal p.kmg-flute-bio-meta,
.kmg-flute-frame-modal .kmg-flute-bio-meta {
  margin: 0 0 12px;
  font-family: var(--poor-richard-font);
  font-size: clamp(24px, 4.5vw, 40px);
  font-weight: 400;
  line-height: 120%;
  text-align: center;
  color: #663300;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--title .kmg-flute-bio-body {
  margin: 0;
  font-family: var(--poor-richard-font);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 400;
  line-height: 120%;
  text-align: center;
  color: #663300;
}

/* Story slides 2–15 — Times New Roman 24 / 120%, left aligned (Figma) */
.kmg-flute-frame-modal .kmg-flute-bio-slide--photo .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--signature .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--family .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-photo .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-aside .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-quote {
  margin: 0;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0;
  text-align: left;
  color: #663300;
}

.kmg-flute-frame-modal .kmg-flute-bio-story-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.kmg-flute-frame-modal .kmg-flute-bio-quote {
  font-style: italic;
}

.kmg-flute-frame-modal .kmg-flute-bio-mark {
  background: #B8E4FF;
  color: inherit;
  padding: 0 2px;
}

.kmg-flute-frame-modal .kmg-flute-bio-signature-img {
  display: block;
  width: min(330px, 90%);
  height: auto;
  align-self: flex-end;
}

.kmg-flute-frame-modal .kmg-flute-bio-portraits {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 12px;
  width: 100%;
}

.kmg-flute-frame-modal .kmg-flute-bio-portrait {
  width: 106px;
  height: 130px;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--family .kmg-flute-bio-body {
  max-width: 100%;
}

.kmg-flute-frame-modal .kmg-flute-bio-story {
  width: 100%;
}

/* Figma: ticket/portrait floats top-right, text wraps beside it */
.kmg-flute-frame-modal .kmg-flute-bio-story--aside {
  display: block;
  width: 100%;
  text-align: left;
}

/* News aside — Figma: full-width text on top, News 1 pinned bottom-right */
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-aside {
  display: block;
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 360px;
}

.kmg-flute-frame-modal .kmg-flute-bio-story--aside {
  display: block;
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 360px;
  overflow: visible;
}

/* Push float down so News sits at bottom-right of the 360 frame */
.kmg-flute-frame-modal .kmg-flute-bio-story--aside::before {
  content: '';
  float: right;
  width: 0;
  height: 162px; /* 360 - 198 image height */
}

.kmg-flute-frame-modal .kmg-flute-bio-story--aside .kmg-flute-bio-aside-img {
  float: right;
  clear: right;
  width: 228px;
  height: 198px;
  max-width: none;
  max-height: none;
  margin: 0 0 0 12px;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

.kmg-flute-frame-modal .kmg-flute-bio-story--aside .kmg-flute-bio-story-text {
  display: block;
  width: auto;
}

.kmg-flute-frame-modal .kmg-flute-bio-story--aside .kmg-flute-bio-body,
.kmg-flute-frame-modal .kmg-flute-bio-story--aside .kmg-flute-bio-quote {
  text-align: left;
}

.kmg-flute-frame-modal .kmg-flute-bio-story--aside::after {
  content: '';
  display: table;
  clear: both;
}

.kmg-flute-frame-modal .kmg-flute-bio-aside-img {
  width: 228px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Keep News slide content toward top of parchment so bottom-right reads correctly */
.kmg-flute-frame-modal .kmg-flute-bio-paper-content:has(.kmg-flute-bio-slide--story-aside.is-active) {
  justify-content: flex-start;
  top: 16%;
  transform: translateX(-50%);
  max-height: 78%;
}

/* Violin slide — Figma: 440 text frame, gap 20; violin 214×225 overflows outside frame */
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 272px;
  padding-bottom: 0;
  gap: 20px;
  overflow: visible;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-story,
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-story-text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  overflow: visible;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-story-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body {
  margin: 0;
  max-width: 100%;
}

/* Full-width one line in Figma */
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body:nth-child(2) {
  max-width: 100%;
  white-space: nowrap;
}

/* Last para leaves room where violin overlaps the 440 frame */
.kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body:nth-child(3) {
  max-width: calc(100% - 84px);
  
}

/* Absolute to the slide — sticks out past the 440 container (right + bottom) */
.kmg-flute-frame-modal .kmg-flute-bio-violin-img {
  position: absolute;
  right: -17px;
  bottom: -90px;
  z-index: 2;
  width: 200px;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.kmg-flute-frame-modal .btn-wrap-outer {
  position: relative;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  bottom: 100px;
  top: auto;
}

.kmg-flute-frame-modal .btn-wrap-outer .kmg-flute-bio-prev,
.kmg-flute-frame-modal .btn-wrap-outer .kmg-flute-bio-next,
.kmg-flute-frame-modal .btn-wrap-outer .kmg-flute-bio-end {
  pointer-events: auto;
  position: absolute;
}

.kmg-flute-frame-modal .kmg-flute-bio-prev,
.kmg-flute-frame-modal .kmg-flute-bio-next {
  width: 43px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.kmg-flute-frame-modal .kmg-flute-bio-prev {
  left: 9%;
}

.kmg-flute-frame-modal .kmg-flute-bio-next {
  right: 9%;
}

.kmg-flute-frame-modal .kmg-flute-bio-prev img,
.kmg-flute-frame-modal .kmg-flute-bio-next img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.kmg-flute-frame-modal .kmg-flute-bio-end {
  position: absolute;
  right: 8%;
  bottom: 7%;
  z-index: 3;
  width: 86px;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  display: block;
}

.kmg-flute-frame-modal .kmg-flute-bio-end img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.kmg-flute-frame-modal .kmg-flute-bio-prev[hidden],
.kmg-flute-frame-modal .kmg-flute-bio-next[hidden],
.kmg-flute-frame-modal .kmg-flute-bio-end[hidden] {
  display: none !important;
}

.gamePreview.theme-feathers .kmg-flute-bio-trigger,
.gamePreview.theme-feathers .kmg-flute-tale-trigger {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .kmg-flute-frame-modal .kmg-flute-bio-dialog {
    width: min(calc(100% - 16px), 800px);
    height: auto;
    max-height: calc(100vh - 16px);
    padding: 12px 14px 16px;
    border-radius: 24px;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .kmg-flute-feather3-modal .kmg-flute-feather3-dialog {
    width: min(calc(100% - 16px), 800px);
    height: auto;
    max-height: calc(100vh - 16px);
    aspect-ratio: 800 / 600;
    border-radius: 24px;
  }

  .kmg-flute-feather3-modal .kmg-flute-bio-exit {
    top: 10px;
    right: 14px;
    width: 64px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-paper {
    position: relative;
    width: min(100%, calc((100vh - 64px) * 674 / 568));
    /* Absolute slides don't give the paper height — keep frame ratio */
    height: auto;
    aspect-ratio: 674 / 568;
    max-height: calc(100vh - 64px);
    margin-inline: auto;
    padding: 0;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }

  .kmg-flute-frame-modal .btn-wrap-outer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    height: 36px;
    z-index: 3;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-title {
    font-size: clamp(28px, 8vw, 44px);
  }

  .kmg-flute-frame-modal .kmg-flute-bio-meta {
    font-size: clamp(22px, 5vw, 32px);
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide--title .kmg-flute-bio-body {
    font-size: clamp(20px, 4.5vw, 28px);
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide--photo .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--signature .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--family .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--story .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-photo .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-aside .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body,
  .kmg-flute-frame-modal .kmg-flute-bio-quote {
    font-size: 18px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-story--aside::before {
    height: 100px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-aside,
  .kmg-flute-frame-modal .kmg-flute-bio-story--aside {
    min-height: 280px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-story--aside .kmg-flute-bio-aside-img {
    width: min(180px, 46%);
    height: auto;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body:nth-child(2) {
    white-space: normal;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-slide--story-violin .kmg-flute-bio-body:nth-child(3) {
    max-width: calc(100% - 100px);
  }

  .kmg-flute-frame-modal .kmg-flute-bio-violin-img {
    width: min(160px, 42%);
    height: auto;
    aspect-ratio: 214 / 225;
    right: -24px;
    bottom: -16px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-exit {
    top: -1%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-exit-label {
    font-size: 10px;
    top: 53%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-prev,
  .kmg-flute-frame-modal .kmg-flute-bio-next {
    width: 32px;
    bottom: 6%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-prev {
    left: 8%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-next {
    right: 8%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-end {
    width: 72px;
    right: 7%;
    bottom: 6%;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-portrait {
    width: 58px;
    height: 74px;
  }

  .kmg-flute-frame-modal .kmg-flute-bio-portraits {
    gap: 12px;
  }
}

.gamePreview .gamesFeatures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.gamePreview .gamesFeatures .featuresCol .mt-40 {
  margin-top: 40px;
}

.gamePreview .gamesFeatures .headerTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-bottom: 16px;
}

.gamePreview .gamesFeatures .headerTitle .subTitle {
  font-family: var(--secondary-font);
  font-size: 32px;
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 0;
}

.gamePreview .gamesFeatures .headerTitle .starImg {
  max-width: 60px;
}

.gamePreview .gamesFeatures .featureItemList {
  background: linear-gradient(90deg, #E4F3FF 0%, #FFFFFF 55.29%);
  border-radius: var(--radius-md);
  border: 1px solid #CEEAFF;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* .gamePreview .gamesFeatures .featureItemList:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 146, 255, 0.08);
} */

.gamePreview .gamesFeatures .featureItemList img {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

.gamePreview .gamesFeatures .featuresCol:nth-of-type(2) .featureItemList {
  background: linear-gradient(90deg, #FFE4F1 0%, #FFFFFF 55.29%);
  border-color: #FFD0E8;
}

.gamePreview .gamesFeatures .featureItemList h4,
.gamePreview .gamesFeatures .featureItemList p {
  font-size: var(--textBodySmall);
  color: var(--textBody);
  line-height: 1.3;
  margin-bottom: 0;
}

.gamePreview .gamesFeatures .featureItemList h4 {
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 2px;
}

.gamePreview .gamesFeatures .featureItemList p strong {
  display: block;
}

.gamePreview .listingItems {
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}

.gamePreview .listingItems .subTitle {
  font-family: var(--secondary-font);
  font-size: 32px;
  font-weight: 700;
  color: var(--textHeading);
  margin: 0 0 16px 0;
  padding-left: 50px;
  text-transform: uppercase;
}

.gamePreview .listingItems.skills {
  background-color: var(--cardBg);
}

.gamePreview .listingItems.awards {
  background-color: #FFF9D8;
  border: 1.5px solid #FDDE2A;
}

.gamePreview .listingItems.awards .subTitle {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gamePreview .listingItems.awards ul li .awardText {
  flex: 1 1 auto;
  min-width: 0;
}

.gamePreview .listingItems.awards ul li .awardName {
  font-weight: 700;
  color: #5B5B5B;
}

.gamePreview .listingItems.awards ul li .awardMeta {
  font-weight: 400;
  color: #5B5B5B;
}

.gamePreview .listingItems ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--secondary-font);
  font-size: 24px;
  color: #5B5B5B;
}

.gamePreview .listingItems ul li {
  font-size: 16px;
  /* color: var(--textHeading); */
  margin-bottom: 10px;
  position: relative;
  padding-left: 50px;
  line-height: 1.4;
  font-family: var(--secondary-font);
  color: #5B5B5B;
}

.gamePreview .listingItems ul li:last-child {
  margin-bottom: 0;
}

.gamePreview .listingItems ul li i {
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 21px;
}

.gamePreview .listingItems ul li .checkIcon {
  color: #0CEB00;
}

.gamePreview .listingItems ul li .starIcon {
  position: absolute;
  left: 0;
  top: 2px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.gamePreview .clientsList {
  display: flex;
  /* gap: 35px; */
  gap:12px;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.gamePreview .clientsList .clientItem {
  max-width: 100%;
  min-width: 0;
}

.gamePreview .clientsList .clientImg {
  max-width: 100%;
  height: auto;
  max-height: 85px;
  width: auto;
  object-fit: contain;
}

.gamePreview .downloadGames {
  background-color: var(--cardBg);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 30px;
}

.gamePreview .downloadGames .subTitle {
  font-family: var(--secondary-font);
  font-size: 32px;
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 12px;
}

.gamePreview .downloadGames .gamesItemRow {
  display: flex;
  gap: 90px;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.gamePreview .downloadGames .gamesItemRow .gamesItem {
  max-width: 147px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 100, 240, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* .gamePreview .downloadGames .gamesItemRow .gamesItem:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 100, 240, 0.2);
} */

.gamePreview .downloadGames .gamesItemRow .gamesItem img {
  width: 100%;
  display: block;
}

.gamePreview .reviewCard {
  background-color: #E4F3FF;
  border-radius: var(--radius-lg);
  border: none;
  padding: 24px 22px 26px;
  margin-bottom: 0;
}

.gamePreview .reviewCard p,
.gamePreview .reviewCard.discoveryReview p {
  font-size: var(--textBodyMedium);
  color: var(--textBlack);
  line-height: 1.4;
  margin-bottom: 12px;
}

.gamePreview .reviewQuoteRow {
  display: block;
  margin-bottom: 8px;
}

.gamePreview .reviewQuoteRow::after {
  content: "";
  display: table;
  clear: both;
}

.gamePreview .reviewQuoteRow p {
  margin-bottom: 0;
}

.gamePreview .reviewCard .reviewLogo {
  float: left;
  display: block;
  max-width: 80px;
  width: auto;
  height: auto;
  margin: 0 6px 8px 0;
}

.gamePreview .reviewCard .reviewLogo.superKids {
  max-width: 120px;
}

.gamePreview .reviewQuoteRow.superKidsRow {
  align-items: center;
  margin: 16px 0 12px;
}

.gamePreview .reviewQuoteRow.superKidsRow p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.gamePreview .reviewCard .reviewSource {
  display: inline;
  font-size: var(--textBodyMedium);
  font-weight: 400;
  color: var(--textBlack);
}

.gamePreview .reviewCard p.reviewSource {
  display: block;
  clear: both;
  margin-top: 8px;
  margin-bottom: 16px;
}

.gamePreview .reviewCard .reviewSource strong {
  font-weight: 700;
  display: block;
}

.gamePreview .reviewCard .reviewBtn {
  display: flex;
  width: fit-content;
  min-width: 180px;
  margin: 18px auto 0;
  padding: 8px 24px;
  font-family: var(--secondary-font);
  font-weight: 700;
  height: 42px;
  align-items: center;
  justify-content: center;
}

.gamePreview .pressReviews.aliceReviews .headerTitle {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.gamePreview .pressReviews.aliceReviews .headerTitle .subTitle {
  flex: 0 1 452px;
  max-width: 452px;
  margin-bottom: 0;
  font-family: var(--secondary-font);
  font-size: 32px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.15;
}

.gamePreview .pressReviews.aliceReviews .headerTitle .starImg {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 6px;
  max-width: 48px;
  height: auto;
}

.gamePreview .pressReviews.aliceReviews .reviewQuoteRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.gamePreview .pressReviews.aliceReviews .reviewCard .reviewLogo {
  float: none;
  max-width: 220px;
  width: auto;
  height: auto;
  margin: 0;
}

.gamePreview .reviewCard.discoveryReview {
  background-color: #E5F3FE;
  border: none;
  border-radius: 20px;
  padding: 24px 22px 22px;
  display: block;
  font-family: var(--secondary-font);
  max-width: 578px;
}


/* Discovery logos in one brand row; text flows cleanly below on mobile */
.gamePreview .reviewCard.discoveryReview .reviewBrandRow {
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 180px;
  margin: 0 14px 10px 0;
}

.gamePreview .reviewCard.discoveryReview .reviewBrandRow .reviewLogo,
.gamePreview .reviewCard.discoveryReview .reviewBrandRow img {
  float: none;
  display: block;
  width: auto;
  max-width: 76px;
  height: auto;
  margin: 0;
}

.gamePreview .reviewCard.discoveryReview p img {
  float: left;
  width: auto;
  max-width: 87px;
  height: auto;
  margin: 0 12px 8px 0;
}

.gamePreview .reviewCard.discoveryReview .reviewBtn {
  clear: both;
}
.gamePreview .discoveryIntro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.gamePreview .discoveryLogos {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.gamePreview .discoveryBanner {
  display: block;
  width: 76px;
  height: auto;
  flex-shrink: 0;
}

.gamePreview .discoveryLogo {
  display: block;
  width: 59px;
  height: auto;
  flex-shrink: 0;
}

.gamePreview .discoveryIntro p {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}



.gamePreview .reviewCard.discoveryReview h4 {
  font-size: var(--textBodyMedium);
  font-weight: 700;
  color: #282A2C;
  margin: 16px 0 12px;
  line-height: 1.3;
}

.gamePreview .reviewCard.houstonReview h4 {
  font-size: var(--textBodyMedium);
  font-weight: 700;
  color: var(--textBlack);
  margin: 4px 0 10px;
  line-height: 1.3;
}

.gamePreview .reviewCard.discoveryReview p:last-of-type,
.gamePreview .reviewCard.houstonReview p:last-of-type {
  margin-bottom: 0;
}

.gamePreview .reviewCard.discoveryReview .reviewBtn {
  background-color: #3F93FA;
  border-color: #3F93FA;
  padding: 10px 28px;
  min-width: 262px;
}

/* Keep the long-review buttons lower after their Review Source is hidden. */
.gamePreview .reviewCard.discoveryReview .reviewBtn,
.gamePreview .reviewCard.houstonReview .reviewBtn {
  margin-top: 70px;
}

.gamePreview .houstonBanner {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 42px;
}

.gamePreview .reviewByline {
  color: var(--textHeading);
  margin-bottom: 10px;
}

/*profile style*/
.profileBanner {
  background-image: url(../images/profile-banner-mobile.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding: 30px 0 60px;
}
.productBanner,.profileBanner{
  /* min-height: 260px; */
  min-height: 248px;
}

.profileBanner.settingsBanner .heroBannerContent {
  text-align: left;
  max-width: 100%;
}

.profileBanner.settingsBanner + .middleSection {
  position: relative;
  z-index: 1;
}

.profileBanner.settingsBanner + .middleSection:has(.orderConfirm),
.checkoutPage .profileBanner.settingsBanner + .middleSection {
  margin-top: min(-100px, calc(100vw * -130 / 1920));
  padding-top: 36px;
  overflow: visible;
}

.productBanner .bannerSubTitle {
  font-weight: 600;
}

/*account setting style*/
.accountSetting {
  display: flex;
  flex-direction: column;
  gap: 30px
}

.accountSetting .cardBox {
  border: 3px solid transparent;
  border-radius: var(--radius-xl);
}

.accountSetting .cardBox:hover {
  border-color: var(--textLink);
}

.accountSetting .card {
  display: flex;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 10px 0;
}

.accountSetting .card .left-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.accountSetting .card .icon-box {
  min-width: 50px;
  min-height: 50px;
  background: #8C8C8C;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 28px;
}

.accountSetting .card .icon-box img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.accountSetting .card .edit-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--surfaceBase);
  color: var(--surfaceInverse);
  border-radius: 50%;
  right: -2px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.accountSetting .card .arrow {
  font-size: 45px;
  color: var(--textHeading);
}

.accountSetting .card .h3Title {
  font-size: var(--textBodyLarge);
  margin-bottom: 0;
  color: var(--textHeading);
}

.accountSetting .card p {
  font-size: var(--textBodyMedium);
  margin-bottom: 0;
  color: var(--textMute);
}

/* ------------------------------- */
.userInformation {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.userInformation .cardBox {
  flex: 1;
  padding: 22px 20px;
}

.userInformation .h3Title {
  font-size: var(--textBodyLarge);
  color: var(--textLink);
  margin-bottom: 30px;
  font-weight: 700;
}

.userInformation .sidebarImg {
  max-width: 470px;
}

.loginRegisterPage .profileBanner.settingsBanner {
  text-align: center;
}

.loginRegisterPage .profileBanner.settingsBanner .heroBannerContent {
  text-align: center;
  margin: 0 auto;
}

.loginRegisterPage .userInformation {
  align-items: center;
}

.loginRegisterPage .authTabs {
  display: flex;
  gap: 56px;
  margin-bottom: 28px;
}

.loginRegisterPage .authTab {
  flex: 1;
  min-height: 48px;
  padding: 12px 20px;
  border: 2px solid var(--btnSecondary);
  border-radius: 999px;
  background-color: var(--surfaceBase);
  color: var(--btnSecondary);
  font-family: var(--base-font);
  font-size: var(--textButtonMedium);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.loginRegisterPage .authTab.active {
  background-color: var(--btnSecondary);
  color: var(--textInverse);
}

.loginRegisterPage .authPanels {
  display: grid;
}

.loginRegisterPage .authPanel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.loginRegisterPage .authPanel.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.loginRegisterPage .formContainer .formInput {
  border-color: var(--borderActiveColor);
}

.loginRegisterPage .formContainer .btnRow .btn {
  width: 100%;
  max-width: none;
}

/* ------------------------------------------------- */
.orderInformation {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.orderInformation .h3Title {
  font-size: var(--textBodyLarge);
  margin-bottom: 20px;
  font-family: var(--base-font);
}

.orderInformation .cardBox {
  flex: 1;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  box-shadow: none;
}

.orderInformation .cartItemsCard {
  position: relative;
  overflow: visible;
}

.orderInformation .cartSummaryCard {
  justify-content: space-between;
  gap: 24px;
}

.orderInformation .cartOffBadge {
  position: absolute;
  top: -48px;
  right: -18px;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.orderInformation .cartOffShape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.orderInformation .cartOffText {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--textInverse);
  font-family: var(--secondary-font);
  line-height: 1;
  text-align: center;
}

.orderInformation .cartOffText strong {
  font-size: 22px;
  font-weight: 800;
  font-style: normal;
}

.orderInformation .cartOffText em {
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  margin-top: 2px;
}

.orderInformation .cartItem {
  font-family: var(--secondary-font);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
}

.orderInformation .cartItem .cartImg {
  max-width: 100px;
  border-radius: 8px;
}

.orderInformation .cartItem .itemHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: var(--space-xs);
}

.orderInformation .cartItem .itemTitle,
.orderInformation .cartItem .priceValue {
  font-size: var(--textBodySmall);
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.1;
  margin: 0;
  font-family: var(--secondary-font);
}

.orderInformation .cartItem .itemContent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* gap: 12px; */
  flex: 1;
  min-width: 0;
}

.orderInformation .cartItem .itemContent > p {
  font-size: 11px;
  font-weight: 500;
  color: #676767;
  font-family: var(--secondary-font);
  line-height: 143%;
  margin: 0;
  max-width: 42ch;
}

/* Cart version radios — Figma Download / Online Version */
.orderInformation .cartVersionOptions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 10px 0 8px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.orderInformation .cartVersionOption {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin: 0;
}

.orderInformation .cartVersionRadio {
  width: 12px;
  height: 12px;
  border: 0.81px solid #5D5D5D;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background: #fff;
}

.orderInformation .cartVersionRadio input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.orderInformation .cartVersionRadio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000000;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.orderInformation .cartVersionOption.is-checked .cartVersionRadio,
.orderInformation .cartVersionOption:has(input:checked) .cartVersionRadio {
  border-color: #5D5D5D;
}

.orderInformation .cartVersionOption.is-checked .cartVersionRadio::after,
.orderInformation .cartVersionOption:has(input:checked) .cartVersionRadio::after {
  transform: scale(1);
}

.orderInformation .cartVersionLabel {
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 500;
  color: #676767;
  line-height: 143%;
}

.orderInformation .cartVersionOption.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* OS dropdown — Figma Windows / macOS */
.orderInformation .cartOsSelect {
  position: relative;
  display: none;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
}

.orderInformation .cartOsSelect.is-visible {
  display: block;
}

.orderInformation .cartOsTrigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 148px;
  padding: 6px 10px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background: #fff;
  color: #676767;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.orderInformation .cartOsTrigger .cartOsIcon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.orderInformation .cartOsTrigger .fa-chevron-down {
  margin-left: auto;
  font-size: 11px;
  color: #676767;
}

.orderInformation .cartOsSelect.is-open .cartOsTrigger .fa-chevron-down {
  transform: rotate(180deg);
}

.orderInformation .cartOsMenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  min-width: 100%;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #E6E6E6;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 40, 80, 0.12);
  overflow: hidden;
}

.orderInformation .cartOsMenu li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 500;
  color: #676767;
}

.orderInformation .cartOsMenu li img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.orderInformation .cartOsMenu li.is-active,
.orderInformation .cartOsMenu li:hover {
  background: #E8F2FF;
}

.orderInformation .cartItem .itemContent .remveItem {
  font-size: 12px;
  font-weight: 500;
  color: #FF4D4D;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  position: static;
  width: fit-content;
  margin-top: 2px;
  text-decoration: none;
}

.orderInformation .cartItemsCard .cartItem .itemContent .remveItem {
  position: static;
}

.orderInformation .cartAnchor {
  font-family: var(--secondary-font);
  font-size: var(--textLabelSmall);
  font-weight: 500;
  color: var(--textLink);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
  text-decoration: none;
}

.orderInformation .orderSummaryRows {
  display: flex;
  flex-direction: column;
}

.orderInformation .order-price {
  font-family: var(--secondary-font);
  color: #676767;
  font-size: var(--textBodySmall);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.orderInformation .order-price span:last-child {
  color: #3B2F4A;
}

.orderInformation .divider {
  background-color: #AAAAAA;
  height: 1px;
  margin: 15px 0;
}

.orderInformation .btnRow {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
}

.orderInformation .btnRow .btn {
  width: 100%;
  height: 50px;
}

.orderInformation .totalPrice {
  color: var(--textHeading);
  font-size: 20px;
  font-weight: 700;
}

.orderInformation .totalPrice .priceTag {
  color: var(--textLink);
  font-size: 20px;
  font-weight: 700;
}

.orderInformation .payment-logo {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  column-gap: 16px;
  row-gap: 0;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.orderInformation .payment-logo li {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orderInformation .payment-logo img {
  display: block;
  width: 100%;
  max-width: 90px;
  height: 28px;
  max-height: 28px;
  object-fit: contain;
  object-position: center;
}

.orderInformation .payment-logo-item--american-express,
.orderInformation .payment-logo-item--discover {
  overflow: hidden;
}

.orderInformation .payment-logo-item--american-express img,
.orderInformation .payment-logo-item--discover img {
  max-width: none;
  height: 32px;
  max-height: 32px;
  transform-origin: center center;
}

.orderInformation .cardPayment {
  justify-content: start;
  gap: 10px;
  margin: 0;
}

.orderInformation .cardPayment img {
  max-width: 30px;
  max-height: 15px;
}

.cartInfo .cardBox {
  margin-bottom: 40px;
}

.cartInfo .terms-service {
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 400;
  color: var(--textLabelSmall);
  line-height: 1.4;
  text-align: center;
  margin-top: 20px;
}

.cartInfo .payPalPayment {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}

/* ------------------------------------------------- */
.productBanner.puzzleBanner {
  background-image: url(../images/home-banner-mobile.png);
}

.productBanner.puzzleBanner .imgWrap {
  max-width: 200px;
  margin: 0 auto;
}

.productBanner .heroBannerContent {
  padding-bottom: 0px;
}

.articleCard {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--surfaceBase);
  border: 1px solid var(--borderActiveColor);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  font-family: var(--secondary-font);
}

.articleCard p {
  color: var(--textHeading);
  font-size: var(--textBodySmall);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 18px;
}

.articleCard p:last-child {
  margin-bottom: 0;
}

.articleCard .articleSubTitle {
  color: var(--textLink);
  font-family: var(--secondary-font);
  font-size: var(--textBodyLarge);
  font-weight: 800;
  line-height: 1.2;
  margin: 28px 0 16px;
}

.einsteinQuote {
  max-width: 900px;
  margin: 36px auto;
  text-align: center;
}

.einsteinQuote blockquote {
  color: var(--surfaceInverse);
  font-family: var(--secondary-font);
  font-size: var(--textBodyLarge);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 12px;
}

.einsteinQuote figcaption {
  color: var(--surfaceInverse);
  font-family: var(--secondary-font);
  font-size: var(--textBodyLarge);
  font-weight: 800;
  font-style: italic;
}

.middleSection.puzzleSolvingBody .articleCard {
  padding: 40px 24px;
  background-color: var(--surfaceLow);
  border-color: var(--surfaceMedium);
}

.middleSection.puzzleSolvingBody .articleCard p {
  font-family: var(--secondary-font);
  margin-bottom: 12px;
  color: var(--textBlack);
  line-height: 130%;
}

.middleSection.puzzleSolvingBody .articleCard h6.h6Title {
  font-family: var(--base-font);
  font-weight: 600;
  font-size: 24px;
  color: var(--btnSecondaryActive);
}

.gamePreview .gamePreviewTop .rightCol.positionRelative {
  position: relative;
}

/* Review page styles */
.productBanner.reviewsHero {
  background-image: url(../images/reviewBannerMob.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

/* Skills Development banner — mobile */
.productBanner.skillBanner {
  background-image: url(../images/skill-banner-mob.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.reviewsPage .reviewsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
}

.reviewsPage .reviewsGameCard {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  font-family: var(--secondary-font);
  overflow-wrap: break-word;
  border-radius: var(--radius-xl);
  background-color: #EFF8FF;
  box-shadow: 0px 6px 0px 0px #66BDFF80;
}

.reviewsPage .reviewsCover {
  display: block;
  width: auto;
  max-width: 128px;
  max-height: 185px;
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
  border-radius: 8px;
  overflow: hidden;
}

.reviewsPage .reviewsExcerpt {
  flex: 1;
  margin-bottom: 16px;
}

.reviewsPage .reviewsGameTitle {
  font-family: var(--base-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--textHeading);
  line-height: 1.15;
  margin: 0 0 20px;
}

.reviewsPage .reviewQuoteRow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.reviewsPage .reviewQuoteRow.mb0 {
  margin-bottom: 0;
}

.reviewsPage .reviewQuoteRow:last-child {
  margin-bottom: 0;
}

.reviewsPage .reviewQuoteRow p {
  margin-bottom: 6px;
  font-size: var(--textBodySmall);
  line-height: 130%;
  color: var(--textBlack);
}

.reviewBottomLine {
  color: var(--textBlack);
  font-size: var(--textBodySmall);
}

.reviewsPage .reviewQuoteRow p:last-child {
  margin-bottom: 0;
}

.reviewsPage .reviewLogo {
  display: block;
  max-width: 72px;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.reviewsPage .reviewLogo.superKids {
  max-width: 110px;
}

.reviewsPage .reviewLogo.awardSeal {
  max-width: 88px;
}

.reviewsPage .reviewSource {
  font-size: var(--textBodySmall);
  color: var(--textBlack);
  font-weight: 700;
}

.reviewsPage .reviewSource span {
  display: block;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow {
  display: block;
  grid-template-columns: none;
  column-gap: 0;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow::after {
  content: "";
  display: table;
  clear: both;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow .reviewLogo.nytWordmark {
  float: left;
  display: block;
  width: 230px;
  max-width: 48%;
  height: auto;
  margin: 0 14px 8px 0;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow > div {
  display: block;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow > p,
.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow > div > p {
  margin-bottom: 12px;
}

.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow > p:last-child,
.reviewsPage .reviewsGameCard .reviewQuoteRow.aliceQuoteRow > div > p:last-child {
  margin-bottom: 0;
}

.reviewsPage .reviewsMoreBtn {
  width: fit-content;
  min-width: 180px;
  margin: 0 auto;
  padding: 10px 24px;
  min-width: 262px;
  height: 42px;
  margin-top: 16px;
}

/* Games page — Alice + Magic Flute bundle (Figma 587×214) */
.gameBundlesContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 40px 0 30px;
}

.gameBundle {
  width: 100%;
  max-width: 587px;
  min-height: 214px;
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #FFF9D8;
  border-radius: 16px;
  box-sizing: border-box;
  border: 1px solid var(--textWarning);
  overflow: hidden;
}

.gameBundle .bundleGames {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--btnSecondary) #ffe9a8;
}

.gameBundle .bundleGames::-webkit-scrollbar {
  height: 6px;
}

.gameBundle .bundleGames::-webkit-scrollbar-track {
  background: #ffe9a8;
  border-radius: 999px;
}

.gameBundle .bundleGames::-webkit-scrollbar-thumb {
  background: var(--btnSecondary);
  border-radius: 999px;
}

.gameBundle .bundleCover {
  display: block;
  width: 110px;
  height: 160px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(59, 47, 74, 0.12);
  flex: 0 0 110px;
}

.gameBundle .bundlePlus {
  font-family: var(--secondary-font);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--textBlack);
  flex: 0 0 auto;
}

.gameBundle .bundleOffer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  width: 208px;
  min-width: 208px;
}

.gameBundle .bundleOffBadge {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.gameBundle .bundleOffShape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gameBundle .bundleOffText {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--textInverse);
  font-family: var(--secondary-font);
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.gameBundle .bundleOffText strong {
  font-size: 20px;
  font-weight: 800;
  font-style: normal;
}

.gameBundle .bundleOffText em {
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  margin-top: 2px;
}

.gameBundle .bundleBuyBtn {
  width: 100%;
  min-height: 44px;
  padding: 10px 28px;
  font-size: 18px;
  max-width: none;
  flex-shrink: 0;
}

.gameBundle .bundlePrice {
  margin: 0;
  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--btnSecondary);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

/* Team page — Figma 3-column credits + Our Story */
.teamsPage .teamCreditsPanel {
  margin-bottom: 38px;
}

.teamsPage .teamCreditsCarousel {
  position: relative;
}

.teamsPage .teamCreditsViewport {
  width: 100%;
  min-width: 0;
}

.teamsPage .teamCreditsNav {
  display: none;
}

.teamsPage .teamCreditsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  min-width: 0;
}

.teamsPage .teamCreditCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: 100%;
}

.teamsPage .teamCreditCard .cardHeader {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  overflow: visible;
}

.teamsPage .teamCreditTitle {
  color: var(--textHeading);
  line-height: 115%;
  margin: 0 0 6px;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
}
.teamsPage .teamCreditTitle span:first-child{
  font-size: clamp(22px, 6vw, 32px);
  font-family: var(--base-font);
  line-height: 115%;
}
.teamsPage .teamCreditTitle span:nth-child(2){
  font-size: clamp(26px, 7.5vw, 40px);
  font-family: var(--base-font);
  line-height: 115%;
}

.teamsPage .teamCreditTitle span {
  display: block;
  font-size: clamp(26px, 7.5vw, 40px);
  overflow: visible;
}

.teamsPage .teamCreditSubtitle {
  font-family: var(--base-font);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 600;
  color: var(--textHeading);
  line-height: 115%;
  margin-bottom: 0px;
}

.teamsPage .creditList {
  width: 100%;
  text-align: center;
  min-width: 0;
}

.teamsPage .creditRole {
  font-family: var(--base-font);
  font-size: 16px;
  font-weight: 600;
  color: #0265F5;
  line-height: 100%;
  margin: 0 0 4px;
}

.teamsPage .creditList p {
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--textHeading);
  line-height: 1.2;
  margin: 0 0 2px;
}

/* All game credits — mobile DOM order; desktop uses grid areas under covers */
.teamsPage .teamCreditsAll {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 8px;
  width: 100%;
}

.teamsPage .teamStoryPanel {
  margin-bottom: 10px;
}

.teamsPage .teamStoryPanel .h3Title {
  margin-bottom: 16px;
}

.teamsPage .teamStoryPanel p {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: 400;
  /* color: var(--textBody); */
  color: var(--textBlack);
  line-height: 150%;
  margin-bottom: 14px;
}

.teamsPage .teamStoryPanel p:last-child {
  margin-bottom: 0;
}

.teamsPage .teamStoryPanel strong {
  font-weight: 700;
}

/* Team credits carousel — mobile/tablet only (< 992px): title + image slide; credits stay put */
@media screen and (max-width: 991px) {
  .teamsPage .teamCreditsPanel {
    overflow: visible;
  }

  .teamsPage .teamCreditsCarousel {
    display: block;
    position: relative;
    padding: 10px 40px 0;
    overflow: hidden;
  }

  .teamsPage .teamCreditsViewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-top: 8px;
  }

  .teamsPage .teamCreditsGrid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: translateX(0);
    transition: transform 0.35s ease;
    will-change: transform;
  }

  .teamsPage .teamCreditCard {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  .teamsPage .gameImgBox {
    width: min(100%, 260px);
    margin: 0 auto 8px;
  }

  /* Credits stay below carousel — single column in web reading order */
  .teamsPage .teamCreditsAll {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 12px;
    margin-top: 4px;
    padding: 0 4px;
  }

  .teamsPage .creditList p {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .teamsPage .teamCreditsNav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 62%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--btnSecondary);
    color: var(--textInverse);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 101, 245, 0.25);
  }

  .teamsPage .teamCreditsPrev {
    left: 0;
  }

  .teamsPage .teamCreditsNext {
    right: 0;
  }

  .teamsPage .teamCreditsNav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
  }

  .teamsPage .teamCreditsNav:not(:disabled):hover {
    background-color: var(--btnSecondaryActive);
  }
}
/* Order Confirmation */

.orderConfirm {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 28px 36px;
}

.orderConfirmLead {
  font-family: var(--secondary-font);
  font-size: var(--textBodyMedium);
  color: var(--textBody);
  margin-bottom: 24px;
}

.orderConfirm .h3Title {
  font-size: var(--textBodyLarge);
  margin-bottom: 16px;
}

.orderConfirmProduct {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--shadowColor);
}

.orderConfirmBundle {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 8px;
}

.orderConfirmList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orderConfirmList li {
  margin-bottom: 4px;
}

.orderConfirmList a {
  color: var(--textLink);
  font-weight: 700;
  text-decoration: none;
}

.orderConfirmList a:hover {
  text-decoration: underline;
}

.orderConfirmPrice {
  font-family: var(--base-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--btnSecondary);
  margin: 0;
  white-space: nowrap;
}

.licenseKeysBox {
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}

.licenseKeysHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.licenseKeysHead .h3Title {
  margin: 0;
}

.licenseKeyIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--btnWarning);
  color: var(--textHeading);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.licensePlatform {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textMute);
  background-color: var(--surfaceMedium);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
}

.licenseKeyCard {
  background-color: var(--surfaceBase);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.licenseKeyCard .itemTitle {
  font-family: var(--base-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 8px;
}

.licenseKeyLabel {
  font-family: var(--secondary-font);
  font-size: var(--textLabelSmall);
  color: var(--textMute);
  margin-bottom: 8px;
}

.licenseSaveNote {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textBody);
  line-height: 1.5;
  margin-bottom: 16px;
}

.orderConfirmGame {
  margin-top: 12px;
}

.orderConfirmGameName {
  font-family: var(--base-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 4px;
}

.orderConfirmFiles {
  list-style: disc;
  margin: 0 0 0 22px;
  padding: 0;
}

.orderConfirmFiles li {
  margin-bottom: 2px;
}

.orderConfirmFiles a {
  color: var(--textLink);
  font-weight: 600;
  text-decoration: none;
}

.orderConfirmFiles a:hover {
  text-decoration: underline;
}

.licenseKeyRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.licenseKeyValue {
  flex: 1;
  min-width: 0;
  font-family: var(--secondary-font);
  color: var(--textHeading);
  font-size: var(--textBodySmall);
  background-color: var(--surfaceBase);
  border: 2px solid var(--borderColor);
  border-radius: var(--radius-xl);
  padding: 10px 16px;
  outline: none;
}

.licenseCopyBtn {
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 18px;
  min-width: 120px;
}

.licenseRecommend {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textHeading);
  background-color: #e8f8ee;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 8px 0 16px;
}

.licenseDownloads {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.licenseDownload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--textLink);
  font-weight: 700;
  text-decoration: none;
}

.licenseDownload:hover {
  text-decoration: underline;
}

.orderConfirmTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.orderConfirmTable th,
.orderConfirmTable td {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--shadowColor);
}

.orderConfirmTable th {
  font-weight: 700;
  color: var(--textHeading);
  width: 40%;
}

.orderConfirmTable td {
  color: var(--textBody);
}

.orderConfirmTable tr:nth-child(odd) {
  background-color: var(--surfaceLow);
}

.orderConfirmLink {
  color: var(--textLink);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
  margin-top: 8px;
}

.orderConfirmLink:hover {
  text-decoration: underline;
}

/* Order History */
.orderHistory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.orderHistoryCard.cardBox {
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.orderHistoryTop,
.orderHistoryMeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.orderHistoryNumber {
  font-family: var(--base-font);
  font-size: var(--textBodyLarge);
  font-weight: 700;
  color: var(--textHeading);
  margin: 0;
}

.orderHistoryStatus {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  font-weight: 700;
  color: #1f8a4c;
  margin: 0;
}

.orderHistoryMeta {
  margin-top: 8px;
}

.orderHistoryDate {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textBody);
  margin: 0;
}

.orderHistoryTotal {
  font-family: var(--base-font);
  font-size: var(--textBodyMedium);
  font-weight: 800;
  color: var(--btnSecondary);
  margin: 0;
  white-space: nowrap;
}

.orderHistoryDetails {
  display: block;
  width: fit-content;
  margin: 16px auto 0;
  color: var(--textLink);
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  font-weight: 700;
  text-decoration: none;
}

.orderHistoryDetails:hover {
  text-decoration: underline;
}

.orderHistoryKey {
  font-family: var(--secondary-font);
  font-size: var(--textLabelSmall);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--textMute);
  background-color: var(--surfaceBase);
  border-radius: var(--radius-md);
  margin: 20px 0 0;
  padding: 12px 16px;
  word-break: break-word;
}

/* View Order Details */
.orderDetailsLead {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textBody);
  line-height: 1.5;
  margin-bottom: 24px;
}

.orderDetailsLead strong {
  color: var(--textHeading);
}

.orderDetailsTable th,
.orderDetailsTable td {
  width: auto;
}

.orderDetailsTable thead th {
  font-size: var(--textLabelSmall);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.orderDetailsTable td:last-child,
.orderDetailsTable th:last-child,
.orderDetailsTable thead th:last-child {
  text-align: right;
  white-space: nowrap;
}

.orderDetailsTable a {
  color: var(--textLink);
  font-weight: 700;
  text-decoration: none;
}

.orderDetailsTable a:hover {
  text-decoration: underline;
}

.orderDetailsQty {
  color: var(--textMute);
  font-weight: 600;
  margin-left: 6px;
}

.orderDetailsGrand {
  color: var(--btnSecondary);
  font-family: var(--base-font);
  font-size: var(--textBodyMedium);
}

.orderDetails .orderConfirmProduct {
  border-bottom: 0;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.orderDetailsBilling {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.orderDetailsAddress {
  background-color: var(--surfaceLow);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.orderDetailsAddressTitle {
  font-family: var(--base-font);
  font-size: var(--textBodyMedium);
  font-weight: 700;
  color: var(--textHeading);
  margin-bottom: 10px;
}

.orderDetailsAddress p {
  font-family: var(--secondary-font);
  font-size: var(--textBodySmall);
  color: var(--textBody);
  margin-bottom: 4px;
}

.orderDetailsAddress p:last-child {
  margin-bottom: 0;
}
.middleSection.reviewsGamePage .user-review .review-content p{
font-size: 20px;
font-weight: 400;
font-family: var(--base-font);
}
.gamePreview .reviewCard p{
  font-family: var(--secondary-font);
  font-size: 20px;
}
.gamePreview .reviewCard p strong {
  display: inline-block;
  font-weight: 700;
  font-family: var(--secondary-font);
  font-size: 20px;
}
.gamePreview .reviewCard p strong.mb-20{
  margin: 20px 0px;
}
/* Skills Development page */
.skillsDevBody .skillsDevIntro {
  margin-bottom: 28px;
}

.skillsDevBody .skillsDevList {
  background-color: var(--cardBg);
  border-radius: var(--radius-lg);
  padding: 28px 24px 30px;
  margin: 0 auto;
  max-width: 900px;
}

.skillsDevBody .skillsDevList .subTitle {
  font-family: var(--secondary-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--textHeading);
  margin: 0 0 18px;
  padding: 0;
  text-transform: none;
}

.skillsDevBody .skillsDevList ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.skillsDevBody .skillsDevList ul li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--secondary-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #5B5B5B;
}

.skillsDevBody .skillsDevList ul li:last-child {
  margin-bottom: 0;
}

.skillsDevBody .skillsDevList ul li i {
  color: #159F4A;
  font-size: 18px;
  line-height: 1.35;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Cart Licensing Conflict Notices & Controls */
.kmg-cart-conflicts-banner {
  background: linear-gradient(135deg, #fff7ed 0%, #fef2f2 100%);
  border: 1.5px solid #f87171;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
  font-family: var(--secondary-font);
}

.kmg-conflict-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.kmg-conflict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fee2e2;
  color: #dc2626;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.kmg-conflict-title-wrap {
  flex: 1;
}

.kmg-conflict-title {
  color: #b91c1c;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.kmg-conflict-subtitle {
  color: #7f1d1d;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}

.kmg-conflict-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kmg-conflict-item {
  position: relative;
  padding-left: 20px;
  color: #991b1b;
  font-size: 13.5px;
  line-height: 1.5;
}

.kmg-conflict-item::before {
  content: "•";
  position: absolute;
  left: 6px;
  color: #dc2626;
  font-size: 16px;
  line-height: 1;
}

.kmg-conflict-game-name {
  color: #7f1d1d;
  font-weight: 700;
}

.kmg-conflict-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #fca5a5;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
}

.kmg-conflict-footer i {
  color: #dc2626;
}

/* Conflicted Items & Badges */
.cartItem.has-license-conflict {
  border: 1.5px solid #f87171 !important;
  background-color: #fffaf9 !important;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.06);
}

.cartBundleItem.has-license-conflict {
  border: 1.5px solid #f87171 !important;
  background-color: #fffaf9 !important;
}

.kmg-conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 10px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.kmg-conflict-badge.is-already-owned {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

/* Disabled Checkout Button & Hint */
.kmg-checkout-btn-wrap {
  width: 100%;
}

.kmg-checkout-btn.is-disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #ffffff !important;
  width: 100%;
}

.kmg-checkout-disabled-hint {
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 600;
  margin: 10px 0 0 0;
  text-align: center;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Playthrough Page Styles */
.playthroughPage .playthroughSection {
  padding: 40px 0 80px;
}

.playthroughGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.playthroughCard {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.playthroughCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
}

.playthroughImageWrapper {
  text-align: center;
  margin-bottom: 18px;
}

.playthroughCoverImg {
  border-radius: 14px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.playthroughCardTitle {
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #1e293b;
  text-align: center;
  margin: 0 0 20px 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playthroughActivitiesList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.playthroughActivityItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f0f8ff;
  border: 1px solid #b3d9ff;
  border-radius: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.playthroughActivityItem:hover {
  background-color: #e3f2fd;
  border-color: #90caf9;
}

.playthroughActivityTitle {
  font-family: var(--secondary-font);
  font-size: 14.5px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}

.playthroughPlayBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #16a34a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
  padding: 0;
}

.playthroughPlayBtn:hover {
  transform: scale(1.1);
  background: #15803d;
  box-shadow: 0 4px 10px rgba(21, 128, 61, 0.45);
}

.playthroughPlayBtn:active {
  transform: scale(0.95);
}

/* Video Modal Dialog */
.kmg-video-dialog {
  border: none;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  max-width: 960px;
  width: 92%;
  overflow: visible;
  position: fixed;
  inset: 0;
  margin: auto;
}

.kmg-video-dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
}

.kmg-video-dialog-panel {
  background: #0f172a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.kmg-video-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #1e293b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kmg-video-dialog-title {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
  margin: 0;
  line-height: 1.3;
}

.kmg-video-dialog-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kmg-video-dialog-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.kmg-video-dialog-body {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kmg-video-dialog-body video,
.kmg-video-dialog-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.kmg-video-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #e2e8f0;
  font-family: var(--secondary-font);
  font-size: 14px;
}

.kmg-video-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: kmgSpin 0.9s linear infinite;
}

@keyframes kmgSpin {
  to {
    transform: rotate(360deg);
  }
}

body.kmg-modal-open {
  overflow: hidden;
}

/* Responsive Playthrough */
@media (max-width: 991px) {
  .playthroughGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .playthroughGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .playthroughCard {
    padding: 18px;
  }
  .playthroughCardTitle {
    min-height: auto;
    font-size: 18px;
  }
  .kmg-video-dialog {
    width: 96%;
  }
}