/* Fonts and artwork identities verified against the sibling Apps projects. */
@font-face { font-family: Fredoka; src: url('../fonts/games/Fredoka.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Nunito; src: url('../fonts/games/Nunito.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: Quicksand; src: url('../fonts/games/Quicksand-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Quicksand; src: url('../fonts/games/Quicksand-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Lexend; src: url('../fonts/games/Lexend-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Lexend; src: url('../fonts/games/Lexend-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/games/PlusJakartaSans.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }

[data-game='yacht-zee'], .app-page-yacht-zee { --game-display: 'League Spartan', sans-serif; --game-body: Quicksand, sans-serif; --game-color: #075477; --game-paper: #effcff; }
[data-game='card-club'], .app-page-card-club { --game-display: Fredoka, sans-serif; --game-body: Nunito, sans-serif; --game-color: #101b37; --game-paper: #fff6df; }
[data-game='word-blitz'], .app-page-word-blitz { --game-display: 'League Spartan', sans-serif; --game-body: Quicksand, sans-serif; --game-color: #1137a5; --game-paper: #eef5ff; }
[data-game='golf-caddy'], .app-page-golf-caddy { --game-display: ui-rounded, 'Plus Jakarta Sans', system-ui, sans-serif; --game-body: ui-rounded, 'Plus Jakarta Sans', system-ui, sans-serif; --game-color: #064b38; --game-paper: #edf6ee; }
[data-game='family-nest'], .app-page-family-nest { --game-display: Lexend, sans-serif; --game-body: Lexend, sans-serif; --game-color: #23352d; --game-paper: #faf6ef; }
[data-game='dice-harbor'], .app-page-trade-winds { --game-display: Fredoka, sans-serif; --game-body: Nunito, sans-serif; --game-color: #07506f; --game-paper: #fff5dc; }

/* A bounded cover preserves the entire illustration at every breakpoint. */
.brand-cover { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; background: var(--game-color, #07506f); }
.brand-cover > picture { display: block; width: 100%; height: 100%; }
.brand-cover .cover-art { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; }
.brand-cover[data-game='yacht-zee'] .brand-cover[data-game='family-nest'] 
.game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.game-grid .game-card { min-width: 0; background: var(--game-color); }
.game-grid .game-card .game-image { display: block; width: 100%; aspect-ratio: 4 / 5; flex-shrink: 0; }
.game-grid .game-card .game-body { flex: 1; background: var(--game-color); font-family: var(--game-body); }
.game-grid .game-card h3 { font-family: var(--game-display); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.game-grid .game-card p { font-family: var(--game-body); line-height: 1.5; color: #edf5fc; }
.game-grid .game-card .app-icon { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.game-grid .game-card[data-game='family-nest'] .game-body { background: #faf6ef; color: #23352d; }
.game-grid .game-card[data-game='family-nest'] p { color: #53664f; }
.game-grid .game-card .play-row { margin-top: auto; }
.game-grid .game-card .play-btn { font-family: var(--game-body); }

/* Collection panels remain real, independently sized artwork and live text. */
.hero .hero-art { min-width: 0; min-height: 0; }
.collection-shelf { width: 100%; max-width: 690px; padding: clamp(14px, 2vw, 24px); background: #072e45; border-radius: 26px; box-shadow: var(--shadow-strong); }
.collection-heading { color: #f8f3e7; font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.collection-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.collection-game { display: block; min-width: 0; border-radius: 12px; overflow: hidden; background: #ffffff; }
.collection-game:hover { outline: 2px solid #ffc95c; outline-offset: 2px; }
.collection-game:focus-visible { outline: 3px solid #53d6e8; outline-offset: 3px; }
.collection-label { display: block; padding: 9px 4px; font: 700 clamp(12px, 1.15vw, 16px)/1.2 var(--game-display); color: var(--game-color); text-align: center; text-wrap: balance; }

/* Each product page uses its own app typography; studio navigation stays shared. */
.app-page { --font: var(--game-body, 'League Spartan', sans-serif); background: var(--game-paper, #effcff); }
.app-page .site-nav, .app-page .site-footer { font-family: 'League Spartan', sans-serif; }
.app-page main :is(h1, h2, h3) { font-family: var(--game-display); text-transform: none; }
.app-page .app-hero h1, .app-page .features h2, .app-page .feature-tile h3, .app-page .faq h2 { font-family: var(--game-display); line-height: 1.08; text-transform: none; }
.app-page .app-hero h1 { font-size: clamp(36px, 4.6vw, 68px); overflow-wrap: anywhere; }
.app-page .app-hero-grid > *, .app-page .app-hero-art { min-width: 0; }
.app-page .app-hero-art { min-height: 0; }
.app-page .app-hero-art > .brand-cover { width: min(100%, 440px); border-radius: 24px; box-shadow: var(--shadow-strong); }
.app-page .app-hero h1 span { color: var(--game-color) !important; }
.app-page .app-hero .lede { font-family: var(--game-body); }
.app-page.app-page-trade-winds .trade-winds-art { width: min(100%, 440px); aspect-ratio: 4 / 5; background: #07506f; }
.app-page.app-page-trade-winds .trade-winds-art > img { height: auto; object-fit: contain; }
.app-page.app-page-trade-winds .trade-winds-art::before { display: none; }
.app-page.app-page-trade-winds .app-hero-copy .eyebrow { color: #07506f; }
.app-page.app-page-trade-winds .app-hero h1 span { color: #07506f !important; }
.trade-winds-spotlight .spotlight-art { min-height: 0; min-width: 0; }
.trade-winds-featured-graphic { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.trade-winds-spotlight .spotlight-copy h3 { font-family: Fredoka, sans-serif; }
.trade-winds-spotlight .spotlight-copy p { font-family: Nunito, sans-serif; }

@media (max-width: 1120px) and (min-width: 681px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .app-page .app-hero-grid { grid-template-columns: minmax(0, 1fr); } .app-page .app-hero-art { width: 100%; } .hero .hero-art { min-height: 0; } }
@media (max-width: 680px) { .game-grid { grid-template-columns: minmax(0, 1fr); } .game-grid .game-card { width: min(100%, 440px); justify-self: center; } .collection-panels { gap: 8px; } .collection-label { font-size: 12px; } .hero .hero-art { min-height: 0; } .app-page .app-hero h1 { font-size: clamp(36px, 10vw, 52px); } }
@media (prefers-reduced-motion: reduce) { .game-card, .reveal { transition: none !important; } }