/*
 * Galaxy hover, the census readout, the chart panel, and the two body
 * states the hazards and the warp put on the page.
 */

/* The hover ring: a full circle in the galaxy's own tint, and the label. */
.pp-galaxy-ring {
    position: fixed;
    display: none;
    border: 1px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
    z-index: 40;
}

.pp-galaxy-tip {
    position: fixed;
    display: none;
    transform: translateX(-50%);
    background: rgba(20, 26, 38, 0.92);
    border-radius: 8px;
    padding: 7px 12px;
    text-align: center;
    pointer-events: none;
    z-index: 41;
}

/* The caret: the box points up at the galaxy it names. */
.pp-galaxy-tip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(20, 26, 38, 0.92);
}

.pp-galaxy-tip b {
    display: block;
    color: #fff;
    font-size: 13px;
}

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

/* The census: a count and a bar that only goes down. */
.pp-census {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: rgba(20, 26, 38, 0.85);
    border-radius: 8px;
    padding: 6px 14px;
    text-align: center;
    z-index: 30;
    pointer-events: none;
}

.pp-census-count {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.pp-census-track {
    display: block;
    width: 150px;
    height: 4px;
    margin: 4px auto;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    overflow: hidden;
}

.pp-census-track i {
    display: block;
    height: 100%;
    background: #6f8fd0;
}

.pp-census-name {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The chart. */
.pp-chart {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(430px, 92vw);
    max-height: 78vh;
    overflow-y: auto;
    background: #1b2432;
    border-radius: 12px;
    padding: 16px 18px;
    z-index: 220;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.pp-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-chart h2 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.pp-chart-close {
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 8px;
    color: #fff;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.pp-chart-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.pp-chart-standing {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin: 8px 0 12px;
}

.pp-chart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #202a3c;
    border-radius: 9px;
    padding: 9px 12px;
    margin-bottom: 7px;
}

.pp-chart-here {
    background: #33405a;
}

.pp-chart-name b {
    display: block;
    color: #fff;
    font-size: 13px;
}

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

.pp-chart-name .fa-check {
    color: #4ec98a;
    font-size: 10px;
}

.pp-chart-mark {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pp-chart-warp {
    background: #6f8fd0;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
}

.pp-chart-warp:hover {
    background: #7f9fdd;
}

.pp-chart-warp:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}

/* An ion sheet is over you: the HUD and the reticle are gone for a beat. */
body.pp-ion #background-canvas.pp-overlay {
    opacity: 0;
}

body.pp-ion .pp-corner,
body.pp-ion #pp-guns,
body.pp-ion .pp-place,
body.pp-ion .site-header,
body.pp-ion .pp-census {
    opacity: 0.04;
}

/* A warp holds the frame: the rails, the strip and the place card dim. */
body.pp-warping .pp-corner,
body.pp-warping #pp-guns,
body.pp-warping .pp-place,
body.pp-warping .site-header {
    opacity: 0.25;
    transition: opacity 0.4s;
}

/* The tooltip's key line: how the hovered galaxy is engaged. */
.pp-galaxy-tip em {
    display: block;
    font-style: normal;
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    margin-top: 4px;
    letter-spacing: 0.04em;
}

/* Unexplored chart rows: named, graded, and inert. */
.pp-chart-dim {
    opacity: 0.42;
}

.pp-chart-unknown {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------------
   Where you are
   ------------------------------------------------------------------
   A small card in the top right corner naming the galaxy and its grade,
   for everything outside Expedition: browse, flight and every run in the
   3D field. It sits under the run's score strip rather than beside it, so
   one column at that corner reads top to bottom: what you are scoring,
   then where you are scoring it. Expedition keeps its own HUD in this
   corner and names the galaxy itself, so the card stands down for it.
*/

.pp-place {
    position: fixed;
    top: 92px;
    right: 24px;
    /* Above the pause veil, for the same reason as the ledger. */
    z-index: 92;
    /* A name, not a control. */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 8px 13px 9px;
    background: rgba(23, 30, 43, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-family: Arial, sans-serif;
    pointer-events: none;
}

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

.pp-place-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.pp-place-grade {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

body.pp-expedition .pp-place {
    display: none;
}

/*
 * The bubble counters take the same corner. They are up in browse and in
 * flight and gone during a run, which is exactly when the place card is up,
 * so in the 3D field they take the line under it instead of drawing across
 * it: which sky you are in is read first, how much of it you have popped
 * second. 92 is the card's own box, 44 tall on a 92px top with 12 clear.
 */
body.pp-3d .bubble-counts {
    top: 152px;
}

@media (max-width: 768px) {
    .pp-place {
        top: 82px;
        right: 12px;
        padding: 6px 10px 7px;
    }

    /* The smaller card, by the same arithmetic. */
    body.pp-3d .bubble-counts {
        top: 132px;
    }

    .pp-place-name {
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------
   The ledger, bottom left
   ------------------------------------------------------------------
   Three bars that say whether a run is getting anywhere: this run against
   your own best, the hits left before the next gun, the nearest unearned
   badge. js/hud-cards.js fills them. It sits bottom left because the right
   half of the frame is the score box, the place card and the corner rail. It
   rides the bottom band, like every other bottom anchored piece, so it clears
   the gun row while there is one and sits on the bottom edge when there is
   not, and it is only ever up while a run is on the screen, which is exactly
   when the left hand rail is not, so the two cannot meet.

   It never takes a click. Reading it must never cost the trigger.
*/

.pp-ledger {
    position: fixed;
    left: 18px;
    bottom: calc(var(--pp-band) + var(--pp-edge));
    /* Above the pause veil: a run held is when a player stops to read this,
       and a card seen through a dark sheet reads as switched off. */
    z-index: 92;
    width: 248px;
    padding: 9px 11px 10px;
    background: rgba(23, 30, 43, 0.72);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-family: Arial, sans-serif;
    pointer-events: none;
}

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

.pp-led-row + .pp-led-row {
    margin-top: 8px;
}

.pp-led-row[hidden] {
    display: none;
}

.pp-led-top {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

/* The label gives way before the number does, and only when a long badge
   name leaves it no choice: which badge and how far along matter more than
   the word "next". */
.pp-led-lab {
    flex: 1 1 auto;
    min-width: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.pp-led-val {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
}

/* What the last hit was worth, for as long as it takes to read it. */
.pp-led-gain {
    font-size: 11px;
    font-weight: 700;
    color: #4ec98a;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.pp-led-hit .pp-led-gain {
    opacity: 1;
    transition: none;
}

.pp-led-bar {
    margin-top: 4px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.11);
    overflow: hidden;
}

.pp-led-bar > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #4d82c4;
    transition: width 0.18s linear;
}

/* A figure with nothing to be out of, a clock for instance, carries no bar
   rather than an empty one. */
.pp-led-plain .pp-led-bar {
    visibility: hidden;
}

/* No best set: no bar either, because there is nothing yet to measure
   against and a filled one would claim a target had been reached. The row
   grows its bar the first time a run in this mode finishes. */
.pp-led-first .pp-led-bar {
    visibility: hidden;
}

/* Past your own best: the bar stops being a target and becomes a result. */
.pp-led-won .pp-led-bar > i {
    background: #4ec98a;
}

.pp-led-won .pp-led-lab {
    color: #4ec98a;
}

/* On a short screen the card would meet the gun row, so it loses the badge
   row rather than sitting on top of it. */
@media (max-height: 620px) {
    .pp-ledger .pp-led-row:nth-child(3) {
        display: none;
    }
}

body.pp-ion .pp-ledger {
    opacity: 0.04;
}

body.pp-warping .pp-ledger {
    opacity: 0.25;
    transition: opacity 0.4s;
}