/* Games extend the Evenicode event identity: a tactile, full-frame game line-up. */
.games-page { background: var(--paper); }
.games-page h1, .games-page h2, .games-page h3, .home-games h2 { font-family: 'Barlow Condensed', sans-serif; }
.games-page h1, .games-page h2, .home-games h2 { font-weight: 800; line-height: .94; letter-spacing: -.025em; }
.games-page h3 { line-height: 1.05; }
.site-header .desktop-nav { gap: clamp(15px,2vw,30px); }
.desktop-nav a[aria-current=page] { color: var(--violet); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.games-page a:focus-visible, .games-page button:focus-visible, .games-page summary:focus-visible, .home-games a:focus-visible, .home-games button:focus-visible { outline: 3px solid var(--coral); outline-offset: 5px; }
.button-lime { background: var(--green); color: var(--ink); }
.button-lime:hover { background: white; }
.home-games { padding-block: 26px 78px; }
.play-stage { display: grid; grid-template-columns: 1.06fr .85fr .72fr; align-items: center; gap: 34px; padding: 48px; border-radius: 36px; color: white; background: var(--violet); }
.play-intro { grid-column: 1; grid-row: 1; }
.play-screen { grid-column: 2; grid-row: 1; }
.play-choices { grid-column: 3; grid-row: 1; }
.play-intro .eyebrow { color: var(--green); font-size: 10px; line-height: 1.7; }
.home-games h2 { font-size: clamp(42px,4.5vw,70px); margin: 22px 0; }
.home-games h2 span { color: var(--green); }
.play-intro > p:not(.eyebrow) { max-width: 310px; color: #efe8ff; font-size: 13px; line-height: 1.9; }
.play-intro .button { margin-top: 26px; padding-inline: 22px; }
.play-note { display: block; margin-top: 22px; font: 600 25px 'Caveat',cursive; color: var(--green); transform: rotate(-4deg); }
.play-screen { min-width: 0; padding: 10px; border-radius: 26px; background: #fff; color: var(--ink); box-shadow: 0 15px 30px #31126430; }
.play-art { display: flex; align-items: center; justify-content: center; height: 360px; border-radius: 18px; padding: 12px; }
.play-art img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.play-screen-caption { display: grid; gap: 8px; padding: 15px 5px 10px; font-size: 10px; }
.play-screen-caption > span { color: var(--muted); }
.play-screen-caption a { font-weight: 800; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.play-choice-label { font-size: 9px; font-weight: 750; letter-spacing: .09em; margin-bottom: 16px; color: #e5d8ff; }
.play-choices [role=group] { display: grid; gap: 10px; }
.play-pick { width: 100%; display: grid; text-align: left; gap: 6px; padding: 15px 16px; border: 1px solid #ffffff45; border-radius: 17px; color: white; background: transparent; transition: background .18s,transform .18s; }
.play-pick:hover { background: #ffffff18; transform: translateX(-3px); }
.play-pick[aria-pressed=true] { background: var(--green); color: var(--ink); border-color: var(--green); }
.play-pick-brand { font-size: 8px; letter-spacing: .08em; font-weight: 800; }
.play-pick > span:not(.play-pick-brand) { font-size: 13px; font-weight: 800; line-height: 1.35; }
.play-pick small { font-size: 9px; line-height: 1.5; opacity: .85; }
.play-all { display: block; padding: 18px 0 0; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; line-height: 1.5; }
.game-theme-whisk { background: #fff3b0; }
.game-theme-bunny { background: #fce5df; }
.game-theme-dance { background: #e8ddfa; }
.game-theme-nesh, .game-theme-skintific { background: #e0f4f2; }
.games-hero { padding: 65px 0 60px; background: var(--lavender); border-radius: 0 0 44px 44px; overflow: hidden; }
.games-hero-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 38px; align-items: center; }
.games-hero .eyebrow { font-size: 10px; margin-bottom: 24px; }
.games-hero h1 { font-size: clamp(96px,10.2vw,158px); line-height: .82; letter-spacing: -.035em; }
.games-hero h1 span { color: var(--violet); }
.games-hero-copy > p:not(.eyebrow) { margin-top: 28px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.games-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 25px; }
.games-hero-actions .text-link { font-size: 12px; }
.games-hero-note { display: inline-block; font: 700 29px 'Caveat', cursive; color: var(--violet); margin-top: 28px; transform: rotate(-4deg); }
.games-hero-art { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 9px; padding-block: 30px 5px; }
.hero-game-poster { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 9px 9px 15px; background: white; border-radius: 21px; box-shadow: 0 14px 20px #42217015; transition: transform .25s; }
.hero-game-poster img { height: 315px; width: 100%; object-fit: contain; background: var(--paper); border-radius: 13px; }
.hero-game-poster span { text-align: center; font-weight: 800; font-size: 8px; letter-spacing: .07em; }
.hero-game-poster-0 { transform: rotate(-8deg) translateY(28px); }
.hero-game-poster-1 { transform: translateY(-22px); z-index: 1; }
.hero-game-poster-2 { transform: rotate(8deg) translateY(28px); }
.hero-game-poster:hover { transform: translateY(-15px) rotate(0); }
.games-hero-art > p { grid-column: 1/-1; text-align: center; margin-top: 58px; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.games-library { padding-block: 85px; scroll-margin-top: 25px; }
.games-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 35px; }
.games-section-heading h2 { font-size: clamp(45px,5vw,76px); }
.games-section-heading .eyebrow { margin-bottom: 15px; font-size: 10px; }
.games-section-heading > p { font-size: 13px; line-height: 1.9; color: var(--muted); padding-bottom: 5px; }
.game-library-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.game-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.game-filter { padding: 13px 17px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 750; color: var(--ink); background: white; min-height: 44px; }
.game-filter span { margin-left: 5px; opacity: .65; }
.game-filter[aria-pressed=true] { background: var(--ink); color: white; border-color: var(--ink); }
.game-search { flex: 0 1 235px; }
.game-search input { width: 100%; min-height: 46px; border: 1px solid var(--line); padding: 13px 18px; border-radius: 999px; font: inherit; font-size: 11px; background: white; color: var(--ink); }
.game-result-count { font-size: 11px; color: var(--muted); margin: 22px 0; }
.game-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.game-card { overflow: hidden; border-radius: 30px; border: 1px solid var(--line); background: white; }
.game-card-art { height: 390px; display: flex; align-items: center; justify-content: center; position: relative; padding: 26px 32px 45px; }
.game-card-art img { height: 100%; width: 100%; object-fit: contain; transition: transform .25s; filter: drop-shadow(0 7px 8px #2b17431c); }
.game-card-art:hover img { transform: translateY(-4px); }
.game-art-label { position: absolute; left: 22px; bottom: 15px; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.game-card-copy { padding: 25px 28px 26px; }
.game-client { color: var(--violet); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.game-card h3 { margin: 9px 0 13px; font-size: 40px; font-weight: 700; }
.game-card-copy > p { font-size: 13px; color: var(--muted); line-height: 1.9; min-height: 49px; }
.game-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 23px; flex-wrap: wrap; }
.game-mechanic { border-radius: 999px; background: var(--lavender); padding: 9px 12px; font-size: 9px; font-weight: 750; }
.game-detail-link { font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 5px; padding-block: 10px; }
.game-empty { padding: 50px 20px; text-align: center; border-radius: 28px; background: var(--lavender); }
.game-empty h3 { font-size: 40px; }
.game-empty p { margin: 16px 0 22px; }
.game-formats-section { padding-block: 78px; background: var(--lavender); border-radius: 44px; scroll-margin-top: 20px; }
.game-formats-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 55px; align-items: start; }
.format-visual { position: sticky; top: 28px; background: white; border-radius: 28px; padding: 14px; }
.format-visual img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; border-radius: 18px; }
.format-visual figcaption { padding: 21px 15px 18px; }
.format-visual figcaption > span { display: block; font-size: 8px; color: var(--muted); letter-spacing: .09em; }
.format-visual strong { display: block; margin-top: 12px; font: 700 36px/1 'Barlow Condensed',sans-serif; }
.format-visual p { margin-top: 15px; font-size: 11px; color: var(--muted); line-height: 1.8; }
.game-format { border-bottom: 1px solid #cdbce8; }
.game-format summary { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 22px 4px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 750; }
.game-format summary::-webkit-details-marker, .game-faq summary::-webkit-details-marker { display: none; }
.format-mark { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: white; position: relative; }
.format-mark::before,.format-mark::after { content: ''; width: 10px; height: 2px; background: var(--ink); position: absolute; top: 13px; left: 9px; }
.format-mark::after { transform: rotate(90deg); transition: transform .2s; }
.game-format[open] .format-mark::after { transform: rotate(0); }
.game-format-body { padding: 0 4px 26px; }
.game-format-body > p { font-size: 13px; line-height: 1.9; max-width: 460px; }
.game-format-body ul { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 17px 0 23px; }
.game-format-body li { padding: 7px 10px; border-radius: 999px; background: white; font-size: 9px; }
.game-format-body .text-link { font-size: 12px; }
.game-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; padding-block: 90px; }
.game-faq .eyebrow { margin-bottom: 18px; }
.game-faq h2 { font-size: clamp(46px,5vw,76px); }
.game-faq details { border-bottom: 1px solid var(--line); }
.game-faq summary { cursor: pointer; list-style: none; font-weight: 750; font-size: 14px; padding: 23px 0; }
.game-faq summary::after { content: '+'; margin-left: 13px; color: var(--violet); }
.game-faq details[open] summary::after { content: '−'; }
.game-faq details p { font-size: 13px; color: var(--muted); line-height: 1.9; padding-bottom: 24px; }
.game-end-cta { background: var(--green); border-radius: 32px; padding: 43px 50px; display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: 75px; }
.game-end-cta h2 { font-size: clamp(44px,4.8vw,72px); margin: 15px 0 18px; }
.game-end-cta p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
.game-end-cta .button { flex-shrink: 0; }
.game-detail-hero { display: grid; grid-template-columns: 1fr .85fr; gap: 70px; padding-block: 40px 70px; align-items: center; }
.game-back { display: inline-flex; min-height: 44px; align-items: center; font-size: 11px; text-decoration: underline; text-underline-offset: 5px; color: var(--muted); margin-bottom: 26px; }
.game-detail-copy .eyebrow { font-size: 10px; line-height: 1.8; margin-bottom: 20px; }
.game-detail-copy h1 { font-size: clamp(66px,6.8vw,104px); overflow-wrap: break-word; }
.game-detail-summary { font-size: 16px; line-height: 1.8; margin-top: 26px; }
.game-detail-context { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 15px; }
.game-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.game-detail-actions .text-link { font-size: 12px; }
.game-feature-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.game-feature-list span { font-size: 10px; line-height: 1.5; padding: 10px 14px; border-radius: 999px; background: var(--lavender); }
.game-detail-art { padding: 26px; border-radius: 32px; }
.game-detail-art > a { display: block; height: 470px; }
.game-detail-art img { width: 100%; height: 100%; object-fit: contain; }
.game-detail-art figcaption { text-align: center; margin-top: 18px; font-size: 10px; line-height: 1.8; }
.game-how { padding-block: 40px 80px; }
.game-how .eyebrow { margin-bottom: 20px; }
.game-how h2 { font-size: clamp(42px,4.8vw,68px); max-width: 800px; }
.game-how ol { counter-reset: step; list-style: none; padding: 30px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; }
.game-how li { border-top: 1px solid var(--line); padding-top: 20px; counter-increment: step; }
.game-how li::before { content: '0' counter(step); display: block; color: var(--violet); font-size: 11px; font-weight: 800; margin-bottom: 20px; }
.game-how h3 { font-size: 30px; margin-bottom: 13px; }
.game-how li p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.game-proof { padding-bottom: 75px; scroll-margin-top: 24px; }
.game-proof-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.game-proof-card { display: block; background: var(--lavender); border-radius: 24px; padding: 12px; }
.game-proof-image { height: 280px; border-radius: 15px; background: #fff; padding: 12px; }
.game-proof-image img { width: 100%; height: 100%; object-fit: contain; }
.game-proof-card > div:last-child { padding: 18px 9px; }
.game-proof-card span { font-size: 10px; font-weight: 800; color: var(--violet); }
.game-proof-card h3 { font-size: 25px; line-height: 1.15; margin-top: 10px; }
.game-related { padding-bottom: 70px; }
.game-related h2 { font-size: 42px; margin-bottom: 24px; }
.game-related > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 20px; }
.game-related-item { display: grid; gap: 12px; padding: 25px; border: 1px solid var(--line); border-radius: 22px; }
.game-related-item span { font-size: 9px; font-weight: 750; color: var(--violet); }
.game-related-item strong { font: 700 30px/1.05 'Barlow Condensed',sans-serif; }
.game-related-item small { font-size: 10px; color: var(--muted); }
.game-related-item:hover { background: var(--lavender); }
.game-showcase-link { display: inline-flex; min-height: 44px; align-items: center; padding: 0 17px; background: var(--lavender); color: var(--violet); border-radius: 999px; font-size: 12px; font-weight: 750; }
@media (prefers-reduced-motion: no-preference) {
  .games-hero-copy, .games-hero-art { animation: games-enter .65s both; }
  .games-hero-art { animation-delay: .12s; }
  @keyframes games-enter { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 1100px) {
  .site-header .brand { width: 165px; }
  .site-header .desktop-nav { gap: 16px; }
  .site-header .desktop-nav a { font-size: 11px; }
  .play-stage { padding: 34px; gap: 23px; grid-template-columns: 1fr .86fr .8fr; }
  .home-games h2 { font-size: 49px; }
  .play-art { height: 315px; }
  .games-hero-grid { gap: 25px; }
  .hero-game-poster img { height: 265px; }
  .games-hero-art { gap: 6px; }
  .game-library-tools { flex-wrap: wrap; }
  .game-detail-hero { gap: 40px; }
  .game-detail-art > a { height: 420px; }
}
@media (max-width: 850px) and (min-width: 701px) {
  .site-header .desktop-nav { gap: 11px; }
  .site-header .desktop-nav a { font-size: 9px; }
  .site-header .brand { width: 140px; }
  .site-header .header-cta { padding-inline: 16px; }
  .play-stage { grid-template-columns: 1fr 1fr; }
  .play-choices { grid-column: 1/-1; grid-row: 2; }
  .play-choices [role=group] { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .play-pick:last-child:nth-child(4n+1) { grid-column: 1/-1; }
  .play-pick { padding: 13px 10px; }
  .play-pick > span:not(.play-pick-brand) { font-size: 10px; }
  .play-pick-brand { font-size: 7px; }
  .games-hero h1 { font-size: 94px; }
  .games-hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .hero-game-poster img { height: 210px; }
  .hero-game-poster { padding: 6px 6px 12px; }
  .hero-game-poster span { font-size: 6px; }
  .game-card-art { height: 335px; }
  .game-formats-grid { gap: 30px; }
  .game-format summary { font-size: 16px; }
  .game-detail-art { padding: 18px; }
  .game-detail-art > a { height: 370px; }
}
@media (max-width: 700px) {
  .site-header .brand { width: 170px; }
  .home-games { padding-block: 12px 48px; }
  .play-stage { display: flex; flex-direction: column; align-items: stretch; padding: 27px 22px; gap: 27px; border-radius: 27px; }
  .home-games h2 { font-size: clamp(43px,11vw,63px); margin-block: 18px; }
  .play-intro > p:not(.eyebrow) { max-width: none; }
  .play-note { display: none; }
  .play-screen { order: 3; }
  .play-choices { order: 2; }
  .play-art { height: 320px; }
  .play-screen-caption { padding-inline: 10px; }
  .play-choices [role=group] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .play-pick:last-child:nth-child(odd) { grid-column: 1/-1; }
  .play-pick { min-height: 103px; padding: 13px; }
  .play-pick > span:not(.play-pick-brand) { font-size: 11px; }
  .play-pick-brand { font-size: 7px; }
  .play-choice-label { margin-bottom: 12px; }
  .games-hero { padding-block: 38px 40px; border-radius: 0 0 30px 30px; }
  .games-hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .games-hero .eyebrow { font-size: 9px; margin-bottom: 24px; }
  .games-hero h1 { font-size: clamp(64px,20vw,100px); line-height: .88; }
  .games-hero-copy > p:not(.eyebrow) { margin-top: 22px; font-size: 13px; }
  .games-hero-actions { gap: 16px; }
  .games-hero-note { font-size: 25px; margin-top: 22px; }
  .games-hero-art { padding: 30px 9px 0; gap: 7px; }
  .hero-game-poster { padding: 6px 6px 12px; border-radius: 13px; }
  .hero-game-poster img { height: clamp(145px,44vw,225px); border-radius: 8px; }
  .hero-game-poster span { font-size: 6px; letter-spacing: 0; }
  .hero-game-poster-0 { transform: rotate(-6deg) translateY(10px); }
  .hero-game-poster-1 { transform: translateY(-15px); }
  .hero-game-poster-2 { transform: rotate(6deg) translateY(10px); }
  .games-hero-art > p { margin-top: 26px; font-size: 7px; line-height: 1.8; }
  .games-library { padding-block: 50px; }
  .games-section-heading { display: block; margin-bottom: 25px; }
  .games-section-heading h2 { font-size: 52px; }
  .games-section-heading > p, .games-section-heading > .text-link { display: block; margin-top: 20px; }
  .game-library-tools { display: block; margin-top: 24px; }
  .game-filters { gap: 7px; }
  .game-filter { font-size: 10px; padding: 11px 13px; }
  .game-search { display: block; margin-top: 18px; }
  .game-card-grid { grid-template-columns: 1fr; gap: 25px; }
  .game-card-art { height: 345px; padding: 22px 28px 44px; }
  .game-card-copy { padding: 23px; }
  .game-card h3 { font-size: 36px; }
  .game-card-copy > p { min-height: 0; font-size: 12px; }
  .game-card-foot { gap: 10px; }
  .game-mechanic { font-size: 8px; }
  .game-formats-section { padding-block: 45px; border-radius: 28px; }
  .game-formats-grid { grid-template-columns: 1fr; gap: 22px; }
  .format-visual { position: static; padding: 10px; border-radius: 22px; }
  .format-visual figcaption { padding: 18px 10px; }
  .format-visual strong { font-size: 31px; }
  .game-format summary { font-size: 16px; padding-block: 20px; }
  .game-faq { grid-template-columns: 1fr; gap: 20px; padding-block: 50px; }
  .game-faq h2 { font-size: 54px; }
  .game-faq summary { line-height: 1.7; font-size: 12px; }
  .game-end-cta { display: block; padding: 30px 25px; border-radius: 26px; margin-bottom: 45px; }
  .game-end-cta h2 { font-size: 50px; }
  .game-end-cta .button { margin-top: 25px; }
  .game-detail-hero { grid-template-columns: 1fr; gap: 30px; padding-block: 20px 45px; }
  .game-back { margin-bottom: 20px; }
  .game-detail-copy h1 { font-size: clamp(61px,17vw,92px); }
  .game-detail-summary { font-size: 14px; margin-top: 22px; }
  .game-detail-context { font-size: 11px; }
  .game-feature-list { margin-top: 25px; }
  .game-detail-art { padding: 22px; border-radius: 25px; }
  .game-detail-art > a { height: 385px; }
  .game-detail-art figcaption { font-size: 9px; }
  .game-how { padding-block: 10px 45px; }
  .game-how h2 { font-size: 46px; }
  .game-how ol { grid-template-columns: 1fr; gap: 22px; }
  .game-how li::before { margin-bottom: 14px; }
  .game-proof { padding-bottom: 45px; }
  .game-proof-grid { grid-template-columns: 1fr; gap: 20px; }
  .game-proof-image { height: 330px; }
  .game-proof-card h3 { font-size: 26px; }
  .game-related { padding-bottom: 45px; }
  .game-related > div { grid-template-columns: 1fr; gap: 12px; }
  .game-related-item { padding: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .play-pick, .hero-game-poster, .game-card-art img, .format-mark::after { transition: none; }
  .play-pick:hover, .hero-game-poster:hover, .game-card-art:hover img { transform: none; }
}