html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #191919;
}

body {
    /* dvh tracks the mobile URL bar collapsing instead of jolting the layout */
    height: 100dvh;
}

#canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: url('img/space.jpg') no-repeat center center;
    background-size: cover;

    /* Touch hygiene: kill pan/zoom/double-tap-zoom, text selection and
       the grey tap flash, so a drag across the canvas is only ever aim input. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.mute {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    z-index: 2;

    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, background 0.18s ease;
}

.mute:hover,
.mute:focus-visible {
    color: #67e8f9;
    background: rgba(0, 0, 0, 0.6);
}

.mute svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mute .spk {
    fill: currentColor;
    stroke-width: 1.5;
}

/* Waves for "on", cross for "off" — same icon, two states. */
.mute .slash { opacity: 0; }
.mute.muted .wave { opacity: 0; }
.mute.muted .slash { opacity: 1; }
.mute.muted { color: rgba(255, 255, 255, 0.4); }

.credit {
    position: fixed;
    left: 0;
    right: 0;
    /* Clears the iPhone home indicator; falls back to 14px elsewhere. */
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 1;

    text-align: center;
    font: 13px/1.4 Verdana, sans-serif;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: opacity 0.25s ease;

    /* The bar itself must never swallow aim input — only the link is clickable. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Cyan picks up the bullet colour, so the credit reads as part of the game. */
.credit a {
    pointer-events: auto;
    color: #22d3ee;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.45), 0 1px 3px rgba(0, 0, 0, 0.9);
    transition: color 0.18s ease, text-shadow 0.18s ease;
    /* Roomy tap target without visually enlarging the text. */
    padding: 6px 4px;
    margin: -6px -4px;
}

.credit a:hover,
.credit a:focus-visible {
    color: #67e8f9;
    text-shadow: 0 0 14px rgba(103, 232, 249, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* While a round is running the link sits over the playfield, where a tap meant
   for an asteroid would navigate away mid-game. Hide it until the round ends —
   it's back on the title and game-over screens. The anchor needs disabling by
   name, since `.credit a` sets pointer-events and would otherwise keep an
   invisible link clickable. */
#canvas.playing ~ .credit {
    opacity: 0;
}

#canvas.playing ~ .credit a {
    pointer-events: none;
}

/* Crosshair is mouse-only; pointer: fine means "has a precise pointing device",
   so it never applies on a touchscreen where it would do nothing anyway. */
@media (pointer: fine) {
    #canvas.playing {
        cursor: url('img/aim_red.png') 17.5 17.5, crosshair;
    }
}