/*
    The arrangement item 88 settled: the scene with its subtitle at the left, a folder with the values, the journal and the relations at the right, what the
    player taps along the right edge, and a header above. A large screen puts the actions under the subtitle instead of the rail, a device held upright
    stacks the scene above the folder, and beside the rail the scene can fill the screen. One dark scheme, its colours as the variables below, and the
    system's typefaces.
*/
:root {
    --bg: #12151c;
    --panel: #1a1f29;
    --panel-2: #222836;
    --line: #2f3646;
    --ink: #e8ecf4;
    --muted: #96a0b5;
    --accent: #7aa2ff;
    --good: #5fcf8e;
    --bad: #ef7a7a;
    --warn: #e8b45c;
    --radius: 10px;
    --scrollbar: #3a4254;

    /* The frame a large screen puts around the scene, and the ink the subtitle is written with on it. */
    --photo: #f6f3ec;
    --photo-ink: #1d2230;
    --photo-muted: #5b6274;

    /* The page is dark, which is what the browser's own controls have to know to match it. */
    color-scheme: dark;

    /*
        A pixel of spacing that grows at half the rate of the text, so a large screen gets larger type without everything around it spreading as much.
        It is 1px as long as the root keeps its 16px, which every size step but the last does. What holds text, the width of a tile or a card, is given in
        rem instead, so it grows with the text it has to fit.
    */
    --px: calc((16px + 1rem) / 32);

    /* The sizes that grow with the screen. Nothing else is redefined by the size steps below. */
    --rail-width: calc(74 * var(--px));
    --panel-width: calc(400 * var(--px));
    --value-width: 9.375rem;
    --bar-height: calc(5 * var(--px));
    --reading-width: 62ch;
}

* {
    box-sizing: border-box;
    /* Thin and in the palette. Chromium draws its own wide, light bar otherwise; these two properties are the standard both engines follow. */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
}

/*
    The size every other one is given relative to. It stays at 16px, so text on a phone, a tablet and an ordinary screen keeps the size it was laid out
    for, and grows with the height of a large screen beyond that, up to 22px; see the last size step. The height rather than the width, since a wide
    screen is not a tall one, and the height is what decides how far away it stands.
*/
html {
    font-size: 16px;
}

/* #app is the element Blazor renders into, so it has to pass the window's height on, or the game grows with its content instead of scrolling. */
html, body, #app {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg);
    color: var(--ink);
    overflow: hidden;
    font: 0.875rem/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

    /* A pull at the top would reload the game, which must not happen to a life in the middle of a cycle. */
    overscroll-behavior: none;
}

/*
    A double tap does not zoom: a quick second tap on a button is a second tap. Pinching still does. Set on everything, because a scrolling element
    such as the journal starts the browser's search for what is allowed anew.
*/
*, *::before, *::after {
    touch-action: manipulation;
}

/*
    The page reaches into the cut-outs of the screen (viewport-fit=cover), so the game keeps out of them: the background fills them, and nothing to read
    or to tap lies behind a camera. Outside an installed application and a phone held sideways the insets are 0 and nothing moves.
*/
#app {
    box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Icons ---------- */

/* An icon is a mask filled with the colour of the text around it, so it follows its button into every state. The image comes from the component. */
.icon {
    display: inline-block;
    flex: 0 0 auto;
    width: var(--icon-size, 1.15em);
    height: var(--icon-size, 1.15em);
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---------- The frame of the game ---------- */
/* Scene and folder share the screen in halves, so neither takes room from the other; see the layouts at the end for the others. */
.game {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--rail-width);
    grid-template-areas: "header header header" "stage folder rail";
    overflow: hidden;
}

.message {
    padding: 24px;
    color: var(--muted);
    white-space: pre-wrap;
}

.message.error {
    color: var(--bad);
}

/* ---------- While the application loads ---------- */
/*
    Two stages under one picture: Blazor's own start, which it reports in --blazor-load-percentage, and then the asset set, which has no share to report.
    The splash stands outside #app so the logo keeps playing across both, and whatever the page shows other than .loading fades it out.
*/
.splash {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg);
    transition: opacity .35s ease, visibility 0s linear .35s;
}

body:has(#app > :not(.loading)) .splash {
    opacity: 0;
    visibility: hidden;
}

.splash-logo {
    width: min(260px, 46vmin);
    aspect-ratio: 1;
    object-fit: contain;
}

/* The still one only stands in where the system asks for less motion. */
.splash-still {
    display: none;
}

.splash-bar {
    width: min(220px, 40vmin);
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.splash-bar > div {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    border-radius: inherit;
    background: var(--accent);
    transition: width .2s ease;
}

/* Blazor is running and the asset set is on its way. Nothing counts any more, so the bar moves instead of filling. */
body:has(#app > .loading) .splash-bar > div {
    width: 35%;
    animation: splash-busy 1.1s ease-in-out infinite;
}

@keyframes splash-busy {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(290%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .splash-motion {
        display: none;
    }

    .splash-still {
        display: block;
    }

    body:has(#app > .loading) .splash-bar > div {
        width: 100%;
        animation: none;
        opacity: .6;
    }
}

/* ---------- The screen before a life ---------- */
/* A card in the middle rather than the game's grid. It works held either way, so the hint to turn the device leaves it alone. */
/* Centred by the card's margins rather than by the flex box, which would push a card taller than the window out of reach at the top. */
.start {
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    padding: 16px;
}

.start-card {
    width: min(460px, 100%);
    margin: auto 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px 20px 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.start-card h1 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 600;
}

.start-question {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 0.8125rem;
}

.start-problem {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--bad);
    border-radius: 8px;
    color: var(--bad);
    font-size: 0.7812rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.start-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.start-choice {
    position: relative;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    --icon-size: 1.375rem;
}

.start-choice:hover,
.start-choice:focus-visible,
.start-choice:has(input:focus-visible) {
    border-color: var(--accent);
}

.start-choice.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0e1320;
}

.start-choice b {
    display: block;
    font-weight: 600;
}

.start-choice small {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    opacity: .8;
}

/* The file input itself is never seen: the label around it is what is tapped, and the input stays reachable from the keyboard. */
.start-choice input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* A line below the choices about installing the application: how to do it by hand, or how far an installed one is with getting ready to play offline. */
.start-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.7812rem;
    --icon-size: 1.125rem;
}

.start-note.ready {
    color: var(--good);
}

.start-note small {
    display: block;
    margin-top: 2px;
    opacity: .8;
    overflow-wrap: anywhere;
}

/* ---------- Simulating lives ---------- */
/* A page for whoever builds a set: the start card, wider, with the parameters as a form and what came out as a table. */
.simulation .start-card {
    width: min(960px, 100%);
}

.simulation h2 {
    margin: 18px 0 8px;
    font-size: 0.875rem;
}

.simulation-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px 14px;
    align-items: end;
}

.simulation-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: 0.75rem;
}

.simulation-form select,
.simulation-form input {
    padding: 8px 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
}

.simulation-form .start-choice {
    justify-content: center;
}

.simulation-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    color: var(--muted);
}

.simulation-timing {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 18px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.simulation-timing dt {
    color: var(--muted);
}

.simulation-timing dd {
    margin: 0;
}

.simulation code {
    padding: 2px 6px;
    background: var(--panel-2);
    border-radius: 5px;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.simulation-results {
    overflow-x: auto;
}

.simulation-results table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.simulation-results th,
.simulation-results td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.simulation-results th {
    color: var(--muted);
    font-weight: 600;
}

.simulation-back {
    margin-top: 18px;
    text-decoration: none;
}

/* ---------- Character creation ---------- */
/* The card of the screen before a life, a little wider, since answers stand side by side. It scrolls within whatever an on-screen keyboard leaves. */
.creation .start-card {
    width: min(620px, 100%);
}

.creation-question {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.creation-question legend {
    margin-bottom: 6px;
    padding: 0;
    color: var(--muted);
    font-size: 0.7812rem;
}

/*
    The person as chosen so far takes the first column, so every answer shows at once what it changes. It stays in view while the answers scroll past, and
    is never taller than the screen leaves it. The portrait of the status column is styled for the same class further down, so these rules name the layout
    as well to win over it.
*/
.creation .start-card:has(.with-portrait) {
    width: min(920px, 100%);
}

.creation-layout.with-portrait {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 22px;
    margin-bottom: 14px;
}

.creation-layout .creation-portrait {
    position: sticky;
    top: 0;
    width: min(100%, calc((100dvh - 80px) * 3 / 4));
    justify-self: center;
    cursor: default;
}

.creation-fields {
    min-width: 0;
}

.creation-name {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.creation-name label {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--muted);
}

/* 16px, because a smaller field makes a phone zoom into the page when it is focused. */
.creation-name input {
    height: 42px;
    padding: 0 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.creation-name input:focus {
    outline: none;
    border-color: var(--accent);
}

.creation-draw,
.creation-option {
    min-height: 42px;
    padding: 0 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.creation-draw {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    --icon-size: 1.25rem;
}

.creation-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.creation-draw:hover,
.creation-draw:focus-visible,
.creation-option:hover,
.creation-option:focus-visible {
    border-color: var(--accent);
}

/* A chosen answer is marked by colour alone: set in bold it would grow wider, and the answers would wrap differently with every choice. */
.creation-option[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #0e1320;
}

/* The sex on the left, drawing the whole person again on the right: both change everything at once. */
.creation-sex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.creation-sex-row .creation-question {
    margin: 0;
}

/*
    Each attribute one line however many options it has, so the screen keeps its length whatever the asset set asks. Two side by side where the column is
    wide enough for an answer to be read, one below the other where it is not.
*/
.creation-steppers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 10px 12px;
    margin-bottom: 14px;
}

.creation-stepper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.creation-stepper-label {
    color: var(--muted);
    font-size: 0.7812rem;
}

.creation-stepper-control {
    display: flex;
    align-items: center;
    min-height: 42px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* A long answer is cut rather than wrapped, so a step never moves the arrows. */
.creation-stepper-control output {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.creation-step {
    flex: 0 0 40px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--ink);
    cursor: pointer;
    --icon-size: 1.25rem;
}

.creation-step:hover,
.creation-step:focus-visible {
    color: var(--accent);
}

.creation-step:disabled {
    opacity: .3;
    cursor: default;
}

.creation-hint {
    margin: 0 0 12px;
    color: var(--warn);
    font-size: 0.7812rem;
}

.creation-buttons {
    display: flex;
    gap: 8px;
}

.creation-buttons .start-choice {
    flex: 1 1 0;
    justify-content: center;
}

.creation-buttons .start-choice:disabled {
    opacity: .45;
    cursor: default;
}

/* A phone held sideways with its keyboard open has little more than a hand's width of height left, so the card gives up its padding first. */
@media (max-height: 480px) {
    .creation.start {
        padding: 8px;
    }

    .creation .start-card {
        padding: 12px 14px 10px;
    }

    .creation-question {
        margin-bottom: 10px;
    }

}

/* Too narrow for two columns: the portrait stands above the answers and leaves them most of the screen. */
@media (max-width: 640px) {
    .creation-layout.with-portrait {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    /* As wide as the card, but no taller than half the screen, so the first answers are still in sight below it. */
    .creation-layout .creation-portrait {
        position: relative;
        width: min(100%, calc(50dvh * 3 / 4));
    }
}

/* ---------- Header ---------- */
.header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: calc(14 * var(--px));
    padding: calc(6 * var(--px)) calc(12 * var(--px));
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.header .name {
    font-weight: 600;
}

.header .separator {
    width: 1px;
    height: 14px;
    background: var(--line);
}

.header .money {
    margin-left: auto;
    color: var(--good);
    font-variant-numeric: tabular-nums;
}

.points {
    display: flex;
    gap: 4px;
    align-items: center;
}

.point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

.point.empty {
    background: var(--line);
}

/* ---------- Portraits ---------- */
/* A portrait stands uncropped in its own format. Its width is decided where it is used: in a choice, in character creation, under relations. */
.portrait {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--panel-2);
}

.portrait img,
.scene img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
    One part of a portrait. Every part of a kit is drawn on the same canvas, so stacking them at full size lines them up, and a portrait keeps its own
    format in whatever box it stands in.
*/
.portrait .layer,
.scene .layer {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/*
    The background behind a portrait, covering its box from the middle out, where a scene is kept calm for a person to stand. Less saturation and
    contrast let it step back behind the person. It is not blurred: at full strength that looked worse than the sharp image.
*/
.backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(0.8) contrast(0.85);
}

/* ---------- Scene and subtitle ---------- */
.stage {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: calc(12 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--px));
}

/* Scene and subtitle as one picture. Only a large screen frames them, see the actions under the scene; elsewhere the frame is not there at all. */
.photo {
    display: contents;
}

/*
    The scene in a fixed format, so a person keeps their size against the background whatever the window does. It is a button, since a tap lets it fill
    the screen beside the rail.
*/
.scene {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--panel-2);
    cursor: zoom-in;
}

/* One person, drawn whole on their own canvas. */
.scene .figure {
    position: absolute;
    inset: 0;
}

/*
    The player on the left and the person they are doing something with on the right, each in a half of their own, so that they do not overlap: standing
    close would suggest a closeness the relation may not have.
*/
.scene.with-companion .figure {
    inset: 0 48% 0 2%;
}

.scene.with-companion .figure.companion {
    inset: 0 2% 0 48%;
}

/* What the last tap brought about, set apart from the journal, so it is seen without being looked for. */
.subtitle {
    flex: 0 0 auto;
    padding: calc(10 * var(--px)) calc(16 * var(--px));
    text-align: center;
    background: rgba(18, 21, 28, .82);
    border: 1px solid var(--line);
    border-radius: 12px;
    animation: subtitle-in .25s ease-out;
}

.subtitle .sentence {
    margin: 0 0 4px;
}

/* Only the last thing that was said, since the last tap told nothing. It does not arrive, it stays. */
.subtitle.quiet {
    animation: none;
}

.subtitle.quiet .sentence {
    color: var(--muted);
}

.subtitle-origin {
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 0.6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 2px 0 6px;
}

.mark {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.mark.up {
    color: var(--good);
    background: rgba(95, 207, 142, .13);
}

.mark.down {
    color: var(--bad);
    background: rgba(239, 122, 122, .13);
}

/* The question that waits, answered where the player looks after a tap. */
.question {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.question b {
    display: block;
    margin-bottom: 8px;
}

.answers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: calc(7 * var(--px));
    text-align: left;
}

.question .back {
    width: 100%;
    margin: 8px 0 0;
}

@keyframes subtitle-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .subtitle {
        animation: none;
    }
}

/* ---------- Folder ---------- */
.folder {
    grid-area: folder;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
}

/*
    The tabs along the edge towards the scene, from the top down. The selected one has the colour of the folder, stands out further, carries a stripe in
    the accent and has no edge towards the folder, so it runs into it; the others lie darker behind. Turned, so the text runs upwards: what is called left
    here is on the right on the screen, towards the folder.
*/
.folder-tabs {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(4 * var(--px));
    padding: calc(14 * var(--px)) 0 0 calc(6 * var(--px));
    margin-right: -1px;
}

.folder-tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: calc(30 * var(--px));
    padding: calc(14 * var(--px)) 0;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0 9px 9px 0;
    color: var(--muted);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

.folder-tab[aria-selected="true"] {
    width: calc(36 * var(--px));
    background: var(--panel);
    border-left-color: var(--panel);
    border-right: 3px solid var(--accent);
    color: var(--ink);
    font-weight: 600;
}

.folder-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.folder-page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--panel);
    border-left: 1px solid var(--line);
}

/* ---------- Values ---------- */
/* In as many columns as there is room for, since a full asset set has many values, each group under a heading across all of them. */
.status {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(10 * var(--px)) calc(14 * var(--px));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--value-width), 1fr));
    column-gap: calc(18 * var(--px));
    align-content: start;
}

.status .section {
    grid-column: 1 / -1;
}

.status .section:first-child {
    border-top: none;
    padding-top: 0;
}

.section {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 6px;
    margin: 4px 0;
}

.value {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: calc(2 * var(--px)) calc(6 * var(--px));
    font-size: 0.7812rem;
    margin-bottom: calc(7 * var(--px));
    padding: 1px 4px;
    border-radius: 5px;
    transition: background .4s;
}

.value .label {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.value .figure {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
}

/* A row that says something rather than counting it: the label keeps its width, and the text takes the rest and may wrap. */
.value.text {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.value.text .figure {
    color: var(--ink);
    font-size: inherit;
    font-variant-numeric: normal;
    text-align: right;
}

/* A value the last tap moved lights up until the next one. */
.value.moved {
    background: rgba(122, 162, 255, .14);
    box-shadow: 0 0 0 3px rgba(122, 162, 255, .14);
}

.value.moved .label,
.value.moved .figure {
    color: var(--ink);
}

.bar {
    grid-column: 1 / 3;
    height: var(--bar-height);
    border-radius: 3px;
    background: var(--panel-2);
    overflow: hidden;
}

.bar i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width .6s ease;
}

.bar.critical i {
    background: var(--bad);
}

/* The warning in front of a value in danger. The label is muted, the warning is not. */
.value .label .icon {
    color: var(--bad);
    margin-right: 3px;
}

/* ---------- Relations ---------- */
.relations {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(12 * var(--px));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
    gap: calc(8 * var(--px));
    align-content: start;
}

.person-card {
    display: flex;
    gap: calc(11 * var(--px));
    padding: calc(9 * var(--px));
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: box-shadow .4s;
}

.person-card.moved {
    box-shadow: 0 0 0 3px rgba(122, 162, 255, .3);
}

/* The portrait and, below it, what can be done with the person, so the text beside them has the whole height. */
.person-side {
    flex: 0 0 auto;
    width: calc(96 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--px));
}

.person-portrait {
    width: 100%;
}

.person-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    --icon-size: 0.875rem;
}

.person-actions:hover,
.person-actions:focus-visible {
    border-color: var(--accent);
}

.person-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.person-text small {
    color: var(--muted);
    margin-bottom: 3px;
}

.person-text .value {
    margin-bottom: 3px;
}

.traits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

/* ---------- Journal ---------- */
/* Laid out from its end, so a new entry is in sight without the page scrolling to it. */
.journal {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column-reverse;
}

/* Takes the free space below it, so a short journal still starts at the top. */
.journal-content {
    margin-bottom: auto;
}

.entry {
    margin-bottom: 11px;
    max-width: var(--reading-width);
}

.entry .sentence {
    margin: 0;
}

.entry.system .sentence {
    color: var(--muted);
    font-style: italic;
}

.entry.death .sentence {
    color: var(--bad);
}

.change {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.7812rem;
    color: var(--muted);
    padding-left: 14px;
    margin-top: 2px;
}

.change.up {
    color: var(--good);
}

.change.down {
    color: var(--bad);
}

.change .delta {
    font-variant-numeric: tabular-nums;
    min-width: 44px;
}

.cycle-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 10px;
}

.cycle-mark::before,
.cycle-mark::after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
}

/* ---------- Action rail ---------- */
/* Above the panel, which slides in underneath it. */
.rail {
    grid-area: rail;
    position: relative;
    z-index: 2;
    background: var(--panel);
    border-left: 1px solid var(--line);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: calc(6 * var(--px));
    padding: calc(6 * var(--px));
    overflow: hidden;
    min-height: 0;
}

.rail-list,
.rail-commands {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--px));
    overflow-y: auto;
    min-height: 0;
}

.rail-button {
    flex: 0 0 auto;
    min-height: calc(42 * var(--px));
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--ink);
    border-radius: var(--radius);
    padding: calc(4 * var(--px)) calc(2 * var(--px));
    font: inherit;
    font-size: 0.625rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(3 * var(--px));
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    word-break: break-word;
    --icon-size: 1.125rem;
}

.rail-button:hover,
.rail-button:focus-visible {
    border-color: var(--accent);
}

.rail-button.done {
    border-color: var(--accent);
    color: var(--accent);
}

.rail-button.due {
    background: var(--accent);
    color: #0e1320;
    font-weight: 600;
}

/* The entry whose content the panel shows. */
.rail-button.selected {
    background: rgba(122, 162, 255, .14);
    border-color: var(--accent);
}

.rail-button:disabled,
.choice:disabled {
    opacity: .45;
    cursor: default;
    border-color: var(--line);
}

/* ---------- Tooltip ---------- */
/* One element over the whole page, placed by js/tooltip.js next to what it belongs to. It never catches the pointer, so it cannot hide what it explains. */
.tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    max-width: 240px;
    padding: 7px 11px;
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    font-size: 0.7812rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity .12s ease, transform .12s ease;
}

.tooltip.right {
    transform: translateX(-4px);
}

.tooltip.visible {
    opacity: 1;
    transform: none;
}

/* A square turned on its corner, with the two borders that face outwards. It points right, towards the rail, unless the tip had to go to the right. */
.tooltip::after {
    content: "";
    position: absolute;
    top: var(--tooltip-arrow, 50%);
    right: -5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: inherit;
    border: solid var(--line);
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
}

.tooltip.right::after {
    right: auto;
    left: -5px;
    border-width: 0 0 1px 1px;
}

@media (prefers-reduced-motion: reduce) {
    .tooltip,
    .tooltip.right {
        transform: none;
        transition: none;
    }
}

/* ---------- Panel ---------- */
.panel {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
    z-index: 1;
    width: min(var(--panel-width), 100%);
    min-height: 0;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    /* Has to clear its own width and the rail, or a strip of it stays in sight. */
    transform: translateX(calc(100% + var(--rail-width) + 10px));
    transition: transform .22s ease;
}

.panel.open {
    transform: none;
}

.panel:not(.open) {
    visibility: hidden;
}

.panel h2 {
    margin: 0;
    padding: calc(9 * var(--px)) calc(14 * var(--px));
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--line);
}

.panel-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(8 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--px));
}

.panel-group {
    display: flex;
    flex-direction: column;
    gap: calc(7 * var(--px));
}

/* While an event waits for its answer, which the subtitle asks, nothing else can be chosen. */
.game.answering .panel {
    opacity: .4;
    pointer-events: none;
}

.choice {
    text-align: left;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--radius);
    padding: calc(9 * var(--px)) calc(11 * var(--px));
    font: inherit;
    cursor: pointer;
}

.choice:hover,
.choice:focus-visible {
    border-color: var(--accent);
}

.choice-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.choice-head b {
    font-size: 0.8438rem;
    font-weight: 600;
    flex: 1;
}

.choice .price {
    color: var(--warn);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.choice .cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    font-size: 0.6875rem;
    white-space: nowrap;
    --icon-size: 0.6875rem;
}

/* A person beside their name, small enough to keep the list a list. The portrait of the status column is styled for the same class, hence both names. */
.choice.with-portrait {
    display: flex;
    align-items: center;
    gap: 11px;
}

.choice .choice-portrait {
    width: 44px;
    border-radius: 7px;
    cursor: inherit;
}

.choice-body {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.choice small {
    display: block;
    color: var(--muted);
    font-size: 0.7188rem;
    line-height: 1.35;
    margin-top: 2px;
}

.markers {
    margin-top: calc(5 * var(--px));
    display: flex;
    flex-wrap: wrap;
    gap: calc(5 * var(--px));
}

.marker {
    font-size: 0.6562rem;
    padding: 1px 6px;
    border-radius: 20px;
    background: #2a3142;
    color: var(--muted);
}

.marker {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    --icon-size: 0.75rem;
}

.marker.up {
    color: var(--good);
}

.marker.down {
    color: var(--bad);
}

.back {
    flex: 0 0 auto;
    margin: 0 8px 8px;
    padding: 8px;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ---------- Dialog and review, over everything ---------- */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(8, 10, 14, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dialog,
.review {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}

.dialog {
    max-width: 420px;
}

.review {
    width: min(720px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.review-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 12px;
}

.dialog h3,
.review h3 {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 8px;
    --icon-size: 1.25rem;
}

.dialog p {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.8125rem;
    white-space: pre-wrap;
}

.buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.buttons button {
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
    font: inherit;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.buttons button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0e1320;
    font-weight: 600;
}

/*
    Larger screens spend the room on readability; the layouts at the end decide what moves.
*/
@media (min-width: 1000px) and (min-height: 560px) {
    :root {
        --rail-width: calc(150 * var(--px));
        --panel-width: calc(420 * var(--px));
        --value-width: 11.25rem;
        --bar-height: calc(6 * var(--px));
        --reading-width: 66ch;
    }

    body {
        font-size: 0.9375rem;
    }

    .status {
        padding: calc(12 * var(--px)) calc(16 * var(--px));
    }

    .value {
        font-size: 0.875rem;
    }

    .value .figure {
        font-size: 0.75rem;
    }

    .header {
        font-size: 0.875rem;
        padding: calc(9 * var(--px)) calc(16 * var(--px));
    }

    .journal {
        padding: 18px 24px;
    }

    .rail-button {
        flex-direction: row;
        gap: calc(9 * var(--px));
        justify-content: flex-start;
        padding: calc(10 * var(--px)) calc(12 * var(--px));
        font-size: 0.8125rem;
        min-height: calc(44 * var(--px));
        text-align: left;
    }


    .panel h2 {
        font-size: 0.875rem;
        padding: calc(12 * var(--px)) calc(16 * var(--px));
    }

    .choice {
        padding: calc(11 * var(--px)) calc(13 * var(--px));
    }

    .choice-head b {
        font-size: 0.875rem;
    }
}

@media (min-width: 1500px) and (min-height: 760px) {
    html {
        font-size: clamp(16px, calc(16px + (100vh - 1000px) * .012), 22px);
    }

    :root {
        --rail-width: calc(170 * var(--px));
        --panel-width: calc(480 * var(--px));
        --bar-height: calc(7 * var(--px));
        --reading-width: 70ch;
    }

    body {
        font-size: 1rem;
    }

    .journal {
        padding: 26px 34px;
    }

    .entry {
        margin-bottom: 14px;
    }

    .change {
        font-size: 0.875rem;
    }

}

/* ---------- The scene filling the screen beside the rail ---------- */
/*
    Only while the rail stands, which a large screen does without. The folder steps aside and the scene grows as far as its format allows. Where there is
    room under it, as on a tablet, the subtitle stays there; where the scene takes the whole height, as on a phone held sideways, the subtitle lies over its
    lower edge instead, since below it would leave little more of the scene than the halves do.
*/
@media (max-width: 1199.98px), (max-height: 759.98px) {
    .game.full-screen {
        grid-template-columns: minmax(0, 1fr) var(--rail-width);
        grid-template-areas: "header header" "stage rail";
    }

    .game.full-screen .folder {
        display: none;
    }

    .game.full-screen .panel {
        grid-column: 1;
    }

    .game.full-screen .scene {
        cursor: zoom-out;
    }

    .game.full-screen .stage {
        container-type: size;
        position: relative;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 8px;
    }

    .game.full-screen .scene,
    .game.full-screen .subtitle {
        width: min(100%, 100cqh * 16 / 9);
    }

    @container (min-aspect-ratio: 4 / 3) {
        .game.full-screen .subtitle {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            width: calc(min(100%, 100cqh * 16 / 9) - 24px);
            max-height: 50%;
            overflow-y: auto;
            padding: 8px 14px;
            backdrop-filter: blur(6px);
            animation: none;
        }

        /* A question wants an answer, so the band may grow for it. */
        .game.full-screen .subtitle.asks {
            max-height: calc(100% - 40px);
        }
    }
}

/* ---------- A device held upright ---------- */
/* Not what the game is built for, but playable: the scene above the folder, the rail along the right edge as ever. */
@media (orientation: portrait) {
    .game {
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr) var(--rail-width);
        grid-template-areas: "header header" "stage rail" "folder rail";
    }

    .stage {
        max-height: 62dvh;
        border-bottom: 1px solid var(--line);
    }

    .panel {
        grid-row: 3;
        grid-column: 1;
    }

    .game.full-screen {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .game.full-screen .stage {
        max-height: none;
        border-bottom: none;
    }
}

/* ---------- The actions under the scene ---------- */
/*
    A large screen has room to show the actions without opening anything: the rail becomes the row of tabs above them, and the panel stands under the
    subtitle with what the first entry offers until the player opens another. The player taps right below the scene, and the result appears right above,
    where a follow up asks too. Categories stand one below the other, and the actions of one in as many columns as there is room for, never so narrow that
    their markers do not fit.
*/
@media (min-width: 1200px) and (min-height: 760px) {
    .game {
        grid-template-rows: auto auto auto minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "header header" "stage folder" "rail folder" "panel folder";
    }

    .stage {
        overflow: visible;
        padding-bottom: 0;
    }

    .scene {
        cursor: default;
    }

    /*
        A large screen frames scene and subtitle like an instant photograph: a thin light border around the scene and a wider one below it, which is
        where the subtitle is written.
    */
    .photo {
        display: flex;
        flex-direction: column;
        padding: calc(10 * var(--px)) calc(10 * var(--px)) 0;
        background: var(--photo);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    }

    .photo .scene {
        border: none;
        border-radius: 3px;
    }

    .photo .subtitle {
        min-height: calc(64 * var(--px));
        padding: calc(12 * var(--px)) calc(14 * var(--px)) calc(16 * var(--px));
        background: none;
        border: none;
        color: var(--photo-ink);
    }

    .photo .subtitle.quiet .sentence {
        color: var(--photo-muted);
    }

    .photo .subtitle-origin {
        color: #3b5bc4;
    }

    .photo .mark {
        background: rgba(0, 0, 0, .07);
        color: var(--photo-muted);
    }

    .photo .mark.up {
        color: #17804a;
        background: rgba(23, 128, 74, .12);
    }

    .photo .mark.down {
        color: #b23a3a;
        background: rgba(178, 58, 58, .12);
    }

    .photo .question {
        border-top-color: rgba(0, 0, 0, .12);
    }

    .photo .question .back {
        color: var(--photo-muted);
        border-color: rgba(0, 0, 0, .18);
    }

    .rail {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        gap: calc(6 * var(--px));
        padding: calc(12 * var(--px)) calc(12 * var(--px)) 0;
        background: none;
        border: none;
        overflow: visible;
    }

    .rail-list,
    .rail-commands {
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
    }

    .rail-button {
        min-height: calc(38 * var(--px));
        padding: calc(7 * var(--px)) calc(14 * var(--px));
    }

    .rail-button.default {
        background: rgba(122, 162, 255, .14);
        border-color: var(--accent);
    }

    .game .panel {
        grid-area: panel;
        justify-self: stretch;
        width: auto;
        background: none;
        border: none;
        box-shadow: none;
        transform: none;
        transition: none;
        visibility: visible;
    }

    /* The row of entries above names the first step and leads out of it; only a deeper step, such as the actions with one person, has its own. */
    .panel:not(.nested) h2,
    .panel:not(.nested) .back {
        display: none;
    }

    .panel h2 {
        border-bottom: none;
        padding: calc(10 * var(--px)) calc(12 * var(--px)) 0;
    }

    .panel-list {
        flex: 0 1 auto;
        padding: calc(8 * var(--px)) calc(12 * var(--px));
        gap: calc(4 * var(--px));
    }

    .panel-group {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(12.8125rem, 1fr));
        gap: calc(7 * var(--px));
    }

    .panel-group .section {
        grid-column: 1 / -1;
    }

    .panel-group:first-child .section {
        border-top: none;
        padding-top: 0;
    }

    .panel .back {
        align-self: flex-start;
        margin: 4px 12px 12px;
        padding: 7px 14px;
    }
}

/* ---------- The actions in a column of their own ---------- */
/*
    A very wide screen would stretch the halves until the scene is drawn larger than its images were made for, leave the folder half empty and crowd every
    action under the scene. From 2600 px, beyond a 4K screen at 150 percent, the actions get a column of their own between the scene and the folder, with
    the rail as its row of tabs, and the three share the width in thirds. The scene stops growing at the size its pictures still hold.
*/
@media (min-width: 2600px) and (min-height: 760px) {
    .game {
        grid-template-rows: auto auto minmax(0, 1fr);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "header header header" "stage rail folder" "stage panel folder";
    }

    .stage {
        overflow-y: auto;
        padding-bottom: calc(12 * var(--px));
        align-items: center;
    }

    .photo {
        width: min(100%, 1280px);
    }

    .rail,
    .game .panel {
        background: var(--panel);
        border-left: 1px solid var(--line);
    }

    .rail {
        padding-bottom: 4px;
    }

    .game .panel {
        min-height: 0;
        overflow-y: auto;
    }
}

/* ---------- The page for an unknown address ---------- */
/* The start card told as a short scene: a door nobody opens, two lines of journal, and a need that runs empty. Motion only, nothing waits for it. */
.lost {
    text-align: center;
}

.lost-door {
    width: 72px;
    height: 96px;
    margin: 4px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--line);
    border-radius: 36px 36px 6px 6px;
    color: var(--muted);
    font-size: 2.125rem;
    font-weight: 600;
    transform-origin: bottom center;
    animation: lost-wobble 3.2s ease-in-out 1.2s infinite;
}

.lost-journal {
    margin: 12px 0 18px;
    padding: 0;
    list-style: none;
    text-align: left;
    color: var(--muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.lost-journal li {
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--line);
    opacity: 0;
    animation: lost-appear .5s ease-out forwards;
}

.lost-journal li:nth-child(1) {
    animation-delay: .3s;
}

.lost-journal li:nth-child(2) {
    animation-delay: 1.1s;
}

.lost-need {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.7812rem;
}

.lost-bar {
    flex: 1;
    height: var(--bar-height);
    background: var(--panel-2);
    border-radius: 3px;
    overflow: hidden;
}

.lost-bar > div {
    height: 100%;
    width: 0;
    background: var(--bad);
    animation: lost-drain 2.6s ease-in 1.4s backwards;
}

.lost .start-choice {
    justify-content: center;
    text-decoration: none;
}

@keyframes lost-appear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lost-drain {
    from {
        width: 70%;
        background: var(--warn);
    }

    to {
        width: 0;
        background: var(--bad);
    }
}

@keyframes lost-wobble {
    0%, 70%, 100% {
        transform: rotate(0);
    }

    76% {
        transform: rotate(-4deg);
    }

    82% {
        transform: rotate(3deg);
    }

    88% {
        transform: rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lost-door,
    .lost-journal li,
    .lost-bar > div {
        animation: none;
        opacity: 1;
    }
}

/* What Blazor shows when something escaped the application. Hidden until the runtime unhides it. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    background: var(--warn);
    color: #0e1320;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}