.games-page { color: #344139; }
.games-hero { padding-block: clamp(50px, 8vw, 100px) clamp(30px, 5vw, 65px); }
.games-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(24px, 6vw, 80px); }
.games-hero .catalog-hero-h1 { margin-block: 16px; }
.games-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.games-page :is(.main-button,.white-button) { display: inline-flex; min-height: 50px; padding: 10px 25px; align-items: center; justify-content: center; margin: 0; }
.games-section { padding-block: clamp(36px, 6vw, 78px); scroll-margin-top: 110px; }
.games-section-heading { max-width: 860px; margin: 0 auto 35px; text-align: center; }
.games-section-heading h2 { font: 400 clamp(28px, 2.7vw, 36px)/1.28 "Playfair Display", Georgia, serif; margin: 0; text-wrap: balance; }
.games-final .games-section-heading { margin-bottom: 20px; }
.games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.games-card { background: #fafbf8; border-radius: var(--cobidu-card-radius, 16px); overflow: hidden; }
.games-card-body,.games-steps > li,.games-uses > article { padding: 22px; }
.games-card h3 { font: 600 20px/1.3 Inter, sans-serif; margin: 0 0 10px; }
.games-card p,.games-final p { font: 400 16px/1.7 Inter, sans-serif; margin: 0; }
.games-steps { padding: 0; counter-reset: game-step; list-style: none; }
.games-steps > li { counter-increment: game-step; }
.games-steps > li::before { content: counter(game-step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffeadf; color: #a83a1b; font-weight: 700; margin-bottom: 14px; }
.games-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.games-final { text-align: center; }
.games-final p { max-width: 660px; margin: 0 auto 22px; }
.games-console { width: min(100%, 390px); justify-self: center; padding: clamp(14px, 3vw, 25px); border: 3px solid #272039; border-radius: 32px; background: #6948bc; box-shadow: 0 20px 44px #29204336; }
.games-display { background: #232044; color: #fff; border: 2px solid #a5a0dd; border-radius: 18px; padding: clamp(14px, 3vw, 25px); }
.games-display-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.games-display-top span { border-radius: 20px; background: #bcefe4; color: #193d39; padding: 4px 9px; font-size: 12px; }
.games-room-code { display: block; font: 700 clamp(25px, 5vw, 42px)/1.2 Inter, sans-serif; letter-spacing: .06em; color: #bcefe4; margin: 4px 0 20px; }
.games-score { display: grid; grid-template-columns: 1fr 24px; gap: 4px; font-size: 13px; margin-top: 10px; }
.games-score i { grid-area: 2 / 1; width: 100%; height: 6px; background: #fff3; border-radius: 6px; overflow: hidden; }
.games-score i::after { content: ""; display: block; width: var(--score); height: 100%; background: #ff9b72; border-radius: inherit; transform-origin: left; }
.games-score:last-child i::after { background: #c3a7fc; }
.games-console-controls { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.games-console-controls span { margin-right: auto; display: grid; place-items: center; width: 38px; height: 38px; background: #e9ddff; color: #35225d; border-radius: 50%; font-size: 23px; }
.games-console-controls i { width: 15px; height: 15px; border-radius: 50%; background: #ffc66b; }
.games-console-controls i:last-child { background: #ff87ab; }
.games-preview { min-height: 165px; display: grid; place-items: center; padding: 15px; background: #e5ddfb; color: #282043; font-family: Inter, sans-serif; }
.games-preview--tabu { background: #dbeaff; }
.games-preview--alfapetek { background: #ccece2; }
.games-preview--quiz { background: #ffead1; }
.games-word { display: grid; gap: 8px; text-align: center; border-radius: 12px; padding: 16px; background: #fff; box-shadow: 0 5px 0 #7453b0; }
.games-word s { color: #934465; font-size: 12px; }
.games-letter-ring { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; background: #fff6; position: relative; }
.games-letter-ring span { position: absolute; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #fff; font-size: 11px; transform: rotate(calc(45deg * var(--index))) translateY(-50px) rotate(calc(-45deg * var(--index))); }
.games-letter-ring span:nth-child(3) { background: #7049bf; color: #fff; }
.games-honeycomb { display: grid; grid-template-columns: repeat(6, 20px); gap: 3px; }
.games-honeycomb span { grid-column: span 2; display: grid; place-items: center; height: 39px; background: #ffe4a8; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); font-weight: 700; font-size: 12px; }
.games-honeycomb span:nth-child(1),.games-honeycomb span:nth-child(6) { grid-column: 2 / span 2; }
.games-honeycomb span:nth-child(4) { background: #236f60; color: #fff; }
.games-duel { display: flex; align-items: center; gap: 10px; }
.games-duel span { display: grid; text-align: center; gap: 3px; padding: 12px 20px; color: #fff; background: #236f60; border-radius: 10px; }
.games-duel span:last-child { background: #6545b0; }
.games-duel b { font-size: 24px; }
.games-options { display: grid; grid-template-columns: repeat(2, 54px); gap: 8px; }
.games-options span { background: #fff; border-radius: 8px; text-align: center; padding: 8px 4px; font-weight: 700; }
.games-options span:nth-child(2) { background: #236f60; color: #fff; }
.games-word small { color: #236f60; font-weight: 700; }
.games-timer,.games-duel-score { display: grid; font-variant-numeric: tabular-nums; }
.games-timer i,.games-duel-score i { grid-area: 1 / 1; font-style: normal; }
.games-timer i:not(:last-child),.games-duel-score i:first-child { visibility: hidden; }
.games-honeycomb span:nth-child(5) { background: #6545b0; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .games-console.is-playing { animation: games-console-in .7s ease both; }
  .is-playing .games-score i::after { animation: games-score-in .85s .3s ease-out both; }
  .is-playing .games-word { animation: games-pop .55s ease-out both; }
  .is-playing .games-word small { animation: games-reveal .35s .9s ease-out both; }
  .is-playing .games-letter-ring span:nth-child(-n+2) { animation: games-letter-turn .65s calc(var(--index) * .65s) ease both; }
  .is-playing .games-letter-ring span:nth-child(3) { animation: games-letter-current .35s 1.3s ease both; }
  .is-playing .games-timer i:first-child { animation: games-value .65s steps(1) both; }
  .is-playing .games-timer i:nth-child(2) { animation: games-value .65s .65s steps(1) both; }
  .is-playing .games-timer i:last-child { animation: games-reveal .25s 1.3s ease-out both; }
  .is-playing .games-honeycomb span:nth-child(4) { animation: games-claim .48s .38s ease-out both; }
  .is-playing .games-honeycomb span:nth-child(5) { animation: games-claim .48s .95s ease-out both; }
  .is-playing .games-duel > span:first-child { animation: games-pop .55s .8s ease-out both; }
  .is-playing .games-duel-score i:first-child { animation: games-value .8s steps(1) both; }
  .is-playing .games-duel-score i:last-child { animation: games-reveal .25s .8s ease-out both; }
  .is-playing .games-options span:nth-child(2) { animation: games-answer .65s .55s ease-out both; }
  .is-playing .games-options b { display: inline-block; animation: games-reveal .25s .95s ease-out both; }
}
@keyframes games-console-in { from { opacity: .6; transform: translateY(14px) rotate(-3deg); } }
@keyframes games-score-in { from { transform: scaleX(0); } }
@keyframes games-pop { 0% { opacity: .55; transform: scale(.83); } 60% { transform: scale(1.07); } }
@keyframes games-reveal { from { opacity: 0; transform: translateY(4px); } }
@keyframes games-value { from { visibility: visible; } to { visibility: hidden; } }
@keyframes games-letter-turn { 0%, 100% { background: #fff; color: #282043; } 30%, 75% { background: #7049bf; color: #fff; } }
@keyframes games-letter-current { from { background: #fff; color: #282043; } }
@keyframes games-claim { from { background: #ffe4a8; color: #282043; } 55% { transform: scale(1.12); } }
@keyframes games-answer { from { background: #fff; color: #282043; } 55% { transform: scale(1.09); } }
@media (max-width: 991px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .games-hero-grid,.games-grid { grid-template-columns: minmax(0, 1fr); } }