/* ============================================================================
   claraskitchen.theme.css
   Visual theme for Clara's Kitchen. Loaded AFTER the inline <style> block in
   claraskitchen.html so it layers over the original rules rather than
   replacing them — the original CSS stays intact and removing this one <link>
   restores the previous look exactly.

   Palette is taken from the Clara's Kitchen mockup, with two deliberate
   departures noted inline where the mockup colors would not have cleared
   contrast for low-vision players.
   ========================================================================= */

:root {
    --ck-navy:        #14276E;
    --ck-navy-line:   #1B2E7A;
    --ck-pink:        #FBD3E0;
    --ck-pink-line:   #E8548A;
    --ck-pink-deep:   #E5306E;   /* accents only — too light for white text */
    /* Banner gradient runs deeper than the mockup's #E5306E → #F79A2B, which
       put white text at 2.2:1 on the orange end. These ends measure 5.7:1 and
       4.6:1, so the round's instruction stays readable across the whole bar. */
    --ck-banner-from: #C51B54;
    --ck-banner-to:   #B85C05;
    --ck-yellow:      #FFD426;
    --ck-cream:       #FDF6EC;
    --ck-purple:      #6B58B6;
    --ck-purple-line: #4A3A8C;
    /*--ck-sky-top:     #8FD4F5;*/
    --ck-sky-bot:     #BEE7FB;
    --ck-sky-top: rgba(205, 233, 250, 0.25);
    --ck-footer:      #14205A;
    --ck-card-radius: 16px;
}

/* ── Page ──────────────────────────────────────────────────────────────── */

/* The original inline CSS never set box-sizing, so every min-width/min-height
   below is a content-box value; padding and border add on top of it. That
   was fine at the original scale but at the sizes the theme first shipped
   with (ingredient icons up to 64px, button icons up to 80px, inflated
   header/banner text) the tray and control bar grew wider and taller than a
   typical screen — 10 tiles per row overflowed sideways and the control
   buttons ran past the bottom of the viewport. Everything below is resized
   to fit one screen; see the ingredient/button rules further down. */
html, body {
    overflow-x: hidden;
}

/* The header (sticky) and footer (fixed) are the only elements with their own
   sizing rule; everything else was plain block flow with auto margins, so the
   tray and control bar only ever grew as tall as their own content needed —
   never taller — and left whatever the viewport didn't use as bare background
   below the Mix/Bake/Serve row. Making body a column flexbox with a definite
   min-height gives that leftover space somewhere to go: it's handed to the
   ingredient tray (the one flex-grow item) instead of sitting empty. Every
   modal, the leaderboard overlay, and the footer are position:fixed already,
   so they fall out of flex layout untouched by this change. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ck-sky-bot);
    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: 44px;   /* clear the fixed footer */
}

/* The lime debug borders go away; sections become floating cards. */
.game-section {
    border: none;
    border-radius: var(--ck-card-radius);
    background: transparent;
    padding: 0;
    margin: 8px auto;
   
}

/* ── Sticky header ─────────────────────────────────────────────────────── */

/* Solid sky gradient rather than transparency: content scrolling underneath a
   see-through header is exactly the kind of low-contrast smear this audience
   cannot read. It matches the top of the background art, so it reads as sky. */
#sticky-header {
    flex: 0 0 auto;
    background: linear-gradient(180deg, var(--ck-sky-top) 0%, var(--ck-sky-bot) 100%);
     padding: 6px 0 6px;
    box-shadow: 0 4px 14px rgba(20, 39, 110, 0.25);
}

#sticky-header .game-section {
    padding: 0;
    margin: 6px auto;
}

/* Title bar — rounded pink pill with a white inner edge */
#sticky-header .ck-title-bar {
    background: var(--ck-pink);
    border: 3px solid var(--ck-pink-line);
    box-shadow: inset 0 0 0 3px #FFFFFF, 0 4px 10px rgba(20, 39, 110, 0.18);
    border-radius: 20px;
    padding: 6px 14px 8px;
}

/* Was clamp(22px, 5vw, 48px) — nearly triple the original title size and the
   single biggest contributor to the page running taller than the screen. */
#header {
    font-size: clamp(16px, 3.4vw, 28px);
    color: var(--ck-navy);
    font-weight: 900;
    letter-spacing: 0.5px;
    padding: 0;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65);
}

#game-info {
    font-size: clamp(11px, 2.1vw, 16px);
    color: var(--ck-navy);
    font-weight: 800;
    margin-top: 2px;
}

/* ── Banners ───────────────────────────────────────────────────────────── */

/* Live bug (2026-08-10): this file is a <link> loaded AFTER the inline
   <style> block in claraskitchen.html, so at equal specificity (#id vs
   #id) these rules were winning the cascade — the pink gradient pill and
   yellow pill defined here silently overrode the marquee's plain-span,
   large-font treatment (#ck-status-marquee-track in the inline style),
   reproducing the exact small side-by-side pill look the marquee was
   built to replace, on every load. #challenge-banner and #status-message
   are now plain spans INSIDE that one scrolling marquee row — see
   #ck-header-row2/#ck-status-marquee-track — so no color, background,
   padding, border-radius, or font-size belongs here anymore; all of that
   now comes from the marquee track itself so the two stay in sync. */
#challenge-banner {
    font-weight: 900;
}

/* Empty banner shouldn't render as a stray gap in the marquee's flex row. */
#challenge-banner:empty {
    display: none;
}

#status-message {
    font-weight: 900;
}

#status-message:empty {
    display: none;
}

/* Missing entirely until now — the THIRD status item in the marquee row
   (sound captions) was left completely unstyled here, so it still rendered
   at gamecenter-sound-captions.js's runtime-injected small chip size
   (#gc-sound-caption.gc-caption-inline — an 11-15px pill with its own dark
   background) instead of matching the other two items' large marquee font.
   Ported directly from gonefishing.theme.css, which already carried this
   fix. Two IDs here beats the injected one-ID-one-class rule regardless of
   load order. */
#gc-caption-slot #gc-sound-caption.gc-caption-inline {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: none;
    vertical-align: baseline;
}

/* ── Ingredient tray ───────────────────────────────────────────────────── */

/* The wrapper is the flex-grow item: it claims every pixel of vertical space
   the header, banner/status bar, and control row don't need, then centers
   the tray card inside it. #ingredient-selection sizes itself with height:
   100% of that box so the card — and, via the container query below, the
   tiles inside it — actually grows into the space instead of floating in the
   top of it. container-type: size is safe here specifically because this
   wrapper's own size comes from flex-grow, not from its content, so there's
   no circular sizing dependency between the container and what queries it. */
#ingredient-selection-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    container-type: size;
    container-name: ck-tray;
}

/* The tray is drawn on #ingredient-selection itself rather than its wrapper,
   so no :has() support is required. */
#ingredient-selection {
    background: var(--ck-cream);
    border: 4px solid var(--ck-navy-line);
    border-radius: var(--ck-card-radius);
    box-shadow: 0 6px 18px rgba(20, 39, 110, 0.3);
    box-sizing: border-box;
    height: 100%;
    align-self: stretch;
    overflow: hidden;

    /* The tile grid is a DIVISION of this card, not a guess at tile size.
       --ck-cols / --ck-rows are the only two numbers; every breakpoint below
       just re-declares them. Columns are 1fr and rows are 1fr, so the 22 tiles
       partition the card's real width and height exactly — whatever that box
       turns out to be. Nothing is capped, so no leftover band can appear.

       Previous approach and why it failed: auto-fit + minmax with a bounded
       max track (92px) plus align-content:center. The bounded max meant tiles
       could not exceed 92px however much room existed, and centring parked the
       two short rows in the middle of a tall card — that was the empty ~40%.
       min-width:90vw also silently beat the max-width cap, since min-width
       always wins over max-width in CSS. */
    --ck-cols: 8;
    --ck-rows: 3;

    display: grid;
    grid-template-columns: repeat(var(--ck-cols), 1fr);
    grid-auto-rows: 1fr;
    justify-content: stretch;
    align-content: stretch;
    gap: clamp(4px, 0.9vmin, 14px);
    padding: clamp(6px, 1.2vmin, 18px);
    width: 100%;
    margin: 0;

    /* Explicit reset, not redundant: the inline <style> block in
       claraskitchen.html sets max-width: clamp(300px, 64vw, 1020px) on this
       same selector. This file no longer declares max-width at all, so without
       this line the inline 1020px cap would win again and re-create the empty
       band on any monitor wider than 1020px. */
    max-width: none;
}

/* box-sizing: border-box makes min-width/min-height the FULL footprint
   (border + padding included), so 10 tiles per row add up to a known,
   screen-safe total instead of silently growing past it. The icon itself
   (font-size) was clamp(40px, 8vw, 64px) in the original inline CSS — nearly
   the size of the whole tile is now — so it's overridden here too. */
.ingredient {
    /* <button> now, so reset the UA/button defaults the tile does not want.
       font-family does NOT inherit into a button by default. */
    font-family: inherit;
    font-weight: normal;
    color: inherit;
    box-sizing: border-box;
    border: 2px solid var(--ck-navy-line);
    border-radius: 10px;
    background: #FFFFFF;
    padding: 0;
    /* aspect-ratio: 1/1 is GONE and that is the point. A square tile can only
       be as tall as it is wide, so once the grid gave each tile its column
       width the tile refused the remaining height and handed it back as empty
       card. Filling the cell in both axes (width+height 100%) lets a tile go
       slightly oblong and, in exchange, the card is genuinely full.

       min-width/min-height are 0 for the same reason in reverse: an 80px floor
       on 8 columns forces 640px of tile onto a 390px phone and overflows.
       Real minimum size is enforced by the column count per breakpoint.
       line-height:1 stays load-bearing — an emoji's default line box is
       ~1.2-1.5x font-size and would push the glyph out of the tile. */
    width: 100%;
    height: 100%;
    aspect-ratio: auto;   /* cancels the inline <style> block's 1/1 — see above */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    /* --ck-glyph is set in px by claraskitchen.trayfit.js from the measured
       cell. The clamp is the no-JS fallback only. */
    font-size: var(--ck-glyph, clamp(40px, 9vmin, 120px));
    line-height: 1;
    box-shadow: 0 2px 0 rgba(20, 46, 122, 0.18);
}

.ingredient:focus-visible {
    /* Visible keyboard focus. These players cannot rely on a faint default
       ring, so it is a thick gold outline, same as the fishing board. */
    outline: 4px solid #FFD700;
    outline-offset: 2px;
}

.ingredient:hover,
.ingredient:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 rgba(20, 46, 122, 0.25);
    outline: none;
}

.ingredient.selected {
    border: 5px solid var(--ck-pink-deep);
    background: #FFE9F1;
    box-shadow: 0 0 0 4px rgba(229, 48, 110, 0.28), 0 4px 0 rgba(20, 46, 122, 0.22);
}

/* ── Control bar ───────────────────────────────────────────────────────── */

/* Fixed to its own content height — it's the tray that absorbs the leftover
   vertical space, not the button row. */
#controls-wrap {
    flex: 0 0 auto;
}

/* Same reasoning as the tray: styled directly, no :has() dependency. */
#controls {
    background: var(--ck-pink);
    border: 3px solid var(--ck-pink-line);
    border-radius: var(--ck-card-radius);
    box-shadow: 0 6px 18px rgba(20, 39, 110, 0.26);
    padding: 10px 8px;
    margin-top: 0;
    /* Narrower than the previous clamp(8px, 1.6vw, 20px): the buttons now
       stretch to fill the row, so the gap is the only thing competing with
       them for width. */
    gap: clamp(6px, 0.8vw, 14px);
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

/* Original inline CSS: font-size (icon) clamp(40px, 10vw, 80px), min-width/
   min-height 80px, padding 20px — three buttons that size, plus their icon
   glyphs, plus large labels, ran taller than most screens and got cut off at
   the bottom. box-sizing: border-box so min-width/min-height is the whole
   button footprint, sized down to fit a single screen. */
.button {
    box-sizing: border-box;
    border: 3px solid var(--ck-purple-line);
    border-radius: 14px;
    padding: clamp(4px, 1vmin, 10px) clamp(8px, 1.6vmin, 16px);
    /* vmin, not vw. Mix / Bake / Serve are the three controls that must never
       be pushed off-screen, and sizing them to width alone did exactly that on
       a short window. */
    min-height: clamp(62px, 11vmin, 132px);
    font-size: clamp(32px, 7.6vmin, 88px);
    line-height: 1;
    box-shadow: 0 4px 0 var(--ck-purple-line);

    /* Fill the row. The three buttons were content-width and centred, which
       left most of the pink card empty. flex:1 1 0 splits the row evenly
       between them; min-width:0 lets that split win over the intrinsic width
       of the icon+label so the row can never overflow the card — on a narrow
       phone the buttons shrink together instead of spilling. The max-width is
       the "without going over" stop at the other extreme: on a very wide
       monitor an uncapped third of the row would be a ~700px button.
       The old min-width: clamp(56px, 10vmin, 120px) is removed rather than
       left above this — with min-width: 0 in the same rule it was dead code,
       and a floor of 120px x3 would reintroduce overflow on a 320px screen.
       Touch-target size is now carried by min-height, which is unchanged in
       kind and slightly larger. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 380px;
}

/* The mockup's lilac (#9B8FD4) under white text lands at ~2.9:1, which is
   below AA for this audience, so the fill is deepened to #6B58B6 (~5.9:1)
   while keeping the same hue family as the mockup. */
.button:enabled {
    background: var(--ck-purple) !important;
    color: #FFFFFF !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.button:enabled:hover {
    filter: brightness(1.12);
}

.button:enabled:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--ck-purple-line);
}

/* Preserves the existing legible-disabled treatment; only the frame changes. */
.button:disabled {
    background: #5A5A5A !important;
    color: #E8E8E8 !important;
    border-color: #3D3D3D;
    box-shadow: 0 4px 0 #3D3D3D;
    opacity: 0.85;
}

.button span {
    font-size: clamp(10px, 2.1vw, 4RE);
    font-weight: 900;
    margin-top: 2px;
}

/* ── Chrome: badge, hamburger, footer ──────────────────────────────────── */

#user-badge {
    background: #FFFFFF;
    border: 3px solid var(--ck-pink-line);
    border-radius: 999px;
    padding: 4px 14px 4px 8px;
    color: var(--ck-navy);
    top: 4vh;
    left: 6vw;
    font-size: clamp(12px, 2.2vw, 18px);
    box-shadow: 0 2px 6px rgba(20, 39, 110, 0.2);
}

#hamburger-btn {
    background: #FFFFFF;
    border: 3px solid var(--ck-pink-line);
    border-radius: 12px;
    color: var(--ck-navy);
    top: 2vw;
    right: 7vw;
    padding: 6px 14px;
    box-shadow: 0 2px 6px rgba(20, 39, 110, 0.2);
}

#hamburger-btn:hover {
    background: var(--ck-pink);
}

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

.footer a {
    color: #8FD4F5;
}

/* ── Modals ────────────────────────────────────────────────────────────── */

#result-modal {
    background: var(--ck-cream);
    border: 5px solid var(--ck-navy-line);
    border-radius: 22px;
}

#result-modal button {
    background: var(--ck-yellow);
    color: var(--ck-navy);
    border-radius: 14px;
}

.name-entry-modal {
    border: 5px solid var(--ck-pink-line);
    border-radius: 22px;
}

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

@media (max-width: 640px) {
    body {
        background-attachment: scroll;
        background-position: center 30%;
    }

    .ingredient {
        padding: 2px;
    }

    .button {
        min-width: 62px;
        min-height: 52px;
        padding: 5px 10px;
    }
}

/* ── Short viewports ──────────────────────────────────────────────────────────
   Height-based, and LAST in the file so nothing overrides them. Sizing by width
   alone let the tile grid and the Mix/Bake/Serve row run off the bottom of a
   laptop or a phone held sideways. */
@media (max-height: 800px) {
    #ingredient-selection {
        --ck-cols: 8;
        --ck-rows: 3;
    }
    .button {
        font-size: clamp(26px, 5vmin, 56px);
        min-width: clamp(50px, 8vmin, 84px);
        min-height: clamp(50px, 8vmin, 84px);
    }
}

@media (max-height: 620px) {
    #ingredient-selection {
        --ck-cols: 11;
        --ck-rows: 2;
        gap: 4px;
        padding: 4px;
    }
    .ingredient { border-width: 2px; }
    .button {
        font-size: clamp(22px, 4vmin, 40px);
        min-width: 46px;
        min-height: 42px;
        padding: 4px 8px;
    }
}

/* ── Fill the real leftover space, not a viewport guess ───────────────────
   Everything above sizes tiles off vmin — a guess at how much room the tray
   will get, made without knowing how tall the header/banner/status bar or
   button row actually render. That guess is what left roughly half the
   screen empty: on a screen with a lot of vertical headroom the vmin clamps
   hit their max long before the tray's real flex-grown box was full.

   #ingredient-selection-wrap's height is no longer a guess — it's exactly
   "whatever the header and control row didn't use" (see the flex rules
   above), and container-type: size on that wrapper exposes its true pixel
   box to its children as cqh/cqw. Sizing the tiles from THAT instead of vmin
   means they grow to fill the actual box on a roomy screen and shrink to fit
   it on a cramped one, no separate breakpoint guesses required. min() of a
   cqh term and a cqw term keeps a tile from overgrowing in one axis on a
   window that's generous in that axis but tight in the other (e.g. narrow
   and tall, or short and wide) — the tighter dimension always wins.

   Guarded behind @supports so a browser without container query support
   silently keeps the vmin sizing above — no regression, only an upgrade. */
@supports (container-type: size) {
    /* Column count by WIDTH. Rows are just ceil(22 / cols) — stated explicitly
       because the emoji formula below needs the row count, and CSS cannot
       count grid items. Fewer columns = fatter tiles; the numbers are chosen
       so a tile never drops under roughly 120px on the screen size it targets.

       The min-height guard matters: a phone held sideways is narrow AND short,
       and without it the width rule would ask for 6 rows in ~250px of tray.
       Short viewports keep the wide/flat 11x2 set by the max-height block. */
    @media (max-width: 1100px) and (min-height: 801px) { #ingredient-selection { --ck-cols: 6; --ck-rows: 4; } }
    @media (max-width: 820px)  and (min-height: 801px) { #ingredient-selection { --ck-cols: 5; --ck-rows: 5; } }
    @media (max-width: 640px)  and (min-height: 801px) { #ingredient-selection { --ck-cols: 4; --ck-rows: 6; } }

    /* Emoji sized from the TILE, and the tile is exactly one cell of the grid:
       cell width  = 100cqw / cols
       cell height = 100cqh / rows
       0.6 of the smaller of those keeps the glyph inside its tile with room
       for the border and the selected-state ring, on either axis. cq units
       measure #ingredient-selection-wrap's real flex-grown box, so this tracks
       the actual space rather than a viewport guess. The 150px ceiling is the
       "not too big" stop; the 28px floor is the legibility stop. */
    .ingredient {
        font-size: var(--ck-glyph, clamp(28px, min(calc(60cqw / var(--ck-cols)),
                                                   calc(60cqh / var(--ck-rows))), 150px));
    }
}