/* The game screen. Desktop: timer | colour | stats side by side inside one band, which lights up with your
   guess and is exactly as tall as the colour box. Phones: the colour fills the width with the timer tucked
   into its corner, the band shows as strips either side of it, and the stats sit in a row below. */

body.game-page { background: #fff; }

/* The header uses the board's three columns, so the player's name sits exactly over the colour box */
.game-header, .board {
    --side-left: minmax(140px, 15vw);
    --side-right: minmax(170px, 17vw);
    --board-gap: clamp(16px, 3.5vw, 48px);
}

.game-header {
    display: grid;
    grid-template-columns: var(--side-left) minmax(0, 1fr) var(--side-right);
    align-items: center;
    gap: 12px var(--board-gap);
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px var(--gutter);
    font-family: var(--pixel);
    font-size: clamp(14px, 2.4vw, 30px);
}

/* The title is wider than its column and runs into the middle one; the name keeps clear of it */
.game-header .brand { grid-column: 1; grid-row: 1; color: var(--ink); text-decoration: none; white-space: nowrap; position: relative; z-index: 1; }
.game-header .player {
    grid-column: 2;
    grid-row: 1;
    /* "Guess the Hex" is ~10.8em wide: keep the name clear of however far it overhangs the first column */
    padding: 0 max(8px, calc(10.8 * clamp(14px, 2.4vw, 30px) - max(140px, 15vw) + 16px));
    font-size: 0.85em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-header .controls { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }

.game-header button {
    font: inherit;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
}

.game-header button:hover { color: var(--link); }
.game-header .pause img { display: block; width: clamp(22px, 2.4vw, 34px); height: auto; image-rendering: pixelated; }
.game-header .timer-toggle svg { display: block; width: clamp(22px, 2.4vw, 34px); height: auto; }
.game-header .timer-toggle .slash { display: none; }
.game-header .timer-toggle.off { color: #9a9a9a; }
.game-header .timer-toggle.off .slash { display: inline; }

/* "Turn the timer off?" */
.timer-dialog {
    max-width: min(440px, calc(100vw - 2 * var(--gutter)));
    padding: 22px 24px;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--text);
}

.timer-dialog::backdrop { background: rgba(255, 255, 255, 0.7); }
.timer-dialog h2 { font-family: var(--pixel); font-weight: normal; font-size: 20px; margin: 0 0 10px; }
.timer-dialog p { margin: 0 0 20px; line-height: 1.5; }
.timer-dialog .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.timer-dialog button {
    font: 14px var(--pixel);
    padding: 10px 14px;
    color: var(--ink);
    background: #fff;
    border: 3px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
}

.timer-dialog button.primary { color: #fff; background: var(--ink); }
.timer-dialog button:hover { color: var(--link); }
.timer-dialog button.primary:hover { color: #fff; background: #333; }

.arena {
    --box-h: clamp(220px, 58vh, 520px);
    position: relative;
    margin-top: clamp(4px, 1.5vh, 16px);
}

#backdrop {
    position: absolute;
    inset: 0 0 auto;
    height: var(--box-h);
    background: #fff url("/newBackg.png") center;
    transition: background-color 0.5s ease-in-out;
}

.board {
    position: relative; /* above the backdrop */
    display: grid;
    grid-template-columns: var(--side-left) minmax(0, 1fr) var(--side-right);
    align-items: center;
    gap: var(--board-gap);
    max-width: 1500px;
    min-height: var(--box-h);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* An 8-bit circle; its fill drains as the time runs out */
#timer {
    position: relative;
    aspect-ratio: 1;
    background: #f0f0f0;
    clip-path: polygon(31.25% 0%, 68.75% 0%, 68.75% 6.25%, 81.25% 6.25%, 81.25% 12.5%, 87.5% 12.5%, 87.5% 18.75%, 93.75% 18.75%, 93.75% 31.25%, 100% 31.25%, 100% 68.75%, 93.75% 68.75%, 93.75% 81.25%, 87.5% 81.25%, 87.5% 87.5%, 81.25% 87.5%, 81.25% 93.75%, 68.75% 93.75%, 68.75% 100%, 31.25% 100%, 31.25% 93.75%, 18.75% 93.75%, 18.75% 87.5%, 12.5% 87.5%, 12.5% 81.25%, 6.25% 81.25%, 6.25% 68.75%, 0% 68.75%, 0% 31.25%, 6.25% 31.25%, 6.25% 18.75%, 12.5% 18.75%, 12.5% 12.5%, 18.75% 12.5%, 18.75% 6.25%, 31.25% 6.25%);
    display: grid;
    place-items: center;
}

#timerDrain {
    position: absolute;
    inset: auto 0 0;
    height: 0;
    background: #e2e2e2;
    transition: height 1s linear, background-color 0.3s;
}

#timerDrain.low { background: #f7d6d6; }
#timer.off #timerDrain { display: none; }

#timerTitle {
    position: relative;
    font-family: var(--pixel);
    font-size: clamp(48px, 7vw, 125px);
    line-height: 1;
    user-select: none;
}

#timer.off #timerTitle { font-size: clamp(28px, 3.6vw, 64px); }

#colorBox {
    container-type: inline-size; /* lets the result text size itself to the box */
    height: var(--box-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: background-color 0.5s ease-in-out;
    user-select: none;
}

#result {
    font-family: var(--pixel);
    font-weight: normal;
    font-size: min(clamp(44px, 9vw, 150px), 15cqi);
    line-height: 1.1;
    margin: 0;
    min-height: 1.1em;
    white-space: nowrap;
}

/* "game over" is the longest message: keep it on one line inside the box */
#result.game-over { font-size: min(clamp(32px, 7vw, 120px), 10cqi); }

#hexAnswer {
    font-family: var(--pixel);
    font-weight: normal;
    font-size: clamp(18px, 2.4vw, 30px);
    margin: 0.5em 0 0;
    min-height: 1.2em;
}

#stats { font-family: var(--pixel); text-align: center; user-select: none; }
#stats h2 { font-size: clamp(16px, 1.8vw, 26px); margin: 0 0 12px; }
#stats dl { margin: 0; display: grid; gap: 6px; font-size: clamp(12px, 1.3vw, 18px); }
#stats dt { margin: 8px 0 0; }
#stats dd { margin: 0; }
#stats .best { color: green; }
#stats .worst { color: red; }
#stats .full-stats { display: inline-block; margin-top: 18px; color: blue; text-decoration: none; font-size: clamp(14px, 1.5vw, 22px); }

.guess-form {
    --field-h: clamp(48px, 6.5vh, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: clamp(16px, 3vh, 28px) auto 8px;
    padding: 0 var(--gutter);
    font-family: var(--pixel);
    font-size: clamp(24px, 3vw, 36px);
}

.guess-form label { line-height: var(--field-h); }

.guess-form input,
.guess-form .go {
    box-sizing: border-box;
    height: var(--field-h);
    margin: 0;
    font: inherit;
    line-height: 1;
}

.guess-form input {
    width: 8.5ch;
    min-width: 0;
    padding: 0 0.3em;
    border: 3px solid var(--line);
    border-radius: 0;
    background: #fafafa;
    text-transform: uppercase;
}

.guess-form input:focus { outline: none; border-color: var(--ink); }

.guess-form .go {
    padding: 0 0.6em;
    color: #fff;
    background: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
}

.guess-form .go:hover { background: #fff; color: var(--ink); }

.lives {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px var(--gutter) 24px;
    font-family: var(--pixel);
}

.lives h2 { font-size: clamp(16px, 2vw, 26px); margin: 0; font-weight: normal; line-height: 1; }
.hearts { display: flex; gap: 6px; }
.hearts img { display: block; width: clamp(30px, 3.2vw, 50px); height: auto; image-rendering: pixelated; }

@media (max-width: 760px) {
    .game-header { grid-template-columns: 1fr auto; }
    .game-header .controls { grid-column: 2; }
    .game-header .player { grid-row: 2; grid-column: 1 / -1; padding: 0; font-size: 13px; }

    .arena { --box-h: clamp(200px, 38svh, 380px); }
    .board { grid-template-columns: 1fr; align-items: start; gap: 12px; min-height: 0; }
    #timer {
        position: absolute;
        top: 8px;
        left: calc(var(--gutter) + 8px);
        width: 64px;
        z-index: 1;
    }
    #timerTitle { font-size: 30px; }
    #timer.off #timerTitle { font-size: 18px; }

    #stats h2 { display: none; }
    #stats dl { grid-template-columns: repeat(4, 1fr); grid-auto-flow: column; grid-template-rows: auto auto; gap: 2px 8px; font-size: 11px; }
    #stats dt { margin: 0; }
    #stats dd { font-size: 14px; }
    #stats .full-stats { margin-top: 10px; font-size: 13px; }
}

#hexAnswer a { color: var(--link); }