/* The phone pad (core/pad.js): what sits under each thumb is the game's (core/staging.js). Pictures, not words. */
.pad {
    --pad-glass: rgba(255, 255, 255, 0.07);
    --pad-edge: rgba(255, 255, 255, 0.16);
    --pad-ink: rgba(255, 255, 255, 0.82);
    --pad-lit: var(--a, var(--brand));
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 8px;
    flex: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
/* Fingers only: a pointer already has the keyboard */
@media (pointer: coarse), (any-pointer: coarse), (max-width: 720px) {
    .pad {
        display: flex;
    }
}
/* Keeps its space so the screen does not jump; just stops looking pressable (a press under the pause menu would
   land on the first frame after Resume) */
.stage.is-over .pad,
.stage.is-paused .pad {
    visibility: hidden;
}
.pad-left,
.pad-right {
    display: flex;
    align-items: center;
    flex: none;
}
/* Only one thumb has anything (a maze's cross, the flyer's flap): in portrait it sits in the middle */
.pad[data-buttons='0'] {
    justify-content: center;
}
.pad[data-move='none'] {
    justify-content: flex-end;
}

/* ---- The rockers: the four-way cross and the left/right bar ---- */
.dpad {
    position: relative;
    width: 128px;
    height: 128px;
    touch-action: none;
    flex: none;
}
.dpad--lr {
    width: 152px;
    height: 70px;
}
.dpad svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
    /* rocks toward the held arm, like a real cross (dpad.js sets --tx / --ty) */
    transform: perspective(360px) rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 9deg));
    transition: transform 0.07s ease-out;
    will-change: transform;
}
.dpad-body {
    fill: var(--pad-glass);
    stroke: var(--pad-edge);
    stroke-width: 1.2;
}
.dpad-arm {
    fill: var(--pad-lit);
    opacity: 0;
    transition: opacity 0.06s;
}
.dpad-hub {
    fill: rgba(0, 0, 0, 0.28);
    stroke: var(--pad-edge);
    stroke-width: 1;
}
.dpad-seam {
    stroke: var(--pad-edge);
    stroke-width: 1.2;
    stroke-linecap: round;
}
.dpad-chev {
    fill: none;
    stroke: var(--pad-ink);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.06s;
}
.dpad[data-dir~='up'] .dpad-arm--up,
.dpad[data-dir~='down'] .dpad-arm--down,
.dpad[data-dir~='left'] .dpad-arm--left,
.dpad[data-dir~='right'] .dpad-arm--right {
    opacity: 0.92;
}
.dpad[data-dir~='up'] .dpad-chev--up,
.dpad[data-dir~='down'] .dpad-chev--down,
.dpad[data-dir~='left'] .dpad-chev--left,
.dpad[data-dir~='right'] .dpad-chev--right {
    stroke: #0b0a14;
}

/* ---- The stick: only the brawler, who walks in eight directions ---- */
.stick {
    position: relative;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--pad-glass);
    border: 1px solid var(--pad-edge);
    box-shadow:
        inset 0 2px 14px rgba(0, 0, 0, 0.4),
        0 6px 14px rgba(0, 0, 0, 0.3);
    touch-action: none;
    flex: none;
}
/* Faint cross so the disc reads as a stick before it is touched */
.stick::before,
.stick::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
}
.stick::before {
    width: 70%;
    height: 1px;
}
.stick::after {
    width: 1px;
    height: 70%;
}
.stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.12) 70%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    will-change: transform;
}

/* ---- Buttons: A is the game's main verb, B its second ---- */
.pad-btn {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    touch-action: none;
    flex: none;
    transition:
        transform 0.07s ease-out,
        filter 0.07s,
        background-color 0.07s;
}
.pad-btn svg {
    width: 42%;
    height: 42%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.pad-btn--a {
    width: 80px;
    height: 80px;
    background: linear-gradient(160deg, #1fd0b3, #056f88);
    border: 1px solid rgba(215, 243, 132, 0.4);
    box-shadow:
        0 6px 22px rgba(9, 180, 201, 0.35),
        inset 0 1px 0 rgba(233, 238, 197, 0.35);
}
.pad-btn--b {
    width: 66px;
    height: 66px;
    color: var(--pad-ink);
    background: var(--pad-glass);
    border: 1px solid var(--pad-edge);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* A button under the left thumb (the runner's slide) is as big as the one under the right */
.pad-left .pad-btn--b {
    width: 80px;
    height: 80px;
}
.pad-btn.is-down {
    transform: scale(0.92);
    filter: brightness(0.85);
}
.pad-btn--b.is-down {
    color: #fff;
    background: color-mix(in srgb, var(--pad-lit) 34%, transparent);
    border-color: var(--pad-lit);
    filter: none;
}
/* Two on the right sit on a slant, B low and left, A high and right — the old handheld's way */
.pad[data-buttons='2'] .pad-right {
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
}
.pad[data-buttons='2'] .pad-btn--a {
    margin-bottom: 34px;
}

/* ---- Takeover: the pad under the game; held sideways, each thumb gets a side of its own ---- */
.stage.is-takeover {
    /* a double tap between the controls must not zoom the page mid-run */
    touch-action: manipulation;
}
/* a thumb held on the game or the score must not start a text selection or the long-press menu (the card's name
   box keeps its own: iOS cannot type in a field under user-select: none) */
.stage.is-takeover .stage-screen > :not(.over) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* the stage already pads for the home bar and the notch */
.stage.is-takeover .pad {
    padding: 10px 14px;
}
/* Sideways, each thumb gets a side of the screen: stage.css */