/* 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;
}

/* Enter control */

.pp-hud {
    position: fixed;
    left: 50%;
    bottom: 28px;
    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:not(.pp-2d) .pp-arcade-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.4);
}

.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%;
    bottom: 30px;
    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.
 */
.pp-rail {
    position: fixed;
    bottom: 24px;
    z-index: 60;
    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 {
    display: none;
}

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

/*
 * Arcade gun picker. Number keys still work; these are the same choice by mouse.
 * The strip is docked to the bottom edge rather than floating above it, so it
 * takes the least height it can and reads as part of the frame instead of as
 * something sitting on the play field.
 */
.pp-guns {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 0 12px 0 14px;
    /*
     * The corner rail keeps the right end of this row. The widest it gets is the
     * field toggle, the launcher naming Time Attack, the shield and the sound
     * button, so the strip stops short of that and never runs underneath it.
     */
    max-width: calc(100vw - 360px);
    background: linear-gradient(to top, rgba(9, 12, 18, 0.72), rgba(9, 12, 18, 0));
}

/*
 * The strip belongs to a run being played: the canvas arcade, or a run out in
 * the field while you are actually flying it. A run that is paused, or one whose
 * flight was left, has no trigger under it, so the rack goes with the rest.
 */
body.pp-run.pp-playing .pp-guns,
body.pp-arcade.pp-playing .pp-guns {
    display: flex;
}

.pp-gun {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px 8px;
    border-radius: 9px 9px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
    background: rgba(23, 30, 43, 0.82);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
}

.pp-gun:hover {
    background: rgba(38, 49, 70, 0.9);
    color: #ffffff;
}

/*
 * The one in your hands is marked by sitting a shade lighter with its text at
 * full strength, not by growing or by taking a slab of color. The strip is read
 * out of the corner of an eye during a run, so it has to hold still.
 */
.pp-gun-on {
    background: rgba(52, 68, 96, 0.92);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.pp-gun-on .pp-gun-key {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.pp-gun-on:hover {
    background: rgba(62, 80, 112, 0.94);
}

.pp-gun-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 10px;
}

.pp-gun-locked {
    color: rgba(255, 255, 255, 0.34);
    cursor: default;
}

.pp-gun-locked:hover {
    background: rgba(23, 30, 43, 0.82);
    color: rgba(255, 255, 255, 0.34);
}

.pp-gun-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
}

.pp-gun-hits {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    padding-left: 4px;
}

@media (max-width: 768px) {
    .pp-guns {
        padding: 0 8px;
        gap: 3px;
        /* The rail keeps its place at the right, so the strip stops short of it. */
        max-width: calc(100vw - 348px);
    }

    .pp-gun {
        padding: 7px 9px 8px;
        font-size: 11px;
    }

    .pp-gun-name {
        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: 24px;
    z-index: 61;
}

.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;
}

/* ------------------------------------------------------------------
   Unlocks during a run
   ------------------------------------------------------------------
   A banner with the same weight as a level up, so an achievement earned
   mid-run never takes the pointer or the keyboard away from the game.
*/

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

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

.pp-ach-toast i {
    font-size: 17px;
    color: #7fb0e6;
}

.pp-ach-toast-tag {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.pp-ach-toast-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

@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;
    }

    .pp-rail {
        bottom: 12px;
        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: 64px;
    }

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

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

    .pp-ach-toast {
        top: 64px;
        padding: 9px 16px;
        gap: 9px;
        max-width: calc(100vw - 32px);
    }

    .pp-ach-toast-name {
        font-size: 13px;
    }
}

@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;
    }

    .pp-ach-toast-tag {
        display: none;
    }
}

/* ------------------------------------------------------------------
   The gun strip with ten guns in it
   ------------------------------------------------------------------
   Ten chips are wider than a narrow window, and a strip that wraps grows
   upward into the ship's lane, so it stays on one line and scrolls
   sideways, ending well short of the corner buttons.
*/

.pp-guns {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.pp-guns::-webkit-scrollbar {
    display: none;
}

.pp-gun {
    flex: 0 0 auto;
}

.pp-gun-hits {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pp-guns {
        gap: 3px;
    }
}

/*
 * 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;
        bottom: 12px;
    }

}

@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 gun's level on the strip, as pips that fill as it is used. */
.pp-gun-pips {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-left: 2px;
}

.pp-gun-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.pp-gun-pip-on {
    background: #e0b64a;
}

.pp-gun-on .pp-gun-pip {
    background: rgba(255, 255, 255, 0.32);
}

.pp-gun-on .pp-gun-pip-on {
    background: #ffffff;
}

/*
 * The corner rail is not something anyone reaches for mid-run, and the gun panel
 * needs that corner, so during a live arcade match the rail waits for the pause.
 */
body.pp-arcade.pp-playing .pp-rail,
body.pp-arcade.pp-playing .pp-sound-menu {
    display: none;
}

/* 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, so there is no pointer: two things answering the same
 * hand, one of them a cursor, is one too many. And while it is being played the
 * screen belongs to the run, the way it does in the canvas arcade: the rail, the
 * sound button and the way into flight all wait for the pause.
 */
body.pp-lane .pp-hud {
    display: none;
}

body.pp-lane.pp-playing .pp-rail,
body.pp-lane.pp-playing .pp-sound-menu {
    display: none;
}

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

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