/* ============================================================================
   gamecenter-home.theme.css
   Visual theme for the Game Center home screen. Loaded AFTER style.css so it
   layers over the original rules — removing the one <link> in index.html
   restores the previous split pink/blue layout exactly.

   Shares the palette and background art with claraskitchen.theme.css so the
   home screen and the games read as one product.
   ========================================================================= */

:root {
    --gc-navy:        #14276E;
    --gc-navy-line:   #1B2E7A;
    --gc-pink:        #FBD3E0;
    --gc-pink-line:   #E8548A;
    --gc-pink-fill:   #C51B54;
    --gc-blue:        #DCEDFC;
    --gc-blue-line:   #4A9BE0;
    --gc-yellow:      #FFD426;
    --gc-cream:       #FFFDF5;
    --gc-footer:      #14205A;
}

/* ── Page ──────────────────────────────────────────────────────────────── */
/*.claras-kitchen-bg-rainbow-rays
../images/claras-kitchen-bg.svg"
*/
body {
    height: auto;
    min-height: 100vh;
    background-color: #BEE7FB;
    background-image: url("../images/claras-kitchen-bg-rainbow-rays.svg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
    padding-bottom: 56px;   /* clear the fixed footer */
}

/* ── Title ─────────────────────────────────────────────────────────────── */

/* The old gradient bar is dropped: the title now sits directly on the sky,
   as in the mockup. A white halo keeps it legible over the drifting clouds. */
#title {
    background: none;
    color: var(--gc-navy);
    font-size: clamp(1.9rem, 6.4vw, 4.6rem);
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 18px 12px 6px;
    text-shadow:
         2px 0 0 #FFF, -2px 0 0 #FFF, 0 2px 0 #FFF, 0 -2px 0 #FFF,
         2px 2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, -2px -2px 0 #FFF,
         0 6px 12px rgba(20, 39, 110, 0.28);
}

/* ── Game cards ────────────────────────────────────────────────────────── */

.container {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(10px, 1.6vw, 20px);
    padding: 8px clamp(8px, 1.6vw, 20px) 4px;
}

.left,
.right {
    flex: 1 1 260px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* No wrapper, no border, no box — the image IS the card. It grows to
   fill its share of the row (flex-grow on .left/.right above) instead of
   sitting small in the middle of the page. */
.game-button {
    display: block;
    /* style.css sets height: 150px on .game-button. That was never
       overridden here, so every card contained itself into a 150px-tall
       box no matter how wide its column was. 450px is that baseline
       enlarged by 200%. */
    height: 382px;
    width: auto;
    max-width: 100%;
    /* display:flex is commented out on .left/.right in style.css, so
       align-items:center never applied and the card sat left-aligned
       while the links below it centered on the inherited text-align. */
    margin-inline: auto;
    aspect-ratio: 427 / 591;
    min-width: 0;
    border: none;
    border-radius: 20px;
    background: none;
    padding: 0;
    font-size: 0;              /* hides the emoji fallback behind the art */
    flex: 0 0 auto;
}

.game-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
}

.game-button:hover,
.game-button:focus-visible {
    transform: scale(1.05);
    opacity: 1;
    outline: none;
}

.game-button:focus-visible img {
    box-shadow: 0 0 0 5px var(--gc-navy);
}

/* Game name stays real text — never baked into the artwork — so it scales
   with the player's font settings and reaches a screen reader. */
.left p,
.right p {
    margin-top: 0;
    flex: 1 1 auto;
    align-self: center;
    color: var(--gc-navy);
    font-size: clamp(1.15rem, 3.4vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

/* ── Voice launcher ────────────────────────────────────────────────────── */

.voice-launcher {
    border: 4px solid var(--gc-navy-line);
    border-radius: 26px;
    background: var(--gc-cream);
    box-shadow: 0 10px 26px rgba(20, 39, 110, 0.28);
    margin: 14px auto 76px;
}

.voice-launcher h2 {
    color: var(--gc-navy);
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    font-weight: 900;
}

#voice-mode-summary {
    color: var(--gc-navy);
}

#voice-status {
    color: var(--gc-navy);
    background: #FFF6DC;
    border-radius: 999px;
    padding: 8px 18px;
    display: inline-block;
}

.voice-game-select,
#voice-start-btn {
    border-radius: 999px;
    border: 3px solid var(--gc-navy-line);
    color: var(--gc-navy);
    font-weight: 900;
    font-size: clamp(1rem, 2.6vw, 1.5rem);
    padding: 12px 26px;
}

.voice-game-select {
    border-color: var(--gc-blue-line);
}

/* White on #C51B54 is 5.7:1 — the mockup's lighter pink would not have
   cleared AA for the selected state. */
.voice-game-select.is-selected {
    background: var(--gc-pink-fill);
    border-color: var(--gc-pink-fill);
    color: #FFFFFF;
}

#voice-start-btn {
    background: var(--gc-yellow);
    border-color: #C79A00;
    box-shadow: 0 5px 0 #C79A00;
    width: min(100%, 460px);
}

#voice-start-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #C79A00;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer {
    background: var(--gc-footer);
    color: #DCE4FF;
    font-weight: 600;
    padding: 8px 0;
}

.footer a {
    color: #8FD4F5;
}

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .container {
        flex-direction: column;
        align-items: center;
    }

    /* flex-basis governs height, not width, once .container switches to
       flex-direction: column above — so width has to be set explicitly
       here rather than relying on the row-mode flex-grow in the main
       ruleset. min(92vw, 380px) keeps every card big on a phone screen
       without ever touching the edges. */
    .left,
    .right {
        width: min(92vw, 380px);
        height: auto;
    }
}