/* Frostbite — icy palette + board/keyboard/legend styling. The card shell
   itself (.gb-frame/.gb-frame-top/.gb-play-wrap/.gb-overlay etc.) comes from
   the shared ../../css/game-board.css template, not from here — this file
   only supplies the theme palette and the pieces specific to a word game
   (legend, letter tiles, on-screen keyboard). */

.frostbite-theme {
    --accent:        #2FA8E0;
    --accent-dark:   #1C7BAE;
    --accent-pink:   #B8E6F5;
    --accent-blue:   #2FA8E0;
    --accent-yellow: #E0F4FB;

    --bg:            #EAF6FB;
    --card:          #FFFFFF;
    --card-alt:      #F2FAFD;
    --border:        #C9E8F5;
    --text:          #1B3A4B;
    --muted:         #6E8FA0;
    --subtle:        #E0F4FB;

    /* Distinct hues per feedback state — frozen/thin_ice/open_water must
       read apart from each other at a glance, not just "two shades of
       blue" (the original complaint). Amber for thin_ice gives it the
       same "close but not quite" read Wordle's yellow has. */
    --fb-frozen:     #2FA8E0;
    --fb-thin-ice:   #F2B705;
    --fb-open-water: #3E5868;
}

.frostbite-theme body,
body.frostbite-theme {
    background:
        radial-gradient(ellipse 480px 260px at 10% 0%, rgba(47, 168, 224, 0.12), transparent 60%),
        radial-gradient(ellipse 420px 280px at 95% 10%, rgba(184, 230, 245, 0.25), transparent 60%),
        var(--bg);
}

/* .gb-frame-top's gradient reads --accent/--accent-dark from the theme
   above; .gb-mode-btn.is-active and .gb-time-bar-label read --accent too,
   so they automatically pick up Frostbite's blue without overriding here. */

/* ── Legend — explicit swatches so the three feedback states never have to
   be inferred from color alone. ─────────────────────────────────────────── */

.fb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 4px;
}

.fb-legend-item { display: flex; align-items: center; gap: 6px; }

.fb-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.fb-legend-swatch.frozen     { background: var(--fb-frozen); }
.fb-legend-swatch.thin_ice   { background: var(--fb-thin-ice); }
.fb-legend-swatch.open_water { background: var(--fb-open-water); }

/* ── Guess board ──────────────────────────────────────────────────────────── */

.fb-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    width: min(100%, 300px);
    margin: 0 auto 18px;
}

.fb-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.fb-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition: transform 250ms ease, background-color 250ms ease, border-color 250ms ease;
}

.fb-tile.fb-pending { animation: fb-pop 120ms ease; }

.fb-tile.frozen     { background: var(--fb-frozen); border-color: var(--fb-frozen); color: #fff; }
.fb-tile.thin_ice   { background: var(--fb-thin-ice); border-color: var(--fb-thin-ice); color: var(--text); }
.fb-tile.open_water { background: var(--fb-open-water); border-color: var(--fb-open-water); color: #fff; }

@keyframes fb-pop {
    0%   { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* ── On-screen keyboard ───────────────────────────────────────────────────── */

.fb-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 0 auto 16px;
}

.fb-kb-row { display: flex; gap: 5px; justify-content: center; }

.fb-key {
    flex: 1;
    max-width: 38px;
    padding: 10px 0;
    border-radius: 6px;
    border: none;
    background: var(--subtle);
    color: var(--text);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease;
}

.fb-key.fb-key-wide { max-width: 56px; font-size: 0.72em; }

.fb-key.frozen     { background: var(--fb-frozen); color: #fff; }
.fb-key.thin_ice   { background: var(--fb-thin-ice); color: var(--text); }
.fb-key.open_water { background: var(--fb-open-water); color: #fff; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */

.fb-guest-banner {
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fb-google-btn-slot { margin-top: 4px; }

/* Deliberately the opposite of a primary button — Submit is the one action
   the game wants you to reach for; giving up on a word is secondary. */
.fb-new-word-link {
    display: block;
    margin: 8px auto 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.82em;
    text-decoration: underline;
    cursor: pointer;
}

.fb-new-word-link:hover { color: var(--text); }