/*
 * Page styles: score, controls hint, instructions, touch joystick and the end-of-game overlay.
 * Everything sits over the WebGL canvas, which fills the whole window.
 */

:root {
    --hud-background: rgba(10, 14, 28, 0.6);
    --hud-border: rgba(255, 255, 255, 0.08);
    --hud-text: #e8ecf8;
    --hud-wins: #4dff88;
    --hud-losses: #ff6a60;
    --hud-streak: #ffd400;
    --hud-best: #8fb4ff;
    /* distance kept from the edges of the screen, and from the notch on phones that have one */
    --edge: 16px;
    --joystick-size: 140px;
    --joystick-knob-size: 56px;
}

html {
    height: 100%;
    /* phones turned sideways must not enlarge the text on their own */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    height: 100%;
    /* fill the whole browser window */
    margin: 0;
    overflow: hidden;
    /* no pull-to-refresh or bounce while a finger drags across the game */
    overscroll-behavior: none;
    /* fingers steer the ball: no double-tap or pinch zoom */
    touch-action: none;
    /* a game, not a document: no text selection, long-press menu or tap highlight */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* dark backdrop behind the transparent canvas, lighter in the middle */
    background: radial-gradient(ellipse at center, #26304d 0%, #0d111f 65%, #06080f 100%);
}

/* the WebGL canvas; touches on it steer the ball */
#game-output {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#game-output canvas {
    display: block;
}

/* score shown above the game */
#hud {
    position: fixed;
    top: max(var(--edge), env(safe-area-inset-top));
    left: max(var(--edge), env(safe-area-inset-left));
    display: flex;
    padding: 6px;
    border: 1px solid var(--hud-border);
    border-radius: 12px;
    background: var(--hud-background);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--hud-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    pointer-events: none;
}

.hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
    padding: 4px 10px;
}

.hud-item + .hud-item {
    border-left: 1px solid var(--hud-border);
}

.hud-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.hud-value {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hud-wins .hud-value { color: var(--hud-wins); }
.hud-losses .hud-value { color: var(--hud-losses); }
.hud-streak .hud-value { color: var(--hud-streak); }
.hud-best .hud-value { color: var(--hud-best); }

/* controls hint shown below the game */
#controls {
    position: fixed;
    bottom: max(var(--edge), env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--hud-border);
    border-radius: 12px;
    background: var(--hud-background);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--hud-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
    pointer-events: none;
}

#controls kbd {
    min-width: 14px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

#controls kbd + .hud-label {
    margin-left: 6px;
}

/* phones and tablets get the touch hints, computers the keyboard ones */
@media (hover: none) and (pointer: coarse) {
    .keyboard-hint {
        display: none;
    }

    /* the joystick takes the place of the controls hint */
    #controls {
        display: none;
    }
}

@media not all and (hover: none) and (pointer: coarse) {
    .touch-hint {
        display: none;
    }
}

/* touch joystick, always on screen at the bottom; only phones and tablets show it */
#joystick {
    display: none;
    position: fixed;
    bottom: max(var(--edge), env(safe-area-inset-bottom));
    left: calc(50% - var(--joystick-size) / 2);
    box-sizing: border-box;
    width: var(--joystick-size);
    height: var(--joystick-size);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(10, 14, 28, 0.35);
    pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
    #joystick {
        display: block;
    }
}

/* brighter while a finger holds it */
#joystick.active {
    border-color: rgba(255, 255, 255, 0.5);
}

/* sideways the table fills the height: the joystick moves to its right, under the right thumb */
@media (orientation: landscape) {
    #joystick {
        left: auto;
        right: max(var(--edge), env(safe-area-inset-right));
    }
}

.joystick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--joystick-knob-size);
    height: var(--joystick-knob-size);
    margin: calc(var(--joystick-knob-size) / -2) 0 0 calc(var(--joystick-knob-size) / -2);
    border-radius: 50%;
    /* the color of the ball it moves */
    background: rgba(255, 212, 0, 0.7);
    box-shadow: 0 0 14px rgba(255, 212, 0, 0.45);
}

/* how to play, shown over the game when the site is first opened */
#instructions {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 8, 15, 0.55);
    color: var(--hud-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#instructions[hidden] {
    display: none;
}

.instructions-panel {
    box-sizing: border-box;
    max-width: min(420px, calc(100% - 2 * var(--edge)));
    padding: 20px 24px;
    border: 1px solid var(--hud-border);
    border-radius: 12px;
    background: var(--hud-background);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

.instructions-panel h1 {
    margin: 0 0 12px;
    font-size: 24px;
}

.instructions-panel p {
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.4;
}

.instructions-panel .instructions-start {
    margin: 16px 0 0;
    color: var(--hud-streak);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.instructions-win { color: var(--hud-wins); font-weight: 700; }
.instructions-lose { color: var(--hud-losses); font-weight: 700; }

/* small screens: a more compact score, so it fits beside or above the table */
@media (max-width: 480px), (max-height: 500px) {
    .hud-item {
        min-width: 0;
        padding: 2px 8px;
    }

    .hud-label {
        font-size: 10px;
    }

    .hud-value {
        font-size: 20px;
    }
}

/* short screens, like a phone held sideways: the instructions get wider and tighter so they fit */
@media (max-height: 500px) {
    .instructions-panel {
        max-width: min(560px, calc(100% - 2 * var(--edge)));
        padding: 12px 18px;
    }

    .instructions-panel h1 {
        margin-bottom: 6px;
        font-size: 20px;
    }

    .instructions-panel p {
        margin: 4px 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .instructions-panel .instructions-start {
        margin-top: 8px;
    }
}

/* phone held sideways: the table fills the height, so the score and the hint move to its left */
@media (orientation: landscape) and (max-height: 500px) {
    #hud {
        flex-direction: column;
    }

    .hud-item + .hud-item {
        border-left: 0;
        border-top: 1px solid var(--hud-border);
    }

    #controls {
        left: max(var(--edge), env(safe-area-inset-left));
        transform: none;
        flex-wrap: wrap;
        max-width: 140px;
        white-space: normal;
    }
}

/* bounce for a value that just changed */
.bump {
    animation: bump 0.6s ease-out;
}

@keyframes bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bump {
        animation: none;
    }
}

/* layer used for the flash and the fade at the end of the game */
#overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    background: #000;
}