/* ============================================================
   Touch controls — class-based styles for the dynamically-
   appended overlay elements created by touch.js.

   Intentionally NOT scoped (no Blazor data-* attribute) because
   these elements live outside the Blazor component tree.
   ============================================================ */

:root {
    --touch-controls-height: 180px;
}

/* Overlay container */
#touch-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--touch-controls-height);
    pointer-events: none;
    z-index: 800;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 40px 32px;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Thumbstick ── */

.tc-stick-zone {
    position: relative;
    align-self: flex-end;
    pointer-events: auto;
    touch-action: none;
    /* width/height set inline: STICK_RADIUS * 2 */
}

.tc-stick-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(122, 255, 90, 0.08);
    border: 1px solid rgba(122, 255, 90, 0.3);
}

.tc-stick-knob {
    position: absolute;
    border-radius: 50%;
    background: rgba(122, 255, 90, 0.45);
    border: 2px solid rgba(122, 255, 90, 0.75);
    pointer-events: none;
    /* left/top/width/height and transition set inline (dynamic) */
}

/* ── Platform D-pad (two discrete left/right buttons) ── */

.tc-dpad {
    display: flex;
    gap: 12px;
    align-self: flex-end;
    pointer-events: none;
}

.tc-dpad-btn {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(122, 255, 90, 0.12);
    border: 2px solid rgba(122, 255, 90, 0.4);
    color: rgba(122, 255, 90, 0.85);
    font: bold 28px monospace;
    border-radius: 50%;
    pointer-events: auto;
    touch-action: none;
}

.tc-dpad-btn.tc-btn--active {
    background: rgba(122, 255, 90, 0.4);
}

/* ── Action buttons ── */

.tc-btn-cluster {
    position: relative;
    align-self: flex-end;
    pointer-events: none;
    /* width/height set inline (varies with button count) */
}

.tc-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(122, 255, 90, 0.12);
    border: 2px solid rgba(122, 255, 90, 0.4);
    color: rgba(122, 255, 90, 0.85);
    font: bold 16px "Share Tech Mono", "Courier New", monospace;
    border-radius: 50%;
    pointer-events: auto;
    touch-action: none;
    letter-spacing: 0.02em;
}

.tc-btn.tc-btn--active {
    background: rgba(122, 255, 90, 0.4);
}

/* Button size classes */
.tc-btn--lg { width: 68px; height: 68px; font-size: 15px; }
.tc-btn--sm { width: 56px; height: 56px; font-size: 13px; }