/* Shared game-page layout, based on the Gammon King reference. */
.game-body { --game-ink: #1c120e; --game-paper: #f6e8c5; --game-gold: #d6ae62; --game-wine: #7e2530; --blue: #765024; background: var(--game-paper); color: var(--game-ink); }
.game-body::after { display: none; }
.game-body a:focus-visible, .game-body button:focus-visible, .game-body summary:focus-visible, .game-body video:focus-visible { outline: 3px solid #b47936; outline-offset: 5px; }
.game-skip { position: absolute; top: -100px; left: 20px; z-index: 100; padding: 16px; background: var(--game-paper); color: var(--game-ink); }
.game-skip:focus { top: 12px; }
.game-body .sub-header { background: #f6e8c5f5; border-bottom-color: #8a613a44; }
.game-body .sub-nav a:hover, .game-body .sub-nav [aria-current] { color: var(--game-wine); }
.game-body section[id] { scroll-margin-top: 100px; }
.game-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 84px); align-items: center; padding: clamp(58px, 6vw, 100px) clamp(24px, 6vw, 100px); background: radial-gradient(ellipse at 90% 42%, #65382177, transparent 58%), var(--game-ink); color: var(--game-paper); }
.game-eyebrow { color: #936028; font-size: .72rem; font-weight: 800; line-height: 1.6; letter-spacing: .14em; }
.game-hero .game-eyebrow { color: var(--game-gold); }
.game-hero h1 { margin: 22px 0 0; }
.game-hero h1 img { display: block; width: min(100%, 350px); height: auto; image-rendering: pixelated; }
.game-tagline { margin-top: 22px; font: 600 clamp(32px, 3.2vw, 50px)/1.09 var(--display); letter-spacing: -.035em; }
.game-lede { margin-top: 22px; max-width: 510px; color: #e4d4ba; font-size: 1.08rem; line-height: 1.7; }
.game-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.game-button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 52px; padding: 16px 20px; border: 1px solid #d6ae6280; border-radius: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .07em; transition: background .18s ease; }
.game-button:hover { background: #d6ae6222; }
.game-button--gold { background: var(--game-gold); color: var(--game-ink); border-color: var(--game-gold); }
.game-button--gold:hover { background: #ecd09a; }
.game-button--ink { margin-top: 28px; background: var(--game-ink); color: var(--game-paper); }
.game-button--ink:hover { background: #45291b; }
.game-platform { margin-top: 22px; color: #d4bea0; font-size: .8rem; line-height: 1.6; }
.game-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; min-height: 38px; color: #e8cd99; font-size: .78rem; text-decoration: underline; text-underline-offset: 4px; }
.game-status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--game-gold); }
.game-hero-table { min-width: 0; margin: 0; padding: 16px; border: 1px solid #d6ae6277; border-radius: 8px; background: #08040266; box-shadow: 0 30px 80px #0007; }
.game-table-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 16px; color: var(--game-gold); font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.game-hero-table > img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.game-hero-table figcaption { margin-top: 14px; text-align: center; font: 1.2rem var(--hand); color: #d9c5a4; }
.game-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #91633855; background: #ead6ae; }
.game-facts p { padding: 26px clamp(18px, 3vw, 48px); border-right: 1px solid #91633855; }
.game-facts p:last-child { border-right: 0; }
.game-facts strong { display: block; font-size: .68rem; letter-spacing: .07em; line-height: 1.5; }
.game-facts span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.5; }
.game-section { padding: clamp(64px, 7vw, 104px) clamp(24px, 8vw, 130px); }
.game-heading { max-width: 790px; }
.game-heading h2, .game-availability h2, .game-resources h2 { margin-top: 16px; font: 610 clamp(34px, 4.7vw, 66px)/1.05 var(--display); letter-spacing: -.045em; }
.game-heading > p:last-child { max-width: 660px; margin-top: 24px; font-size: 1.04rem; line-height: 1.7; }
.game-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin-top: 44px; }
.game-gallery figure { min-width: 0; margin: 0; }
.game-gallery figure > a { display: block; padding: 8px; border: 1px solid #93602866; border-radius: 7px; background: var(--game-ink); }
.game-gallery img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.game-gallery figcaption { padding: 22px 4px 0; }
.game-gallery figcaption > span { color: #815322; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.game-gallery h3 { margin: 10px 0 12px; font: 610 clamp(23px, 2.1vw, 32px)/1.2 var(--display); letter-spacing: -.025em; }
.game-gallery p { max-width: 540px; font-size: .96rem; line-height: 1.65; }
.game-media-note { max-width: 850px; margin-top: 38px; color: #694a34; font-size: .8rem; line-height: 1.7; }
.game-play-section { background: #302017; color: var(--game-paper); }
.game-play-section .game-eyebrow, .game-video-section .game-eyebrow { color: var(--game-gold); }
.game-play-section .game-heading > p:last-child { color: #dcc7ad; }
.game-steps { padding: 0; margin: 44px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.game-steps li { padding: 26px; border: 1px solid #d6ae6255; border-radius: 7px; background: #ffffff05; }
.game-steps li > span { color: var(--game-gold); font: 1.6rem var(--hand); }
.game-steps h3 { margin: 24px 0 14px; font: 600 clamp(25px, 2.5vw, 36px)/1.15 var(--display); letter-spacing: -.03em; }
.game-steps p { color: #e4d4ba; font-size: .96rem; line-height: 1.7; }
.game-steps strong { color: var(--game-paper); }
.game-rivals-section { background: #ead6ae; }
.game-rivals { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.game-rivals article { border-bottom: 1px solid #91633866; padding-bottom: 24px; }
.game-rivals img { width: 180px; max-width: 100%; height: 210px; object-fit: contain; object-position: bottom; display: block; image-rendering: pixelated; }
.game-rivals h3 { font: 610 27px/1.15 var(--display); letter-spacing: -.025em; margin: 20px 0 12px; }
.game-rivals p { max-width: 300px; font-size: .96rem; line-height: 1.6; }
.game-video-section { background: var(--game-ink); color: var(--game-paper); }
.game-video-section .game-heading > p:last-child { color: #e4d4ba; }
.game-video { margin: 38px 0 0; }
.game-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #d6ae6277; border-radius: 6px; background: #080402; }
.game-video figcaption { margin-top: 18px; font-size: .8rem; line-height: 1.6; color: #d4bea0; }
.game-transcript { margin-top: 20px; color: #e4d4ba; font-size: .88rem; line-height: 1.7; }
.game-transcript summary { cursor: pointer; padding-block: 12px; text-decoration: underline; text-underline-offset: 4px; }
.game-transcript p { max-width: 850px; padding-top: 12px; }
.game-availability { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(36px, 7vw, 100px); background: #ead6ae; }
.game-availability > div > p:not(.game-eyebrow) { margin-top: 24px; font-size: 1.02rem; line-height: 1.7; }
.game-availability-card { text-align: center; padding: 32px; border: 1px solid #91633866; border-radius: 8px; background: #f6e8c5aa; }
.game-availability-card img { width: 150px; height: auto; border-radius: 25%; }
.game-availability-card strong { display: block; font-size: .75rem; letter-spacing: .12em; }
.game-availability-card span { display: block; margin-top: 4px; font: 1.2rem var(--hand); }
.game-availability .game-availability-card > p:last-child { font-size: .88rem; }
.game-faq .faq-list, .game-faq .faq-list details { border-color: #91633866; }
.game-faq .faq-list summary::marker { color: var(--game-wine); }
.game-faq .faq-list summary { font-size: 1.03rem; }
.game-faq .faq-list p { font-size: .98rem; }
.game-resources { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 7vw, 100px); border-top: 1px solid #91633844; }
.game-resources p:last-child { margin-top: 24px; font-size: 1rem; line-height: 1.7; max-width: 600px; }
.game-resources nav { border-top: 1px solid #91633877; }
.game-resources nav a { padding: 24px 0; border-bottom: 1px solid #91633877; display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 600 1.6rem var(--display); }
.game-resources nav span { color: var(--game-wine); }
.game-body .sub-footer { background: var(--game-ink); color: var(--game-paper); }
@media (max-width: 1100px) {
  .game-hero { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .game-hero-copy { display: contents; }
  .game-intro { order: 1; }
  .game-hero-table { order: 2; }
  .game-lede { order: 3; margin-top: 0; }
  .game-actions { order: 4; margin-top: 0; }
  .game-platform { order: 5; margin-top: 0; }
  .game-status { order: 6; margin-top: -16px; align-self: flex-start; }
  .game-hero h1 img { width: 300px; }
  .game-lede { max-width: 650px; }
  .game-hero-table { max-width: 850px; width: 100%; }
}
@media (max-width: 760px) {
  .game-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-facts p:nth-child(2) { border-right: 0; }
  .game-facts p:nth-child(-n+2) { border-bottom: 1px solid #91633855; }
  .game-gallery, .game-steps, .game-availability, .game-resources { grid-template-columns: minmax(0, 1fr); }
  .game-rivals { gap: 18px; }
  .game-rivals img { width: 150px; height: auto; }
  .game-rivals h3 { font-size: 21px; }
  .game-rivals p { font-size: .86rem; }
  .game-availability-card { max-width: 420px; width: 100%; justify-self: center; }
}
@media (max-width: 480px) {
  .game-hero h1 img { width: 278px; }
  .game-lede { font-size: 1rem; }
  .game-actions { flex-direction: column; align-items: stretch; }
  .game-hero-table { padding: 10px; }
  .game-table-topline { font-size: .56rem; }
  .game-rivals { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .game-rivals article { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px 18px; align-items: end; }
  .game-rivals img { grid-row: span 2; width: 108px; }
  .game-rivals h3 { margin: 0; align-self: end; }
  .game-rivals p { align-self: start; }
  .game-facts p { padding: 22px 18px; }
  .game-facts strong { font-size: .63rem; }
}
@media (prefers-reduced-motion: reduce) { .game-button { transition: none; } }

/* Each game's artwork keeps its own palette inside the common page structure. */
.game-theme--vesperline { --game-ink: #151c17; --game-paper: #f3ecd5; --game-gold: #d3c47c; --game-wine: #526442; }
.game-theme--mewmeow-escape { --game-ink: #332525; --game-paper: #fff1e1; --game-gold: #edb89b; --game-wine: #964734; }
.game-theme--crooked-fortune { --game-ink: #211524; --game-paper: #f3e6ee; --game-gold: #d7a2c1; --game-wine: #853665; }
.game-theme--sunnybites { --game-ink: #63416f; --game-paper: #fff8fc; --game-gold: #e5a9cd; --game-wine: #a42b60; }
.game-theme--gooby { --game-ink: #302441; --game-paper: #f6effb; --game-gold: #ceb1ee; --game-wine: #704991; }
.game-body .sub-header { background: var(--game-paper); }
.game-body .game-hero { background: radial-gradient(ellipse at 90% 42%, color-mix(in srgb, var(--game-gold) 16%, transparent), transparent 58%), var(--game-ink); }
.game-body .game-hero h1:not(:has(img)) { font: 610 clamp(42px, 4.8vw, 72px)/1.04 var(--display); letter-spacing: -.045em; }
.game-body .game-lede, .game-body .game-platform { color: color-mix(in srgb, var(--game-paper) 85%, transparent); }
.game-body .game-hero .game-eyebrow, .game-body .game-status { color: var(--game-gold); }
.game-body .game-facts, .game-body .game-availability { background: color-mix(in srgb, var(--game-gold) 22%, var(--game-paper)); }
.game-body .game-play-section, .game-body .game-video-section { background: var(--game-ink); }
.game-body .game-play-section p { color: var(--game-paper); }
.game-body .game-hero-table, .game-body .game-gallery figure > a, .game-body .game-button, .game-body .game-steps li { border-color: color-mix(in srgb, var(--game-gold) 50%, transparent); }
.game-body .game-eyebrow, .game-body .game-gallery figcaption > span { color: var(--game-wine); }
.game-body .game-play-section .game-eyebrow { color: var(--game-gold); }
.game-body .game-hero-table figcaption { color: var(--game-paper); }
.game-hero-table--portrait { position: relative; width: 100%; max-width: 460px; justify-self: center; }
.game-hero-table--portrait > img:first-child { width: auto; max-width: 100%; height: 480px; object-fit: contain; margin: auto; }
.game-hero-table--portrait > .game-hero-icon { position: absolute; width: 88px; height: 88px; object-fit: contain; right: -22px; bottom: 42px; border-radius: 18px; box-shadow: 0 12px 40px #0005; background: var(--game-paper); }
.game-gallery--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.game-gallery--portrait figure > a { max-width: 340px; margin: auto; }
.game-gallery--portrait h3 { font: 800 .82rem/1.55 var(--ui); letter-spacing: .025em; }
.game-gallery--portrait figcaption { max-width: 340px; margin: auto; }
.game-resource-links { display: grid; gap: 0; }
.game-resource-links a { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 22px 0; border-bottom: 1px solid currentColor; }
.game-resource-links a > span { grid-column: 1; font-size: .68rem; letter-spacing: .06em; }
.game-resource-links a > strong { grid-column: 1; font: 600 24px/1.25 var(--display); }
.game-resource-links a > b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.game-body .game-availability-card p { margin: 18px 0; }
.game-body .game-availability-card { background: color-mix(in srgb, var(--game-paper) 80%, transparent); }
.game-body .game-media-note { color: inherit; }
.game-button--muted { opacity: .75; }
.game-name { display: block; margin-bottom: 20px; color: var(--game-gold); font: 800 .76rem/1.5 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.game-body .maze-intro { margin-top: 20px; font-size: 1.04rem; line-height: 1.7; color: var(--game-paper); }
.game-body .vesperline-tagline { color: var(--game-paper); font: 610 36px/1.15 var(--display); margin-top: 20px; }
.game-body .game-hero h1 img { max-width: 100%; }
.game-theme--sunnybites .game-hero { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: linear-gradient(130deg, #ffedf5, #f6c6df); color: var(--game-ink); }
.game-theme--sunnybites .game-hero h1 em, .game-theme--sunnybites .game-hero .game-eyebrow, .game-theme--sunnybites .game-name { color: var(--game-wine); font-style: normal; }
.game-theme--sunnybites .game-lede, .game-theme--sunnybites .game-platform { color: var(--game-ink); }
.game-theme--sunnybites .game-hero .game-button { background: var(--game-wine); border-color: var(--game-wine); color: var(--game-paper); }
.game-theme--sunnybites .game-hero .game-button:hover { background: #84204c; }
.game-theme--sunnybites .game-hero-table { background: #fff8fcaa; border-color: #e5a9cd; box-shadow: 0 24px 60px #995b9826; }
.game-theme--sunnybites .game-hero-table img { image-rendering: auto; }
.game-theme--sunnybites .game-section.sunny-play, .game-theme--sunnybites .game-section.sunny-decorate { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 48px; align-items: center; }
.game-theme--sunnybites .sunny-feature-copy h2, .game-theme--sunnybites .sunny-social-heading h2 { font-family: var(--display); letter-spacing: -.04em; }
.game-theme--sunnybites .sunny-media, .game-theme--sunnybites .sunny-social-grid { transform: none; }
.game-theme--sunnybites .sub-footer { gap: 24px; }
.game-theme--sunnybites .sub-footer > span { display: flex; gap: 24px; }
.game-facts--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.game-feature-card { padding: 32px; border: 1px solid var(--game-gold); border-radius: 8px; text-align: center; }
.game-feature-title { margin-top: 12px; font: 610 clamp(30px,3vw,44px)/1.1 var(--display); letter-spacing: -.03em; }
.game-feature-orbit { position: relative; display: grid; place-items: center; width: 170px; height: 170px; margin: 32px auto; border-radius: 48% 55% 40% 50%; background: var(--game-gold); color: var(--game-ink); font: 610 130px/1 var(--display); }
.game-feature-orbit span { position: absolute; right: -15px; top: 0; color: var(--game-paper); font: 40px/1 var(--hand); }
.game-feature-card > p:last-of-type { font-size: .95rem; line-height: 1.6; }
.game-overview { display: grid; grid-template-columns: minmax(160px,.3fr) minmax(0,1fr); max-width: 1440px; margin: auto; padding: 64px 6vw; gap: 60px; }
.game-overview-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 20px; font-size: .85rem; line-height: 1.5; }
.game-overview-nav a { text-decoration: underline; text-underline-offset: 4px; }
.game-overview-content .game-section { padding: 20px 0 50px; }
.game-overview-content h2 { margin-bottom: 24px; font: 610 clamp(30px,4vw,48px)/1.1 var(--display); letter-spacing: -.035em; }
.game-overview-content p { font-size: 1.04rem; line-height: 1.8; }
.game-overview-content p a { text-decoration: underline; }
@media(max-width: 980px) {
 .game-gallery--portrait { gap: 24px; }
 .game-theme--sunnybites .game-hero { grid-template-columns: minmax(0,1fr); }
}
@media(max-width: 720px) {
 .game-gallery--portrait { grid-template-columns: minmax(0,1fr); gap: 36px; }
 .game-hero-table--portrait { max-width: 360px; }
 .game-hero-table--portrait > img:first-child { height: min(480px, 120vw); }
 .game-hero-table--portrait > .game-hero-icon { right: 8px; width: 68px; height: 68px; }
 .game-theme--sunnybites .game-section.sunny-play, .game-theme--sunnybites .game-section.sunny-decorate { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .game-facts--three { grid-template-columns: minmax(0,1fr); }
 .game-facts--three p { border-right: 0; }
 .game-overview { grid-template-columns: minmax(0,1fr); gap: 36px; padding-inline: 24px; }
 .game-overview-nav { border-bottom: 1px solid #0003; padding-bottom: 32px; }
}
.game-resources .game-resource-links a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 20px; }
.game-theme--sunnybites .game-hero-copy > .game-button { margin-top: 28px; }
.game-theme--sunnybites .game-hero-copy > .game-platform { margin-top: 22px; }

.game-theme--crooked-fortune .game-hero-copy { display: block; }
.game-theme--crooked-fortune .game-hero .game-lede, .game-theme--crooked-fortune .game-hero .game-platform { margin-top: 22px; }
.game-theme--crooked-fortune .game-hero .game-actions { margin-top: 30px; }
.game-theme--crooked-fortune .game-hero-table { max-width: 360px; align-self: center; }
@media (min-width: 760px) {
  .game-theme--crooked-fortune .game-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); align-items: center; }
}
html[lang="tr"] .vesperline-store-badge img { width: 200px; height: auto; }
html[lang="tr"] .live-app-store img { width: 140px; height: auto; }