/*
 * The run overlays (pause, summary), the Deep space launcher rows, the
 * Expedition HUD, and the gun strip along the bottom of the screen.
 *
 * The strip's rules moved here from css/space3d.css, which reached the file
 * size cap: the two files that drew it are now one, and this file is linked
 * after that one, so nothing about the cascade changed.
 */

/* ---------------- the run card ---------------- */

.pp-runcard-veil {
    position: fixed;
    inset: 0;
    /* Above the game surfaces, below the frame and the panels, and
       click-through: the page stays usable while the run is held. */
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 30, 43, 0.62);
    pointer-events: none;
    cursor: default;
}

.pp-runcard-veil[hidden] {
    display: none;
}

/*
 * What the veil may not cover.
 *
 * The sheet exists to hold back the FIELD, which is the thing a held run has
 * stopped. The frame around it is a different matter: the score box, the place
 * card, the ledger, the hull heat and the expedition readout are what a player
 * who has pressed pause has stopped to look at, and the corner rail and the
 * header are what they have stopped to reach for. Drawn under 62 per cent of
 * dark those all read as switched off, which is the whole of the complaint.
 * The rail (95), the sound button (96) and the header (100) were already
 * clear; these are the rest of the frame, lifted to one band just above the
 * veil and still under every panel, drawer, toast and modal.
 *
 * The run card itself is a child of the veil and so sits at 90. It is centred
 * and these are at the edges, so nothing here is drawn over it.
 */
.game-stats,
.bubble-counts,
.pp-exp-hud,
.pp-census {
    z-index: 92;
}

/*
 * And what a held run may not dim.
 *
 * Everything around the field steps back while the field is being flown: the
 * header drops to two fifths in flight, and its logo and menu button to about
 * three quarters of that again in the arcade. That is right while there is
 * flying to do and wrong the moment there is not, because a player who has
 * pressed pause has stopped to reach for exactly these, and a live control
 * drawn that faint reads as a dead one. js/hud-cards.js marks the body while
 * the run card is up.
 *
 * Opacity only. Giving the header its own bar back as well was tried and
 * reverted: during a run the bar is transparent so the score box can sit up
 * against the top edge, and painting the bar back laid 70 per cent of dark
 * over that box, which took its figures from 255 to 37. Full strength white on
 * the veil reads perfectly well without it.
 *
 * Here rather than in css/space3d.css because the rules it has to beat are in
 * that file and this one is linked after it.
 */
body.pp-held .site-header,
body.pp-held .hamburger-btn,
body.pp-held .header-logo-img {
    opacity: 1;
}

.pp-runcard {
    pointer-events: auto;
    min-width: 300px;
    max-width: 420px;
    padding: 30px 34px 26px;
    background: #1c2434;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    text-align: center;
    color: #ffffff;
    font-family: Arial, sans-serif;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.pp-runcard-mode {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.pp-runcard-title {
    margin-top: 6px;
    font-size: 34px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.pp-runcard-stats {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin: 22px 0 24px;
}

.pp-runcard-stat {
    display: flex;
    flex-direction: column;
    min-width: 56px;
}

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

.pp-runcard-lab {
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.pp-runcard-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pp-runcard-btn {
    padding: 10px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pp-runcard-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.pp-runcard-accent {
    border-color: transparent;
}

.pp-runcard-accent:hover {
    filter: brightness(1.12);
}

.pp-runcard-hint {
    margin-top: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* ---------------- the Deep space section ---------------- */

.pp-deep-btns .pp-opt-btn.pp-deep-active {
    outline: 2px solid rgba(255, 255, 255, 0.35);
}

/* ---------------- the Expedition HUD, top right ---------------- */

.pp-exp-hud {
    position: fixed;
    top: 86px;
    right: 18px;
    width: 190px;
    background: rgba(20, 26, 38, 0.85);
    border-radius: 10px;
    padding: 10px 12px;
    z-index: 30;
    text-align: right;
}

.pp-exp-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.pp-exp-name span {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 400;
    margin-top: 2px;
}

.pp-exp-standing {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    margin-top: 6px;
}

.pp-exp-chart {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 0;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
}

.pp-exp-chart:hover {
    background: rgba(255, 255, 255, 0.18);
}


/* The census flows inside the HUD column instead of floating over it. */
.pp-exp-hud .pp-census {
    position: static;
    transform: none;
    margin-top: 10px;
    pointer-events: none;
}

/* ---------------- the gun strip ---------------- */

/*
 * Arcade gun picker. Number keys still work; these are the same choice by mouse.
 * Docked to the bottom edge rather than floating above it, so it reads as part
 * of the frame instead of as something sitting on the play field.
 *
 * It spans the whole width. There are fourteen guns, and the row used to stop
 * 360 pixels short of the right edge to clear the corner rail, which cut six of
 * them off mid-word with nothing on screen saying they were there. The rail
 * moved up a row instead; what still does not fit scrolls under two carets that
 * show only while there is something behind them.
 */
.pp-guns {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 66;
    display: none;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 0 8px;
    background: linear-gradient(to top, rgba(9, 12, 18, 0.72), rgba(9, 12, 18, 0));
    /* Furniture, not field: a pointer over the row is a pointer. */
    cursor: default;
}

/* The scroller is a child of the row, not the row itself: the carets hold
   still while the guns slide, and the row keeps the identity both engines
   bound their gun-picking click to. */
.pp-gun-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
    cursor: default;
}

.pp-gun-track::-webkit-scrollbar {
    display: none;
}

/* A caret keeps its slot when hidden, so the row never shuffles sideways. */
.pp-gun-caret {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: rgba(38, 49, 70, 0.92);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85);
    visibility: hidden;
    cursor: pointer;
}

/* Two borders of a small square, turned: a chevron that needs no font. */
.pp-gun-caret::before {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.pp-gun-caret-l::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.pp-gun-caret-r::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

.pp-gun-caret.pp-caret-on {
    visibility: visible;
}

.pp-gun-caret:hover {
    background: rgba(62, 80, 112, 0.96);
    color: #ffffff;
}

/*
 * 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,
body.pp-3d.pp-flying .pp-guns {
    display: flex;
}

.pp-gun {
    flex: 0 0 auto;
    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);
}

/*
 * The held gun while the cannon stands in for its reload. Amber rather than
 * dimmed: the trigger still works and the gun returns on its own, so this is a
 * countdown, not a loss.
 */
.pp-gun-wait {
    border-color: rgba(224, 182, 74, 0.65);
    box-shadow: inset 0 -2px 0 rgba(224, 182, 74, 0.8);
}

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

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

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

    .pp-gun-name {
        display: none;
    }
}

/* 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 gun row carrying a deep space rack ----------------
 *
 * The capital battles fire their own eight-gun rack and used to draw a small
 * readout of it into the corner of the run canvas, under the corner buttons,
 * while the real gun row sat at the bottom of the screen with nothing in it.
 * The row carries that rack now, so it needs the two things the arcade chips
 * never had to show: how many rounds are left, and how hot the gun is.
 */

.pp-gun-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.62);
    font-variant-numeric: tabular-nums;
}

.pp-gun-on .pp-gun-count {
    color: rgba(255, 255, 255, 0.9);
}

/* The heat meter is the chip's own underline, so a hot gun is read at the
   edge of vision without another row of furniture to look at. It is inset
   rather than flush with the bottom, because the row sits on the bottom edge
   of the screen and a meter drawn there would be the last three pixels of the
   display. */
.pp-gun-heat {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 3px;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.pp-gun-heat > i {
    display: block;
    width: 0;
    height: 100%;
    background: #e0b64a;
    transition: width 0.12s linear;
}

.pp-gun-hot .pp-gun-heat > i {
    background: #e0563f;
}

/* The chip has to be the meter's containing block for that to sit on it. */
.pp-guns .pp-gun {
    position: relative;
}