/* ============================================================================
   gonefishing.theme.css
   Visual theme for Will's Gone Fishin'. Loaded AFTER the inline <style> block
   in gonefishing.html so it layers over the original rules — removing the one
   <link> restores the previous appearance exactly.

   Shares its navy/white/yellow palette with the home screen and Clara's
   Kitchen so the three pages read as one product.
   ========================================================================= */

:root {
    --gf-navy:       #14276E;
    --gf-navy-line:  #1B3A8A;
    --gf-navy-deep:  #0E2A6B;
    --gf-cell:       #AFDCF6;
    --gf-cell-line:  #3E86D8;
    --gf-yellow:     #FFD426;
    --gf-footer:     #0B1A4A;
}

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

/* Same lesson as Clara's Kitchen: the first pass of this theme bumped title
   and stat text up well past the original inline sizes, and #header-row1's
   flex-wrap:wrap let title + timer + fish count + score break onto a second
   line the moment they didn't fit — which is exactly what pushed the grid
   and d-pad below the fold. Everything below is sized back down and the row
   is forced to stay on one line. */
/* No scrolling on any screen size — this is a single-screen play surface,
   not a document. gonefishing.boardfit.js sizes the board (and, with it,
   everything else on the page) to the real available space and corrects
   itself if anything still overflows, so overflow-y:hidden here is a
   guarantee, not a hope: if the board is ever wrong, the fix is in
   boardfit.js, not a scrollbar quietly appearing to hide the mistake. */
html, body {
    overflow: hidden;
    height: 100%;
}

body {
    background-color: #4FB3E8;
    background-image: url("../images/gone-fishin-bg-enhanced-animated.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 */
}

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

/* Solid surface-water tint rather than transparency: content scrolling behind
   a see-through header is exactly the low-contrast smear this audience can't
   read. It matches the top of the background art, so it reads as sky. */
#top-container {
    background: linear-gradient(180deg, rgba(205, 233, 250, 0.25) 0%, rgba(165, 218, 246, 0.75) 70%);
    padding: 6px 10px 8px;
    box-shadow: 0 4px 14px rgba(11, 26, 74, 0.3);
}

/* #header-main-row holds three grid columns: Go Fishing/Catch-a-fish on the
   left, the stats pill in the middle, an empty spacer on the right. 1fr /
   auto / 1fr is what keeps the stats pill at the TRUE horizontal centre of
   the header regardless of how wide the left group is — putting everything
   in one flex row and centring that whole row as a group was tried first,
   and it dragged the pill off-centre because the group's own combined width
   (buttons + pill) was what got centred, not the pill alone. The empty
   right-hand spacer only exists so its 1fr can balance the left column's
   1fr; deleting it would make the middle column drift left. */
#header-main-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* Right side must clear the hamburger button completely — it is ~50px
       wide sitting 14px from the edge, and the old 46-60px reserve was not
       enough, which is why the compass ended up underneath it. */
    padding: 0 clamp(76px, 9vw, 100px) 0 clamp(46px, 8vw, 60px);
    gap: 8px;
    margin-bottom: 4px;
}

#header-actions {
    display: flex;
    align-items: center;
    /* nowrap, not wrap — a quest label long enough to need two lines used to
       drop the quest banner onto its own row, growing #top-container's
       height. boardfit.js measures #board-area's top offset from whatever is
       stacked above it, so that extra row silently shrank the grid every
       time a longer quest came up. Truncation on #quest-banner below (rather
       than wrapping) is what keeps this row — and the board size that
       depends on its height — constant regardless of quest text length. */
    flex-wrap: nowrap;
    min-width: 0;
    gap: 8px;
    justify-self: end;   /* hugs the stats pill's left edge */
}

/* Holds the compass symbol. justify-self:CENTRE (not end) puts it midway
   between the stats pill and the hamburger, instead of jammed against the
   hamburger where the two overlapped. The row's right-hand padding below is
   what reserves the hamburger's own space, so nothing in this column can
   reach it. */
#header-spacer {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Pinned to the compass's OLD footprint (BUG 8) so the grid's
       1fr/auto/1fr columns don't reflow now that #header-compass itself is
       doubled — the enlarged image is centered on this box and allowed to
       overflow it visually via overflow: visible, without moving the
       anchor point or widening this column. */
    width: clamp(44px, 7vmin, 68px);
    height: clamp(44px, 7vmin, 68px);
    overflow: visible;
}

/* Title + stats — the white rounded card. Just this now; Go Fishing and the
   quest banner live in #header-actions to its left, not inside this pill,
   which is what keeps the pill centred (see #header-main-row above). */
#header-row1 {
    display: flex;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 3px solid var(--gf-navy-line);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(11, 26, 74, 0.22);
    color: var(--gf-navy);
    padding: 6px clamp(14px, 3vw, 28px);
    box-sizing: border-box;
    gap: clamp(6px, 1.4vw, 12px);
    justify-content: center;
    justify-self: center;
}

#game-title {
    color: var(--gf-navy);
    font-size: clamp(12px, 2.6vw, 20px);
    font-weight: 900;
    white-space: nowrap;
}

#timer,
#fish-count,
#score {
    color: var(--gf-navy);
    font-size: clamp(10px, 1.8vw, 14px);
    font-weight: 800;
    background: #EAF4FD;
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Used to be position:absolute (left:10vw, top:1vh) — floated out of the
   header's normal flow, which is what let #quest-banner sit "next to" it
   only by coincidence of screen position, not because they were actually
   related in the markup. Now that the quest banner is a real sibling in
   #header-row2, this needs to be an ordinary flex item so the two sit
   together as one row and wrap together on narrow screens instead of the
   button floating over whatever happens to be underneath it. */
#start-btn {
    background: var(--gf-navy-line);
    color: #FFFFFF;
    border: 3px solid var(--gf-navy-deep);
    border-radius: 12px;
    box-shadow: 0 4px 0 var(--gf-navy-deep);
    font-size: clamp(12px, 2.4vw, 17px);
    font-weight: 900;
    padding: 6px 16px;
    /* Never shrinks — #quest-banner is the one that gives up width (and
       truncates) when the row gets tight, not this button. */
    flex-shrink: 0;
}

#start-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--gf-navy-deep);
}

/* Header row 2 — previously an 11-15px pill for #message-box alone, with
   the quest clue on its own row below and sound captions in a tiny chip.
   Feature request: all three now share one full-width marquee row (see the
   #header-row2 / #status-marquee / #status-marquee-track mechanics in the
   inline <style> block in gonefishing.html) — this layer just supplies the
   palette so it matches the rest of the header instead of sitting bare. */
#header-row2 {
    background: rgba(255, 255, 255, 0.55);
    border-top: 3px solid var(--gf-navy-line);
    border-bottom: 3px solid var(--gf-navy-line);
}

/* The old #FFF1F1-on-#3accd3 pill combo does not carry over — that pairing
   was tuned for a small filled pill, and reads too light against this row's
   pale band. showMessage() still sets darkred/green inline per message;
   this is only the resting color when nothing overrides it. */
#message-box {
    color: var(--gf-navy-deep);
}

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

#quest-clue {
    color: var(--gf-navy);
}

/* gamecenter-sound-captions.js injects its own <style> tag at runtime, sized
   for the OLD small header (an 11-15px pill with its own dark background).
   That injected rule is #gc-sound-caption.gc-caption-inline — one ID plus
   one class. Two IDs here beats it regardless of load order, so the caption
   reads at the same large marquee size as everything else in this row
   instead of a tiny chip lost inside it. */
#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;
}

#user-badge {
    background: #FFFFFF;
    border: 3px solid var(--gf-navy-line);
    border-radius: 999px;
    padding: 3px 12px 3px 7px;
    color: var(--gf-navy);
    top: 10px;
    left: 14px;
    font-size: clamp(11px, 2vw, 15px);
    box-shadow: 0 2px 6px rgba(11, 26, 74, 0.22);
}

#hamburger-btn {
    background: #FFFFFF;
    border: 3px solid var(--gf-navy-line);
    border-radius: 10px;
    color: var(--gf-navy);
    top: 10px;
    right: 14px;
    padding: 4px 12px;
    box-shadow: 0 2px 6px rgba(11, 26, 74, 0.22);
}

/* ── Catch bucket ──────────────────────────────────────────────────────── */

#fish-bucket-section {
    background: rgba(255, 255, 255, 0.94);
    border: 3px solid var(--gf-navy-line);
    border-radius: 14px;
    color: blue;
    font-size: clamp(11px, 2vw, 15px);
    padding: 5px 12px;
    margin-top: 6px;
    box-shadow: 0 4px 12px rgba(11, 26, 74, 0.2);
}

/* ── Play grid ─────────────────────────────────────────────────────────── */

#game-container {
    /* SOLID now, not translucent. The 0.55/0.62 alphas existed only so the
       compass rose behind the board could show through; with the compass
       moved to the header there is nothing behind the board to reveal, and
       translucency was costing real contrast for no benefit. Full-strength
       colour is what this audience needs. */
    background-color: var(--gf-navy-line);
    border: 4px solid var(--gf-navy);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(11, 26, 74, 0.36);
    padding: 4px;
    gap: 2px;
    margin: 0;
    /* NO max-width here. gonefishing.boardfit.js sets width AND height to the
       same explicit px value every time it runs, and only that keeps the
       board square. A max-width caps width but not height, so the board would
       render as a tall rectangle instead of a square — smaller than the space
       actually available, with the extra height pushing the catch bucket past
       the bottom of the viewport. This exact rule used to read
       max-width: min(94vw, 420px) — that was the bug. */
}

.grid-cell {
    background-color: var(--gf-cell);
    border: 1px solid var(--gf-cell-line);
    border-radius: 3px;
}

.boat {
    /* Deliberately NOT translucent. */
    background-color: var(--gf-yellow);
    border-radius: 4px;
}

/* ── D-pad ─────────────────────────────────────────────────────────────── */

/* Steering is now the compass rose behind the board. The blue triangles are
   gone entirely; what remains are four transparent hit areas sitting exactly
   over the compass's N, E, S and W points.

   This file is authoritative for how they look — it loads after the inline
   <style> block in gonefishing.html, so anything set there for .dpad-btn loses
   to whatever is written here regardless of specificity. */
.dpad-btn {
    /* No triangle, no box, no colour. The compass rose behind the board is the
       visual; these are just the hit areas sitting over its N, E, S and W
       points. They keep their exact band size so boardfit.js computes the same
       board dimensions as before — the grid does not move or resize. */
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 14px;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    min-height: 0;
    color: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* A press needs to be felt. Gold wash matches the compass and reads at low
   vision without covering the artwork. */
.dpad-btn:hover {
    background: rgba(255, 212, 38, 0.16);
}

.dpad-btn:active {
    background: rgba(255, 212, 38, 0.30);
}

/* Keyboard focus must be obvious — the button itself is invisible. */
.dpad-btn:focus-visible {
    outline: 4px solid #FFD426;
    outline-offset: -4px;
    background: rgba(255, 212, 38, 0.18);
}

/* The compass art already shows N, E, S and W. Rendering our own letters on
   top would double them up, so the label is hidden VISUALLY but kept in the
   accessibility tree — a screen reader still announces the control. */
.dpad-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dpad-btn:hover {
    background: none;
    color: var(--gf-navy-line);
}

.dpad-btn:active {
    background: none;
    box-shadow: none;
    transform: scale(0.96);
}

/* Up / Down span the board's full WIDTH; Left / Right its full HEIGHT.
   justify-self / align-self are needed because #board-area centres its items. */
.dpad-h {
    justify-self: stretch;
    width: 100%;
    height: var(--dpad-band);
}

.dpad-v {
    align-self: stretch;
    height: 100%;
    width: var(--dpad-band);
}

.fishing-toggle-btn {
    min-width: 96px;
}

/* Was a green fill on the box; with no box left, the state is carried by the
   triangle's colour instead. #2E7D32 against the light water is 5.0:1. */
.dpad-btn.active {
    background: none;
    box-shadow: none;
    color: #2E7D32;
}

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

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

.footer a {
    color: #8FD4F5;
}

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

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

    #header-row1 {
        padding: 5px 34px;
        gap: 5px;
    }

    /* No square minimums on a phone either — the bars get their size from
       --dpad-band and from stretching along the board's edge. A 42px minimum
       here would only fight that. */
    .dpad-btn {
        min-width: 0;
        min-height: 0;
    }
}