/*
 * The touch flight controls, and where the rest of the frame stands while
 * they are up.
 *
 * Moved out of css/space3d.css, which reached the file size cap, and linked
 * straight after it, so the rules that came across keep their place in the
 * cascade.
 *
 * All of it waits for body.pp-touch-device, which js/three/boot.js sets on a
 * coarse pointer, and for fly-mode. A held run takes the controls away: the
 * run card is up, and nothing under a thumb does anything until it goes.
 *
 * The two thumbs own the bottom corners. The stick is under the left one;
 * fire, the afterburner and the two vertical buttons are under the right;
 * every other finger on the glass is the look surface js/three/touch.js reads.
 * The bottom centre belongs to the range readout, which js/three/galaxy-edge.js
 * pins 18px off the bottom edge for the whole of a flight, 274px wide and two
 * lines deep on a phone. So the thumb row stands 12px clear above it, and the
 * corner rail and the sound button, which share the bottom edge everywhere
 * else, move up to the header line, where flight has already put the nav away.
 *
 * Measured before this layout at 375 by 812: the afterburner readout, the
 * rail, the sound button, the stick, Exit, the down button and the range
 * readout overlapped in thirteen pairs across the bottom 150px of the screen.
 */

body.pp-touch-device {
    /* The thumb row's bottom edge: 18 + 47 for the range readout, 12 clear. */
    --pp-t-base: calc(77px + env(safe-area-inset-bottom, 0px));
    --pp-t-side: 16px;
    --pp-t-stick: 128px;
    --pp-t-knob: 52px;
    --pp-t-fire: 76px;
    --pp-t-boost: 60px;
    --pp-t-vert: 52px;
    --pp-t-col: 14px;
    --pp-t-row: 12px;
    /* The header line: where the menu button starts, where the first thing
       after it can start, and where the rail starts when it follows the sound
       button (the sound button's own width plus 8). */
    --pp-t-lead: 20px;
    --pp-t-row0: 70px;
    --pp-t-rail: 120px;
}

.pp-touch {
    display: none;
}

body.pp-touch-device.fly-mode:not(.pp-paused) .pp-touch {
    display: block;
}

/* ---------------- the controls ---------------- */

.pp-stick {
    position: fixed;
    left: calc(var(--pp-t-side) + env(safe-area-inset-left, 0px));
    bottom: var(--pp-t-base);
    z-index: 62;
    box-sizing: border-box;
    width: var(--pp-t-stick);
    height: var(--pp-t-stick);
    border-radius: 50%;
    background: rgba(23, 30, 43, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* js/three/touch.js writes the knob's transform while the stick is held and
   puts this one back when it is let go. */
.pp-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    width: var(--pp-t-knob);
    height: var(--pp-t-knob);
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
}

/*
 * The right thumb's four. Fire is the largest and sits where the thumb rests,
 * the afterburner beside it toward the middle, up above down in the column
 * over fire. The grid's empty corner is look surface, so the grid itself takes
 * no touches and only its buttons do.
 */
.pp-pad {
    position: fixed;
    right: calc(var(--pp-t-side) + env(safe-area-inset-right, 0px));
    bottom: var(--pp-t-base);
    z-index: 62;
    display: grid;
    grid-template-columns: var(--pp-t-boost) var(--pp-t-fire);
    grid-template-rows: var(--pp-t-vert) var(--pp-t-vert) var(--pp-t-fire);
    grid-template-areas:
        ". up"
        ". down"
        "boost fire";
    column-gap: var(--pp-t-col);
    row-gap: var(--pp-t-row);
    align-items: center;
    justify-items: center;
    pointer-events: none;
}

/*
 * Every button is held rather than tapped, so a long press must not raise the
 * text callout or select the icon, and a finger that lands on one must not
 * start a pan or a zoom.
 */
.pp-pad-btn,
.pp-exit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    background: rgba(23, 30, 43, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Held: a shade lighter, the way the gun in hand sits on the gun row. */
.pp-pad-btn:active,
.pp-exit-btn:active {
    background: rgba(52, 68, 96, 0.92);
    border-color: rgba(255, 255, 255, 0.34);
}

.pp-pad-up,
.pp-pad-down {
    width: var(--pp-t-vert);
    height: var(--pp-t-vert);
}

.pp-pad-up {
    grid-area: up;
}

.pp-pad-down {
    grid-area: down;
}

.pp-pad-boost {
    grid-area: boost;
    width: var(--pp-t-boost);
    height: var(--pp-t-boost);
    font-size: 20px;
}

.pp-pad-fire {
    grid-area: fire;
    width: var(--pp-t-fire);
    height: var(--pp-t-fire);
    font-size: 26px;
}

/* Leaving is on purpose, so it is up under the menu button rather than where
   a thumb travels. */
.pp-exit-btn {
    position: fixed;
    left: calc(var(--pp-t-lead) + env(safe-area-inset-left, 0px));
    top: 58px;
    z-index: 62;
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* ---------------- the frame around them ---------------- */

/* There is no keyboard: the key list and every key cap stand down. */
body.pp-touch-device.fly-mode .pp-hint,
body.pp-touch-device .pp-hud-key {
    display: none;
}

/* The header line is the rail's while the controls are up. The logo keeps its
   box, so the bar and the menu button do not move. */
body.pp-touch-device.fly-mode:not(.pp-paused) .header-logo {
    visibility: hidden;
}

body.pp-touch-device.fly-mode:not(.pp-paused) .pp-sound-menu {
    top: 12px;
    bottom: auto;
    left: calc(var(--pp-t-row0) + env(safe-area-inset-left, 0px));
    right: auto;
}

body.pp-touch-device.fly-mode:not(.pp-paused) .pp-rail-right {
    top: 12px;
    bottom: auto;
    right: calc(var(--pp-edge) + env(safe-area-inset-right, 0px));
}

/* Up at the top edge, the menus open downward. */
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-rail .pp-dropup,
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-sound-list {
    top: calc(100% + 8px);
    bottom: auto;
}

/* The rack spans the top from the menu button's edge, over Exit while it is
   open: hung from the sound button it left a 2px sliver of Exit under it. */
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-sound-list {
    left: calc(var(--pp-t-lead) - var(--pp-t-row0));
    right: auto;
    width: min(340px, calc(100vw - 2 * var(--pp-t-lead)));
}

/* Elsewhere an open menu's button grows to the menu's 208px. Up here that
   growth ran the rail's left end to 35 at 375, over the sound button and the
   menu button, so the button keeps its size and the menu hangs under it from
   its right hand edge. */
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-rail .pp-corner.open {
    min-width: 0;
}

body.pp-touch-device.fly-mode:not(.pp-paused) .pp-rail .pp-dropup {
    width: 208px;
}

/*
 * The readouts on the right step down a line, under the rail: the level and
 * score cards to 58, and the place card and the counters after them by their
 * own heights plus 12, the arithmetic css/deepspace.css uses for the same
 * column.
 */
body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .game-stats {
    top: 58px;
}

body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .pp-place {
    top: 128px;
}

body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .bubble-counts {
    top: 182px;
}

/* The afterburner readout stands over the stick, and a thumb that lands on
   it is still a thumb on the stick. */
body.pp-touch-device.fly-mode:not(.pp-paused) .pp-burner {
    left: calc(var(--pp-t-side) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--pp-t-base) + var(--pp-t-stick) + 12px);
    pointer-events: none;
}

/* ---------------- sizes ---------------- */

@media (max-width: 768px) {
    body.pp-touch-device {
        --pp-t-lead: 12px;
        --pp-t-row0: 54px;
        --pp-t-rail: 100px;
    }
}

/* At 320 the rail, 212px wide on the right, starts at 96, so the sound button
   comes in to 50 to keep 8px clear of it. */
@media (max-width: 374px) {
    body.pp-touch-device {
        --pp-t-row0: 50px;
        --pp-t-rail: 96px;
    }
}

/* A narrow or a short phone: a 128px stick and a 150px pad leave no room
   between the thumbs at 320 wide, and the pad's 204px meets the counters at
   568 tall. */
@media (max-width: 360px), (max-height: 640px) {
    body.pp-touch-device {
        --pp-t-stick: 112px;
        --pp-t-knob: 46px;
        --pp-t-fire: 68px;
        --pp-t-boost: 54px;
        --pp-t-vert: 46px;
        --pp-t-col: 12px;
        --pp-t-row: 10px;
    }
}

/*
 * A phone on its side. The range readout is one line here, from a quarter of
 * the width to three quarters at most, so the thumb row comes down to the
 * bottom edge and each cluster keeps inside its own quarter. The header line
 * is wide enough for the level and score cards again, so they stay on it, and
 * the rail follows the sound button along it instead of taking the right hand
 * end.
 */
@media (orientation: landscape) and (max-height: 500px) {
    body.pp-touch-device {
        --pp-t-base: calc(var(--pp-band) + 20px + env(safe-area-inset-bottom, 0px));
        --pp-t-stick: 112px;
        --pp-t-knob: 46px;
        --pp-t-fire: 68px;
        --pp-t-boost: 54px;
        --pp-t-vert: 46px;
        --pp-t-col: 10px;
        --pp-t-row: 8px;
    }

    body.pp-touch-device.fly-mode:not(.pp-paused) .pp-rail-right {
        left: calc(var(--pp-t-rail) + env(safe-area-inset-left, 0px));
        right: auto;
    }

    body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .game-stats {
        top: 6px;
    }

    body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .pp-place {
        top: 76px;
    }

    /* The counters lie along a line under the place card instead of standing
       down the edge, so the pad has the corner under them. */
    body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .bubble-counts {
        flex-direction: row;
        top: 132px;
    }

    /* Exit and the afterburner readout share the line under the menu button;
       the bottom left is the stick's, and the heat card comes up to the line
       under them so it clears the stick's top. */
    body.pp-touch-device.fly-mode:not(.pp-paused) .pp-burner {
        left: calc(var(--pp-t-lead) + 56px + env(safe-area-inset-left, 0px));
        top: 58px;
        bottom: auto;
    }

    body.pp-touch-device.fly-mode:not(.pp-paused):not(.pp-run) .pp-heat {
        top: 112px;
    }
}

/* The place card is shorter below 769, so the counters sit higher under it. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 768px) {
    body.pp-touch-device.pp-3d.fly-mode:not(.pp-paused) .bubble-counts {
        top: 124px;
    }
}