*, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height, excludes browser toolbars on mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    font-family: "Pixelify Sans", monospace;
}

/* Center the arena itself, reserving equal side space for the HUD */
#game-layout {
    --hud-width: clamp(64px, 15vmin, 132px);
    position: relative;
    width: min(calc(100vw - var(--hud-width) - var(--hud-width) - 4vmin), calc(100vh * (15 / 13)));
    width: min(calc(100vw - var(--hud-width) - var(--hud-width) - 4vmin), calc(100dvh * (15 / 13)));
    display: flex;
    align-items: stretch;
    gap: 2vmin;
}

#arena {
    position: relative;
    flex: 1;
    min-width: 0;
}

#game-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 15 / 13;

    background: #fff;

    /* Prevent browser blurring on upscale */
    image-rendering: pixelated;   /* Chrome, Edge, Safari */
    image-rendering: crisp-edges; /* FF */
}

/* Portraits and match time stay visible without covering the playfield */
#hud {
    position: absolute;
    top: 0;
    right: calc(100% + 2vmin);
    z-index: 11;
    width: var(--hud-width);
    height: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    color: #fff;
}

#scores {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.player-score {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.player-score canvas {
    width: auto;
    height: clamp(60px, 12vmin, 120px);
    max-height: 90%;
    aspect-ratio: 1 / 2;
    flex: none;
    image-rendering: pixelated;
}

.score-details {
    display: flex;
    flex-direction: column;
}

.score-player {
    font-size: clamp(16px, 3vmin, 20px);
    opacity: 0.7;
}

.score-wins {
    font-size: clamp(30px, 6vmin, 40px);
    line-height: 1;
}

#match-clock {
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#clock-label {
    font-size: clamp(10px, 1.5vmin, 14px);
    opacity: 0.7;
}

#clock-value {
    font-size: clamp(18px, 3vmin, 26px);
    line-height: 1;
}

/* On portrait screens, place the clock first in a compact row above the arena */
@media (orientation: portrait) {
    #game-layout {
        --hud-height: clamp(56px, 9vmin, 72px);
        width: min(100vw, calc((100vh - var(--hud-height) - 2vmin) * (15 / 13)));
        width: min(100vw, calc((100dvh - var(--hud-height) - 2vmin) * (15 / 13)));
        flex-direction: column;
    }

    #hud {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        min-height: var(--hud-height);
        flex-direction: row;
        align-items: center;
    }

    #match-clock {
        min-width: 68px;
        padding: 0 6px 0 0;
        border-bottom: 0;
        border-right: 2px solid rgba(255, 255, 255, 0.3);
    }

    #scores {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .player-score {
        gap: 2px;
    }

    .player-score canvas {
        width: clamp(18px, 5.7vw, 26px);
        height: auto;
        max-height: none;
    }

    .score-player {
        font-size: clamp(9px, 2.5vw, 12px);
    }

    .score-wins {
        font-size: clamp(20px, 5.5vw, 26px);
    }
}

/* Prevent scrolling, zooming, and text selection from interfering with touch input */
html, body {
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Touch controls, hidden unless enabled by script on a touch device */
#touch-controls {
    display: none;
}

@media (pointer: coarse) {
    #touch-controls.enabled {
        display: block;
    }
}

#dpad, #plant-button {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4vmin);
    touch-action: none;
}

/* Pause button above the playfield for touch players */
#pause-button {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3vmin);
    right: calc(env(safe-area-inset-right, 0px) + 3vmin);
    width: min(12vmin, 56px);
    height: min(12vmin, 56px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: bold 20px "Pixelify Sans", monospace;
    touch-action: manipulation;
}

/* Optional fullscreen toggle beside pause, available even on the title screen */
#fullscreen-button {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3vmin);
    right: calc(env(safe-area-inset-right, 0px) + 17vmin);
    z-index: 12;
    width: min(12vmin, 56px);
    height: min(12vmin, 56px);
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: bold clamp(10px, 2vmin, 14px) "Pixelify Sans", monospace;
    touch-action: manipulation;
}

@media (pointer: coarse) {
    #fullscreen-button.available {
        display: flex;
    }
}

/* D-pad on the left, sized relative to the smaller screen dimension */
#dpad {
    --size: min(38vmin, 200px);
    left: calc(env(safe-area-inset-left, 0px) + 4vmin);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

/* Each arm is a triangle pointing outward from the center */
.dpad-arm {
    position: absolute;
    width: 0;
    height: 0;
    border: calc(var(--size) * 0.1) solid transparent;
    pointer-events: none;
}

.dpad-arm[data-dir="up"] {
    top: 8%;
    left: calc(50% - var(--size) * 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.dpad-arm[data-dir="down"] {
    bottom: 8%;
    left: calc(50% - var(--size) * 0.1);
    border-top-color: rgba(255, 255, 255, 0.5);
}

.dpad-arm[data-dir="left"] {
    left: 8%;
    top: calc(50% - var(--size) * 0.1);
    border-right-color: rgba(255, 255, 255, 0.5);
}

.dpad-arm[data-dir="right"] {
    right: 8%;
    top: calc(50% - var(--size) * 0.1);
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Highlight the arm currently being pressed */
.dpad-arm.active[data-dir="up"] {
    border-bottom-color: #fff;
}

.dpad-arm.active[data-dir="down"] {
    border-top-color: #fff;
}

.dpad-arm.active[data-dir="left"] {
    border-right-color: #fff;
}

.dpad-arm.active[data-dir="right"] {
    border-left-color: #fff;
}

/* Plant button on the right */
#plant-button {
    right: calc(env(safe-area-inset-right, 0px) + 4vmin);
    width: min(24vmin, 128px);
    height: min(24vmin, 128px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.7);
    font: bold 14px "Pixelify Sans", monospace;
}

#plant-button.active {
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* Short sudden-death warning above the arena without blocking input */
#warning {
    display: none;
    position: absolute;
    top: 2vmin;
    left: 50%;
    z-index: 5;
    max-width: 60vw;
    padding: 0.3em 0.65em;
    transform: translateX(-50%);
    background: rgba(35, 0, 0, 0.85);
    border: 2px solid #ffbe54;
    color: #fff3c7;
    font: bold clamp(16px, 4vmin, 28px) "Pixelify Sans", monospace;
    text-align: center;
    pointer-events: none;
}

#warning.visible {
    display: block;
    animation: warning-pulse 0.7s step-end infinite;
}

@keyframes warning-pulse {
    50% { color: #ff7955; }
}

/* Overlay for pause & match end text, only displayed when visible */
#overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vmin;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: "Pixelify Sans", monospace;
    text-align: center;
}

#overlay.visible {
    display: flex;
}

#overlay-title {
    font-size: clamp(32px, 9vmin, 96px);
}

#overlay-subtitle {
    font-size: clamp(14px, 3vmin, 28px);
}

/* Debug FPS counter (enabled with ?fps) */
#fps {
    position: fixed;
    top: 4px;
    left: 4px;
    z-index: 20;
    color: #0f0;
    font: bold 14px "Pixelify Sans", monospace;
    pointer-events: none;
}
@media screen and (orientation: landscape) and (pointer: coarse) {
    .player-score canvas { height: clamp(40px, 8vmin, 64px) !important }
    .score-player { font-size: clamp(10px, 1.5vmin, 14px) !important }
    .score-wins { font-size: clamp(20px, 3vmin, 30px) !important }
}