:root {
    --bg: #eef2f7;
    --fg: #1f2a3a;
    --accent: #3d5a80;
    --accent-dark: #2c4262;
    --tile-edge: #b9c4d4;
    --muted: #6b7689;
    --card: #ffffff;
    --ok: #2f7d4f;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}
body {
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    overflow: hidden;          /* the board sizes against the viewport */
}

.page {
    height: 100vh;
    padding: .9rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}
.top { flex: 0 0 auto; }

/* --- Header ----------------------------------------------------------- */
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--tile-edge);
    flex-wrap: wrap;
}
.top h1 { margin: 0; font-size: 1.4rem; color: var(--accent); }
/* Compact brand — the logo had no size rule (hue.css doesn't load the shared
   boggle.css), so the SVG rendered at its default size and bloated the header. */
.brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1.1rem; font-weight: 800;
    color: var(--accent-dark); text-decoration: none;
}
.brand:hover { opacity: .85; }
.cdg-logo { width: 1.6em; height: 1.6em; flex: none; display: block; }
.top nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.top nav a { color: var(--accent); text-decoration: none; font-size: .95rem; font-weight: 600; }
.top nav a:hover { text-decoration: underline; }
.controls {
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}

.diff-pills { display: flex; gap: .4rem; }
.diff-pill {
    padding: .45rem .85rem;
    background: white;
    border: 1px solid var(--tile-edge);
    border-radius: 6px;
    cursor: pointer;
    color: var(--fg);
    font-size: .9rem;
    font-weight: 500;
    transition: all .1s;
}
.diff-pill:hover { background: #f0f4fa; }
.diff-pill.active {
    background: var(--accent); color: white;
    border-color: var(--accent-dark);
}

.hud {
    display: flex; gap: .5rem;
    font-variant-numeric: tabular-nums;
}
.hud-cell {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 6px;
    padding: .35rem .8rem;
    min-width: 70px;
    text-align: center;
}
.hud-cell .label {
    display: block;
    font-size: .65rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.hud-cell #timer, .hud-cell #moves {
    font-size: 1.1rem; font-weight: 700;
}

.btn {
    padding: .55rem 1.1rem;
    background: var(--accent); color: white;
    border: 0; border-radius: 6px;
    font-size: .95rem; font-weight: 600;
    cursor: pointer;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary {
    background: white;
    color: var(--accent);
    border: 1px solid var(--tile-edge);
}
.btn.secondary:hover {
    background: #f0f4fa;
    border-color: var(--accent);
}

/* Inline "Solved!" badge — replaces the old blocking modal. Lives in
   the top bar so the player can keep admiring the finished gradient. */
.win-banner {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--ok);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    animation: win-pop .55s cubic-bezier(.18, .89, .32, 1.28);
}
.win-banner[hidden] { display: none; }
.win-banner .check { font-size: 1.25rem; line-height: 1; }
@keyframes win-pop {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
body.won .hud-cell  { opacity: .55; }
body.won .tile      { cursor: default; }

/* --- Layout: buttons | board | info ---------------------------------- */
.play-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 13rem 1fr 14rem;
    grid-template-rows: 1fr;      /* fill all remaining viewport height */
    gap: 1.25rem;
    padding-top: .9rem;
    min-height: 0;
    align-items: stretch;
}

/* Left column — game buttons + difficulty pills */
.actions-panel {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 8px;
    padding: 1rem .9rem;
    display: flex; flex-direction: column; gap: .5rem;
    overflow-y: auto;
    min-height: 0;
}
.actions-panel .btn { width: 100%; padding: .55rem .7rem; }
.actions-panel .diff-pills {
    display: flex; flex-direction: column; gap: .35rem;
    margin-top: 1rem;
}
.actions-panel .diff-pill {
    width: 100%; text-align: left;
}
.actions-panel .hint {
    margin-top: 1rem; padding: 0;
}

/* Center column — board + win banner + toast.
   board-wrap takes ALL the remaining space (flex: 1) so the JS resize
   has a real, full-height container to measure against. */
.board-area {
    display: flex; flex-direction: column; align-items: stretch;
    gap: .75rem; min-height: 0;
    height: 100%;
}
.board-area .board-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;            /* override the legacy 100% rule below */
    display: flex; align-items: center; justify-content: center;
}
/* The Solved badge sits in flow ALONG THE TOP of the board (a centered pill),
   not stretched full-width and not overlapping the board. The board is resized
   on win (hue.js) so it shrinks to fit the space left below this banner. */
.board-area .win-banner { flex: 0 0 auto; align-self: center; }
.board-area .toast { flex: 0 0 auto; }

/* Right column — stats + difficulty list */
.info-panel {
    display: flex; flex-direction: column; gap: 1rem;
    overflow-y: auto; min-height: 0;
}
.info-card {
    background: var(--card);
    border: 1px solid var(--tile-edge);
    border-radius: 8px;
    padding: .85rem 1rem;
}
.info-card h3 {
    margin: 0 0 .5rem;
    color: var(--accent); font-size: 1rem;
}
.record-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin-bottom: .5rem;
}
.record-cell {
    display: flex; flex-direction: column;
    align-items: center;
    background: rgba(61, 90, 128, .06);
    border-radius: 6px;
    padding: .5rem;
}
.record-cell .label {
    font-size: .65rem; text-transform: uppercase;
    color: var(--muted); letter-spacing: .05em;
}
.record-cell .big {
    font-size: 1.4rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* The old .side-panel rules still match the dropped panels in legacy
   CSS, so keep a stub so they aren't flagged unstyled if anything else
   relies on them. */
.side-panel { background: var(--card); border: 1px solid var(--tile-edge);
              border-radius: 8px; padding: 1rem 1.1rem; }
.side-panel h3 {
    margin: 0 0 .5rem; color: var(--accent);
    font-size: 1rem;
}
.hint {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.4;
    margin-top: 1rem;
}

.stats-row {
    display: flex; justify-content: space-between;
    align-items: baseline;
    padding: .35rem 0;
    border-bottom: 1px solid #e3e8f0;
    font-size: .9rem;
}
.stats-row:last-child { border-bottom: 0; }
.stats-row .name { font-weight: 600; }
.stats-row .meta {
    color: var(--muted); font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.stats-row.empty .meta { font-style: italic; }

.legend-row {
    padding: .4rem 0;
    border-bottom: 1px solid #e3e8f0;
    font-size: .9rem;
}
.legend-row:last-child { border-bottom: 0; }
.legend-row .name { font-weight: 600; display: block; }
.legend-row .meta { color: var(--muted); font-size: .8rem; }

.toast {
    margin-top: 1rem;
    padding: .75rem;
    border-radius: 6px;
    background: rgba(47, 125, 79, .12);
    color: var(--ok);
    font-weight: 600;
    text-align: center;
    min-height: 1rem;
    display: none;
}
.toast.show { display: block; }

/* --- Board ----------------------------------------------------------- */
.board-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 0; min-width: 0;
    height: 100%;       /* fill the grid row so max-height: 100% bites */
}
#board {
    display: grid;
    grid-template-columns: repeat(var(--cols, 6), 1fr);
    grid-template-rows: repeat(var(--rows, 4), 1fr);
    gap: 3px;
    background: #d4dbe6;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(31, 42, 58, .15);
    position: relative;     /* anchor for #hint-arrows overlay */
    /* width / height are set explicitly by resizeBoard() in hue.js */
}
#hint-arrows {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 4;
}
.hint-arrow {
    stroke: #f59e0b;
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, .55));
    animation: hint-arrow-in .3s ease-out;
}
@keyframes hint-arrow-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.tile {
    border-radius: 4px;
    cursor: grab;
    transition: transform .08s, box-shadow .08s, filter .08s, opacity .08s;
    position: relative;
    user-select: none;
}
.tile:hover:not(.anchor):not(.dragging):not(.drop-target) {
    transform: scale(.96);
    box-shadow: 0 0 0 2px white;
    z-index: 1;
}
.tile.anchor { cursor: default; }
.tile.anchor {
    cursor: default;
}
.tile.anchor::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.tile.selected {
    transform: scale(.88);
    box-shadow: 0 0 0 3px white, 0 0 0 6px var(--accent);
    z-index: 2;
}
.tile.dragging {
    opacity: .35;
    cursor: grabbing;
}
.tile.drop-target {
    transform: scale(.94);
    box-shadow: 0 0 0 3px white, 0 0 0 6px var(--accent);
    z-index: 1;
}

/* The floating tile that follows the cursor during a drag. */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(31, 42, 58, .45);
    z-index: 1000;
    transform: translate(-50%, -50%) scale(1.05);
    transition: none;
}
.tile.flash-win {
    animation: tile-win 1.2s ease-out;
}

/* Show-the-board overlay — ✓ on correct positions, ✗ on misplaced ones. */
.tile .status-mark {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, .85),
                 0 1px 2px rgba(0, 0, 0, .7);
    pointer-events: none;
    z-index: 4;
}
.tile.status-ok .status-mark  { color: #d8ffd8; }
.tile.status-bad .status-mark { color: #ffd8d8; }

/* Active state for the Show-board toggle button so the user knows
   "the peek is currently on." */
.btn.secondary.active {
    background: var(--accent);
    color: white;
}
@keyframes tile-win {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.35) saturate(1.2); }
}

/* Hint pulse — a single out-of-place tile briefly glows so you can see
   "this one isn't where it belongs." Uses an attention-grabbing amber so
   it stands against the gradient and doesn't read as the denim selection. */
@keyframes hint-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
    50% {
        transform: scale(.92);
        box-shadow: 0 0 0 3px white,
                    0 0 0 7px #f59e0b,
                    0 0 22px rgba(245, 158, 11, .6);
    }
}
.tile.hint {
    animation: hint-pulse 1s ease-in-out infinite;
    z-index: 3;
}

/* --- Win overlay ----------------------------------------------------- */
#win-modal {
    position: fixed; inset: 0;
    background: rgba(31, 42, 58, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
#win-modal.show { display: flex; }
.win-card {
    background: white;
    border-radius: 12px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 12px 40px rgba(31, 42, 58, .25);
    max-width: 24rem;
}
.win-card h2 {
    margin: 0 0 .5rem; color: var(--accent); font-size: 1.75rem;
}
.win-card .big {
    font-size: 2rem; font-weight: 700; color: var(--ok);
    margin: .75rem 0;
}
.win-card .meta { color: var(--muted); margin-bottom: 1.25rem; }
.win-card .btn { font-size: 1rem; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
    html, body { height: auto; overflow: auto; }
    body { overflow-y: auto; }
    .page { height: auto; min-height: 100vh; }
    .play-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .side-panel { max-height: none; overflow: visible; }
    .board-wrap { height: auto; }
    #board { max-height: 80vh; }
}