/*
 * GYROXEN – MOBIILIOHJAIMET v4.1
 *
 * Ohjaimet sijoitetaan koko selainikkunan päälle. Näin niitä voi siirtää
 * myös pelikehyksen ulkopuolelle jäävään tyhjään tilaan.
 */
:root {
    --gx-control-size: clamp(50px, 14.5dvh, 88px);
    --gx-stick-width: clamp(98px, 27dvh, 166px);
    --gx-stick-knob-size: clamp(27px, 7.4dvh, 44px);
    --gx-control-gap: clamp(7px, 1.1vw, 12px);
    --gx-edge-gap: clamp(10px, 2vw, 24px);
    --gx-bottom-gap: clamp(8px, 1.6dvh, 16px);
    --gx-control-opacity: 0.88;
    --gx-control-border: 2px;
}

#mobile-controls {
    display: none;
    position: fixed;
    z-index: 18;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    pointer-events: none;
    overflow: visible;
}

#mobile-controls::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--gx-control-size) * 1.18 + var(--safe-bottom));
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(2, 8, 15, .20) 20%,
        rgba(2, 8, 15, .68) 100%
    );
    pointer-events: none;
}

.mobile-controls-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    pointer-events: none;
}

.move-pad-wrap {
    position: absolute;
    transform-origin: left top;
    pointer-events: auto;
    touch-action: none;
}

.move-pad-wrap {
    z-index: 20;
    left: calc(var(--gx-edge-gap) + var(--safe-left));
    bottom: calc(var(--gx-bottom-gap) + var(--safe-bottom));
    width: var(--gx-stick-width);
    height: var(--gx-control-size);
    display: flex;
    align-items: flex-end;
}

.move-pad {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: var(--gx-control-opacity);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.move-pad-base {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 49% 49% / 0 0 100% 100%;
    background:
        radial-gradient(ellipse at 50% 18%, rgba(75, 222, 242, .25), rgba(4, 22, 31, .57) 62%),
        rgba(4, 18, 29, .55);
    box-shadow:
        inset 0 0 15px rgba(0, 225, 255, .11),
        0 5px 12px rgba(0, 0, 0, .20);
}

.move-pad-base::before,
.move-pad-base::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9%;
    width: 2px;
    height: 58%;
    transform-origin: bottom center;
    background: linear-gradient(transparent, rgba(190, 249, 255, .11));
}

.move-pad-base::before { transform: translateX(-50%) rotate(-39deg); }
.move-pad-base::after { transform: translateX(-50%) rotate(39deg); }

.move-hint {
    position: absolute;
    z-index: 2;
    color: rgba(229, 253, 255, .78);
    font: 700 clamp(11px, 3.3dvh, 20px)/1 "Courier New", monospace;
    text-shadow: 0 0 8px rgba(0, 225, 255, .35);
    pointer-events: none;
}

.move-hint.left { left: 10%; top: 21%; }
.move-hint.right { right: 10%; top: 21%; }
.move-hint.down { left: 50%; bottom: 7%; transform: translateX(-50%); }

.move-stick {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 13%;
    width: var(--gx-stick-knob-size);
    height: var(--gx-stick-knob-size);
    margin-left: calc(var(--gx-stick-knob-size) / -2);
    border: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 30%,
        rgba(166, 250, 255, .88),
        rgba(39, 133, 151, .62)
    );
    box-shadow:
        0 0 10px rgba(109, 240, 255, .25),
        inset 0 1px 3px rgba(255, 255, 255, .15);
    transform: translate3d(0, 0, 0);
    transition: none;
    will-change: transform;
    pointer-events: none;
}

.move-pad.is-active .move-pad-base,
.move-pad[data-dir-x="left"] .move-pad-base,
.move-pad[data-dir-x="right"] .move-pad-base,
.move-pad[data-dir-y="down"] .move-pad-base {
    background:
        radial-gradient(ellipse at 50% 18%, rgba(95, 236, 255, .34), rgba(4, 22, 31, .66) 64%),
        rgba(4, 18, 29, .65);
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, .12),
        0 5px 15px rgba(0, 0, 0, .24);
}

/*
 * Toimintopainikkeet ovat itsenäisiä elementtejä. Jokainen voidaan siirtää
 * ja skaalata erikseen käyttöliittymämuokkaimessa.
 */
.control-cluster.actions {
    position: absolute;
    z-index: 23;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.action-control {
    position: absolute;
    width: var(--gx-control-size);
    height: var(--gx-control-size);
    transform-origin: left top;
    display: grid;
    place-items: center;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.action-control-dash {
    right: calc(
        var(--gx-edge-gap) + var(--safe-right) +
        var(--gx-control-size) + var(--gx-control-size) +
        var(--gx-control-gap) + var(--gx-control-gap)
    );
    bottom: calc(var(--gx-bottom-gap) + var(--safe-bottom));
}

.action-control-shoot {
    right: calc(
        var(--gx-edge-gap) + var(--safe-right) +
        var(--gx-control-size) + var(--gx-control-gap)
    );
    bottom: calc(var(--gx-bottom-gap) + var(--safe-bottom));
}

.action-control-jump {
    right: calc(var(--gx-edge-gap) + var(--safe-right));
    bottom: calc(var(--gx-bottom-gap) + var(--safe-bottom));
}

.action-control .control-btn {
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0 !important;
    border-width: var(--gx-control-border);
    opacity: var(--gx-control-opacity);
    font-size: clamp(14px, 3.5dvh, 21px);
    pointer-events: none;
}

.action-control .control-btn.dash {
    font-size: clamp(9px, 2.4dvh, 14px);
}

.action-control .control-btn.shoot { color: #fff0a8; }
.action-control .control-btn.jump { border-color: rgba(61, 235, 255, .90); }
.control-btn.is-pressed { opacity: 1; }

#move-pad-touch-zone {
    position: fixed;
    z-index: 19;
    display: block;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    background: transparent;
    border: 0;
    outline: 0;
}

.is-mobile #mobile-controls { display: block; }

/* Pause- ja asetusvalikossa ohjaimet jäävät taustalle mutta eivät reagoi. */
body.gx-ui-open:not(.gx-controls-editing) #mobile-controls {
    opacity: .22;
    pointer-events: none;
}

body.gx-ui-open:not(.gx-controls-editing) #move-pad-touch-zone,
body.gx-ui-open:not(.gx-controls-editing) .action-hit {
    pointer-events: none;
}

/* Ohjainmuokkauksessa ohjaimet ja niiden kosketusalueet ovat näkyvissä. */
body.gx-controls-editing #mobile-controls {
    display: block !important;
    opacity: 1;
    pointer-events: none;
}

body.gx-controls-editing #mobile-controls::before {
    opacity: .4;
}

body.gx-controls-editing #move-pad-touch-zone {
    pointer-events: none;
    background: rgba(46, 224, 255, .13);
    border: 1px dashed rgba(74, 235, 255, .9);
    box-shadow: inset 0 0 22px rgba(46, 224, 255, .09);
}

body.gx-controls-editing .action-hit {
    pointer-events: none;
    background: rgba(255, 83, 203, .14);
    outline: 1px dashed rgba(255, 111, 215, .92);
    outline-offset: -1px;
}

@media (orientation: landscape) and (max-height: 420px) {
    :root {
        --gx-control-size: clamp(44px, 14.5dvh, 60px);
        --gx-stick-width: clamp(88px, 26dvh, 122px);
        --gx-stick-knob-size: clamp(24px, 7dvh, 34px);
        --gx-control-gap: clamp(6px, 1vw, 10px);
        --gx-edge-gap: 8px;
        --gx-bottom-gap: 6px;
    }
}

/* v1.2: varsinainen D-tatin kosketus otetaan aina laajennetulta alueelta. */
.move-pad-wrap {
    pointer-events: none;
}

#move-pad-touch-zone {
    z-index: 22;
}