/* 3D field: canvas sizing, flight HUD, crosshair and touch controls. */

#background-canvas,
#background-canvas-3d {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

.pp-hidden {
    display: none !important;
}

body.pp-2d,
body.pp-3d {
    background-color: #171e2b;
}

/*
 * The bottom band.
 *
 * The gun strip owns the bottom edge of the screen while a run is being
 * played. Everything else anchored to the bottom measures off the top of it
 * through --pp-band, so there is one number instead of an offset copied into
 * six rules. Outside a played run there is no strip, the band is nought, and
 * the same controls sit on the bottom edge with the margin they keep at the
 * sides: a rail with nothing under it does not hover over reserved space, and
 * no space is reserved for a row that is not there.
 *
 * The band is set by exactly the selector that shows the strip, so the two
 * cannot fall out of step. Its value is the strip's own height: a chip is
 * 7 + 8 padding on a 12px line inside a 1px border, which measures 32.
 *
 * --pp-rail-h is the corner button's height by the same arithmetic (11 + 11
 * padding, 13px line, 1px border), for the pieces that stack above the rail
 * rather than beside it.
 */
body {
    --pp-band: 0px;
    --pp-edge: 24px;
    --pp-rail-h: 39px;
}

body.pp-run.pp-playing,
body.pp-arcade.pp-playing {
    --pp-band: 32px;
}

/* Enter control */

.pp-hud {
    position: fixed;
    left: 50%;
    bottom: calc(var(--pp-band) + var(--pp-edge));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 12px;
    transition: opacity 0.25s ease;
}

/*
 * Enter Flight shows on the home screen in either field, because it is a place
 * to go rather than a thing the 3D field happens to offer: pressed from the
 * canvas it brings the 3D field up and flies from there.
 */
body.fly-mode .pp-enter-btn {
    display: none;
}

body.pp-arcade {
    background-color: #171e2b;
}

body.pp-arcade .container,
body.pp-arcade .bubble-counts {
    display: none;
}

/* Out of the ship's lane. */
body.pp-arcade .pp-hud {
    left: auto;
    right: 24px;
    top: 100px;
    bottom: auto;
    transform: none;
}

.pp-hud-btn[disabled] {
    opacity: 0.55;
    cursor: default;
}

.pp-hud-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pp-hud-btn:hover {
    background: rgba(37, 48, 68, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.pp-hud-btn i {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
}

.pp-hud-key {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
}

body.fly-mode .pp-hud {
    display: none;
}

/* Crosshair */

.pp-crosshair {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.fly-mode .pp-crosshair {
    opacity: 1;
}

.pp-crosshair::before,
.pp-crosshair::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pp-crosshair::before {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.pp-crosshair::after {
    width: 4px;
    height: 4px;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}

/* Flight hint */

.pp-hint {
    position: fixed;
    left: 50%;
    /* A row above the rail rather than beside it: the key list is centred and
       wide enough at 1280 to reach into the right hand rail, and a rail button
       under a strip of text is not a rail button. */
    bottom: calc(var(--pp-band) + var(--pp-edge) + var(--pp-rail-h) + 8px);
    transform: translateX(-50%);
    z-index: 58;
    display: none;
    align-items: center;
    gap: 18px;
    padding: 12px 20px;
    background: rgba(23, 30, 43, 0.78);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: Arial, sans-serif;
    font-size: 13px;
    white-space: nowrap;
    transition: opacity 0.6s ease;
}

body.fly-mode .pp-hint {
    display: flex;
}

.pp-hint.pp-fade {
    opacity: 0;
}

.pp-hint span b {
    color: #ffffff;
    font-weight: 700;
}

body.fly-mode .site-header {
    opacity: 0.4;
}

body.fly-mode .container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Touch controls */

.pp-touch {
    display: none;
}

body.pp-touch-device.fly-mode .pp-touch {
    display: block;
}

.pp-stick {
    position: fixed;
    left: 26px;
    bottom: 34px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(23, 30, 43, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 62;
    touch-action: none;
}

.pp-stick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    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%);
}

.pp-vert {
    position: fixed;
    right: 26px;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 62;
}

.pp-vert-btn,
.pp-exit-btn {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    touch-action: none;
}

.pp-exit-btn {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 62;
    display: none;
}

body.pp-touch-device.fly-mode .pp-exit-btn {
    display: flex;
}

/* Flight section inside the settings panel */

.pp-opt-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.pp-opt-btn {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    text-align: left;
}

.pp-opt-note {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
}

.pp-opt-btn.active .pp-opt-note {
    color: rgba(255, 255, 255, 0.75);
}

.pp-opt-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #305268;
}

.pp-opt-btn.active {
    background: rgb(102 163 209 / 29%);
    border-color: #305268;
}

.pp-launch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgb(102 163 209 / 22%);
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    margin: 20px 0 0 0;
}

.pp-launch-btn:hover {
    background: rgb(102 163 209 / 36%);
    border-color: #305268;
}

.pp-flight-note {
    margin: 10px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/*
 * The header's desktop padding is declared after the mobile media query in
 * style.css, so on narrow screens the bar grew wider than the viewport and every
 * fixed right hand element landed off screen. These restore the intended
 * narrow-screen sizing.
 */
@media (max-width: 768px) {
    /*
     * The centre logo is declared at a fixed 550px, so on a narrow screen it
     * pushed the document wider than the viewport and every fixed right hand
     * element went off screen with it.
     */
    .logo,
    .logo-animation {
        max-width: 84vw;
    }

    .site-header {
        padding: 12px 16px 12px 54px;
    }

    .header-logo-img {
        height: 32px;
    }

    .header-nav {
        gap: 16px;
    }

    .hamburger-btn {
        left: 12px;
        font-size: 21px;
    }

    .pp-hud {
        bottom: 20px;
    }

    .pp-hud-btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    .pp-hint {
        display: none !important;
    }

    .pp-vert {
        right: 16px;
    }

    .pp-stick {
        left: 16px;
    }
}

@media (max-width: 430px) {
    .header-logo-img {
        height: 26px;
    }

    .header-nav {
        gap: 13px;
    }

    .header-nav a {
        font-size: 13px;
    }

    .pp-stick {
        width: 100px;
        height: 100px;
    }

    .pp-vert-btn,
    .pp-exit-btn {
        width: 52px;
        height: 52px;
    }
}

/* Level readout */

.stat-level {
    position: relative;
    padding-bottom: 16px;
}

.level-track {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 10px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.level-track span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: #4d82c4;
    transition: width 0.4s ease;
}

.pp-levelup {
    position: fixed;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -14px);
    z-index: 300;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 30px;
    background: rgba(23, 30, 43, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    font-family: Arial, sans-serif;
}

.pp-levelup.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pp-levelup-tag {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.pp-levelup-num {
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
}

/* Corner menus */

/*
 * One line at each end of the bottom edge rather than a stack of floating
 * chips. Left is what the field is made of, right is what is running in it, and
 * a menu is a button with a panel anchored over it rather than a column that
 * pushes its neighbours around when it opens.
 */
/*
 * The rail sits on the bottom band: on top of the full-width gun strip while
 * there is one, and on the bottom edge itself when there is not, with the
 * margin it keeps at the sides. It is above the pause veil rather than under
 * it, because these buttons stay live while a run is held and a live button
 * painted through a dark sheet reads as a disabled one.
 */
.pp-rail {
    position: fixed;
    bottom: calc(var(--pp-band) + var(--pp-edge));
    z-index: 95;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.pp-rail-left {
    left: 24px;
}

.pp-rail-right {
    right: 78px;
}

.pp-corner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/*
 * An open menu takes the width of its own panel, and the button takes the width
 * of the menu, so the button grows into the panel instead of sitting under a
 * wider box that overhangs it on both sides.
 */
.pp-corner.open {
    min-width: 208px;
}

.pp-corner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pp-corner-btn:hover {
    background: rgba(37, 48, 68, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.pp-corner-btn i {
    color: rgba(255, 255, 255, 0.75);
}

.pp-dropup {
    display: none;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(23, 30, 43, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    width: 100%;
}

/* The right-hand menus open toward the middle rather than off the edge. */
.pp-rail-right .pp-dropup {
    left: auto;
    right: 0;
}

.pp-corner.open .pp-dropup {
    display: flex;
}

.pp-dropup-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 9px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pp-dropup-item:hover {
    background: rgba(255, 255, 255, 0.12);
}

.pp-dropup-item.active {
    background: rgb(102 163 209 / 32%);
}

.pp-dropup-item i {
    width: 16px;
    margin-right: 3px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

/*
 * The shape and density of the field are settings for a field you are looking
 * at, so they go while a run is on. What is running, which field it runs in and
 * the modifiers stay: those are switches worth reaching mid-flight.
 */
body.fly-mode .pp-rail-left,
body.pp-arcade .pp-rail-left,
body.pp-run .pp-rail-left,
body.pp-lane .pp-rail-left {
    display: none;
}

body:not(.pp-arcade) .pp-exit-arcade {
    display: none;
}

/* ------------------------------------------------------------------
   Play mode furniture
   ------------------------------------------------------------------
   During a run the header drops its bar and keeps only the menu button
   and the logo, the counters move into the corner the exit button used
   to hold, and everything that is not the field steps back.
*/

body.pp-arcade .site-header,
body.fly-mode .site-header {
    background: transparent;
    backdrop-filter: none;
    padding-top: 14px;
    padding-bottom: 14px;
    pointer-events: none;
}

body.pp-arcade .site-header .hamburger-btn,
body.pp-arcade .site-header .header-logo,
body.fly-mode .site-header .hamburger-btn,
body.fly-mode .site-header .header-logo {
    pointer-events: auto;
}

body.pp-arcade .header-nav,
body.fly-mode .header-nav {
    display: none;
}

body.pp-arcade .header-logo-img,
body.fly-mode .header-logo-img {
    height: 30px;
    opacity: 0.72;
}

body.pp-arcade .hamburger-btn {
    opacity: 0.72;
}

body.pp-arcade .hamburger-btn:hover {
    opacity: 1;
}

/* Leaving is in the arcade drop-up now, so the button that did it goes. */
body.pp-arcade .pp-hud {
    display: none;
}

/*
 * One strip rather than three cards. The labels shrink, the numbers keep
 * their weight, and the padding that pushed them apart comes out.
 */
body.pp-arcade .game-stats {
    top: 16px;
    left: auto;
    right: 24px;
    gap: 2px;
    padding: 7px 6px 8px;
    background: rgba(23, 30, 43, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    align-items: flex-start;
}

body.pp-arcade .stat-box {
    background: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0 14px;
    min-width: 58px;
    text-align: center;
}

body.pp-arcade .stat-label {
    font-size: 9px;
    letter-spacing: 1.3px;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
}

body.pp-arcade .stat-value {
    font-size: 19px;
    line-height: 1.05;
}

body.pp-arcade .stat-level {
    padding-bottom: 9px;
}

body.pp-arcade .level-track {
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
}

/* ------------------------------------------------------------------
   Bottom right rail: mute, field toggle, arcade launcher
   ------------------------------------------------------------------ */


.pp-dropup-leave {
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.72);
}

.pp-dropup-leave:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/*
 * Sound sits at the very corner, with its rack of names anchored over it. The
 * button keeps its own size when the rack opens, because it is an icon and a
 * three column panel is not the shape of an icon.
 */
.pp-sound-menu {
    position: fixed;
    right: 24px;
    bottom: calc(var(--pp-band) + var(--pp-edge));
    z-index: 96;
}

.pp-sound-menu.open {
    min-width: 0;
}

.pp-sound-list {
    left: auto;
    right: 0;
    width: min(340px, calc(100vw - 48px));
    gap: 12px;
}

.pp-sound-head {
    margin-bottom: 7px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.pp-sound-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.pp-sound-pick {
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pp-sound-pick:hover {
    background: rgba(255, 255, 255, 0.14);
}

.pp-sound-pick.active {
    background: rgb(102 163 209 / 32%);
}

.pp-mute {
    position: static;
    z-index: 61;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pp-mute:hover {
    background: rgba(37, 48, 68, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.pp-mute.pp-off {
    color: rgba(255, 255, 255, 0.42);
}

body.fly-mode .pp-sound-menu {
    display: none;
}

@media (max-width: 768px) {
    body.pp-arcade .game-stats {
        top: 12px;
        right: 12px;
        padding: 6px 4px 7px;
    }

    body.pp-arcade .stat-box {
        padding: 0 10px;
        min-width: 48px;
    }

    body.pp-arcade .stat-value {
        font-size: 16px;
    }

    body.pp-arcade .level-track {
        left: 10px;
        right: 10px;
    }

    /* Narrower chips, so a shorter band, and the smaller side margin the
       whole frame uses at this width. */
    body.pp-run.pp-playing,
    body.pp-arcade.pp-playing {
        --pp-band: 30px;
    }

    body {
        --pp-edge: 12px;
    }

    .pp-rail {
        gap: 6px;
    }

    .pp-rail-right {
        right: 62px;
    }

    /*
     * On a narrow screen the two ends of the rail meet in the middle, so the
     * left end steps up a row rather than running into what is on the right.
     */
    .pp-rail-left {
        left: 12px;
        bottom: calc(var(--pp-band) + var(--pp-edge) + var(--pp-rail-h) + 8px);
    }

    .pp-sound-menu {
        right: 12px;
    }

    .pp-mute {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 430px) {
    body.pp-arcade .header-logo-img {
        height: 24px;
    }

    /* Too narrow to sit beside the logo, so the strip takes the line below it. */
    body.pp-arcade .game-stats {
        top: 52px;
        right: 10px;
    }

    body.pp-arcade .stat-label {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

/*
 * A run out in the field draws its HUD on the 2D canvas, which sits over the 3D
 * one. It must not take the pointer, because everything under it is the game.
 */
#background-canvas.pp-overlay {
    pointer-events: none;
    z-index: 3;
}

body.pp-run .container,
body.pp-run .bubble-counts {
    display: none;
}

body.pp-run .site-header {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

body.pp-run .site-header .hamburger-btn,
body.pp-run .site-header .header-logo {
    pointer-events: auto;
}

body.pp-run .header-nav {
    display: none;
}

body.pp-run .game-stats {
    top: 16px;
    left: auto;
    right: 24px;
    gap: 2px;
    padding: 7px 6px 8px;
    background: rgba(23, 30, 43, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    align-items: flex-start;
}

body.pp-run .stat-box {
    background: none;
    backdrop-filter: none;
    border: none;
    padding: 0 14px;
    min-width: 58px;
    text-align: center;
}

body.pp-run .stat-label {
    font-size: 9px;
    letter-spacing: 1.3px;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, 0.5);
}

body.pp-run .stat-value {
    font-size: 19px;
    line-height: 1.05;
}

body.pp-run .stat-level {
    padding-bottom: 9px;
}

body.pp-run .level-track {
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
}

/* The launcher stays reachable during a run, the way it does in the arcade. */
body.pp-run.fly-mode .pp-sound-menu {
    display: flex;
}

@media (max-width: 768px) {
    body.pp-run .game-stats {
        top: 12px;
        right: 12px;
        padding: 6px 4px 7px;
    }

    body.pp-run.fly-mode .pp-rail-right {
        right: 62px;
    }
}

@media (max-width: 430px) {
    body.pp-run .game-stats {
        top: 52px;
        right: 10px;
    }
}

/*
 * The corner rail during a run
 * ---------------------------------------------------------------
 * The field and the modifiers are switches the player can flip at any moment,
 * so the rail that holds them stays reachable in flight and in a run.
 */

.pp-corner-icon {
    width: 42px;
    padding: 0;
    justify-content: center;
}

.pp-corner-btn.pp-on {
    background: rgb(77 130 196 / 82%);
    border-color: rgba(255, 255, 255, 0.34);
}

.pp-corner-btn.pp-on i {
    color: #ffffff;
}

body.fly-mode .pp-rail-right,
body.pp-run .pp-rail-right,
body.pp-arcade .pp-rail-right {
    display: flex;
}

body.fly-mode .pp-sound-menu,
body.pp-run .pp-sound-menu {
    display: flex;
}

.pp-banner-word {
    font-size: 26px;
}

/* True black behind a space sky, so the page and the field agree. */
body.pp-space {
    background-color: #000000;
}


/* The 3D field can be grabbed and turned outside flight. */
body.pp-3d:not(.fly-mode) #background-canvas-3d {
    cursor: grab;
}

body.pp-3d.pp-dragging #background-canvas-3d {
    cursor: grabbing;
}

/*
 * The corner rail stays through a live match. It used to wait for the pause, on
 * the theory that nobody reaches for it mid-run: that made the pause menu the
 * only way to swap the field, and in the 3D lane it left the bottom right corner
 * of the screen empty: no field toggle, no launcher, no shield, no sound. The
 * strip took the bottom edge and the rail moved up a row instead.
 */

/* Carrying on from a run that was left open. */
.pp-dropup-resume {
    color: #ffffff;
    background: rgba(52, 68, 96, 0.9);
}

.pp-dropup-resume:hover {
    background: rgba(64, 84, 118, 0.95);
}

.pp-dropup-item[hidden] {
    display: none !important;
}

/*
 * The pointer during a run.
 *
 * The canvas carries whichever cursor was chosen, which is right while the field
 * is something to aim at and wrong once the ship is the thing being aimed: two
 * pointers on screen, one drawn and one the ship. The drawn one goes for as long
 * as a run is live, and comes back as a plain arrow on the pause card, which is a
 * menu and wants a menu pointer.
 */
body.pp-playing #background-canvas,
body.pp-playing #background-canvas-3d {
    cursor: none !important;
}

body.pp-arcade:not(.pp-playing) #background-canvas,
body.pp-arcade:not(.pp-playing) #background-canvas-3d {
    cursor: default !important;
}

body.pp-arcade.pp-playing {
    cursor: none;
}

/*
 * The lane. The pointer is the ship over the field, so the field carries none:
 * two things answering the same hand is one too many. The frame around it is a
 * different matter (see the pointer rules below), and only the way into flight
 * goes, because there is nowhere to fly to from inside a lane.
 */
body.pp-lane .pp-hud {
    display: none;
}

body.pp-lane #background-canvas,
body.pp-lane #background-canvas-3d {
    cursor: none !important;
}

/*
 * The pointer over the frame. A live run hides the cursor because the ship is
 * the thing being aimed; every button around the field is still a button, so the
 * frame asks for the pointer back loudly enough to beat that rule. A row of guns
 * you can click with no pointer over it does not look clickable.
 */
body.pp-playing .pp-guns,
body.pp-playing .pp-gun-track,
body.pp-playing .pp-rail,
body.pp-playing .pp-corner,
body.pp-playing .pp-gun-locked,
body.pp-playing .pp-sound-menu {
    cursor: default !important;
}

body.pp-playing .pp-gun,
body.pp-playing .pp-gun-caret,
body.pp-playing .pp-corner-btn,
body.pp-playing .pp-dropup-item,
body.pp-playing .pp-mute,
body.pp-playing .pp-hud-btn {
    cursor: pointer !important;
}

body.pp-lane .pp-crosshair {
    display: none;
}

/* The field button asking: a swap during a scored run restarts it, so the
   first press arms and says so. Amber because the next press costs. */
.pp-corner-btn.pp-asking {
    background: rgb(196 142 46 / 88%);
    border-color: rgba(255, 255, 255, 0.4);
}

.pp-corner-btn.pp-asking i {
    color: #ffffff;
}

/*
 * Paused.
 *
 * Flight dims the header to 0.4 and takes its pointer events away so the
 * chrome steps back behind the field. Pausing is the one moment that is
 * wrong: a player who has just paused is reaching for exactly those
 * controls, and dimmed unclickable chrome reads as disabled. So a pause
 * hands the header, its bar and both corner rails back at full strength.
 */
body.pp-paused .site-header {
    opacity: 1;
    pointer-events: auto;
}

body.pp-paused .site-header .header-nav {
    display: flex;
    pointer-events: auto;
}

body.pp-paused .pp-rail,
body.pp-paused .pp-corner,
body.pp-paused .pp-hud {
    opacity: 1;
    pointer-events: auto;
}

body.pp-paused .pp-guns {
    display: flex;
    opacity: 0.55;
    pointer-events: none;
}